Movable Typeの画像アップロード用プラグイン「ImageUploadUtility」

ImageUploadUtility 通常版

ImageUploadUtility(イメージアップロードユーティリティ)は、Movable Type用の画像アップロード機能補助プラグインです。
本プラグインを使用すると、以下の機能を利用できるようになります。

  • アップロード・リサイズ機能
    アップロードするアイテム画像を指定サイズへ自動変換(リサイズ)
    ver1.30からは長辺だけでなく、横幅の最大値も設定可能に。→詳細・解説
  • パブリッシュ・サムネイルリサイズ機能
    アイテム画像のサムネイルが指定サイズを超える場合に自動リサイズ →詳細・解説
  • マルチバイト・リネーム機能
    日本語などのマルチバイト文字を使用したファイルを半角英数字に自動変換
    ver1.10からはマルチバイトに限らず強制変換も可能に。
    ver1.30からはランダムな文字列への変換も可能に。 →詳細・解説
  • 写真の向き補正とExif情報削除機能
    デジカメ写真等に残される「撮影情報」から写真の向きを自動補正しつつ、不要な情報を削除 →詳細・解説
  • JPEG画像圧縮率指定機能
    JPEG画像のアップロード時、圧縮率を変えてファイルサイズを削減
    ver1.30からはプラグインの設定画面で変更可能に。 →詳細・解説
  • 拡張子変換機能
    大文字でアップロードされる拡張子を小文字に変換 →詳細・解説

ImageUploadUtility Pro

上記の機能に加え、以下の機能を付加したImageUploadUtility Pro、こちらは企業ユースを想定した上位版となります。

  • ウォーターマーク(透かし画像)合成機能
    アップロードする画像に任意の透かし画像を合成。
    画像の無断複製や無断使用などを未然に防ぐことも可能に。 →詳細・解説
  • PDFサムネイル機能
    PDFをアップロードした際、その1ページ目を画像化してPDFへのリンクを設置。
    画像加工ソフトを使用せずにPDFのサムネイルが作成可能に。 →詳細・解説
  • 複数画像アップロード
    ブラウザにドラッグ&ドロップするだけで複数画像を1度にアップロード可能に。→詳細・解説
  • アップロードした画像を任意のタグで装飾可能
  • 複数画像をアップロードする際、ファイル名でのソートが可能

本プラグインは、Movable Type 6以上で動作します。

以降の説明はMT6.26を例にしていますので、ご利用バージョンに合わせて読み替えてください。
また、全て動作させるには画像処理ライブラリ ImageMagick が必要ですが、画像リサイズやファイル名変換は GD にも対応しています。

ダウンロードしたzipファイルを解凍すると、「plugins」フォルダができますので、その中にある「ImageUploadUtility」フォルダをご利用のMovable Typeの「plugins」フォルダにアップロードしてください。
プラグインの設定は、ブログごとに「ツール」-「プラグイン」-「プラグインの設定」画面内の「ImageUploadUtility」で行えます。

プラグインの設定画面

※上図はPro版(v2.20)のプラグイン設定画面です。

アップロード・リサイズ機能

ブログ記事などで、アイテム画像をアップロードする際、プラグインの設定で指定したサイズ(長辺または横幅)へ、縦横の比率を保持したまま自動変換(リサイズ)してアップロードします。

例えばデジカメで撮影した画像そのままのファイルでも、最適なサイズでアップロードすることができます。(アップロードする画像の長辺が、指定サイズ以下の場合はリサイズしません。)

リサイズする長辺/横幅サイズは、ブログごとに設定できるので、用途に応じて使い分けることができます。

プラグインの設定画面での設定例(アップロードリサイズ)

プラグインの設定画面で上記のように設定すると、アップロードする画像の長辺を「960px」にリサイズします。
(横向き画像の場合は横幅960px、縦向き画像の場合は縦長960pxにリサイズされます)

また、ver1.30から加わった横幅を指定する機能の場合、長辺ではなく横幅の最大値を一律にする機能になりますので、こちらを選択すると縦長の画像/横長の画像を問わず、指定した横幅にリサイズされます。(アスペクト比は保持)

指定横幅へのリサイズ

なお、このアップロードリサイズ機能は、「ブログ記事/ウェブページ」の新規作成・編集画面で画像をアップロードする場合に限り実行されます。
例えばサイト全体やヘッダの背景用などに、指定サイズよりも大きな画像をアップロードしたい場合は、「アイテム」メニューの「新規」にある「アイテムのアップロード」画面で行うことにより、このリサイズ機能を回避できます。

パブリッシュ・サムネイルリサイズ機能

アップロードした画像をブログ記事/ウェブページ内で使用する際、テンプレート毎に「埋め込むサムネイルの長辺サイズ」を指定・制限できます。

サイズの指定・制限は、ファンクションタグ(ex. EntryBody, EntryMore, PageBody, PageMore等)にモディファイア[ image_max_size="指定サイズ(px)" ]を記載するだけでOKです。

HTML内に埋め込まれる画像の長辺サイズが、モディファイアで指定したサイズを超えているとき、テンプレートの再構築(HTML出力)のタイミングで、縦横の比率を保持したまま自動的にリサイズします。

例えば、アーカイヴテンプレートの「ブログ記事」内で、<$mt:EntryBody image_max_size="220"$>とした場合、ファイルオプションで「サムネイルを利用 幅500ピクセル」としていても、実際に出力されるHTMLでは長辺が220ピクセルになるよう自動リサイズされます。

これを利用すると、メインページでは小さなサムネイル、ブログ記事では大きめのサムネイルと使い分けたり、PC閲覧用とモバイル閲覧用とで画像サイズを分けたりする事が可能です。

プラグインの設定画面

以下の条件を満たす場合、そのファンクションタグ内のimg要素がリサイズ対象となります。

  • HTML埋め込み時のclass属性(mt-image-none/left/right/center)を持っている
  • src属性値として指定されるファイルがアイテムとして登録されている
  • アイテムとして登録されている画像の長辺サイズが、リサイズの指定サイズを超えている

ただし、以下の点にご留意いただく必要があります。

  • ファイルオプションで「サムネイルを利用」にチェックを入れている場合、使用するのがリサイズ後の画像だけでも、サイズが異なる2つのサムネイルが生成されます。
  • 出力されるHTMLではリサイズ後のimgタグを生成しますが、編集画面では元々の画像サイズで表示されます。
    →「サムネイルを利用」にチェックがある場合、そこで指定した画像サイズ
    →「サムネイルを利用」にチェックが無い場合、元々の画像サイズ

マルチバイト・リネーム機能

ファイルをアップロードする際、一定のルールでファイル名を半角英数字に自動変換できます。

例えば、Movable Typeではマルチバイト(日本語)のファイル名でもアイテムとしてアップロード・使用することができますが、サーバー環境によってはファイル名が文字化けしてしまう場合があります。
(バックアップが正常に行えなかったり、サーバー移設などする際にリンク切れなどになってしまうケースがあります)

マルチバイトファイル名の文字化け例

本プラグインを使うと、プラグインの設定画面でファイル名の変換フォーマットを設定できるので、マルチバイトのファイル名でも気にすることなくアップロードできます。

プラグインの設定画面での設定例(ファイル名変換)

例えば上の設定内容で、2013年5月2日12時31分38秒に画像をアップロードすると、下の画像のようにファイル名が変換されます。

ファイル名変換後のイメージ

また、変換フォーマットを自由に設定できるので、接頭語(例:img-、photo_ 等)を入れたりすることも可能です。

さらに、ver1.30から追加された「ランダムな文字列を追加するファンクションタグ」を利用すると、以下のようにランダムな文字列をファイル名にできるので、外部からは予測不可能なファイル名に変換することが可能となります。

ランダムな文字列によるファイル名設定

リネームされたファイル名はこちら

ランダムな文字列によるファイル名設定

写真向き補正とExif情報削除機能

Exif情報を利用してデジカメやスマートフォンで撮影された写真の向きを自動補正しつつ、撮影場所や撮影日時などの不要な情報を、アップロード時に自動削除できます。

プラグインの設定画面での設定例(写真の向き補正とExif情報削除)

Exif情報とは、デジカメを使用して写真撮影した際に画像内に埋め込まれる文字情報のことで、撮影日時や画像サイズの他にも携帯電話のカメラなどを使用した場合には位置情報まで保存する事もあります。
そのため、撮影した写真をそのままブログに掲載すると、第三者が解析ソフトなどを使用することで、撮影者の意図しないところでその情報が漏れてしまう可能性もあります。

設定はブログ単位で行えるので、Movable Typeをモブログなどにご利用になる際、ぜひ導入ください。

写真加工の手間が省けるので、より便利にモブログが可能になります。

JPEG画像圧縮率指定機能

JPEG画像のアップロード時、指定した圧縮率でファイルサイズを削減させることができます。

これまでは mt-config.cgi に環境変数(IUUJpegQuality)で設定する必要があった同機能ですが、ver1.30からはプラグインの設定画面で行えるようになりました。

プラグインの設定画面での設定例(JPEG圧縮率)

圧縮率は標準で「85%」となっており、これを1〜100の任意の数値に変更することができますが、85以上を指定しても画質が良くなるわけではないため、主にファイルサイズを削減するためにご利用いただく機能となります。

圧縮した際の画像サンプルなどは、リリース記事でご覧いただけます。
ImageUploadUtility 1.03 リリース(2013/2/8)

拡張子変換機能

Movable Typeで拡張子が大文字の画像をアップロードする際、パソコンを使用してファイルとアップロードすると大文字のままアップロードされますが、iPhoneなどのスマートフォンからスマートフォンオプション(※)を利用してアップロードする際、拡張子が小文字に変換されてアップロードされます。
ファイル名が同じでも拡張子が「大文字」「小文字」で異なる場合、Movable Typeのアイテム内では別アイテムとして登録されてしまう場合がありますが、この機能を利用するとこれを防ぐことが可能になります。(上書きの確認が表示されます。)

ファイル名が同じでも拡張子が違うと別アイテムになる

※Movable Type管理画面がスマートフォンでの利用に最適化されるオプション機能です(MT ver 5.2.6より標準機能)

【Pro版のみ】ウォーターマーク(透かし画像)合成機能

Pro版のみの機能として、ブログ記事などに使用する画像にウォーターマーク(透かし画像)を合成することができます。

例えば著作権や肖像権、意匠権などが関係している画像で、その複製や無断流用を防ぎたい場合、これまでは一度画像加工してからアップロードするのが通常でした。
本機能を利用すると、その画像加工の手間が省けるばかりか、複数人で記事を作成するような場合でも各自が意識せずに透かし画像を自動合成するので安心です。

ウォーターマークの各種設定

透かし画像を任意のサイズで作成、使用できるのはもちろん、その合成位置も9ヶ所(左上中下、中央上中下、右上中下)から選択可能、そして透かし度合いも自由設定できます。

投稿する方が1人の場合は、透かし画像の挿入をその都度選択するのもよいでしょうし、複数人で投稿する場合は「常に合成する」を選択することもできます。

ファイルアップロード時に選択すると設定した場合、以下のようにオプション選択ができるようになります。

透かしの挿入選択オプション

透かしの位置は画像の上下左右端から0pxの位置になりますが、透かし画像そのものに余白を持たせることで以下のように調整可能です。

透かしの挿入イメージ

【Pro版のみ】PDFサムネイル機能

こちらもPro版のみの機能として、PDFをアップロードする際、その1ページ目を画像(サムネイル)として保存し、それにリンクを設定するカタチでエディタ上に挿入することができます。(※パスワードで保護されたPDFではサムネイルを作成できません。)

同様のことを行おうとした場合、これまでは一度PDFから画像を作成してMovable Type上にアップロード、その後にPDFを別途アップロードして、画像にリンクを設置する方法が一般的でしたが、ImageUploadUtility Proを利用すると、それらの作業をMovable Type上で行うことが可能になります。

プラグインファイルをアップロード後、「システム」-「ツール」-「プラグイン」と進み、ImageUploadUtilityの設定画面で「PDFの1ページ目を画像として表示する」にチェックを入れることで、本機能が有効になります。

PDFの1ページ目を画像として表示する

上記の設定後、ブログ記事/ウェブページでPDFファイルをアップロードすると、画像アップロード時と同様に「画像を記事/ページに表示」のオプションが表示されます。

こちらにチェックを入れるとPDFのサムネイル(PDFへのリンク付き)がエディタ上に貼られ、チェックを外すとこれまで通りアイテムの名前でのテキストリンクが貼られます。
下図の通り、マルチバイトリネーム機能(ランダム文字列機能)も併用できます。

なお、「画像を記事/ページに表示」のチェックがONになっている際、「サムネイルを利用」のチェックは外れない仕様になっています。(サイズ変更は可能)

また、PDFサムネイル機能を利用する際は、PDFをポップアップで開くのではなく、新規ウィンドウ(タブ)で開くように選択できます。
このチェックがOFFの場合、同じウィンドウ内でPDFが開きます。

画像の挿入選択

【NOTICE】Pro版のアンインストールについて

Pro版をご利用で「PDFサムネイル機能」を有効化していたMovable Typeで、本プラグインをアンインストールする場合、必ず「システム - ツール - プラグイン - プラグインの設定」でチェックを外して一度保存してからアンインストールしてください。
設定情報が残り、その後の動作に不具合がでる場合があります。

【Pro版のみ】複数画像アップロード機能

Pro版のみの機能として、複数の画像を一度にアップロードできる機能が追加になりました。(version 2.02より)

リッチテキストエディタに追加される上記のボタンをクリックするか、エディタ上(リッチテキストエディタ以外含む)に画像をドラッグ&ドロップすることで複数アップロードが可能となります。

ファイルの設定も次画面で一括して行えます。

各種設定を全画像に同時適用も可能で、掲載順序の入れ替えやアップロードのキャンセルもこの画面から行えます。

操作イメージはこちらの動画をご参考ください。(字幕をONにすると簡単な解説がつきます)

ライセンスについて

ImageUploadUtility / ImageUploadUtility Pro は以下のライセンスにてご利用いただけます。
なお、ライセンスの違いによる機能面の差はありません。

有償ライセンス版Movable Typeをご利用の方 → 有償ライセンス

ソフトウェア利用許諾契約(ビジネス向け有償ライセンス)にご同意願います。
評価版にて導入前に動作をご確認願います。(評価版は、プラグイン名に「評価版」と記載されます。)

>>通常版:ビジネス向け有償ライセンス評価版のダウンロード

>>Pro版:ビジネス向け有償ライセンス評価版のダウンロード

製品版データは、ご購入手続き・ライセンス料のご入金確認の後、別途ご送付差し上げますのでご了承ください。

個人無償ライセンス版Movable Typeをご利用の方 → 無償ライセンス

本プラグインを無償にてご利用いただけますが、ソフトウェア利用許諾契約(個人向け無償ライセンス)に同意いただく必要がございます。
なお、Pro版については個人無償版の提供はございませんのでご了承ください。

MTOSをご利用の方 → GPLライセンス

GPLライセンスについては、GNU 一般公衆利用許諾契約書をご参照ください。
なお、Pro版についてはGPLライセンス版の提供はございませんのでご了承ください。

ライセンスのご購入とダウンロードについて

ご利用のMovable Typeライセンスに合わせ、以下よりご購入またはダウンロード願います。
なお、SKELETON CARTユーザー様は、ライセンス番号についてもご記入くださいますようお願いいたします。

ImageUploadUtility

ご利用のMovable Type ライセンス料(税込) 備考 購入/ダウンロード
ビジネス向け有償ライセンス
(アカデミック版含む)
9,720円 Movable Type
1ライセンスごと
SKELETON CARTユーザー様優待価格
6,480円
SKELETON CART
1ライセンスごと
ライセンス番号
個人向け無償ライセンス 無償 無保証 ダウンロード

ImageUploadUtility Pro

ご利用のMovable Type ライセンス料(税込) 備考 購入/ダウンロード
ビジネス向け有償ライセンス
(アカデミック版含む)
29,160円 Movable Type
1ライセンスごと

ご利用に関するお問い合わせ

ご利用に関するご不明な点などは、以下のコメントフォーム、またはお問い合わせフォームよりお願いいたします。
ご意見、ご感想などお待ちしております!