「このサイト、ここがこうだったら使いやすいのに」と思ったことは、誰にでもあると思います。
広告が邪魔。この列は要らない。文字が小さい。毎回同じ項目を入力させられる。字幕が1言語しか出ない。並び順を変えたい。ボタンがもう1つほしい。
Webページは他人が作ったものなので、普通は諦めます。でも実は、ブラウザで表示されている時点で、それは自分の手元にあるHTMLとJavaScriptです。数行のコードで、たいていのことは変えられます。
問題は、そのコードをどこに書いて、どうやって実行するかでした。
MacSide AIの答えは少し変わっています。メモに書きます。
仕組みは、メモとブラウザをつなぐだけ
必要なものは2つです。
- MacSide AI（メモにコードを書く）
- MacSide – Browser Connector（Chromeウェブストアの拡張）
あとは、メモにコードを貼って、実行したいサイトを許可するだけ。ページを開けば、そのコードが動きます。
編集も同じ場所でできます。メモを開いて、値を書き換えて、ページを再読み込みする。スクリプトの管理画面を別に覚える必要がありません。
まず動くものを試す：同時字幕
理屈より、動くものを1つ入れてみるのが早いです。このブログでは、コードを丸ごと無料配布しています。
やっていることは、標準の字幕トラックを読み取って下段に整形し直し、もう1言語を上に重ねる、というものです。字幕の断片をつなぎ直したり、句読点を整えたりする処理も入っています。
このコードをメモに貼るだけで、動画に2段の字幕が出るようになります。拡張機能を探して入れたわけでも、有料サービスを契約したわけでもありません。 メモにテキストを貼っただけです。
これが「メモに書いたコードが動く」ということの実物です。
何ができるのか
同時字幕は一例にすぎません。ページのDOMを触れるということは、要するに表示と操作をだいたい変えられるということです。
見た目を変える
- 気が散る要素（サイドバー、おすすめ欄、バナー）を非表示にする
- 本文の文字サイズ・行間・最大幅を、自分が読みやすい値に固定する
- ダークモードのないサイトを、強制的に暗くする
- 表の不要な列を隠して、見たい列だけにする
- 重要な数値だけ色を変えて目立たせる
情報を足す
- 価格表示の横に、税込／税別の換算を足す
- 外貨表示の横に、日本円の概算を出す
- 日時表示の横に、自分のタイムゾーンでの時刻を出す
- 英単語にマウスを乗せたら訳を出す
- 記事に推定読了時間を表示する
操作を減らす
- 毎回同じ内容を入力するフォームを、自動で埋める
- 「次へ」を押し続ける操作を、ボタン1つにまとめる
- 検索条件を、よく使う組み合わせでワンクリック復元する
- 確認ダイアログを自動で通す（自分の作業用に限る）
- ページを開いた瞬間に、いつも押しているタブを開いた状態にする
情報を取り出す
- 一覧ページの項目を、まとめてテキストで書き出す
- 表をコピーしやすい形に整形する
- 開いているページのタイトルとURLを、決まった書式でコピーする
- 選択できないテキストを、選択可能にする
動画・音声まわり
- 再生速度を、標準の刻みより細かく指定する
- 字幕の位置とサイズを、自分好みに固定する
- 特定の秒数だけ巻き戻すボタンを足す
社内の管理画面やSaaSに対して使うと、効果が分かりやすいはずです。毎日開くツールの、毎日気になっている1点を直せます。ベンダーに要望を出して半年待つ代わりに、10行書いて今日直す、という選択肢が生まれます。
Tampermonkeyとの違い
ユーザースクリプトといえばTampermonkeyやViolentmonkeyが定番です。実績も情報量も圧倒的で、置き換えを狙うものではありません。
違いはスクリプトがどこにあるかです。
Tampermonkeyでは、スクリプトは拡張機能の中に保存され、専用のエディタで編集します。ブラウザの中で完結する設計です。
Browser Connectorでは、スクリプトは自分のMacのメモにあります。他のメモと同じ場所に並び、同じエディタで書けます。実行はMacSide AIを経由するので、MacSide AIを終了すれば、ブラウザ側のスクリプトも止まります。
この違いには実用上の意味があります。
止め方が分かりやすい。 アプリを終了すれば全部止まります。「どの拡張がこのページを触っているのか分からない」という状態になりにくい。
書く場所と貯める場所が同じ。 スクリプトも、その説明も、参考にしたURLも、同じメモの中に置けます。半年後の自分が読み返すとき、これはかなり効きます。
配布と受け取りが、ただのテキスト。 このブログの同時字幕コードも、単にコピーして貼るだけです。インストールという概念がありません。
一方で、Tampermonkeyの方が向いている場面もはっきりしています。既存のスクリプト資産（Greasy Forkなど）を使いたい、自動更新がほしい、Chrome以外のブラウザでも使いたい。そういう場合は専用ツールが合います。
安全に使うために
自分で書いたコードをWebページで動かす、というのは強い機能です。だからこそ、いくつか前提を確認しておきます。
動くのは、自分のメモにあるコードだけです。 どこかから自動で取ってきて実行する仕組みではありません。
サイトごとに許可が必要です。 全サイトで無条件に動くわけではありません。
MacSide AIを終了すると止まります。 実行し続ける常駐スクリプトが、気づかないうちに残ることを防げます。
そのうえで、他人が書いたコードを貼るときは中身を読んでください。 これはBrowser Connectorに限らず、ユーザースクリプト全般に言えることです。ページのDOMに触れるコードは、原理的にはそのページ上の情報にも触れられます。ログイン済みのサービスで動かすなら、なおさらです。
こんな人に向いています
- 毎日開く管理画面に、直したい点が1つある人
- JavaScriptが少し書ける人（コピペから始めても構いません）
- 拡張機能を増やしたくないが、ページは調整したい人
- 語学学習で、動画に2言語の字幕を出したい人
- スクリプトと、その説明を同じ場所に貯めておきたい人
逆に、プログラミングをまったくしない人にとっては、配布されているコードを貼る使い方が中心になります。それでも同時字幕のような実用的なものは動くので、入口としては十分です。
よくある質問
プログラミングができなくても使えますか
配布されているコードを貼るだけなら使えます。このブログの同時字幕は、コードをそのままコピーして貼るだけで動きます。
どのブラウザで使えますか
Chromeウェブストアの拡張「MacSide – Browser Connector」を使います。
スクリプトはどこに保存されますか
自分のMacのメモの中です。クラウドに置く必要はありません。
全部のサイトで動きますか
許可したサイトで動きます。無条件に全サイトで実行される仕組みではありません。
止めたいときは
MacSide AIを終了すれば、ブラウザ側のスクリプトも止まります。個別に止めたい場合は、該当のメモを無効にします。
Tampermonkeyと併用できますか
別々の仕組みなので併用は可能です。ただし同じページを両方から書き換えると、思わぬ挙動になることがあります。
「不便だけど、そういうものだから」をやめる
Webサービスの小さな不便は、たいてい放置されます。ベンダーに言うほどでもないし、言っても直るとは限らない。だから慣れる。
でも、その「小さな不便」は毎日発生しています。1日1分でも、年間で4時間です。しかも、慣れているぶん自覚がありません。
Browser Connectorがやっているのは、その1分を自分で直せるようにすることだけです。メモにコードを書く。ページを開く。直っている。
まずは同時字幕を貼ってみてください。「メモに書いたテキストが、Webページの挙動を変える」という感覚が分かれば、あとは自分の不便に応用できます。