Firefox OSアプリ 「ModeView」
-
Upload
hideki-akiba -
Category
Documents
-
view
744 -
download
0
description
Transcript of Firefox OSアプリ 「ModeView」
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」をチェック!