MS Access Tips/Sample and VBA and Blog customize etc...

Yahoo!知恵袋の投稿画像をクリックで元サイズで表示する方法

タイトル画像

前回の記事
Yahoo!知恵袋の投稿画像を元サイズで表示するブックマークレット - hatena chips
ではブックマークレットを紹介しましたが、いちいちブックマークバーに移動してクリックするのが面倒だなー、画像クリックで元サイズの画像表示できたらいいなー、ということで作成してみました。需要はまずないと思いますが、WEBでの操作を自動化したいときなどの参考になるかもしれませんので、公開します。ただし、 ブラウザは Chrome 限定です。

任意のサイトで任意のJavaScriptを自動実行させる方法

上記のことを実現するには、まずは、知恵袋のサイトに入ったらスクリプトを自動実行させる必用があります。検索してみると、ScriptAutoRunne というそのものズバリの名前のChrome拡張機能が見つかりました。

任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita

使い方は上記で説明してます。インストールは下記のページから。

ScriptAutoRunner - Chrome ウェブストア

スクリプトの追加

インストールすると、アドレスバーの右端の拡張機能のアイコンの中にイナズママークのものがあります。それをクリックして、歯車アイコンをクリックするとオプションページが開きます。

オプションページを開く

オプションページの上部にあるコードアイコンをクリックすると、スクリプトを入力するボックスが開きます。

スクリプト入力ボックス

ここで、スクリプトの名前、コード、実行させたいホスト名 の3つを入力します。

知恵袋で元サイズの投稿画像を自動で開くスクリプト

名前を ChiebukuroImgZoom、コードは前のブークマークレットのものをコピペ、ホスト名は detail.chiebukuro.yahoo.co.jp を設定しました。

元サイズの投稿画像を自動で開くスクリプトの設定

入力後、ボックスの左のプラグのアイコンをクリックすると、プラグが差し込まれた状態になりボックスの色が黄色になります。これで該当サイトに行くと自動でスクリプトが実行されます。

プラグが差し込まれたスクリプト自動実行状態

これで、知恵袋の投稿画像のある質問ページへ行くと元サイズ画像が別タブで自動で開きます。

これはこれで便利なんですが、投稿画像があると強制的に開きますので、ちょっと鬱陶しいです。

画像をクリックすると元サイズ画像が開くようにする

addEventListener で画像要素(クラス名 'ptsImg')にクリックイベントを登録してもいいのですが、これだと、移動した直後は追記の画像はまだ準備されていないので、追記の画像にはイベントを登録することができません。動的に生成れる画像にも対応するために、document.addEventListenerでドキュメント全体にクリックイベントを登録して、クリックした対象のクラス名を調べて、投稿画像なら元サイズ画像を開くようにします。

画像をクリックすると元サイズ画像が開く設定画面

これで、完成です。投稿画像のある質問ページへ移動して、画像をクリックすると別タブで元サイズの画像が開くようになりました。追記を開いて、そこにある画像をクリックしても元サイズ画像が表示されます。

まとめ

Chrome拡張機能の ScriptAutoRunne は、デザインが格好良いし、インターフェイスとしてもとてもわかり易くできていると感じました。

今回は、知恵袋の元サイズ画像表示というニッチなものでしたが、他にもいろいろな使いみちがありそうです。

Leave a reply






Trackbacks

trackback URL
https://hatenachips.blog.fc2.com/tb.php/516-6b0c6479
該当の記事は見つかりませんでした。