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

プロローグ

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

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

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

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

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

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

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

• 以下のサイトからTAPをダウンロードしましょう。
  • http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/

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

１−２、Macで環境構築

１−２−１，phpを有効にしよう

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

• あ、でもですね、デフォルトでphpが使えない設定になっているので、httpd.confを書き換えなきゃいけないんだった。

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

• ディレクトリユーティリティ起動して、鍵アイコンをクリック＞パスワード認証
• 編集＞ルートパスワードを有効にする を選択してください。これでsuが使えるようになります。

• 次にターミナルたちあげて、suモードになってhttpd.confファイルの場所まで移動しましょう。

• vi httpd.conf でファイルを開いて、
• #LoadModule php5_module libexec/apache2/libphp5.so　の行頭の#を取ります。
• iでインラインモードになって、#ã‚’Deleteしましょう。escapeキーを押した後に:wq!と書いてEnterで上書き保存できます。

１−２−２、TAPを設置しよう

• 次に、解凍したファイルをDocumentroot配下に置きます
• ユーザー名フォルダの下のSiteが「~ユーザー名」でアクセスできるDocumentrootです。
• おいらはprotoというフォルダ名で配置しました

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

• そこまでできたら、以下にアクセスしてみましょう
  • http://localhost/~ユーザー名/proto/build/index.php
• 以下の画面が表示されたら環境設定完了です

２，モックを組んでみる

２−１、準備

• まず、Fireworksでデザイナーからもらったデザインを表示します。出来れば横幅640pxのものをもらいましょう。

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

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

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

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

• トランジション例
  • swapeleft,swapright
  • cubeleft,cuberight
  • flipleft,flipright,
  • popdown,popup,
  • slidedown,slideup,
  • slidetopdown,slidetopup,
  • pushdown,pushup,
  • back

• では画面にホットスポットを追加していきます。まずはAページにBページへ飛ぶホットスポットを追加します。
  • リンク先はBページ、トランジションはプッシュビュー風にslideleftを使います。

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

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

２−３、ビルドしよう

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

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

3，画面を確認しよう

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

• 一番手っ取り早いのがiPhoneシミュレータ。持ってない人はAppStoreからXcodeをダウンロードしてください、その中に含まれてます。

• TAPのView it hereのリンク先をiPhoneシミュレータのSafariでひらくと…

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

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

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

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

• 普通の環境なら、自分のマシン名をLANのWifiにつないだiPhoneでアクセスすれば、表示できます。

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

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

久々に投稿します

最近は、平日は六本木で缶詰になって仕事、休日は家で息子と戯れるという日々をローテーションして季節だけは矢継ぎ早に進んでると言った状況です。

そんな中、自分の癒しとなっているは息子の笑顔と妻の心遣いとボーカロイドであります。

ボーカロイドなんて見る時間ないじゃないという状況だったんですが、二つのアプリが変えてくれました。

まずは、ミクサウンド。これは週刊ランキングにランクインした楽曲を音だけ保存できてあとで聞けるというものです。
動画は見れないですが、普段ニコ動見れない私としては革命的でした。

それまでは深夜にランキング動画ダウンロードして、m4vに変換してiPhoneにいれるというプロセスが重くて、さらに気に入った曲をメモって、ランキング動画のようにdlして変換…めちゃ時間かかるんですよ…

ミクサウンドは気に入った曲をポチるだけ…超楽になりました

が、それだと動画が見てないんですよね…mmdとかlat式とか…

困った…そこに出現したアプリがiNicoです

これもランキング動画表示に対応してて、fw検索もできて、動画をdlもできて、フォルダ別に管理までできちゃうんです

地下鉄通勤のおいらにとってdlは必須なので、かなりのライフハックアプリとなりました。
開発者の方超感謝です…>_<

皆さんも、是非試して見てください。

あと、最後に最近のオススメ曲を紹介したいと思います。動画貼れればいいのですが

• ヤクソクの種 : 40mP
• 春に一番近い街 : 40mP
• 夏に去りし君を思ふ ：baker
• しわ ：buzzG
• サイバーサンダーサイダー : EZFG
• wander girl : HSP
• Phantom 2011 re-edit : HSP
• Youthful Days' Graffiti : HSP
• 円の幾何学 : kous
• 椿姫 sasakure.UK Falling remix : kous
• Yellow [MMD] : KZ(livetune)
• 5150 : ダルビッシュP
• 想い出カケラ:ダルビッシュP
• 馬鹿はアノマリーに憧れる : 鬱P
• 千本桜 : 黒うさ
• 不安定彼女 : 19's sound factory
• Black board : 蝶々P
• 添い遂げたアンドロイドへ : もふ@
• アイロニ : すこっぷ
• スウィートタイム: EasyPop
• glow [mmd]: keeno
• 可能世界のロンド[pv] : millstone/まさたかP
• 水色と宇宙船(retake)[pv] : nexus/まさたかP

どれも素晴らしい楽曲です。製作者の方ありがとうございますー

Androidサイトは横幅何pxで作ればいいのか？

いくつかAndroidサイト制作の仕事をしていて、いろいろandroid機種でデバッグをして気づいたことがあります。
その中で一番はまったのが、「Androidサイトは横幅何pxで作ればいいのか？」という点です。

今では解決方法を見つけたので以下、まとめます。

Androidのデフォルト解像度について

Androidサイトを作る際、横幅何ピクセルで作ればいいのかなあと思い、Android機種の解像度一覧の表を探すと思います。

ただ、その情報を鵜呑みにしてサイトの横幅を設計すると、失敗することになるのです。

なぜなら、「機種自体の解像度性能は高くてもwebブラウザのデフォルトの解像度設定が低くなってるケースが多いから」、なのです。

たとえば、IS03は640*960という解像度を持ってますが、viewportでサイズを指定しないで表示したときの横幅は、320pxなんですね…。
androidはこの後書く理由でviewportでサイズを指定しないほうが無難なので、そうなってくると、320pxを基準にしたほうがいいのです。

Xperiaも同様で、デフォルトの横幅は320pxです。

ただし、IS01やLynxなどネットブックは、デフォルト横960pxです。縦表示にして回転させるには、オプション設定を変えないといけないのですが、縦表示可にすると、横幅480pxで表示します。

じゃ、サイトの横幅は何pxにすればいいの？

以上のことから、Androidサイトは最大横幅960pxにまで絶えられるように、基本320pxで作成するのをお勧めします。
かなり作り方が限定されてくると思いますが…

基本スタンスとしてはリキッドで幅が伸縮するようにすればよいでしょう。
もうひとつの方向性としては、320pxのboxをセンタリングして、背景を960px対応させるという手もあります。

なんで、viewportでサイズ指定しないほうがいいの？

iPhoneはviewportでサイズを指定することで、縦表示でも横表示でもその指定した幅で表示されます。
つまり、表示の倍率を自動で変えてくれる親切設計になっています。

ただし、Androidは勝手が違ってまして、「機種の向きを変えたときに、はじめ表示した向きの倍率で表示する」という癖というかバグがあるのです。

このために、Androidサイトでviewportでサイズ指定してしまうと、機種の向きを変えたときに倍率を変えないで表示してしまうため、表示が乱れるという結果に陥ってしまいます。

向きを変えても、画面内できれいに表示するには、320px基準で作る必要があるのです。

追記(2011/1/27)

みなさん、フィードバックありがとうございます。まさかこんなに注目されるとは。

では、もうひとつの情報として、上に書き漏れてしまったのですが、「そもそもXperiaはviewportでサイズ指定しても、無視される」というバグもあります。2.1にアップデートすれば直ると思いますが、アップデート手順が面倒だし、どれだけの人がアップデートしたのか疑問です。

つまり、v1.6のXperiaはviewportでどう設定しようが、横幅320pxで表示します。v2.1のAndroid（すべてではないかもしれませんが）は初回表示時のみviewportで設定した横幅で表示します。
v2.2の検証はまだやってないですが、手元にv2.2のDesireがあるのでやってみようかな…

モバイルサイトでもmixiチェックボタン設置

モバイルでサイトをチェックしていたら、EZ MY スタイリングの特設ページで、mixiチェックが実装されてた。

気になって調べたら、すぐに情報が出てきた。
技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
なるほど、モバイルにも実装できるんですねー。

なお、このサイトにはtwitterのツイートボタンもおいてありますが、php使って簡単にモバイル用に作れるみたいです。
『twitterでつぶやく』ボタンの実装 | Jobweb SystemDev. Blog

昔作ったサイトを今眺めてわかること

自分が作った初めてのwebサイトは、大学一年の授業で作った学内ホームページが初めてでした。
そこではプログラムの課題にリンクを張って提出したりする場だったのですが、そのコーナーがあればあとは自由だったので、自分なりにいろいろ拡張していきました。

当時のネットアクティビティまとめ（10年ちょっと前）

１、BBSコーナーの設置：学内コミュニケーション用
２、Java茶の設置：これもコミュニケーション用につけたが、あまり使われず…
３、ブックマークコーナーの設置：気になるサイト集を手作業で作成。
４、コラムの設置：まとまったテキストコンテンツを掲載
５、デジタルコンテンツの設置：音楽や絵や写真など掲載。リアルプレイヤー埋め込み
６、日記的な定期更新情報ページの設置：Apple情報など当時はG4が出たばかりのころ…⇒スピンオフして別サイトに発展。
７、ネットサーフィンで情報収集：テレホタイムにひたすら見ました。56kモデムで。
８、ネタFlash、ネタアニメGIFへリンクor転載。ノンちゃんとか吉野家Flashとかネタ系コンテンツの走りでしたね。よくチェックしてました。先行者とか今の若い人は知らないんだろうな。

こうやってみてみると、時代は流れたとはいえ今もネットに対するアクティビティって変わってないんじゃないかなーと思いました。

現在の状況はどうか？

（長くなりそうなので、以下続きにします。）

１のアクティビティはSNSという形で、今も残っています。スレッド立ててレス返してというアクティビティ。

２のアクティビティはTwitterを代表とするミニブログという形で残ってます。間にメッセという時代もありましたが。

３のアクティビティははてブを代表とするSBMに集約、軽いものはGoogleReaderで★をつけてます。

４のアクティビティは自分で書かなくなったので探せばあるかもですが、BCCKSとかピアプロなどでそういう機能があったように思います。
パワポにまとめていればSlideShareという選択肢も。

５のアクティビティは写真ならFlickr、絵ならピアプロ、音楽なら以前はMySpace今ならSoundCloudかな

６のアクティビティはblogですね。まさに、これ。

７のアクティビティはRSSリーダーの出現で劇的に変わりました。Twitterだけ眺めていてもRSS風に利用しているユーザーをフォローしておけば、同じように使うことは可能です。

８はニコニコ動画がさらって行った感じがします。

と。やってることは一緒なんだけど、すべて「ｻｰﾋﾞｽ」として提供されていて、行動したログがたまり、ソーシャルwebとして他のユーザーないしはサイトと繋がっていける、という部分で昔とは大きく異なるんだなということがわかります。

最近は６のアクティビティを深堀りして、まとめ記事用のサービスなどホッテントリになりやすい記事へのサービスも出現してます。

ここから言えること

１、ネットにおけるユーザー活動にあまり変化がないのであれば、その部分に注目することで、新サービスが生まれるのではないだろうか？
２、今のサービスはユーザーに対して新しいネットアクティビティを生み出してないのではないか？

ということなのかな、と思います。
ただ2に関しては、ネットとリアルを織り交ぜるという形で、livlisやARコンテンツなど新しい体験が生まれてきています。
スマートフォンやモバイルネットの高速化が進んできたため可能になった新しいアクティビティだと思っています。

ネットをリアルに近づけるアクティビティには今後とも注目ですね。

追記

基本なコンテンツが抜けてました。自己紹介ページ。
昔のホームページでは自分で作ってましたが、今はいろいろプロフサービスがありますねー。

Zenbackキーワーズリリース

ついにソーシャルを横断で「関連キーワード」で繋がるモジュールがリリースされましたねー。Zenbackキーワーズ。

スタンドアローンだったブログがソーシャルwebにどんどん組み込まれていく感じがします。

はてダは、はてなキーワードに自動リンク張ったりする機能はありますが、あくまでwikipedia的なスタンスの機能なんですよね…。

2つの違いについて

たとえばMovableTypeのはてなキーワードは
movable typeとは - はてなキーワード
このようにキーワードが主で、辞書のようなつくりなのですが
Zenbackキーワーズだと
「Movable Type」の関連記事｜zenbackキーワーズ
このように、そのキーワードを話題によく出してるブログをたたせているんです。主役が「人」なんですよね。

ソーシャルwebは人と人とのつながりと考えるとZenbackの設計のほうがよりソーシャルwebなんだなと思います。すばらしい取り組みだなあ。

年始にふと思う

日曜日、サンデープロジェクトの後継番組を見ていて、リア充のイメージを改めなければいけないなと思った。リア充ってバブリーなイメージでとらえていたのだが、バーチャルよりも実際に人とあってコミュニケーションをすることに重きを置く草食男子のことなんじゃないかと思い始めてきた。

そもそも今の大学生世代は車を買わないし、周りが買ってるから自分も買う的なブームに乗る人はいないといわれている。
バブリーイメージなリア充って、それらにすべて乗っかってお金を消費する人のようなイメージだったが、実はそうではないんじゃないかと思った。

そのTV番組によると、リア充は一ヶ月に一回横浜の面白いスポットにレンタカーでデートすることでも、リアル充実という捉え方みたい。
うちらの世代からするとそれって、素朴というか純朴というか派手な印象ゼロじゃない。いわば、普通の恋愛じゃん。
でも若い世代ではそういったものもふくめてリア充ととらえてるんじゃなかろうかと思った。この辺りはもう少し深く調べていく必要があるなあ。

そして、リア充の対極に存在するのがネトゲ廃人なのかなあとも思った。

ネトゲ廃人の心情については、ネトゲ廃人シュプレヒコールという曲にうまくまとまっているんじゃないかと思う。

社会に参加したくない、それも積極的に。という思考とリアルな人間関係を否定してバーチャルグラフだけを信頼する傾向があるように思う。

この辺の現象をうまくとらえたのが「俺の妹がこんなに可愛いわけがない」なのかなと思う。桐乃が秋葉にオフ会参加しにいくあたりとか。

この二極化する流れをつかんで、彼らが求めているものを提供できれば、社会はもっとよくなるし、若者も元気が出るんじゃないかなーと思った。

ネトゲ廃人には「俺妹」でいう京介的なおせっかいな存在が必要だと思う。
あるいはコッペリオンでいう委員長的存在。

また、リア充には彼らが持っている目標を実現させるためのツールないしは場所の提供が必要だと思った。

それらをソーシャルグラフを介して実現できたら、ちょっとはよい社会になるかも。心のセーフティネット的な。

ほんと雑文だな。でも書かないよりはましかなと思って書いてみた。

追記

もかなり参考になる増田だなあ。ネトゲ廃人ではないだろうけど。リアリストの反対ということでバーチャリストとでも言えばいいのかな。