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
- 初版
ダウンロード
- Ver.0.2: wordpress_image_uploader-0.2.zip
- Ver.0.1: wordpress_image_uploader-0.1.zip
SPONSORED LINK
動作確認環境
- OS X 10.9.2
免責
自己責任でお使いください。
使い方
- Finder、ないしはiPhotoで画像を(複数)選択
- Finderの場合はwordpress_image_uploader.appを、iPhotoの場合はwordpress_image_uploader_iphoto.appを実行
- アップロードが終わるとダイアログが表示される
- クリップボードにコピーされた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