エンジニアブログ

エンジニアブログ
Movable Type プラグイン

Photoshopが不要になる! 画像編集サービス「Pixlr」

edit_me_s.jpg はせがわ 2012年05月15日

Pixlr(ピクスラー)というサービスをご存知でしょうか?
Pixlrとは、アカウント登録などを行わなくてもすぐ始められるお手軽な画像編集サービスです。

目次

Pixlrのサービス

Pixlrには現在5種類のサービスがあるのですが、今回はそのうち「pixlr editor」「pixlr express」をご紹介いたします。

pixlr editor

pixlr editorは操作感がphotoshopに非常に似ています。
使い勝手がよく、機能面も充実しており、複雑な加工を必要とする場合は、おすすめです。

詳しい使い方は下記のサイトに載っておりますので、ご覧下さい。
プロ並みの編集を無料でできる!写真加工サービス「Pixlr」の使い方 - nanapi Web

AssetImageEditor_pixlr.png

pixlr express

写真加工で必要な機能に特化した感じがするエディタです。
残念ならが日本語版はありませんが、アイコンなどが視覚的ですので、それほど困ることは無いと思います。

詳しい使い方は下記サイトに載っておりますので、ご覧下さい。
プロが撮影した写真のように加工できる!45種類のInstagram風フィルターを搭載した写真編集ウェブアプリ「Pixlr Express」 | Chrome Life<

AssetImageEditor_express.png


とても便利なウェブサービスですがMovable Type上にある画像を編集するためには、
一度ダウンロードして編集して再度Movable Typeにアップして。。。と不便ですよね。

そんな方のために、Movable Typeの画像を直接編集出来るように
「AssetImageEditor」というプラグインを作成いたしましたので、ご利用ください。

ダウンロード

AssetImageEditor 1.00

インストール

上記ダウンロードリンクからダウンロードしたzipファイルを解凍しますと、AssetImageEditorの名称のディレクトリが作成されます。
作成されたディレクトリごと、MovableTypeがインストールされたディレクトリのpluginsディレクトリに保存してください。

(例)
MovableTypeの場所が/var/www/html/cgi-bin/mtである場合、保存後は以下のようになります。
/var/www/html/cgi-bin/mt/plugins/AssetImageEditor

注意事項、その他

  • Movable Type 5.13でのみ動作確認しています。他のバージョンでの動作報告など頂けますと幸いです。
  • このプラグインはブログウェアです。どなたでも無償でご利用頂けますが、感想、要望などをあなたのブログで記事として紹介頂けると幸いです。
  • 本プラグインをご利用される方は必ずプラグインご利用の際の注意事項をお読みください。

設定について

システムのプラグイン設定

プラグイン設定は初期状態では、「エディタ選択」の項目が「利用しない」となっています。この状態では、ご利用いただけません。

AssetImageEditor_cap_system_plugin01.png

システム管理画面のプラグイン設定では、システム全体の初期設定を変更することが可能です。

AssetImageEditor_cap_system_plugin02.png

上の図と下の図のように「エディタ選択」を「利用しない」から「pixlr」にすると、pixlr editorが利用できます。「pixlr_express」にすると、pixlr expressが利用可能です。

AssetImageEditor_cap_system_plugin03.png

ウェブサイトのプラグイン設定

下の図のようにウェブサイトのプラグイン設定では、「システムの設定を利用する」が初期設定となっています。システム側の設定を利用したくない場合は、こちらを変更してください。

AssetImageEditor_cap_website_plugin.png

ブログのプラグイン設定

ブログ側では「ウェブサイトの設定を利用する」が初期設定になっています。ブログ毎に設定を変更したい場合は、各ブログで設定を変えてください。

使い方について

画像タイプのアイテム編集画面に移動すると、「アクション」ウィジェットに「画像編集」リンクが表示されるようになります。このリンクをクリックすることで、開いているアイテム編集画面の対象となっている画像が、pixlr.comにアップロードされ、編集できる状態になります。

AssetImageEditor_cap_asset_view.png

pixlr editorで保存する方法について

エディタの左上の「ファイル」メニューから「保存」を選択します。

AssetImageEditor_cap_pixlr_save.png

保存用の専用ダイアログが表示されますので、OKボタンを押すと保存が開始され、MovableType側のアイテム編集画面へ戻る事が出来ます。

AssetImageEditor_cap_pixlr_save_2.png

pixlr editorを終了してMovableTypeに戻る場合について

編集途中でエディタを終了し、MovableTypeに戻りたい場合は、左上の「ファイル」メニューの「終了」を選択します。

AssetImageEditor_cap_pixlr_close.png

※「閉じる」のメニューは、現在開いている画像の編集ウィンドウが閉じる動作になり、エディタは終了しません。

pixlr expressで保存する方法について

左上の「Save」ボタンをクリックします。

AssetImageEditor_cap_express_save.png

専用のダイアログが表示されますので、「Save」をクリックすると保存が開始され、MovableType側のアイテム編集画面へ戻る事が出来ます。

AssetImageEditor_cap_express_save_2.png

pixlr expressを終了してMovableTypeに戻る場合について

編集途中でエディタを終了し、MovableTypeに戻りたい場合は、左上の「Close」ボタンをクリックします。

AssetImageEditor_cap_express_close.png