Screw-Axis » 開発

[Jetpack] 表示中ページのブックマーク数を自動表示

nao58 — Fri, 19 Jun 2009 20:37:52 +0000

まだまだテスト段階のJetpackですが、折角なので遊ぶだけでなく、何か役に立つものを作りたいなと思いやってみました。

使ったのは、v.2から実装されたスライドバー。ここに、現在表示中のページに付けられているブックマークを表示します。
「このページ、どのくらい注目されてるのかな？」と思った時に、割と手っ取り早く分かって便利なんじゃないかと。
現時点で対応しているのは「はてなブックマーク」と「livedoorクリップ」だけです。

概要

Mozillaが開発中のFirefoxプラグイン、Jetpackを用いて作ってみたブックマーク表示ツールです。

左側に開いているのグレーのエリアが、今回作ったFeature。ここに、現在のページのブックマーク数が表示されます。

自由に開け閉めできますが、開きっぱなしにもできます。タブの移動やページ遷移でもチェックに行くので、鬱陶しかったら閉じてしまうのが良いかと。

インストール方法

まず、なにはともあれJetpackをインストールしてください。

次に、Social-Screwをインストールします。
上記リンクを辿った先のページにFirefoxでアクセスすると、ページ上部にインストールを促すバーが表示されます。ここで”Install…”ボタンを押すだけです。
しかし何分非公式のサイトなので、非常に危なそうな警告ページが表示されてしまいます。しかしここは気にせず、ページ下部の”I know what I’m doing. Install it!”をクリックしてください。

これで完了のはずです。
プラグインの設定やタブの表示位置によって若干異なるのですが、概ね左上あたりに青い矢印が表示されているでしょうか？これがスライドバーの開閉スイッチになっています。
マウスを近づけるかクリックすると、左端が少し開いてネジの頭が表示されると思います。(先ほどのスナップショットでも見えます)
これをクリックすると、表示領域が開きます。閉じるには、先ほどの青い矢印をもう一度クリックします。

コード

githubにホスティングしておいたので、興味のある人は見てみてください。
試行錯誤しながらだったので綺麗なコードとは言いがたいですが、100行ちょっとの短いコードです。
Jetpack APIリファレンスやjQuery日本語リファレンスなどと併せて見れば、簡単に読めると思います。

今後の展開

本当はtomblooのような、ここから投稿まで出来るツールを作りたかったのですが、ID/PWDをセキュアに保存する良い方法が無かったので、断念しました。
自分個人用ならjetpack.storage.simpleで保存してしまっても良いのですが、公開するとなるとさすがに…
それこそtomblooのようにAPIを認証させて使うのではなくPostをエミュレートするような形で実装するのが良いのかもしれませんが、そこまでやるパワーは無く。

結局、単純にブックマーク数を表示するだけのものですが、これはこれでと思います。
# これを作ってみて、世の中変な人が多いことに気づきました :-p

本当はdeliciousを入れたかったのですが、URLをJavascriptでMD5にするのがメンドウで、今回はパスしました。Y!は基本的にはAPI公開してないし。もし要望があれば考えます。

注意事項

冒頭でも書きましたが、Jetpackは未だ実験段階の機能です。
動作の怪しい部分は多々ありますので、導入する場合はあくまで自己責任でお願いいたします。

[jQuery] スピンボタンで数値入力補助

nao58 — Sat, 13 Jun 2009 14:52:59 +0000

自作のjQueryプラグインを追加しました。
最近むしろあまり見なくなった(?)スピンボタンインターフェースをWebフォーム上に簡単に実装するためのプラグインです。

実はこちらのプラグインは新作ではなく、1年以上前からjQuery本家公式リポジトリとGoogle Codeで公開しています。
意外なことに地味に好評で(特に海外で)、ダウンロード数も確認できるだけで累計で2,000を超えていました。バグ報告や機能追加要望も幾つかもらっていたのですが、多忙を言い訳にひたすら放置してしまっていた可哀想な子です。
今回、利用している方からメールをいただいて急にやる気が出て、ついでにgithubにプロジェクトを作ったりしながら大幅にバージョンアップして、日本語のページも用意した次第です。
今まで不便をかけていた方には、本当に申し訳ありませんでした。

jQuery 自作プラグイン3 “Type-Writing Hint”

nao58 — Fri, 15 May 2009 16:08:44 +0000

続けて3本目。jQuery Type-Writing Hintです。

こちらも、作者の方で紹介ページなど作る前にskuare.net様でご紹介いただいており、大変ありがたいのですが。

「ちょっとうざい」

ええ、自覚しておりますとも。
ちょっと新しいかなと思って作ってみたのですが、正直言って、スパム広告の一部みたいに見えたりします。
おかげさまでGoogleで「jQuery ちょっとうざい」と検索すれば一番に出てくるようになりました。
ま、それも味かなと思って、とりあえず並べておきます。

それなりに工夫している点もありまして、最たるものは、普通にJavascriptを操作しても入力ヒントが文字列とみなされないこと。
何も考えずにこのテのものを作ると、例えば
alert(text.value);
のように書いても、実際はユーザは何も入力していないのにヒント文字列が表示されてしまったりすることがあります。
# WordPressの管理画面にある「新規タグの追加」なんかもそうですね。黙って「追加」を押すと、「新規タグの追加」というタグが出来ます。
それがコイツは、ちゃんとヒント文は空文字として、手で入力した文字はそれとして、認識されます。
このプラグインを見たカナダの会社から仕事のオファーをいただいたり、なかなか頑張ってくれた子です。

jQuery 自作プラグイン2 “Spectrum”

nao58 — Fri, 15 May 2009 15:24:02 +0000

その2といっても昔作ったものを持ってきている順番ってだけなんで、実際は何作目だったか。
しかしSpectrumは、その中でも割と気に入っているものです。

これは、ある要素から他の要素に向かってスペクトラム光線を飛ばすという…見てもらった方が早いと思います。
以前、このプラグインをtwitterで紹介してくれている人が居たのですが、彼曰く “kewl, but hard to explain” っちゅーことで。

この動きには元ネタがあり、実のところ昔からお気に入りのTiddlyWikiのインターフェースを再現したくて作ったものでした。
現在はバージョンアップしてこの動作も見られなくなってしまいましたが、昔の方がカッコよかったなと思います。
とはいえ、大筋のデザインはリリース当初と殆ど変わっていません。未だに風化した感じはせず、やはりセンスの良いデザインだなと。

ところでこのプラグイン、私の周囲では「スペクトラム」が呼びにくいのか、「シュパ」で通っています。
極めて個人的には何かシックリ来ないのですが、いかがでしょ。

jQuery Puffyの日本語ページ作成

nao58 — Thu, 14 May 2009 04:53:50 +0000

オリジナルのjQueryプラグイン、「jQuery Puffy」の日本語ページを作ってみました。

パフッと画像が広がって見える、エフェクト系のプラグインです。

実は公開したのは4月で、githubが半自動で作ってくれるショボい英語ページは置いておいたのですが、やはり折角なので体裁を整えておこうかなと。

そうこうしているうちに、気がついたらskuare.netさんで先んじて紹介いただいていました。認知経路としては本家のプラグインリポジトリかgithubしか無いはずなんですが、目ざとい人が居るものですね。ありがとうございます。

このプラグインはjQuery UIが元々持っている「Puff」を使ったものだけに非常に簡単で、総制作時間は1時間もかかっていないと思います。
このページを作るほうがよっぽど大変でしたが、何かのお役にたてば。

他にも幾つか作ったもの/作りかけているもの/作ろうとしているものがあるので、今後はこのサイトを中心に公開していければと思っています。

偏頭痛で会社を休んでいる間の、ちょっとした作業でした。