2011年02月25日

Web+DB PRESS 連載おわりました!

いっつもotsuneさんに、記事書いたエントリみて本屋に行くといつも発売前ってゆわれるので、発売されてからエントリ公開しようと思ってたら、発売日すぎてしいました。

最終回は「HTML5と専用クライアント」というお題目で、#!を使うんじゃなくてHTML5のpushState/popstate回りを使ってpermalinkを作る方法と、専用クライアントを用意すれば良い事あるよっていう話をして締めくくりました。

Perl関連の連載をやると見せかけて「モダンWebインターフェィス構築術」とかいうタイトルで連載したわけですが、当初の予定通りの内容を書き終えて無事連載終了となりました。
当初は、読み物を軽く書くつもりだったのですがいつの間にか実装よりの話ばっかりになっていたという。
言語とか、対象となるレイヤとかも特に限定してなかったので、それなりに広い範囲のネタを取り扱えたかなと思います。こういった記事だと大抵JavaScript&Rubyとか何でしょうけど、そのへんは趣味という事で。

連載でやるなら4ページ分くらいづつ書くのがちょうど良いかなとか思っていたのですが、なんどもページをオーバーしていたりとかすったもんだありました。

そうそう、書き忘れたから追記だけど、この連載の主なターゲットは割とWeb系バリバリやってる感じの人じゃない所にターゲットを向けた感じで題材えらびやら何やらしていたわけですが、そのお陰でぼくの半径1mくらいの人達の興味持てるネタとかあまりやってないせいで、あんまり記事への意見とか見る機会が無くて暗闇の中を歩いている感じではありました。だいぶ考えて暗闇に道を作ってたつもりだったけど、みなさまいかがでしたでしょうか!
だいぶ明確なターゲット設定と、それによってどうなって欲しいかという目標とか、最初っからそういった設定はしていたのですが、それについてはどっかで機会があれば明かしたいなと思うところ。

連載が終わってからなんとも達成感が凄いわけですが、Perlのバトン連載のほうで書く機会があったら、またよろしくおねがいします。

WEB+DB PRESS Vol.61 - 4774145440

WEB+DB PRESS Vol.61


技術評論社 (2011-02-24)
rating:  - WEB+DB PRESS Vol.61
price: ¥ 1,554 at 2011.02.25

連載の裏話的なネタは、後日どっかで取り上げられるかも。

まだHTML5の戦いは始まったばかりだ!

Posted by Yappo at 15:25 | Comments (0) | TrackBack

2011年02月17日

芽ネギが芽でた

やっぽてぃ Ficia Photo

あれから、いろいろググってみたらむづかしいっぽかったけど、無事に双葉がでた!
しばらく放置して忘れてたけど、からっからに乾いたティッシュに水まいたら凄い勢いで流れ出したけど元気っぽい。

Posted by Yappo at 11:24 | Comments (0) | TrackBack

2011年02月14日

simpleTimeago.js - facebook っぽい "2 minutes ago" みたいな時刻表記を作るjs書いた

表題の通りの物を書きました。
https://github.com/yappo/javascript-simpleTimeago
デモはこちら http://yappo.github.com/projects/simpleTimeago/

同種の物として jquery.timeago.js とかあるんですが、そもそもjQuery pluginである必要がないし、時刻フォーマットの拡張の自由度が小さくて用途に合わないので作りました。

使い方はコードを見た方が手っ取り早いでしょう。

simpleTimeago(epoch_time);
ってだけです。
フォーマットの追加もとても簡単で、コードの下の方にサンプルてきに英語版と日本語版のフォーマットを書いてあります。
だいぶ好き勝手にフォーマット変えられるので、便利に使えるんじゃないかなーと思います。

Posted by Yappo at 15:56 | Comments (0) | TrackBack

jQuery Mobile 所感

しばらくjQuery Mobileを弄ってて思った事をメモ。まだまだあるふぁ何で色々変わるとおもうけど。

ドキュメントがすくないよママン

アルファリリースなんで仕様固まって無い部分もあるから放置され気味なんすかね。
素直に実装読んだ方が速い。

あるふぁ2からあるふぁ3にしたらへんになったよ

アルファリリースっていってんだろがカスが!

標準のCSSだけじゃiPhoneアプリっぽくならない

最初からついてるアイコンとかだけだと、良くあるiPhoneアプリの画面になりません。
Sencha Touchつかったほうがその辺充実してる。
テーマカスタマイズして頑張れって事ですかね。
正式リリースしたらテーマ作成ツールとかちゃんと出してくれるみたいだし、しばらく我慢の子。

heaer/footerの位置を固定にしてもなんか変

なんか頑張って実装してるんだけど、スクロールイベントとか使ってるせいでカクカクする。。。
いまのところjquery.mobile.iscroll.js 的なアプローチを使うと良い感じになる。

UIがなんか物足りないSenchaのが良くね?

足りなければ作りましょう。

jquerymobile.comのデモページ重いよ

あれのページ遷移ってajaxしてhtmlいちいち取って来てるからloadingが長いの。
htmlの中に必要な要素を入れとけば、それなりにサクサクするよ。

いまどきlocation.hashかよ

一応pushStateしてurl書き換えるような実装を書いてるみたい。
ただし、pushStateサポートしてるブラウザだと強制的にpushStateつかうロジックになってしまうので、ユーザが選択権もてるようなパッチ書いておくったら、あとで考えるリストに突っ込んでもらえた。

なんか勝手にDOM構造変わるんですけど。。。

そういう物だと思ってあきらめましょう。

動的にページ書き換えたらスタイルあたってなくて残念

だからといって、jQuery Mobileが書き換えるDOM構造をわざわざ手で作らなくても良いです。

var dom = $('<div data-role="page" id="page-test" data-url="page-test"><div data-role="header"><h1>header</h1></div></div>');
dom.page();
$("body").append(dom);
こういう感じでpageメソッドを呼べば良い感じにしてくれます。
ちなみにid="name"とdata-url="name"に同じ値で入れておかないと、そのページのDOMが存在してない扱いされるので注意。なんかこれバグな気がするけど。

ほかには、全く同じdom要素に.page()メソッドを連続で行えなくて、.removeData("page")ってやってwidgetのインスタンスを決してあげないといけない。


application cache with pushState とかの考察

location.hash 使ってナビゲーションするときには、何も考えないでhtml5 application cacheつかっちゃえますが、pushState使いながらキャッシュしたい時には色々考えないといかんです。
foo.manifest で書かれたリソースのキャッシュは、各ページで使い回し聞くんですが肝心のHTMLそのものは別々のURLなため、別個にキャッシュされてしまってメモリを圧迫するという。
なので各URLが返すHTMLはとても小さくしておいて、メインで使うコンテンツは動的に組み立てる若しくは別ファイルとして置いといて、ajaxとかでゲットして使うとかになるのかなと。
まだ、この変はもうちょっと調べないといけない。

簡単にキャッシュしたいならpushStateするなって話もあるかもだけど。。。

Posted by Yappo at 15:48 | Comments (0) | TrackBack

#!なんか糞だ

#!というものは、根本的にURLの使い方を破壊しているからうんこである。
まず、本質ではない。jsが壊れたら見れなくなる!っていう批判は的外れだが。
#!に妄信するのは愚かなことであるのは間違いない。
何が糞かってのは、もうさんざんDISられてるから中略。

というかlifehackerとかのそれはやる意味がまったくないし、もし軽くしたいんであればもっと別の手段を取ればよい。
そもそも http://www.lifehacker.jp/ にアクセスすると http://www.lifehacker.jp/ に飛ばされるし、頑張って http://us.lifehacker.com/ からアクセスして記事のリンクをクリックすると http://www.lifehacker.jp/ に飛ばされるので、ほんと死ねばいい。

動的に書き換えられたコンテンツのパーマリンクを作るためには、ブラウザのロケーションバーを動的に書き換えなければならないのだが、それは、もう今まで仕方なくlocation.hashを使っていた。
しかし今度でるFirefox4とかは、poshState/replaceState/popstateに対応するので、いい加減この糞みたいな俺俺仕様に対応する労力を割くくらいなら、この新しいhistoryの機能に対応した方が良いだろう。

まだOperaは対応してないけど、使うサイトが増えれば対応してくれそうだし、IEにいたってはIE9でも対応しないっぽいんだけどIEはそれ以前の問題だ!
そういった非対応のブラウザにはajaxとかで動的にコンテンツ書き換え無いで、クリックするたんびに旧来の画面遷移を行わせとけば良いんじゃないかな。
正しく実装してれば、クリティカルな事にはなりませんし。


たとえば、今から慌てて#!対応を行うよりもposhState/replaceState/popstate対応をした方が、将来的にもちゃんと使えるし、URL的にも正しい動作になるし既存の全ての機械的にURLを処理するプログラムからも正しく使えるアプリになりますよ。

っていうようか事を今度のWEB+DB PRESSで書いた。

Posted by Yappo at 13:44 | Comments (0) | TrackBack

2011年02月10日

Facebook Page 始めました

僕も流行に乗ってFacebook Page作りました。

http://www.facebook.com/Yappo.jp

です!

みなさまよろしくお願いします。

Posted by Yappo at 21:24 | Comments (0) | TrackBack

2011年02月09日

シェルの中からFacebookにポストするbash関数かいたよ

https://github.com/yappo/bash-facebook-status-updater/blob/master/facebook-status-updater.bash
これをどっかに置いといて

$ source facebook-status-updater.bash
$ facebook-status-updater
ってするとURLが出てくるので、それ開いて accept したら「Success」って画面でるので、その画面のURLから#access_token=から&までの間の文字列をACCESS_TOKENっていう環境変数に入れて
$ facebook-status-updater "とうこうしたいことば"
ってやるとシェルの中からふぇぃすぶくに投稿できるbashの関数書いた。

source ~/git/facebook-status-updater/facebook-status-updater.bash
alias facebook="ACCESS_TOKEN='とってきたACCESS_TOKENをここに' facebook-status-updater"
ってやって facebook こまんど作るのおすすめ。

Posted by Yappo at 22:15 | Comments (0) | TrackBack

ShipIt::Step::Facebook - モジュールをCPANにうpったらFacebookでお知らせ

おれなんかだいぶ昔からふぇいすぶうkしてるんだけど、皆さんはいまさらブームらしいですね。

いままで真面目にふぇぃすびっくのAPIとかそういうの触ってなかったんですが触ってみたついでに、shipitしたらFacebookにお知らせするやつ書きました。

http://frepan.org/~yappo/ShipIt-Step-Facebook-0.01/
https://github.com/yappo/p5-ShipIt-Step-Facebook

基本的にはhanekomuのShipIt::Step::Twitterのコピーとなっております。
違うのはpostするurlにfrepanを指定できる位。

postするWallとかも変更できるので、CPANおーさーの皆様は自分のファンページにでも向けて通知すると良いんじゃないでしょうかね?
てかレガシーな方のAPIだと、uid変えればファンページに直接投稿できるのにGraph APIだと

kazuhiro osawa => Yappo
みたいな事になって嫌な感じなんだけど誰かしりませんか!?APIリファレンス見ても出来なさそうなんですけど。。。

あと良く判らないのは、access_tokenを取るために僕が作ったアプリケーションのApplication IDをaccess_token作るツールに埋め込んであるんだけど、それってやっていいのかな?という。
この使い方だとapp keyもapp secretも使わないで済むんだけどそれでいいの?とか。

あと、なんかふぁんぺーじに25人以上はいるとパーマリンクつくれるらしいんで入って下さい

Posted by Yappo at 19:49 | Comments (0) | TrackBack

2011年02月08日

食物栽培開始

栽培開始する前に昨日は庭に生えてるふきのとうを収穫致しました。
とても苦くておいしゅうございました。

一昨年はやりすぎたので去年一年は休耕してたのですが、今年から再開するにあたって土の準備は終えております。
今週末にはジャガイモ飢える。


なんか友人の家の庭に野菜植えて育てる話で盛り上がってて、ネギ作ろうとかいう話がでててネギ作りたくなったので、さっき帰り道に豊洲のビバホーム寄ってネギの種買って来ました。
今流行りの水耕栽培で、高級な芽ネギをいっぱい食べる作戦。

作り方は簡単で、プランターの受け皿にティッシュを敷き詰めて水をしみ込ませて、アホみたいに種を巻き散らす。種は一般的なネギのでいいはず200円もしないし、敷き詰めても1/3くらいしか使わない。

やっぽてぃ Ficia Photo

基本的にはネギとか辛みのある物は水とか要らないんだけど、発芽させるためにヌレヌレ程度にティッシュを濡らしとく。

で、まぁいま冬で寒いのでビニールハウス的にサランラップ巻いて空気穴あける。

やっぽてぃ Ficia Photo

あとは、雑誌とかを上に乗っけて光を遮っとけばしばらくすると発芽するはず。


普通はこんなに馬鹿みたいに種敷き詰めないんだけど、芽ネギ専門で収穫するのであんまり関係無いはず。
肥料も、芽ネギ程度ならきっと種の中の栄養だけでだいじょうぶでしょ?

種が水没しない、冷たすぎない、種に光をあてると発芽しない。って所を気にしとけば平気かなぁと。
あとは、発芽したら光を当てないときっともやしになる。

これで来月は芽ネギ食い放題のはず。。。。!

おまけ。

天城ワサビが安かったので沢山買いつつついでにニンニクも買った。
後日恥じっこにうえなおそうとおもう。

やっぽてぃ Ficia Photo


しっかし、豊洲なんか園芸人口少なそうなのにすっげぇ充実してるのな。5年前から俺知ってたけど。

Posted by Yappo at 00:23 | Comments (0) | TrackBack

2011年02月04日

jquery.mobile.useHistoryState.js その後

元々やりかたいかんなーとは思ってたんですが、jqm1.0a3出た時にpushstate branch見つけたので、そっちにパッチを送ってみる戦略にしてみた。

いまのブランチでちょっと挙動が怪しい部分にパッチあててpull reqったのと、今の実装だと pushState 使える端末だと問答無用で pushState してしまって、 html 一枚だけ配信して location.hash 使って管理したい人が泣くので、それを抑制するオプションを作ってpull reqった。
全然空気読んでないんでどうなるかわからないけど。。。

あとは、何でも感でもリンク先が pushState されて矢田なーとか思ってたけど。

          <ul class="ui-grid-b"> 
            <li class="ui-block-d"><a rel="external" href="/index">index</a></li>
            <li class="ui-block-d"><a href="/view">view</a></li>
            <li class="ui-block-d"><a href="/popular">popular</a></li>
            <li class="ui-block-d"><a href="/search">search</a></li>
          </ul>
みたく rel="external" 属性を突っ込めば良いのであった。

ちなみに jquery.mobile.useHistoryState.js は jquery mobile 1.0a3 出た時は動かなくなっちゃったけど、今はエキセントリックな対応したから動くす。
まぁコアでサポートされる迄の寿命だけどね!

ついき:pushstateのサポートをon/offする件は後で考えるリストに入れてもらった。
disableさえ出来るようになれば、好き勝手なプラグイン書けるから嬉しい。

Posted by Yappo at 22:38 | Comments (0) | TrackBack

俺とPHP

なんか知らないうちにPHPの事を嫌っているという噂が広まっていて心外すぎるので弁明しておく。長くなるかもしれない。

PHPを使い始めたのはちょうど10年半くらい前のことだと思う。4.0.2 あたりが出る前だ。当時おれのiYappoのCGIが糞重くなっていて、PHP を見つけた。それまで恐くて自分でRDB実装してたけどMySQLに接続してデータの出し入れをするような仕掛けを簡単に作れるという。

それまでは web で何か作るといったら Perl だったし、なんかフレームワークとか良く判んないけどそれなりに書いてた。Perl はかなり好きだった。それでも、PHP の手軽さは輝いて見えた。コードをそのまま HTML に埋め込めることでさえ、「SSI」だと思って感激していた。その言語の情報を調べるためにアルタビスタっても変な黒背景の地球の画像のサイトが出たり、黄色の背景のページが出たり、jcode.plをJcode.pmにコピペしたりする人のページとか見つけてばっかりで疲れる必要もなくて、php.netに繋げれば、答えが書いてあったから、動くものをあっという間につくり上げることができた。のめり込んでいった。

友人のひとりから、bp.toっていうドメインを貸してもらった(今は譲渡してもらったけど)。当時はパケホーだいとか無くて携帯ユーザはいかにしてパケ代を抑えるかが生き甲斐だったので、パケット削減プロキシをやる事にした。Perlなんかと違ってPHPは拡張もCで書きやすいという事で胸踊らせながら、英語のドキュメントを我慢して読もうとしたら、内容が無かった。けど、ほかの拡張ライブラリとか見たりPHP本体読みながら何とか書いたよ。当時のマシンは貧弱だったからC化するだけでそれなりにパフォーマンスも良くなってた。

無事にサービスもリリースされて、それなりにプレスの人にも紹介してもらって結構トラフィック集めてたと思う。まぁ今時はもうお役御免って感じなんですけど。

つい最近も久しぶりにモダンなPHPを使う機会があったけど。 PHP is sucks ですね。はい。

(※全てを読むには元ネタにおっぱいおっぱいと書き込んでください)

Posted by Yappo at 19:55 | Comments (0) | TrackBack

2011年02月03日

HTML5 の Application Cache 用の manifest ファイルを簡単に作れる HTML5::Manifest and Module::Install::HTML5Manifest released

HTML5 から offline application を作るための強力な機能として application cache が追加されています。
これのキャッシュを制御する方法としては、専用の manifest ファイルを書かなければいけないんですが、手で書くのもだるいし専用コマンド作るのも打つのもだるいので

 $ make html5manifest
ってコマンド叩いたら htdocs 以下を勝手に探索して manifest ファイルを作ってくれる物をこしらえました。

http://frepan.org/~yappo/HTML5-Manifest-0.02/
http://frepan.org/~yappo/Module-Install-HTML5Manifest-0.01/ そのうちCPANにも登録されます。

ディレクトリの中から対象となるファイルを集めて来て manifest ファイルを作るための HTML5::Manifest というモジュールと、 HTML5::Manifest と Makefile の繋ぎ込みをしてくれる Module::Install::HTML5Manifest というモジュールの二本立てにしました。

HTML5::Manifest 単体の使い方は、きっとだれかが PSGI な middleware 書くだろうから今回は省略しておいて Makefile.PL での使い方をさらっと説明します。

POD に書いてあるのであんまり言う事ないですが

    html5_manifest
        make_target   => 'hoge',
        htdocs_from   => 'htdocs',
        manifest_skip => 'html5manifest.skip',
        generate_to   => 'example.manifest',
        with_gzfile   => 1, # create .gz file
        network_list  => [qw( /api /foo/bar.cgi )],
        use_digest    => 1,
        ;
とかして使います。

make_target は Makefile のターゲットを変更します。この例だと

 $ make hoge
で manifest ファイルを作るって事。
デフォルト以外の物をしていする事によって、複数種類の manifest ファイルを管理したい需要に応えます。

htdocs_from は、どのパスを起点にしてキャッシュするファイルのリストを作成するかを指定します。
普通に document root を指定するべきですね。

manifest_skip は、 htdocs_from で指定したパスをトラバースする時に、無視するファイルパターンを記述してあるファイルを指定します。
MANIFEST.SKIP と同じ役割です。

generate_to は、実際に作られた manifest ファイルを保存する先です。

with_gzfile は、真の値を渡すと generate_to と共に .gz ファイルも作成します。
manifest ファイルが、そこそこの大きさになったときに .gz 化してサーブする事を想定しています。

network_list は、 manifest ファイルの NETWORK セクションにそのまま書き出されるリストです。 NETWORK セクションについてはググれ。

use_digest は、キャッシュ対象のファイル全部の MD5 チェックサムを manifest ファイルの中に書き込みます。
ファイル構成がかわらなくても、どれかのファイルの内容が変更になったらチェックサムが変わるので「manifestファイルが更新されたら、キャッシュを更新する」という application cache の仕様を満たす事が出来ます。
手で、一々バージョン番号ふったり make html5manifest した日時を自動的にいれるとか面倒ですよね。

HTML5 っていう名前空間は、仕様の名前を使ってるから問題無いという判断。だれだって HTML::HTML5 とかタイプしたいと思う人なんかいないし。

ということで Perl で HTML5 をやっている方はお試しください。

Posted by Yappo at 21:54 | Comments (0) | TrackBack

jQuery Mobile の permalink を HTML5 使って location.hash じゃなくする jquery.mobile.useHistoryState.js を書いた

こん

jQuery Mobile使ってますか!1月にリリースされるって噂聞いてるんですがまだ頑張ってるみたいですね!

jQuery Mobile では <A href="#foo"> のようなリンクをクリックすると <div data-role="page" id="foo"> で囲まれた要素を表示して、 http://example.an/oreno/index#foo という URL がロケーションバーに入ります。

時としてPCと須磨補は同じURLを使いたいという要求もあるでしょう。そういった場合に jQuery Mobile で対応するには、それぞれの URI でページを生成してあげて href="/oreno/foo" とかにリンクさせれば、 jQuery Mobile が内部的に http://example.an/oreno/index#/oreno/foo の内容を Ajax で取ってきて画面を書き換えて、ロケーションバーの中身を http://example.an/oreno/index#/oreno/foo って書き換えてくれます。

今の所は location.hash を使ったページ遷移しか出来ないようなので、 SCRIPT タグでロードするだけで location.hash に頼らないパーマリンクになるようにする jQuery Mobile plugin を書きました。

https://github.com/yappo/javascript-jquery.mobile.useHistoryState
デモはこちら

やってる事としては hashchange イベントが発生したら location.hash の内容を元にして history.replaceState 使って現在の URL を書き換えます。
ブラウザの戻るボタンとか進むボタンでは popstate イベントが発生するので、 location.pathname を元にして $.mobile.changePage を使って、表示されるべきページを表示させます。

pushState popstate replaceState に対応してない Firefox 3.5系のブラウザとかでは、このプラグインは動かないようになってますので、必ずしも permalink が同じにならないんですが、基本的によく使われているスマフォでは webkit 系だから気にしなくてもいいかなーという。。。え、おぺら?

ろむ

追記: なんか jquery mobile 側でも実装仕様としてるみたいだけど、 jQuery のフォーラムに投下してみた http://forum.jquery.com/topic/i-made-pushstate-support-plugin-for-jquery-mobile

つづく

Posted by Yappo at 13:09 | Comments (0) | TrackBack