Firefox OSアプリ 「ModeView」
- 1. 「さわってみよう Firefox OS」発表作品 3Dモデルビューア Firefox OSアプリ 「ModeView」 制作者：秋葉秀樹
- 3. Firefox OSとは アプリケーションはすべて Web標準技術（HTMLベース）のみで開発するOS よくわからない方は先に、今回のイベントページをどうぞ！ http://designers-hack.net/event/004firefoxos/ 今回はハッカソンなのに、たった一人でつくってみました
- 4. ホーム Blenderでつくったモデルを指定
- 5. 別のモデルが呼び出された 背景色をピンクに 照明の色を青に
- 6. 仕様 Blenderで3Dモデリング ↓ BlenderからThree.jsで読みやすいJSフォーマットで出力 ↓ アプリでローディング、表示 ↓ ライティング色、背景色をユーザが変えることができる 読み込む3Dモデルを選択 背景色を変更 ライティングを変更
- 8. 使ったライブラリ jQuery 1.8.2 Three.js
- 11. 出力されたモデルデータ model.js どうやらJSONっぽい
- 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、「下ろすアニメーション」は書く必要はない
- 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; } }