技術情報ブログ
SharePoint
2023.05.25

JSONを活用すると、SharePointはこんなに拡張できるんです!(X-SP | SharePoint デザイン・機能拡張サービスのご紹介)

JSONを活用すると、SharePointはこんなに拡張できるんです!(X-SP | SharePoint デザイン・機能拡張サービスのご紹介)
小刀稱知哉

こんにちは。アーティサン株式会社の小刀稱(ことね)です。

池内佑哉

こんにちは。アーティサン株式会社の池内です。

SharePointをグループウェアとして活用している企業様は多いと思います。

弊社も従来から「SharePoint 移行・モダン化コンサルティングサービス」というサービスを提供しており、企業様のグループウェア構築や活用支援をさせていただいております。

弊社としては、SharePointでグループウェアを構築する際、SharePointが持つ強みを最大限に活かすため、
なるべく標準機能のみで対応することを推奨しております。

しかし、標準機能の範囲を越えた内容を要望されることが多いのも事実です。 特にデザイン面に関しては、標準範囲では対応できないことが多く、弊社でも対応に苦慮することが多いです。

そこで、弊社では新たにX-SP | SharePoint デザイン・機能拡張サービスを立ち上げました。

 

本サービスのコンセプトとしては、「SharePoint リストの書式設定で用いられる JSON を活用することで、標準機能を越えた機能を簡単に実装する」ことです。

弊社が現在まで培ってきた経験を活かし、グループウェア構築時、頻繁に要望される内容を JSON にて実装しております。
また、今回 SharePoint サイトのテンプレートとして準備いたしましたので、どの企業でも短期間で使用することが可能となっております。

今回は、本サービスが生まれるまでの背景やテンプレートとして提供する内容についてご紹介いたします。

 

SharePoint を用いたグループウェアでの構築について

SharePoint を用いるメリット・デメリット

SharePoint はローコードの一種であり、ページを作成する際には、標準の Web パーツを組み合わせて構築を行っていくことができます。
よって、以下のようなメリットがあります。

  • 開発のハードルが低い

    プログラミングの知識を持たない人でも、直感的な開発が可能です。

  • スピード感を持った構築が可能

    標準機能を組み合わせるため、プログラミングによる開発と比較し、短期間でグループウェアの構築が可能です。

  • 構築後のメンテナンスが簡単

    運用開始後の機能追加も、外部ベンダーに依頼することなく、自社内で簡単に対応可能です。

また、SharePointはMicrosoft 365で提供されているサービスの一種であるため、他のMicrosoft 365サービスとシームレスに連携できることもメリットとして挙げられます。

例えば、SharePointPower AutomateTeamsを連携させると「SharePointでニュースが投稿された際、Teamsに通知する」といった業務を容易に自動化することが可能です。

一方、標準機能を組み合わせて構築するため、標準機能の枠を越えることはできないことがデメリットとして挙げられます。
弊社も今までお客様のグループウェア構築をお手伝いさせていただいた中で、以下について要望されることが多かったです。

  • デザインをもっと柔軟に設定できるようにして欲しい

    標準機能ですと、背景色や文字色などは、テーマカラーの範囲内しか設定することができません。
    逆に言うと、テーマカラーが決まっているので、デザインの知識がない人でもトーン・マナーが統一されるという点は良いですが、「あるセクションごとに色を変えたい」という要望は意外と多く頂戴する内容です。

  • タブやポップアップ機能を使いたい

    グループウェアはその性質上、多くの掲載することになります。
    一方で、多くの情報を1ページ上で掲載すると、スクロールが多くなってしまうことや目的の情報に辿り着かないという問題点が発生してしまいがちです。
    (グループウェアを長期間運用している企業様は、上記の問題が発生していることも多いのではないでしょうか、、、)

    このような問題に対応するためには、タブ機能やポップアップ機能を用いて「多くの情報を整理した状態で表示する」ことが一般的かと思います。
    しかし、SharePointには現状そのような機能は実装されていません。(2023年6月時点)

 

今までの対応策(SharePoint Framework)

前述したデメリットへの対応策としては、SharePoint Framework(以下、SPFx)による開発を行うことが一般的です。

SharePoint Framework の概要

SPFxを用いると、Webパーツだけでなくページ全体の細やかなカスタマイズを行う事が可能です。
現在でも本手法は強力な解決策となりますが、こちらは本格的な開発となりますので、以下のような問題点があります。

  • 開発の環境構築が必要

    開発を行うためには、ローカルPC側で環境構築(npm・gulp・Yeomanなど)が必要となります。
    開発の経験がない方は、環境構築はハードルが高いのではないでしょうか。

  • プログラムの知識が必要

    TypeScriptやReactなどの言語を用いて開発を行うため、プログラムの知識が必要です。

  • 保守要因を確保する必要がある

    上記で説明した通り、プログラムによる開発が必要となりますので、グループウェアの管理者では対応できないことが多いのではないでしょうか。
    開発した内容に不具合が発生した場合や機能追加に備えて、保守要因を確保する必要があります。

 

JSONを用いた拡張

上記背景に対応するため、弊社では今回JSONを用いたデザイン拡張(X-SP | SharePoint デザイン・機能拡張サービス)を立ち上げました。

本サービスのコンセプトとしては、「SharePointリストの書式設定で用いられるJSONを活用することで、標準機能を越えた機能を簡単に実装する」ことです。

 

JSONを用いたSharePointリストの書式設定 とは

SharePointリストでは、列の書式設定をJSONを用いて拡張することができます。
(HTMLやCSSを上書きするイメージです。)

列の書式設定で SharePoint をカスタマイズする

JSONを用いることで、SharePointリストの標準機能では対応できない細やかな制御が可能となります。 (例:ステータス列が「重要」となってるデータ行を赤色の背景 + 文字のフォントを太字にする)

SharePointリストの標準機能では対応できない細やかな制御が可能
SharePoint をカスタマイズ

また、JSONはSharePointリスト上に直接記載することができるため、ローカルPC側の環境設定なども不要です。

ただし、以下を見ていただければ分かるとおり、HTMLやCSSなどの知識は必要となります。
従って、プログラムの知識がまったくない方がJSONを活用するということが少し難しいかもしれません。

ビューの書式設定
ビューの書式設定

そこで、今回はSharePointのグループウェアとして頻繁に要望される内容をJSONを用いてテンプレート化しました。

本テンプレートを使っていただくことで、どなたでも・すぐにSharePointのデザインや機能を拡張することができます。
詳細につきましては、弊社までお問い合わせいただければと思いますが、ここでは一部機能を紹介いたします。

 

テーマカラーに縛られない配色

以下のようにテーマカラーに縛られない配色が可能です。
セクションごとに配色を変更することが可能です。

SharePointリストのJSONでテーマカラーに縛られない配色が可能
テーマカラーに縛られない配色

 

タブ・ポップアップ機能

JSONを活用すると、なんとタブやポップアップ機能も実装できてしまいます!
こちらを用いると、多くの情報を整理した形で表示することが可能です。

SharePointリストのJSONでタブ機能
タブ機能
SharePointリストのJSONでポップアップ機能
ポップアップ機能

 

従来の手法との比較

従来までの手法と今回提案する手法について、以下まとめました。

 

標準機能のみ

SPFxによる開発

標準機能+JSON(新サービス)

デザインの自由度

設定できる項目が少ない

ほぼすべての事項についてカスタマイズ可能

HTML・CSSの範囲であればほぼすべての事項についてカスタマイズ可能

機能の拡張性

標準機能を越えた機能は対応不可

ほぼすべての事項についてカスタマイズ可能

HTML・CSSで実装できる範囲内でカスタマイズ可能

開発の難易度

ローコードであり、直感的に構築可能

開発環境構築や専門的な知識が必須

環境構築は不要だがHTML・CSSの知識が必要

保守性の高さ

自社内で保守可能

専門知識を持つ保守要因の確保が必要

HTML・CSSの知識を持った要因が必要

上記の表を見てもらえると分かるとおり、本サービスは従来の手法である標準機能のみSPFxによる開発の弱点を補っているという立ち位置になります。

もちろん標準機能で対応できる箇所については、これまで通りの対応を行うべきです。
また、JSONでは対応できない機能の実装が必須である場合は、SPFxによる開発も必要になります。

ただし、JSONで対応できる箇所が意外に多いということも事実です。
標準機能のみSharePointを構築しており、デザイン制限の多さに困っている方や、SPFxで開発したいけど、その後の運用管理面で懸念を抱えている方は第3の選択肢として、本サービスをご検討いただければと思います。

 

おわりに

今回は、弊社が新たに立ち上げた「X-SP | SharePoint デザイン・機能拡張サービス」をご紹介させていただきました。

もう少し詳細な話を聞きたい場合や、実際のテンプレートが見たいという方はぜひ弊社までお問い合わせいただければと思います。

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

Azure SQL DatabaseやPower AppsとSharePointなどの開発担当:池内佑哉

池内佑哉

IT2年生です。趣味は紅茶です。

シェアする
記事カテゴリ
最新記事
2023.11.15

【2023年11月更新】Power Apps の実践的なノウハウ まとめ

2023.11.01

Power Automate×SharePoint:SharePoint上からPower Automateを実行する方法

2023.10.18

SharePoint:新着からX日間書式設定を変更する方法

2023.10.04

【Power Automate】concat関数の文字数制限の境界値でエラーを発生させてみた

2023.09.20

【小ネタ】Power Apps:知らなきゃ損!? 便利なショートカットキーの紹介

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術ItDX情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行
PageTop
ページトップに戻る