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

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

この記事を読むのに必要な時間:およそ 8 分

はじめに

今回から新たにアプリ開発の連載をはじめます。よろしくお願いします。皆さんは,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設定

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

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入