JavaScript / bookmarklet / その周辺 の話 ​

今日は、先週のバータイムで従業員が話した 「js/bookmarklet芸およびその周辺」 についてお伝えします。

話したこと ​

概要 ​

  1. JavaScript / UserScript / Bookmarklet / UserStyleについての説明
  2. どんな風に作るのか / 社内外でどんなものを作ってきたか

モチベーション ​

「Webサイトの挙動・見た目 をいい感じに変えたい！！」

それぞれの違い ​

  • ● Bookmarklet: ブックマークから 実行する感じの JS * * ブックマークの中に直接JSが書かれている
  • ● UserScript: ページ上で 自動 実行される JS をユーザー定義できるやつ * * ただし、Tampermonkey などの拡張機能をブラウザに入れておく必要あり
  • ● UserStyle: ページに 自動 挿入される CSS をユーザー定義できるやつ

作り方はどうなの ​

(a) UserScript ​

実装：

  • ● Tampermonkeyなどのプラグインを入れ、エディターを開いてスクリプトを書く
  • ● @matchの後ろにそのUserScriptを実行するURLパターンを書く

共有：

  • ● 多くのUserScript拡張は .user.jsな拡張子のページを開くと、「インストールしますか？」と尋ねてくる
  • ● ので、GitHubなりなんなりでそういう拡張子を付けて公開すればよい

(b) Bookmarklet ​

実装：

  • ● スクリプトの頭にjavascript: をつけたURLを組み立てたらおしまい
  • ● undefinedを返す ようにする（void関数やIIFEが簡単）
  • ● 余分な文字を消して一部文字をエスケープする

共有：

  • ● javascript:… なURLを教えてもらっても、ブックマークするのが地味に面倒
  • ● URLをテキストリンクで配置して、ブックマークしてもらうのが定番
  • ● Hatena::Letとかもあるけど、packerが古いので最近のJSは壊れる

作ったもの ​

画面録画ブックマークレット

  • ● ブラウザ上の操作を録画するブックマークレット
  • ● ブックマークレットをクリックして起動→録画→録画終了時にファイル保存ダイアログが出て動画で保存可能
  • ● AnnoFabを操作した時のエラー報告で大活躍！

いかがでしたでしょうか。 社内では、技術が好きな社員がワイワイやりながらTechトークに花を咲かせることもあります。

会社のことが気になりましたら、ぜひ採用応募ページをご覧ください。