SharePointリストJSON書式設定サンプル集!すぐ使える実践例を徹底解説

SharePointリストのJSON書式設定とは?
JSON書式設定でできること
JSON書式設定の基本
1. 基本構造
2. よく使う特殊な値
列の書式設定の適用方法
実用的なJSONサンプル集
ビューの書式設定サンプル
Excel形式の式を使う
1. 基本的な違い
2. Excel形式の関数
よく使うプロパティと値
トラブルシューティング
便利なリソース
ベストプラクティス
よくある質問
まとめ

SharePointリストのJSON書式設定とは?

SharePointリストのJSON書式設定とは、JSON(JavaScript Object Notation)という形式でコードを書くことで、リストの見た目をカスタマイズする機能です。

標準のSharePointリストは、シンプルな表形式で表示されます。
しかし、JSON書式設定を使うと、色を変えたり、アイコンを追加したり、条件によって表示を切り替えたりできます。

重要なポイント:
JSON書式設定は表示だけを変更します。
リストのデータ自体は変わりません。
ユーザーに見せる表現方法だけをカスタマイズする機能です。

プログラミングの知識がなくても、サンプルをコピー&ペーストして少し編集するだけで使えます。

JSON書式設定でできること

SharePointのJSON書式設定には、3つの種類があります。

1. 列の書式設定(Column Formatting)

個々の列の表示方法をカスタマイズします。

できること:

文字の色や背景色を変更
アイコンを表示
条件によって表示を変更
ボタンを追加
画像を表示
プログレスバーを表示
ユーザーアイコンを表示

2. ビューの書式設定(View Formatting)

リスト全体の行の表示方法をカスタマイズします。

できること:

行全体の背景色を変更
カード形式で表示
グループヘッダーのカスタマイズ
グループの集計表示
複数行レイアウト

3. フォームの書式設定(Form Formatting)

アイテムの新規作成・編集フォームをカスタマイズします。

できること:

セクション分け
フィールドの表示・非表示
フィールドの色変更
カスタムヘッダー・フッター

JSON書式設定の基本

JSONの基本的な構造を理解しましょう。

基本構造

すべてのJSON書式設定は、以下の基本構造を持ちます。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField"
}

各要素の説明:

$schema:
スキーマのURLです。
これによって、SharePointはこれが列の書式設定であることを認識します。
常に最初の行に記述します。

elmType:
HTML要素のタイプを指定します。

div:汎用コンテナ
span:インラインテキスト
button:ボタン
a:リンク
img:画像
svg:ベクター画像

txtContent:
表示するテキストの内容です。
@currentFieldは、その列の現在の値を表します。

よく使う特殊な値

@currentField:
現在の列の値を取得します。

@me:
現在ログインしているユーザーの情報を取得します。

@now:
現在の日時を取得します。

@rowIndex:
行のインデックス番号を取得します(0から開始)。

[$列名]:
他の列の値を参照します。
例:[$Status]でStatus列の値を取得。

列の書式設定の適用方法

JSON書式設定を適用する手順を説明します。

手順1: 書式設定画面を開く

方法1:列ヘッダーから直接開く(推奨)

リストを開く
書式設定したい列のヘッダーをクリック
「列の設定」→「この列の書式設定」を選択

方法2:リストの設定から開く

リストを開く
歯車アイコン→「リストの設定」をクリック
書式設定したい列名をクリック
下にスクロールして「列の書式設定」セクションを見つける

手順2: 詳細モードを選択

書式設定パネルが開いたら、下部の「詳細モード」をクリックします。

手順3: JSONコードを入力

テキストボックスにJSONコードを貼り付けます。

手順4: プレビューと保存

「プレビュー」ボタンで結果を確認し、問題なければ「保存」をクリックします。

実用的なJSONサンプル集

すぐに使える実用的なサンプルを紹介します。

サンプル1: テキストを中央揃えにする

デフォルトでは左寄せのテキストを中央揃えにします。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "table",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "table-cell",
        "text-align": "center",
        "vertical-align": "middle"
      }
    }
  ]
}

使い方:
どの列タイプでも使用可能です。
txtContentの@currentFieldはそのまま使えます。

サンプル2: 文字サイズを大きくする

テキストのサイズを変更します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "sp-field-fontSizeLarge"
  }
}

サイズの種類:

sp-field-fontSizeSmall:小
sp-field-fontSizeMedium:中
sp-field-fontSizeLarge:大
sp-field-fontSizeXLarge:特大

サンプル3: 背景色を変更する

背景色をテーマカラーで設定します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "attributes": {
    "class": "ms-bgColor-themePrimary ms-fontColor-white"
  },
  "style": {
    "padding": "5px"
  }
}

よく使う背景色クラス:

ms-bgColor-themePrimary:プライマリテーマ色
ms-bgColor-green:緑
ms-bgColor-red:赤
ms-bgColor-yellow:黄色
ms-bgColor-neutralLighter:薄いグレー

テキスト色クラス:

ms-fontColor-white:白
ms-fontColor-themePrimary:プライマリテーマ色
ms-fontColor-black:黒

サンプル4: 条件付き書式(選択肢列)

選択肢列の値によって背景色を変更します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "padding": "5px",
    "border-radius": "5px",
    "text-align": "center",
    "color": "white",
    "background-color": "=if(@currentField == '完了', '#107c10', if(@currentField == '進行中', '#0078d4', if(@currentField == '未着手', '#797775', '#d13438')))"
  }
}

色の意味:

完了:緑(#107c10)
進行中:青(#0078d4)
未着手:グレー(#797775)
その他:赤(#d13438)

カスタマイズ方法:
‘完了’、’進行中’、’未着手’を自分の選択肢に変更してください。

サンプル5: アイコンを表示する

値に応じたアイコンを表示します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(@currentField == '高', 'Warning', if(@currentField == '中', 'Info', 'StatusCircleRing'))"
      },
      "style": {
        "padding-right": "5px",
        "color": "=if(@currentField == '高', '#d13438', if(@currentField == '中', '#ff8c00', '#107c10'))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

アイコン名の例:

CheckMark:チェックマーク
Cancel:×印
Warning:警告
Info:情報
Mail:メール
Calendar:カレンダー

Fluent UIのアイコン一覧で確認できます。

サンプル6: 数値にプログレスバーを追加

数値列をプログレスバーで表示します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "=@currentField + '%'",
        "height": "20px",
        "background-color": "=if(@currentField >= 80, '#107c10', if(@currentField >= 50, '#ff8c00', '#d13438'))",
        "display": "inline-block",
        "border-radius": "3px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=@currentField + '%'",
      "style": {
        "padding-left": "10px"
      }
    }
  ]
}

80%以上は緑、50%以上はオレンジ、それ以下は赤で表示されます。

サンプル7: 日付列に期限警告を追加

期限が近い、または過ぎた日付を赤く表示します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#d13438', '')",
    "font-weight": "=if([$DueDate] <= @now, 'bold', 'normal')"
  }
}

現在の日時を過ぎている場合、赤い太字で表示されます。

サンプル8: ユーザー列にアイコンを追加

ユーザー列にユーザーのプロフィール画像を表示します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "border-radius": "50%",
        "margin-right": "8px"
      },
      "attributes": {
        "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + @currentField.email"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField.title",
      "style": {
        "vertical-align": "middle"
      }
    }
  ]
}

円形のプロフィール画像とユーザー名が横に並んで表示されます。

サンプル9: ハイパーリンクを新しいタブで開く

ハイパーリンク列のリンクを新しいタブで開くように設定します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank",
    "class": "sp-field-fontSizeLarge"
  },
  "txtContent": "@currentField.desc",
  "style": {
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  }
}

@currentField.descでリンクの表示テキストを取得します。

サンプル10: ボタンを追加する

クリックするとアイテムを共有できるボタンを追加します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "共有",
  "attributes": {
    "class": "ms-bgColor-themePrimary ms-fontColor-white"
  },
  "style": {
    "border": "none",
    "padding": "5px 10px",
    "border-radius": "3px",
    "cursor": "pointer"
  },
  "customRowAction": {
    "action": "share"
  }
}

利用可能なアクション:

defaultClick:アイテムを開く
share:共有ダイアログを開く
delete:削除ダイアログを開く
editProps:プロパティ編集画面を開く

ビューの書式設定サンプル

リスト全体の表示をカスタマイズするサンプルです。

ビューの書式設定の適用方法

リストを開く
ビュー名の横にある▼をクリック
「現在のビューの書式設定」を選択
「リスト」を選択(レイアウトに応じて選択)
「詳細モード」をクリック
JSONコードを入力
「保存」をクリック

サンプル11: 行の背景色を交互に変更

偶数行と奇数行で背景色を変えます。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex % 2 == 0, 'ms-bgColor-neutralLighter', '')"
}

偶数行(0, 2, 4…)が薄いグレーになります。

サンプル12: 条件付き行の背景色

特定の条件で行全体の背景色を変更します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == '完了', 'ms-bgColor-greenLight', if([$Priority] == '高', 'ms-bgColor-redLight', ''))"
}

ステータスが「完了」なら薄い緑、優先度が「高」なら薄い赤になります。

サンプル13: カード形式で表示

リストをカード形式で表示します。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "padding": "15px",
      "margin": "10px",
      "border": "1px solid #ddd",
      "border-radius": "5px",
      "box-shadow": "0 2px 4px rgba(0,0,0,0.1)"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "[$Title]",
        "style": {
          "font-size": "18px",
          "font-weight": "bold",
          "margin-bottom": "10px"
        }
      },
      {
        "elmType": "div",
        "txtContent": "='ステータス: ' + [$Status]",
        "style": {
          "color": "#666"
        }
      },
      {
        "elmType": "div",
        "txtContent": "='期限: ' + [$DueDate]",
        "style": {
          "color": "#666"
        }
      }
    ]
  }
}

各アイテムがカード形式で表示されます。

Excel形式の式を使う

SharePointでは、Excel風の式も使えます。

基本的な違い

JSON構文:

"txtContent": {
  "operator": "?",
  "operands": [
    {"operator": "==", "operands": ["@currentField", "完了"]},
    "完了済み",
    "未完了"
  ]
}

Excel形式:

"txtContent": "=if(@currentField == '完了', '完了済み', '未完了')"

Excel形式の方が読みやすく、編集しやすいです。

Excel形式の関数

if関数:

"=if(条件, 真の場合, 偽の場合)"

例:

"=if(@currentField > 50, '合格', '不合格')"

演算子:

==:等しい
!=:等しくない
>:より大きい
<:より小さい
>=:以上
<=:以下
&&:かつ
||:または

文字列結合:

"=@currentField + 'さん'"

複数条件:

"=if(@currentField > 80, '優', if(@currentField > 60, '良', '可'))"

よく使うプロパティと値

人物列のプロパティ

人物列(@currentField)から取得できる情報:

@currentField.title:表示名
@currentField.email:メールアドレス
@currentField.picture:画像URL
@currentField.jobTitle:役職
@currentField.department:部署

日付の操作

現在日時:

@now

1日後:

@now + 86400000

(86400000ミリ秒 = 1日)

日付の比較:

"=if([$DueDate] <= @now, '期限切れ', '進行中')"

数値の計算

パーセント表示:

"=@currentField + '%'"

小数点以下切り捨て:

"=floor(@currentField)"

四捨五入:

"=round(@currentField)"

トラブルシューティング

エラーが表示される

エラー:「Invalid JSON」

JSONの構文エラーです。
以下を確認してください:

カンマ(,)が正しい位置にあるか
中括弧{}や角括弧[]が正しく閉じているか
文字列がダブルクォート””で囲まれているか

エラー:「プロパティが見つかりません」

列名のスペルミスや、存在しない列を参照しています。
[$列名]の列名が正確か確認してください。

表示が崩れる

問題:テキストがはみ出す

"style": {
  "overflow": "hidden",
  "text-overflow": "ellipsis",
  "white-space": "nowrap"
}

これで長いテキストは…で省略されます。

問題:縦に並ばない

childrenで複数要素を並べる場合:

"style": {
  "display": "flex",
  "align-items": "center"
}

条件が動作しない

問題:if文が常に同じ結果になる

文字列の比較では、シングルクォート’を使います。

正しい:

"=if(@currentField == '完了', ...)"

間違い:

"=if(@currentField == 完了, ...)"

便利なリソース

公式ドキュメント

列の書式設定リファレンス:
https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/column-formatting

書式構文リファレンス:
https://learn.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/formatting-syntax-reference

サンプル集

PnP List Formatting Samples:
https://pnp.github.io/List-Formatting/

GitHubで公開されている数百のサンプル集です。
カテゴリ別に整理されていて、コピー&ペーストで使えます。

GitHub リポジトリ:
https://github.com/pnp/List-Formatting

アイコン一覧

Fluent UI Icons:
https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

SharePointで使えるすべてのアイコンが確認できます。

カラーパレット

Fluent UI Theme Designer:
テーマカラーの確認に便利です。

一般的なカラーコード:

赤:#d13438
オレンジ:#ff8c00
黄色:#ffd100
緑:#107c10
青:#0078d4
紫:#5c2d91
グレー:#797775

ベストプラクティス

1. シンプルから始める

最初から複雑なJSONを書こうとせず、サンプルをコピーして少しずつ変更します。

2. プレビュー機能を活用

保存する前に必ずプレビューで確認します。

3. バックアップを取る

変更前のJSONをメモ帳などに保存しておきます。
元に戻したいときに便利です。

4. コメントを活用

JSONはコメントを書けませんが、別のドキュメントに説明を残しておきます。

5. 段階的にテスト

複雑なJSONは、一度にすべて書かず、段階的に追加してテストします。

6. ユーザーへの配慮

過度に派手な色使いは避け、見やすさを優先します。

7. パフォーマンスを考慮

大量のアイテムがあるリストでは、複雑なJSONは避けます。

よくある質問

Q1: JSONを書くためにプログラミング知識は必要ですか?

A: 基本的なサンプルをコピー&ペーストして使う場合は不要です。
ただし、HTMLとCSSの基礎知識があると、カスタマイズしやすくなります。

Q2: モバイルでもJSON書式は適用されますか?

A: はい、SharePointモバイルアプリでも同じ書式が適用されます。
ただし、画面サイズが小さいため、一部のデザインは調整が必要な場合があります。

Q3: 一度設定したJSON書式を削除できますか?

A: はい、書式設定画面でJSONをすべて削除して保存すれば、デフォルトに戻ります。

Q4: 複数の列に同じJSON書式を適用できますか?

A: 列ごとに個別に設定する必要があります。
ただし、同じJSONコードをコピー&ペーストすれば簡単です。

Q5: JSON書式でデータを変更できますか?

A: いいえ、JSON書式は表示のみを変更します。
データ自体を変更するには、Power Automateなどを使用します。

Q6: ビューごとに異なるJSON書式を設定できますか?

A: 列の書式設定はビューに関係なくすべてのビューに適用されます。
ビューごとに変えたい場合は、ビューの書式設定を使用します。

Q7: Excel形式とJSON構文のどちらを使うべきですか?

A: Excel形式の方が読みやすく編集しやすいため、基本的にExcel形式をお勧めします。
ただし、一部の高度な機能はJSON構文でしか使えません。

Q8: JSON書式設定のサイズ制限はありますか?

A: 特に明確な制限はありませんが、あまりに複雑なJSONはパフォーマンスに影響します。
数百行を超える場合は、シンプルにすることを検討してください。

まとめ

SharePointリストのJSON書式設定は、プログラミング知識がなくても使える強力なカスタマイズ機能です。

基本的な使い方:

サンプルをコピー&ペースト
列名や条件を自分のリストに合わせて変更
プレビューで確認
保存

3つの書式設定タイプ:

列の書式設定:個々の列の表示をカスタマイズ
ビューの書式設定:リスト全体の行をカスタマイズ
フォームの書式設定:入力フォームをカスタマイズ

よく使う機能:

条件付き書式(色やアイコンの変更)
プログレスバー表示
ユーザーアイコン表示
ボタンの追加
カード形式表示

PnP List Formatting SamplesのGitHubリポジトリには、数百のサンプルが公開されています。
カテゴリ別に整理されているので、目的に合ったサンプルを探してコピー&ペーストするだけで使えます。

最初はシンプルなサンプルから始めて、徐々に複雑なカスタマイズに挑戦していきましょう。
JSON書式設定をマスターすれば、SharePointリストをより使いやすく、視覚的に魅力的にできます。

SharePointリストのJSON書式設定とは?

JSON書式設定でできること

1. 列の書式設定(Column Formatting)

2. ビューの書式設定(View Formatting)

3. フォームの書式設定(Form Formatting)

JSON書式設定の基本

基本構造

よく使う特殊な値

列の書式設定の適用方法

手順1: 書式設定画面を開く

手順2: 詳細モードを選択

手順3: JSONコードを入力

手順4: プレビューと保存

実用的なJSONサンプル集

サンプル1: テキストを中央揃えにする

サンプル2: 文字サイズを大きくする

サンプル3: 背景色を変更する

サンプル4: 条件付き書式(選択肢列)

サンプル5: アイコンを表示する

サンプル6: 数値にプログレスバーを追加

サンプル7: 日付列に期限警告を追加

サンプル8: ユーザー列にアイコンを追加

サンプル9: ハイパーリンクを新しいタブで開く

サンプル10: ボタンを追加する

ビューの書式設定サンプル

ビューの書式設定の適用方法

サンプル11: 行の背景色を交互に変更

サンプル12: 条件付き行の背景色

サンプル13: カード形式で表示

Excel形式の式を使う

基本的な違い

Excel形式の関数

よく使うプロパティと値

人物列のプロパティ

日付の操作

数値の計算

トラブルシューティング

エラーが表示される

表示が崩れる

条件が動作しない

便利なリソース

公式ドキュメント

サンプル集

アイコン一覧

カラーパレット

ベストプラクティス

1. シンプルから始める

2. プレビュー機能を活用

3. バックアップを取る

4. コメントを活用

5. 段階的にテスト

6. ユーザーへの配慮

7. パフォーマンスを考慮

よくある質問

Q1: JSONを書くためにプログラミング知識は必要ですか?

Q2: モバイルでもJSON書式は適用されますか?

Q3: 一度設定したJSON書式を削除できますか?

Q4: 複数の列に同じJSON書式を適用できますか?

Q5: JSON書式でデータを変更できますか?

Q6: ビューごとに異なるJSON書式を設定できますか?

Q7: Excel形式とJSON構文のどちらを使うべきですか?

Q8: JSON書式設定のサイズ制限はありますか?

まとめ

Youtube

カテゴリー別人気記事

コメント