はじめに
最近JavaScriptが変な話題を呼んでいますね。whileループで無限にアラートを出し続けるだけのものが摘発されたりなんだりと･･････。まあこれについてはいろいろ波紋を呼ぶので更には言いませんが、そのJavaScriptを使ったお話。
最近ブックマークレットを作ってみた話
自分はゲームのサイトなんかでちょいちょいスキルデータとか考えるために以前からブックマークレットを使うことがあったんです。
この前、ちょっと暇だったので自分でもブックマークレットを作るかとおもって作ってみたんですよね。大学のオンライン成績表示がGPAを計算してくれなくて大変不便だったので、自動で計算してくれるものを作りました。簡単に作れる割に思いの外評判がよかったので「よければ皆さんも作ってみませんか？」という感じで記事を書いています。
作ったもの↓ github.com
ブックマークレットって何？
ブックマークレットとは、ユーザーがウェブブラウザの「ブックマーク（またはお気に入り？）」から登録しているウェブページを開くように、ブックマークから起動することで簡単なプログラムを実行できるというものである。
具体的には、ブックマークにウェブページのURLを記憶するのではなく、短いプログラムの内容を登録する。実際にブックマークのところで右クリックなどをしてみると「編集」できるので、「URL」の部分にURLの代わりにプログラムを直接書く。
あると良いスキル
作るのが簡単なものであればあるほど必要なスキルが減っていきますね。
- JavaScriptが書ける(ぶっちゃけかけなくても他の言語経験あれば割となんとかなる)
- HTMLが読める(ページ内情報の取得の概念がわかる)
- ブラウザの開発者ツールが使える(ウェブページの解析が楽になるので)
- リファレンスを読む能力
他にもいろいろありそうだけどとりあえずこのくらい。どれも使うっちゃ使うけど知らなかったところで、なんかしらのプログラミング経験さえあれば１０分くらいググればいけそう。凝ったものを作ろうとすると話は別だけれど･･････。
結局リファレンスが読めればなんでもいける理論。困ったら「こんな関数ないかな？」とか「この引数/戻り値ってどんなオブジェクトや」って思ったときに調べて読めればOK。
ブックマークレットの作り方
ブックマークレットを作るには基本的に以下の手順を踏む。
- JavaScriptのコードを書く
- ブックマークレットに適したコードに変換
- ブックマークに登録する
順番にみていく。
JavaScriptのコードを書く
基本的に普通にJavaScriptのコードを書いていく。その全体をJavascript:(/* 処理内容 */)();のように囲む（本当はカッコがなくてもよかったりするけどまあ基本的にあってよいので）。
雛形としては次のようになる。
javascript:(
function() {
alert("Hello World!");
}
)();
無名関数もなくても良いけど変数名がかぶったりするのも考えて作っておいてローカル変数にするのが良い？あまり詳しくない。
あとは普通にコードを書くだけ。変数とかループとかも問題なく使える。
開いているWebページ内の情報を取得することもできる。documentプロパティなどと検索して調べてみると良い。
javascript:(
function() {
var title = document.title();
alert(title);
}
)();
ブックマークレットに適したコードに変換
スクリプトが書けたら変換する。次のサイトが便利。
ここに投げてコンパイル。何か不備があると教えてくれたりもする。
ブックマークに登録
新規ブックマークを作ってURLのところにできたコードをコピペ。javascript:を先頭につけるのを忘れないようにしよう。
おわりに
これでブックマークレットを作ることができた。あとは自由に欲しい機能をつけよう！コードが長くなる場合はどこかにUPしておいてリンクするようにしておくのもよい。
