iPhone でブックマークレットを作りたくて JavaScript 初心者が調べたこといろいろ

photo credit: alikins via photopin cc
photo credit: alikins via photopin cc

最近、iPhone をもっと便利に使いたいという思いからブックマークレット作りに精を出しています。そのために JavaScript というプログラミング言語と向き合っているのですが、初心者ゆえに仕組みを理解するのに一苦労です。少しずつ内容が理解できるようになってきたので、調べてきたことをまとめてみたいと思います。

目次

  1. ブックマークレットって?
  2. URL スキームを強化する
  3. 指定した URL を開く
  4. ブラウザで開いているページの URL を取得する
  5. 文字列を置換する
  6. 取得した URL を置換して開く
  7. Safari で見ているページを Chrome や Sleipnir で開く
  8. ブラウザで開いているページのタイトルを取得する
  9. ブラウザで開いているページのタイトル と URL を Drafts に渡す
  10. HTML のリンクタグに整形して Drafts に渡す

ブックマークレットって?

まずはブックマークレットという言葉の意味を調べてみます。

Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。(via ブックマークレットとは – はてなキーワード

iPhone であれば Safari などのブラウザアプリに、お気に入りの Web サイトをいつでもすぐに見られるようにブックマークしておくことができますよね。この仕組みを使って、通常の URL の代わりに簡単なプログラムを登録しておき、いつでも使いたい時に呼び出せるようにしたものがブックマークレットです。

URL スキームを強化する

iPhone ではもともと URL スキームという機能を使うことができます。たとえば標準のメールアプリで、メールに書いてある URL をタップすると Safari が起動して Web ページを表示してくれるといった具合に、アプリとアプリの間で情報を受け渡すことができます。逆に Safari からメールアプリを起動させることも可能です。

JavaScript を使うと Safari で開いている Web ページのタイトルや URL アドレスを取得したり、取得した文字列を加工したりすることができます。こうして取得・加工した文字列を、URL スキームを使って他のアプリに受け渡すことも可能です。なので自分にとっては URL スキームをさらに強化するためにブックマークレットを作りたい、というのが出発点でした。

指定した URL を開く

URL スキームを組み合わせてブックマークレットを作りたいと思ったので、最初に調べたのは指定した URL を開く方法です。それには location.href を使います。たとえば Apple のサイトを開く JavaScript は次のようになります。

location.href='http://www.apple.com/';

URL は引用符で囲う必要があります。シングルクォーテーション(')ではなく、ダブルクォーテーション(")を使うこともできます。ですが、ダブルクォーテーションは HTML の方で頻繁に出てくるので、自分は区別するためにシングルクォーテーションを使おうと考えています。

この JavaScript を Safari などのブラウザアプリで使う場合は、先頭に javascript: と付けて次のようにします。

javascript:location.href='http://www.apple.com/';

このコードをブラウザのアドレスバーに入力すると、Apple のサイトが開きます。また、コードそのものをブックマークに登録しておけば、いつでも呼び出せます(Safari の場合は1度適当なページをブックマークし、ブックマーク画面の「編集」でアドレス欄にコードをコピペします)。これがブックマークレットです。

この JavaScript は location.href 以外に、次のいずれの書き方でも機能します。

location='http://www.apple.com/';
window.location='http://www.apple.com/';
window.location.href='http://www.apple.com/';

フルネームが window.location.href で、このうち window..href は省略可能ということですね。

ブラウザで開いているページの URL を取得する

location.href は、現在開いているページの URL アドレスを取得するためにも使えます。ブラウザで次のブックマークレットを使えば、URL がアラート表示されます。

javascript:alert(location.href);

URL の取得には location.href だけでなく、document.URL も使えます。

javascript:alert(document.URL);

location.href は URL を指定して開くこともできましたが、document.URL にはそうした機能はなく、あくまで URL の取得専用だということです。document.URL の方が実行速度が速いと解説しているサイトがあったことや、URL を開くのと取得するのとでコードが違う方が区別しやすいと思ったことから、自分は document.URL を使ってみようと考えています。

文字列を置換する

ある文字列を対象にして、その中に含まれる一部または全部の文字列を新しい文字列に置換するには replace() が使えます。replace('元の文字列','新しい文字列') といった使い方をします。

例として、Apple のサイトのトップページを開いているとします。次のブックマークレットを実行すると、URL アドレスが表示されます。

javascript:alert(document.URL);

実行するブックマークレットを、次のように変えてみます。すると、アラート表示される URL アドレスが http://www.google.com/ に変わります。

javascript:alert(document.URL.replace('apple','google'));

これは、document.URL で取得した URL アドレス http://www.apple.com/ のうち、"apple" の部分が "google" に置換された上でアラート表示されるためです。

取得した URL を置換して開く

今までに紹介してきた3つを組み合わせれば、開いているページの URL を取得→文字列を置換→新しい URL を開くといった動作が可能になります。

前回の記事 iPhone で Web ページのソースコードを読めるコードエディタアプリ Textastic が面白い で紹介したブックマークレットを例に挙げてみます。

javascript:location.href=document.URL.replace(/https?/,'textastic');

これは Safari で開いているページのソースコードを、コードエディタアプリ Textastic Code Editor for iPhone にインポートするブックマークレットです。この JavaScript でやっていることを順に説明してみます。

javascript:location.href=document.URL.replace(/https?/,'textastic');

まず document.URL で、開いているページの URL(例: http://www.apple.com/)を取得します。

javascript:location.href=document.URL.replace(/https?/,'textastic');

続いて、取得した URL のうち http の部分を replace(/https?/,'textastic') で置換し、textastic://www.apple.com/ に加工します。/https?/ というのは、正規表現という方法で httphttps の両方にマッチするようにしています。

javascript:location.href=document.URL.replace(/https?/,'textastic');

最後に、加工後の URL textastic://www.apple.com/location.href で開きます。そうすることで Web ページのソースコードをインポートする Textastic の機能(URL スキーム)が実行されます。

Safari で見ているページを Chrome や Sleipnir で開く

Textastic のように URL アドレスの http を変更することで URL スキームを実行できるアプリは他にもあるので、このブックマークレットはそれらのアプリにも応用できます。

Safari で見ているページを Chrome で開きたい場合は次のようにします。

javascript:location.href=document.URL.replace(/http/,'googlechrome');

同様に、Sleipnir ならこうなります。

javascript:location.href=document.URL.replace(/http/,'sleipnir');

ブラウザで開いているページのタイトルを取得する

先ほどは document.URL を使って、Web ページの URL アドレスを取得する方法を紹介しました。ページのタイトルを取得するには、document.title を使います。

javascript:alert(document.title);

ブラウザで開いているページのタイトル と URL を Drafts に渡す

自分は iPhone のメモアプリ Drafts を愛用しているので、URL スキームを経由して Web ページのタイトルと URL アドレスを受け渡すブックマークレット作りに挑戦しました。

まず、Drafts にテキストを渡す URL スキームは次の通りです。

drafts://x-callback-url/create?text=

この URL スキームを、location.href を使ってブックマークレットの形に書き直します。

javascript:location.href='drafts://x-callback-url/create?text=';

その次は、text= の後に実際に受け渡すテキストを指定します。今回は Safari で開いているページのタイトルと URL なので、一旦次のようにします。

javascript:location.href='drafts://x-callback-url/create?text='+document.title+document.URL;

document.title はタイトルを、document.URL は URL を取得します。text= の直後にシングルクォーテーション(')を入れて引用符を閉じた状態で、+ で連結していきます。document.titledocument.URL が引用符の内側にあると、タイトルや URL ではなく、document.titledocument.URL の文字列がそのまま渡されてしまいます。

続いて、URL に使えない文字が含まれてエラーが発生するのを防ぐため、URL エンコードと呼ばれる処理を行います。同時に、タイトルと URL の間に改行を入れるようにしました。

javascript:location.href='drafts://x-callback-url/create?text='+encodeURIComponent(document.title+'\n'+document.URL);

encodeURIComponent() で URL エンコードを行っています。また、document.titledocument.URL の間にある +'\n'+ によって改行が入ります。

このブックマークレットを Apple のサイトのトップページで実行すると Drafts に切り替わり、このように タイトルと URL が入力されます。

HTML のリンクタグに整形して Drafts に渡す

今作ったブックマークレットは Web ページのタイトルと URL を Drafts に渡すものでした。これをもう少し改良し、ブログの記事執筆用に、HTML のリンクタグに整形した上で Drafts に渡すようにしてみます。

Apple の例で言えば、出力したいテキストは次のようになります。

<a href="http://www.apple.com/" target="_blank">Apple</a>

先ほど encodeURIComponent() の中にタイトルと URL を含めたので、今度は URL が先に来るように順番を入れ替え、それぞれ HTML のタグで囲みます。

javascript:location.href='drafts://x-callback-url/create?text='+encodeURIComponent('<a href="'+document.URL+'" target="_blank">'+document.title+'</a>');

このブックマークレットを実行すると、Drafts に次のように入力されます。

Drafts に引っ張ってきた HTML タグを、新規メモにするのではなく、クリップボードにコピーしたい場合は次のブックマークレットが使えます。

javascript:location.href='drafts://x-callback-url/create?text='+encodeURIComponent('<a href="'+document.URL+'" target="_blank">'+document.title+'</a>')+'&action=Copy%20to%20Clipboard&afterSuccess=Delete';

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です