4. 自分が実際に使うブックマークレットを作ってみよう
Updated
2021/8/8 8:00
Author
Jumpei Ikegamiいよいよ、自分が実際に業務で使うブックマークレットを作成してみましょう。
いきなり自由にブックマークレットを作り始めるのは大変です。まだブックマークレットを作成する環境も整っていません。でも安心してください。まずは、例題をいくつか解いてみることを目標に、環境の整備を進めていきます。
前提知識
先に次のチュートリアルをやるのをおすすめします。
作るもの
例題として、次のブックマークレットを作ります。
- Webページのタイトルをダイアログのテキストボックスに表示する
- Amazonの商品ページに表示されている商品名で、楽天で検索をする
- Amazonの商品ページで、数量を3にしてカートに入れる
その上で、自分が実際に業務で使うブックマークレットを考えて、作成していきます。
体験すること
このチュートリアルによって、以下を体験します。
- JSFiddleのテキストエディタを触る
- ブラウザのコンソールでJavaScriptを試しに実行する
- JavaScriptを使ってWebページのタイトルを取得する
- JavaScriptを使ってプルダウンの値を自動変更する
- 自分が業務で使うブックマークレットをつくる
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
テキストエディタを用意する
自分が使うブックマークレットを作ることを考えると、これまでのようにプログラム全体をコピペ実行するのでは足りません。「プログラムの編集」と「プログラムの実行」を繰り返しながら必要があります。まずは「プログラムの編集」ができる環境を整えましょう。
プログラムなどのテキストを編集する場合、「テキストエディタ」と呼ばれるアプリケーションを使います。簡単なものだと、Windowsの「メモ帳」やmacOSの「メモ」などがあります。特にプログラムを書く場合は、次のようなエンジニア向けに作られた開発用のテキストエディタが多く使われます。
- Visual Studio Code
- Atom
- Sublime Text
なお、テキストエディタを使うことで、主に以下のような恩恵を受けることができます。（テキストエディタや書くプログラミング言語によって、機能は異なります。）
- 読みやすいように、文字に色を付けてくれる
- よく使う変数名などを入力補完してくれる
上述したテキストエディタは、すべてデスクトップアプリケーションとして提供されています。ただし、ブックマークレットの開発くらいであれば、わざわざデスクトップアプリケーションをインストールする必要はありません。特にこだわりが無い場合は、「JSFiddle」と呼ばれるサイトのテキストエディタが便利です。JSFiddleは、HTML/CSS/JavaScriptの小さな組み合わせを簡単に共有するために作られたサイトです。JSFiiddleのサイト上にテキストエディタが存在し、簡単なJavaScriptを書くことができます。もちろん、簡単なHTMLやCSSを試す機会ができたときも、このJSFiddleを使うことができます。
JSFiddleにアクセスし、JavaScriptと書かれたエリアにプログラムを書いていきます。
ブラウザのコンソールでJavaScriptを試しに実行する
次に、「プログラムの実行」について考えます。
初心者がプログラムを開発するときの方針として、以下のどちらがいいでしょうか？
- 最初から最後までプログラムを書いてから、テスト実行してみる
- 小さな部品から繰り返しテスト実行して、少しずつ大きなプログラムを構築していく
ヒトは、ついつい自分が書いているプログラムが合っていることを前提に書き進めてしまいます。しかし、小さな部品であっても、すぐにヒトはスペルミスや思い違いによって動かないものを生み出してしまいます。プログラムが思ったように動かないことを、「バグがある」と言います。プログラムは、たった一文字間違えただけでも大きなバグを引き起こしてしまいます。バグが無いかどうかをこまめにチェックしながら書き進めていくことが、遠回りに思えても最終的にはコストの安い近道だったということがよくあります。
具体的には、こまめにテスト実行することで次のようなメリットを得ることができます。
- プログラムが動かないときの原因特定がやりやすい
- 小さな達成感を頻繁に得られるので、モチベーションを保ちやすい
しかし、こまめにテスト実行する場合、毎回ブックマークレットを登録し直すのは面倒です。
そこで、ブラウザでJavaScriptを実行する2つ目の方法を覚えましょう。それは、デベロッパーツールのコンソールです。以下の手順で、デベロッパーツールのコンソールでJavaScriptプログラムが実行できることを確かめましょう。
- Amazonの適当な商品ページを開く
- F12キーを押すなどして、Chromeデベロッパーツールを開く
- Consoleというタブを開く
- コンソール画面に
document.querySelector("#productTitle")と入力し、Enterを押す
- HTML要素に変身したことを確認する
ブラウザのコンソールでプログラムを少しずつ実行して結果を確かめながら進むことで、取り返しのつかない状態になる前に問題に気付くことができます。
なお、実行したプログラムにエラーがあった場合、同じくブラウザのコンソールにエラー情報が表示されます。ブックマークレットのJavaScript実行時エラーについても、同様にブラウザのコンソールから確認できます。うまくプログラムが動かないときは、ブラウザのコンソールを見てみるとヒントがあるかもしれません。
例題を解いてみる
JavaScriptプログラムに慣れるために、次のようなブックマークレットを作成し、実際に実行してみましょう。基本的には、ここまでのチュートリアルでやったことを応用すればできるはずです。
プログラムの部分はJSFiddleで記述していき、Chromeデベロッパーツールのコンソールで小さな部品単位でテスト実行してみましょう。全体のプログラムをChromeデベロッパーツールのコンソールでまとめて実行し、思った通りに動いたら、それをブックマークレットとして登録します。（頭に javascript: を付けるのを忘れないようにしましょう。）最後に、ブックマークレットを押したときにも同じように動作するか確認しましょう。
Webページのタイトルをダイアログのテキストボックスに表示する
今見ているWebページのタイトルをコピーしたいときに使えるブックマークレットです。
タイトルは、
documentという変数の、さらにtitleという変数内に格納されています。つまり、 document.title と書くと取得できます。
Amazonの商品ページに表示されている商品名で、楽天で検索をする
前のチュートリアルでGoogle検索についてはやりましたが、今度は楽天の検索ページに飛ぶブックマークレットを作ってみましょう。
楽天の検索結果URLのパターンは、次の通りです。
https://search.rakuten.co.jp/search/mall/検索文字列
Amazonの商品ページで、数量を3にしてカートに入れる
3つセットでよく買う商品について、ボタン1つでカートに3つ入れられるようにしてみましょう。
プルダウンに対応するHTML要素の中のvalueという変数に新しい数量を数字で格納することで、プルダウンの値を自動で変えることができます。
JavaScript
例題は以上です。
もし10分以上考えても進まなかったら、周りにいるエンジニアに勇気をもって質問してみましょう。そのときは、このページのURLも一緒に貼るといいでしょう。周りにエンジニアがいなかったら、私（ @jumpei_ikegami ）までTwitterのリプライなどで質問してもらっても大丈夫です。
自分が使いたいブックマークレットを開発してみる
いよいよ、このブックマークレットをめぐるチュートリアルも最後です。
最後は、自分が実際に仕事で使えそうなブックマークレットを開発してみましょう。ここには、決まったレールはありません。まずはこれまで作ってきたブックマークレットを応用して、作業の効率化をしてみましょう。
「どの作業をエンジニアリングで効率化できるか」ということを考えた経験が無いと、何を作るか決めるのが難しいかもしれません。その場合は、次の手順を参考にしてください。
- 自分がよく使うWebサイトやWebサービスを思い出す
- 使いにくい点やめんどくさい点を洗い出してみる
- その中から、ブックマークレットの仕組みと学んだJavaScriptの機能を使ってできそうなことを考える
- 1つのサービスで思いつかなければ、2つのサービスを連携するような機能を考える
さて、自分が実際に使えるブックマークレットはできたでしょうか？以上で、ブックマークレットを通じたJavaScriptの解説を終わります。
残念ながら、ここで解説した内容だけでは、まだJavaScriptの機能全体のうちからしたら1%にも届きません。さらに、JavaScriptはエンジニアリングのための強力なツールの1つでしかありません。しかし、このチュートリアルでやったような簡単なエンジニアリングであっても、コンピュータを使って作業を自動化できることが実感できたと思います。
エンジニアリングとは、「不確実性を効率的に下げるために行う全てのこと」を指します。たとえば、「何分かかるかわからなくて不安な作業」を一瞬で終わらせる自動化を思いつけば、その不安は払拭されます。自分がやるべき本質的な仕事に向き合うことができ、もっと仕事が楽しくなるかもしれません。自分で直接プログラムを書かなくても、エンジニアリングの力を理解しておくことは、こうした「不確実性から来る不安」を確実に下げてくれます。ぜひ一緒に、エンジニアリングを学んでいきましょう！