ブックマークレットサービス・Hatena::Let を作りました

ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。

未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。
ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿*1で作って眠らせていたのを、ちょっと週末手を入れてリリースしました！

以下に Hatena::Let の便利な所をピックアップしてみました。

Debuglet で開発しつつ実行

作成時、Debuglet というブックマークレット開発用のブックマークレットを入れることで、Web 上の編集フォームで編集(リアルタイムでサーバに保存されます)している JS を実行できます。
またこの Web 上の編集フォームは、ブラウザの JS パーサを利用してリアルタイムで JS の Syntax をチェックしており、間違った文法を入力すると背景がピンクに変わります。

@require で外部 JS ファイルをロード

ブックマークレット利用時、jQuery などライブラリを利用したいと思ったことはありませんか！？そんなときはあら不思議！@require に読み込みたいJSのスクリプトを記述するだけでスクリプトを読み込んでくれ、なおそのライブラリの読み込みが終了したら記述したコードを実行してくれるのです。
通常ブックマークレットで外部スクリプトを読み込んだ後に JS を実行したい場合は

  • スクリプトを読み込み
    • 読み込み完了を正確に調べるには、onload (IE以外) や onreadystateschange(IE) でチェックが必要
  • 別のスクリプトがある場合はまた逐一読み込み
  • 全部ロードし終わってから実行

とめんどくさいコードを書く*2必要があるのですが、それらは @require http://.../example.js と書くだけで完了で超お手軽です。
また @require http://.../example.css と書くと css も適用してくれます。

コードを圧縮、文字が多いときは外部ファイルとしてロード

まずブックマークレットとして書いたコードは JavaScritp::Squire を使い圧縮され、IE のアドレスバーに打ち込めるの文字数限界以下の時は javascript:(圧縮されたコード) の形で出力されます。
しかし文字列を圧縮してもIE限界文字数を超える場合は、外部 JS ロードとしてロードするコードに自動で切り替わりブックマークレットが作成されます。

プライベートなブックマークレットとして利用

公開する以外にも、@private と記述することによりプライベートなブックマークレットとして利用ができます。なおこの @private によるプライベートは『URL が他の人は直接アドレスが解らないと閲覧できない』プライベートであり、permalink に直接アクセスすると誰でも閲覧ができます。そのため、知り合いとだけ利用するブックマークレットの作成などに利用することができます。

はてなダイアリー・グループでも利用できるウィジェット機能

作成したブックマークレットには、iframe 形式のウェジェットが表示されます。これを自分のブログやはてなダイアリー・グループに張ることでかんたんにブックマークレットの公開ができます！
はてなダイアリーでは今までセキュリティの問題から javascript スキームを使ってのブックマークレットの公開ができませんでしたが、Hatena::Let を使うと安全なドメイン *3 にブックマークレットが置かれるために利用することができるようになりました。

例: はて☆すた を Hatena::Let で書き直してみる

以前作ったはて☆すたというブックマークレットを Hatena::Let で書き直してみます。 元のソースはコレ。

まず SWFObject という swf 書き出しのためのライブラリを読み込んで、その後 window.SWFObject があるかどうかを setInterval でチェックしつつ自前の処理を開始します。また他のライブラリはよみまずに、地道にで座標計算や scroll の調整を行ってますね。
今回は SWFObject は @require で読み込んで座標計算などは jQuery に任せましょう。するとライブラリ読み込み処理は頭のコメントのメタデータに書くだけですね。あとはいつもの通り普通にコード書けば完了です。スコープは自動で無名関数内部で実行されるので、自分で(function(){})(); とか書く必要はありません。
できたソースコードは以下です。だいぶシンプルになりましたね。

またはてダにもこんな感じで貼り付けることができます。わお、かんたん！

以上、公開した Hatena::Let の紹介でした。便利だと思うので、開発者の方は是非使ってみてください！

*1:はてな恒例の開発合宿。サービスのアイデアを2-3日の合宿で実装します

*2:以前 [[http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title]]という汎用的な loader を書いてみました

*3:let.st-hatelabo.com というはてなの認証情報を一切利用してないドメイン