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

>100 Views

March 10, 21

スライド概要

2009-12-12 スマートフォン勉強会 関東 No. 4で発表した資料です

profile-image

NPO法人 まちづくりエージェント SIDE BEACH CITY. 理事やってます。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

2009年12月12日 高見知英

2.

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

3.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

Google Spread Sheet の場合 Windows Android

12.

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

13.

Twitter Windows Android

14.

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

15.

CNET Japanの場合 Windows Android

16.

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

17.

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

18.

開発手法

19.

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

20.

GWTで作ったWebアプリ Windows Android

21.

DEMO

22.

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

23.

携帯独自の注意点

24.

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

25.

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

26.

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

27.

まとめ

28.

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

29.

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