Your SlideShare is downloading. ×
0
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Android Bazaar and Conference 2012 Spring
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Android Bazaar and Conference 2012 Spring

1,339

Published on

2012年 3月 24日に東京大学にて開催された「Android Bazaar and Conference 2012 Spring」において、H2O Space. たにぐちまことが講演した「スマートフォンサイト制作、Androidのはまりどころ」のスライドです。

2012年 3月 24日に東京大学にて開催された「Android Bazaar and Conference 2012 Spring」において、H2O Space. たにぐちまことが講演した「スマートフォンサイト制作、Androidのはまりどころ」のスライドです。

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,339
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. スマートフォンサイト制作Androidのはまりどころ たにぐち まこと
  • 2. 本日発売
  • 3. 本日の内容✓ 2009年 スマートフォン誕生✓ Androidの現実✓ 対処法✓ イバラの道のスマホサイト✓ あなたの答え✓ レスポンシブ・Webデザイン✓ ハイブリッド・レスポンシブ✓ モバイルファースト✓ わたしの答え
  • 4. 2009年 スマートフォン誕生
  • 5. 夢のスマホサイト
  • 6. 夢のスマホサイト WebKitだけ確認すればOK フォントがキレイ HTML5、CSS3が使える! タッチイベントが使える! JavaScriptも動作する 夢のような世界です!
  • 7. 見えてくる現実
  • 8. Androidの現実 powered by
  • 9. 作ってみた http://www.x-fit.jp/demo1/
  • 10. 国内で販売されている全端末でテストした
  • 11. トラブル1:重ねた下のボタンが反応する 原因:レイヤーを重ねたため
  • 12. トラブル1:カルーセルが動かない 原因:Android 1.6だから
  • 13. トラブル1:こんな端末も 飛んでっちゃう
  • 14. トラブル2:謎のマージン 原因:CSSの解釈が異なる?
  • 15. トラブル2:不可解な発生機種パターン
  • 16. トラブル3:タップした場所が変 原因:Android 3.xだから?
  • 17. トラブル4:スクロールバーが出てしまう Xperiaと、HT-03Aのみ。謎。
  • 18. なぜ?
  • 19. Androidの複雑な事情✓ ハードが、Android側の意図にしたがっていない✓ 他のインストールソフトなどによる干渉?✓ Androidのソースをハードメーカーが改造している? 最終的には謎
  • 20. 対処法
  • 21. 対処の手順✓ 実機で確認する✓ アタリをつけて、実験を繰り返す✓ 対処する つまりは、決め手の方法がない
  • 22. 実機確認の方法✓ 全部買う✓ ヤマダ電機メソッド✓ 検証センターを利用する
  • 23. 特にクセの強い端末 国産端末など、 コア部分をいじっている端末がクセ者 XPeria REGZA Phone Aquos Phone
  • 24. イバラの道のスマホサイト
  • 25. 多様化するデバイス
  • 26. 多様化するプラットフォーム、ブラウザ
  • 27. 多様化するプラットフォーム、ブラウザ
  • 28. Yahoo! JAPANの答え
  • 29. Yahoo! JAPANの答え 時代に逆行!?
  • 30. リニューアルのポイント 体験から、実用へ
  • 31. Appleの答え
  • 32. Appleの答え 作らない
  • 33. あなたの答え
  • 34. 1:がんばる
  • 35. 2:CMSサービスなどを使う http://smart4me.net
  • 36. 3:ライブラリ、ツールを使う http://x-fit.jp ※音が出ます
  • 37. 3:ライブラリ、ツールを使う
  • 38. 3:ライブラリ、ツールを使う
  • 39. 4:作らない
  • 40. ここまでのまとめ✓ Androidはクセがありすぎる✓ 今後も増え続けるAndroid、 出てきた Windows Phone✓ PCサイトに加えて、スマホサイトもメンテ? 地獄のような世界です! ほんとすいません!
  • 41. レスポンシブ・Webデザイン
  • 42. レスポンシブ・Webデザイン Team PAWS Chicago | Brian Drum http://briandrum.net/team-paws/
  • 43. レスポンシブ・Webデザイン Hello Fisher http://hellofisher.com/
  • 44. レスポンシブ・Webデザインの利点 ✓ 複数のレイアウトを作らなくて良い ✓ ワンソースでPC、スマホを管理できる ✓ 利用者も レイアウトが大きく変わらず使える
  • 45. レスポンシブ・Webデザインの問題点 ✓ PC・スマホのどちらに対しても 中途半端なレイアウトになる ✓ デザインに制限が出る ✓ 設計・構築が非常に煩雑
  • 46. 勝手に言葉 作りましたハイブリッド・レスポンシブ
  • 47. ハイブリッド・レスポンシブ PC+スマホは別サイト スマホは、レスポンシブWeb
  • 48. ハイブリッド・レスポンシブ 4月上旬公開予定 http://cocoa-music.com
  • 49. ハイブリッド・レスポンシブ✓ PCサイトに制限がない✓ スマホでさまざまな画面サイズに対応✓ 設計は多少煩雑✓ スマホサイト制作の面倒さは変わらず
  • 50. モバイルファースト
  • 51. もちろん勝手に作りましたモバイルパーツ・ファースト
  • 52. モバイルパーツ・ファースト
  • 53. モバイルパーツ・ファースト スマホのパーツを、 PCサイトに流用
  • 54. モバイルパーツ・ファースト
  • 55. モバイルパーツ・ファースト PCサイトのパーツが大きい タブレットも視野に入れている?
  • 56. モバイルパーツ・ファースト✓ ボタンなどの制作の手間が減る✓ タブレット端末でも見やすくなる✓ PCサイトが大味なサイトになる✓ 1画面の情報量が減る
  • 57. わたしの答え
  • 58. 変化が求められるスマホサイト エクスペリエンス チ スマ ッ ート リ 重い 飽きた 見られない
  • 59. new iPadの登場 Retinaディスプレイの採用 画面表示能力は、現状のPCよりも上
  • 60. Appleの iPadへの対応 iPad、iPhone 4(S)用 ipad_hero.jpg ipad_hero_2x.jpg
  • 61. Retina Display搭載 Androidの登場?
  • 62. サイトの主役はタブレットへ?
  • 63. サイトの主役はタブレットへ?
  • 64. タブレット、スマホを意識したサイト制作✓ テキストリンク→ボタン✓ ボタン・ナビの大型化✓ バナーでの表現の増加
  • 65. PCサイト、スマホサイトではなく、「Webサイト」がデバイスを問わない時代 5月頃公開 http://h2o-space.com
  • 66. まとめ
  • 67. まとめ✓ Androidのすべての端末に、 クリエイタのがんばりで対応するのは、ほぼ不可能✓ 今後も増え続けるプラットフォーム✓ スマホサイト制作の考え方自体を変える必要がある サイトの特性やトレンドを見極めて
  • 68. h2o space 検索

×