##そもそもだ
なんでこれやろうと思ったんだ？というところなのですが。ニコ動の動画情報を加工してEvernoteに保存するってのをやりたくて。で調べてたらGoogle機能拡張だったら中身JavaScriptだしなんとかなるかなぁと、安易に手を出して挫折して（をい）。
さてどうすんべかなぁと調べてる最中に、やっとこさBookmarkletの存在を思い出したという体たらくでした。ガチで存在忘れてた。すまん。誰に謝ってるんだ＞俺。
というわけで。
ニコニコ動画視聴ページから動画情報を抽出する(Bookmarklet版)
実物置いときますね中身興味ない方はバイバーイ。
って技術メモでウケを取ろうとするな＞俺。悪い癖です。
#Bookmarkletを作ってから
本題。Bookmarklet作るところは特に何の問題も無かったんです。
ブックマークレットで jQuery を使う魔法の 210 文字
こちらの記事を参考にjQuery使うこともできましたし。Chrome上ならばコンソールにコピペで突っ込めば即実行確認できますし。
それよりはむしろ作り終えてから、の方に時間を費やしてしまいましたので、その備忘録を。
自分の場合、元ソースがChrome機能拡張（の残骸）からだったということもあって（こんな感じで）、特にBookmarklet向けに気をつけながらソースを書く、ということをやってませんでした。ですので改めて、そのソースを加工して、Bookmarkletに仕上げなければなりません。
その手順。ミもフタもありませんがこれ使います。
[Closure Compiler](Closure Compiler Service)
Google様ご提供。こちらにコピペしてCompileすりゃいいだけなのですが、注意点がふたつ。
- OptimizationでWhitespace onlyを選択する
- 「魔法の210文字」を使ってる場合は、その文字列をコピペの対象から外す（コンパイラを通さない）
特に後者が重要で。ここに気付けずに随分とハマりました。「魔法の210文字」は既に圧縮された状態のコードなので、ここにさらに圧縮かけてしまいヘンなことになっちゃったのかなぁ・・・と自分勝手に推測してますが。根拠はありません。エヘン。威張るな。
Compileが完了したら画面右側に内容表示、あわせて"default.js"のリンクが出てきますので、それをエディタにコピーします。
んでもってあとは手作業。
- さっき外した「魔法の210文字」をもう一度付加する
- 全改行を除去して１行にする
- 先頭におやくそく"javascript:"を付加する
ここまでやればBookmarklet完成でーす。自分専用、でしたら。
##公開するにもうひと手間
いわゆるアンカーやボタンに乗せるためにはもうちょっと手を加えなければなりません。いわゆるURIエンコード。Closuer Compilerによって日本語などは既にエンコードされているのですが、足りないのがふたつ。
- 半角スペースを#20に置換
- ダブルクオーテーションを#22に置換
これをやる必要がありまーす。ソース次第によっては余剰(%)なんかも要対策かな？
自分はエディタでちまちま置換かけました。割とめんどくさし。
ここまでできたらテスト用のHTMLでもでっちあげて、リンクかボタンにソース突っ込んで・・・で動作確認して。やっとこさ完了でーす乙乙。
##蛇足
という訳で、新しいのか古いのかよくわからんBookmarkletなのですが。jQuery使えるってのはいいよねぇ。素のJS書く気力無いもんねぇ（堕落）。
Chrome拡張機能周りはマルウェアアドウェア山盛り祭りが現在進行形で開催中ですから散々な言われようなんですけど。こちらもうまく使えばそこそこいろいろできるんですよね。特にUIが必要だったりするとBookmarkletではさすがに力不足ですし。API追いかけるのはめんどいけどね。
一方で今回自分が作ったもののような「単一機能」かつ「乱暴な挙動」を行う類の場合は、Bookmarkletの方が身軽ですね。向こうのUIぶったぎる罪悪感も多少は薄れますし。
まぁ使い分けということなのでしょう。どっちもjQuery使えますしね。両方使えるようにしておくと、諸々よろしいかと思いまする。