安部正幸
KDDI Web Communications勤務。ホスティングサービスCPI、SmartReleaseなどのプロダクトマネージャー
HTML5&OSS-DB Festival ~2014 Spring~
日時 2014年04月11日（金）
主催 LPI-Japan
まずはじめに
IE6サポート終了おめでとうございますｗ
CPIのIEアクセス数をみるとIE6,IE7は0.4%、今後はIE8以上でOK
昨今の制作について
クラウドワークスを見ると、好評価なデザイナーでさえ時給1,000円〜で仕事をしている。
オフショア開発などにより、制作単価の下落も発生している。
10年先、20年先生き残るためにはどうすれば良いのか？
→制作に加えて何か価値が必要。新しい価値を創造する。
普段の仕事
エバンジェリストなので、ブログを書いていたが、ブログ経由のサーバ系契約が1件/３ヶ月。
わかりやすいブログ記事を作成し、アクセス数をアップ。サーバ契約が9件/1ヶ月にもなった。
自分の場合は「売上や集客のナレッジ」を付加価値として提供できている。
メガネスーパーのWebコンテンツ作成者デザイン性よりもCVを付加価値として提供している。
未来の価値創造のために、HTML5が注目されている。
###HTML5とは
厳密には：マークアップ言語「HTML」の５回目にあたる改訂版
一般的には：CSS3、JavaScript、HTML5などを利用したリッチなサイト構築のための技術の総称。
HTML5が注目される理由
時代背景としてスマートデバイスの普及
2011年SmartPhoneが、パソコンとタブレットの出荷台数を上回った。
2013年の統計では、PCと同等数のタブレットが出荷されている。
総務省の統計情報でも、急速に普及している。
現在は手元にITがある。
全員がスマートフォン、タブレットを持っている。
BtoBサイトでも25%のアクセスがスマートデバイス。
BtoCサイトでは50%のアクセスがスマートデバイス。
画面サイズが多様化
昨年でも12K種類の画面サイズが存在する。
ピクセル指定でサイト構築するのは不可能→レスポンシブデザインが重要になってきた
寝ながら、電車に乗りながら、歩きながらアクセスする利用者のために新しい価値を提供する必要がある。
HTML5が重要になってきた。
HTML5が提供する「新しい価値」
注目されるサービスには「新しい価値」が必ずある。
HTML5はHTML4では提供できなかった新しい価値を届けられる。
HTML5の注目技術：WebRTC
インストールなしでリアルタイムコミュニケーションができる。
また、サーバを経由せずにクライアント同士で通信できる。
NTTComが提供しているPeer.JSを使うとjsライブラリを読み込むだけで簡単に実装できる。
コピペで簡単にSkype通信のようなものが実現できる。
これを用いてどのような新しい価値を提供できるかとなる。
例えば、、、
Webサイト上でカスタマーケアがチャットで相談に乗ってくれるサービスはある。
しかし、WebRTCを用いればSkypeのような形で顧客の相談にのることができる。
HTML5の注目技術：WebStorage
Cookieとの違い 容量が4KBから5MBになった。
オフラインWebアプリケーションの構築が可能に。
メリット
- 電波がなくてもアプリケーションが利用できる。
- 通信回数が少なくなる。
- ローカルにキャッシュされるので、描画が高速
HTML5の注目技術：その他。
File APIとかIndexed DataBaseとか。。。
HTML5の注目技術：Geolocation API
位置情報を取得して、jsで簡単に利用できる。
例えば、「天気予報」をググるだけで、現地の天気が表示される。
昨今のWeb技術革新はすごい。しかもWebコピペするだけで簡単に利用が可能
このような現状では差別化のためにHTML5の技術を利用するのは非常に有効だと考えられる。
今後、製作単価は下落する。
製作単価を下げる
新しい価値を
今まであった技術でも実現可能だが、なぜ注目されるのか？
HTML5が敷居を下げている。アイデアがあれば誰でも参加が可能。
昔だったら1000万かかるようなサービスが簡単に作れる様になった
今後の製作者は全てを使える必要は無いが、どんなことができるかは知っておく必要がある。
提案できるスコープが狭まってしまう。
さまざまなプロダクトを知り、新しい価値を創造することが必要。
事例で学ぶHTML5ハイブリッドアプリ開発
海原才人 アシアル株式会社-システム構築の営業窓口担当
アシアル株式会社
革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を想像する。
Web構築、モバイルアプリ構築など
増え続けるスマートフォン端末とOS
昨年度は10億台のスマフォが出荷された。地球人の７人に１人。
パソコンは８０００万台。スマフォの１０倍以上になっている。
OSシェアとしてはAndroidが82%を占めている。
開発者は多くのOSに対応したアプリを開発する必要がある。
モバイル・アプリ開発に関する課題
複数OS対応×需要の増大
それぞれのOSは開発環境、言語がそれぞれ異なり、対応するアプリを開発しないといけない。
- 開発環境の構築が大変
- 開発コストとエンジニアの確保に課題
複数のモバイルOSに対応するために
- 同時に全てのプラットフォーム適応することができるように構築するため、HTML5を採用している。
- １プラットフォームは、１ネイティブにて開発し、後で別に展開する
- 重要なプラットフォームはネイティブにし、、多くのターゲットプラットフォームにはHTML5を採用している。
ハイブリットアプリの台頭
- OSや端末の性能を最大限に発揮するためにはネイティブ形式が望ましい
- クロスプラットフォーム性や、開発体制の確保ではhTML形式が優位
HTML5アプリでは実現できないこと
- デバイスの特殊な機能を用いたい場合
- BlueTooth通信
- デバイス内のファイルの読み書き
- カメラ撮影
- OSの機能を用いたい場合
- プッシュ通信
- GameCenterやPassbookなどへの対応
- ホーム画面のウィジェット
- ハードウェアの能力を最大限用いたい場合
- 高度なアニメーション（3D、OpenGLなど）
- ポインタによる高速演算
「フラグシップ」アプリはネイティブアプリが使われる可能性が高い
クロスプラットフォームツール
クロスプラットフォームの選択基準
選択基準としては、クロスプラットフォーム性、開発速度、学習曲線が挙げられる。
クロスプラットフォームのマインドシェア
- PhoneGap 34%
- Titanium 21%
- Adobe AIR 19%
- etc...
PhoneGapの仕組み
なぜ、HTML5で作ったアプリが、ネイティブアプリとしてインストールできるのか？
ハイブリッドアプリは「PhoneGap」というライブラリを利用して開発します。PhoneGapはHTMLで作成されたコードをネイティブコードでパッケージングします。
なぜ、デバイスの機能にアクセスできるのでしょうか？
カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命名を記述します。するとPhoneGapがネイティブコードによって対応する機能を実行します。
事例紹介
PhoneGapはphongap.comに行くと複数のアプリが紹介されている。
テレ朝のハイブリットキャスト、auのニュース配信アプリの事例紹介など。
ハイブリッドアプリQ&Aまとめ
######ユーザーインターフェースがネイティブに劣るのではないか？
iPhone、ipadでは特に問題はない。ただしAndroidはアニメーション表示が不得意であるため、気をつける必要がある。
実際のところ、HTML5アプリはHTML5アプリやハイブリットアプリでどのくらいのことができるのか？ネイティブだけで作る場合との違いはなにか？
BtoBの業務管理系アプリ、BtoCの情報配信系アプリでは、ネイティブアプリと大きな代わりはなに。ゲームアプリも時間の問題ではないかと考えている。
Android/iPhone/iPadで機種依存の問題はないのか？
設計・開発がしっかりしていれば、特に問題は見当たらない。マルチプラットフォームでやるのであれば、HTML5が有利なのではないか
AppStoreや各キャリアのマーケットへの申請は通過するのか。
全く問題ない。ハイブリットアプリであるという理由で申請が通らないことはない。
参考
- ブラウザだけで利用できるクラウド時代の無料サービス
- ネイティブアプリを同時開発
- 開発言語はHTML5とJavaScript
- Monaca for HibridCastを利用するとTV向けのハイブリッドアプリも作成できる。