読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

jsdo.it用QRコードメーカーをつくりました

jsdo.it

コードの検証を行う際、jsdo.it をつかうことが多いのですが、そのURLをスマートフォンに渡す際はいつも手打ちしていました。
流石にめんどうなので、URLをQRコードに変換しようと思ったのですが、 jsdo.it には、

  1. コード編集は jsdo.it で行われるが実行は jsrun.it で行われる
  2. 編集中は URL に /edit がつく

という仕様があるため、実際のURLと開いてほしいURLが食い違うことが良くありました。
なので、この2点をクリアすべく、jsdo.it を jsrun.it に置換しつつ、最後の /edit を取ったうえでQRコードを生成するブックマークレットを自作してみました。


DEMO

※ リンクをブックマークバーにドラッグ&ドロップしてご利用ください
※ Google Chromeでしか検証していません


JavaScript

(function() {

  "use strict";
    
  var hostname = location.hostname,
      pathname = location.pathname,
      port     = location.port,
      hash     = location.hash,
      search   = location.search,
      url;

  if (/jsdo\.it$/.test(location.hostname)) {
    hostname = location.hostname.replace(/jsdo\.it$/, "jsrun.it");
    pathname = location.pathname.replace(/((?:\/[^\/]+){2}).*/, "$1");
    search   = "";
  }
   
  if (port) {
      pathname = pathname.replace(/\/$/, "") + ":" + port + "/";
  }
    
  url = _fixedEncodeURIComponent(location.protocol + "//" + hostname + pathname + hash + search);

  window.open("https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl=" + url);

  function _fixedEncodeURIComponent(str) {
    return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
  }
    
})();

若干頭を悩ませたのが、 /edit を取るところで、
ユーザー名や、作品タイトルにeditが使われる可能性も0ではない点を考慮してつくりました。
つまり、

  1. jsdo.it/edit/
  2. jsdo.it/edit
  3. jsdo.ti/edit/edit/
  4. jsdo.ti/edit/edit
  5. jsdo.ti/edit/edit/edit/
  6. jsdo.ti/edit/edit/edit

の5と6の場合、最後の edit(edit/)を取るということを行っています。
わりかし便利に検証できるようになりました。