現在のご案内： 現在、有料の新規購入は一時停止しています。現在は Free 会員登録のみ ご利用いただけます。
Free 会員登録へ

Bookmarkletの登録方法

← 補助教材へ戻る

このページは、NoaRecord / another-world.site のChatlet講座各記事と登録ページから参照する共通ヘルプページとして使う。 PC版Chromeを中心に、ドラッグ登録、手動編集、noteから来た場合の流れを説明する。

関連動画:

動画では、ブックマークバーの表示、ドラッグ登録、右クリックからの編集、ワンライナー確認までを実際の画面で説明している。 文章だけで分かりにくい場合は、先に動画を見る方が早い。

冒頭文

Bookmarkletは、ブラウザのブックマークに小さなJavaScriptを登録して使う仕組みです。 普通のWebページURLではなく、javascript: から始まるコードをブックマークのURL欄に入れる点が少し特殊です。

このページでは、PC版Chromeでの登録方法を中心に説明します。 スマホやタブレットでも使える場合はありますが、手順が機種やブラウザごとに大きく違うため、まずはPC版Chromeで試すことをおすすめします。

まずブックマークバーを表示する

Bookmarkletは、ブックマークバーに置くとクリックしやすくなります。

  1. PC版Chromeを開く。
  2. Ctrl + Shift + B を押す。
  3. 画面上部にブックマークバーが表示されることを確認する。

Macの場合は、Chromeのメニューからブックマークバーを表示する。

方法1: 登録リンクをドラッグする

登録ページにBookmarklet登録リンクがある場合は、この方法が一番簡単です。

  1. Chatlet講座用Bookmarklet登録ページを開く。
  2. 登録したいBookmarkletのリンクにマウスを合わせる。
  3. リンクをブックマークバーへドラッグする。
  4. ブックマークバーに追加されたら登録完了。
  5. 対象ページを開き、追加したブックマークをクリックする。

Chatlet講座用Bookmarklet登録ページ:　https://another-world.site/wp/portal/supplement/bookmarkletlist/

方法2: ブックマークを手動で編集する

ドラッグ登録がうまくいかない場合は、普通のブックマークを作ってからURL欄を差し替える。

  1. 何でもよいので、いったん普通のWebページをブックマークする。
  2. ブックマークバーにできたブックマークを右クリックする。
  3. 「編集」を選ぶ。
  4. 名前を分かりやすいものに変える。
  5. URL欄に、javascript: から始まる1行コードを貼り付ける。
  6. 保存する。
  7. 対象ページを開き、そのブックマークをクリックする。

貼り付けるときの確認:

  • 先頭の javascript: が消えていないこと。
  • コードの途中に余計な改行が入っていないこと。
  • コード全体を1行として貼り付けていること。
  • 対象ページを開いた状態で実行していること。

動画では、ワンライナーが折り返されて見えていても、実際には1行であることも説明している。 また、コピーだけでなく、テキストファイルとしてダウンロードできる場合があることにも触れている。

短いコードなら手作業で1行にすることもできるが、少し長いものは Bookmarklet Maker のような変換サイトでワンライナー化した方が安全である。 改行や余計な空白が混ざると動かなくなることがあるため、完成後に変換ツールで整える流れをおすすめする。

うまく動かないとき

  • 対象ページを開いてからBookmarkletをクリックしているか確認する。
  • javascript: の先頭が消えていないか確認する。
  • コードの途中に余計な改行や空白が入っていないか確認する。
  • ChatGPT向けBookmarkletは、ChatGPTのWeb版で入力欄が表示されている画面で試す。
  • Web小説検索Bookmarkletは、対象サイトの作品ページで試す。
  • サイト側のHTML構造が変わると、以前のBookmarkletが動かなくなる場合がある。
  • ページ側のセキュリティ制限により、Bookmarkletが動かない場合もある。
  • 内容が分からない javascript: コードは、登録したり実行したりしない。

スマホ・タブレットについて

スマホやタブレットには、PC版Chromeのようなブックマークバーがありません。 ブックマークを編集してBookmarkletを登録できる場合もありますが、Android Chrome、iOS Safari、各端末のバージョンによって手順が変わりやすいです。

この講座では、まずPC版Chromeでの利用を推奨します。 スマホ向けの詳しい手順は、必要に応じて別ページまたは補足記事で扱います。

関連ページ

上部へスクロール