Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
デザインが統一されている
SharePoint サイトを作成しよう
HTML とCSS でSharePoint のデザインを変更する
アドバンスド・ソリューション(株) 畑中 真由子
アジェンダ
• 自己紹介
• 対象ユーザー
• HTML で作成するページ
– HTML を作成するには?
• デザインマネージャー
– デザインマネージャーとは
– デザインマネージャーで出来ること
• デザインパッケージ
– デザインパッケ...
自己紹介
• 畑中 真由子
• アドバンスド・ソリューション株式会社 所属
– http://www.advanced-solution.jp/
• 前職でMicrosoft Office SharePoint Server 2007 サイト構...
突然ですが・・・
こんな悩みありませんか?
• 社内ポータルサイトがあるけど、各自で設定しているので
デザインに統一感がない…。
• 企業イメージが伝わるデザインにしたい!
• SharePoint の簡素な外観はイヤ!
では、デザインを変えてみましょう!
デザイン変更って言われても…
• どうやって変更するの?
• どうやってデザインを展開するの?
• どうせ敷居高いでしょ?
HTMLとCSSで出来ます!
展開はデザインマネージャー
にお任せあれ!
敷居は少し高いけど、前バージョンよりは簡単にな...
SharePoint Server 2013 デザインの要
その1 HTMLとCSS
HTML とCSSでSharePoint ページの元となるファイルを、
SharePoint ページの作成しましょう。
その2 デザインマネージャー
HTML...
HTML で作成する SharePoint 2013
のページ
デザインの要 ~その1~
HTML ファイルを作成するには?
• 任意のWebページエディターもしくはテキストエディターな
どを用意します。
Webページエディター テキストエディタ
★補足★ SharePoint のページ
• SharePoint のページは、主に3つの要素から構成されい
ます。覚えておくとHTML 作成時にサイトの全体観がつ
かめます。
要素 説明
マスターページ サイトのすべてのページの共有部分の要素...
デザインマネージャー
デザインの要 ~その2~
デザインマネージャーとは
• SharePoint 全般のデザイン(マスターページ、ページレイアウ
ト、テーマ、デバイスチャンネルなど)の設定を行ったり、作成
するSharePoint Server 2013 からの発行機能の新機能で
す。
詳...
デザインマネージャーで出来ること?
1. HTMLファイルをマスターページファイル(.master)に変換
することができます。
2. iPhone・iPad・Androidなどからサイトを表示する際のデ
ザインが指定できます。
3. ページレ...
デザインパッケージ
デザインの要 ~その3~
• SharePoint サイトコレクションの視覚デザインをデザイン
マネージャーによってSharePoint ソリューションパッケージ
(.wsp ファイル)としてまとめたものです。
詳細についてはMSDNをご確認下さい。
SharePoin...
デザインパッケージの構成要素
マスターページ(サイトコレクション全体的なデザイン)
ページレイアウト(Webパーツ領域を構成しているもの)
テーマ(サイト背景色などのページ要素の色を決定する)
スタイルシート(文章のレイアウトの情報)
Java...
• わかったけど、どうやってマスターページやデザインパッケー
ジを作成するの?
SharePoint のデザインに関しての説明は
以上です!
では、SharePoint のデザインの
変更と展開をしてみましょう!
デザインの変更
さっそくデザインを変更してみましょう!
マスターページの作成、発行、設定
1. HTML、CSSでSharePoint ページの元になるデザイン
を作成します。
2. 「マスターページギャラリー」にHTML とCSS をアップロー
ドします。(フォルダーでまとめておくと便利です。)
...
デザインパッケージの作成
1. サイトコレクションに接続し「サイトの設定」を開きます。
2. 「デザインマネージャー」を選択します。
3. 「デザインパッケージの作成」をクリック。
4. 任意のデザイン名を入力し「作成」をクリックすると「ただ
...
★補足★ ページ作成のコツ
• 「<div data-
name=“ContentPlaceHolderMain”>
…</div>」を任意の場所に配置するとページコ
ンテンツを好きな場所に表示できます。
• ダイアログにロゴなどを表示したくな...
デザインの展開
作成したデザインを他のサイトでも利用しましょう!
デザインパッケージの再利用
1. デザインを作成したサイトコレクションに接続します。
2. 「サイトの設定」より「ソリューション」をクリック。
3. 作成したデザインパッケージ名をクリック。
4. 確認のダイアログが表示されるので「保存」をクリ...
デザインパッケージの展開
1. デザインを適用したいサイトコレクションに接続します。
2. 「サイトの設定」の「デザインマネージャー」をクリック。
3. 「完成しているデザイン パッケージをインポートする」をク
リックします。
4. 保存したデ...
まとめ
• WebデザイナーやHTML とCSS の知識がある人だけでも
サイトのデザインをすることが可能になりました。
• HTMLとCSS、デザインマネージャー、デザインパッケージ
がサイトデザインの要になります。
• デザインパッケージで...
Upcoming SlideShare
Loading in …5
×

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

17,186 views

Published on

2013/10/12 Japan SharePoint Group 勉強会 11# 福岡
発表資料です。

Published in: Technology
  • Be the first to comment

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

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

×