はじめようWindows 8世代のアプリ開発

第1回SkyDriveと連携したWebアプリ

はじめに

今回から新たにアプリ開発の連載をはじめます。よろしくお願いします。皆さんは、Windows 8はもうさわりましたか? この連載ではWindows 8に関連したりしなかったりのアプリ開発についてお届けする予定です! もちろんWindows 8からの新しいアプリ「Windowsストア アプリ」も扱う予定です。

今回は、SkyDriveと連携したWebアプリ開発についてお届けします(Windows 8のタイルベースのUIつながりということで⁠⁠。SkyDriveはWindows 8でも注目のサービスですので、ぜひチェックしてみてください。提供されているAPIを使えば連携したアプリも簡単に作れます。

図1 SkyDriveにWebアプリからファイルのアップロード
図1 SkyDriveにWebアプリからファイルのアップロード

SkyDriveと連携したWebアプリ

SkyDriveは、オンラインのストレージサービスです。いろいろなプラットフォームで、ファイルの共有や同期ができます。Windows PCMaciPhoneiPadAndroidWindows PhoneWindowsストア アプリのクライアントアプリが公式からリリースされています。

今回使うのは、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⁠。

図2 Attachments.meのGmail拡張機能を利用した場合のメール作成画面
図2 Attachments.meのGmail拡張機能を利用した場合のメール作成画面

ちなみに、SkyDriveを経由したファイルの送信は、Outlook.comでは標準の機能です図3⁠。

図3 Outlookのメール作成画面
図3 Outlookのメール作成画面

今回取り上げるのはWebアプリとの連携ですが、もちろん、デスクトップアプリやモバイルアプリと連携もできます。

SkyDriveファイル ピッカー

今回は、簡単に利用できるWebアプリ向けのSkyDriveファイル ピッカーを使ってみましょう。SkyDriveファイル ピッカーは、SkyDriveへファイルのアップロードとダウンロードのための統一のUIを提供します。

提供されているJavaScriptライブラリを利用すると、次の2種類のUIがWebアプリで使えます。

図4 SkyDriveファイル ピッカー(保存)
図4 SkyDriveファイル ピッカー(保存)
図5 SkyDriveファイル ピッカー(開く)
図5 SkyDriveファイル ピッカー(開く)

サポートしている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から、使用条件の確認し、アプリ名とアプリのメイン言語を指定します。ここでのアプリ名は管理用で後から実際のアプリ名を付けられます。

図6 アプリの作成
図6 アプリの作成

基本情報の設定

続いて、左のメニューから基本情報を選択し、アプリの基本情報を登録しましょう図7⁠。ユーザーに表示するアプリ名、ロゴ、アプリの利用規約やプライバシーポリシーのURLが設定できます。

図7 アプリの基本情報の設定
図7 アプリの基本情報の設定

API設定

メニューからAPI設定を選択し、OAuthのための設定を行います。Webアプリが使うURLのドメインを「リダイレクトドメイン」に指定します。

図8 API設定
図8 API設定

以上で、必要なアプリの登録作業は完了です。

WebアプリでLive Connectの利用

それでは、アプリを作り始めます。

JavaScript APIの利用

Webアプリでは、Live ConnectのJavaScript APIを利用します。

適当なHTMLファイルを作り、Live Connectで提供されているJavaScriptライブラリを参照します。

<script src="//js.live.net/v5.0/wl.js"></script>

日本語にローカライズされたバージョンを利用する場合、次のURLを参照します。言語を指定しない場合、通常はユーザーのローカルの環境の設定が反映されます。

<script src="//js.live.net/v5.0/ja/wl.js"></script>

ライブラリを参照すると、WLというグローバルオブジェクトが利用できます。WLオブジェクトを使って、JavaScript APIの関数を呼び出します。

JavaScript APIの初期化

はじめに、初期化処理が必要です。次のようにWL.initを使います。

WL.init({
    client_id: "CLIENT_ID",
    redirect_uri: "http://***.jp/",
    scope: "wl.signin",
    response_type: "token"
});

client_idCLIENT_IDには、Live Connectデベロッパー センターのAPI 設定にある「クライアント ID」を指定します。redirect_uri部分のURLは、WebアプリのURLを指定します。

ほかの項目は、ここでは詳しく触れませんが、scopeには、ユーザーに求める許可(スコープ)を指定し、wl.signinはシングル サインインを示すものです。SkyDriveやOutlookにサインインしていると連携したWebアプリにもサインインできます。response_typetokenは、OAuth 2.0のImplicit Grantという認可方式を指定するものです。

全体のコード

以上で最低限 必要な準備ができました。全体のコードは次のようになります。jQueryは必須ではありませんが、この後のコードで使うため参照しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sample</title>
    <script src="//js.live.net/v5.0/wl.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
</head>
<body>
    <script>
        WL.init({
            client_id: "CLIENT_ID",
            redirect_uri: "http://***.jp/",
            scope: "wl.signin",
            response_type: "token"
        });
    </script>
</body>
</html>

開発する際の注意

WebアプリのURLを指定したように、そのドメインでのみWebアプリは動きます。HTMLファイルを直接Webブラウザーで開いて、またはlocalhostドメインで実行した場合、エラーが発生します。

Windowsで開発する場合、hostsファイルを編集し、登録したドメインをlocalhostに指定しておくと便利です。次のようにドメインを追加します。

%windir%\System32\Drivers\etc\hosts
127.0.0.1 ***.jp
管理者権限で編集します。

SkyDriveへファイルのアップロード

それでは、ファイル ピッカーを使ってSkyDriveへファイルをアップロードしてみましょう。

ファイル ピッカーの表示は、WL.fileDialogアップロードは、WL.uploadを使います。

アップロード ファイル ピッカーの表示

アップロードを行うファイル ピッカーの表示は次のように記述します。

WL.fileDialog({
    mode: "save",
    lightbox: "grey" // white, gray, transparent のいずれか(オプション指定)
}).then(
    function (response) {
        // 保存ボタンをクリックした場合
        // (ここにアップロード処理を追加)
    },
    function (errorResponse) {
        if (errorResponse.error.code == "user_canceled") {
            // キャンセルボタンをクリックした場合
            return;
        }
        alert("フォルダー情報の取得に失敗しました。\n" + errorResponse.error.message);
    }
);

fileDialogの第1引数には、次のプロパティを指定します。

プロパティ説明
mode"save"を指定
lightbox表示するダイアログ外の背景色を指定
"white"(既定⁠⁠、"grey"、"transparent"のいずれか

fileDialogメソッドはPromiseオブジェクトを返します。これは、CommonJS Promise/Aという仕様に沿ったもので、簡単に非同期プログラミングを記述できます。

上記コードのように通常thenというメソッドが使われ、第1~3引数に、成功した場合・失敗した場合・処理の進み具合のコールバック関数を指定します。

fileDialogの第2引数にコールバック関数の指定もできますが、推奨されていません。

ファイルのアップロード

ファイル ピッカーによって、ユーザーが選択したフォルダーがわかります。これを利用して、ファイルをアップロードします。

ファイルのアップロードは次のように記述します。

WL.upload({
    path: response.data.folders[0].id,
    element: "file",
    overwrite: "rename" // true, false, rename のいずれか(オプション指定)
}).then(
    function (response) {
        alert("アップロード完了しました。");
    },
    function (errorResponse) {
        alert("アップロードに失敗しました。\n" + errorResponse.error.message);
    }
);

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以外に、フォルダー名などもレスポンスからわかります。

{
  "data": {
    "folders": [
      {
        "id": "folder.xxxxx",
        "link": "https://skydrive.live.com/ redir.aspx?cid=xxxxx",
        "name": "SkyDrive",
        "type": "folder",
        "upload_location": "https://apis.live.net/v5.0/folder.xxxxx/files/"
      }
    ]
  }
}

全体のコード

全体のコードを示します。ファイルを指定するためと、アップロードのボタンに、<input>タグを使います。

<body>の内容
<form>
    <input id="file" name="file" type="file" />
    <input id="button" type="button" value="アップロード" />
</form>

<script>
    // (WL.init の記述)

    $("#button").click(function () {
        WL.fileDialog({
            mode: "save",
            lightbox: "grey"
        }).then(
            function (response) {
                // 保存ボタンをクリックした場合
                WL.upload({
                    path: response.data.folders[0].id,
                    element: "file",
                    overwrite: "rename"
                }).then(
                    function (response) {
                        alert("アップロード完了しました。");
                    },
                    function (errorResponse) {
                        alert("アップロードに失敗しました。\n" + errorResponse.error.message);
                    }
                );
            },
            function (errorResponse) {
                if (response.error.code == "user_canceled") {
                    // キャンセルボタンをクリックした場合
                    return;
                }
                alert("フォルダー情報の取得に失敗しました。\n" + response.error.message);
            }
        );
    });
</script>

以上で、アップロード処理は完了です。実際に動作を確かめてみましょう。はじめて実行したときは、接続の許可を求める画面が表示されます図9

図9 アクセス許可画面
図9 アクセス許可画面

SkyDriveからファイルのダウンロード

次は、ファイル ピッカーを使ってSkyDriveからファイルをダウンロードしてみましょう。

ファイル ピッカーの表示は、アップロードと同じくWL.fileDialogダウンロードは、WL.downloadを使います。

ダウンロード ファイル ピッカーの表示

ダウンロードを行うファイル ピッカーの表示は次のように記述します。

WL.fileDialog({
    mode: "open",
    select: "single", // single, multi のいずれか(オプション指定)
    lightbox: "grey" // white, gray, transparent のいずれか(オプション指定)
}).then(
    function (response) {
        // 開くボタンをクリックした場合
        // (ここにダウンロード処理を追加)
    },
    function (errorResponse) {
        if (errorResponse.error.code == "user_canceled") {
            // キャンセルボタンをクリックした場合
            return;
        }
        alert("フォルダー情報の取得に失敗しました。\n" + errorResponse.error.message);
    }
);

fileDialogの第1引数には、次のプロパティを指定します。

プロパティ説明
mode"open"を指定
select複数のファイル・フォルダーの選択を許可するか指定
"single": ひとつのファイルのみ選択(既定)
"multi": 複数のフォルダー・ファイルの選択を許可
lightbox表示するダイアログ外の背景色を指定
"white"(既定⁠⁠、"grey"、"transparent"のいずれか

アップロードと比べて、selectプロパティが増えています。"single"を指定した場合、ひとつのファイルのみ選択できます。"multi"を指定した場合、フォルダーのみの選択や、複数のフォルダー・ファイルを選択できるようになります。

ファイルのダウンロード

ファイル ピッカーによって、ユーザーが選択したファイルがわかります。ひとつのファイルのダウンロードは、WL.downloadを使って次のように記述します。

WL.download({
    path: response.data.files[0].source
}).then(
    function (response) {
        // ダウンロードが成功した場合呼ばれません。
    },
    function (errorResponse) {
        alert("ダウンロードに失敗しました。\n" + errorResponse.error.message);
    }
);

downloadの第1引数には、次のプロパティを指定します。

プロパティ説明
pathダウンロードするファイルのURL

pathに、ファイル ピッカーで得られたファイルの実態を示すURLを指定します。レスポンスの内容は、この後の節を見てください。

downloadメソッドもPromiseオブジェクトを返します。

ダウンロードの動作は、Webブラウザーによって動作が異なり、Webアプリから制御はできません図10⁠。

図10 Google Chromeでのファイルのダウンロード
図10 Google Chromeでのファイルのダウンロード

ファイル ピッカーのレスポンス

ファイル ピッカーのレスポンスは、JSON形式で次のような内容になっています。

{
  "data": {
    "folders": [
      {
        "id": "folder.xxxxx",
        "link": "https://skydrive.live.com/redir.aspx?cid=xxxxx",
        "name": "SkyDrive",
        "type": "folder",
        "upload_location": "https://apis.live.net/v5.0/folder.xxxxx/files/"
      }
    ],
    "files": [
      {
        "id": "file.yyyyy",
        "link": "https://skydrive.live.com/redir.aspx?cid=yyyyy",
        "name": "photo.jpg",
        "type": "photo",
        "source": "https://public.blu.livefilestore.com/yyyyy",
        "upload_location": "https://apis.live.net/v5.0/file.yyyyy/content/"
      }
    ]
  }
}

fileDialogのselectプロパティに"single"を指定した場合は、files配列にひとつ選択したファイル情報が入っています。sourceの値が一時的なファイルの実態を示すURLです。

"multi"を指定した場合は、フォルダーとファイル情報が複数帰ってくる可能性があります。上記のJSON形式は、フォルダーとファイルをひとつずつ選択した場合を示しています。

全体のコード

全体のコードを示します。ファイルを指定するためと、ファイル ピッカーを表示するために、<input>タグによるボタンを使っています。

<body>の内容
<input id="button" type="button" value="ダウンロード" />

<script>
    // (WL.init の記述)

    $("#button").click(function () {
        WL.fileDialog({
            mode: "open",
            select: "multi", // single, multi のいずれか(オプション指定)
            lightbox: "grey" // white, gray, transparent のいずれか(オプション指定)
        }).then(
            function (response) {
                // 開くボタンをクリックした場合
                WL.download({
                    path: response.data.files[0].source
                }).then(
                    function (response) {
                        // ダウンロードが成功した場合呼ばれません。
                    },
                    function (errorResponse) {
                        alert("ダウンロードに失敗しました。\n" + errorResponse.error.message);
                    }
                );
            },
            function (errorResponse) {
                if (errorResponse.error.code == "user_canceled") {
                    // キャンセルボタンをクリックした場合
                    return;
                }
                alert("フォルダー情報の取得に失敗しました。\n" + errorResponse.error.message);
            }
        );
    });
</script>

以上で、ダウンロード処理は完了です。実際に動作を確かめてみましょう。

以下に、fileDialogのselectプロパティに"multi"を指定した場合、選択したフォルダーとファイルIDの一覧を表示する例も示しておきます。フォルダーをダウンロードする機能はJavaScript APIにはありません。また、フォルダー内容の一覧を取得するためには、別途APIの呼び出しが必要です(今回は触れません⁠⁠。

function (response) {
    // 開くボタンをクリックした場合
    var msg = "";
    // 選択したフォルダーID
    if (response.data.folders) {
        for (var i = 0; i < response.data.folders.length; i++) {
            msg += "\n" + response.data.folders[i].id;
        }
    }
    // 選択したファイルID
    if (response.data.files) {
        for (var i = 0; i < response.data.files.length; i++) {
            msg += "\n" + response.data.files[i].id;
        }
    }
    alert("選択したフォルダーとファイル" + msg);
}

ファイル ピッカー用のボタン

Live Connectでは、ファイル ピッカーを表示するためのボタンも用意されています図11⁠。

図11 ファイル ピッカー用ボタン
図11 ファイル ピッカー用ボタン

このUIを利用する方法も紹介しておきます。WL.fileDialogの代わりにWL.uiを利用します。Webアプリのデザインに合わせて使い分けてみてください。

ボタンを表示するコードは次のようになります。

<div id="uploadButton"></div>
<div id="downloadButton"></div>

<script>
    // (WL.init の記述)

    // 保存 ファイル ピッカー
    WL.ui({
        name: "skydrivepicker",
        element: "uploadButton",
        mode: "save",
        theme: "white", // white, blue のいずれか
        lightbox: "grey", // white, grey, transparent のいずれか
        onselected: function (response) { /*省略*/ },
        onerror: function (errorResponse) { /*省略*/ }
    });

    // 開く ファイル ピッカー
    WL.ui({
        name: "skydrivepicker",
        element: "downloadButton",
        mode: "open",
        select: "single", // single, multi のいずれか
        theme: "white", // white, blue のいずれか
        lightbox: "grey", // white, grey, transparent のいずれか
        onselected: function (response) { /*省略*/ },
        onerror: function (errorResponse) { /*省略*/ }
    });
</script>

uiの第1引数には、次のプロパティを指定します。

プロパティ説明
name"skydrivepicker"を指定
elementボタンを表示する<div>タグのid
mode次のいずれか "save": 保存ファイル ピッカー "open": 開くファイル ピッカー
selectmodeに"open"を指定した場合必須 "single"または"multi"
themeボタンのテーマ色 "white"(既定)または"bule"
lightbox表示するダイアログ外の背景色 "white"(既定⁠⁠、"grey"、"transparent"のいずれか
onselected「保存⁠⁠、⁠開く 」ボタンをクリックしたときに呼ばれるコールバック関数を指定
onerrorキャンセルまたはエラーが発生したときに呼ばれるコールバック関数を指定

特に難しいところはないと思います。onselectedonerrorには、WL.fileDialogの場合に記述したアップロードやダウンロードのコードを使うことで同様の内容が実装できます。

ちなみに、このuiメソッドは、ファイル ピッカー以外のUIを描画するためにも使われます。

おわりに

今回はここまでです。どうでしたか? Webサービスと連携したアプリを作るときは、SkyDrive連携もいれてみるといいかもしれませんね。

ちなみに、Windowsストア アプリでもJavaScript APIが利用できますが、今回紹介した内容は、ストア アプリのほうでは対応していません。別のメソッドの利用や、別の方法で実現する必要があります。また次の機会に触れたいと思います。

おすすめ記事

記事・ニュース一覧