ブックマークレットを使ったJS検証環境構築

ウェブアプリの検証環境としてSafariを使うかChromeを使うか悩ましいところがありますが、近年では装飾用と機能用と用途に分けて使っているような気がします。その装飾、特にCANVASやCSSアニメーションなどの外部JSファイルを検証するのにいちいちHTMLファイルを雛形として用意していないでしょうか。そんな時ブラウザのブックマークレットを使えば検証作業がもっと楽になりますよ!(今回はテレビショッピング風で)

準備:

  1. 次のブックマークレットを作ります。{path2File}は検証するJSファイルまでのパスを入れてください。
  2. ブラウザで localhost を開きます。
  3. 1のブックマークレットを実行します。

特にSafariブラウザはタブ設定でコマンド+数字のショートカットキーをブックマークレット実行に割り当てることができるので、手順2をブックマークレットにすることを含めて、二つを左からN番目に配置して、検証の都度ブックマークレットをショートカットで呼び出すと余計なファイルを作る手間も省けて大変便利です。

もちろん検証する内容にショートカットに使うキーイベントが含まれていたりすると問題が起きるのでご注意ください。

最後に CANVAS による描画を検証する Bookmarklet_Loader.js のサンプルコードも紹介しておきます。

投稿者: hkitago

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし(Golang学習中)、Bind, Postfix, Apache を MacOS で使い、エディタは Vim, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio, Atom といった IDE と CotEditor を重用しています。座右の銘は「アウトプットは量多い方がいい。フィルタは各自がやればいい。」です。