はじめてのモバイルウェブアプリ 1

ウェブアプリ入門PART1

はじめてのモバイルウェブアプリ

福野泰介 jig.jp代表

@taisukef #kosenbc

ロボコン、

プロコンに続き、

高専ビジコン！

エントリー受付

地域の宝探し

地域の宝探し

モバイルウェブアプリで表現する！

モバイルウェブアプリとは？

ケータイやスマートフォンで動くウェブアプリのこと

ウェブアプリとは？

ブラウザ上で動く

アプリケーションソフトウェアのこと


HTML/CSS/JavaScript/PHP/Java/Ruby on

Rails/…


基本はHTML

HTMLとは？

HyperTextMarkupLanguage

ブラウザで表示できるデータ形式

HTMLとは？

gif/jpg →画像ソフトmpg/avi →動画ソフトxls → Excelhtml →ブラウザ

HTML例<!DOCTYPE html><html><head>

<title>地域の宝</title></head><body>鯖江：サバエドッグ</body></html>

タグ

HTMLはタグによってMarkupする言語です

タグ＝ “<“ と “>” で囲まれたもの

開始タグと終了タグ

開始タグ: <???>終了タグ：</???>

<h2>サンプル</h2>

<!DOCTYPE html>

HTMLであるという印

<html>…</html>

HTML全体を入れるタグ

<head>…</head>

ブラウザの本文ではない情報を書くタグ

<title>地域の宝</title>

タイトルを書くタグ<head>タグの中にいれる

<body>…</body>

ブラウザに表示するものを書くタグ

HTML例<!DOCTYPE html><html><head>

<title>地域の宝</title></head><body>鯖江：サバエドッグ</body></html>

表示してみよう

takara.htmlというファイルとして保存takara.html をダブルクリック

文字を変更する

<body>鯖江<br>サバエドッグ<br>梵<br></body>

<br>

改行するタグ

写真を付ける

<body>鯖江<br>サバエドッグ<br><img src=“sabae1.jpg”></body>

<img>画像を表示するタグ

<img src=“sabae1.jpg”>srcでファイル名または

URLを書く

リンクする

<body><a href=“sabae.html”>鯖江</a><br>サバエドッグ<br><img src=“sabae1.jpg”></body>

<a>リンクを設定するタグ

<a href=“sabae.html”>鯖江</a>

リンクする文字列を囲みHrefにファイル名またはURL

どんどんつなぐ



これが

Wold Wide Web（ウェブ）

エントリーお待ちしてます

質問Twitterで

下記ハッシュタグを付けてツイートしてください

#kosenbc

完

HTML5の劇的進化

HTML4＝表現言語HTML5＝プログラミング言語

いろいろ調べてみてください

Offline Applicationローカルにキャッシュするものを設定

test.manifest （mime-type = text/cache-manifest）CACHE MANIFESThello.jsFALLBACK # ヒットしないときに表示./ fallback.htmlNETWORK # キャッシュしないもの./api/

<html manifest=“test.manifest">使われる時に、test.manifestの更新をチェック

Local Storage

ローカルにデータを保存サーバいらずでおもしろいこと

Geo LocationNavigator.geolocationNavigator.getCurrentPositionNavigator.watchPositionNavigator.clearWatch

位置ゲーできますGPSをリアルタイムに制御可能！

自由に描画できるCanvasvar canvas = document.getElementById('canvas').getContext('2d');

canvas.strokeStyle = "rgb(255, 0, 0)";

canvas.beginPath();

canvas.moveTo(10, 10);

canvas.lineTo(100, 100);

canvas.closePath();

canvas.stroke();

http://fukuno.jig.jp/canvas-test.html

canvas.fillStyle = "rgb(0, 0, 255)";

canvas.fillRect(50, 10, 50, 50);

canvas.strokeStyle = "rgb(0, 255, 0)";

canvas.beginPath();

canvas.arc(40, 80, 20, 0, 2 * Math.PI, true);

canvas.stroke();

Canvas 落書きサンプルfield.onmousedown = function() {

// マウスボタン押された

};

field.onmousemove = function() {

// マウス動いた

};

field.onmouseup = function() {

// マウスボタン離された

}

http://fukuno.jig.jp/canvas-draw.html

モバイルで外で遊ぶ

• 残念ながらHT-03Aとか、XperiaはAndroid1.x

iPhone Android 1.x Android 2.x

Canvas O O O

Offline Application O X O

Local Storage O X O

Audio/Video O X O

Geo Location O X O

はじめてのモバイルウェブアプリ 1

Internet