Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firefox OSアプリ 「ModeView」

1,113 views

Published on

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

  • Be the first to comment

  • Be the first to like this

Firefox OSアプリ 「ModeView」

  1. 1. 「さわってみよう Firefox OS」発表作品 3Dモデルビューア Firefox OSアプリ 「ModeView」 制作者:秋葉秀樹
  2. 2. 秋葉 秀樹広告業界に20年間身を置き、現在はJavaScriptやFlashの技術を使ったインタラクティブコンテンツから3DCG制作まで様々。現在はデザイナー向けの講演活動、またWeb Designing他、寄稿など多くの執筆活動も行っている。HTML5関連の関西コミュニティにもコアメンバーとして参加。株式会社インヴォーグのテクニカルアドバイザー兼CTOに就任。
  3. 3. Firefox OSとは アプリケーションはすべて Web標準技術(HTMLベース)のみで開発するOSよくわからない方は先に、今回のイベントページをどうぞ!http://designers-hack.net/event/004firefoxos/ 今回はハッカソンなのに、たった一人でつくってみました 
  4. 4. ホーム Blenderでつくったモデルを指定
  5. 5. 別のモデルが呼び出された 背景色をピンクに 照明の色を青に
  6. 6. 仕様Blenderで3Dモデリング↓BlenderからThree.jsで読みやすいJSフォーマットで出力↓アプリでローディング、表示↓ライティング色、背景色をユーザが変えることができる 読み込む3Dモデルを選択 背景色を変更 ライティングを変更
  7. 7. 使ったアプリケーションFirefoxとB2G … 当然!PCで検証するためBlender … モデリングソフト(UIが取っつきにくいけどフリー)Dreamweaver … コーディング(もう最近他に乗り換えたい)Photoshop … アイコンなどの素材LESS … CSSの値が多く共通しているので、変数などを使った
  8. 8. 使ったライブラリjQuery 1.8.2 Three.js
  9. 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. 10. BlenderよりThree.jsと親和性が高いフォーマットで書き出せる
  11. 11. 出力されたモデルデータ model.js どうやらJSONっぽい
  12. 12. HTML5マークアップheadercanvas(Three.jsが生成)div(フッタのリストナビゲーションをタップしてフェードインしながらあがってくるアニメーションはCSS3のTransitionsを使用)li(border-radiusによる丸型ボタン) footer
  13. 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. 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. 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. 16. HTML/CSS/JavaScriptでUIアニメーションを行う場合CSSのTransitionsやAnimationsを有効に使い、JavaScriptは移動するタイミングでCSSクラスをつけるために使うことを優先して考える。つまりjQueryのanimate()などを使うより先にCSSの活用を検討する。状況に応じて判断しよう。
  17. 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. 18. HTMLベースでFirefox OSアプリをつくった感想遷移(Transitions)などはCSSを優先して使ってみよう他のブラウザのことを考えないでいいのでプリフィックスは-moz-だけWebサイト制作で慣れ親しんだ言語のままアプリをつくれる敷居が高いのは実機に焼く作業(ミスターB2Gに焼いてもらった)動作確認がブラウザでOKなので、トライアンドエラーがとてもラク
  19. 19. 3Dモデルビューの感想Three.jsつくったひとすごい。ポリゴン、テクスチャ、ボーンアニメーションも、ライブラリで対応可能なので、やる気になればもっとすごいものができる。実用性としては、プロダクトの紹介などで使えるかもしれない。
  20. 20. Thanks!次回12月中旬の土曜は総集編!@豆蔵トレーニングルーム(新宿)Web標準技術でアプリをつくりたいデザイナーさん向けのセッションを予定中。Twitterハッシュタグ「#TizenJP」をチェック!

×