JavaScriptの勉強用にBookmarkletの作成を勧めてみた話

はじめに

こんにちは。友人(IT業界勤めではない)から「JavaScript の勉強をしているが、せっかくなので何かつくってみたい」という話を聞きました。そこで僕は Bookmarklet をつくってみてはどうか という提案をしてみました。

今日はそんな実際にあった話をもとに記事を書いてみたいとおもいます。

Bookmarklet ってなに？

そもそもブックマークとはWEBサイトのURLをブラウザに登録しておき、好きなタイミングで登録したURLを呼び出せるようにする機能のことですよね。このあたりは普段インターネットを使っている方はよくご存じかとおもいます。(この記事を見ている時点でインターネットをつかっていますので聞くまでもなかったと書いてからおもったｗ)

これに対し、ブックマークレットですが同じくブックマークの機能を使うことには変わりありません。違うのはURLの代わりに JavaScript で作ったプログラムを登録しておくことです。ブックマークの場合は登録しておいたURLを呼び出すとそこにジャンプしますが、ブックマークレットの場合は登録しておいたプログラムが実行されます。

ちなみにwikipedia先生によるとこうです。僕の説明もだいたいあってるはずｗ

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、なんらかの処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

実際に簡単なブックマークレットをつくってみます

ブックマークレットひな型

こんなかんじです。ここにプログラムにやらせたいことを書いていきます。

ひな型

javascript : (function() {
    //実行する処理内容
})();

例えば

Qiitaへのログインを楽に行うブックマークレット をつくってみたいとおもいます。さっそくスクリプトを書いてみますが下記のようなかんじです。※パスワードはダミーです

ユーザー名とパスワードを入力するプログラム

javascript : (function() {
  document.getElementById("identity").value = "tommy_aka_jps";
  document.getElementById("password").value = "yourpassword";
})();

これを実行すると、ここに書いておいたユーザー名とパスワードが Qiita のログインフォームにパッと入力されます。

改行とインデントを削って1行になおします

あくまでもブックマークとして登録する文字列なので改行等が入っているとうまく登録できません。そのためいろいろ削って1行にします。

改行とスペースを削ったよ

javascript:(function(){document.getElementById("identity").value="tommy_aka_jps";document.getElementById("password").value="yourpassword";})();

プログラム本文自体は何も変えていません。

さっそくブックマークに登録してみます

画面は Google Chrome のものです。手順はふつうのブックマーク追加と一緒です。このとき、URLの欄にはURLのかわりにさきほど作成したスクリプトを入力している点だけが異なります。

登録したブックマークレットを実行してみます

するとこのようになります。

必要な情報がすべて入力されましたね。あとはログインボタンを押すだけです。うむ、便利じゃ。 IDとパスならブラウザに記憶させておけば済む話じゃないかとか言ってはいけません

ログインボタンを押すのもスクリプトにやらせることも可能ですが、何が起きているかわかりづらくなりそうなので今回は説明用サンプルということであえてユーザー名とパスワードの入力までにしています。

使用したメソッドについて

• Document.getElementById() - Web API | MDN

JavaScript の入門書にも載っている JavaScript で HTML 操作を行うためのポピュラーなメソッドです。入門中の友人も「あ、それこの間やったやつだ」と言ってました。

所感

なぜ JavaScript の勉強にブックマークレットを勧めたかといいますと、完成まであまり所要時間をかけずに、かつそこそこプログラムで手作業を楽にした成功体験を実感できる と考えたからです。

ログインフォームへスクリプトで値を入力するのは僕がかつて初めて作ったブックマークレットということもあり、経験上DOM操作を覚え始めた初級者には勉強したものを手軽に試すことができる良い教材になるんじゃないかと思いました。

ここで僕が紹介したプログラムは本当に初歩ですが、ブックマークレットについては先人のみなさまが残した良記事・スクリプトが世の中にはたくさんあります。興味を持たれた方は勉強の合間やネットサーフィンのついでに少し検索してみるとちょっと楽しい気持ちになれるかもしれません。

参考

• Bookmarkletを作ろう(準備編） - Qiita
• GoogleChromeでのブックマークレットの登録方法 - 書籍横断検索システム
• Create Bookmarklets - The Right Way
• Bookmarklet - Wikipedia

どれも僕の記事よりもめちゃくちゃ手厚くて質の高い記事ですねｗというか Wikipedia にも作り方が載っていたのには笑いましたｗ