Firefox OSアプリ「ModeView」制作者：秋葉秀樹

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

3Dモデルビューア

秋葉 秀樹

広告業界に20年間身を置き、現在はJavaScriptやFlashの技術を

使ったインタラクティブコンテンツから3DCG制作まで様々。

現在はデザイナー向けの講演活動、またWeb Designing他、寄稿な

ど多くの執筆活動も行っている。

HTML5関連の関西コミュニティにもコアメンバーとして参加。

株式会社インヴォーグのテクニカルアドバイザー兼CTOに就任。

http://designers-hack.net/event/004firefoxos/

Firefox OSとはアプリケーションはすべて

Web標準技術（HTMLベース）のみで開発するOS

よくわからない方は先に、今回のイベントページをどうぞ！

今回はハッカソンなのに、たった一人でつくってみました　

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

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

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

読み込む3Dモデルを選択背景色を変更ライティングを変更

使ったアプリケーション

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

使ったライブラリ

jQuery 1.8.2 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/ここ

Three.js内にある

に入れることで、Blenderのエクスポートに「Three.js」が追加される

Blender側の準備

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

出力されたモデルデータmodel.js

どうやらJSONっぽい

HTML5マークアップ

header

canvas(Three.jsが生成)

footer

div(フッタのリストナビゲーションをタップしてフェードインしながらあがってくるアニメーションはCSS3のTransitionsを使用)

li(border-radiusによる丸型ボタン)

サムネイル群は最初見えない状態<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はすべてこの辺りに…⋯

表示させたいパネルの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により変動してアニメーションする

つまり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クラスがついた状態をしめす↓#lightColorがせり上がってくるCSSによる動き

また消すときは、クラスを外すだけでOK、「下ろすアニメーション」は書く必要はない

HTML/CSS/JavaScriptでUIアニメーションを行う場合CSSのTransitionsやAnimationsを有効に使い、JavaScriptは移動するタイミングでCSSクラスをつけるために使うことを優先して考える。

つまりjQueryのanimate()などを使うより先にCSSの活用を検討する。状況に応じて判断しよう。

@btnSize: 30px;

.closeBtn { background: #F00; width: @btnSize; height: @btnSize; border-radius: @btnSize; color: white; position: absolute; right: @btnSize / 2; top: -@btnSize / 2; text-align: center; -moz-box-sizing: border-box;}

LESSは知り尽くさなくても、変数だけ理解するだけでもとても助かる。なぜならボタンサイズなど、共通の値で設計（デザイン）するケースがUIデザインの世界では多いから、何度もブラッシュアップするのに役立つ。

.closeBtn { background: #F00; width: 30px; height: 30px; border-radius: 30px; color: white; position: absolute; right: 15px; top: -15px; text-align: center; -moz-box-sizing: border-box;}

CSS共通の値が多いので変数を使用

HTMLベースでFirefox OSアプリをつくった感想

遷移（Transitions）などはCSSを優先して使ってみよう

他のブラウザのことを考えないでいいのでプリフィックスは-moz-だけ

Webサイト制作で慣れ親しんだ言語のままアプリをつくれる

敷居が高いのは実機に焼く作業（ミスターB2Gに焼いてもらった）

動作確認がブラウザでOKなので、トライアンドエラーがとてもラク

3Dモデルビューの感想

Three.jsつくったひとすごい。

ポリゴン、テクスチャ、ボーンアニメーションも、

ライブラリで対応可能なので、やる気になればもっと

すごいものができる。

実用性としては、プロダクトの紹介などで

使えるかもしれない。

Thanks!

次回12月中旬の土曜は総集編！@豆蔵トレーニングルーム（新宿）

Web標準技術でアプリをつくりたいデザイナーさん向けの

セッションを予定中。

Twitterハッシュタグ「#TizenJP」をチェック！