Your SlideShare is downloading. ×
0
スマートフォンにおける リッチコンテンツの提供について ~ HTML5 と JavaScript をフル活用~ 株式会社エボルニ システム部門 ディレクター 出口 達也
プロフィール <ul><ul><li>Web エンジニア兼ディレクター </li></ul></ul><ul><ul><li>エボルニで 5 年目(古い方から 2 番目です) </li></ul></ul><ul><ul><li>PHP での開...
スマートフォンユーザーにも リッチなコンテンツを提供したいけど… Flash は Android2.2 以上の端末でしか使えない
Flash 以外のリッチコンテンツ提供方法 Flash 以外ならこいつらしか居ない! CSS3
Flash 以外のリッチコンテンツ提供方法 <ul><li>動画について </li></ul>テキストリンク OR <video>  <source src=&quot; ~ &quot; type=' ~ ' /> </video> YouT...
Flash 以外のリッチコンテンツ提供方法 <ul><li>PC サイトがフルフラッシュ </li></ul>Flash ってなに?ぐらいの勢いで Flash を使わずに、スマートフォン用のサイトを作りましょう!
Flash 以外のリッチコンテンツ提供方法 <ul><li>PC サイトの一部が Flash のサイト </li></ul><ul><ul><li>ナビゲーション </li></ul></ul><ul><ul><ul><li>Flash でなく...
まとめ ~これからの標準~ 以上です。より良い Web サイトを作りましょう! Flash を使わずに、 JavaScript+HTML5+CSS3 の組み合わせで制作しましょう! PC 版で Flash を多数使ったリッチコンテンツを提供する...
Upcoming SlideShare
Loading in...5
×

スマートフォンにおけるリッチコンテンツの提供について

1,908

Published on

社内スマートフォン共有会で使用したスライドを公開用に調整したもの

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,908
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • フルフラッシュサイト そもそもフルフラッシュサイトってどないやねん 全てをスマートフォンに対応するのは難しい フルフラッシュサイトは、スマートフォン版を別で用意することを 検討するべき スマートフォン版では、 PC 版とは別に考え ユーザーインターフェースの工夫程度に抑える方が スマートフォン利用者には優しい
  • Transcript of "スマートフォンにおけるリッチコンテンツの提供について"

    1. 1. スマートフォンにおける リッチコンテンツの提供について ~ HTML5 と JavaScript をフル活用~ 株式会社エボルニ システム部門 ディレクター 出口 達也
    2. 2. プロフィール <ul><ul><li>Web エンジニア兼ディレクター </li></ul></ul><ul><ul><li>エボルニで 5 年目(古い方から 2 番目です) </li></ul></ul><ul><ul><li>PHP での開発が得意です( CakePHP を主に使います) </li></ul></ul><ul><ul><li>でも、 PHP より Java の方が好き(一部の人に、 Java 男と呼ばれた過去があります) </li></ul></ul><ul><ul><li>最近は、 JavaScript (主に jQuery や jQuery Mobile )と HTML5 関連に胸が踊ります </li></ul></ul><ul><ul><li>Flash は嫌いです… </li></ul></ul><ul><ul><li>Xperia(SO-01B) ユーザーです! </li></ul></ul><ul><ul><li>Facebook やってま~す http://www.facebook.com/tatsuya.deguchi </li></ul></ul>
    3. 3. スマートフォンユーザーにも リッチなコンテンツを提供したいけど… Flash は Android2.2 以上の端末でしか使えない
    4. 4. Flash 以外のリッチコンテンツ提供方法 Flash 以外ならこいつらしか居ない! CSS3
    5. 5. Flash 以外のリッチコンテンツ提供方法 <ul><li>動画について </li></ul>テキストリンク OR <video> <source src=&quot; ~ &quot; type=' ~ ' /> </video> YouTube なら自動的に最適化してくれる。 または、テキストリンクで、直接ファイルを指定。 HTML5 の video タグは、まだ完璧じゃない。 OR
    6. 6. Flash 以外のリッチコンテンツ提供方法 <ul><li>PC サイトがフルフラッシュ </li></ul>Flash ってなに?ぐらいの勢いで Flash を使わずに、スマートフォン用のサイトを作りましょう!
    7. 7. Flash 以外のリッチコンテンツ提供方法 <ul><li>PC サイトの一部が Flash のサイト </li></ul><ul><ul><li>ナビゲーション </li></ul></ul><ul><ul><ul><li>Flash でなくても実現出来ることほとんど </li></ul></ul></ul><ul><ul><ul><li>はじめから JavaScript を使って実装する </li></ul></ul></ul><ul><ul><ul><li>onmouseover, onmousemove, onmouseout などの mouse 系イベントが使えない </li></ul></ul></ul><ul><ul><ul><li>代わりに、 onontouchstart, ontouchmove, ontouchend などの touch 系イベントを使う必要がある </li></ul></ul></ul><ul><ul><li>スライドショー </li></ul></ul><ul><ul><ul><li>Flash の代わりに JavaScript を使う </li></ul></ul></ul><ul><ul><ul><li>アニメーションは少なく、ある程度単純化すれば JavaScript で問題なく出来る </li></ul></ul></ul>
    8. 8. まとめ ~これからの標準~ 以上です。より良い Web サイトを作りましょう! Flash を使わずに、 JavaScript+HTML5+CSS3 の組み合わせで制作しましょう! PC 版で Flash を多数使ったリッチコンテンツを提供する場合は、 コストはかかりますが、スマートフォン版の制作をしましょう!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×