Hatena::Groupmediaforcelabs

どうも、小松です。

 | 

2010-06-09

SharePointのPoint 第2回 SharePointの開発環境

| 01:41

どうも、小松です。


今日は、SharePointの開発環境を構築したいと思います。とても簡単です。

SilverlightUIを拡張することを目指します。


0. はじめに

Silverlight 4 Toolsが英語版しかないのでVisual Studioの英語版をインストールしました。(2010/06/09)

今回インストールしたのは、以下のとおりです。


1. 開発環境のインストール

 1-1. Visual Studio 2010 Professional評価版をインストールする。

 1-2. Microsoft Silverlight 4 Tools for Visual Studio 2010をインストールする。

 1-3. SharePoint 2010 Reference: Software Development Kitをインストールする。

 1-4. Microsoft Expression BlendR 4 Release Candidate (RC)をインストールする。


2. サンプルのWebパーツ作成

 2-0. 今回は、SharePointとデータ連携しないWebパーツを作ります。

 2-1. Visual Studio 2010を起動します。

 2-2. メニューバーより[File]->[New]->[Project]を選択し、新規プロジェクトを作成します。

 2-3. 「Templates」より「Visual C#」->「Silverlight」->「Silverlight Application」を選び、プロジェクト名をつけ「OK」ボタンをクリックします。

  (プロジェクト名を「SPSample」としました。)

f:id:coma2:20100609002106p:image

 2-4. 「New Silverlight Application」ダイアログが表示されたら、デフォルト値のまま「OK」ボタンをクリックします。

f:id:coma2:20100609002644p:image

 2-5. 簡単なSilverlightアプリを作ります。(サンプルなんでなんでもよいです。)

  私は、以下のように作りました。


【MainPage.xaml

<UserControl x:Class="SPSample.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"
    Width="150" Height="100">

    <Grid x:Name="LayoutRoot" Background="#FFFF9898">
        <TextBlock x:Name="MyTextBlock" HorizontalAlignment="Left" Height="19" Margin="28,20,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="100"/>
        <Button x:Name="MyButton" Content="Click!" HorizontalAlignment="Left" Height="23" Margin="28,55,0,0" VerticalAlignment="Top" Width="89" Click="MyButton_Click"/>
    </Grid>
</UserControl>

【MainPage.xaml.cs

using System.Windows;
using System.Windows.Controls;

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

        private void MyButton_Click(object sender, RoutedEventArgs e)
        {
            MyTextBlock.Text = "SharePoint";
        }
    }
}

 2-6. 作成したSilverlightアプリSharePointデプロイします。

  2-6-1. プロジェクトを右クリックし、「Properties」を選択します。

f:id:coma2:20100609005803p:image

  2-6-2. 「Build」タブを選択し、「Output path」に「C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin」と入力し保存します。

f:id:coma2:20100609013340p:image

  2-6-3. ビルドします。(F6キーを押下)

  2-6-4. 作成したWebパーツをSharePointに追加します。

   2-6-4-1. ページの「編集」をクリックします。

f:id:coma2:20100609010553p:image

   2-6-4-2. Webパーツを挿入する場所にカーソルを合わせ、「挿入」ボタンをクリックします。

f:id:coma2:20100609010959p:image

   2-6-4-3. 「Webパーツ」をクリックします。

f:id:coma2:20100609011142p:image

   2-6-4-4. カテゴリから「メディアおよびコンテンツ」、Webパーツから「SilverWebパーツ」を選び、「OK」ボタンをクリックします。

f:id:coma2:20100609011701p:image

   2-6-4-5. URLに「/_layouts/ClientBin/SPSample.xap」と入力します。(xapファイル名は各自の環境に合わせてください。)

f:id:coma2:20100609012124p:image

   2-6-4-6. 「保存して閉じる」をクリックして、編集モードを終了します。

f:id:coma2:20100609013004p:image

  2-7. 追加したWebパーツを確認します。

f:id:coma2:20100609013538p:image

  ボタンをクリックしたら、正しく動作しました。

f:id:coma2:20100609013713p:image


3. 最後に

 今回は、SharePointと連携しないWebパーツの作成まででした。

 今後は、SharePointとのデータ連携方法などを調査したいと思います。

 |