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

iCloudにフォルダを作成

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

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

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

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

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

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

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

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」という名前で､先ほど作成したフォルダに設置します｡

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

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

Safariで実行

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

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

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

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

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

コードの書き方

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%)"); //緑のグラデーション

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

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

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

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

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

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

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

コメント

• #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だけで完結させる場合は､別途テキストエディタのアプリを入れないと編集できません｡

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

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

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