iPhone で任意のサイトを全画面アプリっぽくできるツールを作りました

発端はこれ。

iOS6でGoogleMapsをフルスクリーン表示にしてみました – W&R : Jazzと読書の日々
http://d.hatena.ne.jp/wineroses/20120921/p1

上記サイトでは Google マップと YouTube が紹介されていますが、任意のサイトを作成するためのツールがあったら便利だよね。ってことで作成しました。

Web アプリアイコン作成ツール
http://waim.remora.cx/

Continue reading

Last.fm for jQuery を改造してみました

Last.FM から再生履歴を取得して表示するツールです。このページの左のツールバーで動いています。本家にインスパイアして作成したのですが、次の点で拡張しています。

  1. 一定時間たつと自動で表示内容を更新する。
  2. アルバムアートが見つからない場合、アーティストの画像で代替する。
  3. 各曲の情報を順番にフェイド・インして表示する。
  4. strftime.js を使って Last.FM プロフィールページのように再生時刻を表示する。

サンプルページを開く

そしてついでに github デビュー。

delphinus35/lastfm – GitHub
https://github.com/delphinus35/lastfm

設置方法などは README.md と付属の sample.html に書いているのでそちらを見てください。

Last.FM の API Key の取り方など、細かいことは前回の記事参照。でもまあ、特別なことしない限り付属の API Key をそのまま使って問題ないっぽいです。

ホントは何ヶ月も前にできてたんだけど、ドキュメント書いたりするのが面倒でほったらかしてました。何とか今年中に公開できて良かった。

では、良いお年を!

jQuery.getJSON() の罠

とある Web アプリケーションを作っていたときのこと、Firefox ではまともに動くのに、IE ではバージョンを問わず機能しないことがあった。調べてみると、(珍しいことに)IE の方が仕様に則った正しい動作をしていたためであった。

最初に結論を言うと、毎回違う結果が欲しいのなら、$.getJSON() よりも $.post() を使えって話。

GET メソッドによるサーバーアクセスはブラウザにキャッシュされる。同じパラメータでのアクセスを繰り返そうとしても、ブラウザによっては、ローカルキャッシュを返すことでサーバーへのアクセスを行わない。これは GET メソッドの冪等性を考えれば自明のことだ。

冪等 – Wikipedia

冪等性は、大雑把に言って、ある操作を1回行っても複数回行っても結果が同じであることをいう概念である。

(中略)

HTTP の GET 要求は冪等とみなされる。Webの機構は基本的にその前提で要求結果をキャッシュに保持する。HTTP の POST 要求(フォーム送信に使われる)は冪等とはみなされないため、POST 要求はキャッシュされない。

Continue reading

【jQuery】IE8 でエラーが出て slimbox が使えない件について

このサイトでは画像の表示に slimbox を使っているのだが、いつの頃からか IE でバグって使えなくなっていたようだ。……そう、そもそも IE ではサイトの検証を全然してなかったのだorz

画像をクリックすると、謎のエラー「オブジェクトでサポートされていないプロパティまたはメソッドです。」が出てしまう。

2011-02-03_172614.png

IE8 の開発者ツールでデバッグしてみると、6289 行目(v1.4.4)、或いは、7284 行目(v1.5)が原因のようだ(このことに言及しているソースがキャッシュにしか残っていなかった。すぐに消えちゃうかも。)。このエントリーによると、ColorboxFancybox といったライブラリも使用不能になっていた模様。

Kawaz – 2010/12/17に書かれた日記一覧
http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fwww.kawaz.org%2Fblogs%2F2010%2F12%2F17%2F&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a

var elemdisplay = {},
	rfxtypes = /^(?:toggle|show|hide)$/,
	rfxnum = /^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,
	timerId,
	fxAttrs = [
(以下略)

これを以下のように書き換えると直る。

var elemdisplay = {},
	rfxtypes = /^(?:toggle|show|hide)$/,
	rfxnum = new RegExp( '^([+\-]=)?([\d+.\-]+)([a-z%]*)$', 'i' ),
	timerId,
	fxAttrs = [
(以下略)

jQuery-1.x.x.min.js を使っている場合は簡単に書き直せないので Perl を使った。

$ perl -i.orig -ple "s:bT=/([^/]*)/i:bT=new RegExp('\1','i'):" jquery-1.5.min.js

jQuery 版 Last.FM ウィジェットを導入してみた

Last.FM は、PC や iPhone などの DAP で音楽を聴く人にとって必携のツールだ。SNS 的な機能を抜きにしても、自分の音楽嗜好に合わせて似たアーティスト・楽曲を提案してくれる機能は非常に便利。

Flash 版 Last.FM ウィジェット

以前の記事で、Last.FM の情報を表示してくれるウィジェットについて書いた。

Last.fmウィジェットはどこに行った? | blog.remora.cx
http://blog.remora.cx/2010/02/lastfm-widget.html

このウィジェットは Flash を使っており、いまいち好みでなかったこと、また、いつの間にか公式サイトでも非推奨になってしまったことから使用を止めていた1

jQuery 版 Last.FM ウィジェット

そこでググってみると、Last.FM API を利用したウィジェットを発見。早速利用してみた。

Last.FM for jQuery
http://labs.engageinteractive.co.uk/lastfm/

CD



上記サイトにも導入方法は書いてあるのだが、改めて纏めてみる。

Continue reading