SharePointのリストをJSONで書式設定する方法をお探しですね。

広告

SharePointのリストをもっと見やすく！JSONでカスタマイズする方法を初心者向けに解説

SharePointのリストってとても便利ですよね。

でも、デフォルトの見た目だと少し地味で、「どれが重要なの？」ってパッと見て分かりにくいことありませんか？実は、モダンUIでは「JSON」という仕組みを使って、リストの見た目を自由にカスタマイズできるんです。

色を付けたり、ボタンみたいにしたり、アイコンを追加したり…プログラミングの知識がなくても、基本を押さえればできちゃいます！この記事では、SharePointのリストをJSONで見やすくカスタマイズする方法を、できるだけ分かりやすく説明していきますね。

SharePointのリストをJSONでカスタマイズするって、どういうこと？

SharePointのリストをカスタマイズする方法には、大きく分けて2つあります。

1つ目は「列の書式設定」で、これは特定の項目（たとえば「ステータス」とか「期日」みたいな列）だけを見やすく装飾する方法です。

2つ目は「ビューの書式設定」で、こちらはリスト全体のレイアウトをガラッと変えたり、カード型の表示にしたりできます。

どちらも、設定画面から「JSON（ジェイソン）」っていうコードを入力することで実現できるんです。

JSONを使ったカスタマイズの一番のメリットは、**リストの中身のデータは一切触らずに、見た目だけを安全に変えられる**ことです。

難しいプログラミングの知識がなくても、決まったルール（スキーマ）に沿って書くだけで、文字の色を変えたり、アイコンを追加したりできちゃいます。

しかも、リストを編集できる権限があれば誰でもカスタマイズできるので、チームみんなで使いやすいリストを作れるんです。

ただし、SharePointで使えるJSONには独自のルールがあって、普通のHTMLやCSSがすべて使えるわけじゃありません。

使えるタグ（div、span、aなど）や装飾（CSSプロパティ）には制限があります。

なので、「SharePointで使えるもの」の範囲を理解して、その中でデザインを組み立てていくのがコツなんです。

【基本編】JSONコードの仕組みを理解しよう

実際にSharePointに入力するJSONコードって、最初は難しそうに見えるかもしれません。

でも実は、いくつかの決まった部品を組み合わせているだけなんです。

Webサイトを作るときのHTMLとCSSの関係に似ているので、基本の構造さえ分かれば意外と簡単ですよ。

ここでは、カスタマイズに必要な基本の部品を一つずつ見ていきましょう。

まず最初に覚えたいのが「**elmType（要素タイプ）**」です。

これは「どんな種類の部品を置くか」を決めるもので、HTMLのタグに相当します。

文字を表示するなら「span」や「div」、リンクを作るなら「a」、アイコンを表示するなら「button」といった感じです。

これを間違えると何も表示されないことがあるので、用途に合わせて正しく選ぶことが大切です。

次に大事なのが「**txtContent（テキスト内容）**」と「**style（スタイル）**」です。

txtContentには、画面に表示したい文字や、リストに入力されているデータ（たとえば `[$Title]` みたいな形で指定）を書きます。

そして、その文字や枠をどう装飾するかを決めるのがstyleです。

ここで文字の色（color）、太さ（font-weight）、背景色（background-color）、余白（padding）などを指定して、見た目を整えていきます。

もっと複雑なレイアウトを作りたいときは、「**attributes（属性）**」と「**children（子要素）**」を使います。

attributesでは、リンク先のURL（href）や、別タブで開く設定（target）、アイコンの名前（iconName）などを指定できます。

childrenは、1つの要素の中にさらに別の要素を入れたいとき（たとえば、divの中にアイコンと文字を並べるとか）に使います。

これらをマトリョーシカみたいに入れ子にしていくことで、かっこいいカスタマイズができるんです。

実際にやってみよう！条件によって色を変える設定

基本が分かったところで、実際によく使われる「条件付き書式」をやってみましょう。

たとえば、タスク管理のリストで「ステータスが『完了』なら青色、『進行中』なら黄色、『遅延』なら赤色」みたいに、入力された内容に応じて自動で色が変わる仕組みを作れます。

こうすると、重要な情報がパッと目に入って、見落としを防げるんです。

SharePointのJSONでは、ExcelのIF関数に似た書き方で条件を指定します。

たとえば、`”=if([$Status] == ‘完了’, ‘blue’, ‘red’)”` みたいに書くと、「Statusっていう列が『完了』だったら青色、そうじゃなかったら赤色」という意味になります。

この条件式を、さっき説明したstyleの「color」や「background-color」に組み込むと、データの状態に合わせてリアルタイムで色が変わるリストができあがります。

もっと実用的なテクニックとして、日付を基準にした条件付き書式もおすすめです。

SharePointには `@now` という「今の日時」を取得できる特別な値があって、これを使えば「期日が今日より前（過ぎてる）なら文字を太字にして赤くする」みたいなカスタマイズができます。

日付の計算は少し慣れが必要ですが、期限管理をきっちりやりたいプロジェクトではすごく便利ですよ。

設定画面へのアクセスはとっても簡単です。

リスト画面で、カスタマイズしたい列の見出しをクリックして、「列の設定」→「この列の書式設定」を選びます。

右側にパネルが出てきたら、下の方にある「詳細モード」をクリックすると、JSONコードを直接入力できる画面が開きます。

プレビュー機能もあるので、保存する前に実際の表示を確認しながら安心して作業できますよ。

つまずきやすいポイントと注意点

SharePointのリストをJSONでカスタマイズするとき、初心者がよくつまずくポイントがいくつかあります。

まず一番多いのが、「**カンマ（,）の付け忘れ、または余分なカンマ**」です。

JSONでは、項目と項目の間は必ずカンマで区切らないといけないんですが、最後の項目の後にはカンマを付けちゃダメなんです。

エディタで赤い波線が出たら、まずカッコの対応とカンマをチェックしてみてください。

次に気を付けたいのが、列を参照するときの「**内部名**」です。

JSON内で `[$FieldName]` みたいに列の値を呼び出すとき、画面に表示されている「表示名」じゃなくて、システム側で管理されている「内部名」を使わないといけません。

特に、列を作るときに日本語の名前を付けたり、スペースを入れたりすると、内部名が変な英数字の組み合わせ（`_x0020_` とか）になってることがあるので、うまく値が取れないときは内部名を確認してみましょう。

* **JSONカスタマイズのチェックリスト**
* 最後の要素の後ろに余計なカンマが付いてないか確認
* 列の参照には「表示名」じゃなくて「内部名」を使う
* 括弧 `{}` や `[]` がちゃんと閉じられているか確認
* SharePointで使えないHTMLタグやCSSが入ってないかチェック

あと、カスタマイズが反映される範囲についても知っておくと便利です。

JSONによる書式設定は、あくまで「そのビューを開いているブラウザ上」でのみ有効です。

なので、リストのデータをExcelにエクスポートしたり、Power Automateなどの外部ツールからデータを見たりするときは、装飾や追加したボタンは反映されず、普通のテキストデータだけが扱われます。

この特性を理解した上で、運用に合わせたカスタマイズをするのが、SharePointを上手に使うコツですよ。

広告