Archive for the ‘HTML5’ Category

1月
12

ipod touch用のWeb Applicationを作成してみる（完成編）

HTML5, iPhone/iPod touch/iPad, jQuery, javascript, tonomemo2009年1月12日とのさまComment

この記事は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とちがって指なので絵を描くのが超難しい

こんな感じでしょうか。

とはいえ、一応完成したのでよかったら使ってみてください！

1月
05

ipod touch用のWeb Applicationを作成してみる（画像保存実装編）

HTML5, iPhone/iPod touch/iPad, jQuery, javascript, tonomemo2009年1月5日とのさまComment

前回の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がつながってなくても、
セーブロードができました。

あとは、細かいところを作り込めば完成しそうです！

1月
05

ipod touch用のWeb Applicationを作成してみる（描画過程を保存する）

HTML5, iPhone/iPod touch/iPad, jQuery, javascript, tonomemo2009年1月5日とのさまComment

前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（JSONについて）の続きです。

作戦が決まったところで、保存を実装します。
とりあえず、
[関数名, [引数1, 引数2 ...]]
の形式でcanvasのコマンドを実行できる関数を作ります。

 var C_FILLSTYLE = 1;
 var C_FILLRECT = 2;
 var C_STROKESTYLE = 3;
 var C_BEGINPATH = 4;
 var C_MOVETO = 5;
 var C_LINETO = 6;
 var C_CLOSEPATH = 7;
 var C_STROKE = 8;

 function runCommand(c){
  switch(c[0]){
   case C_FILLSTYLE:
    _c2d.fillStyle = c[1];
    break;
   case C_FILLRECT:
    _c2d.fillRect(c[1][0], c[1][1], c[1][2], c[1][3]);
    break;
   case C_STROKESTYLE:
    _c2d.strokeStyle = c[1];
    break;
   case C_BEGINPATH:
    _c2d.beginPath();
    break;
   case C_MOVETO:
    _c2d.moveTo(c[1][0], c[1][1]);
    break;
   case C_LINETO:
    _c2d.lineTo(c[1][0], c[1][1]);
    break;
   case C_CLOSEPATH:
    _c2d.closePath();
    break;
   case C_STROKE:
    _c2d.stroke();
    break;
   default:
    break;
  }
 }

あと、コマンドを実行するたびに、1コマンドずつを保存する関数を作成して

 var _command = Array();

 function drawCommand(c){
  runCommand(c);
  _command.push(c);
 }

いままでcanvasの関数を呼んでいた部分を置き換えます。

_c2d.fillStyle = “rgb(255, 255, 0)”;
_c2d.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
↓
drawCommand([C_FILLSTYLE, "rgb(255, 255, 255)"]);
drawCommand([C_FILLRECT, [0, 0, CANVAS_WIDTH, CANVAS_HEIGHT]]);

これで、コマンドを変数に保存することができるようになりました！
あとは、保存するだけです。

1月
04

ipod touch用のWeb Applicationを作成してみる（JSONについて）

HTML5, iPhone/iPod touch/iPad, jQuery, javascript, tonomemo2009年1月4日とのさまComment

前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（保存方法の詳細を考える）の続きです

今回は

[関数名, [引数1, 引数2 ...]]

がたくさん入っている配列をJSONにする方法です。

_command = Array();
_c2d.lineTo(x, y);
_command.push([CANVAS_LINETO, [x, y]]);
_c2d.lineTo(x, y);
_command.push([CANVAS_LINETO, [x, y]]);
：

みたいな感じでデータを追加していくと
最終的には

_command[0] = [0, [10, 10]];
_command[1] = [0, [20, 10]];
：

こんな感じのデータ構造になります。

これを、

var jsonTxt = 関数(_command);

みたいな感じで、jsonの文字列にして
sqliteに保存することにします。

ロード時には、
_command = 関数(jsonTxt);

みたいに、JSONの文字列を配列に展開することにします。

※JSONを処理する部分は、昔作ったのを使うことにします。

ちなみに、JSONの文字列を配列に展開する部分は、
rfc4627.txt
をもとに作っています。

RFCに規約だけでなく、実際のサンプルがあるのって
便利ですよね！

1月
04

ipod touch用のWeb Applicationを作成してみる（保存方法の詳細を考える）

HTML5, iPhone/iPod touch/iPad, jQuery, javascript, tonomemo2009年1月4日とのさまComment

前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（mouse対応編）の続きです

画像の保存方法には２種類あります
・画像自体を保存する
・画像の描画過程を保存する

このうち、「画像自体を保存する」のはあきらめて、
今回は「画像の描画過程を保存する」で作戦を練ります。

描画過程の保存なので、canvasの命令の後に、
保存命令を書けば良さそうです。

保存先は、sqliteなので、text形式で保存することにします。
問題はその保存形式ですね。

とりあえず、思いついたのは以下の２種類
・１コマンドずつ、保存する
・全コマンドを配列に入れて、まとめて保存する

「１コマンドずつ、保存する」ていうのは、
sqliteのアクセスにどれくらい時間がかかるかわからないのと、
レコードがいっぱいになっちゃうのが気になります。
そもそも、sqliteのアクセスは非同期なんでそれもめんどくさそうです。

「全コマンドを配列に入れて、まとめて保存する」ていうのは
はたして全コマンドがどのくらいのボリュームになるんだろう・・・。
て言うのが気になります。
そのかわり、読み書きは楽そうですね。

とりあえず、「全コマンドを配列に入れて、まとめて保存する」を
採用することにしました。

_command = [];
みたいなのを用意して

_c2d.lineTo(x, y);
_command.push({command:”lineTo”, x:x, y:y});

みたいな感じのイメージです。
で、最後に_commandを文字列にしてあげればいいかと。

この時点で気になるのが
・canvasの命令は引数が可変
・なるべくデータを小さくしたい
・どうやって文字列にする？
の３個です。

文字列にする・・・といえば、jsonなので、とりあえず
それで考えることにします。

引数可変は、オブジェクトか配列で解決できますが、
データ小さくするっていうのがあるので、
配列を使うことにします。

[関数名, [引数1, 引数2 ...]]

こんな感じの構造で、やることにしました。
さっきの例だと

_c2d.lineTo(x, y);
_command.push([CANVAS_LINETO, [x, y]]);

こんな感じですかね。
関数名は文字列だと長くなるので数字で置き換えます。

var CANVAS_LINETO = 0;

みたいに定義しておけば、プログラムするとき楽なので
良さそうです。

なんか、できそうな気がしてきました。

« 前の投稿
  • Search:

  • flashcastとは?

    東京を中心に、現在フリーランスとして活動しているITエンジニア、および、かつてフリーランスとして活動していた起業家達が立ち上げたコミュニティーです。

    みんなで集まって面白いことをやろう！形に残そう！ということで、ブログをはじめました。

    技術情報や、フリーエンジニアに役立つ情報などを、ご紹介できたらと思っています。

    お問い合わせ：
    info@flashcast.jp

  • カレンダー

    2010年7月
    日曜日 月曜日 火曜日 水曜日 木曜日 金曜日 土曜日
    « 6月    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031

  • メンバー紹介

    もじゃもじゃ
    flashcastのリーダー

    ３年ほどフリーのITエンジニアとして活動。現在は、社員２名の株式会社を経営しています。

    一攫千金を夢見る野心家です。

    ライブキャスト

    yasu
    ダイバー

    自宅サーバーでホームページを作り始めました。

    少しずつ記事を増やしていきますので足を運んでください。

    よろしくお願いします。

    sa-sa-ki.jp

    のら
    たびびと

    ねこ好きに悪人はいなーいっ！！

    バイクや車も好きです。

    めぐ
    デザイナーのたまご

    音楽とデザインとお酒をこよなく愛する永遠のダイエッター。

    現在ペンタブレットでイラストを勉強中。

    Hiro
    コンサル

    PMやSEの案件を業務委託で請けることが多いですが、小規模案件も受託でやっています。

    得意な分野はマイクロソフト製品や関連技術によるシステム構築です。

    KEI
    取締役の風格

    最年少なのに、メンバーで1番の貫禄の持ち主！？

    C#や.netなどサーバ側の開発が得意。

    ろっきー
    美食家★パパ

    自分にとっての息抜きは、ドライブして温泉に入って、美味しいご飯を食べる事。

    ココロとカラダのリフレッシュを大切にし、日々の仕事に励む一児の父親です。

    郵便番号検索

    my-hobby

    とのさま
    げーむのおうさま

    大人なのに好きなことしかやらない駄目人間。

    Web系が得意、アクセスは苦手＞＜

    tonosamart.com

    セクレタリアト
    ギャンブラー

    フリーランス時代は仲間の現場を探すことが多く、それをきっかけに会社を設立。

    現在はSI業に特化せず、他の業種にも興味を持ち始めています。

    メドレー株式会社

  • 広告