Tag Archives: iPad

Adobe Shadow:全ウェブ制作者必見!これがAdobeの本気!

0
Filed under 仕事ツール
Tagged as , , , , ,

ちょっと書きそびれているうちに遅くなってしまったネタです。。
最初に書こうと思っていたのは3月頭。
そう、new iPad発表の頃の話です。RetinaになったiPad、日本語にも対応したSiriを入れたiOS 5.1、予想を超えたものではないだけに、順当な感じがしてそれほど興奮はしなかったのですが、その頃、シレッと出てきたのがAdobe Shadow
Flashの状況とか、その他のアプリの話とか、「もうAdobeって時代じゃないよなー」なんて思いながら、そのShadowをチェックしてみたら、、
え!すげーーー!!何これ!そうそう!こういうのが欲しかったんだよ!と、悶絶!
そう、そこにはAdobeの本気が詰まっていたのです。
最後にone more thingがあるので、ちょっと長いエントリですが、是非最後までお付き合いください。

Adobe Shadowとは

Adobe Shadowについては、まず、ここの記事を読むといいと思います。

簡単に言ってしまえば、Adobe Shadowとは、複数のデバイスでのWEBプレビューを超簡単に行えるツールなのです!
PC/MacのChromeと、他のデバイスを関連付けて、あとはChromeで操作するだけで、各デバイスが自動的に同じページを表示してくれる、というものです。
それを踏まえて次のADOBE TVの動画を見てみるとよく分かります。

ただのビューアーでは終わらなくて、HTMLソースでエレメントを選択したら端末上でパーツがハイライト出来たりもします!

インストール!

必要なソフトは全て無料ですのでサクサクインストールしていきましょう。
まず、↓ここからMacのアプリをダウンロードし、pkgファイルをダブルクリックしてインストールします。ちなみに、Windows用はWindows 7のみ対応のようです。

次に、iOSアプリをダウンロードしてインストール。

AndroidアプリのAdobe Shadowもインストール。

最後に、Chromeエクステンションをインストールします。Mac側のブラウザとしては現状Chromeのみです。

これで準備は完了!

試してみた!

まず、ChromeのShadowエクステンションを起動します。

これで接続を待っている状態です。
次に、デバイス側のアプリ側を起動し表示されるパスコードをChromeの方に入力すると接続されます。
準備これで終わりです。簡単!
あとは、Chromeでタブを切り替えたりすると、表示されているページがShadowで繋がったデバイスにも表示されます。
ちなみにこの接続はBonjour機能でつながっているようです。
で、試してみたテストの動画をまとめてアップしました。

同期していますねー。

さらに編集も出来る!

FirefoxならFirebug、Chromeならデベロッパーツールがあり、表示している要素のCSSとかHTML構造をリアルタイムに変更して表示を確認することが出来ます。
なんと、このShadowにはそれが備わっていて、つまり、「iPadで表示がちょっとくずれるなー。ここのCSSを修正してみようかな?」なんてことがその場で出来るのですよ!!!
デバイスにつながっている時にChromeのShadowエクステンションを開き、デバイス名の右側にある <> 部分をクリックすると開きます。

ここで気づいたのですが、このリモートウェブ解析ツールはweinreというオープンソースライブラリのようです。

つまり、デバイスを簡単に繋げられる機能:Bonjour、リモートウェブ解析機能:weinre、ブラウザのプラグイン機能を提供しているChrome、それらをうまく組み合わせて綺麗にまとめあげたのがAdobe Shadowということになりますね。
しかし、すごすぎる!さすがAdobe!!見直しました!

One More Thing:Release 2の神対応

という記事を書いてアップしようとして確認の調査をしていたら、4月12日にRelease 2が出ていたことに気づきました。
※つまり、ここまでの記事はRelease1を元に書いています。
スルーしてもいいかな、と思ったのですが、新機能の中に一つ気になる機能が。

“Local Host URL Support”
ェ、、マジ!?
と、小さく叫びつつ、バージョンアップ。
そして、試してみました…。

ろ、ろ、ローカルホストだぁぁ!!!!

これもやっぱりいじれるーー!!
他にもlocalhostにある制作中のウェブサイトとかも、普通に動きましたよ!
そして、今のところこれが無料という…。
マジ神アプリですよ。

localhostにうまくつながらない場合

(2012/05/25 追記)
「設定はちゃんとしているはずなのにlocalhostにうまくつながらない」という場合、IPアドレス指定でうまくいく可能性があります!

http://localhost/mywebsite/index.html
-> http://192.168.0.10/mywebsite/index.html

参考情報:

私もうまくいかない時に、これでうまくいきました!

にほんブログ村 IT技術ブログ IT技術メモへ

[AD]

↓ネ申すぎるAdobeさんに敬意を評してCS5.5を紹介。マスターコレクション!

Adobe Creative Suite 5.5 Master Collection Macintosh版 (旧製品)

Adobe Creative Suite 5.5 Master Collection Macintosh版 (旧製品)

定価:¥ 409,320

カテゴリ:DVD-ROM

発売日:2011-05-20


↓Windows版のほうが安くなっている!

Adobe Creative Suite 5.5 Master Collection Windows版 (旧製品)

Adobe Creative Suite 5.5 Master Collection Windows版 (旧製品)

定価:¥ 409,320

カテゴリ:DVD-ROM

発売日:2011-05-20


DCRoundSwitch:あのトグルUIをカスタマイズ!

0
Filed under iOS SDK
Tagged as , , ,

iOSの標準UIであるトグルボタン UISwitch ですが、iOS 5からちょっとデザインが変わり、場合によってはI/Oと表示されるようになったりしました。
これはLocalizationを追加することで日本語モードなら「オン/オフ」と表示させることは出来ます。
しかしそもそも、「オン/オフ」とかじゃなくて、もっと適した言葉にしたい、と思うことは結構あります。
そこで便利なのが今回紹介するオープンソースライブラリ「DCRoundSwitch」です。


商用利用に安心なMITライセンスです。

プロジェクトに追加する

いつものように、gitコマンドでgithubからライブラリ一式を取得します。

1
git clone git://github.com/domesticcatsoftware/DCRoundSwitch.git

ダウンロードしたフォルダ内にあるDCRoundSwitchフォルダを、フォルダごとプロジェクトに追加します。
あとは、QuartzCoreフレームワークを追加して準備完了。

使い方

次のようなコードで、大きさと位置をCGRectで指定し生成、addSubviewにて貼付けます。

1
2
DCRoundSwitch* _switch	= [[DCRoundSwitch alloc] initWithFrame:CGRectMake(200, 8, 100, 30)];
[self addSubview:_switch];

あとは次のようにプロパティでon/offそれぞれのラベルを設定できます。

1
2
_switch.onText	= @"有効";
_switch.offText	= @"無効";

スイッチをトグル切り替えした時の処理は次のように処理を行うメソッドのセレクタを渡します。

1
2
3
4
5
6
7
8
9
10
// コールバック指定.
[_switch addTarget:self
	action:@selector(switchToggled:)
	forControlEvents:UIControlEventValueChanged];
 
// コールバック定義例.
- (void) switchToggled:(id)sender
{
	// _switch.on	.. YES/NO
}

色(tintColor)とかも簡単に変えられるし、本当に便利なライブラリですよ!

にほんブログ村 IT技術ブログ iPhoneアプリ開発へ

[AD]

↓スマフォならではのデザインのルールを知るのは重要。

デザイナーのためのスマートフォンインターフェースデザイン

著者/訳者:中野 広明

出版社:秀和システム( 2012-01-27 )

定価:

Amazon価格:¥ 1,944

単行本 ( 175 ページ )

ISBN-10 : 4798032344

ISBN-13 : 9784798032344


↓UXを考えないUIなど有り得ないので、まずはこれも読んでみたい。

UXデザイン入門

著者/訳者:川西 裕幸 潮田 浩 栗山 進

出版社:日経BP社( 2012-01-26 )

定価:

単行本 ( 194 ページ )

ISBN-10 : 4822296105

ISBN-13 : 9784822296100


MBProgressHUD:ローディング表示中をイケてる感じに!

0
Filed under iOS SDK, オープンソースライブラリ
Tagged as , , , ,

MBProgressHUDの問題

ちょっと前に紹介したナウローディング表示ライブラリMBProgressHUDですが、ローディング表示中のHUD部分以外は透明です。

showHUDAddedTo: メソッドに与えたView以下はボタンを触ったりは出来ないけど、そのまま見えているとユーザビリティ的にヨロシクないですね。

で、背景をグレーアウトするためにソースを修正してみました。

コードを修正してみた!

ソースを探すといっても、.h, .mの2つしかソース無いのでサクっと完了。
MBProgressHUD.m の、 – (id)initWithFrame:(CGRect)frame{} 内で、下記のように一部を書き換えます。

304
305
//  self.backgroundColor = [UIColor clearColor];
self.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.6f]; // 適当なグレー.


全体のアルファをアニメーションさせてくれているので、フワッと表示/非表示され、綺麗です!

出来た!出来た!ビバ!オープンソース!(o’∀’o)ノ
とか思って、サンプルを見なおしていたら、
なんと、グラデーションで綺麗に背景を表示してくれるオプション(プロパティ)がありました。。(#゚Д゚)

1
2
3
MBProgressHUD* hud = [MBProgressHUD showHUDAddedTo:viewForHUD animated:YES];
hud.dimBackground = YES; // ←この設定.
[hud setLabelText:@"情報取得中"];

で、こんな感じ↓

うん、、、綺麗。
こっちの方がかっこいいですね!
ビバ!MBProgressHUD!


[AD]

↓2011年12月発売で、iOS5の標準メモリ管理ARCにも対応。並列プログラミング、Key-Valueプログラミングなど興味深い章が並ぶ。

詳解 Objective-C 2.0 第3版

著者/訳者:荻原 剛志

出版社:SBクリエイティブ( 2011-12-23 )

定価:

Amazon価格:¥ 4,104

単行本 ( 636 ページ )

ISBN-10 : 4797368276

ISBN-13 : 9784797368277


↓最近デザインができることの重要性を改めて感じているのでこういう本も興味ある。

iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン

著者/訳者:Josh Clark

出版社:オライリージャパン( 2011-06-18 )

定価:

Amazon価格:¥ 3,672

大型本 ( 320 ページ )

ISBN-10 : 4873115027

ISBN-13 : 9784873115023


QuickDialog:iOSアプリの設定画面をもっと簡単に!

2
Filed under iOS SDK
Tagged as , , , , , ,

iOSアプリで設定画面、と言えば、いわゆる「設定」アプリのような画面なのですが、いざ作るとなると結構面倒なのです!
「設定」アプリ内ならまだしも、アプリ内であの画面をつくろうとすると、、。
そこで便利なライブラリが今回紹介するQuickDialogというオープンソースライブラリ!

ライセンスは商用利用が可能なApache License Version 2.0です。

しかし、断念。。

ある程度プロジェクトに組み込んでから気づいたのですが、このライブラリを使うにはARC(Automatic Reference Counting)必須なのです!
個人的にまだARCに手を出していない上に、既に組み込み済みの他のオープンソースライブラリが逆にARC非対応だったりするので、この制限は厳しい。。
ということで、結局今回は、QuickDialogの使用は諦めました
ですが、便利そうなのは間違いないので、別プロジェクトでチャンスがあれば是非使ってみたい。

参考サイト

↓このライブラリ、プロジェクトに組み込むのがちょっと面倒だったのですがこのQ&Aが参考になりました。


[AD]

↓ARC勉強するならこの書籍!↓

エキスパートObjective-Cプログラミング -iOS/OS Xのメモリ管理とマルチスレッド-

著者/訳者:坂本 一樹

出版社:インプレス( 2011-11-18 )

定価:

単行本(ソフトカバー) ( 224 ページ )

ISBN-10 : 4844331094

ISBN-13 : 9784844331094


↓面白そうな!読み物系らしいので、リラックスして読んでみたい。

情熱プログラマー ソフトウェア開発者の幸せな生き方

著者/訳者:Chad Fowler

出版社:オーム社( 2010-02-26 )

定価:

Amazon価格:¥ 2,592

単行本(ソフトカバー) ( 200 ページ )

ISBN-10 : 4274067939

ISBN-13 : 9784274067938