デザインが統一されているshare point サイトを作成しよう
DESCRIPTION
2013/10/12 Japan SharePoint Group 勉強会 11# 福岡 発表資料です。TRANSCRIPT
![Page 1: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/1.jpg)
デザインが統一されているSharePoint サイトを作成しよう
HTML とCSS でSharePoint のデザインを変更する
アドバンスド・ソリューション(株) 畑中 真由子
![Page 2: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/2.jpg)
アジェンダ
• 自己紹介
• 対象ユーザー
• HTML で作成するページ– HTML を作成するには?
• デザインマネージャー– デザインマネージャーとは
– デザインマネージャーで出来ること
• デザインパッケージ– デザインパッケージとは
– デザインパッケージの構成要素
• デザインの変更– マスターページの作成と適用
– デザインパッケージの作成
• デザインの展開– デザインパッケージの再利用
– デザインパッケージの展開
• まとめ
![Page 3: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/3.jpg)
自己紹介
• 畑中 真由子
• アドバンスド・ソリューション株式会社 所属
– http://www.advanced-solution.jp/
• 前職でMicrosoft Office SharePoint Server 2007 サイト構築やNotes移行、サポートデスクなどを行っており、その経験を活かし現在は主に SharePoint Server 2010 、SharePoint Server 2013 のオンプレミス、オンライン両方のサイト設計やサイト構築などアプリ系を担当
Blogを書いています。なるべくユーザー目線で「かゆいところに手が届く」を目指し日々投稿させてい頂いております。まだ記事は少ないですが、どんどん投稿していきますので宜しくお願い致します。
Office365とSharePointのブログ
http://o365sharepoint.wordpress.com/
![Page 4: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/4.jpg)
突然ですが・・・
![Page 5: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/5.jpg)
こんな悩みありませんか?
• 社内ポータルサイトがあるけど、各自で設定しているのでデザインに統一感がない…。
• 企業イメージが伝わるデザインにしたい!
• SharePoint の簡素な外観はイヤ!
では、デザインを変えてみましょう!
![Page 6: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/6.jpg)
デザイン変更って言われても…
• どうやって変更するの?
• どうやってデザインを展開するの?
• どうせ敷居高いでしょ?
HTMLとCSSで出来ます!展開はデザインマネージャーにお任せあれ!敷居は少し高いけど、前バージョンよりは簡単になったかな(苦笑)。
![Page 7: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/7.jpg)
SharePoint Server 2013 デザインの要
その1 HTMLとCSS
HTML とCSSでSharePoint ページの元となるファイルを、SharePoint ページの作成しましょう。
その2 デザインマネージャー
HTML ファイルをSharePoint のマスターページに変換します。
その3 デザインパッケージ
マスターページやスタイルを1つにまとめて他のサイトに再利用しましょう。
![Page 8: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/8.jpg)
HTML で作成する SharePoint 2013のページ
デザインの要 ~その1~
![Page 9: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/9.jpg)
HTML ファイルを作成するには?
• 任意のWebページエディターもしくはテキストエディターなどを用意します。
Webページエディター テキストエディタ
![Page 10: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/10.jpg)
★補足★ SharePoint のページ• SharePoint のページは、主に3つの要素から構成されい
ます。覚えておくとHTML 作成時にサイトの全体観がつかめます。要素 説明
マスターページ サイトのすべてのページの共有部分の要素
ヘッダー、フッダー、サイトのロゴ、サイトのタイトル、トップナビゲーション、検索ボックスなどを配置する
ページレイアウト ページの本文のレイアウトや構造を定義(Webパーツ領域の追加など)
ページ(コンテンツ) Webパーツ領域にWebパーツを追加する
マスターページ
マスターページ
ページレイアウト
ページ
SharePoint のページ
参考資料 SharePoint 2013 ページ モデルの概要http://msdn.microsoft.com/ja-jp/library/jj191506.aspx
![Page 11: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/11.jpg)
デザインマネージャー
デザインの要 ~その2~
![Page 12: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/12.jpg)
デザインマネージャーとは
• SharePoint 全般のデザイン(マスターページ、ページレイアウト、テーマ、デバイスチャンネルなど)の設定を行ったり、作成するSharePoint Server 2013 からの発行機能の新機能です。
詳細についてはMSDNをご確認下さい。
SharePoint 2013 のデザイン マネージャーの概要
http://msdn.microsoft.com/JA-JP/library/jj822363.aspx
![Page 13: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/13.jpg)
デザインマネージャーで出来ること?
1. HTMLファイルをマスターページファイル(.master)に変換することができます。
2. iPhone・iPad・Androidなどからサイトを表示する際のデザインが指定できます。
3. ページレイアウトのHTML ファイルを作成することができます。
4. サイトコレクションに展開するマスターページの発行、設定ができます。
5. デザインパッケージの作成ができます。
![Page 14: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/14.jpg)
デザインパッケージ
デザインの要 ~その3~
![Page 15: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/15.jpg)
• SharePoint サイトコレクションの視覚デザインをデザインマネージャーによってSharePoint ソリューションパッケージ(.wsp ファイル)としてまとめたものです。
詳細についてはMSDNをご確認下さい。
SharePoint Server 2013 のデザイン パッケージの概要
http://msdn.microsoft.com/ja-jp/library/jj862342.aspx
デザインパッケージとは
SharePointソリューションパッケージ
変換
デザインマネージャー
視覚デザイン
![Page 16: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/16.jpg)
デザインパッケージの構成要素
マスターページ(サイトコレクション全体的なデザイン)
ページレイアウト(Webパーツ領域を構成しているもの)
テーマ(サイト背景色などのページ要素の色を決定する)
スタイルシート(文章のレイアウトの情報)
Java Script ファイル(動的に反応するWebページ)
画像(サイトに表示するロゴや背景、アイコンの画像)
デバイスチャンネル(各種デバイスへのデザインの設定)
サイト列(複数のリストに割り当てることのできる、再利用可能な列)
コンテンツタイプ(ページ コンテンツ タイプから継承されるコンテンツ タイプ)
デザインパッケージ
![Page 17: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/17.jpg)
• わかったけど、どうやってマスターページやデザインパッケージを作成するの?
SharePoint のデザインに関しての説明は以上です!
では、SharePoint のデザインの変更と展開をしてみましょう!
![Page 18: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/18.jpg)
デザインの変更
さっそくデザインを変更してみましょう!
![Page 19: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/19.jpg)
マスターページの作成、発行、設定
1. HTML、CSSでSharePoint ページの元になるデザインを作成します。
2. 「マスターページギャラリー」にHTML とCSS をアップロードします。(フォルダーでまとめておくと便利です。)
3. デザインマネージャーでHTML をマスターページとして発行します。
4. SharePoint のスニペットをHTML に張り付けます。
5. サイト マスターページの設定で発行したマスターページを既定の値に設定します。
![Page 20: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/20.jpg)
デザインパッケージの作成
1. サイトコレクションに接続し「サイトの設定」を開きます。
2. 「デザインマネージャー」を選択します。
3. 「デザインパッケージの作成」をクリック。
4. 任意のデザイン名を入力し「作成」をクリックすると「ただいま処理中です…」と表示されます。
5. デザインパッケージ作成画面に戻ると「パッケージを準備できました。ダウンロードするには、ここをクリックします。」と表示されると作成完了です。
![Page 21: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/21.jpg)
★補足★ ページ作成のコツ
• 「<div data-name=“ContentPlaceHolderMain”>
…</div>」を任意の場所に配置するとページコンテンツを好きな場所に表示できます。
• ダイアログにロゴなどを表示したくない場合は「<header class=“ms-dialogHidden”><!—the rest of the header--></ header >」を任意の場所に追加すると表示されません。
![Page 22: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/22.jpg)
デザインの展開
作成したデザインを他のサイトでも利用しましょう!
![Page 23: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/23.jpg)
デザインパッケージの再利用
1. デザインを作成したサイトコレクションに接続します。
2. 「サイトの設定」より「ソリューション」をクリック。
3. 作成したデザインパッケージ名をクリック。
4. 確認のダイアログが表示されるので「保存」をクリックでエクスポート完了です。
![Page 24: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/24.jpg)
デザインパッケージの展開
1. デザインを適用したいサイトコレクションに接続します。
2. 「サイトの設定」の「デザインマネージャー」をクリック。
3. 「完成しているデザイン パッケージをインポートする」をクリックします。
4. 保存したデザインパッケージを選択しインポートをクリックします。
5. デザインパッケージが展開されます。
![Page 25: デザインが統一されているShare point サイトを作成しよう](https://reader033.vdocuments.site/reader033/viewer/2022050706/547e04d7b47959ca508b4aad/html5/thumbnails/25.jpg)
まとめ• WebデザイナーやHTML とCSS の知識がある人だけでも
サイトのデザインをすることが可能になりました。
• HTMLとCSS、デザインマネージャー、デザインパッケージがサイトデザインの要になります。
• デザインパッケージで様々なサイトに容易にデザインを適用できるようになりました。
これで今日からカッコいいサイトがつく
れるね!