さくペラ

さくっとぺらいちというサイトのつづき

Fireworksをモック作成ルーツに変えちゃう「TAP」

UX/UI

プロローグ

スマートフォン時代になって、タッチスクリーンのモーションが重要になってきてます。ですが、それをチューニングしながらUIデザインするという方法がなかなか無くてずっと探してました。

FP時代では、さっとコーディングして実機で確認したり、FlashLiteをサッと組んでモーション確認とかやってたんですが、SP時代になってそれに変わる手法がないかなあと。
jQueryMobileでさっと組めればいいんですけど、モック作成にそこまでコストを払いたくありません。
ペーパープロトタイピングという手法もありますが。大勢の前でレビューしたり、完成度の高いデザインが既に存在する場合には不向きな手法です。

探しに探して…ついに見つけました「TAP」という存在を。Fireworks信者のおいらにはうってつけの方法でした。以下、手順を示していきます。

…あ、Fireworksない方はAdobeStoreへGO。一ヶ月間体験版もありますよ


１，環境を整える（Macを使ってるディレクターを例にしてます）

  • 開発の方なら既にPHP実行環境があると思うので、そちらにTAPをアップロードしてパーミッション設定するだけでOK
  • Winメインのディレクターの方は、そうですね… XAMPPとか試してみてください

１−１、TAPをダウンロード

http://gyazo.com/8a4ec4a1790335dfe1082f0cb0ee338b.png


参考のために、テンプレートもダウンロードするのをオススメします。

１−２、Macで環境構築

１−２−１，phpを有効にしよう
  • OSXはそもそもPHPが入ってるのであとは動くようにするだけなのですが、まず、Apacheを起動します。
  • システム環境設定＞共有＞web共有にチェック入れるだけ

http://gyazo.com/3448c03ec08b5a2be563c2d30f9cfd8b.png

  • あ、でもですね、デフォルトでphpが使えない設定になっているので、httpd.confを書き換えなきゃいけないんだった。
  • まず、httpd.confを変更できるようにsuコマンドを有効にしておきます。
  • OSX10.6以降からディレクトリユーティリティがユーティリティにねえよ、みたいな自体になってますが大丈夫。以下にあります
    • /System/Library/CoreServices/Directory Utility.app
  • Finder>移動＞フォルダへ移動からアクセス

http://gyazo.com/d6744dc540bb67fac1dedd4a52d3ccff.png

  • ディレクトリユーティリティ起動して、鍵アイコンをクリック＞パスワード認証
  • 編集＞ルートパスワードを有効にする を選択してください。これでsuが使えるようになります。
  • 次にターミナルたちあげて、suモードになってhttpd.confファイルの場所まで移動しましょう。

http://gyazo.com/37e14966ca9a1c5f183089fd22b001fe.png

  • vi httpd.conf でファイルを開いて、
  • #LoadModule php5_module libexec/apache2/libphp5.so　の行頭の#を取ります。
  • iでインラインモードになって、#をDeleteしましょう。escapeキーを押した後に:wq!と書いてEnterで上書き保存できます。
１−２−２、TAPを設置しよう
  • 次に、解凍したファイルをDocumentroot配下に置きます
  • ユーザー名フォルダの下のSiteが「~ユーザー名」でアクセスできるDocumentrootです。
  • おいらはprotoというフォルダ名で配置しました

http://gyazo.com/c4b6738dae0183a44890039f9e74a2c2.png

  • あとはターミナル起動して、パーミッション設定します。色々試しましたがprotoディレクトリを777にしないと動きませんでした。

http://gyazo.com/4200f445fb2cd309cbda5f1ba93a09af.png

  • そこまでできたら、以下にアクセスしてみましょう
  • 以下の画面が表示されたら環境設定完了です

http://gyazo.com/b4ee37894db02d79ed727714d3299d40.png

２，モックを組んでみる

２−１、準備

  • まず、Fireworksでデザイナーからもらったデザインを表示します。出来れば横幅640pxのものをもらいましょう。
  • ここではAとBページの2つあるとします。両方の画面を1つのファイルの「ページ」で管理しましょう。
    • Fireworksでページを増やすには「ページタブの右下にあるゴミ箱アイコンの左にあるアイコン」をクリックすると、空のページが生成されるので、もうひとつの画面をそこにペーストします。なおペーストした後、キャンバスフィットしておきましょう。
  • ページには名前をつけます。ここでつけた名前が書きだした時のhtmlファイル名になります。

２−２、ホットスポットでページ間リンクを貼ろう

  • 次に、スタートページを作ります。デザインモックを作る時の扉ページのようなものです

http://gyazo.com/369ed1b2b24d36e7f6d3d5080146fca0.png

  • 画面中央にはホットスポットを設置します。ホットスポットのプロパティについては以下のように設定します。
    • リンクには飛ばし先のページを指定。「ページ名＋.htm」。あとALTの部分には画面のトランジションを指定できます。

http://gyazo.com/fc531ddfaf3995e949718a21d9ae0c0c.png

  • トランジション例
    • swapeleft,swapright
    • cubeleft,cuberight
    • flipleft,flipright,
    • popdown,popup,
    • slidedown,slideup,
    • slidetopdown,slidetopup,
    • pushdown,pushup,
    • back
  • では画面にホットスポットを追加していきます。まずはAページにBページへ飛ぶホットスポットを追加します。
    • リンク先はBページ、トランジションはプッシュビュー風にslideleftを使います。

http://gyazo.com/4f4d05945088c38e45d534beb3e65879.png

  • 次にBページです。ここでは戻るボタンにグラフィックになってないですが、左上のボタンにbackを指定します。
    • backを指定すると、直前のモーションの逆モーションで元いたページに戻ります。ので、リンクは指定しません。

http://gyazo.com/634116615a7a025b20a18dbccde9b22f.png

  • そこまでやったらもう書きだしてほぼ完成。このサクサク感がたまりません。
    • まず、Fireworksで　ファイル＞書き出し＞Dreamweaverライブラリを指定し、protoフォルダ配下のライブラリフォルダを指定します。
    • 後は書き出し対象を全部にして、画像フォルダは別に作成するようにします。で書き出しましょう。

http://gyazo.com/3ddff2c6e4e2a01da828cf79ef29526b.png

２−３、ビルドしよう

  • 次にTAPの画面に移動します。
    • テストする実機iPhone4Sを指定、ホームスクリーンメッセージにチェック、ホームスクリーンに表示するアプリのタイトル指定
    • 重要なのはスタートするページ指定。先ほど作った扉ページを指定します。なんでわざわざスタートページを作ったかというと、ビルドして指定できるスタートページはユニークなので、ここをメニューページにしておくと、いろんなデザインモックへの導線を張ることが出来るというわけです。毎回ビルドし直すのは面倒なので。
    • あとは色々設定できますが適当に入力したりしなかったりします。

http://gyazo.com/f2272e66355d457d61a1847cf9919087.png

  • buildボタンを押します。成功すると、メッセージが出ます。エラーもこの黄色い枠に出ます。

http://gyazo.com/19225b55cbbe8489e029076ff840c994.png

3，画面を確認しよう

３−１，iPhoneシミュレータで確認する。

  • 一番手っ取り早いのがiPhoneシミュレータ。持ってない人はAppStoreからXcodeをダウンロードしてください、その中に含まれてます。
  • TAPのView it hereのリンク先をiPhoneシミュレータのSafariでひらくと…

http://gyazo.com/b5d390f9b5767c6e26ca54f68114ec37.png

  • すると、ポップアップが出るので、指示に従ってホームスクリーンにブックマークアイコンを作ります。

http://gyazo.com/9a1fc85d076c1b48bc0be1803868efb1.png

  • ブックマークアイコンをタップすると…

http://gyazo.com/3c7ebb92ea744f905d19b91ebd9cd991.png

扉ページが出れば、おめでとうございます！

３−２、いやいや実機で見たいですよという方

  • 普通の環境なら、自分のマシン名をLANのWifiにつないだiPhoneでアクセスすれば、表示できます。
  • それだとうまくつながらない場合、自分のmacをWifiステーションにしてしまう方法があります。
    • １，まず、LANケーブルをmacに指します
    • ２，システム環境設定＞共有＞インターネット共有にチェックを入れます。相手のコンピュータが使用するポートをAirMacにします（10.7だとWifiを指定）
    • ３，iPhoneの設定アプリを立ち上げてWifi＞今作ったAirmacのアクセスポイントを指定
    • 以上で、自分のマシンに実機からアクセスできるようになります
    • ※localhostじゃアクセス出来ません。http://コンピュータ名.local/でアクセスできます。

以上、こんな感じです！
Fireworksでプロトタイピングライフを楽しんでくださいね♪