どうも、まさとらん（@0310lan）です！
今回は、自分のWebサイトに高機能な「ファイルアップローダー」を簡単に組み込めるJavaScriptライブラリをご紹介します！
PCのローカルファイルや画像URL、多彩なオンラインストレージやSNSなどの写真も活用でき、画像編集もできるAPIが提供されているので非常に便利ですよ。
【 Uploadcare 】
■「Uploadcare」の使い方！
それでは、実際に「Uploadcare」を使いながら、どのようなサービスなのかを詳しく見ていきましょう！
まずはトップページにあるボタンをクリックして、ユーザー登録を済ませておきます。
「GitHub」や「Google」のアカウントでもログインできるので簡単です。
ログインすると、自分専用の「ダッシュボード」が表示されます。
画面中央に表示されている「Create a project」ボタンをクリックして、新規プロジェクトを作ってみましょう。
次に、自分の好きな「プロジェクト名」を入力します。
uploadcareの「（1）JavaScriptライブラリ本体」と、実際にHTMLへ記述する「（2）inputタグ」が表示されるのでコピーしておきます。
「（1）JavaScriptライブラリ」はheadタグの最下段に貼り付け、「（2）inputタグ」は表示させたい場所に配置します。
この「inputタグ」を1行記述するだけで、アップロードエディタが起動するボタンを配置することができます。
ブラウザで表示すると、以下のような「ボタン」が表示されるのでクリックしましょう！
すると、ファイルアップロード用のエディタ画面が起動します。
この状態で、すでに10種以上のオンラインストレージサービスやSNSと連携可能で、URLやローカルファイルからもアップロードすることが可能になっています！
このままでも良いのですが、JavaScriptを使って柔軟にカスタマイズも可能なのでさらに詳しく見ていきましょう。
■JavaScriptでカスタマイズしよう！
「Uploadcare」が持つほとんどの機能は、JavaScriptから操作できるように設計されているので自分好みのアップローダーを作れるのが大きな特徴です。
なかでも、特に便利でオススメのカスタマイズをいくつかご紹介していきます！
まず最初に「日本語対応」をしておきましょう。
…と言っても方法は簡単です！
次のようなJavaScriptを1行記述するだけでOKです。
UPLOADCARE_LOCALE = 'ja';
たったこれだけで、アップローダーを起動すると日本語化されるのです。
（自分で翻訳したテキストを表示することも可能）
さらに、デフォルトで表示されているSNSやオンラインストレージサービスを変更してみましょう！
こちらも、次の1行を追記するだけです。
UPLOADCARE_TABS = 'file url facebook gdrive dropbox';
この場合は、PCのローカルファイル、画像URL、Facebook、Googleドライブ、Dropboxを利用することができます。
アップローダーを起動するとこんな感じに変化します。
連携できるサービスは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;
特に、「プレビュー」と「切り抜き」を利用すればユーザーフレンドリーなアップローダーに早変わりするのでオススメです！
（その他、グローバル変数についての詳細はコチラから）
■アップロードした画像を表示しよう！
今度は、「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枚アップロードしてみます。
すると、見事にアップロードした画像が表示されましたね！
他にも、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/ 】
見事に画像が表示されましたね！
そして、このURLにオプションを付与することで、さまざまな編集ができるようになっています。
例えば、URLの最後に【-/resize/300x300/】と記述するだけで、画像サイズを300×300に変更することが出来るのです！
サイズの変更ではなく、指定サイズに切り抜きたい場合には【-/crop/800x400/center/】と記述すれば画像の中心から切り抜くことができます！
これらのオプションは、複数を組み合わせることも可能です！
例えば、「切り抜き」「回転」「グレースケール」を同時に実行したい場合は【-/crop/600x400/center/-/rotate/180/-/grayscale/】のように記述すればOK！
他にも、【 -/format/png/ 】で画像フォーマットを「jpg / png / webp」などに変換したり、【 -/quality/best/ 】で画像の解像度（normal / better / best…など）を簡単に変更できます。
また、【 -/json/ 】【 -/jsonp/ 】を利用することで、画像に関連する情報をJSON形式で取得できたり、【 /archive/zip/sample.zip 】のように記述することで圧縮ファイルとしてダウンロードすることも可能です。
さらに、もっと面白い機能として「顔認識」を利用することもできます！
例えば、次のような人物の「顔」が写っている画像をアップロードします。
そして、画像の「UUID」を取得してURLの最後に【detect_faces/】を付与すると、顔の位置を表す座標を取得することができるのです！
この座標データを活用してCanvasで描画すれば、こんな感じで「顔の位置」を特定できるというわけです。
■JavaScript講座は完全無料！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
今回記事の中で使用しているJavaScriptが学べる入門講座をはじめに、Python、Java、C言語、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください！
特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、10/10（火）から【全編無料】となりましたので、ぜひごらんください！
詳しくはこちら
■まとめ
今回は、「Uploadcare」の基本的な機能について駆け足でご紹介しました。
「Uploadcare」はJavaScript以外にも、Angular / Meteorなどのフレームワークにも対応しており、iOS / Android向けのアプリにも活用できる幅広いツールとして公開されています。
無料プランの提供や活発なバージョンアップも定期的に行われていますので、ぜひ自分だけのアップローダーを作って公開してみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
