SharePoint Online モダンUI カウントダウンタイマー Webパーツ

SharePoint Online モダンUIのWebパーツに、カウントダウンタイマーが追加されました。
SharePoint Modern UI Count down Web part

カウントダウンタイマー Webパーツの使用例

カウントダウンタイマー使用例×3、作ってみました。

2019年10月01日 消費税10%まで
表示:日。背景画像を薄っすらと。
sharepoint Countdown Webpart display 1

2020年01月14日 Windows Server 2008, R2 延長サポート終了日まで
表示:日、時、分。濃い目の画像は文字が読みにくい。
sharepoint Countdown Webpart display 2

2020年07月24日 東京オリンピックまで
表示:日、時、分、秒。秒まで表示するとチカチカする。
sharepoint Countdown Webpart display 3

カウントダウンタイマー Webパーツの設定例

カウントダウンタイマー Webパーツの設定パラメータは、以下の7つが指定できます。
(1)日付と時刻
(2)カウントの方向
(3)タイマーの表示方法
(4)Call to action
(5)背景画像
(6)オーバーレイの色
(7)オーバーレイの透明度

SharePoint Countdown Webpart setting 1

カレンダーが英語だったり、「Call to action」が英語だったり、リリース直後ということで...。

(1)日付と時刻
カレンダーで、「年月日時分」が指定できます。

(2)カウントの方向
「カウントダウン」、「カウントアップ」の2つから選択できます。
カウントダウンタイマーWebパーツという名前なのに「カウントアップ」があるのが面白いところですね。
東京オリンピックなどのイベントまでの日数であれば「カウントダウン」でできますが、イベントの日を過ぎたらマイナス表示になるんですかね?
何かを始めたイベント日からの経過日数であれば「カウントアップ」を使うんですかね。

(3)タイマーの表示方法
「日」、「日、時間、分」、「日、時間、分、秒」の3つから選択できます。
前述の通り「秒」を使うと 安売りサイトのようなチカチカした感じになります。
「日」を使うと 日単位なので 動きが解りにくく 地味な感じになります。

(4)Call to action
オフ/オンの選択です。
オンにすると、リンクテキストとURLが指定できて Webパーツの説明部分にリンクが追加されます。
SharePoint Countdown Webpart setting 2
Webパーツのタイトル、残り日数、説明を読んだユーザーが、このリンクをクリックして 詳細なWebページで情報を閲覧するような流れが作れますね。

(5)背景画像
背景画像が指定できます。画像がないと お寒い感じなので 指定した方がいいですね。
背景画像を指定すると、「(6)オーバーレイの色」と「(7)オーバーレイの透明度」が指定できるようになります。

(6)オーバーレイの色
背景画像の上に 白背景黒文字を乗せるか、黒背景白文字を乗せるかのオプション。

(7)オーバーレイの透明度
中庸を求めるオプション。
透明度を100にすると 背景画像が見えなくなる。
透明度を0にすると 文字が読みづらくなる。


SharePoint Online モダンUI PowerApps Webパーツの動作が レスポンシブ デザインにならない

SharePoint モダンUIの「売り」は、何と言っても「レスポンシブ デザイン」。HTML5/CSS3で モバイルデバイスやPCなど様々なデバイスに対応するWebページ。

なのに、なぜ?

SharePoint Online モダンUI サイトページに、PowerApps Webパーツを追加して、開発したPowerAppsアプリを設定しても レスポンシブな動作(Webブラウザの横幅を変更したときに 追従する動き)をしません。
PowerApps Application Settings Display Size Direction 1

PowerApps Application Settings Display Size Direction 2

そんなはずないよねーっと 色々、PowerApps Studioの設定(アプリの設定>画面のサイズと向き)を色々と試すが 効果なし。

スマートフォン縦持ちデザインで作ったものは、「縦横比ロック」「向きをロック」を変更しても 縦の決まったサイズのまま。
スマートフォン横持ちデザインで作ったものは、「縦横比ロック」「向きをロック」を変更しても 横の決まったサイズのまま。
PCデザインの固定サイズで作ったものは、決まったサイズのままで伸び縮みせず。

Office365 Roadmapに 「Responsive design for canvas-based SharePoint PowerApps」という項目があり、「In development(開発中)」でした。
Responsive design for canvasbased SharePoint PowerApps

CY2019 Q3ということは 2019年7月から9月ってことですね。気長に待つしかないですね。

(2019.02.20 追記)
MicrosoftのUpdateで少し改善されました!
縦持ちデザインを SharePointページに表示した場合、少し大き目で表示されるようになりましたね。
横持ちなどはこれから試してみますが。


SharePoint Online モダン Web パーツ マークダウンの使い道を調べる

モダン マークダウン Webパーツ

またまた モダンUIのWebパーツが追加されました。「マークダウン」という名前です。軽量マークアップ言語のひとつ Markdownですね。
SharePoint Modern Markdown WP

モダン マークダウン Webパーツの使い方

マークダウン Webパーツを追加すると、黒い背景のボックスが表示されます。上部には リッチテキストエディタのような太字、斜字、取り消し線などのアイコンがあります。
SharePoint Modern Markdown WP edit 1

文字列を入力したり、太字、斜字、取り消し線を設定したりして...
SharePoint Modern Markdown WP edit 2

保存、発行してみると・・・真っ白
SharePoint Modern Markdown WP blank

え”っ? と思いながら、マウスで文字列を選択してみると 文字が現れます。つまり、白背景で白文字を表示しているってことですね。
SharePoint Modern Markdown WP display

「そんなはず ないよねぇ」と思い、再度エディットモードにして [淡色テーマ]や[プレビュー表示]を試してみるが 結果は変わらず。
SharePoint Modern Markdown WP edit 3

右側のWebパーツ設定ペインには サンプルはあるけど、設定項目はない...。
SharePoint Modern Markdown WP right Pane

そして、セクションの背景を「なし」にしたら、白背景・黒文字で表示されました。しかし、太字・斜字になっていない...。
SharePoint Modern Markdown WP display 2

まともに動くようになったら、また評価してみようかと思います。

SharePoint Online モダンUIページに カレンダー表示する方法

SharePoint Online クラシックUIでには、予定表リストで カレンダー表示ができました。
組織(チーム、グループなど)のスケジュールを登録して 共有するのに役立つパーツでした。

モダンUIではイベントWebパーツを使って カード形式で、予定表リストのデータが表示できますが、「カレンダー表示」はできません。

いつかはカレンダー表示できるのかなぁ...っと長い間、待ちわびていました。しかしながら 待てど暮らせど カレンダー表示が標準ではサポートされず、サードパーティー製のSharePointストアアプリ(アドイン)も 登場せず...困っていたのですが・・・。

モダンUIページに埋め込みWebパーツを配置して、クラシックUIのカレンダーを表示する方法がありました!

カレンダーを表示する方法(手順)は、以下の通りです。
(1) サイトのページを編集
(2) 埋め込み Webパーツを配置
(3) 埋め込み WebパーツにiFrameコードを張り付け
(4) サイトのページを保存、発行

SharePoint Online Modern UI Calendar Embed Web Part edit


肝になるのは、iFrameのコードです。クラシックUIでカレンダー表示したURLを準備して、スタイル(style)指定で 左上(margin-left,top)の不要部分を削って表示する感じです。

SharePoint Online Modern UI Calendar Embed Web Part display

とりあえず、PC画面であれば 表示できますね...問題はモバイル対応ができないこと。Webブラウザの横幅を狭くした場合に 自動的にはリサイズされないので 対策を考えねば。

上記の例では、クラシックUI「予定表」リストのビューを モダンUI サイトページに「埋め込み」Webパーツで表示していますが、間に1枚 クラシックUIのWikiページを挟めば、幅の狭いカレンダー(幅 450px、高さ500px)が表示できます。

SharePoint Online Modern UI Calendar Small


SharePoint Online モダンUI コードスニペット(Code snippet) Webパーツ

使いみちが かなり限定されている Webパーツ「コードスニペット(Code snippet)」のご紹介です。
SharePoint Online Modern UI Code snippet Web part

開発者、開発チームが プログラムコード解説などを共有するのには、使えるWebパーツ...だと思います。

プログラミング言語の種類に合わせて、命令文やデータ型が自動的に色付けされるので テキストエディタ―のような表示になります。
SharePoint Online Modern UI Code snippet Web part language C hello World

プログラミング言語の種類は、C, C++, C#, CSS, Go, HTML, Java, JavaScript, Markdown, Object C, PowerShell, Python, Scola, TypeScript の15種類。英語サイトだと 正しく表示されますが、日本語サイトでは Go が「移動」、Markdownが「マークダウン」になってます...そこは翻訳いらないんですけどね。
SharePoint Online Modern UI Code snippet Web part language

色合いは 背景色が黒の「濃色テーマ」と、背景色が灰色の「淡色テーマ」。濃淡がハッキリしていて見やいのは「濃色テーマ」ですね。

左がの行番号は ON/OFFができて 「番号付きの行」「番号なしの行」が選べます。プログラムコードだと「番号付きの行」が定番ですね。



【最近の投稿記事】



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 |  Bookings | 
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回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
SharePoint Online サイト(モダン)
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 |  新しいサイトロゴ | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online 外部共有
外部ユーザー共有 |  外部共有サイト、外部ユーザー |  外部ユーザー削除 Remove-SPOExternalUser |  外部ユーザーの定義とライセンス付与の要否 |  共有の設定オプションが増えた |  サイトコレクション共有設定 | 
SharePoint Online 移行
Notes情報表示 |  Notesデータ移行 |  Sharegateインストール |  Sharegateファイル移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont PnP PowerShell
PnPの概要 |  テナントバージョン取得 | 
SharePiont + PowerApps
PowerAppsリンク集 | 
SharePiont Online 動作仕様
制限値が気になる |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイドリンクバー |  直打ちURL |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  SharePoint Online 10 GB/User増量 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  SharePoint管理センター Preview |  データ移行ツール |  サイトページ機能 |  SharePointホームページ |  管理者の業務範囲 |  記憶域の管理 |  クォータの増量要求 |  クラシックモード制限の無効化 | 
SharePiont Online 不具合
Webページ破損 |  サイトコレクション削除 |  おすすめ エラー |  外観変更エラー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  発行インフラストラクチャー機能 Trouble |  ダウンロード最小化戦略の問題点 |  日時がSeattle時間になる問題 |  サイトコレクション削除後の保存期間 |  Webパーツコマンドバー文字が重なる |  日本語対応がひどい | 
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ページパラメータ |  SharePoint+Teams+O365グループ |  Officeアプリアイコン | 

SharePoint全般
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 | 
search this site.
SharePoint Online書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 


SharePointモダン リスト
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow | 
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePointモダン Webパーツ
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePointモダン サイト
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 | 
ひと目でわかる SharePoint Server 2016




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

SharePoint情報サイト
Tech community(SharePoint)
SharePoint Developer Center
Support Team Blog
SharePoint Technical Note
ILLUMINATE JAPAN Blog
AvePoint Japan Community
idea.toString();
からめもぶろぐ。
Office 365 & PowerX
SPeed LAND 365
Art-Break:Tech


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