WordPressプラグイン「表示デバイス(スマホ・タブレット・PC)によって、画像を最適なサイズで表示するプラグイン」を作ってみた!

このブログはまだ公開して間もないわけですが、
実は少し前から、スマホでの表示時に画像の読み込みが遅くなってることに気づき、

あー対応しなきゃなー・・でもめんどくさ・・ 時間ないしな〜

とか、色々と理由をつけつつ保留にしていました><;

まーPC用のフルサイズで読み込ませて縮小してるだけなんで、読み込み遅くなるとか当たり前っちゃ当たり前なんですけどね。

Wordpressは、拡大時の画像と、通常の表示画像をデフォルトで分けているので、 表示画像の方をできる限り小さくすれば、スマホでの表示も早くなるでしょうが、
それだとパソコンから見た時に、あまりにも画像が小さすぎちゃうんですよね。

かといって、その画像を無理やりCSSなりで拡大しても、ただ見るに耐えないぐらいの解像度の、劣化した画像が表示されるのは言うまでもなく・・・

ってことで!ちゃちゃっとWordpressプラグイン作ってみました!

こういった問題は、やろうと思えばいくらでも対処法があるわけですが、 まぁせっかく連休もあることですし、今後簡単に導入できるように WordPressプラグインとして作ってみました!

その名も「AutoImageResize」!w

導入はできる限り簡単にしたつもりです。
プラグインを有効にすると、何も考えずとも、導入以降の記事から自動的に反映されます。

簡単な仕様説明!

仕様について簡単に説明しておきますと、スマホ・タブレット用の画像を予め作成しておき、 記事を表示した際に、ユーザエージェントを見てスマホ・タブレット・PCを判別。(判別精度はそれなり・・です)
その上で適切な画像を選び、imgタグを出力します。

スマホ・タブレット用の画像は、それぞれの横幅サイズ以上の画像のみがリサイズされます。 基本的にはなんの意識もせず、画像を挿入するだけで表示時に自動的に画像が選別されます。

このプラグインを導入することで得られるメリットとしては、スマホ・タブレットでの表示時に画像表示が早くなるという所ですね!

実際には記事内に画像を放り込む際に、imgタグの代わりに「テンプレートタグ」として挿入されます。 そして、表示時にそのテンプレートタグだけがimgタグに置換され、出力されるので、誤って他のimgタグが変換されることもありません。

そのテンプレートタグに関して、簡単に説明すると下記のような仕様になります。

ここで注意すべきところは、srcの属性要素は絶対に変更しないでください! それ以降は、変換時にimgタグの普通の属性要素となりますので、自由に編集可能です。

各デバイスの横幅サイズの設定も可能です!(画像の最大サイズとなります)

横幅サイズはデフォルト、スマホ480px、タブレット768pxで設定されています。
必要であれば設定画面から変更も可能です。基本的にはそのままでいいですが。
(設定画面は、管理画面→設定→AutoImageResizeを選択するか、プラグイン一覧のAutoImageResizeの欄から遷移できます。)

ただ、もし横幅サイズの指定が必要な場合は、できる限り最初に変更しておくことをオススメします
(まぁ後で変更してもいいですが、その場合、それまでに記事挿入した画像には適応されず以前の画像サイズのままとなります)

なお、以前に登録した画像も新しいサイズに一括変換をかける機能も追加しておきましたが、 すべての記事画像のスマホ・タブレット用の画像を作成するので、かなり時間が掛かると思います。
もしどうしても後の変更で、プラグイン導入後の記事すべてに適応したい場合は、使用してみてもいいかも知れません。(念のため、バックアップも忘れずに・・)

ということで、インストール方法です!

その前に注意事項・・

このプラグインはGPL2ライセンスにより無料で商用利用もOKです!・・が、
使用したことによるいかなる損害も補償いたしませんので、自己責任でご使用いただければと思います。

ではでは、インストール方法!

まずは下記URLからプラグインをダウンロードください!

WordPress › Auto Image Resize « WordPress Plugins

/wp-content/plugins/ にFTPか何か、ツールを使ってアップロードします。

で、管理画面のプラグイン一覧から、「AutoImageResize」を有効化すればインストール完了です!

たったこれだけで、以降の記事から自動的に画像がリサイズされるようになります!(上記にも説明しましたが、デバイス毎の最大横幅を変更したい場合は、設定画面から変更してくださいね!)

最後に・・

こういったプラグインは、おそらく既にあるものと思いますが、 今回、勉強も兼ねてプラグイン化してみました!

あとプラグイン化することで他の誰かの役に立てるかもしれない、ってのもありました。
なので、ただ自分用に使用出来れば・・ってだけではなく、できる限り誰でも扱いやすいよう配慮した設計にしたつもりです。

今回プラグインで制作するにあたり色々と壁にぶち当たりましたが、なんとか完成させることが出来ました! ( 制作よりWordpress上に公開する際に迷った事のほうが多いですがw )

バグ等ございましたら、下記コメントフォーム 或いはメール等でメッセージ頂ければ幸いです! (メールアドレスは下記、フッターをご参照ください)

できる限り対応していこうと思います!

あと・・使用感のコメント等も頂ければめちゃくちゃ喜びますので、なんでもコメントください!あっでもスパムはダメですよ!w


Wordpressについての書籍は下記がオススメです。 興味のある方はどうぞ!

この記事のトラックバック用URL

コメント