flashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（完成編）
で、iPod touch用のWeb Applicationを作成してみました。
せっかくなので、appleのサイトに登録してみたいと思います。
まずは、
Apple – Web apps – All Categories
に、アクセスします。
画面右側の
をクリックします。
AppleIDでログインすると許諾が出るので同意をチェックして次のページへ
URLや説明文などを入力します。
キャプチャ画像とアイコン画像をアップします。
無事投稿できたようです！
あとは、無事公開されるかどうかですね
英語サイトなので、このあたりがもどかしいです。
：
って感じで登録したのが1/10なのですが、今日確認したら1/13にアップされていました！
数日でアップされるみたいですね。登録の方法も問題なかったみたいです。
この記事はflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（ボタンの作成）の続きです。
今回は、最終回！というわけで、完成させていきます。
まずは、めんどくさがって分けていなかった
・css
・javascript
を分離します。
結果はこんな感じになります。
<!DOCTYPE html> <html manifest="cache-manifest"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=320px, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <title>メモ帳</title> <style type="text/css"> </style> <link rel="stylesheet" href="tonomemo.css" type="text/css"> <script src='jquery-1.2.6.js' type='text/javascript'></script> <script src='tonosamart.json.js' type='text/javascript'></script> <script src='tonomemo.js' type='text/javascript'></script> </head> <body> <div id="main-area"> <div id="canvas-area"> <canvas id="canvas1" width="256" height="192"></canvas> </div> <div id="header-area"> <div id="leftbutton"></div> <div id="rightbutton"></div> <div id="donebutton"></div> </div> <div id="color-area"> <div id="color0" class="colorbutton"></div> <div id="color1" class="colorbutton"></div> <div id="color2" class="colorbutton"></div> <div id="color3" class="colorbutton"></div> <div id="color4" class="colorbutton"></div> <div id="color5" class="colorbutton"></div> <div id="color6" class="colorbutton"></div> <div id="color7" class="colorbutton"></div> <div id="color8" class="colorbutton"></div> <div id="color9" class="colorbutton"></div> <div id="color10" class="colorbutton"></div> <div id="color11" class="colorbutton checked"></div> </div> <div id="pen-area"> <div id="pen0" class="penbutton"></div> <div id="pen1" class="penbutton"></div> <div id="pen2" class="penbutton"></div> <div id="pen3" class="penbutton"></div> <div id="pen4" class="penbutton"></div> <div id="pen5" class="penbutton"></div> </div> <div id="ink-area"> <div class="bar"></div> <div class="guide"></div> </div> </div> </body> </html>
DOCTYPEですが、canvasやsqliteを使用していることですし、
html5にしました。
<!DOCTYPE html>
あと、cache-manifestを定義します。
<html manifest=”cache-manifest”>
これは、html5で追加されたアプリケーションキャッシュと言われている機能で、クラインアント側でキャッシュするファイルを指定できます。
これにより、通信していないときでも動作が可能になります。
今回は、サーバと通信する部分はないので、使用しているファイルを全部記入しました。
次に、「ホーム画面に追加」で追加したときのみ、全画面表示ができるようなので設定しておきます。
<meta name=”apple-mobile-web-app-capable” content=”yes”>
このとき、画面サイズを縦を416pxで作成しているので、下の方が白くなってしまいます。
とはいえ、画面サイズを大きくすると、safariでスクロールしてしまうので、bodyの色を背景画像を同じにすることで対応します。
次に、「ホーム画面に追加」したときのアイコンを指定します。
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”>
57×57ピクセルのpngファイルを作成します。自動的に角丸に変換されます。
こんな感じで完成したのがこちらです。
作ってみてわかったのですが、書いた絵のデータをsafariで保存した場合と「ホーム画面に追加」で保存した場合で保存される場所が違うようです。
Web Applicationになると、別に管理されるみたいですね。
というわけで、数日にわたって、Web Applicationを作成してみました。
できあがったものを使ってみた感想としては・・・
・インクが無くなったときの動作が分かりづらい
・描画領域が狭い
・DSとちがって指なので絵を描くのが超難しい
こんな感じでしょうか。
とはいえ、一応完成したのでよかったら使ってみてください！
この記事はflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（ページ処理の作成）の続きです
まずは、ボタンを画像にします。
このあたりは、safari特有の何かは特になく、基本的には普通のHTMLと変わらないです。
ただ、普通のHTMLと違い、画面サイズが完全に決め打ちできるので
座標指定でレイアウトしていきました。
将来、解像度の違うipodが出てきたら困りますけどね。
インクのゲージはcssをつかっています。
#ink-area {
margin:0;
padding:0;
width:168px;
height:8px;
position:absolute;
top:387px;
left:32px;
}
#ink-area .bar {
width:0%;
height:8px;
background:#fff;
position:absolute;
top:0px;
left:0px;
}
#ink-area .guide {
background-image:url("ink.png");
width:168px;
height:8px;
position:absolute;
top:0px;
left:0px;
}
こんな感じで定義して、
$(”#ink-area .bar”)のwidthを%指定することで、ゲージを描画しています。
そのままでは味気ないので、ink.pngを重ねて、丸の中身が徐々に変化するようにしました。
ついでに、ボタンの中身も実装していきます。
とはいっても、特に難しいことはしてないので簡単にできました。
基本的には、canvasのコマンドを実行するだけです。
６個あるボタンのうち、１個を筆ペン風にしてみました。
芯があるのが気になりますが、それっぽく見えるのではないでしょうか？
tonomemo
インクの量は5000にしてみました。
保存するコマンドの配列が5000を超えると描画ができなくなります。
フルに使うと、セーブロードで若干固まっちゃいますね。
ただ、原因がデータ量の大きさ（sqliteの読み書き）ではなく、canvasの描画の反映待ちなのでこれは、しょうがないかな・・・・。
ほぼ完成した感じです。
前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（画像保存実装編）の続きです。
今回は、ページ処理を作り込みます。
とりあえず、テスト的に作ったボタンはそのまま使う方向でやっていきます。
まずは仕様を決めます
・メモに変化がない場合のみ移動可能（「back」「next」）
・メモに変化があった場合は、「cancel」「save」ボタンになる。
・「cancel」されたら、編集やり直し
・「save」されたら、メモに変化がない状態になる。
・「back」で、ページを戻る
・戻れない場合は、「back」ボタンを灰色にする（押せない）
・「next」ボタンで、次ページ
・次ページがない場合は、新ページ作成（「new」ボタン）
・「done」ボタンで、そのページを破棄
・ページを破棄した場合は、前のページを表示
（なかったら一番小さいページ）
・ページを破棄してぺージがなくなったら新ページ作成
こんな感じでしょうか。
仕様決めは、矛盾がないように考えます。
でまあ、特に苦労するポイントもなく完成
tonomemo
ただ、ものすごいいっぱい線を描いて保存すると、動作があやしくなります。
特にロード時が遅い・・・。
最初の想定どおり、インクの制限を作って、コマンド数が一定以上いったらそれ以上書けなくする処理を
入れないとだめみたいです。
それはさておき、たまに誤解している人がいるので、javascriptの配列の削除について
ちょっと解説しておきます。
配列が
x = [1, 2, 3];
とあったとき、x[n]を削除する場合
x.splice(n, 1);
これで削除できます。
delete演算子と違い、lengthも短くなります。
話はもどって、アプリの方はだいぶ出来てきました
あとやることは・・・
・ボタンをちゃんとする
・「cancel」「done」のときは、ダイアログを出す
・インクゲージ
・色変え、ペン変え
・doctypeとかをきちんとする
こんな感じでしょうか。
なんだか、完成が見えてきました。
前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（描画過程を保存する）の続きです
_commandに描画過程の全コマンドを保存することができたので、
sqliteにセーブ、ロードする部分を作ります。
function saveSqlite(page){
var db = openDatabase('tonomemo', '1.0', 'tonomemo');
db.transaction(
function(transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS tonomemo (id INTEGER PRIMARY KEY, page TEXT, dat TEXT)');
transaction.executeSql('DELETE FROM tonomemo WHERE page=?', [page]);
transaction.executeSql('INSERT INTO tonomemo VALUES(NULL, ?, ?)', [page, tonosamart.obj2Json(_command)]);
},
function(error) {
alert("saveSqlite:" + error.message);
},
function() {
}
);
}
function loadSqlite(page){
var db = openDatabase('tonomemo', '1.0', 'tonomemo');
db.transaction(
function(transaction) {
transaction.executeSql('SELECT * FROM tonomemo WHERE page=?', [page],
function(transaction, resultSet) {
if(resultSet.rows.length > 0){
_command = tonosamart.evalJson(resultSet.rows.item(0).dat);
if(_command){
_c2d.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
for(i = 0; i < _command.length; ++i){
runCommand(_command[i]);
}
}
}else{
alert("not found");
}
},
function(error) {
alert("loadSqlite:" + error.message);
}
);
}
);
}
ロードしたデータは、
_c2d.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
for(i = 0; i < _command.length; ++i){
runCommand(_command[i]);
}
でcanvasに書き出しています。
とりあえず、テスト用にsave,loadなどのボタンを画面下につけてみました。
tonomemo
押してみてください！
おもってたより、瞬間で画像が表示されます。
これなら、実用できそうです！
※ついでに、canvasの色を今回から白にしました。
ipod touchで試したら、wifiがつながってなくても、
セーブロードができました。
あとは、細かいところを作り込めば完成しそうです！
