4,317 views(since 2013/10/08)

はじめての”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

Filed Under: Office365Office365 AppOffice365-start

Tags:

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.