テックキャンプ無料カウンセリング テックキャンプ無料カウンセリング
資料請求はこちら

ブラウザーを便利にするブックマークレットの使い方と作り方を解説

更新: 2021.03.02

>>No1エンジニア養成プログラム テックキャンプ

初めてのIT転職で読むべき!お役立ちebook3点セット

Webブラウザーの機能を拡張するブックマークレット。ブックマークレットは、パソコンでの情報収集の作業効率を上げ、拡張機能が使えないスマホでのWebブラウザーでの検索も快適にしてくれるツールです。

今回はブックマークレットについて初めて知ったという人向けに、ブックマークレットとは何か、基本的な使い方、作り方についてわかりやすく解説します。

ブックマークレットとは

「Webデザイナーはやめとけ」と言われる理由 働くメリットや注意点も解説まず、ブックマークレットとは何かという概要について以下で解説します。

ブックマークレットはJavaScriptで作られた簡単なプログラム

ブックマークレットとは、プログラミング言語であるJavaScriptで作られた簡単なプログラムです。このプログラムをWebブラウザー上で実行することで、少し便利な機能が利用できます。

使うときは通常のブックマークと同じようにクリックするだけなので、非エンジニアであっても迷わずに使えるでしょう。

Webブラウザーの足りない機能を補うブックマークレット

ブックマークレットを利用するおもな目的は、Webブラウザーの足りない機能を補うこと。

ブックマークレットはブックマークから起動できるプログラムですので、拡張機能やアプリのインストールは不要です。

そのため、使用する環境に大きく左右されず、パソコンやスマホで同じように利用できます。

10年後も食べていける職業

エンジニアは、今もっとも注目を集めている職業の1つ。市場価値の高いエンジニアにキャリアチェンジできれば、あなたの人生の選択肢は飛躍的に増えることでしょう。

3,200名以上のIT転職を支援したテックキャンプが、未経験からエンジニアになる方法を解説!

資料はこちらから無料ダウンロードが可能。※2016年9月1日〜2021年5月14日の累計実績。

ブックマークレットの基本的な使い方

次に、ブックマークレットの基本的な使い方について以下で解説します。

Webブラウザーのブックマークバーを表示させる

まずは、Webブラウザーのブックマークバーを表示させましょう。

それぞれのWebブラウザーで詳しい手順は異なりますが、設定の画面から表示できるものが多いです。

Google Chromeの場合には、アドレスバーの右のメニューから「ブックマーク→ブックマークを表示」から設定できます。

ブックマークレットをWebブラウザのブックマークに登録する

ブックマークレットをWebブラウザのブックマークに登録します。

表示させたブックマークバーで右クリック。「ページを追加」といった内容の項目を選択して、新しいブックマークを追加します。

Google Chromeの場合には、アドレスバーの右側の☆マークから閲覧しているWebページを登録できるので、それを書き換えてもよいでしょう。

ブックマークの名前は好きなもので構いません。動作を表す内容にしておくとわかりやすいでしょう。URLにはJavaScriptで記述したコードを入力します。

保存を行えばブックマークへのブックマークレットの登録が完了です。

iPhoneでのブックマークレットの登録方法

iPhone・Androidでブックマークレットを登録する場合にも、基本的な流れは同じです。

ただし、スマホの場合には仮のブックマークを作り、書き換える手順が必要があることを覚えておきましょう。

iPhoneのSafariでブックマークレットを登録する場合には、まずブックマークを仮で登録します。

そのブックマークの編集画面から名前とアドレス部分の書き換えを行ってブックマークレットとして登録してください。

Androidでのブックマークレットの登録方法

AndroidのGoogle Chromeでブックマークレットを登録したい場合には、メニューから☆マークをタップ。

「ブックマークしました」という表示の右から編集をタップして、名前とURLを書き換えてください。

ブックマークレットを登録したブックマークをクリックして起動

ブックマークレットを登録したブックマークをクリックかタップをすれば、プログラムはすぐに起動できます。

「ブックマークレット」などのフォルダを作って管理しておくと、ブックマークが乱雑にならないのでおすすすめです。

【初心者向け】ブックマークレットの作り方

使いたいブックマークレットが見つからないという場合は、自作にチャレンジしましょう。

「JavaScriptが記述できないプログラミング初心者でもOK」なブックマークレットの作り方を以下で解説します。

必要なツールを用意する

まずはブックマークレットの開発に必要なツールを用意します。

以下のツールを最低限用意しておくと、スムーズに開発が進められます。

  • JavaScriptをブックマークレットに変換するツール:bookmarklet maker など
  • JavaScriptのコードを整えるツール:Online JavaScript beautiflier など
  • テキストエディタ:Atom や Visual Studio Code など
  • デバッガー: Chrome Dev Tool など

この他にも、自分が作りたいブックマークレットに合わせてツールは適宜用意してください。

やりたいことに近いコードやブックマークレットを探す

「選択した文字列を検索する」「WebページのタイトルとURLをコピーする」といったやりたいことをまず決めます。

そして、そのやりたいことに近いコードやブックマークレットを探しましょう。

そのサンプルを基にして、ブックマークレットのプログラムを構築します。初心者でも短時間でブックマークレットが作成できるおすすめの方法です。

以下のWebサイトがサンプルコードを探す上で役立つでしょう。

JavaScriptをブックマークレットに変換

ブックマークレットに登録できるプログラムは、1行で記述する必要があり、長さにも制限があります。

そのため、JavaScriptで記述したコードをブックマークレットとして利用できる状態に変換する必要があるのです。

まず、変換の前にコメントを削除し、Online JavaScript beautiflierなどを使ってソースを整えておきましょう。

ブックマークレット用のコードの変換には以下のツールがおすすめです。

ブックマークレットのテストとデバッグ

ブックマークレットのプログラムができたら、テストとデバッグを行います。想定した通りの動きをするか確認し、問題があれば修正を行ってください。

テストとデバッグが完了したら、前述の手順を参考にしてブックマークレットをブックマークに登録して利用しましょう。

ブックマークレットはプログラミングの入門にも最適

ブックマークレットはWebブラウザーを便利にするだけではなく、簡単に自作もできるのでプログラミングの入門にも最適です。

初めはコードをコピーする写経を行い、利便性を実感したらぜひ自作にもチャレンジしてください。JavaScriptを学習してツールを駆使すれば、そこまで難易度は高くありません。

また、目的がはっきりしていると、プログラミングの学習も楽しみながら取り組めるでしょう。プログラミング学習のきっかけとしても、ブックマークレットはとても役立ちます。

↑目次へ戻る

何でも相談できる無料カウンセリング【テックキャンプは給付金活用で受講料最大70%オフ※1

こんな不安や疑問はありませんか?
・自分のキャリアでエンジニア転職できるか
・自分はエンジニアに向いているのか
・どうしたら効率良くプログラミングを習得できるか


カウンセリングでは、IT転職・プログラミング学習に特化したプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。満足度93%※2、累計利用者数は40,000人以上!※3

無理な勧誘は一切致しませんので、気軽にご参加ください。
※1.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%が給付金として支給されます 2.2018年10月24日〜11月16日(N=106) 3.2016年9月1日から2020年12月31日の累計実績

無料カウンセリングの詳細はこちら

何でも相談できる無料カウンセリング【テックキャンプは給付金活用で受講料最大70%オフ※1

こんな不安や疑問はありませんか?
・自分のキャリアでエンジニア転職できるか
・自分はエンジニアに向いているのか
・どうしたら効率良くプログラミングを習得できるか


カウンセリングでは、IT転職・プログラミング学習に特化したプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。満足度93%※2、累計利用者数は40,000人以上!※3

無理な勧誘は一切致しませんので、気軽にご参加ください。
※1.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%(最大56万円)が給付金として支給されます 2.2018年10月24日〜11月16日(N=106) 3.2016年9月1日から2020年12月31日の累計実績

無料カウンセリングの詳細はこちら

この記事を書いた人

Kimura Hiroto
音楽・ITをはじめとするさまざまなジャンルのライティングを行っています。ITエンジニアの経験を生かし、テックキャンプ ブログでの執筆・編集を担当。好きな食べ物は豆腐。

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement