• WEB

Adobe社の画像エディタを無料で使い放題!?

  • ピンポン
    ピンポン システムちーむ
  • このエントリーをはてなブックマークに追加
Adobe社画像エディタを無料で使い放題

こんにちは、システムちーむのピンポンです。
今回のブログはコーディングで、Adobe社の画像処理エディタを無料で使い放題の裏ワザを公開します。

普段は画像処理の仕事はしていませんが、たまにブログ書くとき画像を自分で作りたくなったり、家で写真を加工する必要がある時、画像処理ソフトが欲しいですね。

その時は今回の主役の出番です。
Adobe社の無料な画像編集エディタ【 Adobe Creative SDK 】
Adobe Creative SDKサイトトップ
Adobe社の画像エディタ?!しかも無料?!!
そう!間違いなくAdobe社のツールを無料で使い放題です!
しかも自分のWebサービス・アプリに組み込むができます!!

機能紹介

一先ず、このツールの機能リストを洗い出しました。

  • 強調
  • フィルタ
  • フレーム
  • オーバーレイ
  • スタンプ
  • オリエンテーション
  • 切り抜き
  • リサイズ
  • 照明
  • カラー
  • 鮮明度
  • フォーカス
  • 周辺光量補正
  • 傷補正
  • 美白
  • 赤目補正
  • ドロー
  • スプラッシュ
  • テキスト
  • ミーム

疲れたっw
無料とは言え、機能がいっぱいですね。
さて、これから、どうやってこの画像編集エディタを作ってみましょう!

導入手順

環境準備

Web開発者であれば、XAMPP環境は既に完備していると思いますが、XAMPP環境が整えていない方はまずXAMPP環境をインストールしましょう。
インストール方法がわからなかったら、Google先生に聞いてください。

User&App登録

User登録

まず、このSDKを利用するにはAdobe IDが必要です。既にAdobe IDを持っている方はスルーしてください。
持っていない方は公式サイトにて無料のユーザー登録を行いましょう。
簡単なので、この部分は詳しく説明しません。

App登録

続いて、ログインしたら、マイページのナビ欄にある「My Apps」をクリックし、「+NEW APPLICATION」ボタンを押すと、新規「My Apps」登録画面が出てきます。
App登録画面
上記のように内容を記入して、「ADD APPLICATION」ボタンを押したら、新しいエディタアプリの利用情報が登録されます。
そして、画面上に表示される「Client ID」をメモしておいて次のステップにはいりましょう。

コーディング

コーディングというより、簡単なコピペです。
XAMPPのhtdocsフォルダ直下にアプリ用のフォルダを作り、下記ソースコードをコピーして、画像パスなどを自分の物に置き換えるだけです。

Htmlファイル作成

まず、「index.html」です。編集したい画像のパスを「画像パス」のところに入れてください。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>画像編集APP</title>
    <script src="https://dme0ih8comzn4.cloudfront.net/imaging/v2/editor.js"></script>
  </head>
  <body>
    <img src="画像パス" id="img">
    <script src="main.js"></script>
  </body>
</html>

Jsファイル作成

次は同じフォルダに「main.js」を作成し、下記「Client ID」文字を先程メモしたClient IDに置き換えます。


var image = document.getElementById('img');

// 画像編集エディタを利用するための準備
var Editor = new Aviary.Feather({
    language: 'ja',
    apiKey: 'Client ID'
});

// 画像要素をクリックすると編集モードに
image.addEventListener('click', function () {
    Editor.launch({
        image: img.id,
        url: img.src
    });
});

僕の環境に最終的にはこんな感じです。
ファイル構成
「sdk.jpg」は修正したい画像です、この場合htmlファイルの画像パスは以下です。


<img src="./sdk.jp" id="img">

体験

Apacheを起動して、http://localhost/test/index.html にアクセスして、画像をクリックすると……
わうっ、もう画像の編集ができます!
完成画面
もちろん、もっと細かくカスタマイズが出来ますが、今日はあくまで簡単な紹介ですので、「詳しく設定したい!」、「iOSやAndroidに組み込みたい」という場合は公式ドキュメントにてご確認ください。

このエントリーをはてなブックマークに追加

ピンポンが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ