---
title: スマートフォンで使うWebアプリ
tags: 
author: [高見知英](https://www.docswell.com/user/TakamiChie)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/L27VVLP7QW.jpg?width=480
description: 2009-12-12 スマートフォン勉強会 関東 No. 4で発表した資料です
published: March 10, 21
canonical: https://www.docswell.com/s/TakamiChie/XK4J85-2009-12-12
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/L27VVLP7QW.jpg)

2009年12月12日 高見知英

# Page. 2

![Page Image](https://bcdn.docswell.com/page/Z5JGLXQ7LR.jpg)

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

# Page. 3

![Page Image](https://bcdn.docswell.com/page/V47QY8WEP5.jpg)

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

# Page. 4

![Page Image](https://bcdn.docswell.com/page/DKE4W21J1Q.jpg)



# Page. 5

![Page Image](https://bcdn.docswell.com/page/PL71YM5JGD.jpg)

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

# Page. 6

![Page Image](https://bcdn.docswell.com/page/8G7WG3WE26.jpg)

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

# Page. 7

![Page Image](https://bcdn.docswell.com/page/W4JZLV2E3Y.jpg)

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

# Page. 8

![Page Image](https://bcdn.docswell.com/page/KYE6WY6EVZ.jpg)

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

# Page. 9

![Page Image](https://bcdn.docswell.com/page/5GE5MG5E48.jpg)

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

# Page. 10

![Page Image](https://bcdn.docswell.com/page/V9729YGJRX.jpg)

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

# Page. 11

![Page Image](https://bcdn.docswell.com/page/5DJY4GG7M9.jpg)

Google Spread Sheet の場合 Windows Android

# Page. 12

![Page Image](https://bcdn.docswell.com/page/2V7NYG8E8K.jpg)

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

# Page. 13

![Page Image](https://bcdn.docswell.com/page/GYJ9PWX73P.jpg)

Twitter Windows Android

# Page. 14

![Page Image](https://bcdn.docswell.com/page/5GJ8DN9JDR.jpg)

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

# Page. 15

![Page Image](https://bcdn.docswell.com/page/MLJLMPMER1.jpg)

CNET Japanの場合 Windows Android

# Page. 16

![Page Image](https://bcdn.docswell.com/page/547MY467W1.jpg)

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

# Page. 17

![Page Image](https://bcdn.docswell.com/page/ZP7R9WNE9L.jpg)

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

# Page. 18

![Page Image](https://bcdn.docswell.com/page/NPJXQP87XY.jpg)

開発手法

# Page. 19

![Page Image](https://bcdn.docswell.com/page/63JK9DLJDY.jpg)

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

# Page. 20

![Page Image](https://bcdn.docswell.com/page/4LE3WR6E5P.jpg)

GWTで作ったWebアプリ Windows Android

# Page. 21

![Page Image](https://bcdn.docswell.com/page/V8EDKYM7GD.jpg)

DEMO

# Page. 22

![Page Image](https://bcdn.docswell.com/page/4V7PK6QJ86.jpg)

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

# Page. 23

![Page Image](https://bcdn.docswell.com/page/L2JVV3PJQW.jpg)

携帯独自の注意点

# Page. 24

![Page Image](https://bcdn.docswell.com/page/Z5EGL3QJLR.jpg)

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

# Page. 25

![Page Image](https://bcdn.docswell.com/page/V4JQY5W7P5.jpg)

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

# Page. 26

![Page Image](https://bcdn.docswell.com/page/DK74W91E1Q.jpg)

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

# Page. 27

![Page Image](https://bcdn.docswell.com/page/PLJ1YK5EGD.jpg)

まとめ

# Page. 28

![Page Image](https://bcdn.docswell.com/page/8GJWGDW726.jpg)

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

# Page. 29

![Page Image](https://bcdn.docswell.com/page/W4EZLG273Y.jpg)

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

