2008年07月27日


やばい。iPhone超やばい。

 デザインも実際持ってみると微妙でいろいろ問題を多く抱えるiPhoneですが、HTML5がそこそこ使える単一のデバイスが世界中に広まったことは、これはもう超やばいことです。

 各ブラウザが徐々にHTML5をサポートし始めていますが、Webに大きな変化をもたらすまでには至っていません。そこでiPhoneです。確かに使いにくい面もあるんですが、これだけの規模の単一の環境はモバイルWebの進化を促すのではないかなと思います。

 この進化はiPhoneだけにとどまらず、きっと様々な影響を与えるでしょう。

 オンラインとオフラインを超えるプラットフォームの争奪戦という視点や、この転機を日本の携帯産業がどうやって活かすかについて考えてみるとワクワクします。

hayashi311 at 00:57コメント(0)トラックバック(0) 
iPhoneのsafariはこれでもかってくらいよく落ちるんですが、その代わりにHTML5やCSS3なんかの一部が実装されています。まだまだIEが主流のPC向けサイトではHTML5を使うわけにはいきませんが、iPhone向けサイトではこれをを堂々と使うことができます。


まだ、全部把握しているわけではないんですが、その中の一機能
Client-side database storageを使ってみました。

Client-side database storage

Client-side database storageについてはIT戦記のamachangが詳しく説明してくれています。

http://d.hatena.ne.jp/amachang/20080327/1206607704


javascriptからiPhoneにデータベースを作って、ずっと保存しておけますよっていう機能ですね。表示では1ドメイン5MBまで保存しておくことができるみたいです。

db = openDatabase('testdb', '1.0');
これで、データベースに接続or無かったら新しく作成

db.transaction(function(tx) {
        tx.executeSql('SQL');//実行するSQLとか
           },
function(error) {
alert(error.message')//エラーの時に実行
},
function() {
alert('成功しました'); //成功した時に実行
}
);
こんな感じですが、amachangの説明がすごくうまいので説明は省略します。


勉強しながら作ったのがこれ。

ローカルに保存しまくるブログ投稿ツール

本文を書き込んでからsafariを閉じてまたアクセスしてみてください。さっき書き込んだ文章が残っているはずです。
これ、サーバーではなくて、iPhoneに保存しています。試しにオフラインの時にsafariを落としてみても、ちゃんと文章が復活します。これで、いつsafariが落ちてもめげずにブログに投稿できるはずです。



livedoorブログに投稿できるんですが、投稿ツールとしてはもう少し作り込む必要ありですね。

注意点としては、

・livedoorにしか対応してないです。
・livedoorに一回ログインしてから使ってください。
内容を確認のページに行ったら、編集するボタンを押して、そこから投稿してください

あんまり、というか投稿ツールとして全然使い物にならないんですが、iPhoneにデータベースを作れた時点で満足してしまいました。最後の注意点なんてのは完全に飽きてしまったためです。気が向いたら作り込むかもしれません。


これを作るときに以下のサイトを参考にさせていただきました!

javascript - 勝手に添削 - textareaの高さを自動調節

Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か?

iPhoneでSQLデータベースストレージが使える


ちなみにこのネタはこれを読んで思いつきました。このエントリの半ばくらいのsafariすげー落ちる!って話。
http://d.hatena.ne.jp/wa-ren/20080716/p1


以下コード(なんか増築を重ねた家みたいになってます!すみません!)

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

function loaded() {
setTimeout(hideURLbar, 100);
db = openDatabase('testdb', '1.0');
check();
}

function check() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE test (id INTEGER PRIMARY KEY,title TEXT)');
},
function(error) {
getdb();
},
function() {
startdb();
});
}//こういう使い方をしていいのか微妙…

function startdb() {
db.transaction(function(tx) {
tx.executeSql('INSERT INTO test VALUES(1, "" )');
},
function(error) {
alert(error.message + 'という訳でエラーです');
});
}

function savedb() {
db.transaction(function(tx) {
tx.executeSql('UPDATE test SET title=? WHERE id = 1', [$("inputBody").value]);
resize_textarea();
},
function(error) {
alert(error.message + 'という訳でエラーです');
});
}

function getdb() {
db.transaction(function(tx) {
tx.executeSql('SELECT * FROM test', [],
function(tx, rs) {
$("inputBody").value = rs.rows.item(0).title;
resize_textarea();
});
},
function(error) {
alert(error.message + 'という訳でエラーですね')
});
}

function clr() {
$("inputBody").value = "";
savedb();
}

function resize_textarea() {
var textarea = $("inputBody");
var value = textarea.value;
var lines = 1;
for (var i = 0,
l = value.length; i < l; i++) {
if (value.charAt(i) == '\n') lines++;
}
textarea.setAttribute("rows", lines);
}//弾さんのとこから借りてきました。Thanks!



function hideURLbar() {
window.scrollTo(0, 1);
}//URL欄を消すやつ
function $(id) {
return document.getElementById(id);
}//例のあれです






**

hayashi311 at 00:56コメント(0)トラックバック(0) 

2008年07月25日

ライブラリはもう少し多いのかなと思ったけど、割と少ないみたいです。メモ代わりにさくっとご紹介。


iUI -手軽にiphone向けサイトを構築

IUI_logo

http://code.google.com/p/iui/

基本的にはulタグを使ってiphoneのUIっぽくしてくれるだけ。シンプルなライブラリ。MTなんかを簡単にiphone向けに出来そう。


safire - iphone向けWebアプリケーションのフレームワーク

safire
http://code.google.com/p/safire/
本格的にiphone用に作るためのフレームワーク。Ajaxとか、URL欄を消したりとか。フレームワークと言いながら、まだ便利なライブラリという感じ。


以下、おまけ。


iphone-google-maps-component -Google先生が提供するGppgleマップコンポーネント

http://code.google.com/p/iphone-google-maps-component/




iphonemm -ゲームを作ってる人たちもいる。
http://code.google.com/p/iphonemm/

ゲーム本体(WebアプリforiPhone)




ianimejs -javascriptでアニメーションを実現する軽いライブラリ。

http://code.google.com/p/ianimejs/


iFreecellはこのライブラリを使って作られてるみたい。photo

iPhone専用というわけではないけど、iPhoneに熱を上げているLife is Beautifulの中島さんが作者。




 canvasでいろいろできるライブラリがあるかと思っていたのですが、見つけられませんでした。
 考えてみれば、iPhone×safariという統一された環境ではブラウザの差異とか考えなくていいので、ライブラリに頼る機会が少ないんですね。safariのjavascriptとHTML5に依存した軽量ライブラリとか作れそうです。

**

hayashi311 at 00:35コメント(0)トラックバック(0) 

2008年07月20日

いろいろ探して見つけたのがこれ。

iPhone/iPod touchのURLバーを隠す*NO WONDER

基本的にはscrollToで1ピクセルでもスクロールさせると、勝手にURLバーはスクロールして見えなくなってくれる。もちろんそのためには縦位置ならば416px以上の領域が存在していることが必要だ。そして、onload時にscrollToするだけではタイミングが早すぎるようで、 setTimeoutでonloadの100msec後くらいにscrollToを実行するのが良いようだ。



だそうで。

これでは横画面にした時や戻したときにURL欄が顔を出してしまうので、

window.onload = function(){setTimeout(hideURLbar,100);}
window.onorientationchange = hideURLbar;
//画面が横←→縦に変化したとき呼び出される。
function hideURLbar() { window.scrollTo(0,1);}


これでいつでも画面を広く使えますね。

追記:拡張版を作ってみました

**

hayashi311 at 16:37コメント(0)トラックバック(0) 
iPhone向けWebアプリのサイト構成をざっくり考えてみました。

コンセプトとしては

*PCとの連携を前提に、必要最低限のシンプルな機能
*繰り返しの動作で情報を処理できる。

こんな感じですかね。


webアプリforiphone

右利きの人用の構成です。

 僕自身、あんまり手を動かしたくないので右下にメニューと操作部を配置します。

 操作部ってのは『次へ』とか『フラグを立てる』とか頻繁に使う機能。その上にあるメニューは『受信トレイ』とか『未読のフィード』とかですね。『次へ』をポンポン押してどんどん情報を処理するイメージ。

 設定みたいな項目はあんまりいじらないのでとりあえず手から遠い左下に。これは上に置いちゃってもいいかもしれないですね。間違って押さないような場所に配置すればOK。

 右上にあるのは全ボタンの配置を左右に反転させる機能。左利きのひとが使えばいいと思います。



 このくらいならWebアプリでも簡単に実現できそうです。

**

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