less

BathyScapheで選択したテキストをEvernoteに送る

Thu, 26 Apr 2012 11:45:00 +0900

Send to Evernote.scrt

BathyScapheのスクリプトフォルダに入れます。デフォルトでは「Tmp」ノートブックに追加されるので好きなノートブックに書き換えてください。

スレッド名でノートを作成
- ノートのURLにはスレッドのURLを指定
同じスレッドの発言は1つのノートに追記

Evernoteの容量を節約する

Wed, 25 Apr 2012 23:51:04 +0900

AppleScriptのテストしまくってたらEvernoteの容量上限来た。Evernoteの容量は実際の所1ヶ月の転送量なので適当にやってると無駄遣いしてしまう。

細かくデータを作り直しているとその分転送し直しで減る
- データを作り直す可能性があるものは上げない
ローカル上でEvernoteにノートを追加出来たかどうかが確認出来ればいい場合はローカルノートブックに対して送れば消費しない
- 同期を手動にすると同期する前に消せば容量が復活するが、架空であっても容量上限に達すると何も出来なくなる

Evernoteは容量オーバーすると何も出来なくなる（Mac版のクライアントのみ？）。転送が次回になるだけで、ローカルでは自由に編集出来るようになるとうれしい。

スクリプト経由のバックアップノウハウ少しずつ溜まってきた。

EvernoteサポートFAQ - 容量計算・課金処理 - Evernote 日本語 - Evernote User Forum

tview → Dropbox → Evernote

Wed, 11 Apr 2012 02:17:00 +0900

特に理由はないんだけど思い付いたのでTumblrのリブログ、Like画像をEvernoteに送ることにした。凄まじい勢いて落ちてきて笑える。

いつも使っているtviewはTumbletailと違ってEvernoteに送れない
- Tumbletailもノートブックの名前が固定なのがよくない
- Dropboxには送れる ← これを使う

最初iftttを調べたけど、Dropboxの公開フォルダーにファイルを置く必要があって逆に面倒。

手順。

tviewでリブログ、Likeした時にDropboxにも保存するようにする
リブログ、LikeするとDropboxにtviewフォルダーが作られる
tviewフォルダーにフォルダアクションを設定して、ファイルが落ちてきたタイミングでEvernote.appに送るようにする。アクションはAutomatorで作る
Evernote.appが同期されるとEvernoteに上がる

tviewは「ユーザー名_ポストID.拡張子」という規則でファイル名で作ってくれる。パースすればソースのURLも組み立てられる。

http://ユーザー名.tumblr.com/post/ポストID

デスクトップからのリブログもどうにしかしたくなる。。ワークフローは以下。

Finder 項目にフィルタを適用
- 種類がイメージである
AppleScript を実行
- https://gist.github.com/2352527
Finder 項目をゴミ箱に入れる

現在のtview設定。

jQuery 1.7.2のattr、propには罠がある

Mon, 02 Apr 2012 17:11:00 +0900

jQuery 1.7.2には割と多くの人が引っかかると思われる問題があります。1.7.2では$attr、$.propの第二引数にundefinedが入ると、値ではなくコンテキスト自体が返るように挙動が変わりました。

<img src="foo.png">

var img = $('img');
img.attr('src'); // => "foo.png"
img.attr('src', undefined) // => "foo.png" (1.7.1)
img.attr('src', undefined) // => img (1.7.2)

普通はわざわざundefinedなんて指定しない。$.attrに値をそのまま渡してラッパー的に使っていると挙動が変わることが多いと思います。

function foo(value) {
    // value===undefinedな状況
    return $('img').attr('src', value);
}
foo();

バグとして登録されているので近く直ると思いますが、とりあえず以下のようにすれば対処出来ます。

function foo(value) {
    // nullは通したいので===で比較
    return value === undefined ? $('img').attr('src') : $('img').attr('src', value);
}
foo();

arguments.lengthを見るようになったのが原因。

-        return jQuery.access( this, name, value, true, jQuery.attr );
+        return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 );

Tumblr Life 1.0 Pre 10

Thu, 08 Mar 2012 14:22:16 +0900

Tumblr Dashboardを拡張するユーザースクリプト、Tumblr Lifeの1.0 Pre 10を公開しました。Tumblrのデザイン変更に伴って、過去のバージョンではリブログボタンが表示されない可能性があります。アップデートしてください。また、Pre 9には表示されないバージョンと応急処置をしたバージョンが存在します。Pre 9をご利用の方もアップデートをお願いします。

Pre 9からの変更点

リブログボタンが表示されなくなっていた問題修正
新しいリブログボタンに合わせたデザインの調整

要望や問題を発見した際はGitHubのIssuesや@ykskまでお願いします。

Tumblr Life 1.0 Pre 9

Thu, 08 Mar 2012 00:44:00 +0900

# 出してすぐまたTumblrのUIが変わりました。。現在Tumblr Lifeを有効にしているとリブログボタンが消えます！ 対応するまでスクリプトをにするようお願いします。修正版を上げました。細かい表示の調整は後ほど行う予定です。

Tumblr Dashboardを拡張するユーザースクリプト、Tumblr Lifeの1.0 Pre 9を公開しました。

Tumblrのリニューアルの影響で崩れた表示などを修正しました。

リニューアル後にフィルターメニューの重なりがおかしかった問題修正
Firefox、Operaでリブログメニューがズレる問題修正
Firefoxでプレースホルダーの文字が見えていなかった問題修正

要望や問題を発見した際はGitHubのIssuesや@ykskまでお願いします。

URLから画像を取得してEvernoteにクリップする

Wed, 29 Feb 2012 18:57:53 +0900

Evernoteの画像クリップ周りにはちょっと癖があります。

画像をダウンロード。上手く行けば画像データを保存
ダメだったら画像へのリンクとして記録。画像データ自体は保存されない

上手く落とせない原因はタイムアウト、認証の掛かったページ、リファラ制限などがありそうですが、保存されないとオフラインになった時やその画像がサーバーから消えた後は見ることが出来ない！フォーラムでも報告があります。

メール経由で送ったりと色々試したところ、結局ローカルにダウンロードしてからEvernoteに送るのが確実ということになりました。一度落としてしまえば自由に扱えます。Mac版EvernoteはAppleScriptから操作出来るので、Automatorと組み合わせてURLから画像をクリップするサービスワークフローを作りました。

Clip Images.workflow

本文は取り込みません。画像取得の際はSafariのクッキーが送られるので、セッションが残っていればログインが必要なページからもクリップ出来ると思います。リファラー制限はITmediaで試したところ無理でした。。リンク画像が絶対に作られない点と、ノートのフォーマットを統一出来る点が特徴です。動作にはEvernote.appが必要です。Lion上で作ったので他のOSだと動かないかも。Lionの場合、ワークフローファイルをダブルクリックするとサービスに追加出来ました。使い方です。

URLが含まれた文字列を選択して右クリック
コンテキストメニューから「サービス」→「Clip Images」
- URLが見つからなかった場合はサービスの項目がメニューに出ない（たぶん）
- URLが複数見つかった場合はそれぞれから画像を探し1つのノートにまとめる
ページ自体の画像を探すか、そのページからリンクされている画像を探すかを選択

成功するとEvernoteの「Inbox」ノートブック（なければ作られる）に画像の入ったノートが作られます。ページによっては時間が掛かることがあるかも。完了時、または画像がなかった時はGrowlに通知します（growlnotifyが必要）。

# 画像は一時的に~/.Clip_Images_ランダムな数字フォルダーにダウンロードされます。普通は終了後自動で消されますが、エラーなどでフォルダーが残った時は適当に削除してください。

取り込めない例と対策。JSで画像やリンク先の表示を遅延させているページでは、HTMLソースに画像のパスが存在しないため上手く行きません。何かおかしい時は次の方法でなんとなかなるかも。

以下のブックマークレットを追加
- List Images
- List Linked Images
ブラウザーでページを表示して画像を読み込ませる
ページに合わせて上記のブックマークレットを実行
ページのテキストを全選択して右クリック。「サービス」→「Clip Image」→「これらの Web ページ上にあるイメージ」

上手く行けばノートが作成されるはずです。

ワークフローの流れ。

AppleScriptで出来ることはEvernoteのコード例が参考になります。完全なリファレンスを見るにはAppleScriptエディタにアプリケーションのアイコンをドラッグしましょう（この方法分かりにくい上に面倒なのでどうにかしてほしい＞＜）。

最近ブックマークレットをCoffeeで書いています。やりたいことがやりたい通りのコードで書けて楽しい。ブックマークレットは気軽に書きたいしね:D

LionのUIで思ったこと

Thu, 23 Feb 2012 02:34:11 +0900

もう次のOS発表されましたが、草稿が残っていてちょっと面白かったので載せときます。

妄想です。

最初からウィンドウ全体リサイズを実装しようと思ってない感

ジェスチャー入れたい
スクロールバーも消そう
スクロールバーを消すと右下のリサイズだけ残すのはおかしい（iOSと整合性が取れなくなる）
ウィンドウ全体でリサイズ出来るようにしてUI無くせばいい

のような流れで実装されたのでは…。UIを連鎖的に考えるのは以前閉じるボタンの位置について考えた時と同じパターン。

フルスクリーンアイコンを置くためにツールバーのトグルボタンを廃止した説

UIが一定まで埋まるともうそれ以上機能を追加せず、既存のものからプライオリティの低いものを置き換えていく？逆にUIが埋まってなければあってもなくてもいいような機能でもそのままにしておくｗ

iTunesが肥大化出来るのはUIが埋まらない構成になってるからかな…。

スクロール方向の変更は納得が行かなかったけど検証してる時に慣れたら納得した。。スクロールバーを消すのとセットなのは、以前はスクロールバーに対して操作していたものを面自体に対しての操作に切り替えたことを無意識に伝える意図もあるのかなぁ（iOSの時に検証されたと思う）。

MacのTwitterクライアントをOsfoora for Twitterにした。なかなかいい。Tweetieの出た頃を思い出す。 iPhoneのクライアントも合わせてTwittelator...

Thu, 23 Feb 2012 02:13:21 +0900

MacのTwitterクライアントをOsfoora for Twitterにした。なかなかいい。Tweetieの出た頃を思い出す。

iPhoneのクライアントも合わせてTwittelator Neueにしてみたのだけど、こちらはまだチューニング出来る感じ。公式とTweetbotと3アプリ行ったり来たりしている。

Day Oneも買ってしまって、これもなかなかいいんだけど今度書きます。

IE 9以下に存在するセレクター数制限にはまった

Thu, 23 Feb 2012 00:44:00 +0900

# 対策を追記しています 2012-02-23

開発中にいきなりCSSが壊れて原因を探っていたらこれに行き着きました。IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。ええええ。。MSにもページがある模様（@os0xさんに教えてもらった！）。

A webpage that uses CSS styles does not render correctly in Internet Explorer

この問題は

SCSSだと割とカジュアルにセレクター数が増える
CSSは出来るだけ1ファイルにまとめたい（リクエスト数削減のため）

との組み合わせがやばい。SCSSはセレクターが他のページに影響しないように以下のように書いていました。

// 共通部分
@mixin foo {
    color: red;
    .foo {
        font-size: 2em;
        // たくさんの指定…
        ...
    }
}

// 影響範囲を以下のページのみに限定したい
#page-a {
    @include foo;
}
#page-b {
    @include foo;
    color: yellow;
}

// 全ページに跨がる負の遺産
.foo {
    font-size: 5em;
}

これだと適用ページを増やそうと思うとページ倍にセレクターが増えることに。。共通で使うセレクターを安心して設定出来るようにきれいな環境にする必要があると思いました…。

一般的に問題になりそうなのはCSSの1ファイル化。対処方法としては溢れたら2ファイルに分ける、がありますｗ 1ファイル化後に毎回挙動が変わっていないかチェックするのは大変なので、セレクター数をチェック出来る仕組みがほしいところ。SCSSやCompass側で生成時に警告してくれたり自動的に分割するオプションがあるといいですね…。

公開後にいくつかアドバイスを頂きました。

extendを利用すれば減るのでは →CSSはスリムになるけどセレクターの数自体は減らせない
事後処理のツールが有効なのでは
Blessというまさにこの問題を解決するためのツールがある！
css_splitterもある

とりあえずCompassのconfig.rbにcss_splitterを組み込むことになりました。

require 'css_splitter'

...

on_stylesheet_saved do |filename|
    if File.exists?(filename)
        CssSplitter.count_selectors(filename)
        CssSplitter.split(filename)
    end
end

scriptタグが増減することになるので、その扱いは考える必要があります。。

IE 6、7、8、9と現行のIEでは必ず起こります。IE 10では直っているらしいです。

@yksk d.pr/fsYE一応スクショ。VirtualBox上のWindows 8 Developer PreviewでのIE10 PP4。
— Kyo Nagashima (@hell2u) February 22, 2012

ちなみにIEにはCSSファイルを31個までしか読めない問題もあるので、たぶんページのセレクター数上限は126,945個になるんじゃないでしょうか…。確認はしてない。

HTMLにインラインで書いたCSSでも起こるのか
JSでセレクターを追加していっても起こるのか

辺りも特に調べていません。

git stash pop忘れが酷いのでzshのプロンプトにgit stash listの数を表示するを組み込んだ。zsh で Git...

Fri, 17 Feb 2012 01:22:35 +0900

git stash pop忘れが酷いのでzshのプロンプトにgit stash listの数を表示するを組み込んだ。zsh で Git の作業コピーに変更があるかどうかをプロンプトに表示する方法と合わせてこんな感じに表示するようにした。

全然分かってないまま適当に継ぎ足しました…。

Tumblrのハイライト機能を試した

Wed, 15 Feb 2012 15:54:00 +0900

$1払うとDashboard上で記事を目立たせることが出来る。前の記事で試してみた。

テキストの種類とアイコン、色を自由に選択出来る。テキストのパターンはかなりある。チェック入れた状態でポストしようとすると支払いの案内が出る。PayPalでも払える。

PayPalの支払いにしてみた。PayPalの場合1回ずつは払えず5回分からのチケットを買う形。

こんな感じにDashboardに表示される。右カラムに被る時？はリボンが左側に表示されるみたい。

Tumblrの色が黒いのは石油流出テーマです。

GumroadでTumblr Life売ってます

Wed, 15 Feb 2012 13:04:31 +0900

Tumblr Lifeを試しにGumroadで売り始めました。

Gumroad - Tumblr Life

Tumblr Lifeは無料で使えますが、気に入ったら買ってみてもらえるとうれしいです:)

Gumroadは簡単にデータを売り買い出来るサービスです。本当に簡単で面白い。これが当たり前になってくるとまた変わるんじゃないかなー。Tumblrとも相性いいと思う。まだ出来たばかりでクリエイターの方達も試しているみたいです。作品探してみると楽しいかも。

とりあえずGumroadで売ってることが分かるボタンを用意してほしい！

ついでにTumblrのハイライト機能も試してみる…。結構細かく設定出来ますね。

CP+ 2012

Wed, 15 Feb 2012 02:20:26 +0900

土曜日遅めの時間から参加。カメラを見に来るものだと思っていたら、みんなコンパニオンさんとか撮って楽しんでるのが面白かった。

ニコンブースでやっていた中井精也氏（有名な鉄道写真家）のセッションでいい発見が出来た。D4とD800の紹介だったのだけど、撮ってきた作例を紹介する時に自分で「きれいでしょー」とよく言っていた。自慢じゃないと思う。客観的に聞こえた。きれいに撮っているのではなく、きれいなものを撮っている意識なんだなぁと感じた。カメラについても、きれいな景色をより切り取りやすくなるという説明の仕方だった…気がする。

普段きれいに撮ろうと変な意識が働きがち。きれいなものを見つけて、それをそのまま撮れればいいのに。まずきれいなものを見つけるのが大変で、きれいでしょーと言えるのは本気で向き合って撮ってるからなんだなと思った。

写真を撮るってそういうことなのかも。。きれいなものなのにそれを撮る技術がない…とか言えるとかっこいい。

D4はISO感度最大20万とか言っててドラゴンボールかと思った。うちのK-7は1600でもうやばいのに。

Kindle Touchを買った

Mon, 13 Feb 2012 23:26:35 +0900

Amazon.comで先日日本からも買えるようになったKindle Touchとカバーを買った。すぐ届いてびっくり。小さい。設定して少し試しただけだけど楽しいー:D サービスと連携したりネットで端末の管理が出来るのが気持ちいい。Kindleで未読を消化するのも楽しそう。

カバーはグリーンのライト付きにした。ちょっと傷が付いて届いた（本体の方も操作した跡があったり埃っぽかったり）。気になる人は目立たない色にした方がいいかも。

静かな雰囲気が漂ってる。

Tumblr Life 1.0 Pre 8

Sun, 15 Jan 2012 23:19:18 +0900

Tumblr Dashboardを拡張するユーザースクリプト、Tumblr Lifeの1.0 Pre 8を公開しました。

Dashboardのフィルターリストを復活したのと、デザインの調整がメインになります。また、Tumblrが標準でLikeのキーボードショートカットを実装したので、Tumblr Lifeではサポートを止めました。ショートカットが以前のAからLに変更されています。

詳しい変更点。

Tumblrが標準でLikeのキーボードショートカットを実装したので、Tumblr Lifeではサポートを止めた
/tumblelog が /blog に改名されたので、それに合わせた修正
GreaseKitをサポートから外した
新しい（と言っても去年の中頃にアップデートされた）Dashboardに合わせて表示を調整
Dashboardのフィルターリストが表示されなかった問題修正

最近意外と使ってもらえていることを知る機会がいくつかあってうれしく思っています。要望や問題を発見した際はGitHubのIssuesや@ykskまでお願いしますー。

GreaseKitのサポート廃止に当たって、作者のkzysさんに今後更新の予定がないことを確認しました。今まで素晴らしいツールをありがとうございました！

pixivポップボードのキャッシュの仕組みとFacebookのUIの話

Sun, 18 Dec 2011 20:46:00 +0900

こんにちは。JavaScript Advent Calendar 2011 オレ標準コース18日目の@ykskです。

先日pixivにポップボードという通知機能がリリースされました。自分がお気に入りユーザーに追加されたり、投稿したイラストがブックマークされたりした時にヘッダーに未読件数などのお知らせを表示します。僕は直接機能を実装していたわけではないのですが、リリース直後に起こった負荷の問題でJSを書きました。今日はその話をします。主にUIの話です！え！

リリース直後、定期的に未読数の更新をAjaxで行っていた部分の負荷が急激に上がりました。ページロード時にHTMLに未読数を埋め込んだあと、2分ごとに未読数取得APIへリクエストするという処理です。

ポップボードはヘッダーに出るため、ほぼ全てのページでこの処理が入ります。複数のタブでpixivを開いて見ていた場合、その分だけリクエストも増える……そのことが原因じゃないかという話になった時、まじかよと思って自分のブラウザを確認すると複数タブで開いて見ていました。ははーん……。

具体的な対応は後述しますが、結果的には負荷の問題は解決出来ました。それよりも気付かされたのはサイトの設計の問題です。僕はこの現象をUI上のバグだと思いました。同じお知らせ機能のあるFacebookとpixivの違いを考えた時に浮かぶFacebookを複数タブで開いて見ているか？という疑問。Facebookはサイト設計にあたって複数タブを開かせないことに最適化しているのではないか。そして現状pixivは複数タブを開いた方が便利な設計になっていること、負荷になるほど一般的な方法だと思われること……。説が正しいかは別にして、思い付いてからFacebookへの見方が変わりました。チャットもアクティビティも1つのタブで全て見れるし、遷移も速い（history.pushState）。フィードに全てが流れる。不便さを感じさせないことはユーザー体験だけでなく、同じ機能を実装しようと思った時に負荷の面でもメリットになっているいい例なのではないかと思いました。逆に局所的に先進性を取り入れた結果、歪みが生じるのは避けられないことなのかもしれません。

以上UIの話でした。取り上げたUIの問題については現在製作中の国際版で解決する予定です。Railsで作っています。興味のある方一緒に作りましょう！

明日は@aerithさんがinstagramのお話をしてくれるようです。楽しみですね！以下は実装の話になります。

さて具体的な解決方法です。結論から言うと、JS側ではタブ間でキャッシュを共有して、いくつタブを開いていてもリクエスト数は一定になるようにして負荷を減らしました。

# ざっくりとしか説明していません。実際のコードはpixiv.jsで見ることが出来ます。今のところ難読化していません:)

キャッシュにはHTML5のlocalStorageを使います。localStorageがすばらしいのはブラウザ全体で値を共有出来ることです。ページをリロードする必要なく、タブ1で値を書き換えたらその瞬間にタブ2で更新された値にアクセス出来ます。この仕組みがあればキャッシュを全体で共有出来ます。

localStorageの値を監視
値の期限が過ぎていたらAPIから値を再取得して、結果をlocalStorageに突っ込む
値の期限が残っていたらlocalStorageの値をそのまま使う

これにより最初に期限が切れたタブだけがリクエストして、他のタブはその結果を使い回します。

対策した後の処理の流れです。まず、ページロード時にHTMLに入っている未読数をlocalStorageに突っ込みます。このキャッシュは2分間有効。これによって2分以内に新しいタブが開かれ続ければ常にキャッシュが生きるのでAPIリクエストは全く発生しなくなります。キャッシュの期限はsetIntervalで10秒ごとに確認します。前述の通り、古くなっていればそのタブが値の更新を担当します。まだ期限が残っていれば、値が新しくなっていないかの確認を行います。

タブを開きっぱなしにして何も操作をしていない場合を想定して、リクエストの度に間隔を4分→8分と延ばすようにしました。新しいタブが開かれると間隔はリセットされます。

タブを開いたタイミングによっては1つのタブでリクエストしている間に別のタブからさらにリクエストが飛ぶ可能性があるので、その対策も必要です。今回はjQueryのDeferredオブジェクトを使って解決しました。localStorageにロード中のフラグを立てて、フラグが立っている間に発生したリクエストにはDeferredオブジェクトを返しておきます。最初のリクエストの結果が返ればlocalStorageの期限が更新されるはずです。待っているタブではキャッシュを1秒おきに確認して、更新されたらDeferred.resolveで更新されたキャッシュの値を流してあげるようにしました。

localStorageでいくつか注意する点として、1つはlocalStorageにはCookieのように有効期限が設定出来ません。今回はこんなこともあろうかと整備してあった、localStorageの値自体に期限を設定出来るライブラリを使ってさくっと実装出来ました。抜き出すと、

function storageParse(d) {
    var data, expires;
    try {
        if (!isNaN(d)) {
            return d;
        }
        d = JSON.parse(d);
        return $.type(d) == 'object' ?
            pixiv.storage.parseExpire(d) :
            d;
    }
    catch (e) {
        return d;
    }
}

function storageAddExpire(data, expires) {
    expires = +new Date + (expires || 0);
    return {data: data, expires: expires};
}

function storageParseExpire(data) {
    var expires = data.expires;
    return expires || expires === 0 ?
        (+new Date > expires ? undefined : data.data) :
        data;
}

function storageLocalStorage(name, value, expires) {
    expires && (value = pixiv.storage.addExpire(value, expires));   
    return storageStorage('local', name, value);
}

function storageStorage(type, name, value) {
    var storage = w[type + 'Storage'], ret;

    if (!storage || !name || !$.support.json) return;

    switch (value) {
    case null:
        storage.removeItem(name);
        break;

    case undefined:
        return pixiv.storage.parse(storage[name]);

    default:
        try {
            $.browser.touchDevice && storage.removeItem(name);
            storage.setItem(name, $.type(value) == 'object' ? JSON.stringify(value) : value);
        }
        catch (e) {
            pixiv.log(e);
        }
    }
}

// 使う時はこれだけでOK
pixiv.storage.localStorage('name', value, 1000 * 60 * 60);

このような感じ。オプションを与えるだけでいいようにしておくと便利だと思います。もう1つはlocalStorageの値はサービスのログイン状態とは無関係ということです。ユーザーがログアウトした後も固有の情報がlocalStorageに残り続けてアクセス出来てしまうのは問題です。今回は未読数しかキャッシュしない上にキャッシュする時間も短時間なので利用しましたが、この制限でだいぶ利用範囲が狭まります。。実装可能か検討する際には考慮しておきましょう。最後にlocalStorageはIE 8未満では使えません。pixivではIE 8未満はサポートしない方針なので、APIリクエストによる未読数更新はlocalStorageをサポートしないブラウザでは動かないようにしました（ページをリロードすれば更新される）。

最終的にどうにかなったものの、ダメだった場合は機能自体が成り立たない可能性がありました。非同期な機能が増えると事前の予測が難しくなっていくので、問題が起こった例は共有していくといいと思います。これらの処理が必要になるサービスは滅多にないとは思いますが、何かの折りに参考になればうれしいです。

jqyery.dataset.js

Tue, 04 Oct 2011 00:09:47 +0900

https://github.com/yoko/jquery.dataset.js

前回の$.fn.dataの問題を回避するためにしばらく $.fn.attrを使っていたのですが、面倒になってきた（特に$.fn.attrではオブジェクトで値を取得出来ない）ので$.fn.datasetを作りました。

使いながらもう少しチューニングするかも。

$.dataはHTML5 datasetのラッパーではない

Mon, 29 Aug 2011 17:31:00 +0900

HTML5では要素に任意の属性を追加出来るdata-*属性がサポートされました。仕様では

<div data-foo="bar">...</div>

data-fooの値にはdiv.dataset.fooからアクセスすることが出来ます。ただしdatasetは現在一部ブラウザでしかサポートされていない。。そこでjQueryに存在する$.dataメソッドを使いましょう、という流れなのですが、$.dataをラッパーとして見た場合結構罠がありおすすめ出来ません。中途半端に対応してしまったために誤解されがちですが、$.dataはdatasetのラッパーではありません。

属性値がJSONとして解釈出来る場合、パースして返す

<div id="test1" data-json="{&quot;foo&quot;:&quot;bar&quot;}">...</div>
$('#foo').data('json').foo // = "bar"

<div id="test2" data-number="42">...</div>
$('#test2').data('number') // = 42

<div id="test3" data-null="null">...</div>
$('#test3').data('null') // = null

HTML5 datasetは全ての値を文字列として扱いますが、$.dataはJSONとして扱える場合JSONとして処理します。上の例のようにJSONテキストはオブジェクトに、数値文字列は数値型に、「null」はnullに変換されます。また、「true」と「false」は特別に真偽値に変換されます。

このためユーザーの入力値をdata-*属性に入れている場合、処理内容によってはセキュリティ的に問題になったり、文字列のみが返る想定で作っているとJSのエラーを引き起こす可能性があります。TwitterのポストIDのように極端に桁が大きい数値文字列は、この型変換で丸められて正常に取得出来なくなってしまうかもしれません。

元々jQueryは独自に要素にデータを持たせる仕組みを持っており、HTML5でdata-*属性が仕様化された後に「data-*属性にデフォルト値を指定出来る」扱いでdata-*属性の値取得をサポートしました。データそのものの扱いはjQueryの以前からの仕組みのままです。そのため、1.6.2現在でも$.dataで書き込んだ値にDOMからアクセス出来ないなど、単純に属性値を読み書きするメソッドとして考えるのは無理があります。

このような状況なので、使うならば仕様を良く理解した上で、data-*属性の内容が任意の場合やパース処理が余計な場合には$.dataを使わずに単純に文字列で入出力するメソッドを作るのがいいと思います（$.attrも使える）。先に触れたように誤解されやすいので、jQueryに$.datasetメソッドが新設されてもいいかもしれないですね。プラグインはあるようです（ただしこのプラグインは$(element).dataset('fooBar', 123)をdata-foobar属性に書き込む。仕様に合わせる意味でdata-foo-barに書き込まれるのがベターだと思うし、最新のjQueryではそうなっている）。

HTML5 Dataset jQuery Plugin

自前でjquery.dataset.js作りました。

IEメモ

Wed, 24 Aug 2011 22:17:54 +0900

localStorageで容量限界近くになると書き込み処理でout of memoryが起こる

IE 8で確認。9ではチェックしてないです。全く書き込みをしない

localStorage.foo = '';

でも起こる。が、必ず起こるわけではない。別の書き方で

localStorage.removeItem('foo');

とすれば再現しなくなった。直接代入するのは止めた方が良さそうな気配。ついでに気付いたのが、代入して容量オーバーになった時のエラーはメモリが不足しています。（とout of memoryのアラート）、setItemを使った時のエラーはこの操作を完了するのに十分な記憶域がありません。と内容が変わること。やはりメソッドを経由した方が良さそう。

確認してないけどsessionStorageも同様な気がする。

固定サイトの挙動

IE 9で追加された固定サイト機能。

固定サイト: Windows 7 デスクトップの Internet Explorer 9 との統合

meta要素に設定を書くのだけど、その設定はmsapplication-starturlのURLに見に行っているらしい（今開いているページに同様の記述があっても）。指定したURLがリダイレクトしていると設定がいつまでも反映されずに、例えばタスクの定義が反映されなかったりしてハマる。

あとタスクバーにショートカットを置いた際に大きなアイコンが必要になったので、faviconをX-Icon Editor（紹介記事は複数サイズに対応したアイコンエディターが公開されました (HTML5 アプリ) - Shigeya Tanabe’s blog - Site Home - TechNet Blogs）で作ったらIE 8で壊れて見えるアイコンが出来て泣いた。Safariで作ったからかな…。