paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ファイルアップロードや画像編集を劇的に簡易化するJavaScriptライブラリ「Uploadcare」を使ってみた!

f:id:paiza:20171025172743j:plain
どうも、まさとらん(@0310lan)です!

今回は、自分のWebサイトに高機能な「ファイルアップローダー」を簡単に組み込めるJavaScriptライブラリをご紹介します!

PCのローカルファイルや画像URL、多彩なオンラインストレージやSNSなどの写真も活用でき、画像編集もできるAPIが提供されているので非常に便利ですよ。

Uploadcare

f:id:paiza:20171025172849j:plain

■「Uploadcare」の使い方!

それでは、実際に「Uploadcare」を使いながら、どのようなサービスなのかを詳しく見ていきましょう!

まずはトップページにあるボタンをクリックして、ユーザー登録を済ませておきます。
f:id:paiza:20171025172908j:plain
GitHub」や「Google」のアカウントでもログインできるので簡単です。


ログインすると、自分専用の「ダッシュボード」が表示されます。
f:id:paiza:20171025172922j:plain
画面中央に表示されている「Create a project」ボタンをクリックして、新規プロジェクトを作ってみましょう。


次に、自分の好きな「プロジェクト名」を入力します。
f:id:paiza:20171025172937j:plain


uploadcareの「(1)JavaScriptライブラリ本体」と、実際にHTMLへ記述する「(2)inputタグ」が表示されるのでコピーしておきます。
f:id:paiza:20171025172949j:plain


「(1)JavaScriptライブラリ」はheadタグの最下段に貼り付け、「(2)inputタグ」は表示させたい場所に配置します。
f:id:paiza:20171025173002j:plain
この「inputタグ」を1行記述するだけで、アップロードエディタが起動するボタンを配置することができます。


ブラウザで表示すると、以下のような「ボタン」が表示されるのでクリックしましょう!
f:id:paiza:20171025173014j:plain


すると、ファイルアップロード用のエディタ画面が起動します。
f:id:paiza:20171025173030j:plain
この状態で、すでに10種以上のオンラインストレージサービスやSNSと連携可能で、URLやローカルファイルからもアップロードすることが可能になっています!

このままでも良いのですが、JavaScriptを使って柔軟にカスタマイズも可能なのでさらに詳しく見ていきましょう。

JavaScriptでカスタマイズしよう!

Uploadcare」が持つほとんどの機能は、JavaScriptから操作できるように設計されているので自分好みのアップローダーを作れるのが大きな特徴です。

なかでも、特に便利でオススメのカスタマイズをいくつかご紹介していきます!


まず最初に「日本語対応」をしておきましょう。
…と言っても方法は簡単です!

次のようなJavaScriptを1行記述するだけでOKです。

UPLOADCARE_LOCALE = 'ja';


たったこれだけで、アップローダーを起動すると日本語化されるのです。
f:id:paiza:20171025173111j:plain
(自分で翻訳したテキストを表示することも可能)


さらに、デフォルトで表示されているSNSやオンラインストレージサービスを変更してみましょう!

こちらも、次の1行を追記するだけです。

UPLOADCARE_TABS = 'file url facebook gdrive dropbox';

この場合は、PCのローカルファイル、画像URL、FacebookGoogleドライブ、Dropboxを利用することができます。


アップローダーを起動するとこんな感じに変化します。
f:id:paiza:20171025173141j:plain
連携できるサービスは10種類以上あるので、自分好みにカスタマイズしてみましょう!(独自のタブを追加することもできます)


他にも、以下のようなグローバル変数が標準で用意されています!

//inputタグ内に記述していたPublic KeyをJavaScriptで代用
UPLOADCARE_PUBLIC_KEY = '【自分のPublic Key】';


//画像ファイルのみアップロードする設定
UPLOADCARE_IMAGES_ONLY = true;


//アップロードした画像に「切り抜き」機能を追加
UPLOADCARE_CROP = '300x200';


//アップロードする画像を指定サイズに圧縮する
UPLOADCARE_IMAGE_SHRINK = '1024x1024';


//アップロードした画像をプレビュー表示する
UPLOADCARE_PREVIEW_STEP = true;


特に、「プレビュー」と「切り抜き」を利用すればユーザーフレンドリーなアップローダーに早変わりするのでオススメです!
f:id:paiza:20171025173213j:plain
(その他、グローバル変数についての詳細はコチラから)

■アップロードした画像を表示しよう!

今度は、「Uploadcare」でアップロードした画像をWebページに表示してみましょう!

これは簡単なJavaScriptコードで実現します。


まず最初に、「Uploadcare」のインスタンスを次のように作成します。

 var sw = uploadcare.Widget('[role=uploadcare-uploader]');

inputタグに記述した「role属性」の値を引数に入れてあげましょう。


そして、画像ファイルをアップロードした後の処理については「onUploadComplete()」に記述します。

sw.onUploadComplete( function( info ) {


    //画像ファイルアップロード後の処理を書く


}

コールバック関数の引数「info」には、アップロードした画像ファイルの情報が詰まっており、「info.cdnUrl」で画像URLを取得することができます。


そこで、JavaScriptから「imgタグ」を生成して画像をWebページに表示してみましょう!

sw.onUploadComplete( function( info ) {
  
    //「imgタグ」を生成する
    var img = document.createElement( 'img' );
  
    //アップロードした画像URLを取得する
    img.src = info.cdnUrl;


    //画像をWebページに表示する
    document.body.appendChild( img );
  
});


実際に、画像を1枚アップロードしてみます。
f:id:paiza:20171025173328j:plain


すると、見事にアップロードした画像が表示されましたね!
f:id:paiza:20171025173339j:plain

他にも、JavaScript APIを活用すると、ボタンを使わずにアップローダーをダイレクトに表示したり、プログレスバーを表示してユーザーフレンドリーなUIにすることも可能です。
JavaScriptマニュアルはコチラから閲覧できます)

■画像編集用のAPIを活用しよう!

Uploadcare」には画像編集に特化したAPIが提供されており、これを活用することで超多機能なアップローダーを開発することも可能です。

基本的に「Uploadcare」でアップロードした画像ファイルは、以下のURLで表示することができます。

https://ucarecdn.com/【UUID】


この「UUID」というのは、アップロードした画像に個別で自動付与される値となっており、これはJavaScriptから次のように取得することが可能です。

sw.onUploadComplete( function( info ) {


    console.log( info.uuid );


});


このように「info.uuid」で個別の【UUID】を取得できるため、先ほどのURLと組み合わせると次のようになります。
https://ucarecdn.com/85b5644f-e692-4855-9db0-8c5a83096e25/
f:id:paiza:20171025173455j:plain
見事に画像が表示されましたね!

そして、このURLにオプションを付与することで、さまざまな編集ができるようになっています。


例えば、URLの最後に【-/resize/300x300/】と記述するだけで、画像サイズを300×300に変更することが出来るのです!
f:id:paiza:20171025173530j:plain


サイズの変更ではなく、指定サイズに切り抜きたい場合には【-/crop/800x400/center/】と記述すれば画像の中心から切り抜くことができます!
f:id:paiza:20171025173548j:plain


これらのオプションは、複数を組み合わせることも可能です!

例えば、「切り抜き」「回転」「グレースケール」を同時に実行したい場合は【-/crop/600x400/center/-/rotate/180/-/grayscale/】のように記述すればOK!
f:id:paiza:20171025173618j:plain
他にも、【 -/format/png/ 】で画像フォーマットを「jpg / png / webp」などに変換したり、【 -/quality/best/ 】で画像の解像度(normal / better / best…など)を簡単に変更できます。

また、【 -/json/ 】【 -/jsonp/ 】を利用することで、画像に関連する情報をJSON形式で取得できたり、【 /archive/zip/sample.zip 】のように記述することで圧縮ファイルとしてダウンロードすることも可能です。


さらに、もっと面白い機能として「顔認識」を利用することもできます!

例えば、次のような人物の「顔」が写っている画像をアップロードします。
f:id:paiza:20171025173636j:plain


そして、画像の「UUID」を取得してURLの最後に【detect_faces/】を付与すると、顔の位置を表す座標を取得することができるのです!
f:id:paiza:20171025173645j:plain


この座標データを活用してCanvasで描画すれば、こんな感じで「顔の位置」を特定できるというわけです。
f:id:paiza:20171025173654j:plain

このようなAPIは、他にもたくさん用意されているのでぜひ公式マニュアルを参考に挑戦してみてくださいね!

JavaScript講座は完全無料!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめに、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、10/10(火)から【全編無料】となりましたので、ぜひごらんください!

詳しくはこちら

■まとめ

今回は、「Uploadcare」の基本的な機能について駆け足でご紹介しました。

Uploadcare」はJavaScript以外にも、Angular / Meteorなどのフレームワークにも対応しており、iOS / Android向けのアプリにも活用できる幅広いツールとして公開されています。

無料プランの提供や活発なバージョンアップも定期的に行われていますので、ぜひ自分だけのアップローダーを作って公開してみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza