ラベル スマホ の投稿を表示しています。 すべての投稿を表示
ラベル スマホ の投稿を表示しています。 すべての投稿を表示

2020年9月6日日曜日

android 版 firefox 79+ (fenix) で任意のスクリプト(ブックマークレットなど)を実行する

  • 2023/12/20 androidスマホ版のfirefoxで自作アドオン Script Menu が使えるようになりました。ここで紹介している fmsm と多少仕様は異なりますがその後継として作成したものです。興味のある方は addons.mozilla.org に登録してあるのでご覧ください
  • 2021/9/9 firefox v.92.11でブックマークレットが使えるようになりました

 androidスマホ版のfirefoxがバージョン68(fennec)から79(fenix)にアップデートされてブックマークレットが使えなくなったのでuBlock Origin (ubo) の機能を使って任意のスクリプトを実行するFirefox Mobile Script Menu (fmsm) を作りました。ソースコードはgithubにあります。

fmsmをインストールするにはfirefoxにアドオンuBlock Origin (ubo) がインストールされている必要があります。fmsmを入れるために新規にuboをインストールすることは勧めません。uboはとても優れたアドオンですが副作用もあります。今まで問題なく閲覧出来ていたサイトの表示がくずれたり何かの操作が出来なくなったりする可能性があります。

fmsmを入れて任意のスクリプトを実行可能にすること自体大きなリスクです。それに加えてfmsmをインストールするにはuboの上級者向け設定をいじる必要がありそれもまたリスクです。これらのリスクを理解したうえで自己責任でfmsmを利用してください。

インストール

最初に言っておきます。android版firefoxではuboの各種設定のテキスト編集要素は反応が悪すぎてまともには使えません。テキストは他のアプリで編集して貼り付けるのがいいでしょう。

まずfirefoxの設定→カスタマイズでツールバーを「画面上部」 にしてください。そうしないと次の手順で一番下にあるuserResourcesLocationが下部ツールバーに隠れて見えません。

uboのダッシュボードを開き設定タブを表示し「私は上級者です (※必ずお読みください)」にチェックを入れる。チェックを入れると歯車アイコンが表示されます

歯車アイコンをタップして上級者向け設定を開きuserResourcesLocationの値の末尾にfmsmのurl (https://yobukodori.github.io/firefox-mobile-script-menu/script-menu-ubo-resource.txt) を追加する。「変更を適用」が黄色くなるのでタップして適用します。userResourcesLocationは一番下にあります。すべて選択&コピーで他のアプリにペースト編集して貼り付け戻すのがいいでしょう。

userResourcesLocation unset https://yobukodori.github.io/firefox-mobile-script-menu/script-menu-ubo-resource.txt 

【fmsmの更新について】 上記userResourceは5日間隔で自動更新されます。fmsmのアップデートをすぐに適用したい場合はunsetとURLの間の空白を増減させてください。空白の数が変わると「変更を適用」が黄色くなるのでタップして適用更新します。
 また、たまにそれまで表示されていたメニューボタンが表示されなくなることがあります。その時も上記方法で更新してみてください。経験的にこの方法で再び表示されます。

次にMyフィルタータブを開きます。 そこにfmsmのパスワードを設定するフィルタを記述します。2番目と3番目の引数はパスワードを記述するのは4番目の引数だということが分かるように入れました。 script-menu, , , password: <パスワード> でもいいです。

*##+js(script-menu, pw, name, password: <パスワード>)

 「変更を適用」ボタンが黄色くなるのでタップして適用します。
【注意】当面スクリプトを登録する予定がなくてもこのパスワードは必ず設定してください。パスワードを登録しないとあなたが購読しているフィルターリストの作者に悪意があれば勝手にパスワードを設定しスクリプトをメニューに登録できてしまいます。

以上でインストール完了です。

スクリプト登録

実行したいスクリプトはMyフィルタータブにuboのフィルタとして記述します。Myフィルターを変更したら一番上の[✔]をタップして変更を適用します。

スクリプトの登録形式は次のようになります。

<ホスト名>##+js(script-menu, <名前>, <スクリプト>[, {<オプション>}])

<ホスト名>:スクリプトメニューを表示するサイトのホスト名です。カンマで区切って複数記述することもできます(例 google.com,yahoo.com)。またPublic Suffixにワイルドカードを使えます(例 google.*はgoogle.comやgoogle.co.jpに一致します)。すべてのホストに適用するには * と記述します。

<名前>:メニュー項目として表示される名前です。
メニュー項目には名前と一緒に概要(スクリプトのURLやコードの一部)も表示されます。組み込みスクリプトは概要を表示しません。

<スクリプト>:スクリプトのURLやjavascript:で始まるコードやfmsm:で始まる組み込みスクリプト名を記述します。

{<オプション>}:JSON形式でオプションを複数指定できます。省略可。

  • "charset":<スクリプトファイルの文字セット名>
    例) {"charset":"shift_jis"} 
  • "aes":{"pass":<passphrase>,"iv":<initial vector>}
    ファイルがAES-CBCで暗号化されたスクリプトであることを示します。
    例) {"aes":{"pass":"1234567890123456"\,"iv":"1234567890123456"}} 
  • "once":true
    一度実行したらメニューから削除するよう指定します。
  • "index":<数値>
    メニュー内の表示順を指定します。数値が小さいほど上に表示されます。indexのない項目はindexのある項目の下に置かれます。indexのない項目同士は名前の昇順で配置されます。
  • "summary":"no"
    メニュー項目の概要(スクリプト名の下に表示されるURLやコード)を非表示にします。このオプションを指定したメニュー項目の背景色は黄色になります。あなたが購読しているフィルターリストの中で誰かが(パスワードを一致させ)スクリプトの登録に成功したとき概要があれば他人が登録したことを察知する助けになります。概要を非表示にすることはこの意味でリスクを増大させるので黄色背景で警告します。

【注意】各引数内のカンマ(,)は\でエスケープしてください。こうやって注意喚起している自分でも、この記事のためのフィルタを書いていて思う通りの結果にならず悩んでコンソール出力を見て「あら!カンマをエスケープしてなかった!」というのがありました。

登録のサンプル

では例としてwikipedia.orgで表示するスクリプトを登録していきます。

  1. まずは外部スクリプトを登録します。
    wikipedia.org##+js(script-menu, <パスワード>, こんちは, https://yobukodori.github.io/firefox-mobile-script-menu/sample/hello.js)

  2. スクリプトを直接記述することもできます。(コードの中でカンマを使う場合は\でエスケープすることをお忘れなく)
    wikipedia.org##+js(script-menu, <パスワード>, 1秒後にこんちは, javascript:setTimeout(alert\,1000\,"こんちは"))

  3. utf-8ページにshift_jisスクリプトを読み込みます。とりあえず説明のため記述しましたが正常に機能しません。github.ioはファイルの文字セットがshift_jisでもContent-Type: application/javascript; charset=utf-8で返してくるからです。charsetなしで返してくれるならちゃんと機能するんですが。
    wikipedia.org##+js(script-menu, <パスワード>, shift_jisで書かれたスクリプトを実行, https://yobukodori.github.io/firefox-mobile-script-menu/sample/encoding-shift_js.js,{"charset":"shift_jis"})

  4.  AES-CBCで暗号化されたテキストファイルを読み込んで復号しスクリプトとして実行できます。詳しい説明はいずれ。同じページで悪意のあるスクリプトが実行されるとpassもivも簡単に取得できあなたの暗号化されたファイルも簡単に復号できます。(オプション内のカンマはエスケープ)
    wikipedia.org##+js(script-menu, <パスワード>, AES-CBC暗号化スクリプト実行, https://yobukodori.github.io/firefox-mobile-script-menu/sample/crypted-js.txt, {"aes":{"pass":"1234567890123456"\,"iv":"1234567890123456"}})

  5. 一度実行したらメニューから削除します。(オプション内のカンマはエスケープ)
    wikipedia.org##+js(script-menu, <パスワード>, 一度だけ, javascript:alert("一度だけはメニューから削除されました"), {"once":true\, "index":1})

  6. fmsm組み込みのスクリプトを呼び出すことができます
    wikipedia.org##+js(script-menu, <パスワード>, ページ先頭へ, fmsm:scroll-to-top, {"index":100})
    wikipedia.org##+js(script-menu, <パスワード>, ページ末尾へ, fmsm:scroll-to-bottom, {"index":101})

  7. ページのソース(生のHTMLソース)を表示します。DOMには生のHTMLソースはないのでページのURLのファイルを取得しに行きます。それなりに時間がかかるので取得後すぐに別タブに表示しようとするとブラウザのポップアップブロックに引っ掛かります。それで取得後ダイアログを表示しユーザーにタップしてもらって別タブに表示するようにしてポップアップブロックを回避しています。
    wikipedia.org##+js(script-menu, <パスワード>, ページのソースを表示, fmsm:view-source)

  8. DOMのouterHTMLを表示します。テキストが選択されているときはそれを包含する要素のouterHTMLを、選択されてないときはhtmlのouterHTMLを表示します。
    wikipedia.org##+js(script-menu, <パスワード>, domのouterHTMLを表示, fmsm:view-outerhtml)

上記のフィルタをMyフィルタータブに記述してwikipedia.orgを開いてみましょう。画面右端上のほうに[S]ボタンが表示されるはずです。そのボタンをタップするとスクリプトメニューが表示されます。

 
 

メニュー下部の[閉じる]はメニューを閉じます。[終了]はメニューを閉じ更に[S]ボタンを削除します。削除した[S]ボタンを再表示するにはページを再読み込みしてください。

サイトによっては(たとえばtwitter.com)CSPのルールでブロックされて[S]ボタンが表示されません。メニューは表示されてもCSPやCORSの制限でスクリプトが実行されないこともあります。

 

2017年10月29日日曜日

スマホでブックマークレットを登録して使う方法【Android版Chrome編】

スマホやタブレットでもブックマークレットを使うことができるがPCとは登録方法や使い方が少し異なる。スマホ初心者のためにスクリーンショットを入れて解説する。

初心者のためにブックマークレットについてひとつ注意しておきたいことがある。 ブックマークレットの効果は実行したときに表示していたページだけに有効だ。ページを再読み込みしたり違うページに移ったりしたら効果は消える。

では始めよう。

ブックマークレットを登録する


ダミーのブックマークを登録し、その名前をブックマークレットの名前をコピペして書き換え、URLをブックマークレットのアドレス(javascript)をコピペして書き換える。では順番に説明する
  1. まずダミーのブックマークを登録する。適当なページでブラウザメニューを開く。


  2. ☆マークをタップすれば表示中のページがブックマークに登録される


  3. 次は今登録したブックマークを編集していく。まずは名前の書き換えだ。ブックマークレットを置いてあるページを表示してブックマークレットのリンクを長押しする


  4. メニューの「リンクテキストをコピー」タップする


  5. ブラウザメニューを開き「ブックマーク」をタップする


  6. リストからダミーで登録したブックマークを見つけ右端の3点マークからメニューを開く


  7. メニューの「編集」をタップする



  8. 名前の適当な場所を長押しして「全て選択」をタップ


  9. 全て選択された状態で「貼り付け」をタップしてリンクテキストを貼り付けて名前を書き換える。(ここでは元の名前を尊重する手順を示したが自分が分かりやすい使いやすい好きな名前にして構わない)

  10. 書き換えた名前はブックマークレットを実行するときに必要になるので覚えておく。左上の←マークで編集を終了する


  11. 右上の×マークでブックマークリストを閉じる


  12. 元のページに戻るので今度はURLの書き換えだ。再びブックマークレットのリンクを長押しする


  13. 今度はメニューの「リンク アドレスをコピー」タップする


  14. ブックマークリストを表示させリストからさっき名前を書き換えたブックマークを見つけ右端のメニューから編集画面を開く


  15. URLの一部を押すと全て選択状態になるので「貼り付け」をタップしてリンクアドレスを貼り付けてURLを書き換える

  16. URLを書き換えたらブックマークレットの登録が完了。ブックマークリストを閉じて終了。(豆知識:ブックマークレットのURLはjavascriptというプログラミング言語のコードになっている)



ブックマークレットを使う


  1. 表示中のこのページでブックマークレットを使おう。アドレス欄に登録済みのブックマークレットの名前を入力する



  2. するとドロップダウンリストの候補一覧にブックマークレットが表示されるのでタップする。このときブックマークレットが実行される


  3. 実行した後は元のページに戻る。実行の効果はブックマークレットによってさまざまだ。(ZoomMe実行後の拡大操作についてはZoomMeのページを参照)


以上で解説終わり。あなたがブックマークレットを使えるようになっていれば嬉しい。

2017年10月28日土曜日

スマホでブックマークレットを登録して使う方法【Android版Firefox編】

[2021/9/9] android版firefox v.92.1.1 でブックマークレットが使えました! 諦めて完全放置していたのですがいつのまにか修正されていたようです。個人的には代替手法に移行したのでブックマークレットには戻りません。

[2020/8/19] android版firefoxがv.79.0.4になりブックマークレットが使えなくなりました💩

スマホやタブレットでもブックマークレットを使うことができるがPCとは登録方法や使い方が少し異なる。スマホ初心者のためにスクリーンショットを入れて解説する。

初心者のためにブックマークレットについてひとつ注意しておきたいことがある。 ブックマークレットの効果は実行したときに表示していたページだけに有効だ。ページを再読み込みしたり違うページに移ったりしたら効果は消える。

では始めよう。

ブックマークレットを登録する(2021/9/13現在この方法では登録できません。「リンクをブックマーク」がメニューに出なくなりました。今は更新する気力が・・・)

  1. ブックマークレットを置いてあるページを表示してブックマークレットのリンクを長押しする


  2. 出てきたメニューから「リンクをブックマーク」をタップして登録する

これで登録は完了だ。

ブックマークレットが登録されているか確認する

  1. ブラウザのメニューを出す


  2. 「ブックマーク」をタップする


  3. ブックマークの一覧が表示されるので登録されているか確認する。ブックマークレットを実行する時に名前が必要なので覚えておく


ブックマークレットを表示中のページで実行する


ページを拡大できるようにするブックマークレットZoomMeを例として説明してゆく。モバイル版Youtubeは拡大できないので拡大できるようにZoomMeを実行してみよう。
  1. アドレス欄に登録済みのブックマークレットの名前を入力する


  2. するとドロップダウンリストの候補一覧にブックマークレットが表示されるのでタップする。このときブックマークレットが実行される


  3. 実行した後は元のページに戻る。実行の効果はブックマークレットによってさまざまだ。


  4. ピンチで拡大操作するとZoomMeの効果で拡大できる。


以上で解説終わり。あなたがブックマークレットを使えるようになっていれば嬉しい。

2017年10月25日水曜日

スマホサイトをピンチで拡大できるようにするスマホ用ブックマークレット

スクリプトを書いてブックマークレットにしたけど書いた後でブラウザやandroidの設定で拡大できることを知った。
  • android版firefoxでは「設定」→「アクセシビリティ」 で「ズームを常に有効にする」をオンにする
  • android版chromeでは「設定」→「ユーザー補助機能」で「強制的にズームを有効にする 」をオンにする
  • androidは設定→ユーザー補助→拡大操作をONにすればすべてのアプリで表示を拡大できる

スマホやタブレットのブラウザでモバイルサイトを見るとき拡大できないことがある。視力の悪い人間にとっては不便この上ない。で拡大できるようにするスクリプトを書いてgist.github に「スマホサイト(モバイル用ウェブページ)を拡大(ズーム、拡大縮小)できるようにする」を公開した。
上記スクリプトを簡単に使えるようにブックマークレット化した。
動作確認ブラウザ:firefox(nightly)58, chrome61 (いずれもandroid7.0)

ZoomMe! v.0.1.1インラインコード版←これをブックマークに登録して、拡大したいページを表示しているときに実行する。特に結果表示はしないので実際にピンチで拡大操作して効果を確認。
スマホでブックマークレットを登録して使う方法【Android版Firefox編】
スマホでブックマークレットを登録して使う方法【Android版Chrome編】

【Chromeでの拡大操作の仕方】
ChromeではZoomMe実行後そのままピンチで拡大操作しても拡大できない。次のどちらかのやり方で拡大できる。
  • 少しスクロールさせて新しい部分を表示させてそこに一方の指を置いてピンチする
  • ブラウザのメニューからページ内検索を表示させそれを閉じてからピンチする
一度拡大に成功したら後はどこでピンチしても拡大できる

備考

firefoxならアドオンの tampermonkey を入れてこのスクリプトのリンクに飛んでインストールするのもいい。いちいちブックマークレットをタップする面倒もなくページを開いたときに自動で実行されるようになる。
*自分の環境では tampermonkey へのスクリプトインストールが1回で成功しない。「インストール」ボタンを押してページが自動で閉じたら成功なのでそれまで何度もボタンを押す必要があった。

実行したいときだけ実行するほうがいいならブックマークレットがいい。