ブックマークレット

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第24話:ブックマークレット

目次



マンガ










マンガ台詞

【1Page】
先生:プロ部の活動も 残すところ 3回になった
    今日からは Webページの外で使う JavaScriptを教えていく
遊:ふーん
    何ができるように なるの?
先生:アプリケーションを 作れるようになる
遊:へー なんだか すごそうね
先生:まあ 今回は 簡単なものしか 作らないがな
遊:簡単なもの?
先生:『ブックマークレット』だ
遊:ブックマークレット?
【2Page】
先生:そうだ
    ブラウザの お気に入りに保存して 利用するプログラムだ
遊:あまりすごく なさそうね
先生:ははは そうだな
    よし 簡単なものを 作ってみるぞ
        <html>
            <body>
                右クリックからお気に入りに追加してね<br>
                <a href="javascript:alert(document.title+'\n'+location.href);">
                    タイトル+URLを表示
                </a>
            </body>
        </html>
    右クリックから お気に入りに 保存して
        お気に入りに追加(F)...
    お気に入りから 呼び出して利用する
        表示(V)  お気に入り(A)  ツール(T)
            タイトル+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:』と書いたあとに、プログラムを書きます。あとは、そのリンクを右クリックから保存して、ブラウザの『ブックマーク』や『お気に入り』から呼び出せば、プログラムが実行されます。

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

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

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


参考:Google検索 - ブックマークレット



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

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

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

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



サンプルの入手

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

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

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

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

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

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

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




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