Mochrom - スマートフォンビジネスサミット
- 1. マルチデバイス時代に生き残る HTML5で作る ユーザーインターフェース クロカワ リュート 2011.12.03
- 2. Profile クロカワ リュート Twitter : @180mm •企画/制作ユニット 主宰 iPhone Appのプランニング、プロモーションの企 画、SNSを使ったイベントの企画など •元・NHN Japan 株式会社 web UI担当 •HTML/CSS/JavaScript/ObjC etc...
- 3. Profile iPhone & Android HTML5ではじ めるアプリ制作の手引き 共著にて執筆、各書店・Amazonにて 発売中 スマートフォン向けのwebUIの構築・ 設計について執筆しています。
- 5. HTML5のいま
- 7. 動画・音楽の再生
- 8. 動画・音楽の再生 • webサイトへFlashなしで簡単に動画の 埋め込みが可能に。 • 特にYouTubeなどにアップロードした ものを埋め込めば簡単に実装できる。
- 9. 位置情報の利用
- 10. 位置情報の利用 • JavaScriptを使って位置情報へアクセ スできる。 • Google Maps JavaScript APIを併用 すればGoogle Mapに現在地の表示な ども簡単に表現できる。
- 11. オフライン機能
- 12. オフライン機能 • ブラウザにテキストデータの保存が可 能に。これによってゲームやアプリ ケーションでは設定情報などの保存に 活用できる。 • HTML、CSS、JavaScript、画像ファ イルなどをブラウザにキャッシュさ せ、オフラインでも動作可能にするこ とができる。
- 13. きゃー！HTML5すてき！
- 14. でもね
- 15. HTML5の すてきじゃない 現状 •ブラウザごとに すてきな機能 に実装の差がある > 各ブラウザ向けに書き分けなければいけない •スマフォは端末ごとに すてきな機能 に実装差がある > 各端末ごとに書き分けor実装断念してオミット •スマフォは大抵2年縛り > 実装の差がまんべんなく埋まるのは結構先？
- 16. マルチデバイスへの対応・実例
- 19. サーバサイドのプログラムでページの出し分け • 同じコンテンツをPC,スマートフォンそれぞれ用にデ ザインし、それぞれつくらなければいけない。 > 修正・更新共に作業量が倍かかる。 • たいていはタブレットはPCと同等の扱い。これを最 適と言えるかどうかはモノによる • 一つのコンテンツに対してURLが複数になる場合も。
- 21. CSS3でブラウザの表示幅別にリデザイン • htmlはワンソース、しかし設計のコストが高い。 （綿密なサイト設計が必要、デザイン的な制約も多い • 修正・更新のコストはワンソースなので低め。 • 様々な解像度・ウインドウサイズに大して最適に見せ ることが可能、柔軟性が高い。 • サーバサイドのプログラムを必要としない。 • 一つのコンテンツに対してURLは1つ
- 22. ではどうしたらいいのか
- 23. 個人的な見解 CSSでの表示変更をおすすめします。 • 単一URLで対応できるのでPVの集中、各SNSでの拡 散時にどのデバイスからのツイートでもURLが統一さ れる。 • リダイレクトがないので通信環境が不安定なスマート フォンへの負荷も低め。 • タブレットデバイスなど、PCやスマートフォン以外の 端末にも対応がしやすい。
- 25. 実例 • mochrom モクロム • OPERATION TOMODACHI BY NINJA -忍者のトモ ダチ大作戦- > 多言語化、YouTube埋め込みもスマフォ最適化
- 26. HTML5のこれから
- 27. HTML5のこれから • いかにマルチデバイスへ柔軟に対応するか。 > HTMLがオープンでスタンダードなプラットフォームである 以上、マルチデバイスへの対応は大きなメリットであり、必須 • 無理をしすぎない実装 > HTML5の新機能はブラウザやデバイスごとに実装差がある 可能性を頭に置き、実装者との密な連携と十分な検証期間を。 • ソースコードが書けてデザイン・設計までできるデベ ロッパーの需要はさらに高まる。
- 28. HTML5のこれから • ノウハウ、ナレッジの共有がカギ > デザイン・オーサリングツール、ライブラリやフレームワー クの登場と進化のスピードも早い。これらの情報をいかに早く 手に入れ、検証・導入・共有できるかがカギ。 できる個人に依存しすぎれば社内での個々人のスキルの溝が空 き、できる人間とそうでない人間の二極化、さらにはできる人 間の流出へと。。
- 30. Thank you!!