ブログBLOG

Lightning Conductor SPFx の活用例 「プリセットWebパーツ」

2020年09月29日(火)

今回の記事では、Lightning Conductor SPFxのプリセットパーツの活用例をご紹介いたします。Lightning Conducor SPFxには、お客様の多くが利用するドキュメントやお知らせなどのコンテンツの表示について、数種類のプリセットWebパーツを用意しております。
 以下に「ドキュメント」、「カレンダー」、「お知らせ」のプリセットWebパーツをご紹介します。

プリセットWebパーツ:LightningToolsDocumentView.js

任意のサイトコレクションおよびサイトから、ドキュメントを集約、プレビューをタイル上に表示するプリセットWebパーツです。フォルダーはフォルダーとして表示されるため、ドキュメントの階層情報を損なうことなく、集約表示することが可能となっております。
 例えば、人事部、経理部、情報システム部のサイトコレクションのドキュメントライブラリのコンテンツを、全社ポータルのサイトコレクションに集約して表示することが可能です。

sc1

パンくずリストが表示されるため、フォルダー間の移動も素早く行えます。

sc1

上記の例を用いて、Webパーツの追加から順に設定方法をご紹介します。
①Webパーツの追加

sc1

②設定をクリック

sc1

③アドバンスドモードをクリック

sc1

④Webパーツの設定
 データソースプロバイダー設定:「Object Model ロールアップエンジンプロバイダー」
 ディスプレイプロバイダー設定:「JSON ディスプレイプロバイダー」

sc1

sc1

⑤データソースの設定
 ロールアップソース :「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
 リストタイプ: 「ドキュメントライブラリ」

sc1

⑥表示の設定
 JavaScriptファイルの選択:「LightningToolsDocumentView.js」

sc1

※この時点で、下記の画像のようなドキュメントビューが利用できます。

sc1

ただし、「ドキュメントライブラリ」として、サイトコレクションごとのノートブックも表示されるため、フィルターの設定を行います。

⑦列
 フィルター設定(名前)
 フィルター設定(種類)
フィルターマークをクリック

sc1

フィルター条件として、[名前]が「チームサイト のノートブック」に等しくない、を設定

sc1

[種類]についても同様に、以下のフィルター条件を指定。

sc1

3つのサイトコレクションのドキュメントライブラリから、ドキュメントを集約表示するビューの設定は以上となります。

プリセットWebパーツ:LightningToolsCalendar.js

任意のサイトコレクションおよびサイトから、イベント、タスクを集約、カレンダー上に表示するプリセットWebパーツです。文字色、背景色などの書式設定も利用できるため、サイトコレクションごとの色分けや、イベント、タスクなどのアイテムの種類による斜体、下線などの文字飾りの使い分けが可能となっております。
 例えば、人事部、経理部、情報システム部のサイトコレクションのイベント、タスクのコンテンツを、全社ポータルのサイトコレクションに集約して表示することが可能です。

sc1

上述のドキュメントビューの設定と重複する手順は省略し、以下に設定方法をご紹介します。

①Webパーツの追加 ~ ④Webパーツの設定は、ドキュメントビューと同様となります。

⑤データソースの設定 
 ロールアップソース :「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
 リストタイプ :「タスク」、「予定表」を選択
 列ソース:任意の「タスク」、「予定表」を選択

sc1

⑥列の設定

 後述のサイトコレクションごとの色分けの書式設定のために、[親リストタイトル]を選択

sc1

⑦表示の設定
 JavaScriptファイルの選択:「LightningToolsCalender.js」
 条件付き書式設定: サイトコレクションごとの色分け、リストの種類ごとのフォントの使い分けを設定

条件付き書式のアイコンをクリック

sc1

条件として、
[親リストタイトル]が「schedule_HR」(人事部サイトコレクションの予定表)に等しい
を設定

sc1

書式として、
背景色(Back Color)、太字(Bold)を設定
背景色の設定は下記の画像の通り、直感的な操作によって、行えます。

sc1

人事部、経理部、情報システム部の3つのサイトコレクション、タスク、予定表の2つのリストの組み合わせた、合計6種類の親リストタイトルごとに、書式設定をする。

sc1

3つのサイトコレクションの予定表、タスクから、1つのカレンダーに集約表示するビューの設定は以上となります。

プリセットWebパーツ:LightningTools Announcements

任意のサイトコレクションおよびサイトから、お知らせリストのアイテムを集約、見やすいデザインに整えて表示するプリセットWebパーツです。Lightning Conduntorにおける計算列を活用することで、今月、来月、前月などのアイテムだけに絞り込んだ表示も可能となります。
 例えば、人事部、経理部、情報システム部のサイトコレクションのお知らせリストのアイテムで今月に登録されたもののみを集約して全社ポータルのサイトコレクションに表示することが可能です。

sc1

上述のドキュメントビューの設定と重複する手順は省略し、以下に設定方法をご紹介します。

①Webパーツの追加 ~ ③アドバンスドモードをクリック は、ドキュメントビューと同様となります。

④Webパーツの設定
 データソースプロバイダー設定:「Object Model ロールアップエンジンプロバイダー」
 ディスプレイプロバイダー設定:「JSON ディスプレイプロバイダー」

sc1

⑤データソースの設定
 ロールアップソース :「複数のサイトコレクションのアイテムを表示」→対象のサイトコレクションを選択
 リストタイプ :「お知らせ」を選択
 列ソース:任意の「お知らせ」を選択

sc1

⑥列の設定
現在日時の月とアイテムの有効期限の月が等しい場合“ON”、等しくない場合”OFF”とする計算列[今月]を追加
[今月]列が”ON”であるアイテムのみ表示するフィルターを設定
計算列の追加をクリック

sc1

任意の列名(今月)を設定
下記の数式を設定
※記事の末尾に補足説明を記載しております。

[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"

sc1

追加した[今月]の列のフィルターマークをクリック

sc1

フィルター条件として”ON”に等しいを設定

sc1

⑦表示の設定
 XSL スタイルを選択:「LightningTools Announcements」

sc1

3つのサイトコレクションのお知らせから、有効期限が今月であるものに絞った表示するビューの設定は以上となります。

-----------------------------------------------------------------------------------------
有効期限が今月のアイテムを表示するフィルターに用いた数式についての補足説明を以下に記載します。

[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"

[Expires].getMonth()+1
[有効期限]の列から月を0から11の整数で取得(getMonth())し、1を足すことで“今月”としています。有効期限が9月の場合、
[Expires].getMonth()+1 → 8+1 → 9
となります。

Date().substring(4,7)
Date()によって現在の日時の文字列を取得、substring(4,7)により4文字目から7文字目である今月の文字列のみとしています。9月に閲覧した場合、
Date().substring(4,7)
→ “Mon Sep 28 2020 13:12:16 GMT+0900 (日本標準時)”.substring(4,7)
→ “Sep”
となります。

(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)
[‘Jan’,’Feb’, ... ,’Nov’,’Dec’].indexOf(Date().substring(4,7))によって月を0から11の整数で取得し、1を足すことで“今月”としています。
9月に閲覧した場合、
(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)
→(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(“Sep”)+1)
→8+1 → 9
となります。

(条件式)?(真の場合):(偽の場合)が利用できるため、全体として
[Expires].getMonth()+1 ==(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+1)?"ON":"OFF"
は、
有効期限の月 == 現在日時の月“ON”:”OFF”
となり、アイテムの有効期限が今月ならば”ON”、そうでないならば“OFF”
という計算となります。

有効期限が前月のアイテムを表示するフィルターに用いる数式
前月が、0から11となるため、数値そのものではなく、12で割った余りが等しくなるかを条件式に設定しています。

([Expires].getMonth()+1)%12== (['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))%12?"ON":"OFF"

有効期限が翌月のアイテムを表示するフィルターに用いる数式
翌月が、2から13となるため、数値そのものではなく、12で割った余りが等しくなるかを条件式に設定しています。

([Expires].getMonth()+1)%12== (['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'].indexOf(Date().substring(4,7))+2)%12?"ON":"OFF"
---------------------------------------------------------------------------------------

いかがでしたでしょうか。インフォシェア株式会社では様々な業務のシーンでのお客様の「困った」を解消するお手伝いができるよう優れた海外製品の日本語化や、各種サービスの提供をしております。是非、「お問い合わせ」から、ご連絡ご相談ください。

Lightning Conductor SPFx の活用例 「支社掲示板」

2020年06月11日(木)

 今回の記事では、Lightning Conductor SPFxの活用例をご紹介いたします。
Lightning Conductor SPFxはSharePoint Onlineの サイトコレクションを横断して、分散された情報を集約するビューを実現できます。さらに、ビューの作成は、設定ウィザードに沿ってノンコーディングで簡単に行うことができます。
以下に、東京本社、北海道支社、大阪支社の3つの地域拠点ごとのサイトコレクションのお知らせリストからコンテンツを集約する「支社掲示板」を例に、複数のサイトコレクションに点在するコンテンツを集約するためのビューの設定例をご紹介します。

「支社掲示板」に限らず、基本的にビューの設定は、データ設定ウィザードの沿った、①データソース、②列、③表示の3つのステップとなります。

ステップ①:データソース

どこにあるコンテンツを集約するかの設定となります。
今回の支社掲示板のデータソースの設定内容を言葉で表しますと、「東京本社、大阪支社、北海道支社のサイトコレクションのトップサイトにあるお知らせリストからアイテムを集約する」ものです
まずは、SharePoint Onlineのどこからアイテムを集約するのかを設定するロールアップソースでは、「複数のサイトコレクションのアイテムを表示」を選択します。

すると、テナント内のすべてのサイトコレクションが表示されますので、集約したい情報のあるサイトコレクションを選択します。

目的のサイトコレクションを絞り込むために、サイトコレクションURLなどでフィルタを適用することが可能です。今回は、3つのサイトコレクションに共通して含まれるURL(LCSPFx)でフィルタを適用します。

サイトコレクションURLによって絞り込まれた候補の中から、東京本社、大阪支社、北海道支社のサイトコレクションを選択します。

なお、サイトコレクションの選択のバリエーションとして、以下の3つがあります。
サイトコレクションのトップサイトからアイテムを集約

サイトコレクションのサブサイトからアイテムを集約

サイトコレクション全体からアイテムを集約

今回は、各地域拠点のサイトコレクションのトップサイトにあるお知らせリストにあるアイテムを集約するため、サイトコレクションのトップサイトを指定しています。最後に、リストタイプに“お知らせ”を設定します。※選択肢に“お知らせ”が表示されない場合、更新ボタンをクリックし、ロールアップソースの設定を反映させてください。

ステップ2:列

集約したアイテムの列に関する設定となります。
今回の支社掲示板の列の設定内容を言葉で表しますと、「どの列を読み込むか、どの順番で表示するかを決めるとともに、列の値を利用して表示するアイテムの絞り込みと並び替えを行う」ものです。
まずは、データソースから集約したアイテムについて、読み込む列を選択します。

列を表示する順番の変更は、ドラック&ドロップで直感的に行えます。

次に、列の値を利用して、表示するアイテムの絞り込むフィルタを設定します。
有効期限について、期限内だけのアイテムだけに絞り込むために、以下のフィルタを設定します。

さらに、お知らせリストにおいて、[トップサイトに掲載]の列が“はい”のアイテムのみに絞り込んで表示するため、以下のフィルタを設定します。

最後に、[重要度]の列の値が、“高”、“中”、“低”の順番にアイテムが並び替えるための、計算列を追加作成します。
列名、列の型に適当なものを設定します。
数式では、読み込んでいる列をドロップダウンで選択し、挿入できます。[重要度]を挿入したものが、
[_91cd_x8981_x5ea6]と列の内部名によって表示されております。
下記の数式では、[重要度]の列に対して、“低”を“1”に、“中”を”2”に、“高”を”3”に、置き換えています。
(他の関数につきましては、英語となりますが、こちらのマニュアルをご参照ください。)

これによって、[重要度]の “高”、“中”、“低”のそれぞれを“3”、“2”、“1”に置き換えた[ソート]の列が作成されます。
この[ソート]に対して降順で、アイテムを表示することで、[重要度]によるアイテムの並び替えが設定できます。
支社掲示板においては、[ソート]の降順を優先順位1、[有効期限]の昇順を優先順位2とすることで、重要度が高く、有効期限が短いアイテムを順番に表示しています。

ステップ3:表示

集約したアイテムの列の表示の設定となります。
今回の支社掲示板の列の設定内容を言葉で表しますと、「どの列を表示するかの選択と、列ごとのデザインを行う」ものです。
表示の設定画面は以下のようになります。

エイリアス:表示される列名を変更可能。[親リストタイトル]を[カテゴリ]に変更。
:任意の数値を設定
表示:表示する列に✔
書式設定:色、位置、フォント、アイコン、データバーについて条件付き書式の設定が可能

設定が、どのように表示に反映されているかの確認のため、支社掲示板を再掲します。

書式設定は、列ごとの編集となりますのでそれぞれご紹介します。

■ [支社名]の書式設定
どの地域拠点のお知らせアイテムであるかを示す支社名列には、色、フォント、アイコンの3つを設定しています。

色:文字の色(前景色)を白、文字の背景色を灰色に設定しています。

フォント:ボールド

アイコン:地図上で場所を示すアイコン(Searchでの設定名:POIsolid)

■ [親リストタイトル]の書式設定
カテゴリ列(親リストタイトル列)は、お知らせリストのタイトルに条件を設定し、色分けをしています。
①どの列が、②どのような関係で、③どのような値に、あてはまるかの条件ごとに色を設定していくのみですので、③以外はマウス操作のみで行えます。

■ [タイトル]の書式設定
タイトル列は、前述の[支社名]、[親リストタイトル]の内容の重複となりますが、”重要度”が”高”の条件にあてはまるアイテムだけにアイコンを設定しています。
ただし、条件付き書式の候補となる列は、ステップ2:列で✔を入れた列となりますので、最終的に非表示とする列も、条件付き書式で利用したい列に関しては、ステップ2:列で✔を入れる必要があります。

東京本社、北海道支社、大阪支社の3つの地域拠点ごとのサイトコレクションのお知らせリストからコンテンツを集約する「支社掲示板」の設定は以上となります。

冒頭の繰り返しとなりますが、Lightning Conductor SPFxはSharePoint Onlineのサイトコレクションを横断して、分散された情報を集約するビューを実現し、さらに、ビューの作成は、設定ウィザードに沿ってノンコーディングで簡単に行うことができます。

いかがでしたでしょうか。インフォシェア株式会社では様々な業務のシーンでのお客様の「困った」を解消するお手伝いができるよう優れた海外製品の日本語化や、各種サービスの提供をしております。是非、「お問い合わせ」から、ご連絡ご相談ください。

[InfoCall] より高性能かつ高機能な Outlook アドインをリリースします

2020年05月07日(木)

こんにちは。
インフォシェア 製品開発部です。

InfoCallをご利用もしくは興味をもっていただいてありがとうございます。今回、InfoCall のオプション機能として、より高性能な Outlook アドインをリリースいたします。そのため、製品リリースに先駆けてブログ記事を掲載させていただきました。
InfoCall は、製品の標準機能としても、Outlook との連携機能を備えており、Web のアドレス帳からはもちろん、Outlook や Outlook on the webからも InfoCall の階層型アドレス帳を呼び出してご利用いただけます。
今回新たにリリースするオプション機能の Outlook アドインは、製品標準のものとは異なる実装方式を採用し、製品標準のものと比べより高機能で高速なものになっています。

□ 高速
本アドインは、Outlookクライアントのリボン上のボタンからアドレス帳のダイアログを直接呼び出す方式となり、製品標準アドインと比べて2倍程度高速です。(弊社環境における検証結果より)
製品標準のアドインは、アドレス帳を利用する際にメッセージ ウィンドウの右側にタスク ペインを開き、その後、ダイアログが起動するという挙動でした。これは、製品標準アドインの実装方式(Office アドイン形式)に由来する実装上の制限でしたが、そのためにアドインの読み込みや初期化、認証などの様々な処理のために、本来の性能を発揮できない場面がありました。
本アドインでは、VSTO アドイン形式を採用することで、直接 アドレス帳のダイアログを呼び出すことが可能となり、初期化処理がシンプルになった結果、高速に起動できるようになっています。

また、メッセージ ウィンドウにタスク ペインが開かないため、画面の構成もシンプルでわかりやすいものとなりました。

□ 高機能
製品標準アドインが備える機能に加え、新たに以下の機能を搭載します。(New!参照)

【主な機能】
・メールの作成時に InfoCall のアドレス帳から宛先の選択ができる
・予定の作成時に InfoCall のアドレス帳から宛先の選択ができる
・タスク依頼の作成時に InfoCall のアドレス帳から担当者(宛先)の選択ができる New!
・アドレス帳ダイアログの画面サイズを記憶/復元できる(前回利用したサイズで使える) New!
・利用端末ごとに利用可否を制御できる New!

高速でシンプルなことに加え、機能も拡張したことでより便利に快適にご利用いただけるようになりました。

※ 本アドインは、実装方式(VSTO アドイン形式)の制約のため、Outlook クライアントでのみ利用可能で、Outlook on the web ではご利用いただけません。
※ 本投稿の機能、画面イメージは開発中のもので、製品リリース時に変更となる場合があります。

以上、InfoCall の拡張機能 高性能な Outlook アドイン リリースのご紹介でした。
ご興味のある方は、ぜひ弊社営業までお問い合わせください。

昨今の情勢を受け、一部開発が予定通りに進捗していないものもございますが、年始の投稿でご案内させていただいたTeams対応 やスマートフォンへの対応も予定しており、製品開発を続けております。
InfoCall は今後も、Office 365全域で活用できるアドレス帳を目指して、より多くの場面、様々なシチュエーションで統一した階層型アドレス帳をご利用いただけるように拡張を続け、人と組織の課題を解決し業務・作業効率の改善を目指してまいります。