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