SlideShare a Scribd company logo
HTML5の現在と未来
    HTML5といえば「カヤックHTMLファイ部」
              HTMLファイ部 比留間 和也・神代 友行




13年4月23日火曜日
自己紹介

              • 面白法人カヤック
               HTMLファイ部所属
               比留間 和也

              • 最近はJSばっかりで、
               あんまりHTML書いてません。



13年4月23日火曜日
自己紹介

              • 面白法人カヤック
               HTMLファイ部所属
               神代 友行


              • Webアプリをメインに開発しています

13年4月23日火曜日
事例紹介



13年4月23日火曜日
デリカD:5 クリーンディーゼル インフォグラフィックスカタログ



13年4月23日火曜日
ジオプリ島とインクの妖精たち


13年4月23日火曜日
JAL SKY SHARE


13年4月23日火曜日
WBCセカンドスクリーンサイト


13年4月23日火曜日
カヤックでは
          キャンペーンがメイン


13年4月23日火曜日
ですが、
       カヤック HTMLファイ部ではいつも
       HTML5の可能性を模索しています。




13年4月23日火曜日
HTML5でつくる
              Webアプリ事情



13年4月23日火曜日
Agenda
              • 世界の事例
              • KAYACの事例
              • 作って分かったこと
                 • メリット / デメリット

13年4月23日火曜日
世界の事例



13年4月23日火曜日
sun
         http://pattern.dk/sun/

         •    天気アプリ


         •    ホームアイコン化必須




13年4月23日火曜日
sun
         http://pattern.dk/sun/

         •    天気アプリ


         •    ホームアイコン化必須




13年4月23日火曜日
TabTimes
         http://tabtimes.com/

          •   ニュースアプリ


          •   タブレット特化




13年4月23日火曜日
TabTimes
         http://tabtimes.com/

          •   ニュースアプリ


          •   タブレット特化




13年4月23日火曜日
Financial Times
          http://apps.ft.com/

         •    ニュースアプリ


         •    iOSアプリからの移行で成功




13年4月23日火曜日
Financial Times
          http://apps.ft.com/

         •    ニュースアプリ


         •    iOSアプリからの移行で成功




13年4月23日火曜日
Fastbook
          http://fb.html5isready.com/

         •    sencha touch FWのfacebook viewer


         •    実験アプリ




13年4月23日火曜日
Fastbook
          http://fb.html5isready.com/

         •    sencha touch FWのfacebook viewer


         •    実験アプリ




13年4月23日火曜日
KAYACの事例



13年4月23日火曜日
aquoria
          http://aquoria.com

         •    友達同士で写真を共有するアプリ


         •    Native アプリを意識したUI


         •    Webアプリに最適な機能、UIを
              検証しつつプロジェクト進行中




13年4月23日火曜日
aquoria
          http://aquoria.com

         •    友達同士で写真を共有するアプリ


         •    Native アプリを意識したUI


         •    Webアプリに最適な機能、UIを
              検証しつつプロジェクト進行中




13年4月23日火曜日
13年4月23日火曜日
Webアプリの
         メリット・デメリット


13年4月23日火曜日
メリット
              • マーケットの課金手数料不要
              • クロスプラットフォーム
              • アプリ審査なし



13年4月23日火曜日
メリット
              ⃝ • マーケットの課金手数料不要
              △ • クロスプラットフォーム

              ⃝ • アプリ審査なし




13年4月23日火曜日
メリット
              ⃝ • マーケットの課金手数料不要
              △ • クロスプラットフォーム

              ⃝ • アプリ審査なし

              ⃝ • ダウンロード不要




13年4月23日火曜日
デメリット
              • パフォーマンスが悪くなりがち
              • 端末機能の利用に制限あり( ex. push通知)
              • マーケットで発見されにくい
              • HTML5の仕様変更の可能性あり

13年4月23日火曜日
デメリット
              ⃝   • パフォーマンスが悪くなりがち
              △   • 端末機能の利用に制限あり( ex. push通知)
              ✕   • マーケットで発見されにくい
              ✕   • HTML5の仕様変更の可能性あり

13年4月23日火曜日
Webアプリは
              実際どうだったか?


13年4月23日火曜日
大変 (´・ω・`)



13年4月23日火曜日
• 端末の種類がたくさん
              • パフォーマンスが悪くなりがち
              • 機能は制限される .....


13年4月23日火曜日
Native app = Web アプリ




13年4月23日火曜日
Native app   ≠ Webアプリ

13年4月23日火曜日
Webアプリ最適化

              ・Native appの良さを踏襲しつつ

              ・Webに最適な機能、UIに変えていく




13年4月23日火曜日
HTML5を利用して
     新しいWebアプリの形を
              模索しています

13年4月23日火曜日
楽しいよ!(*´∀`*)



13年4月23日火曜日
Firefox OS                                                               smart TV
      http://realgeekstech.com/zte-open-is-first-phone-to-run-firefox-os/   http://www.samsung.com/us/2012-smart-tv/img/intro-smartHubTV.png




                                                                                   car navigation
                                                                                              http://www.atpress.ne.jp/releases/31512/v_1.png




13年4月23日火曜日
楽しいよ!(*´∀`*)



13年4月23日火曜日
HTML5の未来



13年4月23日火曜日
クラウド API
                       オフライン API




              Device     WebGL
                API



                NSD      Web
                API     Socket


13年4月23日火曜日
Device free!
              Place free!


13年4月23日火曜日
例えば
13年4月23日火曜日
PCで記事を読み始め
13年4月23日火曜日
電車内ではiPadを使って続きを読み

13年4月23日火曜日
待ち合わせ場所ではiPhoneで読み続ける

13年4月23日火曜日
アプリではなく
              「体験」の提供


13年4月23日火曜日
パフォーマンスが悪い? 制約が多い?

13年4月23日火曜日
Blink

              Servo
                              asm.js




                Web業界の変化の
              スピードはまさに日進月歩
13年4月23日火曜日
どこにフォーカス
              すればいいの?


13年4月23日火曜日
HTML5関連API群
                 出典: http://www.slideshare.net/dynamis/firefox-os-html5j

13年4月23日火曜日
範囲が広すぎる


              HTML5関連API群
                 出典: http://www.slideshare.net/dynamis/firefox-os-html5j

13年4月23日火曜日
HTML5でなにができるのか、

              を考えるのではなく、

         HTML5でなにをしたいのか。



13年4月23日火曜日
FULL CONTROL tokyo
13年4月23日火曜日
なにができるかではなく、
            なにを作るか。



13年4月23日火曜日
ご静聴ありがとうございました




13年4月23日火曜日

More Related Content

PDF
120225 bootstrap
PPTX
Symfonyコンポーネントで生まれ変わるEC-CUBE
PDF
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
PDF
javaとフロントエンド | 2014夏JJUG納涼会
PDF
CSS3 filterとtransformをtransition, animationでアニメーション
KEY
続・Twitter bootstrap入門 #html5j
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
PDF
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
120225 bootstrap
Symfonyコンポーネントで生まれ変わるEC-CUBE
スマフォ時代に乗り遅れない為のレスポンシブ・ウェブデザイン
javaとフロントエンド | 2014夏JJUG納涼会
CSS3 filterとtransformをtransition, animationでアニメーション
続・Twitter bootstrap入門 #html5j
今から始めよう!WordPressで作る女子ウケ★スマホサイト
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料

Viewers also liked (6)

KEY
1Day works shop
KEY
Speedup
KEY
最新事例に見るHTML5でつくるアプリの可能性
KEY
HTML5 with PhoneGap
PDF
FiltersでGLSLを楽しく学んじゃおう!
PPTX
WebVRってこんなことできるよ!
1Day works shop
Speedup
最新事例に見るHTML5でつくるアプリの可能性
HTML5 with PhoneGap
FiltersでGLSLを楽しく学んじゃおう!
WebVRってこんなことできるよ!
Ad

Similar to Kddi mugen lab (20)

PDF
マルチデバイス対応のコーディング・マークアップのポイント
PDF
Webアプリのマークアップ、どうすればいいの?
PDF
NDS31 はじめてChrome App
PDF
LL祭り2013資料
PDF
Movable type-seminar-20120411-ideamans
PDF
開発環境としてのAwsを真面目に考える jawsug2013三都物語公開用
PPTX
Kids, Ruby, Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
PDF
PhoneGapで作るハイブリッドアプリケーション
PDF
早稲田大学授業 - モバイルプログラミング
PDF
Opencampus
PDF
WebRTC + Web Audio API = スーパーサイヤ人
PDF
Where Should Developers Go
PDF
仮想マシンざっくり解説と実践Vagrant | StaticPress × S3 × Vagrant 勉強会
PDF
20130412 titanium meetupvol7
PDF
ワンクリックデプロイ 〜いつまで手でデプロイしてるんですか〜 #devsumiA
PDF
地域Ruby会議に参加してきた話とか
PDF
雲にのって札幌まで来た話
PDF
サラリーマン
PDF
Mattt Thompson at Heroku's Waza 2013: Mobile is not Different
PDF
アプリケーションプラットホームとしてのWordPress
マルチデバイス対応のコーディング・マークアップのポイント
Webアプリのマークアップ、どうすればいいの?
NDS31 はじめてChrome App
LL祭り2013資料
Movable type-seminar-20120411-ideamans
開発環境としてのAwsを真面目に考える jawsug2013三都物語公開用
Kids, Ruby, Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
PhoneGapで作るハイブリッドアプリケーション
早稲田大学授業 - モバイルプログラミング
Opencampus
WebRTC + Web Audio API = スーパーサイヤ人
Where Should Developers Go
仮想マシンざっくり解説と実践Vagrant | StaticPress × S3 × Vagrant 勉強会
20130412 titanium meetupvol7
ワンクリックデプロイ 〜いつまで手でデプロイしてるんですか〜 #devsumiA
地域Ruby会議に参加してきた話とか
雲にのって札幌まで来た話
サラリーマン
Mattt Thompson at Heroku's Waza 2013: Mobile is not Different
アプリケーションプラットホームとしてのWordPress
Ad

More from Kazuya Hiruma (20)

PDF
Jump & Coin - 空間を超えるゲーム体験 - | LODGE XR TALK
PDF
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
PDF
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
PDF
ARグラスで 魅力的な絵作り
PDF
AWE Nite ARKit3 Hackathon
PDF
レイマーチ入門勉強会資料
PDF
MESONで手がけたARアプリ AR Developer Meetup #2
PDF
みんなレイ飛ばしてる?
PDF
VRゲーム制作楽しいよ! @UnityおとなのLT大会
PDF
ElminaAR - Unity x ARKit 入門Meetup
PPTX
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
PPTX
UnityでARKitハンズオン
PPTX
すぐそこにある未来〜AR〜
PPTX
VRで酔わないコンテンツ作り
PPTX
WebVRコンテンツ制作入門
PPTX
そしてWebVR
PPTX
Unity入門ハンズオン
PPTX
WebVR 酔いづらいコンテンツの作り方
PPTX
WebVRことはじめ
PDF
集まっTail #5 LT
Jump & Coin - 空間を超えるゲーム体験 - | LODGE XR TALK
MESONプロジェクトから学ぶこれからのAR開発に必要なこと
PORTAL with Nreal in CES 2020 開発の学び @XR Hub
ARグラスで 魅力的な絵作り
AWE Nite ARKit3 Hackathon
レイマーチ入門勉強会資料
MESONで手がけたARアプリ AR Developer Meetup #2
みんなレイ飛ばしてる?
VRゲーム制作楽しいよ! @UnityおとなのLT大会
ElminaAR - Unity x ARKit 入門Meetup
今すぐ始められるモバイルVR〜あなたも今日からVRエンジニア〜
UnityでARKitハンズオン
すぐそこにある未来〜AR〜
VRで酔わないコンテンツ作り
WebVRコンテンツ制作入門
そしてWebVR
Unity入門ハンズオン
WebVR 酔いづらいコンテンツの作り方
WebVRことはじめ
集まっTail #5 LT

Kddi mugen lab