OneDriveと連携し、画像共有・編集が可能なWPFアプリ（1）
ここからはLEADTOOLSを利用したクラウド連携アプリケーションを紹介します。
クラウド部分はWindows 10でも標準で利用可能なOneDriveを利用するものとします。
想定するシナリオはスマートフォンなどで撮影した画像をOneDriveにアップロードし、それをLEADTOOLSを組み込んだデスクトップアプリケーションでダウンロードし、画像を加工した後に再びOneDriveにアップロードするというシナリオです。
クラウドを利用すれば、アップロードした画像を会議の場でPCやスマートフォンで閲覧するといった急ぎの対応にも便利です。
スマートフォンからOneDriveに画像をアップロードする
スマートフォンからアップロードを想定しているので、作成するアプリケーションはUWP（Universal Windows Platform）アプリケーションとします。
デベロッパーセンターに登録
OneDrive APIを利用するには、まずアプリケーションをデベロッパーセンターに登録します。
上記サイトにMicrosoftアカウントでサインインし、「集中型アプリケーション」項目の「アプリの追加」ボタンからアプリケーションを登録します。「集中型アプリケーション」「Live SDKアプリケーション」の区分けがない場合は、右上の［アプリの追加］ボタンをクリックしてください。
単純に動作を確認するだけであれば、アプリケーション名を決定後、「プラットフォーム」項目で［プラットフォームの追加］ボタンを押し、［ネイティブアプリケーション］を追加すればOKです。
登録したアプリケーションのアプリ IDは後で利用するので控えておきます。
Graph APIを利用する
OneDriveへのファイルのアップロード操作を行うにはGraph APIという仕組みを利用します。Graph APIはFacebookのAPIなどでも利用されている仕組みです。
Graph APIを利用するコードを自分で記述しても良いですが今回はNuGetというパッケージマネージャーから便利なライブラリをダウンロードして利用しましょう。
今回利用するライブラリは以下の2つです。
またOneDriveの機能については以下のサンプルを参考にしました。
今回紹介するサンプルは記事冒頭のサンプルダウンロードからダウンロードし実際にお試しいただくことができますが、一部クライアントIDだけはご自身で取得したものを記載する必要があります。
OneDriveUploaderUWPプロジェクトのModels\Helpers\AuthenticationHelper.csファイルにあるclientIdプロパティに、取得したアプリIDを指定してください。
// ここにOneDriveデベロッパーセンターで取得したアプリIDを指定してください。 static string clientId = "";
アプリケーションを動かす
アプリIDを記述すればアプリケーションを動かしてみることができます。
デバッグ実行し「認証する」ボタンを押すと認証処理が開始されます。
ボタンを押した際の処理は以下です。
// OneDriveを操作するためのクラスを取得する
// OneDriveはGraph APIを用いるのでgraphという名前が頻出します。
this.graphClient = AuthenticationHelper.GetAuthenticatedClient();
if (this.graphClient == null)
{
messageText.Text = "OneDriveとの接続に失敗しました。AppIDnなどが間違っていないか確認ください。";
}
// OneDriveのrootフォルダーの情報を取得する
// 認証が済んでいない場合はログイン画面を表示する
this.currentFolder = await this.graphClient.Drive.Root.Request().Expand("").GetAsync();
AuthenticationHelperクラスはGraph APIを用いたアップロードやダウンロード、OneDriveのファイル一覧を取得するなどの処理をサポートしたGraphServiceClientクラスを取得するためのヘルパークラスです。
GraphServiceClientのインスタンスはgraphClientプロパティに格納します。
最後の行のgraphClient.Drive.Root.Request().Expand("").GetAsync()でOneDriveのルートフォルダの情報を取得しています。この時点で認証がまだの場合は、Microsoftアカウントでのログインの際に、以下のようにOneDriveの機能の利用許可を求めるページが表示されます。
認証が成功すると画像をアップロードするボタンが表示されます。
ボタンが押されると以下のようにFileOpenPickerを用いて画像選択ダイアログを表示します。
// 画像を選択する処理
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
StorageFile file = await openPicker.PickSingleFileAsync();
選択された画像は以下のようにsample.jpgという名前でOneDriveのルートフォルダーに配置されます。
var targetFolder = this.currentFolder; var fileName = "sample.jpg"; // パスを生成する string folderPath = targetFolder.ParentReference == null ? "" : targetFolder.ParentReference.Path.Remove(0, 12) + "/" + Uri.EscapeUriString(targetFolder.Name); var uploadPath = folderPath + "/" + Uri.EscapeUriString(System.IO.Path.GetFileName(fileName)); // シーク位置を最初に戻しておく this.stream.Seek(0); // OneDriveにアップロードする this.graphClient.Drive.Root.ItemWithPath(uploadPath).Content.Request().PutAsync<DriveItem>(this.stream.AsStream());
this.currentFolderは先ほど取得したOneDriveのルートフォルダーを表すクラスです。
FileOpenPickerで取得した画像はStream形式でgraphClientの処理に渡します。その際にStreamを画像表示に利用した場合などはSeekメソッドを利用して呼び出し位置を初期化することを忘れないでください。
