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パーツなど。

分類 パーツ 説明
おすすめ
SharePoint modern webpart text
テキスト
書式付きのリッチテキストを表示。
SharePoint modern webpart picture
画像
画像を表示。
SharePoint modern webpart fileviewer
ファイル ビューア―
ページ上にOfficeファイル、PDFファイルなどを表示。
SharePoint modern webpart link
リンク
サイト内外の ページ、ビデオ、画像、文書へのリンク。
SharePoint modern webpart embended
埋め込み
YouTube 動画など、他サイトコンテンツを表示。
SharePoint modern webpart highlighted
強調表示されたコンテンツ
カード、リスト、カルーセルのレイアウトで、最近使用したファイルなどを表示。Delveっぽい画面が作れそう。
セクション
レイアウト
1段組み同左
2段組み同左
3段組み同左
3分の1が
左の列
同左
3分の1が
右の列
同左
その他
SharePoint modern webpart bingmaps
Bing 地図
Bing Maps Web パーツで地図を表示。
SharePoint modern webpart hero
Hero
タイル、レイヤーを5セットまで組み合わせてビジュアルに画像・テキストを表示するパーツ。
SharePoint modern webpart o365video
Office 365 ビデオ
Office 365ビデオポータルにある動画を表示。
SharePoint modern webpart Power BI
PowerBI
インタラクティブな Power BI レポートを埋め込み表示。
SharePoint modern webpart Yammer
Yammerのフィード
Yammer フィードをページに埋め込み表示。
SharePoint modern webpart event
イベント
今後のイベント(地図上の場所、オンライン会議情報を含む)を表示。
SharePoint modern webpart quick graph
クイック グラフ
単純なグラフを表示。一度なくなったグラフWebパーツの復活!?
SharePoint modern webpart quick link
クイック リンク
カルーセルで複数のリンクを表示。
SharePoint modern webpart site activity
サイト アクティビティ
アップロードされたファイル、編集内容、作成されたリスト・ライブラリなど、サイトの最近のアクティビティを表示。
SharePoint modern webpart stream
ストリーム(プレビュー)
Microsoft ストリーム ビデオ ポータルの動画を表示。
SharePoint modern webpart library
ドキュメント ライブラリ
ドキュメント ライブラリを表示する Web パーツ。
SharePoint modern webpart news
ニュース
ページまたはサイトのニュース機能でニュースを表示。
SharePoint modern webpart user
ユーザー
Office365ユーザーアカウント(365のメアド)で指定したユーザーの情報を表示。
SharePoint modern webpart list
リスト(プレビュー)
カスタムリスト、お知らせリストなどを表示。
SharePoint modern webpart gallery
画像 ギャラリー
複数の画像を表示。

上記の表以外にも、「連絡先」「グループ予定表」「Microsoft Forms」「区切り線」「スペーサー」などのWebパーツがあるみたいです。発動条件が解らないので、まだ使っていませんが...何かWebパーツを追加すると「区切り線」「スペーサー」が使えるのかな?何かサイト機能をActivateすると、Webパーツが使えるのかな?

追加できる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パーツのレイアウトは カード、リスト、カルーセル、映写スライド!


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


【最近の投稿記事】

SharePoint Online
Office 365/SharePoint Online事始め
Office 365やるってよ |  Office 365市販本(1) |  Office 365市販本(2) |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  sway, cortana, delve |  E5プラン |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ | 
SharePoint Online リスト/ライブラリ
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  複数ファイルダウンロード |  アイテムはレコードです |  列の書式設定(Column Formatting) | 
SharePoint Online リスト/ライブラリ/ページ(モダン表示)
モダン ドキュメントライブラリ |  モダン リスト・ライブラリ |  モダン ナビゲーション |  モダン サイトのロゴ |  モダン コマンドバー |  モダン ビュー |  モダン フォーム |  モダン サイト情報 |  モダン ページ、Webパーツ |  モダン ホームページ設定 |  Seattle から Oslo そして Modernへ |  モダン Webパーツページの管理は使えない |  モダン Webパーツ リスト、ライブラリ |  モダン Webパーツ 埋め込み |  モダン サイドリンクバーの有効化 |  モダン Webパーツ ファイルビューア― |  モダン Webブラウザ幅に応じた表示 |  モダン ページ タイトルと画像 |  モダン Webパーツ リンク |  モダン Webパーツ クイックリンク | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online Notes移行
Notes情報表示 |  Notesデータ移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont Online 動作仕様
制限値が気になる |  Webページ破損 |  サイトコレクション削除 |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイトメールボックス |  標準 サイト |  サイドリンクバー |  外部ユーザー共有 |  おすすめ エラー |  直打ちURL |  外観変更エラー |  サイトコレクション機能 |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  外部共有サイト、外部ユーザー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  外部ユーザー削除 Remove-SPOExternalUser |  お知らせタイルとエクスペリエンスバージョン | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センター |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ | 

search this site.
SharePoint概要
SharePointとは?
アーキテクチャ
サイトテンプレート
リストテンプレート
Webパーツ
アクセス権限
SharePoint用語集


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

大きなリストの問題
アイテム一覧の列幅
機能とWebパーツ
フィールドデータ型
禁則文字
隠しリスト表示
管理パス
サイト内の列
サポート期限
PDFをブラウザで開く
URLエンコード・デコード
日時の絶対値表示
エクスプローラーで開く

SharePoint開発Tips
開発の概要
開発者ダッシュボード
MSDN URL
RESTインターフェイス
ページパラメータ IsDlg
ビジュアルアップグレード
機能(Feature)
2010開発者向けの資格
2013開発者向けの資格
ページパラメータ contents
リソースファイル
リスト/ライブラリGUID
テーマ
トレースログ
PowerShell文字コード
SharePoint Framework

SharePoint情報サイト
SharePoint Developer Center
Support Team Blog
松崎 剛 Blog
SharePoint Developer
SharePoint Technical Note
ILLUMINATE JAPAN Blog
SharePoint Factory
新卒管理者の奮闘ブログ
SharePoint Maniacs
AvePoint Japan Community
idea.toString();
SharePoint Issue
Office365/SharePoint



   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  気場 |  水族館 |  イルカ |  ペンギン |  クラゲ |  仏像 |  論語 | 
   般若心経 |  日本庭園 |  二十四節気 |  菜根譚 |  城郭
   情報共有(SharePoint) |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS