アップデート可能なブックマークレットの作り方

ブックマークレットというと化石のように言われたりもするが、他人のサイトを便利に使うのには一番手軽な方法だと思うので、積極的に活用していきたい。 そして、いざ作るとなると説明が書かれているのは化石のようなサイトが多いので、ナウな構造はソースを参考にするしか無かった。 これは、最近のブックマークレットを参考に、アップデート可能なブックマークレットを作った記録。

GyazzA(C)というのを作った

GyazzというWikiの見た目をスライドにするためのブックマークレットを管理している。 http://gyazz.com

github.com

書いて捨てるようなプレゼンテーションの時は、メモ書きがスライドになるので便利に使っている。

これが

こうなる

「やったースライドにするブックマークレットできたよー」の後にも色々と機能追加やらバグ潰しやらしてて、 そうなるとブックマークレットのjavascript自体をメンテ可能な記述にする必要が出てくる。

（数人の）使ってる人に「更新したんでブックマークレット変えてください」と言い続けるのはメンテに精神を消耗するので、 結果的に気軽にメンテできるコードになった

// minify前
javascript:
  (function(){
    var%20a; // %20はスペース
    a=document.createElement("script"),
    a.setAttribute("src","https://nekobato.github.io/GyazzAC/gyazzac.js?time="+Date.now()),
    document.querySelector("head").appendChild(a)
  }).call(this);

スクリプト本体は外部から読み込んで挿入する

手軽なスクリプトならともかく、Wikiをスライドにするような量のスクリプトを全てブックマークレットに書き込むのは無理なので、基本このスタイルになると思う。

自分のサーバで配るのはやめた

最初はhttp://gyazzac.nekobato.net/***みたいに管理していたのだが、 ブックマークレットのために自分のサーバの管理労力を裂くのは馬鹿らしくなってやめた。 gh-pages最高

?time="+Date.now() とは

読み込み先でこの変数を使っているわけではない。 普段のサイトならキャッシュを手動で避ける方法がある（ChromeならShift+更新とか）が、ブックマークレットにはそれがない。 なので、常にキャッシュを使わず読み込むためにこんなクエリを付けている。

静かになった管理

これでようやく 「死んだ？ああ、更新したんでこっちが最新です」とか 「スタイルが当たらない？それキャッシュですね」とか 言わずに済むようになった。

作って投げてそれで済むのが一番いい。