SlideShare a Scribd company logo
1 of 26
2018/02/09 実施
 モダン サイトとは?
 サイトのテーマ
 サイトスクリプトとサイトデザイン
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 2
アジェンダ
 “SharePoint Home” から現在 2種類が作成できる
◦ チームサイト
◦ コミュニケーション サイト
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 3
モダンサイトとは? (1)
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 4
モダンサイトとは?(2)
SharePoint サイト
(サイトコレクション)
Azure
Active Directory
Office 365 グループ
SharePoint サイトに接続された
Office 365 グループを新規に作成
グループの共有メールボックス
Office 365 グループ用の
共有メールボックスを
Exchange Online 側に作成
サイト全体が既定でモダン UI になっている
トップページもモダン ページ
既定では NoScript となっている
→ スクリプトエディタやコンテンツ エディタ Web パーツは
利用できない
※ちなみに、ベースは OneDrive for Business
従来の SharePoint と比べると管理機能は簡素
Microsoft
Planner
Microsoft
Stream
Yammer
Microsoft
Teams
 サイトの管理者は既定のテーマ以外にカスタム テーマを適用でき
る
 カスタム テーマはテナントワイドで利用できる
 テーマは JSON 形式で記述する
◦ オンラインの Theme Generator tool を使うと便利
◦ ただし、カスタム フォントは非サポート
 テーマは PowerShell コマンドレットまたは SharePoint Client
Site Object Model (CSOM), SharePoint REST API を使っ
てテナントストアに格納する
◦ SharePoint Online 管理センターの管理者権限が必要
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 5
サイトのテーマ
 既定のテーマは次の8種類
◦ 青
◦ オレンジ
◦ 赤
◦ 紫
◦ 緑
◦ 灰色
◦ 濃い黄
◦ 濃い青
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 6
既定のテーマ
1. テーマを定義する
2. PowerShell などを使ってテーマをテナント ストアに追加する
3. サイト側でテーマを適用する
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 7
カスタム テーマの展開の流れ
JSON 形式で
テーマを決定
PowerShell
CSOM
REST API
追加
テナント ストア
(テーマ ギャラリー)
Theme Generator tool
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 8
https://developer.microsoft.com/en-us/fabric#/styles/themegenerator
 スキーマ情報
◦ https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-
customization/site-theming/sharepoint-site-theming-json-schema
 基本の設定情報
◦ Name…テーマの名前
◦ isInverted…淡色(light)テーマの場合は false, 濃色(dark) テーマの場合は、
true にする
◦ backgroundImageUri…オプションの背景画像のURI
◦ Theme…RGB色の指定
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 9
サイトのテーマ : JSON スキーマ
 最新の SharePoint Online 管理シェルをインストールしておく
 サイトのテーマに関するコマンドレット
◦ Add-SPOTheme…新しいカスタムテーマの作成または既存テーマの上書き
◦ Get-SPOTheme…テーマ設定の取得
◦ Remove-SPOTheme…テーマギャラリーからのテーマの削除
◦ Set-SPOHideDefaultThemes…既定のテーマを使用できるかどうか指定
◦ Get-SPOHideDefaultThemes…SPOHideDefaultThemesの現在の設定を確認
false)
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 10
PowerShellを使ったテーマの管理
新規テーマの作成
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 11
…
$themepallette =@{
"themePrimary" = "#e096bd";
"themeLighterAlt" = "#fdfafc";
“themeLighter” = “#fcf5f8”;
{中略}…
"bodyText" = "#9c6c43";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}
Add-SPOTheme -Name “オフィスアイ" -Palette
$themepallette -IsInverted $false -Overwrite
既定のテーマの非表示
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 12
#既定のテーマの非表示
Set-SPOHideDefaultThemes $true
#既定のテーマの表示
Set-SPOHideDefaultThemes $false
 カスタムテーマを削除するには次のコマンドを実行
 例) Remove-SPOTheme -Name “オフィスアイ"
 既にカスタム テーマを適用済みのサイトでは、カスタムテーマは
適用されたまま残る。ただし、別のテーマに変更するとカスタム
テーマには戻せなくなるということにはなる
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 13
カスタム テーマの削除
 現在プレビュー段階 (対象リリースのみサポート)
 サイトデザインはサイトのテンプレートのようなもの
 チームサイトを作成するとき、サイトデザインのためのスクリプト
も実行する
◦ リストの新規作成、テーマの適用など
 サイト スクリプトは JSON形式のファイル
 適用スコープ
◦ 既定では全ユーザーに適用される
◦ だたし Grant-SPOSiteDesignRights コマンドレットを利用するか
GrantSiteDsignRights REST API を使うことでサイトデザインの利用範囲
ることも可能
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 14
サイトスクリプトとサイトデザイン
サイトデザインの選択
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 15
サイト作成 (1)
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 16
サイト作成 (2)
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 17
サイト作成 (3)
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 18
スクリプトの実行 スクリプトにより
リストや列が追加される
https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-
customization/site-design-json-schema
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 19
スキーマ
{
"$schema": "schema.json",
"actions": [
...
<one or more verb actions>
...
],
"bindata": { },
"version": 1
};
 リスト作成… createSPList
 ナビゲーションリンクの追加… addNavLink
 テーマの適用… applyTheme
 サイトロゴの設定… setSiteLogo
 ハブサイトへの参加…joinHubSite
 Microsoft Flow のトリガー…triggerFlow
◦ SharePoint PnP Site Privisioning Engine や SPFx との組み合わせな
ども可能
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 20
主な動詞(Actions)
※今後、新たな動詞が追加されていく予定
サイトスクリプトの追加
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 21
サイトデザインの追加
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 22
Webテンプレート : 64 チームサイト、68 コミュニケーション サイト
 Office 365 グループを作成できるユーザはサイトが作成できる
 既定ではだれでもグループを作成できる
 特定のセキュリティ グループに所属するユーザーにのみ Office
365 グループを作成できるように制限できる
◦ 指定できるのは1つのセキュリティ グループのみ
◦ Azure Active Directory Preminum の契約が必要
 Windows PowerShell にて設定
◦ Office 365 グループ作成を特定のセキュリティ グループに制限する
(AzureAD モジュール)
https://support.office.com/en-us/article/manage-who-can-create-office-365-
groups-4c46c8cb-17d0-44b5-9776-005fced8e618?ui=en-US&rs=en-
US&ad=US
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 23
[関連情報]サイトを作成できるユーザーの制限
 新しいSharePoint Online 管理センターが2月中にロールアウト
 年末までに新しい管理センターに切り替わる予定 (あくまで予定)
 Office 365 グループの管理が比較的容易になる
©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 24
[関連情報]新しいSharePoint Online 管理センター
SharePoint モダン サイト ~ サイト デザインとサイト スクリプト~
SharePoint モダン サイト ~ サイト デザインとサイト スクリプト~

More Related Content

What's hot

よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?Hirofumi Ota
 
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例Teruchika Yamada
 
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えよう
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えようMicrosoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えよう
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えようAi Hirano
 
これからはじめる Power Platform
これからはじめる Power Platformこれからはじめる Power Platform
これからはじめる Power PlatformRie Okuda
 
Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」
 Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」 Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」
Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」Kazuhiko Nakamura
 
デザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しようデザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しようMayuko Hatanaka
 
メタデータのファイルの管理
メタデータのファイルの管理メタデータのファイルの管理
メタデータのファイルの管理Sylvain Gantois
 
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理Hirofumi Ota
 
SharePoint モダン ポータル 徹底解説 !
SharePoint モダン ポータル 徹底解説 !SharePoint モダン ポータル 徹底解説 !
SharePoint モダン ポータル 徹底解説 !Ai Hirano
 
え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?Yugo Shimizu
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Teruchika Yamada
 
「Power Platform 管理者」とは?
「Power Platform 管理者」とは?「Power Platform 管理者」とは?
「Power Platform 管理者」とは?Teruchika Yamada
 
クラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えようクラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えようHiroaki Oikawa
 
SharePointリストのフォームのカスタマイズを利用したときにハマること
SharePointリストのフォームのカスタマイズを利用したときにハマることSharePointリストのフォームのカスタマイズを利用したときにハマること
SharePointリストのフォームのカスタマイズを利用したときにハマることた な
 
PRD03 最近 Power BI が On-Premises と仲良くなってきておりまして
PRD03 最近 Power BI が On-Premises と仲良くなってきておりましてPRD03 最近 Power BI が On-Premises と仲良くなってきておりまして
PRD03 最近 Power BI が On-Premises と仲良くなってきておりましてYugo Shimizu
 
Sharegate Migration のご紹介
Sharegate Migration のご紹介Sharegate Migration のご紹介
Sharegate Migration のご紹介Kazuhiko Nakamura
 
SharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデアSharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデアHirofumi Ota
 
Power Apps による SharePoint リスト フォーム編集のコツ
Power Apps による SharePoint リスト フォーム編集のコツPower Apps による SharePoint リスト フォーム編集のコツ
Power Apps による SharePoint リスト フォーム編集のコツRie Okuda
 

What's hot (20)

よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの?
 
情報共有ツールの使い分けの考え方とアプローチ
情報共有ツールの使い分けの考え方とアプローチ情報共有ツールの使い分けの考え方とアプローチ
情報共有ツールの使い分けの考え方とアプローチ
 
自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例自社で実運用中!Power Apps・Power Automate 活用事例
自社で実運用中!Power Apps・Power Automate 活用事例
 
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えよう
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えようMicrosoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えよう
Microsoft 365 を使い、よりよい業務環境の在り方と仕事への向き合い方を考えよう
 
これからはじめる Power Platform
これからはじめる Power Platformこれからはじめる Power Platform
これからはじめる Power Platform
 
Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」
 Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」 Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」
Office 365 勉強会「いまさらきけない? SharePoint の基礎のキソ」
 
デザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しようデザインが統一されているShare point サイトを作成しよう
デザインが統一されているShare point サイトを作成しよう
 
メタデータのファイルの管理
メタデータのファイルの管理メタデータのファイルの管理
メタデータのファイルの管理
 
情報共有ツールの 投資対効果を考える
情報共有ツールの投資対効果を考える情報共有ツールの投資対効果を考える
情報共有ツールの 投資対効果を考える
 
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理
ファイルサーバーの棚卸から考える SharePoint Online を使ったファイル管理
 
SharePoint モダン ポータル 徹底解説 !
SharePoint モダン ポータル 徹底解説 !SharePoint モダン ポータル 徹底解説 !
SharePoint モダン ポータル 徹底解説 !
 
え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
 
「Power Platform 管理者」とは?
「Power Platform 管理者」とは?「Power Platform 管理者」とは?
「Power Platform 管理者」とは?
 
クラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えようクラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えよう
 
SharePointリストのフォームのカスタマイズを利用したときにハマること
SharePointリストのフォームのカスタマイズを利用したときにハマることSharePointリストのフォームのカスタマイズを利用したときにハマること
SharePointリストのフォームのカスタマイズを利用したときにハマること
 
PRD03 最近 Power BI が On-Premises と仲良くなってきておりまして
PRD03 最近 Power BI が On-Premises と仲良くなってきておりましてPRD03 最近 Power BI が On-Premises と仲良くなってきておりまして
PRD03 最近 Power BI が On-Premises と仲良くなってきておりまして
 
Sharegate Migration のご紹介
Sharegate Migration のご紹介Sharegate Migration のご紹介
Sharegate Migration のご紹介
 
SharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデアSharePoint Online で、ポータル実践アイデア
SharePoint Online で、ポータル実践アイデア
 
Power Apps による SharePoint リスト フォーム編集のコツ
Power Apps による SharePoint リスト フォーム編集のコツPower Apps による SharePoint リスト フォーム編集のコツ
Power Apps による SharePoint リスト フォーム編集のコツ
 

Similar to SharePoint モダン サイト ~ サイト デザインとサイト スクリプト~

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズrie05
 
20130406 rainier study
20130406 rainier study20130406 rainier study
20130406 rainier studySix Apart
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうTomomitsuKusaba
 
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!Andy Hall
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトTakuma Nishiyama
 
シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26Yu Ito
 
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそうdotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそうAndy Hall
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Yoshie Nakayama
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩Chieko Aihara
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126webourgeon
 
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection Ai Hirano
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築sato165 @delab
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座Takami Kazuya
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルRyuji Egashira
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)Kenji Shirane
 
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化onigiri764
 
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライドHTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライドAndy Hall
 

Similar to SharePoint モダン サイト ~ サイト デザインとサイト スクリプト~ (20)

CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズCSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
 
20130406 rainier study
20130406 rainier study20130406 rainier study
20130406 rainier study
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
 
モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!モダンなウェブをモダンなツールで創ろう!
モダンなウェブをモダンなツールで創ろう!
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26シラサギハンズオン 2016 05-26
シラサギハンズオン 2016 05-26
 
dotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそうdotFes - Web標準にEdgeを利かそう
dotFes - Web標準にEdgeを利かそう
 
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
 
Vue入門
Vue入門Vue入門
Vue入門
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126
 
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection
パスベース および ホスト名付きサイト コレクションの構築 : Path based and Host named Site Collection
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
 
baserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアルbaserCMSテーマ制作チュートリアル
baserCMSテーマ制作チュートリアル
 
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
 
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化
WCAN 2014summer CSSフレームワークとCMSプロトタイプを使ったワークフローの効率化
 
HTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライドHTML5 Caravan 福岡・Adobe&HTMLのスライド
HTML5 Caravan 福岡・Adobe&HTMLのスライド
 

SharePoint モダン サイト ~ サイト デザインとサイト スクリプト~

  • 2.  モダン サイトとは?  サイトのテーマ  サイトスクリプトとサイトデザイン ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 2 アジェンダ
  • 3.  “SharePoint Home” から現在 2種類が作成できる ◦ チームサイト ◦ コミュニケーション サイト ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 3 モダンサイトとは? (1)
  • 4. ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 4 モダンサイトとは?(2) SharePoint サイト (サイトコレクション) Azure Active Directory Office 365 グループ SharePoint サイトに接続された Office 365 グループを新規に作成 グループの共有メールボックス Office 365 グループ用の 共有メールボックスを Exchange Online 側に作成 サイト全体が既定でモダン UI になっている トップページもモダン ページ 既定では NoScript となっている → スクリプトエディタやコンテンツ エディタ Web パーツは 利用できない ※ちなみに、ベースは OneDrive for Business 従来の SharePoint と比べると管理機能は簡素 Microsoft Planner Microsoft Stream Yammer Microsoft Teams
  • 5.  サイトの管理者は既定のテーマ以外にカスタム テーマを適用でき る  カスタム テーマはテナントワイドで利用できる  テーマは JSON 形式で記述する ◦ オンラインの Theme Generator tool を使うと便利 ◦ ただし、カスタム フォントは非サポート  テーマは PowerShell コマンドレットまたは SharePoint Client Site Object Model (CSOM), SharePoint REST API を使っ てテナントストアに格納する ◦ SharePoint Online 管理センターの管理者権限が必要 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 5 サイトのテーマ
  • 6.  既定のテーマは次の8種類 ◦ 青 ◦ オレンジ ◦ 赤 ◦ 紫 ◦ 緑 ◦ 灰色 ◦ 濃い黄 ◦ 濃い青 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 6 既定のテーマ
  • 7. 1. テーマを定義する 2. PowerShell などを使ってテーマをテナント ストアに追加する 3. サイト側でテーマを適用する ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 7 カスタム テーマの展開の流れ JSON 形式で テーマを決定 PowerShell CSOM REST API 追加 テナント ストア (テーマ ギャラリー)
  • 8. Theme Generator tool ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 8 https://developer.microsoft.com/en-us/fabric#/styles/themegenerator
  • 9.  スキーマ情報 ◦ https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative- customization/site-theming/sharepoint-site-theming-json-schema  基本の設定情報 ◦ Name…テーマの名前 ◦ isInverted…淡色(light)テーマの場合は false, 濃色(dark) テーマの場合は、 true にする ◦ backgroundImageUri…オプションの背景画像のURI ◦ Theme…RGB色の指定 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 9 サイトのテーマ : JSON スキーマ
  • 10.  最新の SharePoint Online 管理シェルをインストールしておく  サイトのテーマに関するコマンドレット ◦ Add-SPOTheme…新しいカスタムテーマの作成または既存テーマの上書き ◦ Get-SPOTheme…テーマ設定の取得 ◦ Remove-SPOTheme…テーマギャラリーからのテーマの削除 ◦ Set-SPOHideDefaultThemes…既定のテーマを使用できるかどうか指定 ◦ Get-SPOHideDefaultThemes…SPOHideDefaultThemesの現在の設定を確認 false) ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 10 PowerShellを使ったテーマの管理
  • 11. 新規テーマの作成 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 11 … $themepallette =@{ "themePrimary" = "#e096bd"; "themeLighterAlt" = "#fdfafc"; “themeLighter” = “#fcf5f8”; {中略}… "bodyText" = "#9c6c43"; "disabledBackground" = "#f4f4f4"; "disabledText" = "#c8c8c8"; } Add-SPOTheme -Name “オフィスアイ" -Palette $themepallette -IsInverted $false -Overwrite
  • 12. 既定のテーマの非表示 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 12 #既定のテーマの非表示 Set-SPOHideDefaultThemes $true #既定のテーマの表示 Set-SPOHideDefaultThemes $false
  • 13.  カスタムテーマを削除するには次のコマンドを実行  例) Remove-SPOTheme -Name “オフィスアイ"  既にカスタム テーマを適用済みのサイトでは、カスタムテーマは 適用されたまま残る。ただし、別のテーマに変更するとカスタム テーマには戻せなくなるということにはなる ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 13 カスタム テーマの削除
  • 14.  現在プレビュー段階 (対象リリースのみサポート)  サイトデザインはサイトのテンプレートのようなもの  チームサイトを作成するとき、サイトデザインのためのスクリプト も実行する ◦ リストの新規作成、テーマの適用など  サイト スクリプトは JSON形式のファイル  適用スコープ ◦ 既定では全ユーザーに適用される ◦ だたし Grant-SPOSiteDesignRights コマンドレットを利用するか GrantSiteDsignRights REST API を使うことでサイトデザインの利用範囲 ることも可能 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 14 サイトスクリプトとサイトデザイン
  • 16. サイト作成 (1) ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 16
  • 17. サイト作成 (2) ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 17
  • 18. サイト作成 (3) ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 18 スクリプトの実行 スクリプトにより リストや列が追加される
  • 19. https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative- customization/site-design-json-schema ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 19 スキーマ { "$schema": "schema.json", "actions": [ ... <one or more verb actions> ... ], "bindata": { }, "version": 1 };
  • 20.  リスト作成… createSPList  ナビゲーションリンクの追加… addNavLink  テーマの適用… applyTheme  サイトロゴの設定… setSiteLogo  ハブサイトへの参加…joinHubSite  Microsoft Flow のトリガー…triggerFlow ◦ SharePoint PnP Site Privisioning Engine や SPFx との組み合わせな ども可能 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 20 主な動詞(Actions) ※今後、新たな動詞が追加されていく予定
  • 22. サイトデザインの追加 ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 22 Webテンプレート : 64 チームサイト、68 コミュニケーション サイト
  • 23.  Office 365 グループを作成できるユーザはサイトが作成できる  既定ではだれでもグループを作成できる  特定のセキュリティ グループに所属するユーザーにのみ Office 365 グループを作成できるように制限できる ◦ 指定できるのは1つのセキュリティ グループのみ ◦ Azure Active Directory Preminum の契約が必要  Windows PowerShell にて設定 ◦ Office 365 グループ作成を特定のセキュリティ グループに制限する (AzureAD モジュール) https://support.office.com/en-us/article/manage-who-can-create-office-365- groups-4c46c8cb-17d0-44b5-9776-005fced8e618?ui=en-US&rs=en- US&ad=US ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 23 [関連情報]サイトを作成できるユーザーの制限
  • 24.  新しいSharePoint Online 管理センターが2月中にロールアウト  年末までに新しい管理センターに切り替わる予定 (あくまで予定)  Office 365 グループの管理が比較的容易になる ©2017-2018 オフィスアイ株式会社 [無断複製および転載を禁じます] 24 [関連情報]新しいSharePoint Online 管理センター