Smart Tiles: ソリューションの概要

はじめに

どのイントラネット ページにも、他のどのリンクよりも頻繁に開かれる宛先がいくつかあります。たとえば、人事ポータル、勤務時間管理システム、チームのドキュメント ライブラリ、ヘルプ デスクなどです。Smart Tiles は、こうした宛先を、アイコン付きの大きくカラフルなタイルのパネルに変えます。訪問者は一目で認識でき、1 回のクリックでアクセスできます。

Smart Tiles は、SharePoint Online のモダン ページ向けの SharePoint Framework Web パーツです。ページの作成者はこの Web パーツをページに追加し、編集モードでページ上に直接タイルを作成して、発行します。リストや構成ファイルは不要です。この記事では、この Web パーツを紹介します。動作する場所、タイルで設定できる内容、パネル全体の外観を決める設定について説明します。

Smart Tiles が動作する場所

Smart Tiles は、アプリ カタログから 1 つのパッケージとして Microsoft 365 テナントに展開されます。展開後は、追加のアクティブ化なしで、テナントのすべてのサイトで Web パーツを使用できます。次の場所に配置できます。

• 任意のモダン ページ (サイト ページ、ニュース投稿、ホーム ページ)
• 通常のセクション、列を含むセクション、または全幅セクション。全幅セクションでは、タイルが画面全体に広がります。
• 1 つの Web パーツのみを配置するアプリ ページ。タイルがページの唯一のコンテンツになります。

Web パーツはサイトのテーマ (ダーク テーマやセクションのカラー バリエーションを含む) に従い、そのインターフェイスは 44 言語で利用でき、ユーザーの言語に応じて自動的に選択されます。

タイルで設定できる内容

各タイルは、それぞれ独自の外観を持つリンクです。タイルのプロパティは 4 つのグループに分かれています。

テキスト。 タイルにはタイトルと、省略可能な説明があります。説明はタイトルの下に小さい文字で表示され、タイルのツールヒントにも表示されます。コンパクトな外観にしたい場合は、パネル全体で説明を非表示にできます。

リンク。 タイルでは、ページ、ドキュメント、または任意の Web アドレスを、同じウィンドウまたは新しいタブで開けます。通常のリンクのほか、タイルから電子メールの作成 (mailto:)、電話の発信 (tel:)、テキスト メッセージの送信 (sms:)、Microsoft Teams のチャットやチャネルの表示 (msteams:) を開始することもできます。YouTube 動画へのリンクは自動的に認識されます。タイルには動画のサムネイルを背景として表示でき、アイコンの代わりに再生ボタンが表示されます。

外観。 各タイルには背景色とフォントの色があり、サイト テーマの 6 つのアクセント カラー、定義済みカラーのパレット、黒、白から選択します。色の代わりに、背景画像をタイルに設定することもできます。URL で指定するか、サイトのドキュメント ライブラリから選択します。アイコンは 5 つのアイコン セット （Standard (Fluent UI)、File type、App (Microsoft 365)、Azure、Vitextra） のいずれかから選択するか、会社のロゴなどのカスタム画像に置き換えます。タイルのサイズは、Extra Small から Full Width までの 6 種類です。

対象ユーザー。 タイルは、サイトの特定の SharePoint グループまたは Microsoft Entra IDグループのメンバーにのみ表示できます。対象ユーザーを指定しないタイルは、全員に表示されます。

パネル全体の外観を決める設定

Web パーツのプロパティ ウィンドウには、すべてのタイルに一括で適用される設定があります。

• Font Size（フォント サイズ）と Icon size（アイコン サイズ）: それぞれ 7 段階と 6 段階
• Internal Indent（内側の余白）、Icon Indent（アイコンの余白）、External Indent（外側の余白）: タイルの内側、アイコンの下、タイル間の余白
• Shadow（影）: アイコンの下に表示されるやわらかいドロップ シャドウ
• Show Titles（タイトルを表示）と Show Descriptions（説明を表示）: タイルに表示されるテキスト
• Hover Effect（ホバー効果）: 明るさ、ぼかし、グレースケールなど 9 種類の視覚効果から 1 つを選択します。ポインターがタイルの上にあるとき、またはタイルにキーボード フォーカスがあるときに適用され、強さと継続時間を調整できます。

ページ上での編集

すべての編集は、ページの編集モードで、タイル上で直接行います。

• Add Tile（タイルの追加）: パネルの末尾に新しいタイルを追加します。
• タイルのコンテキスト メニューでは、プロパティの表示、サイズ、色、アイコンの変更、タイルの削除ができます。
• タイルの順序は、ドラッグして変更します。
• Export（エクスポート）はタイルを JSON ファイルに保存し、Import（インポート）は別のページやサイトにタイルを読み込みます。既存のタイルを置き換えるか、追加するかを選択できます。

Web パーツは、タイルをページ自体のプロパティに保存します。サイトにリストは作成されず、テナントの外に出るデータもありません。タイルはページと一緒に発行され、ページのバージョンと承認フローに従います。

訪問者

訪問者には、軽量なパネルが表示されます。編集ツールは編集モードでのみ読み込まれるため、発行されたページでは、タイルの表示に必要なものだけがダウンロードされます。タイルはスクリーン リーダーでリンクとして読み上げられ、キーボードで移動して操作でき、ホバー効果はオペレーティング システムの「視覚効果を減らす」設定に従います。新しいタブで開くリンクは、開く元のページから分離されます。

ライセンス

Smart Tiles は、試用期間付きでインストールされます。プロパティ ウィンドウの About（バージョン情報）グループには、ライセンスの状態、Web パーツのバージョン、サブスクリプションの開始日、割り当てられているテナントが表示されます。試用期間が終了すると、サブスクリプションがアクティブ化されるまで、タイルの代わりに通知が表示されます。