スマートフォンで使うWebアプリ

2009年12月12日 高見知英

• 磯子クリエイティブチー ム • 横浜のコミュニティを盛 り上げる会 • Program Workshop for Juniorsスタッフ • JavaScript • UWSC（の内蔵スクリプ ト） • JAVAなど 自 己 紹 介

持ってる端末 ◼ Windows Mobile ◼ ◼ ◼ 使い続けてもう5年 Advanced/W-ZERO3[es] Android ◼ HT-03A(まじろん)

アプリ作りたい！ ◼ 開発環境を整えるのは面倒？ ◼ Windows Mobile ◼ ◼ VisualStudioは高いし… Android ◼ Eclipseは無駄なメニュー多いし

Webアプリならどうか テキストエディタでも作れる？ ◼ PC用にアプリを作らなくてよい ◼ ◼ 複数の端末から気軽に使える

スマートフォンのブラウザ PCのブラウザ 画面が小さい ◼ 入力機構が少ない ◼ 通信速度(など)が遅い ◼

アプリを作る上で 気をつける要素 ユーザーイン ターフェース 携帯独自の注 意点 開発手法

ユーザーインターフェース

他のアプリから学ぶ Google Spread Sheet ◼ Twitter ◼ (アプリじゃないけど)cnet-japan ◼

Google Spread Sheet の場合 Windows Android

Google Spread Sheet の場合 「リスト表示」のみが使用可能 ◼ 利点 ◼ ◼ ◼ どこでもデータの追加編集が可能 欠点 ◼ キーボードなし端末では入力困難

Twitter Windows Android

Twitter 公式に提供された機能を使用可 ◼ 利点 ◼ ◼ どこでもTwitter出来る！…？ ◼ ◼ まあ、今更ねえ… 欠点 ◼ ボタンが小さい！タッチできない！

CNET Japanの場合 Windows Android

CNET Japanの場合 ニュース記事を辿ることが出来る ◼ 利点 ◼ ◼ ◼ モバイル向けに最適化されていて 表示が速い 欠点 ◼ 不意に画面を切り替えると戻れない

ユーザーインターフェース ◼ 端末に表示する情報を少なく 使える機能を抑える ◼ PCで仕込みスマートフォンで仕上げ ◼ 入力は少なめに、ボタンは大きく ◼ 戻る/進むをやりやすく ◼

開発手法

Google Web Toolkit ◼ Googleが作ったWeb開発ツール JAVA→JavaScriptのコンパイル ◼ 動的に変化するサイト作りがしやす い ◼ Googleも使ってる…？ ◼

GWTで作ったWebアプリ Windows Android

DEMO

JAVAが使える サーバ ◼ Google App Engine Googleのクラウドサービス ◼ JAVA/Pythonが使用可能 ◼ ◼ GWTも使える

携帯独自の注意点

ポイント 状態遷移に気をつける 回線/処理速度に気を使う

状態遷移に気をつける ◼ 再読込/戻る/進む ◼ タスク管理上の問題も ◼ ◼ ex). HT-03Aのブラウザはアクティブ 時に再読込を行う …とか いつ落ちるかわからない ◼ マルチタスク端末は注意

回線/処理速度に気を使う ◼ 回線速度とも、処理速度とも どうしてもPCよりは遅い ◼ なるべくシンプル・少ないデータで ◼ ◼ ユーザーをいらいらさせない作り

まとめ

Webアプリを作るなら モバイルも気にしよう コンパクト版でも、同じものでも ◼ ユーザビリティを気にする必要 ◼ ◼ 画像はなるべく軽く ◼ ◼ 読めなくても支障がない作りに 横幅が小さくても崩れないページ

ご静聴ありがとうございました おわり