2008年07月

2008年07月31日

iPhoneユーザーのみなさんこんにちは!直感的にくぱぁできるWebサービス『くぱぁ(i)』に新しいバージョンが登場しました!


新しいくぱぁ(i)は3種類の画像からこんなくぱぁを作れます。

photo(2)

DEMO(foriPhone/touch):http://hayashi311.googlepages.com/cupha2.html

ダウンロード:http://hayashi311.googlepages.com/cupha.zip

対話的でリッチで革新的な次世代ユーザインターフェースですね!iPhoneがすぐ熱くなるのもなんか納得しちゃいますね!


ZIPファイルの中にやり方.txtが入っているので好きな画像を入れてみて下さい!


では、javascriptとHTML5の話をしましょう。

canvas要素に画像を挿入する



 canvas要素には画像を挿入することができます。これには画像をオブジェクトとして扱わなければいけないのですが、一番簡単なのは同じページ内に画像を配置した画像をdocument.getElementById で取得する方法でしょう。幸いcanvas要素を使うようなiPhone向けサイトはスクロールをロックしていると思うので、見えないところに配置しておけばいいと思います。

 他の方法に関してはmozillaのチュートリアルが詳しいです。

canvas要素チュートリアル


描画の基本は前回と同じです。

くぱぁのcanvas要素の説明


前回はパスを描きましたが、今回は代わりにdrawImage(image, x, y, width, height);を使います。

 引数はそれぞれ(上で取得したImage オブジェクト,画像左上のX座標,雄ねじくY座標,画像の幅,同じく高さ)です。最初の引数はimageのidではなくてオブジェクトだということだけ気を付ければ簡単だと思います。width,heightを変更することで伸縮を行います。

詳しくはZIPファイルの中のcupha.jsをご覧下さい。


canvas要素に画像を挿入しながらアニメーションを行うテクニック




■基本
基本は画像を極力減らすことです。canvas要素は透過PNGの様に背景が透けるので背景に置けるものはすべて背景にしましょう。画像を極限まで減らした上で次を参考にしてください。


 canvas要素に画像を挿入する手法は以上ですが、このままアニメーションを行うとiPhoneでは処理できずにカクカクになってしまい、最悪safariが落ちてしまいます。


 どうやら前回の描画が終わらないうちに次の描画を行うと重くなってしまうみたいです。2つのアイディアで解決できましたが、他の方法があれば指摘してもらえるとうれしいです!

・描画を切り分けてsetIntervalで行う
・前の描画が終わった時点で次の描画を行う

 一つ目の方法はパラパラマンガみたいなイメージです。変数(タッチしている座標とか)が変わった時点で描画するのではなく、だいたい50ms〜100msくらいの間隔で描画を行います。タッチした時点でパラパラを開始して、離れた時点でパラパラ終了。
 試してみましたが、割と面倒な上に時間設定をミスするとカクカクが再発してしまいました。この方法は時計のアニメーションなんかには向いていますが、対話的なアプリケーションには向いていなさそうです。



 二つ目の方法はdraw()の中身を0秒をセットしたsetTimeoutで包むやり方です。こうすることでドキュメントが安定するまでコードの実行を遅らせることができます。(O'REILLY javascript 5版 P282参照)

setTimeout(function(){

-中身-

},0);


 これはドキュメントの追加なんかを行う時によく使われるテクニックですが、canvas要素の更新も安定するまで待ってくれるみたいです。これで、canvas要素が描画されてからすぐに次の描画を行うことができます。割とうまくいったので今回はこっちを採用しています。


 詳しくはZIPファイルをダウンロードしてご確認ください。ついでにいろんなものをくぱぁしてみるといいと思います!


**

hayashi311 at 05:05コメント(1)トラックバック(0) 

2008年07月29日

っていうアイディア。作りかけだけど、思いついたのでメモ。

HTMLの方でこの.jsを読み込んで、id="contena"を追加すればなんとなーくDBの中身が分かります。

本格的にDBを作り込むときにちゃんと作ろうと思います。




//テーブル名&データベース名&バージョンを入れてください!
var dbname = ""
var tablename = "";
var versionNumber = "";

window.addEventListener("load", loaded, false);


function loaded() {
db = openDatabase(dbname, versionNumber);
  getdb();
}


function getdb() {
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM '+tablename, [],
function(tx, rs) {
$("contena").innerHTML +="";
for (var i = 0; i < rs.rows.length; i++) {
var row = rs.rows.item(i);
$("contena").innerHTML +="";
for (var i in row) {
$("contena").innerHTML += "<td>"+row[i]+"";
}
$("contena").innerHTML +="";
}
$("contena").innerHTML +="
";
});
},
function(error) {
alert(error.message + 'という訳でエラーです');
});
}

function $(id) {
return document.getElementById(id);
}


JSadminっていう名前だけは完全に決定です。


それから、livedoorブログでコードをきれいに載せる方法が分からない…

hayashi311 at 17:20コメント(0)トラックバック(0) 
長すぎて切れてしまいました。



canvas要素

 canvas要素です。HTML5の新規格でjavascriptからお絵かきが出来ますよ。Flashが使えないiPhoneでリッチなコンテンツを作るときには欠かせません!

 一番詳しいのはMozillaのチュートリアルです。

Canvas tutorial


 とりあえず、HTMLの方に<canvas id="cupha" width="320" height="415"></canvas>を置きます。

 canvas要素は本来アニメーションを実現するためのものではないので、更新しまくることでアニメーションを擬似的に実現します。タイマーを使って更新するという方法もありますが、今回はonTouchMoveでdraw()を呼び出すことでアニメーションっぽくしました。
 
 clearRectで毎回画像を消さなきゃいけないところに注意です。

var canvas = $('cupha');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 320, 380);
if (canvas.getContext) {
ctx.beginPath();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 - movpx / 2, 250, 160, 380);
ctx.stroke();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 + movpx / 2, 250, 160, 380);
ctx.stroke();


 moveToで筆を置いて、quadraticCurveToで線を決めて、stroke()で一気に筆を引くイメージをすると理解が早いと思います。quadraticCurveToは他の関数に置き換えられるかもしれませんし、もっと多くの点を経由することもできます。


まとめ
 もともと擬似的にピンチイベントを取得するために作ったんですが、中途半端です。Y座標も取得して、window.onPinchみたいな使い勝手でまとめられるとかっこいいですね。ちなみにタイトルはホッテントリメーカーのお世話になりました。

追記:画像を挿入できるようにしました

**


hayashi311 at 10:05コメント(0)トラックバック(0) 
iPhoneユーザーの皆さんこんにちは!くぱぁ(i)をリリースしました!


くぱぁ(i)はiPhone/touchで直感的にくぱぁできるWebサービスです。

DEMO
http://hayashi311.googlepages.com/cupha.html


くぱぁってなります。心の目で見てください!まさにiPhoneの正しい使い方って感じですよね!


iPhone/touchを持ってない人はよく分からないと思いますが、こんな風になってます。



マルチタッチとcanvas要素の練習に作ってみました。


追記:

画像を挿入できるようにしました!



コード

window.addEventListener("load", loaded, false);
window.onorientationchange = hideURLbar;
var stpx = 0;
var movpx = 0;

function loaded() {
setTimeout(hideURLbar, 100);
draw();
document.addEventListener("touchstart", tStart, false);
document.addEventListener("touchmove", tMove, false);
document.addEventListener("touchend", tEnd, false);
}

function tStart(event) {
event.preventDefault();
if (event.touches.length == 2) {
stpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX);
}
touchHandler(event);
}
function tMove(event) {
event.preventDefault();
touchHandler(event);
}
function tEnd(event) {
event.preventDefault();
if (event.touches.length < 2) {
stpx = 0;
movpx = 0;
}
draw();
}

function touchHandler(event) {
if (event.touches.length == 2) {
movpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX) - stpx;
if (movpx < 0) {
movpx = 0;
}
} else if (event.touches.length > 2) {}
draw();
}
function draw() {
var canvas = $('cupha');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 320, 380);
if (canvas.getContext) {
ctx.beginPath();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 - movpx / 2, 250, 160, 380);
ctx.stroke();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 + movpx / 2, 250, 160, 380);
ctx.stroke();
}
}
function hideURLbar() {
window.scrollTo(0, 1);
}
function $(id) {
return document.getElementById(id);
}




マルチタッチ

iPhoneは超ハイテクなのでマルチタッチが可能です!

前回もリンク張りましたがここが分かりやすい。

90秒で理解するiPhone JavaScript(マルチタッチ編)

タッチのイベントは
* onTouchStart
* onTouchMove
* onTouchEnd
* onTouchCancel
の四つ。今回は上3つを使います。ほとんどonMouse関連のイベントと一緒です。

気をつけなければいけないのは、マルチタッチという点です。

普通のマウスだとカーソルが一つしかないので

onMouseDown

onMouseMove
  ↓
onMouseUp

この流れが間違いなく保証されているんですが、マルチタッチはそうはいきません。マルチタッチだとこんな感じ。

onTouchStart
  ↓
onTouchStart
  ↓
onTouchMove
  ↓
onTouchEnd
  ↓
onTouchMove
  ↓
onTouchStart
  ↓
onTouchEnd
  ↓
onTouchEnd

 結局原因を突き止める前に解決したんですが、マウスと同じ感覚で設計したらonTouchMoveを取得できなかったりしました。うまく説明できなくて申し訳ないのですが、気をつけてください!


最終的にこんな流れにしました。

2点をタッチした時点で2点間の距離を取得
  ↓
どっちが動いてるのかわからないけどonTouchMoveで今の2点間の距離を取得。
  ↓
どっちかが離れた時点でピンチ終了

あれ?書くと超普通ですね…何を悩んでたんだろう…



長くなったので次に続きます>>



**

hayashi311 at 10:02コメント(1)トラックバック(7) 
URL欄を隠して上下左右にスクロールさせない方法

URL欄を隠して上下左右にスクロールさせない方法=iPhone向けサイトでURLが分からないようにする方法、です。

こういうことができるのはあまりいいことではありませんね。
とは言ってもローカルアプリの様なUIを作り込むには必要な方法でもあります。

以下を.jsに加えるだけ。

window.addEventListener("load", loaded, false);
window.onorientationchange = hideURLbar;

function loaded() {
setTimeout(hideURLbar, 100);
document.addEventListener("touchstart", touchHandler, false);
  document.addEventListener("touchmove", touchHandler, false);
  document.addEventListener("touchend", touchHandler, false);
}

function hideURLbar() {
  window.scrollTo(0, 1);
}

function touchHandler(event) {
  event.preventDefault();
  hideURLbar();
}

サイトは320px*416pxにすればいいと思います。

デモはこちら
http://hayashi311.googlepages.com/noscl.html

やっていることは、URL欄を隠しつつ、タッチイベント毎にevent.preventDefault();を実行しているだけ。他の処理をしている時はタッチ検出まで0.1sくらいのタイムラグがあって時々URL欄のチラッと下が見えて気持ち悪いのでhideURLbar();も同時に実行しています。

もっとスマートなやり方があるかもしれません。添削大歓迎です!




でもでもでも!

 正直、突然これをやられるとイラッとします。なんだかURLの見えないアダルトサイトのポップアップが画面を埋め尽くしていた頃を思い出させますね。諸刃の刃、素人にはお勧めできません!

 サイト制作者側はスクロールのロックを外すという選択肢をユーザーに与えるべきなのは当然のことですが、Appleも何らかの形でURLを確認できる方法を提供するべきだと思います。


以下のエントリを参考にさせていただきました!ありがとうございます!

90秒で理解するiPhone JavaScript(マルチタッチ編)


追記:電池とかsoftbankとか書かれてるバーをタップするとURLがでてきますね! Apple、GJ!
**

hayashi311 at 03:40コメント(0)トラックバック(0) 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ