ひとりぶろぐ

価値ある情報をユーザー視点で発信するブログ

WordPressに複数画像を一発リサイズ、一発アップロード!WordPressImageUploader

      2014/04/05

画像のリサイズと、WordPressへのアップロードを複数いっぺんにやりたい

このブログにはWordPressを使っています。ブログの更新にはOS X用のブログエディタを使っています。

概ね快適に更新できているのですが、画像のアップロードにはもう一工夫したいなと思っていました。

僕の使っているブログエディタであるMarsEditは、画像のアップロードをドラッグ&ドロップで一つずつやらなくてはならないのが面倒だからです。また、いちいち問い合わせがあるのも面倒くさい。

最近のWordPressは、標準のマルチファイルアップローダーで複数の画像をアップロードできますが、リサイズまではやってくれないし、imgタグの生成なんかも、自分で手当しなければならない。

WordPressImageUploaderで画像アップロードの環境向上

そこで、WordPressへの画像のアップロードの便利のために、WordPressImageUploaderというものを作ってみました。

ちなみに、WordPressImageUploaderの利用に、MarsEditは必要ありません。何もいりません。

どういうものか?

  • Finder、ないしはiPhotoで選択中の(複数の)画像を問い合わせなしにWordPressへアップロードする
  • アップロード前に、指定サイズにリサイズする
  • アップロードした画像のimgタグをクリップボードにコピー
  • 生成するimgタグはカスタマイズ可能

(続きは[Read More]から)

履歴

  • 2014.4.5 Ver.0.2
    • ImageMagickのconvertコマンドの利用を想定した設定オプション新設
  • 2014.4.4 Ver.0.1
    • 初版

ダウンロード


動作確認環境

  • OS X 10.9.2

免責

自己責任でお使いください。

使い方

  1. Finder、ないしはiPhotoで画像を(複数)選択
  2. Finderの場合はwordpress_image_uploader.appを、iPhotoの場合はwordpress_image_uploader_iphoto.appを実行
  3. アップロードが終わるとダイアログが表示される
  4. クリップボードにコピーされたimgタグをブログエディタにペースト

インストール方法

上記のリンクからWordPressImageUploaderのzipアーカイブをダウンロード。

解凍して出てきた4ファイルを書き込み権限がある場所にまとめて設置。 /Applications に書き込み権限があれば、そこでも構いません。

  • wordpress_image_uploader.app
  • wordpress_image_uploader.yaml
  • wordpress_image_uploader_iphoto.app
  • wordpress_image_uploader_iphoto.yaml

設定ファイル、

  • wordpress_image_uploader.yaml
  • wordpress_image_uploader_iphoto.yaml

を、次項に従って書き換える。

実行ファイル、

  • wordpress_image_uploader.app
  • wordpress_image_uploader_iphoto.app

をDockに設置するなどで、起動しやすくする。特に、

  • wordpress_image_uploader.app

の方は、Finderで選択中の画像を処理対象にするので、Finder、デスクトップから実行しようとするとうまく動きません。実行しようとすると画像の選択が解除されるからです。

設定ファイルと設定ファイルの書き換えについて

WordPressImageUploaderは、設定ファイル、

  • wordpress_image_uploader.yaml
  • wordpress_image_uploader_iphoto.yaml

で動作を決めます。この二つはファイル名が違うだけで、中身は同じです。

推測できるとは思いますが、以下の二つが対。

  • wordpress_image_uploader.app
  • wordpress_image_uploader.yaml

以下の二つも対。

  • wordpress_image_uploader_iphoto.app
  • wordpress_image_uploader_iphoto.yaml

設定ファイルをエディタで編集し、必要項目を書き換え、保存します。

設定ファイル中の初期の記述を青字に、必ず設定変更が必要なものを緑字にしています。

  • end_point: http://hogehoge.com/xmlrpc.php
    • ブログのエンドポイントを指定
  • account: akaunto
    • ブログのアカウントを指定
  • password: pasuwa-do
    • アカウントに紐付いたパスワードを指定
  • long_side: 500
    • 画像の長辺のサイズ。縦長の画像なら高さが長辺、横長の画像なら幅が長辺として扱われる。長辺がこれ以上なら、指定のサイズになるようリサイズ。長辺がこれ以下ならリサイズしない
  • format: <img style=”display:block; margin-left:auto; margin-right:auto;” src=”#{url}” alt=”#{basename}” title=”#{filename}” border=”0″ width=”#{width}” height=”#{height}” />
    • 生成するimgタグのフォーマットを指定。「format: |」の次の行から、頭に半角空白を置いて記述。複数行もOK。使えるタグは下表に掲載
  • blog_id: 1
    • ブログIDを指定。通常は1
  • upload_dir: uploaded
    • 画像をアップロードする先のディレクトリ。通常はuploaded
  • temp_dir: ~/Desktop/wordpress_image_uploader_temp/
    • リサイズした一時使用の画像を保存するディレクトリ。不要になったら後で自分で消してください
  • convert_path: デフォルトは設定なし
    • ImageMagickのconvertコマンドのフルパスを指定すると、標準で使っているsipsコマンドの代わりにconvertコマンドを利用するようになる
  • convert_options: -unsharp 0x1.0+1+0.08 -quality 92
    • ImageMagickのconvertに渡すオプション
タグ 説明
#{url} 画像のURLに展開される
#{filename} 画像のファイル名に展開される
#{basename} 拡張子抜きの画像のファイル名に展開される
#{width} (リサイズ後の)画像の幅(pixel)に展開される
#{height} (リサイズ後の)画像の高さ(pixel)に展開される

数種の設定を使い分ける

実行ファイルのファイル名を書き換えると、読み込む設定ファイルの名前は、実行ファイルのファイル名を元に変更されます。

例えば、実行ファイルのファイル名を「hoge.app」にしたら、読み込む設定ファイルは「hoge.yaml」になります。

従って、少し設定を変えて使い分けたい場合は、実行ファイル、設定ファイルの複製を作り、ファイル名を変えたらいいわけです。

ImageMagickのconvertコマンドの利用

標準で画像のリサイズに使っているのは、OS X標準インストールのsipsコマンド。

ImageMagickのconvertコマンドを代わりに使えます。

ImageMagickはOS Xに入っていませんから、別途インストールする必要があります。

ImageMagick installer for Mac OS X

上記のインストーラを使うか、Homebrew、MacPortsなどのパッケージ管理ツールなどでインストールすると使えるようになります。

設定ファイルの「convert_path:」にconvertコマンドのフルパスを指定すると、sipsの代わりにconvertを利用するようになります。convertのインストールパスはwhichコマンドで調べることができます。

$ which convert
/opt/ImageMagick/bin/convert

convertコマンドには、コマンドラインオプションを渡せます。

設定ファイルの「convert_options:」がそれ。デフォルトでは「-unsharp 0x1.0+1+0.08 -quality 92」が指定されていますが、これは画像をシャープに見せるアンシャープマスクと、画像の圧縮率。

convertコマンドには無数のオプションがあり、様々な画像処理が実行できます。

ImageMagick: Command-line Options

 - WordPress, ブログ運営

dropbox_sale_banner evernote_sale_banner_03