tool-img
パソコンのファイルを片付けてると、去年に作ったはいいけど特に公開もしてなかったツールが発掘されたので紹介してみます

● ページの初期化処理をできる拡張機能
● マップメモ
● 拡張機能をまとめる拡張機能

の 3 本立てです

extrainit

まずはひとつめ
Chrome 用拡張機能です

どんなもの？

URL を誰かに送るときって、フォームに決まったデータを入力した状態で開いてもらいたいとか、
スクロール量指定してここの位置から見てほしいとか、
ありますよね
というかありました

でも普通は URL を送るだけじゃそういうことはできません
「この当たりまでスクロールしてー」とか「この値入力してねー」とかも一緒に伝えてやってもらうの
ちょっと面倒ですよね

それを解決してしまおう！というものです

機能紹介

この拡張機能がインストールされていた場合に、開いたページの URL に拡張機能用のクエリがあるかを調べます
あった場合はそのクエリに応じて追加の初期化処理を行います
初期化処理というのがフォームにテキストを入れたり、スクロールしたりそういったものです

一覧にすると
● input: input/textarea/select に値を設定できます
● scrollTo: 絶対座標で指定した場所へスクロールします
● scrollBy: 相対座標で指定した場所へスクロールします
　(# がついてたり開いたときに一番上にないときには便利かも)
● scrollInto: 指定した要素 (div とか) が見えるようにスクロールします
● property: 指定した要素 (div とか) のプロパティを変更します
● event: 指定した要素にイベントを起こします
● delay: 操作を実行するのを遅延させます

という機能が使えます

作っていて気づいたのですが URL を開くだけで実行されるので悪いことをしようとする人が悪用できてしまいます
プロパティを書き換えたりフォームの値を変更してイベントまで起こせば、開いた人が気づかないうちにこっそりフォームを送信することができます
例えば Twitter のページを開いたら変なメッセージがツイートされているとか

こんなマイナー拡張機能を悪用するための URL なんていったい誰が書くんですか、と思いはしますが安全のためセーフモードもつくっています

モード

上の全部を実行できるのが Powerful モードです
信頼できるもののみ開く用です

それに対して、開いたタイミングでフォームの入力とスクロールだけを操作できるのが Safe モードです
イベントを起こしたりできないので変なデータがあっても送信ボタンを押さなければ問題なしです
遅延する機能もありにしようかなと思ったのですが、入力した後に気づかないうちに変更されてるというのは困るのでなしにしました

実行前の確認

確認機能もあります
ON にすると実行前に実行内容が表示されます
許可するとその内容が実行されます

OFF にすると確認なしで実行してしまいます
OFF と Powerul モードの組み合わせはオススメできません

操作の書き方

スクロールするなどの操作は JSON 形式で設定を書いて決まった形式に変換する必要があります
オプション画面の下の方に変換機能がついています

exin-opt

[{"scrollTo": {"": {"top": 500}}}]
こういう JSON を書きます
そうするとこのように変換されます
?extrainit=W3sic2Nyb2xsVG8iOnsiIjp7InRvcCI6NTAwfX19XQ==
これを URL のクエリ部分につけて開けば上から 500px の位置にスクロールした状態で開かれます


JSON の書き方をわかっている前提でもうちょっと詳しく

一番外側の配列は操作のリストになります
1 つめから順番に実行されます
それぞれのオブジェクトのキーに操作命令を書きます
"property" や "scrollTo" などが命令の名前です
命令のキーに対する値のオブジェクトは命令によって異なります

例えば delay だと数字を書けば、(その数字×マイクロ秒)だけ次の操作を遅延させます
その他はターゲットにする要素のセレクタをキーにして、バリューにその要素に設定する値を書きます
{"property": {"#foo": {"value": "texttextext"}}},
{"event": {"#bar": {"type": "click"}}},
{"delay": 2000},
{"scrollTo": {"": {"top": 300, "behavior": "smooth"}}}
これだと、
#foo 要素の value プロパティを texttextext に変更
#bar 要素に click イベントを発生
2 秒待機
上から 300px の場所にスムーズスクロール
という操作です
scrollTo のキーが空文字になっていますが、空文字にするとページ全体です

ところで実用性は？

というものを作ってみたんだ
ってところですが一番の問題が相手にこの拡張機能を入れておいてもらわないといけないということなんですよね
なんだかんだよく使うデフォルト入力を設定した URL をお気に入りにして自分用みたいなものになっています

ダウンロードとインストール

ダウンロード

インストール方法

mapmemo

今度は普通のウェブページのツールです

どんなもの？

ひとことでいうと地図の好きな場所にメモを書けます
まずロケーションやルートを地図上に配置します
そこに名前・メモ・タグを設定できます

数年前だと地図を使ったツールってもっといろいろあったと思うのですけど、最近ってあんまり見ないです
もうちょっとあってもいいと思うのですけどね
もしかするとパソコン向けじゃなくてモバイルアプリ向けが多いのかな

たしか Google の公式でも自分用の地図を作るサービスがあったと思います
でもアカウント必須でログイン必須でオンライン保存という制限つき
気軽に使えて、公開はしないでローカルだけのメモにしたい！という自分の要望で作りました

機能紹介

自分でもあんまり覚えてなかったりします
そもそも最後まで完成してたっけ・・・？
ちょっと使った感じ動いてたので大丈夫でしょう、たぶん

画面はこんなのです

mapmemo-image

なんか Vivaldi の私が使ってるテーマと似てるなと思って Vivaldi で表示してみたらすごく馴染んでます
狙ったりはしてないですよ

画面の見方です
矢印がロケーション、折れ曲がった線がルートです
名前のとおりですが、ロケーションは一つの場所を表すもので、ルートは道などを表すものです

地図の右上にある Location/Route ボタンを押すと新規追加モードになります
この状態で地図の好きな場所をクリックすると追加できます

通常モードではロケーションやルートをクリックして詳細をみたり編集したりできます
選択中のロケーションやルートの詳細は下側の暗いところに表示されています
ここを修正したり地図上の矢印などをドラッグして位置を変えたあとに保存マーク「💾」を押すと上書き保存されます
※押し忘れに注意！

右側のリストが地図上にあるすべてのロケーションとルートです
ロケーションはオレンジ色で、ルートは緑色です
上の検索ボックスで表示する項目を絞り込むことも出来ます

つかいどころは？

あまり通らない道を通ってみたときにちょっと興味あるお店をみつけた、今後いってみようかなって思ったときにメモしたり、そんな感じです
場所の情報は地図上にあったほうが見やすくてわかりやすいですからね

Google で検索すると必要なのもいらないのもなんでもでてきてしまいます
自分でメモしたものだけをみたいときに役立ちます
タグ機能もあるので、レストラン、カフェ、書店、100均、スーパー、などを設定しておいて絞り込むこともできます
お昼ご飯は外食しようと思ったときに、よく行くお店だけを表示してどこにしようかなーと考えてみたりもできます
候補が多くなると頭の中だけだと忘れてるお店もあって、あとになってそういえばあの店行きたいと思ってたんだった・・と気づくことも少なくないですので

あとはメモのところに昔なんだったかを残しておけば、いまローソンあるところ前は何だったっけ？と思ったときに役立ったりも
地図だと常に最新になってしまうのでこういう情報って自分でメモっておくのが一番探しやすいのですよね

URL

URL はこちら！⇩

mapnote

Customizer

最後はまた拡張機能です
これまでこのブログではいろいろ拡張機能を公開してきました
Twitter の改行が表示されなかった頃に改行を表示するだけ、みたいな小さいものも多いです
全部公開してるかはわかりませんが手元には 30 個以上拡張機能がありました

拡張機能っていっぱいあると管理が面倒です
それにそれぞれがメモリを使うので Chrome が重くなる問題もあります
そこで全部を 1 つにまとめよう、ということで作った拡張機能です
ひとことでいうとユーザスクリプトを実行する拡張機能です

拡張機能をまとめる

ユーザスクリプトというと複雑そうに思うかもしれません
ですが、基本的にはスクリプトということを意識しなくても良くなっています
ブログで公開しているスクリプトを拡張機能が自動で読み込みます
そこから使いたいものを選んで取り込むだけです
そうするだけで、ものによっては自動で実行されます
手動実行用のものはポップアップから選んで実行ボタンを押せば実行されます

自分で細かな設定をしたり動きを変えたり、自作のスクリプトも動かしたいという人はスクリプトを編集して好きにできます

スクリプト

詳しく書くとすごーく長くなるので、今回は紹介だけにしてスクリプトの詳細については省きます
また今度暇な時に詳しい仕組みとかを書いてみようと思ってます

念の為書いておきますが、拡張機能として動くので危険なコードを書いたら普通に実行できてしまいます
パスワードなどの入力した内容をどこかに送信するとか
どこかのサーバに大量アクセスして攻撃するとか
なので拾い物の信用できないコードのコピペには注意してください

使い方

スクリプトを管理するオプション画面と手動実行するポップアップの 2 画面があります
オプション画面はこういう画面です

cmsr01

ここにならんでるのが登録済みスクリプトです
クリックすると右側に中身が表示されるので読んだり書き換えたりができます
最初は何もないです
上の「Provided」を押してサーバにある拡張機能から必要なものを取り込みます

「Provided」タブは同じような見た目ですが編集はできません
自動でサーバにあるものを表示します
たまに更新して増えているかもしれません

cmsr02

使いたいのがあったら、選んで右下の「Save」を押します
すると「Scripts」タブの方に追加されます
自動実行されるタイプのスクリプトならこれだけで使えます
自動実行しない場合は手動実行が必要です
手動実行にはポップアップからとショートカットキーからの 2 種類があります


ショートカットキーはハードとソフトの 2 種類があります
ショートカットキーを設定するには「Shortcut」タブを開きます

cmsr03

ハードショートカットキーと呼んでいるものは Chrome が制御しているものです
それに対してソフトショートカットキーはページ内の JavaScript で制御しているものです
ソフトの方は JavaScript で制御しているので、自由度が高いです
と言っても「順番に A、B、C を通したら起動する」 みたいなことは拡張機能側で対応してません
ユーザスクリプトで自分で制御すればできますけど

ソフトショートカットキーは JavaScript をページ内に埋め込んで実現しているので、埋め込めないページには使えません
例えば「左側のタブに切り替える」という機能があったとします
ソフトショートカットキーに割り当てると、切り替えの最中に Chrome の設定ページなどが挟まるとそこから切り替えられなくなります
なので、基本はハードショートカットキーを使ってハードショートカットキーで割り当てれないキーを使いたいときなどにソフトショートカットキーを使うと良いと思います

ソフトショートカットキーはこの画面上でキーを入力しますが、ハードショートカットキーは Chrome の設定画面から設定が必要です
拡張機能の設定画面の右下にある「キーボード ショートカット」を開いて設定します

cmsr04

ショートカットキーの 00 や 01 などの番号が対応しています


長くなりましたが、次はもうひとつのポップアップ画面からの実行です
この拡張機能のアイコンをクリックするとポップアップ画面が表示されます

cmsr05

上側にあるリストから実行したいものを選んで「実行」を押すと実行できます
下側にスクリプトが出てくるのでその場で変更することも出来ます
いくつかの複雑なスクリプトでは上の方に設定を書けるようにしています
コピーするかダウンロードするかを切り替えたり、対象にするセレクタを書いたりです

サンプル

今あるものから主なものを紹介します

ディレイロード

これは取り込むだけで自動で動きます
まとめてタブを開くとブラウザが重くなってくるのでページを表示したときに読み込むようにします
普通にクリックで開いた場合は何も起きません
Ctrl キーを押しながらクリックしたり、マウスのミドルクリックを使ったときに効果があります
バックグラウンドでタブが開かれたときに拡張機能画面に自動遷移させて、リンク先を表示させません
そのタブを表示したときに本来のリンク先に遷移させます
タブを開くまでは重いページが表示されないのでメモリ消費も節約できます
RSS などで、ひとつずつじゃなく先にタブでいっぱい開いてしまう使い方の人には役立つと思います

画像リンク置換

これは手動実行するものです
まとめサイトなどで画像の URL だけ貼られていることってありますよね
自分でリンクをひとつひとつ開かないといけなくってめんどうです
最初からページ内に貼り付けておいてくれればいいのに・・・

そういうときに使えるのがコレです
リンク先が画像になっていたら、リンクを画像に置き換えます
ただし、リンク先が画像かどうかの判断は「URL に拡張子が含まれてるか」なので画像じゃないものも置き換えられるかもしれません

画像を変換して保存する

これはちょっと特別なもので右クリックを拡張します
画像を右クリックして 「cmsr → 画像を変換して保存する」を選びます
中には JPG・PNG・WEBP があるので好きなファイルの種類を選ぶと変換してダウンロードされます

Downloader

いまのところ一番高機能なものです
ページ内のファイルをダウンロードするためのツールです
基本は画像を前提にしていますが、音声ファイルなどでもたぶん問題ないと思います
画像のまとめサイトなどを開いて、ポップアップから実行するとダウンローダのページが表示されます
「まとめ 春 画像 風景」 みたいなワードで検索してでてきたページのサンプルです

cmsr06

チェックボックスでダウンロードするしないを選択して、上のダウンロードボタンでまとめて保存できます

デフォルト設定で問題なく出来ることが多いですが、サイトによって画像ファイルの位置などが違うのでうまくいかないこともあります
そのあたりは設定で、
○ 画像を探す要素のスコープ指定
○ ファイル名置換
○ ファイル名でフィルタ
○ ソース指定 a タグの href や img タグの src や CSS など
などを調整できます
さらに、サイト内のページは同じ構造になってることが多いのでサイトごとにデフォルトセットを設定できたりもします
・・・が、長くなるので詳しいことは省略します

ライブドアブログ：画像バックアップ

ライブドアブログって記事のエクスポートはあるのに画像はないですよね
楽に全部のファイルをバックアップしたいなって思ったので作ってみました

ライブドアブログの画像管理の画面を開いてポップアップから実行します
自動で「次へ」が開かれて最後まで行ったらクリップボードにコピーかダウンロードされます

注意：
○ 途中から始めると途中からしかバックアップ対象にならないので一番最初のページを開いてから実行してください
○ 1行表示のスタイルを選択している必要があります（画像だけが並んでいるスタイルじゃだめ）
○ 時間短縮のために、100件単位で表示しておくことをおすすめします

それと、カテゴリで絞り込んでから実行すると、カテゴリ内のみバックアップという使い方もできます
全部じゃなくて画像を選択してバックアップしたい、というときには上の Downloader との連携が使えます
連携するには URLDownload というスクリプトを使います
これは使うとページ内の画像じゃなくて URL を指定してダウンローダを使うものです
ライブドアブログのバックアップ機能でクリップボードにコピーする方を選んで、コピーされた URL をダウンローダに入れます

ポップアップから実行するときに、デフォルトで入っているダミーの
「https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png」
のところに改行区切りで URL を入れて実行すれば、こんな風にライブドアブログの画像がダウンローダに並びます

cmsr07

あとは同じように必要な画像にチェックを入れてダウンロードすれば完了です

ところで、ライブドアブログへの画像アップロードは変換処理が入って画質は劣化してしまいます
できる限りローカルに元データを残しておいたほうが良いです

NightMode

画面を暗くします

と言っても、夜向けのに目に優しい色あいにするものじゃありません
真っ暗なところを懐中電灯頼りに進む、そんな雰囲気を味わえるものです
このブログで実行すると、こうなります

cmsr08

明るい部分はマウスについてきます
見たい部分にマウスを動かしてページを見ることができます
一応、ライトの大きさ、ライトの色、周りの暗さ、暗い部分の色、はオプションで調整できるようになってます

思いつきで作って一体どこで使えるんだろう？と自分でも謎な機能です
マウスを動かして自分が見たい部分だけを表示できるので、人前で堂々と見づらいページを見るのにはいいかも？
お仕事中にやってるとゲームみたいに見えて「ゲームしてないで仕事しろ！」って怒られるかもしれませんね（笑）


こんな感じで役立ちそうなものから役立たそうなものまであります

ダウンロードとインストール

ダウンロード

インストール方法