Androidスマホ版Chromeでブックマークレットを作成する方法

この記事では、Androidスマホアプリ版「Google Chrome」でブックマークレット(JavaScript)を作成する方法を書きます。
ざっくり以下の手順です。まぁ記事を最後まで見て画像を見たほうが分かりやすいと思います。
- 登録したいブックマークレットをコピーしておく
- ブックマークに登録したことがない適当なサイトを開く
- 右上の三点ボタン(⋮)をタップ
- 星マーク(ブックマークに追加)ボタンをタップしてブックマーク保存
- 再度三点ボタン(⋮)をタップ
- 「ブックマーク」メニューをタップ
- 先ほど保存した適当なサイトのブックマーク横の三点ボタンをタップ
- 「編集」をタップ
- 好きな名前にしてURL欄にコピーしたブックマークレットを貼り付ける
PCブラウザ版と同様スマホアプリ版でもブックマークレットを作成して、かつ実行できます。通常はできないちょっと高度な操作(JavaScript)を実行できます。
同じGoogleアカウントでログインして同期していれば、PCで作成したブックマークレットが同じくスマホアプリ版にも表示されます。逆にスマホで作成してもPCブラウザ版に反映されます。
本記事は筆者が持っているAndroidスマホでの解説ですが、多分iPhone(iOS)でも一緒だとは思います。違ったらごめんなさい。
スマホ版Chromeでブックマークレットを作成する手順
JavaScriptコードをコピーする
スマホで一からブックマークレット(JavaScript)を書く人はまぁいないと思います。
使いたいコードが既に完成されている状態だと思います。ブログの紹介記事なのか、「Visual Studio Code」などのテキストエディターで事前に自作したブックマークレットなのかは分かりませんが。
とにかく使いたいブックマークレットをコピーします。
例えば、サンプルとしてbody
要素の背景色(background
)を黄色にするブックマークレットを貼っておきます。
javascript:document.body.style.background='yellow';void(0);

念のための注意点ですが、他人の見ず知らずのブックマークレットを何の疑問ももたずに実行するのは危険です。JavaScriptは便利な反面悪いこともできてしまうので、悪意あるコードをうっかり実行しちゃわないようにしましょう。
今の時代ChatGPT(AI)があるので、JavaScript全く分からない方はコピペで危険じゃないか聞いてみるといいです。便利な時代になったもんです。
ブックマークを作成する
これまでブックマークしたことがないサイトを開いて、右上の三点ボタン(⋮)→星マーク(ブックマークに追加)ボタンをタップします。

登録直後は下部にポップアップが表示されるのでタップして編集画面を開きます。

好きな名前、URL欄にコピーしたブックマークレットを貼り付ける
「ブックマークを編集」ポップアップを開けたら、名前を好きなタイトルにします。
そのブックマークレットを実行する時に必要になるので、分かりやすいだけでなく自分がタイピングしやすい文字列かどうかも考慮しましょう。例えば上記のサンプルコードは背景色を黄色にするものなので「黄色」にしてみました。

URL欄に一番最初にコピーしたブックマークレット(JavaScriptコード)を貼り付けます。
ブックマークレットという専用の欄はなく、URLに書き込むのがミソです。
Chromeのブックマークは保存ボタンやチェックマークがないです。左上の「←」ボタンを押すと自動的に保存してくれています。
作成できたか確認
右上の三点ボタン→「ブックマーク」をタップします。

作成したブックマークレットがあります。

ポイントとしてここからタップしても実行してくれません。
Chromeはブックマークページからの実行はどういうわけか反応してくれない仕様になっています。
実行方法は以下記事を参考にしてみてください。
感想
以上、Androidスマホアプリ版「Google Chrome」でブックマークレット(JavaScript)を作成する方法でした。
とはいえ、僕はあんまりスマホアプリ版で実行したいブックマークレットはないです。
無理やり疑似開発者ツールを開く「Eruda」くらいかなと思うんですが、それすらも知識として知っているだけで使ってはないです。皆さんが使っているブックマークレットで便利なのあったら知りたいですね。
余談ですが、Firefox版も書いています。
ディスカッション
コメント一覧
まだ、コメントがありません