こんにちは、鈴木俊吾（すずしん）です。
先日、独学でプログラミングを学んできた話と、最近感じている「バイブコーディング」への葛藤という記事を書きました。あの記事の中で、「本来なら自力でできるところは、自分で実装したい」という気持ちがある、という話をしたのですが、今回はその実践として、小さなツールを一つ作ってみました。
Card Codex・オーバーライドに続く、「SUZUSHINLAB Studio」の3つ目のアプリ、「ブックマークレットメーカー」です。
どんなツールか
JavaScriptコードを入力すると、それを1行に圧縮して、ブックマークレット（ブラウザのブックマークバーに登録して、クリック一つで実行できる小さなプログラム）に変換してくれるツールです。
同じようなツールは既にいくつか存在するのですが、正直、大きな需要があるジャンルというよりは、自分の学習の延長として手を動かしてみたかった、というのが一番の動機です。SEOで集客するというより、Card Codexやオーバーライドと同じ「作ってみたシリーズ」の一つとして捉えてもらえたらと思います。
機能はいたってシンプル
- JavaScriptコードを入力欄に貼り付ける
- 「IIFEで囲む」（グローバル変数を汚染しないための書き方）をオン/オフできる
- 「ブロックコメントも除去する」をオン/オフできる
- 「ブックマークレットを作成」を押すと、1行に圧縮されたリンクが生成される
- 生成されたリンクは、ブックマークバーに直接ドラッグして登録できるほか、コピー用のテキストとしても取得できる
処理はすべてブラウザの中だけで完結していて、入力したコードがどこかのサーバーに送信されることはありません。
試しに使える、簡単なコード例
「JavaScriptコードと言われても、何を入れればいいか分からない」という方向けに、そのままコピペして試せる例を一つ置いておきます。テキスト欄に貼り付けて「ブックマークレットを作成」を押すだけで試せます。
ページの色を白黒にする
document.documentElement.style.filter = "grayscale(100%)";作ってみて気づいた、地味に重要なバグ
最初に作った時は、「コメントを除去する」というチェックボックスを一つだけ用意して、オフの場合は行コメント（//）もブロックコメント（/* */）もどちらも一切除去しない、という作りにしていました。
ところが、これだと地味に厄介な問題があることに、作った後で気づきました。
このツールは、複数行のコードを1行にまとめるために、改行を半角スペースに置き換えています。ここで、もし行の途中に// コメントがあると、1行にまとめた瞬間、//から後ろの文字列が全部「同じ行」になってしまい、それ以降のコードが丸ごとコメントアウトされてしまうんです。
つまり、コメントを書く習慣がある人ほど、知らないうちに壊れたブックマークレットを作ってしまう可能性がある設計になっていました。
これに気づいてからは、行コメント（//）は常に自動で除去し、（/* */）で囲むブロックコメントの除去だけを任意のオプションにする、という形に直しました。「機能を削る」のではなく、「常に必要な処理と、任意の処理を分ける」という発想の転換が必要だったポイントです。
もう一つのつまずき：WordPressへの投稿が403で弾かれた
これは余談なのですが、このツールを紹介する固定ページをWordPressに投稿しようとしたら、なぜか403エラーで弾かれました。
原因を調べてみると、サーバーのセキュリティ機能（WAF）が、ページ本文に含まれていた「javascript:」という記法を、攻撃のパターンとして検知してブロックしていたことが分かりました。正当な説明文だったのですが、機械的に見ればいかにも怪しい文字列だったわけです。
表記を「ブックマークレット用のリンク」のように書き換えることで、無事に投稿できました。地味なところで、こういう発見があるのも独学の面白いところだったりします（ちなみにこの記事自体も、同じ理由で一箇所書き方を工夫しています）。
実際に使ってみてください
「ブックマークレットメーカー」は、SUZUSHINLAB Studioのページから使えます。
大きく需要があるツールではないかもしれませんが、Card Codexやオーバーライドと同じように、実際に使ってみて気になったところがあれば、少しずつ育てていこうと思います。
独学でプログラミングを学んできた話の延長として、これからも「作ってみたシリーズ」を増やしていく予定です。それでは、また次回の記事でお会いしましょう。
コメント