3,722 views(since 2013/10/08)

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

| 2月 04, 2013 | 0 comments

注意(2013/02/13)

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

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

はじめに

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]でうごくようになります。

Filed Under: Office365 • Office365 App • Office365-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.