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

1. モバイルWebアプリを
複数端末で動かすために
注意すること
2013.09.12
90分で身につくスマホウェブ制作術
@dsuket

2. About me
高岡大介
Work
• 外資系SIベンダーを経て研究所へ。
• Web技術研究開発・開発支援。
• 記事書いたり、資料作ったり、講演したり
• Japan Sencha User Group, AITC
twitter: @dsuket
facebook.com/dsuket
slideshare.net/dsuket
Inkpod Web
Sencha Touch
パーフェクトガイド

3. Webアプリ
作ってますか？

4. Mobile Web App
イイところ

5. •IEがない！
•

6. •IEがない！
•モダンHTML5機能が使える！
•

7. •IEがない！
•モダンHTML5機能が使える！
•仕事で新しいデバイスが使える！

8. Mobile Web App
イヤなところ

9. •端末サイズバラバラ
•

10. •端末サイズバラバラ
•細かい動きが全然ちがう
•

11. •端末サイズバラバラ
•細かい動きが全然ちがう
•バッドノウハウの塊

12. 本題

13. モバイルWebアプリ
コンテストに出してみた
事例ベースにノウハウと苦労話など

14. コンテンスト概要
•ドコモゼミ Webアプリラボ
•マルチプラットフォーム対応
•子供向け学習アプリ

15. かきまる

16. Mobile Webの注意点

17. Mobile Webの注意点
•画面小さい：
MBA 13 の 0.12倍

18. Mobile Webの注意点
•画面小さい：
MBA 13 の 0.12倍
•タッチUI：
マウスとは異なる操作

19. Mobile Webの注意点
•画面小さい：
MBA 13 の 0.12倍
•タッチUI：
マウスとは異なる操作
•回線細い：
遅い、不安定

20. Mobile Webの注意点
•画面小さい：
MBA 13 の 0.12倍
•タッチUI：
マウスとは異なる操作
•回線細い：
遅い、不安定
今日のスコープ

21. 気をつけたこと

22. 気をつけたこと
1. ボタンは大きく押しやすく

23. 気をつけたこと
1. ボタンは大きく押しやすく
2. 解像度に合わせた画像

24. 気をつけたこと
1. ボタンは大きく押しやすく
2. 解像度に合わせた画像
3. かわいいフォントを使いたい

25. 気をつけたこと
1. ボタンは大きく押しやすく
2. 解像度に合わせた画像
3. かわいいフォントを使いたい
4. アイコンもキレイに

26. 1. ボタンは大きく押しやすく

27. 1. ボタンは大きく押しやすく
•ずれているタッチポイント
• 参考：タッチUXを実現する7つのポイント

28. 1. ボタンは大きく押しやすく
•ずれているタッチポイント
• 参考：タッチUXを実現する7つのポイント
•スマホは不安定
• 片手で or 満員電車で or 歩きながら

29. 1. ボタンは大きく押しやすく
•ずれているタッチポイント
• 参考：タッチUXを実現する7つのポイント
•スマホは不安定
• 片手で or 満員電車で or 歩きながら
•子供は加減を知らない
• 目一杯押すのでドラッグになる

30. ボタンの当たりエリア

31. ボタンの当たりエリア
実際のサイズ

32. ボタンの当たりエリア
実際のサイズ
当たりエリア

33. tapイベント

34. tapイベント

35. tapイベント
•clickイベントは使わない

36. tapイベント
•clickイベントは使わない
•dragの閾値

37. tapイベント
•clickイベントは使わない
•dragの閾値
•Hammer.js が便利

38. 2. 解像度に合わせた画像

39. 2. 解像度に合わせた画像
•Retina対応

40. 2. 解像度に合わせた画像
•Retina対応
•画面一杯に表示したい

41. 2. 解像度に合わせた画像
•Retina対応
•画面一杯に表示したい
•ファイルサイズはできるだけ小さく

42. SVG
(Scalable Vector Graphics)
•パスデータをXMLで定義
•伸ばしても、Retinaでもキレイ！
•シンプルな画像ならpngよりも軽い
• gzipもできる
•アニメーションもできる

45. 同じSVG画像を使用

46. アニメーション
•ひらがなの書き順
•Pathを伸ばしながら描画
•SMILも使える

47. SVG Libralies
Raphaël
bonsai JS
D3.js

48. SVGの注意点
•やや重い（CPUを喰う）
•複雑なパスはサイズが大きい
• 軽量化が必要。パスの最適化など
•ブラウザによって微妙な差異がある

49. IMGタグで使用した時の問題

50. IMGタグで使用した時の問題

51. IMGタグで使用した時の問題
一部のAndroidで、アスペクト比が狂う

52. SVGタグのサイズ指定が重要
＜IMG SRC=”rama.svg”
width=”300” height=”300”>
・・・
＜svg
width=”600” height=”600”>
・・・
</svg>
rama.svg
index.html
viewbox
svg
img

53. 3. かわいいフォントを使いたい

54. 3. かわいいフォントを使いたい
•Android標準フォントはダサイ
•Web Fontできれいなフォントを

55. 3. かわいいフォントを使いたい
•Android標準フォントはダサイ
•Web Fontできれいなフォントを
•SVGでオリジナルフォント作成

56. fontの作り方

57. fontの作り方
•SVGでフォントの
アウトラインを作成

58. fontの作り方
•SVGでフォントの
アウトラインを作成
•FontForgeで変換

59. fontの作り方
•SVGでフォントの
アウトラインを作成
•FontForgeで変換
•日本語フォントは大変
• ダイナミック・サブセッティング

60. 4. アイコンもキレイに

61. 4. アイコンもキレイに
•Web Font をアイコン代わりに
•retinaにも対応

62. 4. アイコンもキレイに
•Web Font をアイコン代わりに
•retinaにも対応
•色んなアイコンセット
•Font Awesome
•IcoMoon

63. 4. アイコンもキレイに
•Web Font をアイコン代わりに
•retinaにも対応
•色んなアイコンセット
•Font Awesome
•IcoMoon

64. Web Fontアイコン 注意点

65. Web Fontアイコン 注意点
•色は変更可能
グラデーションはかけられない

66. Web Fontアイコン 注意点
•色は変更可能
グラデーションはかけられない
•外字エリアに注意
• 絵文字と被ることも
• 携帯電話の絵文字

67. テスト

68. テスト
•複数端末での確認が大変

69. テスト
•複数端末での確認が大変
•実機でしか出ない問題など

70. テスト
•複数端末での確認が大変
•実機でしか出ない問題など
•特にAndroid

71. テスト
•複数端末での確認が大変
•実機でしか出ない問題など
•特にAndroid

72. まとめ

73. まとめ
•タッチUI の特性を理解する

74. まとめ
•タッチUI の特性を理解する
•SVGは使える子

75. まとめ
•タッチUI の特性を理解する
•SVGは使える子
•実機で確認が大事

76. まとめ
•タッチUI の特性を理解する
•SVGは使える子
•実機で確認が大事
•Android爆発しろ！！