SharePoint Online で、ポータル実践アイデア

SharePoint Online で、ポータル実践アイデア

第11回 Office 365 勉強会2015/05/16

太田浩史MVP for SharePoint Server

株式会社内田洋行

Japan Office 365 Users Group 1

自己紹介

太田浩史 (おおたひろふみ)

• 「標準機能をできるだけ使いたい」派

• ユーザーとして社内の利活用を支援

• ベンダーとしてお客様への導入・利用支援や情報提供

Japan Office 365 Users Group

Ota Hirofumihttps://facebook.com/hrfm.jp

Hirofumi OTAhttp://www.slideshare.net/hirofumi_ota

@hrfmjphttps://twitter.com/hrfmjp

idea.toString();http://idea.tostring.jp

2013 - Microsoft MVPSharePoint Server

2

https://facebook.com/hrfm.jp

http://www.slideshare.net/hirofumi_ota

https://twitter.com/hrfmjp

http://idea.tostring.jp/

本日の内容

• ポータルサイトのサイト構造を計画する

• ポータルを作ってみよう

• モバイルデバイスへちょっと配慮


SharePoint は “地味” です。

コツコツの積みかさねが大事です。

ゴール

• SharePoint をなんとなく理解してもらう

• 操作をなんとなく理解してもらう


ポータルサイトのサイト構造を計画する

Japan Office 365 Users Group p. 5

SharePoint Online よく耳にする用語

• サイトコレクション

– Office 365 全体管理 SharePoint 管理センターで作成

• サイト

– サイトコレクションの中にいくつも作成できる

• アプリ（リスト/ライブラリなど）

– サイトの中にいくつも作成できる

– データやドキュメントを保存できる


サイトの構造概念図


サイトコレクションサイトコレクション

･･･

サイトリスト

リスト

ライブラリ

ライブラリ

サイトサイトサイト

サイト

サイトサイト

たとえば組織階層でサイトを作る


全社共通サイトhttps://contoso.sharepoint.com

営業部/sales

総務部/general

開発部/devs

• よく見かける構成

• 細かくサイトを作りすぎると組織変更で頭を抱える

他サイトのアプリの情報を使いたい


全社共通サイトhttps://contoso.sharepoint.com

営業部/sales

総務部/general

開発部/devs

「開発部」の「お知らせ」を「営業部」のサイトに表示したい

「営業部」の「お知らせ」を「全社共通」に表示したい

これが意外に厄介


アプリ Web パーツを利用できる範囲

• “基本” はアプリが配置（インストール）されたサイト内


営業部/sales

開発部/devs

お知らせ

お知らせを営業部へ表示

複数のサイトで同じデータを表示するのは工夫が必要

ゆえに計画が大切

• いつも心がけているコト

–ポータルはできるだけ階層を少なく

–サイト数も少なく

–「情報はみんなで共有する」がコンセプト


ポータルを作ってみよう


ポータルに良くあるコンテンツ

• お知らせ掲示板

• 予定表

• ドキュメント共有

• リンク集


• ブログ

• 社長のメッセージ

• 今週の目標

• 何かのトピックス

ポータルページの大まかなレイアウト


今週の目標

掲示板

共有ドキュメント

トピックス

リンク集

今週予定



今週の目標

掲示板


トピックス

リンク集

大きな文字で表示

うまく整理したい

今週予定

これはマスト！



今週の目標

掲示板


トピックス

リンク集

今週予定

特に読んで貰いたいコンテンツ

社内のアプリケーションへのリンクとか

社内イベントとか

コンテンツの表示イメージ


ガンガンいこうぜ！！

お知らせ

2015/05/20 総務部 ○○のお知らせ

2015/05/20 総務部 ○○のお知らせ

2015/05/20 総務部 ○○のお知らせ

2015/05/20 総務部 ○○のお知らせ

2015/05/20 総務部 ○○のお知らせ

ドキュメントカテゴリ

・申請書・マニュアル・規定類

・管理部・人事部・システム管理部

避難訓練

5月28日に避難訓練があります！ご協力をお願いします。

総務(内線 xxx)

xxさんのブログバナー

リンク集

・App1 ・App2

・App1 ・App2

・App1 ・App2

最近更新されたドキュメント

○○申請書人事部

◆◆の利用方法システム管理部

ナビゲーション

ナビゲーション

今週の予定

勉強会 05/20

ナニから手を付ければ・・・


掲示板をつくる

• 標準アプリから始める


掲示板に「列」を追加する

• 「列」とは？

– 掲示板などの入力・表示項目

– 標準のアプリでは不足な項目を自由に追加できる

• 今回は「部署」列を作成します








いろんな種類から選択。新規作成時に”だけ”選択できるものもアリ。



• 追加した列は、一覧画面に表示することができる

「列」が追加できた！


• 追加した列は、投稿フォームにも自動で追加される

掲示板に「ビュー」を追加する

• 「ビュー」とは？

– 登録されたお知らせアイテムの一覧表示

– 並び替えの条件、フィルターや件数指定などが可能

• 今回は「有効期限が近い順」ビューを作成










「ビュー」が追加できた！


• 追加した「ビュー」は、メニューで選べます

新しいページを作ってみる

• Wiki ページ

– ページ上にテキストや Web パーツを自由に配置できる

– 自由がゆえに Web パーツをきれいに配置するのが難しい

• Web パーツページ

– ページ上に Web パーツを配置できる

– 特化しているがゆえに Web パーツをきれいに配置できる



• 今回は「Web パーツ」ページを選択しました

• 「サイトのページ」に追加します



• いくつかレイアウトが選択できる

• イメージに近いものを選択


ページに貼り付ける


ページに貼り付けた Web パーツの編集


ページ専用の「ビュー」をつくる


トップページ専用の「ビュー」を作成することもできる

小技: 「ビュー」ページに説明分を追加


「ビュー」のページにも Web パーツを追加できる

• 「ビュー」の「チェックボックス」を消したい・・・

– トップページなどでは、表示されないほうがスマートに見える

小技: 「ビュー」の「チェックボックス」を消す


• ビューの設定「表形式で表示」

– 「各アイテムにチェックボックスを表示します」をオフ

– チェックを外すと、複数アイテムの一括削除などができなくなる

小技: 「ビュー」の「チェックボックス」を消す


• 日付列の表示形式

• 「標準」 - 2015/05/16 13:00

• 「フレンドリ」 - 約 1 時間前

小技: 日付の表示形式を変える


ドキュメントライブラリをつくる

• 標準アプリで用意されている


ドキュメントライブラリをつくる

• 「列」を追加する

– 既定は「タイトル」だけ

– 「文書カテゴリ」列とか「主管部門」列とか

• 「ビュー」を作成する

– 「文書カテゴリ別」ビューとか「主管部署」ビューとか


グループ化を利用した「ビュー」






小技: ビューのフィルター操作と URL


フィルターの設定はURL へ反映される

小技: フィルターへのリンク集を作ってみる

• HTML でリンク集を書いてページに挿入

• 「コンテンツエディター」 Web パーツを利用する

– HTML はテキストファイルで保存し、任意のライブラリへアップロード

（スタイルライブラリなどがオススメ）

– CEWP の設定からテキストファイルへの URL を指定


コンテンツエディター Web パーツの利用


ライブラリページへ自作のメニューを追加


「今週の目標」アプリをつくる

• 標準アプリでは用意されていない

• 「カスタムリスト」アプリから作成



• 「列」を作成

– 本文（複数行テキスト）

– 表示開始日（日付と時刻）

– 表示終了日（日付と時刻）




表示したい週の日曜日と土曜日を指定

“今日” の日付を利用したフィルター

• 日付を利用したフィルター

– 「今日」が「表示開始日」と「表示終了日」の間

– フィルターの条件に今日 = [Today] を使うことができる


「今週の目標」とか

• 「ビュー」で「本文」のみを表示するとそれっぽく


予定表

• 標準アプリから始める


「集計値」列を利用する

• 「集計値」列とは？

– ユーザーによって入力された値を利用して、

自動計算した値が保存される列

• この列を利用して「今週の予定」のみを表示する

ビューを作成してみる


「集計値」列を利用する

• 「週初め」列（予定の週の日曜日の日付を計算）

– 数式: =開始時刻+(1-WEEKDAY(開始時刻))

• 「週終わり」列（予定の週の土曜日の日付を計算）

– 数式: =開始時刻+(7-WEEKDAY(開始時刻))


あとはご存知の通り

• ビューを作成

– フィルターの条件

「開始時刻」が [Today] 以下

かつ

「終了時刻」が [Today] 以上


作ったものをページへ配置してみる


作ったものをページへ配置してみる


なんか間延びしてる…スキマ多すぎ！！

レイアウトやデザインを調整したい

• 「SharePoint 発行インフラストラクチャ」を有効化

– 「サイトの設定」-「サイトコレクションの機能」

• デザインを調整するための機能がサイトへ追加される


注意

– サイトのテンプレート保存に制限が出ることがある

– 有効化すると、完全には無効化できない（不可逆）

レイアウトの微調整

• ポータルのレイアウトは少し整えたい

• スタイルシート（CSS）で修正ができる

– 今回作成したスタイルのサンプル


.ms-viewheadertr th{border-bottom:1px #888 dotted;}

.ms-listviewtable{width:100%;}

.ms-alternating{background-color:rgba(238, 238, 238, 0.85);}

.ms-webpartPage-root{border-spacing:8px 0;}

.ms-webpart-titleText.ms-webpart-titleText,

.ms-webpart-titleText{

padding-left:8px;

border-left:8px solid rgba(238, 238, 238, 0.85);

}

スタイルの適用方法

• サイト全体に適用する場合

– 「デザインマネージャー」を利用（発行インフラストラクチャの機能）

– 事前にアップロードした CSS ファイルを「代替 CSS」へ設定

• 特定のページだけに適用する場合

– スクリプトエディターやコンテンツエディターでページに挿入


代替 CSS の設定


• デザインマネージャーを使ってみる



「7. デザインの発行と適用」を・・・



ここをクリック



CSS ファイルは「スタイルライブラリ」へアップロードしておくのが一般的

適用した状態


トップページを変更する


ここをクリック

• サイトのウェルカムページに新しく作成したページを指定

– 「発行インフラストラクチャ」の機能



• 「発行インフラストラクチャ」を有効化していない場合

– SharePoint Designer から変更



ひとまず完成！


管理を楽にするために

• 管理者用ページを作ろう

– SharePoint Online の設定はページも多くて大変

– 管理者用のランチャーページを作っておくとすごく便利！

– きっと将来の引継ぎもラクになるはず


管理を楽にするために


モバイルデバイスへちょっと配慮


モバイルで閲覧するユーザーへの配慮

• SharePoint Online はモバイル用画面があります

– 「サイトの機能」で「モバイルブラウザービュー」をアクティブに

– スマートフォンでアクセスすると専用の画面が表示される



• ユーザーに見せたくないアプリが表示されている・・・



• SharePoint Designer を利用して不要なものを非表示



• 非表示となりスッキリしました



• 参考: 再度表示させる


「すべてのファイル」

右クリックで「プロパティ」

さいごに

• SharePoint は地道な作業の積みかさね

• 「列」「ビュー」を組み合わせて使う

• カンタンに試せるので、いろいろ試してみる

• 作っては直し、使っては直しをくり返しましょう

• コツコツと作業するのが楽しいです


Japan Office 365 Users Group Fin.

Technology

SharePoint Online で、ポータル実践アイデア