SharePoint Online モダン ページの追加でWebパーツに翻弄される

SharePoint Online : 2017.11.20 Monday
Microsoftサポートが公開している「サイトにページを追加する(Microsoft Support)」を参考にページの作り方マニュアルを作ろうとして...

注意事項として「ページが追加できる人は、サイトの所有者またはSharePoint管理者」は 書かれているけど。あまりにも簡素で、これでは 現状の「モダン表示/クラシック表示の混在」では マニュアル化が難しいですね。全部がモダン表示になったら、Microsoftサポートのページでもいいのかもしれませんが。

ページの追加

クラシック表示の場合は、右上[歯車アイコン]-[ページの追加]、モダン表示(ホームページ、サイトコンテンツ画面)の場合は、[新規]-[ページ]をクリックします。
SharePoint Create Page 01

ページが追加されたら [編集]をクリックして、編集開始します。

タイトルの入力、画像の追加

ページのタイトルエリアに、タイトルを入力して、タイトルの背景画像を追加します。
SharePoint Create Page 02

パーツ、レイアウトの追加

タイトルエリアの中央下にある[+]をクリックすると、追加するコンテンツが表示されます。
SharePoint Create Page 03

Webパーツとかレイアウトが いっぱい出てきて、ここで 呆れて溜息をつくか...何種類あって、どう使うんだと疑問符だらけになる人も多いかと・・・。

パーツ、レイアウトの一覧

ページに追加できる Webパーツとレイアウトは色々あります。今までのリスト/ライブラリを表示するWebパーツや、テキスト・図を表示するWebパーツや、新しいお洒落なWebパーツなど。

分類 パーツ 説明
お勧め
(Featured)
SharePoint modern webpart text
テキスト (Text)
書式付きのリッチテキストを表示。ハイパーリンクも作れる。
SharePoint modern webpart picture
画像 (Image)
画像を1つ表示。
SharePoint modern webpart fileviewer
ファイル ビューア― (File viewer)
ページ上にOfficeファイル(PDFファイルは対象外)を表示。
SharePoint modern webpart link
リンク (Link)
サイト内外の ページ、ビデオ、画像、文書へのリンク。
SharePoint modern webpart embended
埋め込み (Embed)
YouTube 動画など、他サイトコンテンツを表示。
SharePoint modern webpart highlighted
強調表示されたコンテンツ (Highlighted content)
カード、リスト、カルーセルのレイアウトで、最近使用したファイルなどを表示。Delveっぽい画面が作れそう。
セクション
レイアウト
1段組み1段組み (One column)
2段組み2段組み (Two columns)
3段組み3段組み (Three columns)
3分の1が
左の列
3分の1が左の列 (One-third left columns)
3分の1が
右の列
3分の1が右の列 (One-third right columns)
すべて
(昇順)
All A to Z
SharePoint modern webpart bingmaps
Bing 地図 (Bing maps)
Bing Maps Web パーツで地図を表示。
SharePoint Modern UI Kindle WebPart
Kindle インスタント プレビュー
日本のAmazonではサポートされていません。Kindle インスタント プレビュー機能(電子ブックの立ち読み)。
オフィスアイのブログ記事
SharePoint Modern WebPart Forms
Microsoft Forms
フォームへの返信を収集し、フォームの結果を表示。
SharePoint modern webpart o365video
Office 365 ビデオ (Office 365 video)
Office 365ビデオポータルにある動画を表示。
SharePoint modern webpart Power BI
Power BI (Power BI)
インタラクティブな Power BI レポートを埋め込み表示。
SharePoint modern webpart Yammer
Yammerのフィード (Yammer)
Yammer フィードをページに埋め込み表示。
SharePoint modern webpart event
イベント (Events)
今後のイベント(地図上の場所、オンライン会議情報を含む)を表示。
SharePoint modern webpart quick graph
クイック グラフ (Quick chart)
単純なグラフを表示。一度なくなったグラフWebパーツの復活!?
SharePoint modern webpart quick link
クイック リンク (Quick links)
カルーセルで複数のリンクを表示。
SharePoint Modern WebPart GroupSchedule
グループ予定表 (Group schedule)
Office 365のグループ予定表を表示。
SharePoint Modern UI Site WebPart
サイト(Site)
複数サイトへのリンクを表示。
SharePoint modern webpart site activity
サイト アクティビティ (Site activity)
アップロードされたファイル、編集内容、作成されたリスト・ライブラリなど、サイトの最近のアクティビティを表示。
SharePoint modern webpart stream
ストリーム (Stream)
Microsoft ストリーム ビデオ ポータルの動画を表示。
SharePoint Modern WebPart Spacer
スペーサー (Spacer)
縦方向のスペース調整。
SharePoint modern webpart library
ドキュメント ライブラリ (Document library)
ドキュメント ライブラリを表示する Web パーツ。
SharePoint modern webpart news
ニュース (News)
ページまたはサイトのニュース機能でニュースを表示。
SharePoint modern webpart hero
ヒーロー (Hero)
タイル、レイヤーを5セットまで組み合わせてビジュアルに画像・テキストを表示するパーツ。
SharePoint modern webpart user
ユーザー (People)
Office365ユーザーアカウント(365のメアド)で指定したユーザーの情報を表示。
SharePoint modern webpart list
リスト (List)
カスタムリスト、お知らせリストなどを表示。
SharePoint modern webpart gallery
画像 ギャラリー (Image gallery)
複数の画像をタイル または カルーセル表示。
sharepoint modernUI weather webpart
天気(Weather)
指定した地域の天気予報を表示。
SharePoint Modern WebPart Sepalater
分割バー (Divider)
分割線の表示。
sharepoint modernUI twitter webpart
Twitter
Twitterの表示。
sharepoint modernUI powerapps webpart
Microsoft PowerApps
PowerAppsコネクタ。
SharePoint Online Modern UI Page Property Web Parts
ページのプロパティ
ページに属性(プロパティ)を追加して 検索等の利便性をあげる。
SharePoint Online Modern UI Recent Document Web Parts
最近使ったドキュメント
Office365ホームのように、最近使ったドキュメントを表示。

上記の表以外にも、「連絡先」などのWebパーツがあるみたいです。発動条件が解らないので、まだ使っていませんが...何か Webパーツを追加すると 使えるようになるのかな? 何かサイト機能をActivateすると、Webパーツが使えるようになるのかな?

(2017.12.18 追記)
以下の仕様変更が行われた模様。
・分類の「おすすめ」が「お勧め」に文言変更
・分類の「その他」が「All A to Z」に変更
・「Microsoft Forms」の追加
・「スペーサー」の追加
・「分割バー」の追加
・「Hero」が「ヒーロー」に文言変更


追加できるWebパーツの一覧は、「SharePoint Online ページで Web パーツを使う」に詳細が載っています。

「強調されたコンテンツ (Highlighted content web part)」と「ヒーロー (Hero)」が、名前と実際のWebパーツ仕様が異なりますが、機能的には気になります。

まずは レイアウトを追加

テキスト、画像などのWebパーツを上から順番に使っていくと、まとまりのないページになってしまう予感がします。まずは、セクションレイアウトで段組みを決めて、セクションの中にWebパーツを配置していくと 世間一般のWebページのようになります。

但し、「強調されたコンテンツ」「ヒーロー」などの複数要素を含むパーツの場合は、横幅をとるので 段組みの数には注意が必要です。

レイアウトは・・・以前のページのように 後から変更できません(T_T) 頑張って色々つくったけど 幅が不足したので 3段組みを2段組みにすることができず・・・2段組みで作り直すしか方法がないみたい。

ここは、イマイチ。残念な点

・ページのタイトルを付けずに[保存して閉じる]すると、「ページのタイトル.aspx」になったり 「ランダムアルファベット.aspx」になったりする。
・「テキスト」Webパーツで色付けできない。
「画像」Webパーツでキャプションが入力できない? → できました。
・「リンク」Webパーツで プロパティ編集などを繰り返していると、プロパティが変更できなくなる...
・「埋め込み」Webパーツは iframeによる埋め込みのみサポート...JavaScriptなどはエラーになる。

ここは、いいね! 気に入った点

・ドラッグ アンド ドロップで、Webパーツの移動が簡単にできる!
・「リンク」Webパーツで、MSNや スマホニュースアプリみたいな 画像とテキスト表示ができる!
・「ファイルビューア―」Webパーツは、従来の「Excel Web Access」Webパーツでは できなかった特定グラフ表示、特定範囲の表示などができる!
・「強調表示されたコンテンツ」Webパーツは、従来の「コンテンツ検索」Webパーツのように サイトコレクション、サイトを検索して結果表示できる!
・「強調表示されたコンテンツ」Webパーツのレイアウトは カード、リスト、カルーセル、映写スライド!


不具合が解消されて、もっと良くなることを期待しています。

(2018.02.01 追加)
グループ予定表 Webパーツ、追加しました。

(2018.02.16 追加)
分類の「All A to Z」が「すべて (昇順) 」に変更。
Webパーツの増減、発動条件などの文章を修正。

(2018.05.25 追加)
「Kindle インスタント プレビュー」「サイト」Webパーツが追加されました。

(2018.07.06 追加)
「天気」Webパーツが追加されました。
日本語(サイト)では 正しく設定ができず、ユーザーの言語を英語に変更する必要があります。 英語サイトでWebパーツすれば、普通に使えますが。
SharePoint Online Modern UI Weather Web Part

「Twitter」「PowerApps」Webパーツが(いつの間にか)追加されていました。
何が増えているか Watch、頑張らねば。

(2018.10.17 追加)
ページのプロパティ」 Webパーツ、「最近使ったドキュメント」Webパーツが、追加されました。


【最近の投稿記事】



SharePoint Online
Office 365/SharePoint Online事始め,ライセンス
Office 365やるってよ |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  E5プラン | 
Office 365/SharePoint Online関連の書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 
Office 365製品、サービス
sway, cortana, delve |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing |  Microsoft 365 Roadmap | 
SharePoint Online リスト/ライブラリ(クラシック)
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  アイテムはレコードです |  イベントのエクスポート |  既定ビュー破損 |  バージョン管理の改悪Update | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ |  サイトフィード(ニュースフィード)データ出力 | 
SharePoint Online リスト/ライブラリ/ページ(モダン)
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト | 
SharePoint Online サイト(モダン)
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online 外部共有
外部ユーザー共有 |  外部共有サイト、外部ユーザー |  外部ユーザー削除 Remove-SPOExternalUser |  外部ユーザーの定義とライセンス付与の要否 |  共有の設定オプションが増えた |  サイトコレクション共有設定 | 
SharePoint Online Notes移行
Notes情報表示 |  Notesデータ移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont PnP PowerShell
PnPの概要 |  テナントバージョン取得 | 
SharePiont Online 動作仕様
制限値が気になる |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイドリンクバー |  直打ちURL |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  SharePoint Online 10 GB/User増量 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  SharePoint管理センター Preview |  データ移行ツール |  サイトページ機能 |  SharePointホームページ |  管理者の業務範囲 |  記憶域の管理 |  クォータの増量要求 | 
SharePiont Online 不具合
Webページ破損 |  サイトコレクション削除 |  おすすめ エラー |  外観変更エラー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  発行インフラストラクチャー機能 Trouble |  ダウンロード最小化戦略の問題点 |  日時がSeattle時間になる問題 |  サイトコレクション削除後の保存期間 | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センターUI |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ |  Office 365 ホーム |  OneDrive削除アクティビティメール |  Projectホームページ |  Teamsチームサイトのアクセス権限 |  O365管理センター メニュー |  ASPX,HTMLファイル表示差異 |  Teamsデスクトップクライアント設定 |  Office Online自動保存と自動編集 |  Microsoft Search |  OneDriveページパラメータ | 
search this site.
SharePoint概要
SharePointとは?
アーキテクチャ
サイトテンプレート
リストテンプレート
Webパーツ
アクセス権限
SharePoint用語集


SharePoint構築Tips
リスト名(URL)
ライブラリ名(URL)
フィールド名(内部名)
ビュー名(ファイル名)
リストテンプレート
(ワークフロー削除)

大きなリストの問題
アイテム一覧の列幅
機能とWebパーツ
フィールドデータ型
禁則文字
隠しリスト表示
管理パス
サイト内の列
サポート期限
PDFをブラウザで開く
URLエンコード・デコード
日時の絶対値表示
エクスプローラーで開く
パブリック・個人用ビュー
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePoint開発Tips
開発の概要
開発者ダッシュボード
MSDN URL
RESTインターフェイス
ページパラメータ IsDlg
ビジュアルアップグレード
機能(Feature)
2010開発者向けの資格
2013開発者向けの資格
ページパラメータ contents
リソースファイル
リスト/ライブラリGUID
テーマ
トレースログ
PowerShell文字コード
SharePoint Framework
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePoint情報サイト
Tech community(SharePoint)
SharePoint Developer Center
Support Team Blog
SharePoint Developer
SharePoint Technical Note
ILLUMINATE JAPAN Blog
Office365うるのさん奮闘ブログ
AvePoint Japan Community
idea.toString();
SharePoint Issue
Office365/SharePoint
からめもぶろぐ。
Office 365 & PowerX
徒然 Office 365 WebLog
SPeed LAND 365
Art-Break:Tech
ひと目でわかる SharePoint Server 2016




ひと目でわかるPowerAppsノンコーディングでのビジネスアプリ作成入門 (マイクロソフト関連書)


   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  水族館 |  仏像 |  論語 |  般若心経 |  庭園 |  二十四節気 |  菜根譚 | 
   SharePoint活用 |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS