モバイルWebアプリケーションを複数端末で動かすために注意すること

2,359 views

Published on

NTTレゾナントさんの「90分で身につくスマホウェブ制作術」で話した資料です。
http://atnd.org/events/42962

モバイルWebアプリケーションを複数端末で動かすために注意すること

  1. 1. モバイルWebアプリを 複数端末で動かすために 注意すること 2013.09.12 90分で身につくスマホウェブ制作術 @dsuket
  2. 2. About me 高岡大介 Work • 外資系SIベンダーを経て研究所へ。 • Web技術研究開発・開発支援。 • 記事書いたり、資料作ったり、講演したり • Japan Sencha User Group, AITC twitter: @dsuket facebook.com/dsuket slideshare.net/dsuket Inkpod Web Sencha Touch パーフェクトガイド
  3. 3. Webアプリ 作ってますか?
  4. 4. Mobile Web App イイところ
  5. 5. •IEがない! •
  6. 6. •IEがない! •モダンHTML5機能が使える! •
  7. 7. •IEがない! •モダンHTML5機能が使える! •仕事で新しいデバイスが使える!
  8. 8. Mobile Web App イヤなところ
  9. 9. •端末サイズバラバラ •
  10. 10. •端末サイズバラバラ •細かい動きが全然ちがう •
  11. 11. •端末サイズバラバラ •細かい動きが全然ちがう •バッドノウハウの塊
  12. 12. 本題
  13. 13. モバイルWebアプリ コンテストに出してみた 事例ベースにノウハウと苦労話など
  14. 14. コンテンスト概要 •ドコモゼミ Webアプリラボ •マルチプラットフォーム対応 •子供向け学習アプリ
  15. 15. かきまる
  16. 16. Mobile Webの注意点
  17. 17. Mobile Webの注意点 •画面小さい:  MBA 13 の 0.12倍
  18. 18. Mobile Webの注意点 •画面小さい:  MBA 13 の 0.12倍 •タッチUI:  マウスとは異なる操作
  19. 19. Mobile Webの注意点 •画面小さい:  MBA 13 の 0.12倍 •タッチUI:  マウスとは異なる操作 •回線細い:  遅い、不安定
  20. 20. Mobile Webの注意点 •画面小さい:  MBA 13 の 0.12倍 •タッチUI:  マウスとは異なる操作 •回線細い:  遅い、不安定 今日のスコープ
  21. 21. 気をつけたこと
  22. 22. 気をつけたこと 1. ボタンは大きく押しやすく
  23. 23. 気をつけたこと 1. ボタンは大きく押しやすく 2. 解像度に合わせた画像
  24. 24. 気をつけたこと 1. ボタンは大きく押しやすく 2. 解像度に合わせた画像 3. かわいいフォントを使いたい
  25. 25. 気をつけたこと 1. ボタンは大きく押しやすく 2. 解像度に合わせた画像 3. かわいいフォントを使いたい 4. アイコンもキレイに
  26. 26. 1. ボタンは大きく押しやすく
  27. 27. 1. ボタンは大きく押しやすく •ずれているタッチポイント • 参考:タッチUXを実現する7つのポイント
  28. 28. 1. ボタンは大きく押しやすく •ずれているタッチポイント • 参考:タッチUXを実現する7つのポイント •スマホは不安定 • 片手で or 満員電車で or 歩きながら
  29. 29. 1. ボタンは大きく押しやすく •ずれているタッチポイント • 参考:タッチUXを実現する7つのポイント •スマホは不安定 • 片手で or 満員電車で or 歩きながら •子供は加減を知らない • 目一杯押すのでドラッグになる
  30. 30. ボタンの当たりエリア
  31. 31. ボタンの当たりエリア 実際のサイズ
  32. 32. ボタンの当たりエリア 実際のサイズ 当たりエリア
  33. 33. tapイベント
  34. 34. tapイベント
  35. 35. tapイベント •clickイベントは使わない
  36. 36. tapイベント •clickイベントは使わない •dragの閾値
  37. 37. tapイベント •clickイベントは使わない •dragの閾値 •Hammer.js が便利
  38. 38. 2. 解像度に合わせた画像
  39. 39. 2. 解像度に合わせた画像 •Retina対応
  40. 40. 2. 解像度に合わせた画像 •Retina対応 •画面一杯に表示したい
  41. 41. 2. 解像度に合わせた画像 •Retina対応 •画面一杯に表示したい •ファイルサイズはできるだけ小さく
  42. 42. SVG (Scalable Vector Graphics) •パスデータをXMLで定義 •伸ばしても、Retinaでもキレイ! •シンプルな画像ならpngよりも軽い • gzipもできる •アニメーションもできる
  43. 43. 同じSVG画像を使用
  44. 44. アニメーション •ひらがなの書き順 •Pathを伸ばしながら描画 •SMILも使える
  45. 45. SVG Libralies Raphaël bonsai JS D3.js
  46. 46. SVGの注意点 •やや重い(CPUを喰う) •複雑なパスはサイズが大きい • 軽量化が必要。パスの最適化など •ブラウザによって微妙な差異がある
  47. 47. IMGタグで使用した時の問題
  48. 48. IMGタグで使用した時の問題
  49. 49. IMGタグで使用した時の問題 一部のAndroidで、アスペクト比が狂う
  50. 50. SVGタグのサイズ指定が重要 <IMG SRC=”rama.svg” width=”300” height=”300”> ・・・ <svg width=”600” height=”600”> ・・・ </svg> rama.svg index.html viewbox svg img
  51. 51. 3. かわいいフォントを使いたい
  52. 52. 3. かわいいフォントを使いたい •Android標準フォントはダサイ •Web Fontできれいなフォントを
  53. 53. 3. かわいいフォントを使いたい •Android標準フォントはダサイ •Web Fontできれいなフォントを •SVGでオリジナルフォント作成
  54. 54. fontの作り方
  55. 55. fontの作り方 •SVGでフォントの アウトラインを作成
  56. 56. fontの作り方 •SVGでフォントの アウトラインを作成 •FontForgeで変換
  57. 57. fontの作り方 •SVGでフォントの アウトラインを作成 •FontForgeで変換 •日本語フォントは大変 • ダイナミック・サブセッティング
  58. 58. 4. アイコンもキレイに
  59. 59. 4. アイコンもキレイに •Web Font をアイコン代わりに •retinaにも対応
  60. 60. 4. アイコンもキレイに •Web Font をアイコン代わりに •retinaにも対応 •色んなアイコンセット •Font Awesome •IcoMoon
  61. 61. 4. アイコンもキレイに •Web Font をアイコン代わりに •retinaにも対応 •色んなアイコンセット •Font Awesome •IcoMoon
  62. 62. Web Fontアイコン 注意点
  63. 63. Web Fontアイコン 注意点 •色は変更可能 グラデーションはかけられない
  64. 64. Web Fontアイコン 注意点 •色は変更可能 グラデーションはかけられない •外字エリアに注意 • 絵文字と被ることも • 携帯電話の絵文字
  65. 65. テスト
  66. 66. テスト •複数端末での確認が大変
  67. 67. テスト •複数端末での確認が大変 •実機でしか出ない問題など
  68. 68. テスト •複数端末での確認が大変 •実機でしか出ない問題など •特にAndroid
  69. 69. テスト •複数端末での確認が大変 •実機でしか出ない問題など •特にAndroid
  70. 70. まとめ
  71. 71. まとめ •タッチUI の特性を理解する
  72. 72. まとめ •タッチUI の特性を理解する •SVGは使える子
  73. 73. まとめ •タッチUI の特性を理解する •SVGは使える子 •実機で確認が大事
  74. 74. まとめ •タッチUI の特性を理解する •SVGは使える子 •実機で確認が大事 •Android爆発しろ!!

×