先日、以下の記事を読みました。
上記は、Adobe製のWEB用画像エディターを、サイト上で手軽に使う方法です。
この記事読んで、「良さそうだなぁ、このWordpressにも自分用に設置して使えないかな」と思ってやってみたら、Adobe画像エディターをサイト内にあっさりと設置することができました。
それも、いろいろとコードを工夫したら、コード内にIDを指定して、Wordpressの投稿画面に貼り付けて「投稿」ボタンを押すだけで、手軽に作成できるようになりました。
今回は、その「Adobe製エディターをWordpressサイト内に設置する方法」を紹介します。
目次
Adobe画像エディターのデモ
方法を紹介する前に、「Adobeの画像エディターがどんなものなのか？」というと以下のようなものです。
アプリの登録状態が、「開発モード」なので使用人数制限を超えると上の画像エディター編集機能は動作しないかもしれません。
エディターからの画像の保存は、右クリックメニューからする必要があります。
かなり簡易的なものなので、編集後の画像を右クリックなどで保存する必要ありますが、画像の編集機能のすべてを存分に利用することができます。
使用例
このエディターを利用することで、Instagramのようなエフェクトをかけてみたり、
綺麗にスクエアに切り抜いたり、
文字を入れたり
その他にも、様々な画像加工機能を無料で利用できるようになります。
ただ、ちょこっとコードを編集するだけで、僕のような素人には十分すぎるくらいの画像エディターが手に入りました。
画像エディターを設置する主な手順
WordPress内にAdobeの画像エディターを設置する主な手順は以下になります。
- Adobe IDに登録する
- Adobe Creative SDKでアプリ作成登録をする
- 作成登録で取得したIDをコードに記入する
- WordPress投稿画面にコードをコピペして投稿する
ここで、一番面倒くさいのは、Adobeにユーザー登録することぐらいでしょうか。
それが済んでしまえば、かなり簡単にAdobe画像エディターを作ることができます。
Adobe IDに登録する
まず、画像エディターを作成するには、Adobeにユーザー登録してある必要があります。
Sign up – Adobe IDから、Adobe IDにユーザー登録してください。
登録する情報は、名前とメールアドレス、パスワード、国ぐらいなもんで、特に難しいことはないと思います。
Adobe Creative SDKでアプリ作成登録をする
ユーザー登録が済んだら、まずはAdobe Creative SDKにサインインします。
サインインしたら、「My Apps」をクリックします。
次に、「＋NEW APPLICATION」ボタンをクリックしてください。
すると、以下のような画面が表示されます。
以下の情報を入力の上「ADD APPLICATION」ボタンを押してください。
- アプリ名（Application Name）：アプリ名を入力
- プラットホーム（Platform）：WEBを選択
- 説明（Description）：簡単なアプリの説明
- 番号の確認：写真の番号を入力
アプリケーションの登録が完了したら、以下のようなダイアログが表示されるので「クライアントID（CLIENT ID）」をコピーしてどこかに保存しておいてください。
このクライアントIDは、あとで利用します。
これで、Adobe Creative SDKでの設定は終了です。
作成登録で取得したIDをコードに記入する
次に、以下のコードをエディターなどにコピーします。
<!-- Adobe画像をエディターのライブラリ呼び出し -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script>
<!-- エディターの本体部分 -->
<div style="background-color: #eee;padding: 10px;">
<label>Adobeエディターで編集する画像を選択してください。</label>
<input id="selfile" type="file" />
<div id="canvas"><img id="image" src="https://unsplash.it/680/450" alt="" /></div>
画像をクリックするとAdobe画像エディターが起動して編集画面が表示されます。
</div>
<!-- エディター機能を実装部分 -->
<script type="text/javascript">
//Adobeエディターのセットアップ関数
function set_adbe_image(){
//<body>内の画像要素を取得
var image = document.getElementById('image');
//画像編集エディタを利用するための準備
var Editor = new Aviary.Feather({
apiKey: 'クライアントIDの入力',
language: 'ja'
});
//画像要素をクリックしたら、「編集エディタ」を表示
image.addEventListener('click', function () {
Editor.launch({
//<img>内のidとsrcを取得
image: image.id,
url: image.src
});
});
}
//エディター動作割り当てる
set_adbe_image();
//ファイル選択ボックスの処理
var obj1 = document.getElementById("selfile");
obj1.addEventListener("change", function(evt){
var file = evt.target.files;
var reader = new FileReader();
//dataURL形式でファイルを読み込む
reader.readAsDataURL(file[0]);
//ファイルの読込が終了した時の処理
reader.onload = function(){
var dataUrl = reader.result;
//読み込んだ画像とdataURLを書き出す
document.getElementById("canvas").innerHTML = "<img id='image' src='" + dataUrl + "'>";
set_adbe_image();
}
},false);
</script>そして、以下の部分に先程取得したクライアントIDを入力します。
apiKey: 'クライアントIDの入力',
ここに以下のようにIDを入力します。
apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
編集するところといったらこのくらいです。
WordPress投稿画面にコードをコピペして投稿する
あとは、Wordpressの管理画面から、投稿ページか、固定ページ、どちらでも良いので新規作成画面を開きます。
そして、テキストエディターにして、先程のコードを貼り付けて「公開」ボタン押すだけです。（通常のサイトだったら、プロジェクトファイルにコピペすればOKです。）
すると、ページ上で以下のように表示されます。
画像をクリックすると、以下のように編集エディターが立ち上がります。
違う画像を編集したい場合は、「画像選択ボックス」に画像ファイルをドラッグ＆ドロップするか、「ファイルを選択」ボタンから画像ファイルを開いてください
すると以下のように、読み込んだ画像が表示されます。
あとは、画像をクリックすると編集エディターが立ち上がります。
こんな感じで、手持ちの画像も編集することができるようになります。
編集後の画像を保存するときは、右クリックメニューから保存してください。
注意点
Adobe Creative SDKから、登録をした時点では、アプリは「開発モード（DEVELOPMENT MODE）」になっています。
開発モードでは、アクセス数などに制限があるので、アプリとして登録するには、設定画面から、レビューを申請して許可を得なくてはなりません。
ちなみに、今回のような適当なアプリで申請してみたら以下のように、「修正して再レビューを受けてくれ」というメールが届きました。
We’ve reviewed your application and discovered some issues. Please visit your My Apps page for more details. Once these issues have been resolved please re-submit your app for review.
アプリと呼べるほどのものではないので当然と言えば、当然かもしれません。
興味がある場合は、コードをカスタマイズして機能などを追加してみてください。
詳しい使い方などは、Adobe Creative SDKのDocumentationを参照してください。
僕は、自分しか利用しないので、とりあえずは、「開発モード（DEVELOPMENT MODE）」で使用しようかと思います。
まとめ
今回の設定を行うことで、AdobeのWEB用画像エディターを、サイト内で無料で利用できるようになります。
確かに、プロが使う画像ソフトほどの機能はありません。
けれども、素人が、ブログ用に使う機能なら十分すぎるほどカバーしていると思います。
「自分のサイトに画像エディターを設置して画像を編集したい」とか「自分のパソコン以外からでも画像エディターを使えるようにしたい」なんて場合には、かなり使えそうです。
初めまして。近藤と申します。
いつも勉強させてもらってます。
質問なんですが、「Adobe Creative SDK」のサインイン後に「＋NEW APPLICATION」
をクリックとありますが、「＋NEW APPLICATION」が出ずに、「統合の作成」というページに誘導されます。
そこで「統合名・統合の説明・リダイレクトURI・リダイレクトURIのパターン」の入力を求められる状態です。これは何を入力すればいいんでしょうか？
初歩的な質問で申し訳ありませんがお力添えよろしくお願いします。