シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
注目記事ピックアップ
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
share0
匿名もOK!SkypeでWebコードエディタを共有できる「Interviews on Skype」が無償公開中!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/07/29 20:40

わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!

adobe-creative-sdk_01 どうも、まさとらん(@0310lan)です!

自分のWebサービス・アプリ内で、本格的な「画像編集」の機能を持ったツールを組み込んで使いたい人に朗報です!

数行の「JavaScriptコード」を追記するだけで、Adobeが提供する画像編集に必要な機能全部入りのエディタが、自分のWebサービス上で使えるツールをご紹介いたします!

【 Adobe Creative SDK 】
adobe-creative-sdk_02 もともとは、「Aviary」の名称で運営されていたツールなのですが、2014年9月にAdobeが買収してから活発にバージョンアップを続けています。


どんな「画像編集」ができるのか?
「Adobe Creative SDK」を使って、Webサービス内に「画像編集」機能を組み込めば、いつでも高度な編集を実現する「エディタ」を自分のユーザーに提供することができます。
adobe-creative-sdk_03 すでに、多くのWebサービスで利用されているので、似たような「編集エディタ」を見た人もいるでしょう…。


「機能面」については、色調補正やトリミング、リサイズや回転などなど…。基本的な画像編集は問題なく行えます。
adobe-creative-sdk_04

他にも、Instagramのような美しいエフェクト加工を、選択するだけで実行できたり…
adobe-creative-sdk_05

ユニークな「スタンプ」を使って、写真に装飾をしてみたり…
adobe-creative-sdk_06

任意の箇所だけ「色」を再現する機能や…
adobe-creative-sdk_07

文字テキストやフレームなどを使って、オリジナリティを出すことも可能です!
adobe-creative-sdk_08 他にも、「美肌」効果を付与したり、モザイク処理を施したりなど、非常に多彩な機能を備えているのが特徴的です。

これだけ多機能な「画像編集」機能を、無料で簡単に利用することができるのは驚きですね。

それでは、実際に使ってみながら、詳細を見ていきましょう!


最初に「準備」すること!
今回は、サンプルとして画像だけを表示するWebページを作り、その画像をクリックすると「編集エディタ」が表示するようにしてみたいと思います。

そこで、まずは「Adobe Creative SDK」のサイトでユーザー登録をして「マイページ」を表示させます。
adobe-creative-sdk_09 そして、アプリケーションの作成ボタンをクリック!


すると、初期設定の画面が表示されます。
adobe-creative-sdk_10 (プラットフォームは「Web」にしました)


設定が完了したら、アプリが作成されているのが分かります。
adobe-creative-sdk_11 そして、ここに明記されている「Client ID」は、あとで使うので「メモ」をしておきましょう。

これで、「画像編集エディタ」を利用するための登録は完了です。



次に、Webページへの「組み込み」をしていきます!

そこで、まずは必要なJavaScriptライブラリ「editor.js」を、既存のHTMLファイルに読み込んでおきます。


今回は、画像だけを表示する「サンプルページ」を用意しました。
「editor.js」を読み込み、「bodyタグ」内には画像だけを表示します。

そして、新しく「main.js」を用意して、ここに「画像編集エディタ」を利用するためのコードを書いていきましょう。


早速、組み込んでみよう!
ここまで来たら、あとは「画像編集エディタ」を使えるようにプログラミングするだけです!

「プログラミング」…と聞くと難しく感じるかもしれませんが、必要なコードはこれだけです!
一瞬、「えっ?」と感じるかもしれませんが、これで「画像編集エディタ」が使えるようになっているのです。

ちなみに「apikey」は、先ほど「マイページ」でメモをした「Client ID」をコピペすればOKです。



あと、今回のサンプルでは「画像」をクリックすることで、「編集エディタ」を表示させたいので、簡単な「イベント処理」を追記しておきます。
クリックイベント内で「Editor.launch()」を実行させれば、「画像編集エディタ」が起動して表示されます。

「Editor.launch()」の中身は、クリックする画像(imgタグ)の「id」と「src」を渡しているだけです。

それでは、この状態でWebページを見てみましょう!


ページが表示されたら、「画像」をクリックしてみます!
adobe-creative-sdk_12

すると、見事に「画像編集エディタ」が表示されました!
adobe-creative-sdk_13 おめでとうございます!

これで、多彩な編集がこのままWeb上で実現できるようになったわけです。


あとは、自分好みに開発を進めていけるのですが、初めての場合は「開発モード」になっているかと思います。

このままでも利用できますが、アクセス人数に制限があるので、公開する際には必要事項を設定して「アプリ登録」をしておきましょう!
adobe-creative-sdk_14 (マイページの「設定」から登録できます)


他にもまだある、こんな機能たち!
「Adobe Creative SDK」のドキュメントには、さまざまな「オプションコード」が紹介されています。
adobe-creative-sdk_15 これを活用すると、「画像編集エディタ」を自分好みにカスタマイズ出来るのが面白いところ…。


例えば、デフォルト状態だとすべて「英語」で表記されていますが、「language = ‘ja’」と書くだけですべて日本語に変わります。
adobe-creative-sdk_16 現在、数十各国の言語に対応しています。


また、画像を編集する「機能」を制限して、必要なツールだけを表示させることもできます。
adobe-creative-sdk_17 これを利用すると、例えば…特定のユーザーだけ機能を限定するような使い方も考えられるでしょう。


さらに、編集した画像を保存すると…
adobe-creative-sdk_18

元の画像を、編集後の「新しい画像」へ差し替えるように動作を変えることも可能です!
adobe-creative-sdk_19 (上記のカスタマイズコードはコチラから参照できます)

このように、細かくカスタマイズできるのは嬉しいポイントで、さらに「CSS」を上書きして見た目のデザインを変更することもできるようになっています。

ご興味ある方は、ぜひ参考にしてみてください!

(カスタマイズの詳細ドキュメントはコチラ


おまけ
今回ご紹介した「画像編集エディタ」以外にも、実はさまざまな機能を簡単に組み込めるツールが多く存在しています。

その中から、厳選されたモノを合わせてご紹介しておきます!

【最近のWebアプリ開発に使う「API」7選が、スゴ過ぎて革命が起きそうなレベル!】
adobe-creative-sdk_20 iPhoneの「Siri」みたいな機能を追加できるものや、ショップの機能全部入りのツール、高度な画像認識、テキスト要約…などなど。

いずれも、面白いWebサービスやアプリを開発するのに最適なものばかりです。

ぜひ参考にしてみてください!


まとめ
今回はご紹介できてませんが、実はスマホ用に「iOS/Android」向けの「画像編集エディタ」も用意されています。

画像系のアプリを検討している方は、きっと強力な手助けになること間違いなし!

「Adobe Creative SDK」を活用すれば、「スマホ」も「Web」も強力な画像編集機能が誰でも簡単に使えるようになるでしょう。

ぜひ、みなさんも自分のWebサービスやアプリに組み込んでみてください!


<参考>
「Adobe Creative SDK」公式サイト



wirtten by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る