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

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

on

  • 1,991 views

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

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

Statistics

Views

Total Views
1,991
Views on SlideShare
1,977
Embed Views
14

Actions

Likes
17
Downloads
26
Comments
0

1 Embed 14

https://twitter.com 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • モバイルWebアプリを 複数端末で動かすために 注意すること 2013.09.12 90分で身につくスマホウェブ制作術 @dsuket
  • About me 高岡大介 Work • 外資系SIベンダーを経て研究所へ。 • Web技術研究開発・開発支援。 • 記事書いたり、資料作ったり、講演したり • Japan Sencha User Group, AITC twitter: @dsuket facebook.com/dsuket slideshare.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 viewbox svg 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爆発しろ!!