「さわってみよう Firefox OS」発表作品

1. 「さわってみよう Firefox OS」発表作品
3Dモデルビューア
Firefox OSアプリ
「ModeView」
制作者：秋葉秀樹

2. 秋葉 秀樹
広告業界に20年間身を置き、現在はJavaScriptやFlashの技術を
使ったインタラクティブコンテンツから3DCG制作まで様々。
現在はデザイナー向けの講演活動、またWeb Designing他、寄稿な
ど多くの執筆活動も行っている。
HTML5関連の関西コミュニティにもコアメンバーとして参加。
株式会社インヴォーグのテクニカルアドバイザー兼CTOに就任。

3. Firefox OSとは
アプリケーションはすべて
Web標準技術（HTMLベース）のみで開発するOS
よくわからない方は先に、今回のイベントページをどうぞ！
http://designers-hack.net/event/004firefoxos/
今回はハッカソンなのに、たった一人でつくってみました

4. ホーム Blenderでつくったモデルを指定

5. 別のモデルが呼び出された 背景色をピンクに 照明の色を青に

6. 仕様
Blenderで3Dモデリング
↓
BlenderからThree.jsで読みやすいJSフォーマットで出力
↓
アプリでローディング、表示
↓
ライティング色、背景色をユーザが変えることができる
読み込む3Dモデルを選択
背景色を変更
ライティングを変更

7. 使ったアプリケーション
FirefoxとB2G … 当然！PCで検証するため
Blender … モデリングソフト（UIが取っつきにくいけどフリー）
Dreamweaver … コーディング（もう最近他に乗り換えたい）
Photoshop … アイコンなどの素材
LESS … CSSの値が多く共通しているので、変数などを使った

8. 使ったライブラリ
jQuery 1.8.2 Three.js

9. Blender側の準備
Three.js内にある
three.js/utils/exporters/blender/2.63/scripts/addons/
io_mesh_threejs
この「io_mesh_threejs」フォルダを
Applications/blender/Contents/exporters/blender/2.63/scripts/
addons/io_mesh_threejs/MacOS/2.63/scripts/addons/ここ
に入れることで、Blenderのエクスポートに
「Three.js」が追加される

10. BlenderよりThree.jsと親和性が高いフォーマットで書き出せる

11. 出力されたモデルデータ
model.js
どうやらJSONっぽい

12. HTML5マークアップ
header
canvas(Three.jsが生成)
div
(フッタのリストナビゲーションをタップしてフェードインしな
がらあがってくるアニメーションはCSS3のTransitionsを使用)
li
(border-radiusによる丸型ボタン)
footer

13. サムネイル群は最初見えない状態
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
/* CSS */
.picker {
position: absolute;
bottom: -200px;
opacity: 0;
-moz-transition: .3s;
サムネイルを含むdivはすべて
この辺りに…⋯
…⋯
}

14. 表示させたいパネルのdiv要素にだけ
クラス名「activePanel」をつける
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker
activePanel">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
/* CSS */
.activePanel {
bottom: 80px;
opacity: 1;
CSSによる動き }
この場合div#lightColorにクラスがついたので、bottomとopacityが
Transitonsにより変動してアニメーションする

15. つまりCSSクラスactivePanelがついた
divだけがアニメーション表示される
<div id="models" class="picker">
<!-- モデル変更用サムネイルをli要素で -->
</div>
<div id="bgColor" class="picker">
<!-- 背景色変更用サムネイルをli要素で -->
</div>
<div id="lightColor" class="picker
activePanel">
<!-- 照明色変更用サムネイルをli要素で -->
</div>
#lightColorにだけactivePanelクラスが
ついた状態をしめす
↓
CSSによる動き
#lightColorがせり上がってくる
また消すときは、クラスを外すだけでOK、「下ろすアニメーション」は書く必要はない

16. HTML/CSS/JavaScriptでUIアニメーションを行う場合
CSSのTransitionsやAnimationsを有効に使い、
JavaScriptは移動するタイミングでCSSクラスをつけるために
使うことを優先して考える。
つまりjQueryのanimate()などを使うより先にCSSの活用を検討する。
状況に応じて判断しよう。

17. LESSは知り尽くさなくても、変数だけ理解するだけでもとても助かる。
なぜならボタンサイズなど、共通の値で設計（デザイン）するケースが
UIデザインの世界では多いから、何度もブラッシュアップするのに役立つ。
共通の値が多いので変数を使用
CSS
@btnSize: 30px;
.closeBtn { .closeBtn {
background: #F00; background: #F00;
width: @btnSize; width: 30px;
height: @btnSize; height: 30px;
border-radius: @btnSize; border-radius: 30px;
color: white; color: white;
position: absolute; position: absolute;
right: @btnSize / 2; right: 15px;
top: -@btnSize / 2; top: -15px;
text-align: center; text-align: center;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
} }

18. HTMLベースでFirefox OSアプリをつくった感想
遷移（Transitions）などはCSSを優先して使ってみよう
他のブラウザのことを考えないでいいのでプリフィックスは-moz-だけ
Webサイト制作で慣れ親しんだ言語のままアプリをつくれる
敷居が高いのは実機に焼く作業（ミスターB2Gに焼いてもらった）
動作確認がブラウザでOKなので、トライアンドエラーがとてもラク

19. 3Dモデルビューの感想
Three.jsつくったひとすごい。
ポリゴン、テクスチャ、ボーンアニメーションも、
ライブラリで対応可能なので、やる気になればもっと
すごいものができる。
実用性としては、プロダクトの紹介などで
使えるかもしれない。

20. Thanks!
次回12月中旬の土曜は総集編！@豆蔵トレーニングルーム（新宿）
Web標準技術でアプリをつくりたいデザイナーさん向けの
セッションを予定中。
Twitterハッシュタグ「#TizenJP」をチェック！