第24話:ブックマークレット

第5部 応用編

目次

マンガ








マンガ台詞

【1Page】
先生:これまでは Webページ内の JavaScriptを扱ってきた
    今日からは Webページの外で使う JavaScriptを教えていく
遊:ふーん
    何ができるように なるの?
先生:アプリケーションを 作れるようになる
遊:へー なんだか すごそうね
先生:まあ 今回は 簡単なものしか 作らないがな
遊:簡単なもの?
先生:『ブックマークレット』だ
遊:ブックマークレット?
【2Page】
先生:そうだ
    ブラウザの お気に入りに保存して 利用するプログラムだ
遊:あまりすごく なさそうね
先生:ははは そうだな
    よし 簡単なものを 作ってみるぞ
        <html>
            <body>
                右クリックからお気に入りに追加してね<br>
                <a href="javascript:alert(document.title+'\n'+location.href);">
                    タイトル+URLを表示
                </a>
            </body>
        </html>
    Internet Explorerなら 右クリックメニューから 『お気に入りに追加』を選び
    その他のブラウザなら 『ブックマークバー』に リンクをドラッグして追加し…
    『お気に入り』や 『ブックマーク』から 呼び出して利用する
            タイトル+URLを表示
        クロノス・クラウン
        http://crocro.com/
【3Page】
遊:へー 簡単に 作れるんですね
先生:ああ 一行で書くのは大変だが プログラム自体は簡単だ
    世の中には多くの 『ブックマークレット』 が公開されている
    それを 利用してもよいし 自作してもよい
先生:よーし みんな 練習として 1つずつ作ってみろ
遊:できたわ!
【4Page】
先生:早いな
    どんなのを 作ったんだ?
遊:Webページの中身を 空っぽにする 『ブックマークレット』よ!
        右クリックからお気に入りに追加してね<br>
        <a href="javascript:document.body.innerHTML='';">
            空っぽ!
        </a>
        『<body>』タグ内の HTML文字列を空にする
先生:…これ 何か 役に立つのか?
遊:えっ?
    さあ?
先生:はー 頼むから
    もう少し 有用なものを作ってくれよ
    (先生泣き)

説明

この章では、『ブックマークレット』について学びます。この章以降は、Webページ以外の場所で、アプリケーションとして利用するJavaScriptについて学んでいきます。

まず最初は、『ブックマークレット』と呼ばれる簡単なアプリケーションです。この『ブックマークレット』は、WebページのJavaScriptの延長なので、それほど難しくはありません。

以下、『ブックマークレット』について、解説していきます。

『ブックマークレット』とは?

ブラウザの『ブックマーク』や『お気に入り』に保存して、それらを呼び出すことで実行するアプリケーションです。

作り方は簡単です。Webページの『<a>』タグの『href』の値として、『javascript:(プログラム)』と書きます。

<a href="javascript:alert(document.title+'\n'+location.href);">
    タイトル+URLを表示
</a>

上記のプログラムを簡単に解説します。

『document.title』でWebページのタイトルを、『location.href』でWebページのURLを取得して、『alert』でダイアログ表示しています。

『ブックマークレット』を作る際は、このように、『<a>』タグの『href』属性に『javascript:』と書いたあとに、プログラムを書きます。あとは、そのリンクを『ブックマーク』や『お気に入り』に登録します。

Internet Exploreなら、右クリックから『お気に入りに追加』を選択すればよいです。その他のWebブラウザでも、ブックマークバーなどにリンクをドラッグすれば、簡単に『ブックマーク』に登録できます。

注意しないといけないのは、1行で全てのプログラムを書かなければならない点です。これは、普通にプログラムを書いたあと、改行を削除してから『href』の値に貼り付ければよいです。

また、『href』の値を『"~"』と囲っているので、『"』(ダブルクォーテーション)は使えません。代わりに『'』(シングルクォーテーション)を使うとよいです。

どういった『ブックマークレット』を作れるかは、インターネットでいろいろと検索してみてください。様々なアイデアを実装した『ブックマークレット』が見つかります。

参考

マンガ中のプログラムの解説

マンガで出てきた、遊の書いたプログラムについて解説します。

<a href="javascript:document.body.innerHTML='';">
    空っぽ!
</a>

『document.body.innerHTML』は、『<body>』タグ内のHTML文字列です。つまり、ブラウザに表示されている部分全てを表します。この値を『''』と空の文字列で上書きしています。結果的に、Webページの中身が空っぽになってしまうというプログラムになります。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(タイトル+URLを表示)を表示

sample2.html』(空っぽ!)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。