見出し画像

『ブックマークレット32本ノック』ができるまで

masuipeo

技術書典17にて、新刊『ブックマークレット32本ノック』という同人誌を頒布します。
なぜこの本を書いたのか、そしてどこで買えるのか、といった内容を紹介します。

ブックマークレットでいっぱいのブックマーク

Webブラウザのブックマーク（お気に入り）の機能は便利ですよね。よく使うサイトを登録しておけば、そこから選ぶだけでページにジャンプできます。

でも、ブックマークが増えてくると探すだけでも大変になり、ブックマークから探すよりもGoogleなどの検索エンジンで検索したほうが早いものです。
そうすると、ブックマークはあまり使わなくなります。

せっかく便利な機能ですが、もっと活用したい！

私はどうしているかというと、ほとんどのサイトには検索してアクセスします。
また、macではRaycastというランチャーアプリを使っており、Quicklinksという機能が用意されているため、本当によく使うサイトには簡単にジャンプできます。

そんな中でのブックマークの主な用途がブックマークレットなのです。
ブックマークレットは、JavaScriptのプログラムをブックマークに登録して、手軽に実行できる仕組みです。

たとえば、ブックマークのURL欄に次のような内容を登録すると、ブックマークを選ぶだけで、開いているページのタイトルをメッセージボックスとして表示できます。

javascript:alert(document.title)

このようにちょっとしたプログラムを登録しておくことで、開いているWebページに対して独自の処理を実行できます。
少しプログラムを書くだけでさまざまなことができて便利なので、私のブックマークはブックマークレットであふれています。

プログラミング学習にブックマークレットは最適

ブックマークレットの便利なところは、開発環境がいらないことです。
ブックマークに登録するだけなので、テキストエディタすらいりません。
Webブラウザとキーボードがあれば十分です。
（テキストエディタがあると便利ですし、私は使いますが…）

そして、使う言語もJavaScriptだけ。しかもブックマークレットに登録するプログラムの多くは非常に短いものです。
そもそもブックマークはURLを登録するものなので、1行で書くことが基本です。

そんなことから、ブックマークレットの開発はプログラミング初心者が学ぶのに最適なのではないかと感じています。
「ちょっと書いてすぐに結果が確認できる」「日常的に使うWebブラウザで自動化できる」というのはモチベーションを保ちやすいものです。

一方で、どんなことに使えるのか、事例がないとわからない人も多いはず。
そこで、多くの事例が集まっていて「こんなことに使えるんだ！」ということがわかると嬉しいでしょう。

たとえば本書では、次のような例を取り上げています。

  • ページを編集可能にする

  • パスワード入力欄の中身を表示する

  • すべてのチェックボックスにチェックする

  • alt属性のない画像をチェックする

  • ページ内の表をCSV形式で出力する

  • 名前や住所、電話番号などを自動入力する

  • 位置情報を使う

こういった処理をちょっとしたソースコードを書くだけで実現できます。
そして、本書ではサンプルをダウンロードできるようにしていますので、プログラミングができない方でも、「どんなことができるのか」がわかります。

こういった本を商業誌として書くこともできますが、同人誌としてサクッと読めると嬉しいと考え、今回の技術書典17に合わせて書こうと考えました。

技術書典とは

技術書典は主にITに関する同人誌を頒布している同人誌即売会です。
最近は年に2回ほど開催されており、今回で17回目です。

今回は11月3日（日）に池袋のサンシャインシティ展示ホールD（文化会館ビル2F）にて開催されます。
また、11月2日（土）〜11月17日（日）にかけて、オンラインでも販売されます。

そして、私は「増井技術士事務所」というサークル名で「く08」という場所にいます。

技術書典会場「く08」

物理本をいち早く手に入れられるのは会場ですので、ぜひ当日は会場までお越しください。
入場には事前登録（無料）が必要ですので、お忘れなく。

本書の執筆過程

本書のテーマを思いついてから、技術書典17の開催まで約50日ほどでした。しかし、印刷所に入稿することを考えると、2週間前には完成させておきたいところです。

そこで、キリよく（ITエンジニアは2進法が好きなので）32日で仕上げることにしました。
どうせなら𝕏に投稿して進めよう、ということで「#32日後に入稿する著者」というハッシュタグをつけて投稿を始めました。

そして、毎日進捗を投稿するとともに、2進数でカウントアップしていきました。
無事に執筆も進み、30日ほどで入稿できました。

本書の「32本ノック」もこの「32日」とかけています。

書籍の概要

この『ブックマークレット32本ノック』では、ブックマークレットの作り方（登録方法）の紹介のあと、作成時の注意点などを解説し、あとは「32本ノック」ということで練習問題と解説を32本用意しています。

この練習問題を実際に解きながら（作りながら）、ブックマークレットの作成について学ぶことを目的にしています。
対象の読者として、「ブックマークレットに興味がある人」「JavaScriptの入門書を読んだが、実用的なプログラムを作った経験がない人」「JavaScriptでHTMLのDOMを気軽に操作したい人」を想定しています。
前提として、「HTMLやCSSについての最低限の知識」と「JavaScriptやプログラミングについての基本的な知識」が必要です。

以下、「はじめに」の内容を紹介します。

独自のプログラムをWebブラウザ上で実行するとき、Webブラウザの拡張機能がよく使われます。さまざまな開発者によって無料で提供されているものもあり、便利に使っている人も多いでしょう。

しかし、このような拡張機能を新たに開発するのは少し面倒ですし、使うときにはインストールが必要です。個人で使うのであれば問題なくても、会社ではセキュリティポリシーなどでインストールが制限されていることもあります。

このような制限がなく手軽に使えるのが、Webブラウザが備えるブックマーク（お気に入り）機能です。よく使うWebサイトのURLを登録する使い方が一般的ですが、URLだけでなくJavaScriptというプログラミング言語で書いたプログラムを登録できます。このように、ブックマークとしてプログラムを登録し、Webブラウザ上で実行することで、Webサイトが用意していない独自の内容を処理できるようにしたものをブックマークレットといいます。

プログラムを変更するときは、登録したブックマークのURL欄の内容を編集するだけなので、ちょっとしたプログラムであればWebブラウザだけで作成・変更・削除ができます。

開発に使うプログラミング言語はJavaScriptだけなので、JavaScriptを少し学べば自由にカスタマイズできます。JavaScriptに慣れている方であれば、思いついた処理を記述するだけでブックマークレットを作成できるでしょう。

昔はWebブラウザによって挙動が異なりましたが、現在はWebブラウザ間の互換性の問題もほとんどなくなりました。本書に掲載しているようなちょっとしたプログラムであれば、どのWebブラウザでも問題なく動作します。

このように便利なブックマークレットですが、実際に使ってみないとその便利さはなかなか伝わらないものです。多くの人にとってはブックマークレットでどんなことができるのか、どのように使えば便利なのかわからないものです。

そこで本書ではよく使われているブックマークレットを作ることを通して、その仕組みを解説することで、自由にカスタマイズできるようになることを目指します。「32本ノック」というタイトルの通り、練習問題を解くことで考えながら学ぶことを目的にしていますので、まずはご自身で考え、入力してみてください。

その後、作ったプログラムに機能を追加していくことで、JavaScriptやHTML、CSSの知識を深めることにつながるはずです。HTMLのDOMを操作するためのCSSセレクタや正規表現、便利なサービスの活用など、知識の幅が広がることを期待しています。

『ブックマークレット32本ノック』はじめに

AmazonにてKindle版も出ます

技術書典で頒布するだけでなく、AmazonでもKindle版を販売します。
こちらは消費税がかかりますが、「技術書典のサイトに登録したくない」「電子書籍はKindleで統一している」という方はこちらをご利用ください。

技術書典の会場では、紙の本＋電子版のセットを税込1000円で購入できますので、可能な方は技術書典の会場までお越しください！


この記事が気に入ったらサポートをしてみませんか？