基礎の基礎を一通り勉強したところで、次はブックマークレットの作成に挑みました。Scrapboxのページに書き込むものです。

　というのも、Scrapboxの特定のページに追記する（またはページを新規作成する）にはURLに文字列をくっつけて開けばいいと知ったので、それなら「ブックマークレットの書き方」さえ解ればすぐ実用的なプログラムができるだろうと思ったからです。

　

　それがどのくらい簡単なことかというと、最終的にwindow.open('https://scrapbox.io/:project/:page?body=:textの形の一文を実行できればいいのです。そのために必要なのは:textの部分の文字列を用意することだけです。書き込みたい文字列を作って、この一文に入れて実行させる。それだけなら全然難しいことはないわけです。

　なおブックマークレットは、JavaScriptで即時関数（読み込むと同時に実行する関数）を作って頭に「javascript:」をつけ、ブックマークのURL欄に設定することでクリック時に実行できるようになります。

　例えば以下の一文を登録して実行すれば動作の確認はできます。「:project」の部分には書き込みたいプロジェクトのURLを入れてください。「test」というページに「abc」と書き込まれます。「test」というページが既にあって編集日時が更新されると困るというような場合は、適当な英数字に変えて試してください。

javascript:(function(){window.open("https://scrapbox.io/:project/test?body=abc%22)%7D)()

　ブラウザによってはポップアップのブロックで動かない場合があります。その場合は「https://scrapbox.io」のポップアップとリダイレクトを許可すれば動くと思います。（Chromeの場合→Chrome でポップアップをブロックまたは許可する - パソコン - Google Chrome ヘルプ）

　これは、「window.open(url)」というメソッドを「(function(){ })()」で囲って即時関数にし、頭に「javascript:」をつけてブックマークレットにしているわけです。

　なおこの例では半角英数のみなので単純にURLを入れていますが、日本語や記号などはそのまま入れることができず、エンコードが必要です。エンコードは「encodeURIComponent()」というメソッドを使います。基本的に常にこのメソッドを通して設定することになります。

javascript:(function(){window.open("https://scrapbox.io/:project/%22+encodeURIComponent(%22%E3%83%86%E3%82%B9%E3%83%88%22)+%22?body=%22+encodeURIComponent(%22%E6%9C%AC%E6%96%87%22))%7D)()

　これをブックマークに登録すると（:projectの部分は変えてください）、クリックするたびに「テスト」というページに「本文」が追記されます。

　

　実用的なブックマークレットを作成するにあたっては、ページタイトルと本文部分について、window.open()の手前に処理を加えて希望の内容を作ることになります。その処理によってブックマークレット実行時に自動で文字列を生成し、複雑な内容のページをScrapboxにワンクリックで作ったり、または既存ページに追記したりできるようになるわけです。

　例えば、今日の日付のページにダイアログボックスを通じて文字列を追記するとすればこんなふうになります。

https://gist.github.com/nora-tetsu/ace95fcf7d15612b4f1a23339dbf5f45

　一番下のコメントアウトされている部分がブックマーク登録用のものです。登録して実行すると、まずプロジェクトURLの入力を求められ、次に文字列の入力をすることになります。（自分で使うにはプロジェクトURLの入力は煩わしいですが、例として誰でも使えるようにするために入力する形にしています。）

　同様に今日の日付のページに、今度は現在開いているページを追記するなら以下のようになります。選択範囲があれば引用記法で追記されます。

https://gist.github.com/nora-tetsu/5f649fa7eef9dbb4042ab68c1ce64659

　

　JavaScriptに詳しくなればブックマークレットによって相当複雑なことができるようになりますが、最初のうちはそんな高度なことはできません。（私は現時点でも大したことはできません。）

　Scrapboxへのページ追加は、最低限ブックマークレットとして動かすために必要なことが非常に少ないので、練習にはうってつけでした。本文部分の文字列を作るコードを少しずつ複雑にしていくことで、データの扱いや各種メソッドを覚えていったのです。

　そして、Scrapboxの特定のページの作成・追記だけでも色々可能性は広がると思います。何より、UIに沿って手動で行うアナログな入力に縛られずに「プログラムで動かす」という経験をすることは、少し大袈裟に言えば世界の色が変わるような体験です。それ以上のことを実際にするかどうかは別として、「やろうと思えば色々できそう」と感じることは心を豊かにすると感じています。