Office 用アプリ(Apps for Office)でデモアプリを作る -テンプレート編-

はじめに

以下はOffice用アプリのテンプレートイメージ

apps_for_office_demo_a002

Exceedone が提供する Office 用アプリは、多くのユーザーが使い慣れている Excel に、最新の Office 技術であるオフィス用アプリ(Apps for Office)を組み込んだ Microsoft も推奨している今後の Office 系アプリケーションの『カタチ』です。

Exceedone の Office 用アプリ概要

Excelの「ユーザ入力用」シートとDBをOffice用アプリ経由データを取得/更新するだけです。(超、シンプル!)
データのやりとりのみOffice用アプリ経由に任せて、操作はExcelが全てとなるため
日頃からExcelに慣れ親しんでいる人には待ち望んでいたアプリになると思います!

メリット
・テンプレートはユーザーが任意に変更できる
・Excel を入力フォームとするため、クライアントサーバシステム/Webアプリより操作性がよい
 ※上記2点は重要!!
・ローカル端末のみで作業が行えます
 ※DB接続はデータの「取得/更新」時のみ
・出張先でローカルOffice2013がなくても、インターネット環境があれば Office Web Apps 経由で閲覧/更新等が可能です。
・タブレット/スマートフォンにOffice Web Apps経由で対応(Android、iOS、Windows)

デメリット
・特になし

Visual Studio2012の開発時の初期起動するExcelテンプレートについて

今回、少し悩んでいました。
Visual Studio2012でデバック起動時に任意のExcelテンプレートを起動したい。
しかし、やり方がよく分かりませんでした。

しかし、以下のUStream(Microsoft) に解決方法はありました!!

VS魂100連発 第16回目「Apps for Office」

Visual Studio 2012 のソリューションエクスプローラで、ソリューションにカーソルを合わせて、「追加」 → 「既存項目」 を選択して、対象となるテンプレートファイルを追加します。

apps_for_office_demo_a003 

これで、デバック実行時(F5)のExcel起動が「Microsoft Excel(空)」ではなく、「テンプレートファイル(FADライセンス.xlsx)」が表示されます。

しかし、Office用アプリは表示されていません。
自分でOffice用アプリを追加しろってことですね。
まず、Office用アプリを追加したいワークシートに合わせます。

Excel リボンから「挿入」 → 「Office 用アプリ」を選択すると、「開発者向けアプリ」に今回のアプリが表示されます。
アプリを選択します。
apps_for_office_demo_a004

赤枠部分に「コンテンツアプリ」として配置されました。
位置、サイズは調整しました。
作業ウィンドウアプリでも同様の処理で追加できます。
見た目が、「作業ウィンドウ」か、「コンテンツ」かの違いだけです。

apps_for_office_demo_a001

SharePointアプリ/Officeアプリ についてマイクロソフトの本社(US)技術者にレビューを受け、素晴らしいアドバイスとアイデアも提供してもらった。

はじめ

Office365(SharePoint2013)でApp for SharePointを作成しようと思いサンプルプログラム(見積書、請求書)を作りレビューしていただいた。

その結果、設計方針をより良いものにかえることができた!!!またアプリの作り方と、売り方について素晴らしいアドバイスとアイデアを提供していただいた!!

また、アプリの企画はGood!!といわれたので、マイクロソフトのねらいと一致してそうでした。

ほんとうに参加してよかった Microsoftの Officeアプリ(App for Office)、SharePointアプリ(App for SharePoint)開発のセミナーと、 1対1のデザインレビュー大変ためになりました。

驚いたこと

フロント周り(ユーザインターフェイス)はHTML5+JavaScript OAuthなどはMSの独自色を消し、Microsoft Office(最強のビジネスツール)/Microsoft SharePoint(最強のグループウェア)/Visual Studio(最強の開発ツール)等のMSの強みは残し、携帯(mobile), タブレット(tablet), パソコン(PC)全てに対応する、マイクロソフトの柔軟性にとても驚いた。

簡単に言うと、端末がAndroid(アンドロイド)、iphone(アイフォン)、ipad(アイパッド)でも標準のブラウザーさえあれば、Officeアプリ(Excel, word等を使ったプログラム)が動くということだ。これは、アプリ使用者・アプリ製作者にとっては夢の環境だ!!!

当初は以下のようにSharePoint中心のSharePointアプリを考えた。

App for SharePoint に Silverlightで作ったアプリケーションで入力して “Excel Web App”で表示するようにした。

重要:Appでは Silverlightはつかわないほうがよいとアドバイスを受けた、HTML+JavaScriptのほうがよい、今後はうまく・・・とかあるかもしれないとのこと。

how_to_make_office_apps_010

しかし、いろいろアドバイスを受けたところ、このアプリ(見積/請求)の場合は以下のようにOfficeアプリ中心のアプリの構成にするのがよさそうだ!!

App for Officeを中心に以下のようにOfficeアプリ中心で構成
howtomakeofficeapp020

メリット

  1. Officeアプリ(App for Office)を中心とすれば、データストアをSharePointに限らず、なんでもOKになるのでユーザが広がる
    例)
    Salesforce APIやその他APIと連携等
    Oracle DB連携(Microsoft以外のデータベース)
    ※シングルサイオンできるようのアプリのインターフェイスを公開するとよい?
  2. Office365/SharePointがなくてもOfficeアプリだけで動作できるので、導入が容易
  3. Excel2013(ローカル)でも、Excel Web App(Office Web Appウェブベースのoffice)でも動作できるのでユーザに便利
  4. ローカルExcel2013でも稼働させることができる
  5. Office Excel Appが無料で使えるSky Driveでも提供できる???(要確認)
  6. Officeストア、アプリカタログ、共有フォルダーにアプリケーション定義(appmanifest.xml)をおけばユーザがアクセスして、初回インストール、バージョンアップがユーザにより可能となる。

補足

  1. OfficeアプリはWebサーバにプログラムにおかれ、Webブラウザー内でHTML+JavaScriptで動作する。
  2. Oficeストアにおかれるのはappmanifest.xmlファイルといわれる。定義ファイル(Webサーバの場所、権限等のセキュリティ等)
  3. appmanifest.xmlファイルはどこにおていもよい、Officeストア, SharePoint(on-premise/Office365), ローカルファイルサーバ
  4. appmanifest.xmlはOfficeで読み取れるように事前にパスを設定する。
    例:ローカルExcelの場合 /ファイル/オプション/アプリ/セキュリティで設定する。
  5. アプリカタログとはSharePointサーバに実装された機能で、Officeストアでも、内部的にはこの仕組みを使っている。

オフィスアプリを開発する前にここを読もう!!(App for Office 2013 編 Microsoft dev camp)

はじめに

MicrosoftのApp for Office/ App for SharePoint のトレーニングに行ってきました。 こんな解りやすい資料がるなら、最初に読んでおけば良かったです。 これを読めば、かなり理解が早くなるので、開発する人は一読しておいた方がいいです!! ちなみに英文ですw App for office 2013/App for SharePoint 勉強資料は以下からダウンロードできなくなった。(2013/2/14)

ちょっと驚いたこと!

App for Office(Office アプリ)

  1. App for Office2013(オフィスアプリ)は Webブラウザーで動作するOffice, Offiec Web Apps でもローカルOfficeでもどちらでも動作する。(outlookは制限がありそう。)
  2. ここさえわかれば、簡単だ、アプリのインストールとはアプリの場所等やアクセス権限等が保存されているmanifestファイル(xml)をOffice(Excel, Outlook, Word等)に取り込むことだ、アプリ本体(HTML+Javascript)はWEBサーバに置くのだ!! たとえばExcelアプリなんかは、そのmanifestファイルをみてExcel上にアプリを表示させWebサーバからHTML+JavaScriptをダウンロードして、そのExcelアプリとExcelオブジェクトと通信してデータの設定やイベント処理を行う。
  3. ※OutlookはExchangeサーバにManifestファイル(xml)がインストールされる
  4. Napa(SharePoint2013 Webベースの開発ツール)でOfficeアプリを作成しデバックまでできる。

オフィスアプリ開発 (Develop App for Office 2013)

appforoffice2013develop ダウンロードした資料の以下のPDFを開いてください。 devcampfeb13_forattendee.zip\2 – Developing Apps for Office\WDTK_Developing Apps for Office_v2.pdf

Page 1/Waht is the Web Extensibility Framework

これはMicrosoft office(Excel, word, outlook) の中に HTML/JavaScript のWeb Clientの枠です。 この中にWebサーバにHTTPリクエストして、HTML等のコンテンツを取得します。

Page 3/Anatomy of an App for Office

オフィスアプリのインストール時にはこの HTMLコンテンツはサーバに配置して、 アプリには マニフェスト(Manifest)ファイル(アプリの位置等の情報等,Visual Studioでの名前は”xml”)Excel,word,officeにインストールされます。

vs2012_app_for_office

なお、IE9以上に搭載されている【ブラウザコントロール】が必要となる。 また Microsoft が用意した javascript を HTML に include することにより Excel のセル等のオブジェクト等にアクセスできます。

Page 8/Using Bindings

Excel のセルの値と、アプリとの通信にバインド(Bind)を使うと、データがリンクされる、また、イベントハンドラー(Event Handler)が実装できるので、データが更新されたときにプログラムを動かせる。

Page 8/User Experience Guidelines

いくつかアプリを作成するに当たり、推奨するガイドラインがあります。 といっても、そんなに厳しい基準があるわけではない。 「Office 用アプリの UX 設計ガイドライン」 http://msdn.microsoft.com/ja-jp/library/fp161012.aspx

Page 10/RequestedCapabilities

アプリから Office(Excel、Word、Outlook 等)からの読み込み/書き込み等のアクセス権限を設定 設定例(manifestファイル;xml) <Permissions>ReadWriteDocument</Permissions> vs2012_app_for_office2

重要、ローミング(roaming)設定とはローカルに保存しておきたい情報をここに設定する。 参考 Page 4/Core API Objects documentという図のところに、Read and Write とかいてあるが、この権限がないとdocument(Excel object,word object, outlook object)を読み込めない。

Page 10/Mail Apps

Page 10/Mail Apps  – Up Close and personal Outlook のメール本文等に App for Office (オフィスアプリ)を表示できる。 アクティベーションルール(Activation Rule:アクティブ化規則)が存在し、アプリが動作するためのルール付けを行うことができる。 例)  ・メール本文であること  ・メール本文内で、住所があること  など、色々と定義ができるようです。 アクティベーションルールに該当するならば、設置したアプリが動作するといったものだ。

Page 11/Mail App Hosting

outlookアプリの話 サンドボックス(sandbox solution)で動作します。 配置場所について

  1. アプリストアに置く
  2. 社内ストア(内部設置ストア) ※アプリカタログ この場合は SharePoint アプリカタログ, もしくは Manifest(xml)がダウンロードできればいいので、共有フォルダーでもよい、さらにOutlookアプリは Exchange Server に Manifest(xml)ファイルがインストールされるので、必ず Exchange Server が必要

Page 11/Developing Mail Apps

Outlook App の場合、Excel、Wordと一部異なり、「アクティブ化規則」タブが存在する。 「アクティブ化規則」というタブにて、アクティブ化される規則等が表示される。

vs2012_app_mail

Excel、Word とは異なり、F5で実行するには メールアドレス が必要になる。(当たり前ですね)

vs2012_app_mail2

Page 12/Activation Rule Types

Page 12/Well-known Entity Examples

ここにいくつかよく使う Outlook アプリのアクティブ化規則のキーワードがあります。 Outlookアプリのアクティブ化規則、アドレス、電子メール、URL、添付ファイルを含んでいる場合、etc…が含まれている場合、アプリを起動するか設定

vs2012_app_for_office3

Outlook のメール本文に表示させるか、予定アイテムに表示させるか設定できる。 設定例;(Visual Studioでビジュアルで修正できる)

  • <Rule xsi:type=”itemIs” ItemType=”Message”> ItemIs : メッセージ(Meesage) or 予定アイテム
  • ItemHasknownEntity 電話番号が含まれている、住所が含まれている場合に自動的にアプリを起動するかどうか決められる。
  • 注意:日本語の住所は現在使えない。

Page 13/Accessing the Outlook JSOM

Page 13/The Outlook App OM for Mail Apps

Page 13/Outlook APIs – some examples

  • ユーザ情報がとれる。 office.context.mailbox.userProfile.displayName
  • メールアドレスとかとれる myEntities =  Office.ocntext.mailbox.getEntities myEntities.emailAddresses
  • Exchange Webサービスを呼び出す(例えばメールボタンを押したい!) mailbox.makeAEwsRequestAsync(getSubjectRequest(mailbox.item.itemid))
  • エンティティの強調表示 アプリのアクティブ化設定されているときに、強調表示されると黄色くマーカーされる。
  • Outlookアプリの場合厳守しないといけないルールがある。(これを守らないと動かなくなる制限等) Outlook 2013 用メール アプリの実装ルールを遵守する http://msdn.microsoft.com/ja-jp/library/fp142267.aspx

Officeアプリ開発環境について

  • Visual studio 2012 Pro以上 + Office Developer Tools( 今は、Preview2 )
  • Office 2013
  • IE9以降

Office アプリ開発環境について Visaul Studio を使わない場合

    • Napa (Webベースの開発ツール)(★あとで展開方法を書くexcelにメモ書き) Office 365 Developer Preview(Office 365 SharePoint 2013) アカウントがあれば使える。

Napa は、アプリストアから無償提供されている。(日本版のストアサービスはまだ開始されていないため、ロケールは「us」にする) Napa では、マニフェスト(xml)は Visual Studio のように作成されないので、新規に作成する必要がある( メニューから選択可能 ) Office アプリ の展開 → 定義ファイル(xml) ※Sharepoint では拡張子App だが、Office は拡張子xml

  • Officeストア
  • 社内専用アプリカタログ(共有フォルダー or SharePoint 2013(on-premise/Office365))
  • Exchange 2013(メールアプリのみ必要になる)

セラーダッシュボード( Seller Dashboard ) 審査が通れば登録が可能となる   <SourceLocation DefaultValue=”~remoteAppUrl/Pages/MailTest1.html” /> Local の IIS 用のトークン「~remoteAppUrl/」 Webページをどこかに展開(★あとで展開方法を書くexcelにメモ書き

  • サーバは Apache / IIS など何でも良い。
  • サーバ言語も PHP でも何でも良い。

今回のサンプルは配置にも時間かからない Azure の Webサイトを使用する。(Web Role はインスタンスも作成するので時間がかかる)

※Web Role は専用インスタンス、Azure Webサイトは共有インスタンス Officeアプリの場合はxml(manifestファイル)のさきほど展開した、WebサイトのURLを修正して xmlファイルを共有ファイル等に置く、Officeがカタログセンターの場所はExcelだとオプション/セキュリティセンター/信頼できるアプリカタログでSharePointのカタログサイトか共有フォルダーを設定する。(Windows 2012アクティブディレクトリーでも設定できる?) そうすると、Officeからアプリ追加すると、自分の所属組織に表示される。個人用のアプリは自分のログインしているストアアプリ Exchange に置く場合 Exchange Online (exchange admin center) /組織/アプリ  xmlファイルを置く ぐだぐだになりました。後で修正します。 共有フォルダー Office のオプションより、「セキュリティーセンター」を開く。 共有フォルダーを設定し、信頼できるサイトして登録しておく。※これ重要!!

vs2012_app_for_office4

上記のような設定を、クライアントに設定させるわけにはいかないので、あらかじめ ActiveDirectry のポリシーで設定しておき、Officeクライアントへ配布する。 SharePoint 2013  開発者サイトして作成するとカタログとして使える。

オンプレ  カタログは無いので新規に作る必要がある。(管理者権限でサイト作成) 関連URL シェアポイントアプリを開発する前にここを読もう!!(App for SharePoint 2013 編 Microsoft dev camp)

超簡単、はじめての Windows Azure with Visual Studio 2012 and SharePoint2013(Office365, on-premise)

はじめに

プロバイダー向けホスト型のSharePoint 2013アプリ(App for SharePoint 2013)を作る場合、
SharePoint 2013サーバだけでなく、別途Webサーバが必要なので、試しにWindows Azureにて構築してみることにした。
私は今回始めて Windows Azure(Microsoft クラウドサービス)を使いました、Visual Studioサンプル作成し、配置、テストができるまで、3時間で出来たので、わりと簡単でした、また、Azure管理インターフェイスは良く作られているので、悩むことはなく、クラウドサービスや、Webサーバも簡単に作れる優れものでした。

わかったこと

Visual Studioにてプログラムを作成しローカルデバックして、Windows Azure(クラウド)に発行(配置)するのは簡単ですが、Windows Azure上でリモートデバックするのは少し難しい。

参考

Visual Studio で Windows Azure のプロジェクトを Remote Debug する
http://blogs.msdn.com/b/tsmatsuz/archive/2013/01/31/windows-azure-remote-debug-using-visual-studio-2012.aspx

はじめてみましょう

1. まずは、Windows Azureのアカウント作成します。

以下のサイトから”無料で試す”から新規でも申し込んで、3か月は無料で使えます。
http://www.windowsazure.com

2. 申し込んだ後、以下の管理サイトにログインします。

http://manage.windowsazure.com/

初期状態はなにもサービスがない状態です。

WindowsAzureFirstTime_0010

3. Visual Studio 2012 の設定をします。

Windows Azure SDK をインストールします。

http://www.windowsazure.com/en-us/develop/net/?fb=ja-jp

右のほうに”Install thd SDK” とあるので、クリックします。

WindowsAzureFirstTime_0020

インストールをクリックします。

WindowsAzureFirstTime_0030

4. Visual Studio 2012 にて Cloud プロジェクトを作成してみます。

Visual Studio 2012/ファイル/新規作成/プロジェクト/Cloud/Windows Azure クラウドサービス をクリックする。

以下のような画面がでてくれるので “ASP.NET Webロール”でサンプルプログラム(sample program)を作成してみる。

WindowsAzureFirstTime_0040

自動的に以下のソースが生成されます。いきなりデバック(debug; F5) を開始するとローカルにてWebブラウザーが立ち上がりローカルデバックができます。

WindowsAzureFirstTime_0050

5. 今回はWindows Azureと連携したいので、Windows Azureの設定をおこないます。

WindowsAzureプロジェクト(画面上ではWindoesAzure2) を右クリックして”発行”をクリックする。

そうすると以下の画面がでてくるので、”サブスクリプションの選択”のコンボボックスを下矢印を教して管理をクリックする。

WindowsAzureFirstTime_0060

新規作成をクリックする

WindowsAzureFirstTime_0070

証明書名に適当な名前を(今回は”test”にした)入力して”OK”を押す。

WindowsAzureFirstTime_0080

表示を押すと”証明書”ファイルの表示されるので、”証明書のインストール”をクリックする。

WindowsAzureFirstTime_0090

“完全なパスのコピー”をクリックしておく

WindowsAzureFirstTime_0100

6. 再度Azureの管理サイトにはいる。

http://manage.windowsazure.com/

Windows Azureの設定画面にいき、さきほどローカルPCに作成した証明書を登録します。

Windows Azure管理画面/設定/管理者証明書をアップロードする。

WindowsAzureFirstTime_0110

アップロード後”サブスクリプションID” をコピーしておきます。

WindowsAzureFirstTime_0120

再度,Visual Studio2012の画面に戻りさきほどの”サブスクリプション ID”を入力後OKを押す

WindowsAzureFirstTime_0130

うまくいくと”サブスクリプション選択”されているので、”次へ”をクリックします。

WindowsAzureFirstTime_0140

以下の画面がでるので、 Windows Azure で作成した、サイト名と場所を入力します。

WindowsAzureFirstTime_0150

“発行ボタン”を押します。

WindowsAzureFirstTime_0160

以下のメッセージがでたので、Windows Azure の管理画面で確認すると

WindowsAzureFirstTime_0170

クラウドサービスとストレージサービスというのを自動で”作成中”でした。

作成が完了すると以下のようになります。

※一番上のWebサイトは関係ありません、IIS Webサーバとして別のテストで使いました。

WindowsAzureFirstTime_0180

完成したら、再度発行してみてください。

うまくいくと左下のように”発行は成功しました”と表示されます。

WindowsAzureFirstTime_0190

自動で作成されたクラウドサービスのWebサイトURLを確認して、ウェブブラウザで表示してみます。

http://exceedone1.cloudapp.net/

WindowsAzureFirstTime_0200

デバック (debug F5) をしてみます。

以下のように “Windows Azure デバック環境をきどうしています”と表示されしばらく待つとWebブラウザーがローカルデバックがはじまります。

WindowsAzureFirstTime_0210

7. ローカルでデバックして、Windows Azure クラウドサービスに発行するというの簡単にできます。

Windows Azureのプロセスをアタッチしてデバックは少し難しいようです。次回チャレンジしてみまが、以下に詳しくかかれていますので、参考にするとできると思います。

Visual Studio で Windows Azure のプロジェクトを Remote Debug する

http://blogs.msdn.com/b/tsmatsuz/archive/2013/01/31/windows-azure-remote-debug-using-visual-studio-2012.aspx

参考

新規サイトが素早く立ち上げられるWindows Azure Webサイト入門
http://www.atmarkit.co.jp/fdotnet/special/introazwebsite_01/introazwebsite_01_01.html

Windows Azure 診断機能 のオフ (大量のトランザクション)
http://code.msdn.microsoft.com/windowsazure/WindowsAzure-howto-855286fc

App for SharePoint2013 に Visual Studio2012で、Silverlight の組み込み!! (Office365, on-premise)

注意(2013/02/13)

App for SharePointではSilverlightについて Micrsofot 本社(US) の技術者の方に下記のような回答をいただいた。

JavaScript+HTMLでなんでもdけいるからそちらを使ったほうがよい、また、うまく動作しない可能性もあるので、おすすめしないということでした。

はじめに

Visual Studio 2012で App for SharePoint の開発は、HTML+JavaScriptがメインっぽいので、Silverlightの組み込みは現在考慮されていないようなので、やってみました!!

Silverlightを組み込んでみて思ったのですが、Silverlightじゃなくても、Napaツールをはじめ、HTML+Javascriptが分かれば簡単なアプリが容易に作れるので、プログラマーじゃなくて、WebデザイナーやITわかる人なら十分SharePointアプリ開発できると思った。

弊社の場合、複雑な業務アプリを作っているので、HTML5+ JavaScript がVisual Studioで部品供給されデバックも含め、本格対応するまでは Silverlightを使いたいので、しばらくSilverlightを使おうと思います。

このサンプルを作ると以下のようなSilverlightを搭載した、SharePointアプリが作成されます。

appforsharepoint2013_silverlight0010

その他わかったこと。

アプリの場合は、いままでのソリューションのように、[サイトURL/Lists/リスト名] ではなく、[アプリURL/Lists/リスト名]に位置になります。Silverlightでは、カレントURLをとっておけば、ソリューションでも、アプリでも両対応できます。

サンプル(sample program)は以下のURLからダウンロードしてください。

EAP_O365_SP_2013

  • [App for SharePoint 2013]プロジェクト
    /EAP_O365_SP_2013/EAP_O365_SP_2013_App
  • [Silverlight ソリューション]プロジェクト
    /EAP_O365_SP_2013/EAP_O365_SP_2013_SilverlightWebPart

作成手順

1. いきなり始める前に以下は読んでおいてください。

Office365/SharePoint2013

  1. 環境セットアップ(Windows Server 2012 + SharePoint 2013 Preview/Trial + VisualStudio 2012)
  2. SharePoint2013 /Office365(SP2013)でサイトコレクションを作成する。
  3. オンプレミスのSharePoint2013 NodeRunner.exeのメモリ使いすぎのせいで、SharePoint本体とVisual Studio2012の動作がめっちゃ遅い
  4. SharePoint 2013([Visaul Studio Projcet] [App for SharePoint])/Office2013(App for Office) のVisaul Studio 2012 開発環境
  5. Office 365 Enterprise(Office2013/SharePoint2013) プレビューを試してみた
  6. ソーシャル機能 ニュースフィード編; Office 365 Enterprise(Office2013/SharePoint2013) プレビューを試してみた
  7. はじめての”App for SharePoint2013″ (Visual Studio2012)を作成してみる。
  8. はまる、App for SharePoint 2013 (オンプレミス; on-premises) とVisual Stuidoでのsharepoint hoted apps アプリデバックの環境(enviroment)
  9. App for Sharepoint 2013 サンプルコードを動かしてみる
  10. App for SharePoint 2013(オンプレミス on-premise) のアプリカタログを作成、アプリ登録、インストール

2. 最初にVisaul Studioで silverlightソリューション(Solution)を作成します

最初から、[App for SharePoint2013]プロジェクトで作成しないのは、[App for SharePoint 2013]の新規追加ではSilverlightがないからです、またデバックがうまくでるかかなりの調査が必要そうなので、まずはSharePointソリューションで作成しておき、デバック完成したら、[App for SharePoint 2013]のプロジェクトにSilverlight(シルバーライト)実行形式(xap)を追加するようにします。

VisualStudio2012/ファイル/新規作成/SharePoint ソリューション/Silverlight Webパーツ

appforsharepoint2013_silverlight0020

Silverlightのプログラム修正

ボタンを配置して、以下のようにプログラムを記述して、デバックします。

MainPage.xaml

<UserControl x:Class="EAP_O365_SP_2013_Silverlight.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Button" HorizontalAlignment="Left" Margin="181,78,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

    </Grid>
</UserControl>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

using SP = Microsoft.SharePoint.Client;
using System.Collections.ObjectModel;
using System.Windows.Browser;

namespace EAP_O365_SP_2013_Silverlight
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            try
            {
                using (var clientContext = new SP.ClientContext(SP.ApplicationContext.Current.Url))
                {
                    var list = clientContext.Web.Lists.GetByTitle("TestCustomList");

                    //load不要
                    //clientContext.Load(list);

                    var camlQuery = new SP.CamlQuery();

                    //ID=1を抽出する場合
                    camlQuery.ViewXml = @"
                                <View>
                                    <Query>
                                        <Where>
                                            <Eq>
                                                <FieldRef Name='ID' />
                                                <Value Type='Integer'>1</Value>
                                            </Eq>
                                        </Where>
                                    </Query>
                                    <RowLimit>10</RowLimit>
                                </View>
                                ";

                    SP.ListItemCollection listItems = list.GetItems(camlQuery);
                    clientContext.Load(listItems);

                    clientContext.ExecuteQueryAsync(
                        new SP.ClientRequestSucceededEventHandler(delegate(object o, SP.ClientRequestSucceededEventArgs successargs)
                        {
                            try
                            {
                                foreach (var li in listItems)
                                {
                                    string strTitle = li["Title"].ToString();
                                    Dispatcher.BeginInvoke(new Action(delegate() { MessageBox.Show("TestCustomList ID=1のタイトルは[" + strTitle + "]", "Test Dialog", MessageBoxButton.OK); }), null);
                                }
                            }
                            catch (Exception ex)
                            {
                                Dispatcher.BeginInvoke(new Action(delegate() { MessageBox.Show(ex.Message, "Error Dialog", MessageBoxButton.OK); }), null);
                            }
                        }),
                        new SP.ClientRequestFailedEventHandler(delegate(object o, SP.ClientRequestFailedEventArgs failedArgs)
                        {
                            Dispatcher.BeginInvoke(new Action(delegate() { MessageBox.Show(failedArgs.ErrorDetails + "   " + failedArgs.Message, "Error Dialog", MessageBoxButton.OK); }), null);
                        })
                    );
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }

        }

    }
}

Web Part プロジェクトに”TestCustomList”[List Definition]追加

/TestCustomList/Element.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <!-- 下の Name 属性の値を変更しないでください。リスト プロジェクト項目のフォルダー名と一致しない場合、そのプロジェクトの実行時にエラーが発生します。 -->
    <ListTemplate
        Name="TestCustomList"
        Type="10006"
        BaseType="0"
        OnQuickLaunch="TRUE"
        SecurityBits="11"
        Sequence="410"
        DisplayName="TestCustomList"
        Description="マイ リスト定義"
        Image="/_layouts/15/images/itgen.png"/>
</Elements>

/TestCustomList/Schema.xml

<?xml version="1.0" encoding="utf-8"?>
<List xmlns:ows="Microsoft SharePoint" Title="TestCustomList" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/TestCustomList" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
  <MetaData>
    <ContentTypes>
      <ContentTypeRef ID="0x01">
        <Folder TargetName="Item" />
      </ContentTypeRef>
      <ContentTypeRef ID="0x0120" />
    </ContentTypes>
    <Fields>
      <Field ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Type="Text" Name="Title" DisplayName="$Resources:core,Title;" Required="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="Title" MaxLength="255" />
    </Fields>
    <Views>
      <View BaseViewID="0" Type="HTML" MobileView="TRUE" TabularView="FALSE">
        <Toolbar Type="Standard" />
        <XslLink Default="TRUE">main.xsl</XslLink>
        <RowLimit Paged="TRUE">30</RowLimit>
        <ViewFields>
          <FieldRef Name="LinkTitleNoMenu"></FieldRef>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="Modified" Ascending="FALSE"></FieldRef>
          </OrderBy>
        </Query>
        <ParameterBindings>
          <ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />
          <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
          <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_ONET_HOME)" />
        </ParameterBindings>
      </View>
      <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/15/images/generic.png" Url="AllItems.aspx">
        <Toolbar Type="Standard" />
        <XslLink Default="TRUE">main.xsl</XslLink>
        <JSLink>clienttemplates.js</JSLink>
        <RowLimit Paged="TRUE">30</RowLimit>
        <ViewFields>
          <FieldRef Name="LinkTitle"></FieldRef>
        </ViewFields>
        <Query>
          <OrderBy>
            <FieldRef Name="ID"></FieldRef>
          </OrderBy>
        </Query>
        <ParameterBindings>
          <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
          <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" />
        </ParameterBindings>
      </View>
    </Views>
    <Forms>
      <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
      <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
      <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
    </Forms>
  </MetaData>
</List>

/TestCustomList/TestCustomListInstance/Elements.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ListInstance Title="TestCustomList"
                OnQuickLaunch="TRUE"
                TemplateType="10006"
                Url="Lists/TestCustomList"
                Description="マイ リスト インスタンス">
  </ListInstance>
</Elements>

3. 次に Visual Studio で[App for SharePoint 2013]を作成します。

VisualStudio2012/ファイル/新規作成/Office/SharePoint/アプリ/App for SharePoint 2013

appforsharepoint2013_silverlight0030

簡単なので、SharePointホスト型にしてください。

appforsharepoint2013_silverlight0040

”Web Part プロジェクトに”TestCustomList”[List Definition]追加”と同じ手順で [App for SharePoint]プロジェクトに追加します。※手順は同じなので省略します。

Silverlightで作った[xapファイル]を[ファイルエクスプローラ]で、モジュールにコピーして、アプリに配布するようにします。

まずは、プロジェクトにAppというフォルダーを作成して、その下に、[モジュール]を追加します。そのモジュールにxapファイル(file)を追加します。

xap(Silverlight)ファイルsilverlightプロジェクトのdebug/releaseフォルダーにあります。

/App/Element.xml

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="App">
    <File Path="App\EAP_O365_SP_2013_Silverlight.xap" Url="App/EAP_O365_SP_2013_Silverlight.xap" />
  </Module>
</Elements>

自動生成された、Default.aspx を修正します。

/Pages/Default.aspx

<%-- 次の 4 行は、SharePoint コンポーネントの使用時に必要な ASP.NET ディレクティブです --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- 次の Content 要素内のマークアップとスクリプトはページの <head> 内に配置されます --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>

    <!-- 次のファイルに CSS スタイルを追加します -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- 次のファイルに JavaScript を追加します -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- 次の Content 要素内のマークアップとスクリプトはページの <body> 内に配置されます --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<%-- 自動生成されたソースをコメントアウト   <div>
        <p id="message">
            <!-- アプリの実行時に次の内容はユーザー名で置き換えられます - App.js 参照 -->
            initializing...
        </p>
    </div>--%>

    <%--Silverlightのxapファイルを表示されるためのに以下を追加--%>
    <WebPartPages:SilverlightWebPart 
        runat="server" 
        Height="600px" 
        Url="../App/EAP_O365_SP_2013_Silverlight.xap" 
        ImportErrorMessage="$Resources:core,ImportErrorMessage;" 
        ApplicationXml="" 
        WindowlessMode="False"
        Description="EAP_Office365" 
        ID="g_7e129824_46fc_4902_9bbf_b28bf5573d22" 
        Width="955px" 
        Title="EAP_Office365 - SilverlightWebPartMain" 
        __MarkupType="vsattributemarkup" 
        __WebPartId="{37DA73F0-C708-4DAC-A1D5-90A7B500EB9D}" 
        WebPart="true" 
        __designer:IsClosed="false">
    </WebPartPages:SilverlightWebPart>

    <%--List一覧を表示するWebパーツ--%>
   <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" ID="full" Title="loc:full" >
        <WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart2" runat="server" ListUrl="Lists/TestCustomList" IsIncluded="True" NoDefaultStyle="TRUE" Title="TestCustomList" PageType="PAGE_NORMALVIEW" Default="False" ViewContentTypeId="0x">
        </WebPartPages:XsltListViewWebPart>
   </WebPartPages:WebPartZone>

</asp:Content>

これで、ソリューション(solution)と同じように [App for SharePoint]でうごくようになります。

App for SharePoint 2013(オンプレミス on-premise) のアプリカタログを作成、アプリ登録、インストール

はじめに

Visual Studio 2012 からは、F5実行して問題なくインストールできるようになったので、

次は、Visual Studio を使わない、SharePoint上のメニューからアプリのイントール/アンインストールができるか検証してみる。

ソリューションと同じ手順で「アプリパーツ」を選択するだけと思っていたが出来なかった。

新機能はそんなに甘くはない。。。
どうもアプリ用のカタログサイトが必要らしい。
というわけで、作成してみよう。( Microsoft のサイトを見らがらw )

はまりポイント

SharePoint のアプリケーションカタログに、いままで方法で、まちがえて、ソリューションファイル(wsp)を登録しても、アプリがインストールできない。appという拡張子のものを登録しないと機能しない。

1. アプリのカタログサイト作成

アプリ カタログ サイトを作成するとアプリ用に以下のライブラリが作成されます。
・SharePoint 用アプリ
・Office 用アプリ

1) 「SharePoint 2013 サーバーの全体管理」 を起動する。

2) 「アプリ」 → 「アプリ カタログの管理」 を選択。

3) 「新しいアプリ カタログ サイトを作成する」 を選択。
「OK」 を選択。

4) タイトル、URL、ユーザ名、ユーザーグループを設定して、「OK」 を選択。

5) 「サイトのURL」 が出来たので、URLをクリックしてみる。

2. カタログサイトにアプリを追加

1) アプリ カタログ を開いて、「SharePoint 用アプリ」 を選択。

2) 「新しいアプリ」 を選択。

3) ドキュメントの追加画面が表示されるので、アップロードするアプリファイルを選択。
ここで私は、勘違いして「wsp ファイル」をアップロードしてしまった。
対象となるのは拡張子が「app」 のファイルである。( ちゃんと見れば分かったはずなのに、、、アホです )

4) 名前等を入力して、「保存」 を選択。

5)

コレでカタログへの追加は完了です。

3. SharePoint 2013 サイトに SharePoint 用アプリを追加する

アプリの追加方法は、以下の4パターンがあるみたいです。
・サイトで使用可能なアプリの一覧から追加する
・アプリカタログから追加する
・SharePoint ストアから追加する
・Windows PowerShell を使用してアプリをインストールする

今回は、2番目の「アプリカタログから追加する」で試します。

1) チームサイトの 「サイトでの作業の開始」 から 「リストやライブラリ、その他のアプリを追加」 を選択。

2) 「追加できるアプリ」 の中に、今回追加したサンプルアプリが表示される。
アイコンをクリックする。

3) 「アプリを信頼しますか?」 と表示されるので、「信頼する」 を選択。

4) アプリを追加します。
追加中。。。

追加完了!

5) 追加したアプリを起動してみた。
【ユーザーの場合】

【管理者の場合】

なお、ユーザーで登録したリストの内容は、管理者側でも見えました。
情報は共有されるということですね。

次回は、再インストール等をやってみたいと思います。

参考サイト
SharePoint 2013 でアプリ カタログを管理する
SharePoint 2013 サイトに SharePoint 用アプリを追加する

App for Sharepoint 2013 サンプルコードを動かしてみる

SharePoint 2013 アプリ開発のテスト環境として、「Office 365 Enterprise Preview Developer Site」を使っていたのだが、
ときどきメンテモードになるので?ローカルにテスト環境を作った。(これで手が止まることは無いだろう)

作り方はコチラを参考にしてください。
はまる、App for SharePoint 2013 (オンプレミス; on-premises) とVisual Stuidoでのsharepoint hoted apps アプリデバックの環境(enviroment)

試しに、Microsoft の サンプルコードを実行してみようと以下のサイトからサンプルコードを取得して実行してみました。
SharePointにホストするサンプルアプリのようです。

参考URL
[方法] SharePoint でホストされる基本的なアプリを作成する

[方法] SharePoint でホストされる基本的なアプリを作成する サンプルコード

Visual Studio 2012 でサンプルコードを開きます。
プロジェクトのプロパティを開いて、「サイトURL」を変更します。

「サイトURL」を設定したら、F5で実行。
すると「Basic SharePoint-hosted を信頼しますか?」と表示されるので、「信頼する」を選択。

無事、表示されました。

はまる、App for SharePoint 2013 (オンプレミス; on-premises) とVisual Stuidoでのsharepoint hoted apps アプリデバックの環境(enviroment)

はじめに

2013/1/31日 現在 Office365 Enterprise Preview SharePoint 2013 がメンテ中みたいで、開発/テストできないので、オンプレミス環境を作成しました。

App for SharePoint 2013 で アプリ開発環境を作るのに、3時間ほど、はまりました!!

私も苦労したので、初めての SharePoint 2013 の環境を構築する人にもできるだけわかりやすいように書きました。

うまくいくと、SharePoint 2013 オンプレミス環境で、App for SharePoint 2013 を Visual Studio2012からデバックができるようになります。

はまりポイント

SharePoint App サーバのために、DNSの設定する方法がわからなくてはまりました。

インタネットブラウザーのセキュリティ設定をしないと、デバック時にブラウザーからユーザーID, パスワードを聞かれてはまります。

今回の環境

シングルドメイン:

  1. ドメイン名:testdomain.local
  2. Farm admin:testdomain\administrator

ドメインサーバ:

  1. サーバー名: File
  2. Window2008 Standard  (Memory 6G)

開発PC:

  1. PC名: Win2012(Win2012.testdomain.local)
  2. Windoes2012 Standard Japanese(Memory 6G)
  3. ドメイン参加済み
  4. SharePoint2013 インストール済み
  5. VIsual Stdudio 2012 インストール済み(その他開発ツールもインストール済み)

オンプレミスでのデバック環境の作成

Windows DNSサーバを設定する。

まず、適当な名前でアプリ(apps)用のドメイン名を作成します。今回は以下の名前にします。

アプリ用ドメイン名: [dev81.com]ゾーンの設定をします。

  1. ドメイン管理サーバから、 Start/管理ツール(Administrative tools)/DNS
  2. 前方参照ゾーン/新しいゾーン(New Zone)/プライマリ ゾーン
    ゾーン名=[dev81.com]
  3. [dev81.com] にワイルドカード”*” のエイリアス(CNAME)を作成する。
    エイリアス名は[*]ワイルドカードにする。
    ターゲットは開発環境の完全修飾ドメイン名(FQDN) or IPでもOKかも?=[Win2012.testdomain.local]
  4. これをすることにより、  以下のURLでもPingが通るようになる。
    以下にPINGすると
    Apps-xxxx.dev81.com
    Apps-yyyy.dev81.com
    Apps-zzzz.dev81.com
    これの結果はすべて [Win2012.testdomain.local]のIPアドレスが応答するようになります。
    これでアプリサーバのアドレスが解決できるようになる。

SharePointの設定をする。

管理者としてコマンドプロンプロトを実行して以下を入力してアプリのサービスを起動します。

net start spadminv4
net start sptimerv4

管理者としてSharePoint PwoerShellを起動して、アプリのドメイン名を入れます。

Set-SPAppDomain “dev81.com”

引き続き SharePoint PowerShellにて以下のコマンドを入力する。

Get-SPServiceInstance | where{$_.GetType().Name -eq "AppManagementServiceInstance" -or $_.GetType().Name -eq "SPSubscriptionSettingsServiceInstance"} | Start-SPServiceInstance

Get-SPServiceInstance | where{$_.GetType().Name -eq "AppManagementServiceInstance" -or $_.GetType().Name -eq "SPSubscriptionSettingsServiceInstance"}

$account = New-SPManagedAccount

引き続き SharePoint PowerShellにて以下のコマンドを入力する。
ユーザについては、わたしはドメインの管理者アカウントを入れた。適当に変更してください。

ドメイン名(testdomain)/管理者アカウント(administrator)

$account = Get-SPManagedAccount "testdomain\administrator"
$appPoolSubSvc = New-SPServiceApplicationPool -Name SettingsServiceAppPool -Account $account
$appPoolAppSvc = New-SPServiceApplicationPool -Name AppServiceAppPool -Account $account
$appSubSvc = New-SPSubscriptionSettingsServiceApplication –ApplicationPool $appPoolSubSvc –Name SettingsServiceApp –DatabaseName SettingsServiceDB 
$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy –ServiceApplication $appSubSvc
$appAppSvc = New-SPAppManagementServiceApplication -ApplicationPool $appPoolAppSvc -Name AppServiceApp -DatabaseName AppServiceDB
$proxyAppSvc = New-SPAppManagementServiceApplicationProxy -ServiceApplication $appAppSvc

引き続き SharePoint PowerShellにて以下のコマンドを入力する。

Set-SPAppSiteSubscriptionName -Name "app" -Confirm:$false

これは以下の画面からも確認できます。

/サーバの全体管理 /アプリ/アプリURLの構成

 ※重要:以下の画面が開かない場合は以下のURLの通りサービスを起動してください。

アプリ URL の構成

これらの設定に対して変更を加えるには、購読の設定サービスと、それに対応するアプリケーションおよびプロキシが実行されている必要があります。

 

事前にサイトコレクション[開発者向けサイト]を作成しておく。

/サーバーの全体管理/サイトコレクションの作成

テンプレートの選択時に必ず、[開発者向けサイト]で作成しておく私の環境では以下のURLに作成
※開発者サイトでないと、うまくVisual Studioから配置できませんので注意してください。
http://win2012/sites/test4/

Visual Studio でアプリを作成してみる。

開発PCにて、Visual Studio/ファイル/新規作成/プロジェクト/App for SharePoint 2013
SharePointのサイトはさきほど作成した、開発者向けサイト]のURLを設定して
アプリをホストする方法は一番簡単な、[SharePoint ホスト型]にして[OK]を押す。

自動的にSharePoint hosted Appsのひな形が作られます。



そのままF5 (デバック)ボタンを押すとブラウザーが立ち上がってきてパスワードをきかれてうまくいきません

インタネットエクスプローラのセキュリティの設定をします。

/インターネットエクスプローラ/設定/インターネットオプション/セキュリティ(タブ)

[ローカルインターネット]を選んで[サイト]ボタンをクリックします。
ここで[詳細設定 ]ボタンを押します。

いかのように、[http://*.dev81.com] をローカルイントラネットゾーンにするために追加設定します。

これでデバックがうまくできるようになり、以下のようにVisual Studio2012のデバック結果がSharePoint2013サーバから表示されます。

参考

  1. sharepoint hosted app error:Apps are disabled on this site
     http://social.msdn.microsoft.com/Forums/en-CA/appsforsharepoint/thread/5f499b93-6064-480a-ad9b-7813769970f1
  2. [方法] SharePoint アプリ用の社内開発環境をセットアップする
    http://msdn.microsoft.com/ja-jp/library/office/apps/fp179923.aspx
    http://msdn.microsoft.com/en-us/library/fp179901(office.15).aspx
  3. SharePoint 用アプリの環境を構成する (SharePoint 2013)
    http://technet.microsoft.com/ja-jp/library/fp161236.aspx
  4. Like this How-to Article? There’s more where that came from!
     http://community.spiceworks.com/how_to/show/18852-configuring-an-app-environment-for-single-server-sharepoint-foundation-2013
  5. Configuring SharePoint 2013 Preview for On-Premise Apps
     http://blogs.perficient.com/microsoft/2012/10/configuring-sharepoint-2013-preview-for-on-premise-apps/
  6. Setting up a SharePoint 2013 Development Environment 101
     http://blogs.technet.com/b/wbaer/archive/2012/10/10/setting-up-a-sharepoint-2013-development-environment-101.aspx
  7. Configuration to meet in order develop “SharePoint Hosted Applications”
    http://www.areaprog.com/SP2013/cours-en-564-sharepoint-hosted-application-configuration-a-respecter-pour-developper-des-sharepoint-hosted-application
  8. Steps to Setup SharePoint 2013 Development Environment
    http://blogs.msdn.com/b/sharepoint__cloud/archive/2012/10/15/sharepoint-2013-technical-preview-development-setup.aspx
  9. SharePoint 2013 apps – architecture, capability and UX considerations [this article]
    http://www.sharepointnutsandbolts.com/2012/08/sharepoint-2013-appsarchitecture.html

はじめての”App for SharePoint2013″ (Visual Studio2012)を作成してみる。

概要

前提

  1. SharePointストアは現時点で、日本では試せないので試していません。
  2. 初めてApp for SharePoint2013で作成するので、方法と内容が間違えているかもしれません。
    なにか誤りがあれば、教えていただけると幸いです。

作ってみて驚いたところ

  1. オンプレミスだけでなく、クラウドのOffice365で開発・デバックできるところ
    開発だけなら オンプレミスSharePoint2013 いらないようだ。開発環境の敷居が随分下がった、Visaul Studio2012 Proのみ買えば簡単な開発ならできるかも。(Windows2012/SharePoint2013 Enterpriseは買わなくても開発できそう)
  2. 自動生成されたプログラムソースにJqueryが入っているところ、Microsoftは他社のWebでは標準的なライブラリーも取り込んだ。
    これは開発者にとっては、潜在的には、iphone, Androidにも対応が簡単になったと思われる。

App for SharePoint2013のホストする種類(これによって作りが異なる)

以下のように3つあります。

  1. 自動ホスト型(勉強中なので詳しくかけません。)
     http://msdn.microsoft.com/ja-jp/library/office/apps/fp179886.aspx
  2. プロバイダー向けのホスト型(勉強中なので詳しくかけません。)
    http://msdn.microsoft.com/ja-jp/library/office/apps/fp142381.aspx
  3. SharePointホスト型(aspx, 画像, list定義などをすべて、SharePointに配置する場合これ、もっとも簡単なSharePointアプリ)
    http://msdn.microsoft.com/ja-jp/library/office/apps/fp142379.aspx

以下のようにVisual Studio2012でプロジェクト新規作成時表示されるときにホストする場所を選べる

いままでのソリューションとの違い

  1. たぶん、SharePointのサーバサイドでSharePointにアクセスするプログラムコードはかけないと思われる。(自身がない)
    すなわちサンドボックスソリューションでは実装できた。SharePointサーバサイド からのSharePointオブジェクトへのアクセスができない。(自身がない)※後で確認します。
  2. List Definition(リスト定義)の場所ソリューションの場合のサイトコレクションの/Lists/が標準だが、アプリの場合はアプリのURLの下に配置される。 サイトコレクション/アプリ名/Lists/ になる。

注意するところ

  1. デバックしたいなら、サイトを[開発者向けサイト]にしないと配置に失敗する。
    チームサイト等のサイトではアプリが配置できずに失敗する。 (この下で詳細は書きます。)

参考サイト

  1. 松崎さんBlog 実際に作るために必要なListの作成方法とかあるので必ず読もう
    http://blogs.msdn.com/b/tsmatsuz/archive/2013/01/28/list-definition-list-instance-and-client-side-rendering-csr-using-apps-for-sharepoint-2013.aspx
  2. MSDN(SharePoint アプリの構築) 作ってみないとわからないので、作ってから読んでみよう!!
    http://msdn.microsoft.com/ja-jp/library/office/apps/jj163230.aspx

オンプレミスSharePoint2013 でApp for SharePoint2013 でデバック

手始めに最も簡単な[SharePointホスト型]でアプリを作成してみる。

事前に、[サーバの全体管理]から[サイトコレクション]を作成しておくこと、必ず以下のように[開発者向けサイト]で作成すること。

Visual Studio 2012で, ファイル/新規作成/プロジェクト/App for SharePoint2013を選び[OK]をおします。

さきほど、作成した [開発者向けサイト]のURLと入力して、[SharePointホスト型]を選択して[完了]をクリックします。

そうすると自動的に以下のようなコードが生成されます。

Default.aspx

Jqueryとか自動生成された。コードビハインド等で、アプリの場合はSharePointオブジェクトにアクセスするコードはかけないと思われる。 (もしかしたらかけるかも??)

<%-- 次の 4 行は、SharePoint コンポーネントの使用時に必要な ASP.NET ディレクティブです --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- 次の Content 要素内のマークアップとスクリプトはページの <head> 内に配置されます --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>

    <!-- 次のファイルに CSS スタイルを追加します -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- 次のファイルに JavaScript を追加します -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- 次の Content 要素内のマークアップとスクリプトはページの <body> 内に配置されます --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- アプリの実行時に次の内容はユーザー名で置き換えられます - App.js 参照 -->
            initializing...
        </p>
    </div>

</asp:Content>

ここまでできたなので、 F5(デバックボタン)をおしてみます。そしたら以下のようなエラーがでてきてうごきません。どうやらオンプレミスのSharePointの設定をしないといけないようです。時間がかかりそうなので、後に回して、クラウドのOffice365(SharePoint2013)で再度トライしてみます。

エラーの参考です。

  1. エラー内容
    @”エラー 1
    CorrelationId: c7ab995d-5a4d-4f16-b6e5-955291ec5872
    ErrorDetail: このサイトではアプリは無効になっています。
    ErrorType: Configuration
    ErrorTypeName: 構成
    ExceptionMessage: Microsoft.SharePoint.SPException: アプリをインストールできません。アプリ展開のエラーに関する詳細については、診断ログをご確認ください。
    場所 Microsoft.SharePoint.Utilities.SPUtility.ThrowSPExceptionWithTraceTag(UInt32 tagId, ULSCat traceCategory, String resourceId, Object[] resourceArgs)
    場所 Microsoft.SharePoint.Packaging.SPUserCodeSolutionDeploymentGroup.Deploy()
    場所 Microsoft.SharePoint.Administration.SPAppTask.DeployOperation()
    場所 Microsoft.SharePoint.Lifecycle.MonitoredTaskExecution.DoTask()
    Source: AppWeb
    SourceName: アプリ Web 展開
  2. sharepoint hosted app error:Apps are disabled on this site
     http://social.msdn.microsoft.com/Forums/en-CA/appsforsharepoint/thread/5f499b93-6064-480a-ad9b-7813769970f1
  3. [方法] SharePoint アプリ用の社内開発環境をセットアップする
    http://msdn.microsoft.com/ja-jp/library/office/apps/fp179923.aspx
    http://msdn.microsoft.com/en-us/library/fp179901(office.15).aspx
  4. SharePoint 用アプリの環境を構成する (SharePoint 2013)
    http://technet.microsoft.com/ja-jp/library/fp161236.aspx

クラウドのOffice365(SharePoint2012)で配置、デバックを行う

http://msdn.microsoft.com/ja-jp/library/office/apps/fp179924.aspx
のサイトから[サインアップ]する。

Microsoft Office365 Developer プレビューというサイトで
以下のようにアカウントのセットアップが表示されるので開発者用のOffice365(SharePoint 2013)に新規ユーザを登録する。

アカウント作成後サインインすると以下の画面になりますので、

メニュー/管理者/SharePoint をクリックして、プライベートサイトコレクションを新規作成する。

ここで[開発者向けサイト]を作成する。
注意)開発者向けサイト以外で作成するとVisual Studioのでデバック時に配置に失敗します。

  • 配置手順 ‘SharePoint 用アプリのインストール’ でエラーが発生しました: アプリのサイドロードは、このサイトでは有効になっていません。
  • Error occurred in deployment step ‘Install App for SharePoint’: Side Loading of apps is not enabled on this site.

Visual Studio 2012で, ファイル/新規作成/プロジェクト/App for SharePoint2013を選び[OK]をおします。
そうすると以下の画面がでてくるので、

さきほど、作成した [開発者向けサイト]のURLと入力して、[SharePointホスト型]を選択して[完了]をクリックします。

以下のようにコードが自動生成されるので、F5(デバック)を押してみます

以下のように Default.aspxがOffice365(SharePoint2013)サーバから表示されます。

Visual Studio でリスト定義を作成してみた。

List Definition(リスト定義)の場所ソリューションの場合のサイトコレクションの/Lists/が標準だが、アプリの場合はアプリのURLの下に配置される。 サイトコレクション/アプリ名/Lists/になる。
例:https://exceedone4-583aff76dc02ab.sharepoint.com/sites/test5/SharePointApp18/Lists/List1/AllItems.aspx#InplviewHasha313247b-4439-4cf7-84c2-bc89bdb9b073=ShowInGrid%3DTrue

オンプレミスのSharePoint2013 NodeRunner.exeのメモリ使いすぎのせいで、SharePoint本体とVisual Studio2012の動作がめっちゃ遅い

開発環境のSharePoint2013 + VisaulStudio 2012が遅いのでメモリを増設して4G->6Gにしても、あまりかわらない。また、メモリを大量に食いつぶす

タスクマネジャーで 確認したところ、 [Microsoft SharePoint Search Component] のプロセスが5つもあり、メモリを大量に消費している。ためしに、無理やり、プロセスをおとしてみると、SharePointの動きが早くなった。

対処方法は一番下の”参考”のところにのっていたので、対策をしてみたたら4G程度になり効果があった。

検索サービスなんて、開発環境でいらないので、サービスを落としたら、3.1G程度になったここからVisual Studio2012 + etc… を動かすのでメモリは6~8Gは必要そうだ。

サービスの停止方法

[管理ツール]-[サービス] でサービスを開き

[SPSearchHostController]のサービス[停止]と [スタートアップの種類]を[無効]にした。

結果

30分以上動かない、超重かった Visual Studio 2012 のデバックとかが、さくさく動くようになった!!

参考

SharePoint 2013 Preview NodeRunner.exe メモリーリーク

http://crieilluminate.wordpress.com/2012/10/02/sharepoint-2013-preview-noderunner-exe-%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E3%83%AA%E3%83%BC%E3%82%AF/

TechNet Blogs

http://blogs.technet.com/b/mpriem/archive/2012/09/05/sharepoint-2013-preview-hungry-search-service.aspx