iOSのSafariでカスタムJSやCSSを使える拡張機能「Userscripts」の使い方

2023-08-27 2023-12-12

iPhoneやiPadのSafariで､任意のJSやCSSを実行できる拡張機能「Userscripts」の使い方をご紹介｡

例えば､このようなJSを作成し

$("body").css("background", "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)"); //緑のグラデーション

google.co.jpで実行すると､このように反映されます｡

Userscripts Google test

CSSの変更だけでなく､自動でフォーム入力したり､ボタンを押したり､色々できます｡

アプリはこちら｡

Userscripts

Justin Wasack無料posted withアプリーチ

iCloudにフォルダを作成

まず､iCloud Drive上にフォルダを作成します｡

今回は「test」というフォルダを作成しました｡

iCloud Driveにtestフォルダを作成

ローカルではなくiCloud上に設置することで､PCで編集してiPhoneで確認したり､デバイス間で共有できるので便利です｡

アプリの設定と､権限の設定

Userscriptsを起動し「Set Userscripts Directory」から先程作成したフォルダを設定します｡

Userscripts iOS

あと､iPhoneの「設定 > Safari > 拡張機能 > Userscripts」と進み､スイッチをオンにします｡

下の「すべてのWebサイト」は「許可」または「確認」にしておきます｡

Userscripts iOS 拡張機能許可

JSファイルを作成

試しに､以下のようなコードでJSファイルを作成｡

// ==UserScript==
// @name        test
// @description JSファイルのテストです｡
// @include     https://www.google.co.jp/*
// @require     https://code.jquery.com/jquery-3.7.0.min.js
// ==/UserScript==

$("body").css("background", "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)"); //緑のグラデーション

コードについて､詳しくは後述します｡

「test.js」という名前で､先ほど作成したフォルダに設置します｡

iCloud Driveにtest.jsを作成

iPhoneやiPadでコードを作成する場合 (Macを使わない場合) は､別途テキストエディタのアプリが必要です｡

それを使用してJSファイルを作成してみてください｡

Safariで実行

Safariで､JSを実行したいウェブサイト (今回はgoogle.co.jp) を開き

アドレスバーの「ああ」から「Userscripts」をタップ

Safari Userscripts

初回はポップアップが表示されるので､お好みで「一日だけ許可」または「常に許可」をタップ

Userscripts アクセスを求めていますポップアップ

すると､このウェブサイトで実行できるファイルの一覧が表示され

Userscripts Safari

ページを更新すると反映されます｡

Userscripts Google カスタマイズ

コードの書き方

UserscriptsでJSやCSSを実行するには､コードの先頭に以下のようなメタ情報が必要です｡

// ==UserScript==
// @name        test
// @description JSのテスト
// @include     https://www.google.co.jp/*
// @require     https://code.jquery.com/jquery-3.7.0.min.js
// ==/UserScript==

$("body").css("background", "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)"); //緑のグラデーション

最初､これを知らなくて苦戦しました...

ざっくり､メタ情報の書き方

@name

タイトル (必須) (好きな名前を)

@match

実行したいURLをマッチパターンで指定 (@matchまたは@includeのどちらか必須)

書き方の例

(すべてのサイトで実行可能)

*://*/*

(特定のドメインのサブドメインで実行可能)

*://*.kentokanai.net/

(特定のサイトの特定のディレクトリ配下で実行可能)

*://blog.kentokanai.net/userscripts/*

@include

実行したいURLを指定 (@matchまたは@includeのどちらか必須)

書き方の例

(すべてのサイトで実行可能)

*://*/*

(httpかhttpsの末尾が「google.co.jp」となるドメインで実行可能)

http*://*google.co.jp/*

@exclude

除外したいURLを指定 (書き方は@includeと同様)

@description

説明

@require

読み込みたい外部のファイルをURLで指定します｡
jQueryのcdnを指定するとjQueryを使えます｡

@matchと@includeの書き方の違いについては､ ↓こちらの記事がわかりやすいです｡

@match マッチパターンの書き方 - おねむゲーマーの備忘録

@name の値は､ファイル名と同じでなくても大丈夫です｡自由に設定してください｡

その他のメタ情報については Userscripts公式ドキュメントをご覧ください｡

CSSの作り方

CSSは､このようにメタ情報を設定することで実行できます｡

/* ==UserStyle==
@name        test CSS
@description CSSのテスト
@include     https://www.google.co.jp/*
==/UserStyle== */

body {
	background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

これを「style.css」などの .css 形式で保存しましょう｡

ちなみに､私の場合

最初､CSSの拡張子が表示されず､Userscriptsに認識されないということがありました｡

iCloud Drive .css 拡張子表示されない

そういうときは､右上のメニュー > 表示オプション > すべての拡張子を表示にチェックを入れたら解消されました｡

iCloud Drive すべての拡張子を表示

#001
2023-10-11
匿名さん

はじめまして。大変有用な情報ありがとうございます。差し支えなければ教えていただきたいのですが、ラストに記載されているCSSの作り方ですが、ファイル自体は.jsでの保存なのでしょうか、それとも.cssになるのでしょうか。

また、@nameに関しては、保存するファイル名と同じでなくとも問題ないのでしょうか？

自分はCSSの記述のほうが馴染みがありますので、ぜひ試してみたくご質問でした。

（記載されているtest.jsでは問題なくChromeに反映されました。ありがとうございます。）
#002
2023-10-12
オーナー

CSSは.cssで保存してください｡

@nameに関しては､ファイル名と同じでなくても大丈夫です｡

ご意見を頂戴し､記事にも反映させていただきました｡

コメントありがとうございます！
#003
2023-12-12
匿名さん

初歩的な質問で恐れ入ります。JSコードを作成するとありますが、別途テキストエディターなどのアプリが必要なのですか？
#004
2023-12-12
オーナー

すみません､Macで編集する前提で書いてました...

そうですね､iPhoneやiPadだけで完結させる場合は､別途テキストエディタのアプリを入れないと編集できません｡

「このアプリがおすすめ！」とかは特にないのですみませんが､探してみてください｡

ご意見を頂戴し､記事にも反映させていただきました｡

コメントありがとうございます！