ほぼコピペするだけでAdobe製WEB画像エディターを無料で使えるようにする方法

先日、以下の記事を読みました。

上記は、Adobe製のWEB用画像エディターを、サイト上で手軽に使う方法です。

この記事読んで、「良さそうだなぁ、このWordpressにも自分用に設置して使えないかな」と思ってやってみたら、Adobe画像エディターをサイト内にあっさりと設置することができました。

それも、いろいろとコードを工夫したら、コード内にIDを指定して.Wordpressの投稿画面に貼り付けて「投稿」ボタンを押すだけで、手軽に作成できるようになりました。

今回は、その「Adobe製エディターをWordpressサイト内に設置する方法」を紹介します。

スポンサーリンク
レクタングル(大)広告

Adobe画像エディターのデモ

方法を紹介する前に、「Adobeの画像エディターがどんなものなのか?」というと以下のようなものです。

 
画像をクリックするとAdobe画像エディターが起動して編集画面が表示されます。
ccconnected_text

アプリの登録状態が、「開発モード」なので使用人数制限を超えると上の画像エディター編集機能は動作しないかもしれません。

エディターからの画像の保存は、右クリックメニューからする必要があります。

かなり簡易的なものなので、編集後の画像を右クリックなどで保存する必要ありますが、画像の編集機能のすべてを存分に利用することができます。

使用例

このエディターを利用することで、Instagramのようなエフェクトをかけてみたり、

Instagramのようなエフェクトをかける

綺麗にスクエアに切り抜いたり、

スクウェアに切り抜き

文字を入れたり

Adobeエディターで文字を挿入

その他にも、様々な画像加工機能を無料で利用できるようになります。

Adobeエディターの主な機能1

Adobeエディターの主な機能2

ただ、ちょこっとコードを編集するだけで、僕のような素人には十分すぎるくらいの画像エディターが手に入りました。

画像エディターを設置する主な手順

WordPress内にAdobeの画像エディターを設置する主な手順は以下になります。

  1. Adobe IDに登録する
  2. Adobe Creative SDKでアプリ作成登録をする
  3. 作成登録で取得したIDをコードに記入する
  4. WordPress投稿画面にコードをコピペして投稿する

ここで、一番面倒くさいのは、Adobeにユーザー登録することぐらいでしょうか。

それが済んでしまえば、かなり簡単にAdobe画像エディターを作ることができます。

Adobe IDに登録する

まず、画像エディターを作成するには、Adobeにユーザー登録してある必要があります。

Sign up – Adobe IDから、Adobe IDにユーザー登録してください。

2015-08-06_12h09_31

登録する情報は、名前とメールアドレス、パスワード、国ぐらいなもんで、特に難しいことはないと思います。

Adobe Creative SDKでアプリ作成登録をする

ユーザー登録が済んだら、まずはAdobe Creative SDKにサインインします。

Adobe Creative SDK

サインインしたら、「My Apps」をクリックします。

Adobe Creative SDKにサインインした後Appsをクリック

次に、「+NEW APPLICATION」ボタンをクリックしてださい。

新しいアプリの作成

すると、以下のような画面が表示されます。

アプリの新規作成フォーム

以下の情報を入力の上「ADD APPLICATION」ボタンを押してください。

  • アプリ名(Application Name):アプリ名を入力
  • プラットホーム(Platform):WEBを選択
  • 説明(Description):簡単なアプリの説明
  • 番号の確認:写真の番号を入力

アプリケーションの登録が完了したら、以下のようなダイアログが表示されるので「クライアントID(CLIENT ID)」をコピーしてどこかに保存しておいてください。

クライアントIDをコピーしておく

このクライアントIDは、あとで利用します。

これで、Adobe Creative SDKでの設定は終了です。

作成登録で取得したIDをコードに記入する

次に、以下のコードをエディターなどにコピーします。

そして、以下の部分に先程取得したクライアントIDを入力します。

ここに以下のようにIDを入力します。

編集するところといったらこのくらいです。

WordPress投稿画面にコードをコピペして投稿する

あとは、Wordpressの管理画面から、投稿ページか、固定ページ.どちらでも良いので新規作成画面を開きます。

そして、テキストエディターにして、先程のコードを貼り付けて「公開」ボタン押すだけです。(通常のサイトだったら、プロジェクトファイルにコピペすればOKです。)

新規固定ページを追加 — WordPress

すると、ページ上で以下のように表示されます。

Adobe画像エディターのデモ

画像をクリックすると、以下のように編集エディターが立ち上がります。

Adobe画像エディターのでも

違う画像を編集したい場合は、「画像選択ボックス」に画像ファイルをドラッグ&ドロップするか、「ファイルを選択」ボタンから画像ファイルを開いてください

画像選択ボックスにファイルをドラッグ&ドロップ

すると以下のように、読み込んだ画像が表示されます。

画像を選択すると画像が入れ替わる

あとは、画像をクリックすると編集エディターが立ち上がります。

自由に画像を選択して編集することができる

こんな感じで、手持ちの画像も編集することができるようになります。

編集後の画像を保存するときは、右クリックメニューから保存してください。

右クリックメニューから画像を保存する

注意点

Adobe Creative SDKから、登録をした時点では、アプリは「開発モード(DEVELOPMENT MODE)」になっています。

2015-08-06_13h02_52

開発モードでは、アクセス数などに制限があるので、アプリとして登録するには、設定画面から、レビューを申請して許可を得なくてはなりません。

2015-08-06_13h06_22

ちなみに、今回のような適当なアプリで申請してみたら以下のように、「修正して再レビューを受けてくれ」というメールが届きました。

Creative SDK のレビュー結果

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エディターの主な機能1

Adobeエディターの主な機能2

「自分のサイトに画像エディターを設置して画像を編集したい」とか「自分のパソコン以外からでも画像エディターを使えるようにしたい」なんて場合には、かなり使えそうです。

Adobe画像エディターデモ