試される大地からスマートフォン用の表示で見る試される大地からプログラミングのTipsや人生論、英語学習の話題など綴っていきます。遅れましたが、あけましておめでとうございます。Webストア上に公開したので、そのことについて書いていきたいと思います。今回作成した拡張のソースコードは以下の私のGitHubリポジトリ上で公開しています。GitHub今回作成したChrome拡張は以下のページからダウンロード可能(無料)です。Chromeブラウザで閲覧中のページ中にある画像をいっぺんにダウンロードすることが出来ます。2chまとめサイトやギャラリー中の画像をまとめて落とすのに使えます。こんな既存のものと丸かぶりで無駄な拡張を作ったのかというと、画像を保存しようとするときに、「右クリック→名前をつけて保存」とやるのがあまりにも面倒なので、こうしたプロセスを省力化出来ないかと思ったからです。できればプログラムを作るにしても面倒くさい操作はできるだけしたくなく、ブラウザ上で保存の操作が出来たほうが何かと都合が良いので、Chrome拡張の作成に踏み切りました。Chrome拡張の作り方Chrome拡張を作るには、HTML+CSS+JavaScript、さらにお好みで(というかほぼ必須)jQueryなど、フロントエンドではお馴染みの知識が必要です。拡張に関する情報を記述するためのマニフェストファイルにはJSON形式を使いますので、これについても知っている必要があります。toolsを入れましょう。ウェブストアChrome拡張のプロトタイプを作るための基礎知識として以下のページなどを参照してみるのが良いと思います。他にググってみるといろいろと情報が見つかります。ChromeChrome拡張の構成とマニフェストファイルChrome拡張は、ブラウザ左上に設置されたボタンをクリックされたときに表示されるpopup.html、裏での処理に使われるbackground.html、拡張に関するオプションを設定するためのoptions.htmlなどのHTMLで構成されます。HTMLの名称は必ずpopup.htmlなどでなければならないということはなく、任意の名称で構いません。HTMLのデザインに関しては通常と同様にCSS、動作はJavaScript(+jQuery)を使って実装します。マニフェストファイルなどは以下のように記述します。Chrome拡張の名称や、Chromeの設定画面上で見ることのできる記述、アイコン画像へのパス、オプションページやバックグラウンドページの指定、アクセス可能なURLなどの設定ができます。"Chromeで表示中のWebページ内にある画像を取得できるChrome拡張です。]}Webページ中の画像を取得する方法これが非常に悩みどころでした。Chrome拡張ではクロスドメイン制約はないので、WebページのHTMLを参照して正規表現などで画像URLを抜き出すことは簡単に出来たのですが、肝心のURLから画像をどうやって保存するかという問題に直面しました。Chrome拡張でJavaScriptを使って画像を取得する方法には2つ考えられます。APIを使って保存するChrome上で内部的に画像URLを指すaタグを作成し、クリックイベントを発火させ、ファイルを保存する他にもあるのかもしれませんが、JavaScriptについて詳しいわけではないので、これ以外の方法があればお知らせください。今回のChrome拡張の実装においては後者のアプローチをとりました。その際に参考にしたページは以下になります。APIを使ったファイル保存だと、AppDataという、通常では隠しフォルダとなっている、サンドボックス化された領域にしか保存できないという大きな制約があったため、この方式での実装を断念しました。小難しい話になってしまいましたが、まとめると、Chrome拡張でのファイル保存はめんどくさく、ローカルに保存したくても相当の制約があるということです。Qiita画像サイズの取得これも相当悩みました。ロードされた画像ならば画像の幅・高さの取得はJavaScriptを使って簡単にできるのですが、ロードが終わっていない段階で画像の幅・高さを取得しようとすると、値が0になってしまうという問題がありました。この問題については、サイズ取得をロードが完了したときのイベントとして設定することで回避することが出来ました。こじょらぼアイコンの取得フリーなアイコンを探したところ、以下のサイトのものが気に入りました。みなさんも各自好きなものを探してみるといいと思います。Icons完成したChrome拡張ソースコードは結構な長さなので、ここでは割愛します。興味があれば上記のGitHubリポジトリを覗いてみるといいかと思います。見た目は以下のようになっています。高さ・幅などのサイズでダウンロードする画像を絞り込みます(アイコンなどの小さな画像をダウンロード対象としないため)。ダウンロード候補画像のところで、ダウンロード対象の画像は不透明の状態、対象でない画像はかなり薄い半透明の状態で表示されます。ダウンロードをする・しないは画像をクリックすることで切り替えることが出来ます。してダウンロード画像を絞り込んだら、ダウンロードボタンを押すことで対象となる画像すべてを一気にダウンロードします。反省点としては、ダウンロードボタンをクリックした瞬間にダウンロードバーが怒涛のようにアニメーションするのでやや鬱陶しいことと、ダウンロードフォルダに多くの画像が一気に入ってしまうので、整理しづらいことでしょうか。これらについては後に改善するかもしれません。この記事は古い情報になります。最新のバージョンに...2014-07-15Rubyを使って歌詞サイトから歌詞を取得する方法こんにちは、風来坊です。はてなブログProもっと自由に生きたいプログラマ。海外で職を得るのが目標。ある大人ならば、子供を生まないことだ月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!incodethx3932さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。