こんにちは、フロントエンドエンジニアのライダーです。もう、秋が目の前ですね！
先月、CodePenにまつわる記事を執筆・公開しました！
CodePenをもっと便利に使うための設定とTipsを紹介します！
ライダー
この記事を見ていただいた方はどのくらいおられるでしょうか？ こちらの記事で紹介したTipsのうちのいくつかを、実際にブックマークレットの開発と配布に応用してみます！
ブックマークレットとは？
ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである (Wikipediaより)
「おすすめ ブックマークレット」などで検索すると、あなたのインターネットライフにぴったりな良いものが見つかるかもしれませんが、見つからないかもしれません。
ブックマークレットを作ろう
めぼしいブックマークが見つからなかった？ ……エンジニアたるもの、ないものは作りましょう！
それでは作りながら見ていきましょう！
今回作るものはこちら！
See the Pen Bookmarklet LIGblog DEMO by rider (@mtmtkzm) on CodePen.
［LIGブログを沈める］ボタンを、ブラウザのブックマークバーまでドラッグアンドドロップしてみてください。
あとは適当なページでそのブックマークをクリックし起動するだけ。
夏も終わる頃ですが、LIGブログが涼しげな感じになりましたでしょうか？
（PEXELSより）
開発の流れ
ブックマークレットの開発は、だいたいこんな流れになります！
「① アイディアを思いつき」
「② 開発を進める」
「③ ブックマークレットのお作法に合わせ」
「④ ユーザに配布する」
のうち、少し面倒な ③、④ を一挙に解決できるのがCodePenでした👏
具体的には、
- ブックマークレットの文字数制限を回避できる
- バベれる(CoffeeScript, TypeScriptなども！)
- サスれる(LESS, SCSSなども！)
- 配布用の説明が不要・楽になる
などができるようになります。
開発を進める
CodePenでは、プレーンなCSSやJavaScriptだけでなく、BABELやSCSSなどを使いコードを書くことができます！
思いついた処理をひたすらに書き連ねていきましょう！
この記事では、処理の詳細は割愛します。気になる方はCodePenの内部をのぞいてみてください！
ブックマークレットのお作法に合わせる
機能を開発し終わったら、ブックマークレットのお作法に合わせる必要があります。最低限、次のような形式にする必要があり、ブラウザによって文字数の制限があったりもするようです。
javascript:(function(){ ここに処理を書く })()なので、比較的大規模なブックマークレットでは、そのメインとなる処理自体は外部ファイルとして準備しておきます。ブックマークとして登録する部分では、その外部ファイルを読み込む処理を記述しておきます。その具体例がこんな感じです↓
javascript:(function(){var s = document.createElement('script');s.src='[外部ファイルの場所（URL）]';document.body.appendChild(s);})()作ったブックマークレットを配布する
これまで、ブックマークレットを配布しようと思うと、それ専用のサイトを作るか、「ブックマークレットを登録してね」という説明付きでコードを渡したりする必要がありました。
しかしながら、コードペンのHTML箇所に a要素を配置しておけば、そのURLを共有するだけで簡単に配布することができます！
配布された人は、ブックマークバーにドラッグアンドドロップするだけでOKです！
なにより開発と配布を同時にできるのが良いですね！
おわりに
ブックマークレット、意外と知らない・活用できていないという方が多い気がしています。地味なツールという雰囲気がありますが、個人的にはまだまだ使い道がある気がしています！ 開発者が増え、便利なブックマークレットが増え、ブックマークレットを使う人が増え、良い連鎖となれば良いですね！
もしCodePenを使って良いブックマークレットができたら、ぜひ教えてください！
それではみなさん、良きインターネットライフを！ Internet Life is Good！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
