Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

スマホの画像をOneDriveにアップして共有・編集するWPFアプリを作る

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/07/11 14:00
目次

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を指定する
// ここに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の機能の利用許可を求めるページが表示されます。

OneDriveの機能利用について許可を求める
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メソッドを利用して呼び出し位置を初期化することを忘れないでください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

バックナンバー

連載:現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(LEADTOOLS)
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5