モバイルWebアプリを複数端末で動かすために

注意すること

2013.09.1290分で身につくスマホウェブ制作術

@dsuket

About me高岡大介Work

• 外資系SIベンダーを経て研究所へ。• Web技術研究開発・開発支援。• 記事書いたり、資料作ったり、講演したり• Japan Sencha User Group, AITC

twitter: @dsuketfacebook.com/dsuketslideshare.net/dsuket

Inkpod Web

Sencha Touchパーフェクトガイド

Webアプリ作ってますか？

Mobile Web Appイイところ

•IEがない！

•

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

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

Mobile Web Appイヤなところ

•端末サイズバラバラ

•

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

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

本題

モバイルWebアプリコンテストに出してみた

事例ベースにノウハウと苦労話など

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

かきまる

Mobile Webの注意点

Mobile Webの注意点

•画面小さい：　MBA 13” の 0.12倍

Mobile Webの注意点

•画面小さい：　MBA 13” の 0.12倍

•タッチUI：　マウスとは異なる操作

Mobile Webの注意点

•画面小さい：　MBA 13” の 0.12倍

•タッチUI：　マウスとは異なる操作

•回線細い：　遅い、不安定

Mobile Webの注意点

•画面小さい：　MBA 13” の 0.12倍

•タッチUI：　マウスとは異なる操作

•回線細い：　遅い、不安定

今日のスコープ

気をつけたこと

気をつけたこと

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

気をつけたこと

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

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

気をつけたこと

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

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

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

気をつけたこと

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

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

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

4. アイコンもキレイに

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

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

•ずれているタッチポイント• 参考：タッチUXを実現する7つのポイント

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

•ずれているタッチポイント• 参考：タッチUXを実現する7つのポイント

•スマホは不安定• 片手で or 満員電車で or 歩きながら

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

•ずれているタッチポイント• 参考：タッチUXを実現する7つのポイント

•スマホは不安定• 片手で or 満員電車で or 歩きながら

•子供は加減を知らない• 目一杯押すのでドラッグになる

ボタンの当たりエリア

ボタンの当たりエリア

実際のサイズ

ボタンの当たりエリア

実際のサイズ

当たりエリア

tapイベント

tapイベント

tapイベント

• clickイベントは使わない

tapイベント

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

tapイベント

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

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

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

•Retina対応

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

•Retina対応•画面一杯に表示したい

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

•Retina対応•画面一杯に表示したい•ファイルサイズはできるだけ小さく

SVG (Scalable Vector Graphics)

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

同じSVG画像を使用

アニメーション

•ひらがなの書き順• Pathを伸ばしながら描画• SMILも使える

SVG Libralies

Raphaël

bonsai JS

D3.js

SVGの注意点

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

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

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

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

一部のAndroidで、アスペクト比が狂う

SVGタグのサイズ指定が重要

＜IMG SRC=”rama.svg”

width=”300” height=”300”>・・・

＜svg

width=”600” height=”600”>・・・</svg>

rama.svg

index.html

viewboxsvg

img

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

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

•Android標準フォントはダサイ•Web Fontできれいなフォントを

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

•Android標準フォントはダサイ•Web Fontできれいなフォントを

•SVGでオリジナルフォント作成

fontの作り方

fontの作り方

• SVGでフォントのアウトラインを作成

fontの作り方

• SVGでフォントのアウトラインを作成

• FontForgeで変換

fontの作り方

• SVGでフォントのアウトラインを作成

• FontForgeで変換

•日本語フォントは大変• ダイナミック・サブセッティング

4. アイコンもキレイに

4. アイコンもキレイに

•Web Font をアイコン代わりに• retinaにも対応

4. アイコンもキレイに

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

4. アイコンもキレイに

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

Web Fontアイコン 注意点

Web Fontアイコン 注意点

•色は変更可能グラデーションはかけられない

Web Fontアイコン 注意点

•色は変更可能グラデーションはかけられない

•外字エリアに注意• 絵文字と被ることも• 携帯電話の絵文字

テスト

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

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

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

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

まとめ

まとめ

•タッチUI の特性を理解する

まとめ

•タッチUI の特性を理解する•SVGは使える子

まとめ

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

まとめ

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