はじめに
今回から新たにアプリ開発の連載をはじめます。よろしくお願いします。皆さんは、Windows 8はもうさわりましたか? この連載ではWindows 8に関連したりしなかったりのアプリ開発についてお届けする予定です! もちろんWindows 8からの新しいアプリ「Windowsストア アプリ」も扱う予定です。
今回は、SkyDriveと連携したWebアプリ開発についてお届けします(Windows 8のタイルベースのUIつながりということで)。SkyDriveはWindows 8でも注目のサービスですので、ぜひチェックしてみてください。提供されているAPIを使えば連携したアプリも簡単に作れます。
SkyDriveと連携したWebアプリ
SkyDriveは、オンラインのストレージサービスです。いろいろなプラットフォームで、ファイルの共有や同期ができます。Windows PC・Mac・iPhone・iPad・Android・Windows Phone・Windowsストア アプリのクライアントアプリが公式からリリースされています。
今回使うのは、Live Connectという開発者向けのAPIコレクションです。主にWindows Liveサービスのブランドが付いていたSkyDrive、Hotmail(Outlook)、Messengerと連携したアプリを開発するためのものです。RESTサービスを中心としたAPIで、Windowsだけでなく多様なプラットフォームで使えます。
また、Live SDKというライブラリとサンプルコードも提供されています。iOSやAndroidもターゲットとしてSDKが用意されています。もちろん、Windowsストア アプリやWindows Phone向けの内容もあります。
このLive Connectを利用するとSkyDriveと連携したアプリ開発ができます。たとえば、Attachments.meが提供している、Gmail向けのChrome拡張を利用すると、メールにファイルを添付する代わりにSkyDriveにアップロードしてそのリンクを送信するといったことが簡単にできます(図2)。
ちなみに、SkyDriveを経由したファイルの送信は、Outlook.comでは標準の機能です(図3)。
今回取り上げるのはWebアプリとの連携ですが、もちろん、デスクトップアプリやモバイルアプリと連携もできます。
SkyDriveファイル ピッカー
今回は、簡単に利用できるWebアプリ向けのSkyDriveファイル ピッカーを使ってみましょう。SkyDriveファイル ピッカーは、SkyDriveへファイルのアップロードとダウンロードのための統一のUIを提供します。
提供されているJavaScriptライブラリを利用すると、次の2種類のUIがWebアプリで使えます。
サポートしているWebブラウザーは次の通りです。
- Microsoft Internet Explorer 8以上
- Mozilla Firefox 10以上
- Apple Safari 5.1以上
- Google Chrome 17以上
ファイル ピッカー自体は、UIだけを提供するもので、アップロードとダウンロードは別に実装が必要ですが、アップロード・ダウンロードとも同じライブラリで簡単に使えるので一緒にみてみましょう。
アプリの登録
連携アプリを作るためには、はじめにLive Connectデベロッパー センターで、アプリの登録が必要です。SkyDriveなどのWebサービスとの連携は、OAuthというプロトコルによって、ユーザーがアプリに対してSkyDriveへのアクセスを許可します。
アプリの作成
はじめに、Live Connectデベロッパーのアプリケーションの作成(図6)から、使用条件の確認し、アプリ名とアプリのメイン言語を指定します。ここでのアプリ名は管理用で後から実際のアプリ名を付けられます。
基本情報の設定
続いて、左のメニューから基本情報を選択し、アプリの基本情報を登録しましょう(図7)。ユーザーに表示するアプリ名、ロゴ、アプリの利用規約やプライバシーポリシーのURLが設定できます。
API設定
メニューからAPI設定を選択し、OAuthのための設定を行います。Webアプリが使うURLのドメインを「リダイレクトドメイン」に指定します。
以上で、必要なアプリの登録作業は完了です。
WebアプリでLive Connectの利用
それでは、アプリを作り始めます。
JavaScript APIの利用
Webアプリでは、Live ConnectのJavaScript APIを利用します。
適当なHTMLファイルを作り、Live Connectで提供されているJavaScriptライブラリを参照します。
日本語にローカライズされたバージョンを利用する場合、次のURLを参照します。言語を指定しない場合、通常はユーザーのローカルの環境の設定が反映されます。
ライブラリを参照すると、WLというグローバルオブジェクトが利用できます。WLオブジェクトを使って、JavaScript APIの関数を呼び出します。
JavaScript APIの初期化
はじめに、初期化処理が必要です。次のようにWL.initを使います。
client_idのCLIENT_IDには、Live Connectデベロッパー センターのAPI 設定にある「クライアント ID」を指定します。redirect_uri部分のURLは、WebアプリのURLを指定します。
ほかの項目は、ここでは詳しく触れませんが、scopeには、ユーザーに求める許可(スコープ)を指定し、wl.signinはシングル サインインを示すものです。SkyDriveやOutlookにサインインしていると連携したWebアプリにもサインインできます。response_typeのtokenは、OAuth 2.0のImplicit Grantという認可方式を指定するものです。
全体のコード
以上で最低限 必要な準備ができました。全体のコードは次のようになります。jQueryは必須ではありませんが、この後のコードで使うため参照しています。
開発する際の注意
WebアプリのURLを指定したように、そのドメインでのみWebアプリは動きます。HTMLファイルを直接Webブラウザーで開いて、またはlocalhostドメインで実行した場合、エラーが発生します。
Windowsで開発する場合、hostsファイルを編集し、登録したドメインをlocalhostに指定しておくと便利です。次のようにドメインを追加します。
SkyDriveへファイルのアップロード
それでは、ファイル ピッカーを使ってSkyDriveへファイルをアップロードしてみましょう。
ファイル ピッカーの表示は、WL.fileDialog、アップロードは、WL.uploadを使います。
アップロード ファイル ピッカーの表示
アップロードを行うファイル ピッカーの表示は次のように記述します。
fileDialogの第1引数には、次のプロパティを指定します。
プロパティ | 説明 |
mode | "save"を指定 |
lightbox | 表示するダイアログ外の背景色を指定
"white"(既定)、"grey"、"transparent"のいずれか |
fileDialogメソッドはPromiseオブジェクトを返します。これは、CommonJS Promise/Aという仕様に沿ったもので、簡単に非同期プログラミングを記述できます。
上記コードのように通常thenというメソッドが使われ、第1~3引数に、成功した場合・失敗した場合・処理の進み具合のコールバック関数を指定します。
ファイルのアップロード
ファイル ピッカーによって、ユーザーが選択したフォルダーがわかります。これを利用して、ファイルをアップロードします。
ファイルのアップロードは次のように記述します。
uploadの第1引数には、次のプロパティを指定します。
プロパティ | 説明 |
path | アップロード先にフォルダーID |
element | ファイルを指定している<input>タグのid |
overwrite | 同名のファイルがあった場合の処理
"true": 上書き
"false": 上書きしない(既定)
"rename": 自動で別名をつける |
pathに、ファイル ピッカーで得られたフォルダーIDを指定します。レスポンスの内容は、この後の節を見てください。
ファイルの指定には、type属性がfileの<input>タグを使います(この後のHTMLコードを見てください)。そのidの値をelementに指定します。
アップロード先に同名のファイルが既にある場合があります。その時の処理を、overwriteで指定します。"false"を指定した場合、同名のファイルがあるとアップロードは失敗します。
uploadメソッドもPromiseオブジェクトを返します。thenメソッドでつなげて、アップロードが成功した場合と失敗した場合の関数を指定します。
ファイル ピッカーのレスポンス
ファイル ピッカーのレスポンスは、JSON形式で次のような内容になっています。このidの値がフォルダーIDです。ID以外に、フォルダー名などもレスポンスからわかります。
全体のコード
全体のコードを示します。ファイルを指定するためと、アップロードのボタンに、<input>タグを使います。
以上で、アップロード処理は完了です。実際に動作を確かめてみましょう。はじめて実行したときは、接続の許可を求める画面が表示されます(図9)
SkyDriveからファイルのダウンロード
次は、ファイル ピッカーを使ってSkyDriveからファイルをダウンロードしてみましょう。
ファイル ピッカーの表示は、アップロードと同じくWL.fileDialog、ダウンロードは、WL.downloadを使います。
ダウンロード ファイル ピッカーの表示
ダウンロードを行うファイル ピッカーの表示は次のように記述します。
fileDialogの第1引数には、次のプロパティを指定します。
プロパティ | 説明 |
mode | "open"を指定 |
select | 複数のファイル・フォルダーの選択を許可するか指定
"single": ひとつのファイルのみ選択(既定)
"multi": 複数のフォルダー・ファイルの選択を許可 |
lightbox | 表示するダイアログ外の背景色を指定
"white"(既定)、"grey"、"transparent"のいずれか |
アップロードと比べて、selectプロパティが増えています。"single"を指定した場合、ひとつのファイルのみ選択できます。"multi"を指定した場合、フォルダーのみの選択や、複数のフォルダー・ファイルを選択できるようになります。
ファイルのダウンロード
ファイル ピッカーによって、ユーザーが選択したファイルがわかります。ひとつのファイルのダウンロードは、WL.downloadを使って次のように記述します。
downloadの第1引数には、次のプロパティを指定します。
プロパティ | 説明 |
path | ダウンロードするファイルのURL |
pathに、ファイル ピッカーで得られたファイルの実態を示すURLを指定します。レスポンスの内容は、この後の節を見てください。
downloadメソッドもPromiseオブジェクトを返します。
ダウンロードの動作は、Webブラウザーによって動作が異なり、Webアプリから制御はできません(図10)。
ファイル ピッカーのレスポンス
ファイル ピッカーのレスポンスは、JSON形式で次のような内容になっています。
fileDialogのselectプロパティに"single"を指定した場合は、files配列にひとつ選択したファイル情報が入っています。sourceの値が一時的なファイルの実態を示すURLです。
"multi"を指定した場合は、フォルダーとファイル情報が複数帰ってくる可能性があります。上記のJSON形式は、フォルダーとファイルをひとつずつ選択した場合を示しています。
全体のコード
全体のコードを示します。ファイルを指定するためと、ファイル ピッカーを表示するために、<input>タグによるボタンを使っています。
以上で、ダウンロード処理は完了です。実際に動作を確かめてみましょう。
以下に、fileDialogのselectプロパティに"multi"を指定した場合、選択したフォルダーとファイルIDの一覧を表示する例も示しておきます。フォルダーをダウンロードする機能はJavaScript APIにはありません。また、フォルダー内容の一覧を取得するためには、別途APIの呼び出しが必要です(今回は触れません)。
ファイル ピッカー用のボタン
Live Connectでは、ファイル ピッカーを表示するためのボタンも用意されています(図11)。
このUIを利用する方法も紹介しておきます。WL.fileDialogの代わりにWL.uiを利用します。Webアプリのデザインに合わせて使い分けてみてください。
ボタンを表示するコードは次のようになります。
uiの第1引数には、次のプロパティを指定します。
プロパティ | 説明 |
name | "skydrivepicker"を指定 |
element | ボタンを表示する<div>タグのid |
mode | 次のいずれか
"save": 保存ファイル ピッカー
"open": 開くファイル ピッカー |
select | modeに"open"を指定した場合必須
"single"または"multi" |
theme | ボタンのテーマ色
"white"(既定)または"bule" |
lightbox | 表示するダイアログ外の背景色
"white"(既定)、"grey"、"transparent"のいずれか |
onselected | 「保存」、「開く
」ボタンをクリックしたときに呼ばれるコールバック関数を指定 |
onerror | キャンセルまたはエラーが発生したときに呼ばれるコールバック関数を指定 |
特に難しいところはないと思います。onselected、onerrorには、WL.fileDialogの場合に記述したアップロードやダウンロードのコードを使うことで同様の内容が実装できます。
ちなみに、このuiメソッドは、ファイル ピッカー以外のUIを描画するためにも使われます。
おわりに
今回はここまでです。どうでしたか? Webサービスと連携したアプリを作るときは、SkyDrive連携もいれてみるといいかもしれませんね。
ちなみに、Windowsストア アプリでもJavaScript APIが利用できますが、今回紹介した内容は、ストア アプリのほうでは対応していません。別のメソッドの利用や、別の方法で実現する必要があります。また次の機会に触れたいと思います。