デザインが統一されているSharePoint サイトを作成しよう

HTML とCSS でSharePoint のデザインを変更する

アドバンスド・ソリューション（株） 畑中 真由子

アジェンダ

• 自己紹介

• 対象ユーザー

• HTML で作成するページ– HTML を作成するには？

• デザインマネージャー– デザインマネージャーとは

– デザインマネージャーで出来ること

• デザインパッケージ– デザインパッケージとは

– デザインパッケージの構成要素

• デザインの変更– マスターページの作成と適用

– デザインパッケージの作成

• デザインの展開– デザインパッケージの再利用

– デザインパッケージの展開

• まとめ

自己紹介

• 畑中 真由子

• アドバンスド・ソリューション株式会社 所属

– http://www.advanced-solution.jp/

• 前職でMicrosoft Office SharePoint Server 2007 サイト構築やNotes移行、サポートデスクなどを行っており、その経験を活かし現在は主に SharePoint Server 2010 、SharePoint Server 2013 のオンプレミス、オンライン両方のサイト設計やサイト構築などアプリ系を担当

Blogを書いています。なるべくユーザー目線で「かゆいところに手が届く」を目指し日々投稿させてい頂いております。まだ記事は少ないですが、どんどん投稿していきますので宜しくお願い致します。

Office365とSharePointのブログ

http://o365sharepoint.wordpress.com/

突然ですが・・・

こんな悩みありませんか？

• 社内ポータルサイトがあるけど、各自で設定しているのでデザインに統一感がない…。

• 企業イメージが伝わるデザインにしたい！

• SharePoint の簡素な外観はイヤ！

では、デザインを変えてみましょう！

デザイン変更って言われても…

• どうやって変更するの？

• どうやってデザインを展開するの？

• どうせ敷居高いでしょ？

HTMLとCSSで出来ます！展開はデザインマネージャーにお任せあれ！敷居は少し高いけど、前バージョンよりは簡単になったかな（苦笑）。

SharePoint Server 2013 デザインの要

その1 HTMLとCSS

HTML とCSSでSharePoint ページの元となるファイルを、SharePoint ページの作成しましょう。

その2 デザインマネージャー

HTML ファイルをSharePoint のマスターページに変換します。

その3 デザインパッケージ

マスターページやスタイルを1つにまとめて他のサイトに再利用しましょう。

HTML で作成する SharePoint 2013のページ

デザインの要 ～その1～

HTML ファイルを作成するには？

• 任意のWebページエディターもしくはテキストエディターなどを用意します。

Webページエディター テキストエディタ

★補足★ SharePoint のページ• SharePoint のページは、主に3つの要素から構成されい

ます。覚えておくとHTML 作成時にサイトの全体観がつかめます。要素 説明

マスターページ サイトのすべてのページの共有部分の要素

ヘッダー、フッダー、サイトのロゴ、サイトのタイトル、トップナビゲーション、検索ボックスなどを配置する

ページレイアウト ページの本文のレイアウトや構造を定義（Webパーツ領域の追加など)

ページ（コンテンツ） Webパーツ領域にWebパーツを追加する

マスターページ

マスターページ

ページレイアウト

ページ

SharePoint のページ

参考資料 SharePoint 2013 ページ モデルの概要http://msdn.microsoft.com/ja-jp/library/jj191506.aspx

デザインマネージャー

デザインの要 ～その2～

デザインマネージャーとは

• SharePoint 全般のデザイン(マスターページ、ページレイアウト、テーマ、デバイスチャンネルなど）の設定を行ったり、作成するSharePoint Server 2013 からの発行機能の新機能です。

詳細についてはMSDNをご確認下さい。

SharePoint 2013 のデザイン マネージャーの概要

http://msdn.microsoft.com/JA-JP/library/jj822363.aspx

デザインマネージャーで出来ること？

1. HTMLファイルをマスターページファイル（.master)に変換することができます。

2. iPhone・iPad・Androidなどからサイトを表示する際のデザインが指定できます。

3. ページレイアウトのHTML ファイルを作成することができます。

4. サイトコレクションに展開するマスターページの発行、設定ができます。

5. デザインパッケージの作成ができます。

デザインパッケージ

デザインの要 ～その3～

• SharePoint サイトコレクションの視覚デザインをデザインマネージャーによってSharePoint ソリューションパッケージ（.wsp ファイル）としてまとめたものです。

詳細についてはMSDNをご確認下さい。

SharePoint Server 2013 のデザイン パッケージの概要

http://msdn.microsoft.com/ja-jp/library/jj862342.aspx

デザインパッケージとは

SharePointソリューションパッケージ

変換

デザインマネージャー

視覚デザイン

デザインパッケージの構成要素

マスターページ（サイトコレクション全体的なデザイン）

ページレイアウト（Webパーツ領域を構成しているもの）

テーマ（サイト背景色などのページ要素の色を決定する）

スタイルシート（文章のレイアウトの情報）

Java Script ファイル（動的に反応するWebページ）

画像（サイトに表示するロゴや背景、アイコンの画像）

デバイスチャンネル（各種デバイスへのデザインの設定）

サイト列（複数のリストに割り当てることのできる、再利用可能な列）

コンテンツタイプ（ページ コンテンツ タイプから継承されるコンテンツ タイプ）

デザインパッケージ

• わかったけど、どうやってマスターページやデザインパッケージを作成するの？

SharePoint のデザインに関しての説明は以上です！

では、SharePoint のデザインの変更と展開をしてみましょう！

デザインの変更

さっそくデザインを変更してみましょう！

マスターページの作成、発行、設定

1. HTML、CSSでSharePoint ページの元になるデザインを作成します。

2. 「マスターページギャラリー」にHTML とCSS をアップロードします。（フォルダーでまとめておくと便利です。）

3. デザインマネージャーでHTML をマスターページとして発行します。

4. SharePoint のスニペットをHTML に張り付けます。

5. サイト マスターページの設定で発行したマスターページを既定の値に設定します。

デザインパッケージの作成

1. サイトコレクションに接続し「サイトの設定」を開きます。

2. 「デザインマネージャー」を選択します。

3. 「デザインパッケージの作成」をクリック。

4. 任意のデザイン名を入力し「作成」をクリックすると「ただいま処理中です…」と表示されます。

5. デザインパッケージ作成画面に戻ると「パッケージを準備できました。ダウンロードするには、ここをクリックします。」と表示されると作成完了です。

★補足★ ページ作成のコツ

• 「<div data-name=“ContentPlaceHolderMain”>

…</div>」を任意の場所に配置するとページコンテンツを好きな場所に表示できます。

• ダイアログにロゴなどを表示したくない場合は「<header class=“ms-dialogHidden”><!—the rest of the header--></ header >」を任意の場所に追加すると表示されません。

デザインの展開

作成したデザインを他のサイトでも利用しましょう！

デザインパッケージの再利用

1. デザインを作成したサイトコレクションに接続します。

2. 「サイトの設定」より「ソリューション」をクリック。

3. 作成したデザインパッケージ名をクリック。

4. 確認のダイアログが表示されるので「保存」をクリックでエクスポート完了です。

デザインパッケージの展開

1. デザインを適用したいサイトコレクションに接続します。

2. 「サイトの設定」の「デザインマネージャー」をクリック。

3. 「完成しているデザイン パッケージをインポートする」をクリックします。

4. 保存したデザインパッケージを選択しインポートをクリックします。

5. デザインパッケージが展開されます。

まとめ• WebデザイナーやHTML とCSS の知識がある人だけでも

サイトのデザインをすることが可能になりました。

• HTMLとCSS、デザインマネージャー、デザインパッケージがサイトデザインの要になります。

• デザインパッケージで様々なサイトに容易にデザインを適用できるようになりました。

これで今日からカッコいいサイトがつく

れるね！