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アプリが作成されます。
その他わかったこと。
アプリの場合は、いままでのソリューションのように、[サイトURL/Lists/リスト名] ではなく、[アプリURL/Lists/リスト名]に位置になります。Silverlightでは、カレントURLをとっておけば、ソリューションでも、アプリでも両対応できます。
サンプル(sample program)は以下のURLからダウンロードしてください。
- [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
- 環境セットアップ(Windows Server 2012 + SharePoint 2013 Preview/Trial + VisualStudio 2012)
- SharePoint2013 /Office365(SP2013)でサイトコレクションを作成する。
- オンプレミスのSharePoint2013 NodeRunner.exeのメモリ使いすぎのせいで、SharePoint本体とVisual Studio2012の動作がめっちゃ遅い
- SharePoint 2013([Visaul Studio Projcet] [App for SharePoint])/Office2013(App for Office) のVisaul Studio 2012 開発環境
- Office 365 Enterprise(Office2013/SharePoint2013) プレビューを試してみた
- ソーシャル機能 ニュースフィード編; Office 365 Enterprise(Office2013/SharePoint2013) プレビューを試してみた
- はじめての”App for SharePoint2013″ (Visual Studio2012)を作成してみる。
- はまる、App for SharePoint 2013 (オンプレミス; on-premises) とVisual Stuidoでのsharepoint hoted apps アプリデバックの環境(enviroment)
- App for Sharepoint 2013 サンプルコードを動かしてみる
- 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パーツ
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
簡単なので、SharePointホスト型にしてください。
”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