SharePoint 名前列をJSON列書式でカスタマイズしてフォルダーだけ新規タブ・ファイルは既定動作にする方法

SharePoint Online のドキュメントライブラリで、「名前」列のフォルダーだけを新規タブで開きつつ、ファイルはこれまで通りの既定動作を維持したい――そんなニッチだけど現場でよく出る要望を、列書式（JSON）でスマートに実現する方法を解説します。

SharePoint ドキュメントライブラリの「名前」列でやりたいこと

まず、今回実現したい挙動を整理しておきます。対象は、SharePoint Online（モダン UI）のドキュメントライブラリにある標準列「名前（Name）」です。

対象	表示形式	クリック時の動作
フォルダー	通常のハイパーリンク（<a>）	新規タブでフォルダーを開く（中クリック／Ctrl+クリックも可）
ファイル	見た目はテキストのみ	これまで通りの「既定クリック動作」（SharePoint の標準プレビューや Office Online など）

つまり、フォルダーだけ「普通のリンク」／ファイルは「普通の動き」を維持したい、という要件です。

ところが、名前列に JSON の列書式を設定すると、その行のレンダリングはカスタム JSON に完全に置き換わるため、「フォルダーだけカスタム、ファイルだけ既定レンダリング」というようには戻せません。この仕様を理解していないと、

フォルダーはうまく動くが、ファイルのリンクが出なくなる
ファイルのクリックで何も起こらない

といった状態に陥りがちです。

列書式（JSON）の基本仕様と限界

今回のポイントになるのが、列書式 JSON の「置き換え仕様」と「customRowAction」です。

列書式を適用した列は「完全にカスタム描画」される

SharePoint の列書式は、ターゲットとなる列のセルごとに「どんな HTML を描くか」を JSON で指示します。一度列書式を設定すると、

既定のアイコン＋テキスト表示は完全に上書きされる
条件付きで「既定レンダリングに戻す」ことはできない

という仕様になっています。よくある誤解として、

「if 条件が false のときは既定表示に戻ってくれるのでは？」

と思われがちですが、実際には JSON で指定しなかった表示は一切描画されません。そのため、「非フォルダーだけ既定レンダリングに戻す」ということは技術的に不可能です。

既定のクリック動作だけを呼び出す「customRowAction」

ただし、既定の「描画」は戻せなくても、既定のクリック動作は呼び出すことができます。それが次の指定です。

"customRowAction": {
  "action": "defaultClick"
}

これを指定すると、セルがクリックされたときに、標準 UI と同じ「開き方」を行単位で再現してくれます。つまり、

見た目（HTML）はカスタム
クリックしたときの挙動（ファイルをどう開くか）は既定

という構成にできるわけです。

この仕組みを利用して、

フォルダー：<a> 要素で新規タブを開く
ファイル：<div> などでテキストを表示し、クリック時に defaultClick を発火

という動作を組み合わせていきます。

フォルダー判定には ContentTypeId の先頭「0x0120」を使う

次に、「これはフォルダーか？」を判定する方法です。SharePoint ではアイテムの型を ContentTypeId で管理しており、フォルダーは次の特徴があります。

種類	ContentTypeId	判定方法
フォルダー	0x0120 で始まる	`startsWith([$ContentTypeId], '0x0120')`
ドキュメント（ファイル）	0x0101… など	上記以外
ドキュメントセット	フォルダー系の派生（同じく 0x0120 始まり）	同じ判定で「フォルダー扱い」にできる

列書式の条件式では、次のように書くのが一般的です。

startsWith([$ContentTypeId], '0x0120')

この条件が true なら「フォルダー系」、false なら「通常ファイル」とみなせます。ドキュメントセットもフォルダーのように開きたいケースが多いので、実運用に非常にマッチした判定方法です。

完成版 JSON：フォルダーは新規タブ、ファイルは既定動作

ここまでの考え方を踏まえた、そのまま「名前」列に貼り付けて使える JSON がこちらです。

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "style": {
        "display": "=if(startsWith([$ContentTypeId],'0x0120'), 'block', 'none')"
      },
      "attributes": {
        "target": "_blank",
        "href": "='AllItems.aspx?id=' + [$FileRef]"
      },
      "txtContent": "[$FileLeafRef]"
    },
    {
      "elmType": "div",
      "style": {
        "display": "=if(startsWith([$ContentTypeId],'0x0120'), 'none', 'block')"
      },
      "txtContent": "[$FileLeafRef]",
      "customRowAction": {
        "action": "defaultClick"
      }
    }
  ]
}

この JSON を「名前」列に設定すると、

フォルダー行：<a> 要素が表示され、クリック／中クリックでフォルダーを新規タブで開く
ファイル行：<div> が表示され、クリック時に defaultClick が働いて既定の開き方をする

という挙動になります。

JSON 各部分の詳細解説

ここからは、上記 JSON をパーツごとに分解して解説します。

全体のラッパー要素

"elmType": "div",
"children": [ ... ]

ひとつのセルの中に、

フォルダー用の <a>
ファイル用の <div>

を共存させるため、まずは親要素として <div> を配置し、その中に children で 2 つの子要素を定義しています。

フォルダー用 <a> 要素

{
  "elmType": "a",
  "style": {
    "display": "=if(startsWith([$ContentTypeId],'0x0120'), 'block', 'none')"
  },
  "attributes": {
    "target": "_blank",
    "href": "='AllItems.aspx?id=' + [$FileRef]"
  },
  "txtContent": "[$FileLeafRef]"
}

ポイントは次の通りです。

項目	役割
`elmType: "a"`	HTML の <a>（アンカー）として描画します。
`style.display`	`startsWith([$ContentTypeId],'0x0120')` が true のときは `block`（表示）、false のときは `none`（非表示）。 → フォルダー行だけリンクを表示します。
`attributes.target`	`_blank` にすることで、新規タブで開く挙動になります。
`attributes.href`	`AllItems.aspx?id=` + `[$FileRef]` による URL を構築。既定 UI の動きに近く、フォルダーの内容を表示する URL になります。
`txtContent`	`[$FileLeafRef]`（ファイル名／フォルダー名）をリンクテキストとして表示します。

display: block にしているのは、セル全体をクリックしやすくするためです。リンクの当たり判定が広がるので、地味にユーザビリティが向上します。

ファイル用 <div> と defaultClick

{
  "elmType": "div",
  "style": {
    "display": "=if(startsWith([$ContentTypeId],'0x0120'), 'none', 'block')"
  },
  "txtContent": "[$FileLeafRef]",
  "customRowAction": {
    "action": "defaultClick"
  }
}

こちらは フォルダーではない行（＝ファイル）だけ表示されるようにしています。

style.display でフォルダー行のときは none（非表示）、それ以外は block（表示）
txtContent にファイル名を表示
customRowAction.action に defaultClick を指定し、クリック時に既定の動作を発生させる

この defaultClick により、

Word ファイルなら Word Online で開く
PDF ならブラウザビューアで開く
ブラウザ／ライブラリ設定に応じた「標準の開き方」を維持

といった SharePoint 標準の体験が保たれます。見た目だけはカスタム（テキストのみ表示）ですが、裏側の動きは純正のままというのがポイントです。

実装手順：名前列に JSON を適用する

実際にライブラリへ適用する手順を具体的に見ていきましょう。

対象の SharePoint サイトを開きます。
目的のドキュメントライブラリ（例：ドキュメント、共有ドキュメントなど）を開きます。
ビュー右上の歯車（設定）アイコンから「ライブラリの設定」ではなく、列自体のメニューを使います。
- 「名前」列のヘッダー（列名）横の▼メニューを開く
- 「列の設定」 → 「この列の書式設定」をクリック
右側に開く「列の書式設定」ペインで「詳細モード」または「詳細書式」を選択します。
表示された JSON 編集エリアに、先ほどの JSON コードをすべて貼り付けます。
「保存」または「OK」をクリックして反映します。

この時点で、フォルダーの名前がリンクになって新規タブで開けるようになっているはずです。もしフォルダー名をクリックしてもページ遷移しない場合は、次の点を確認してください。

ビューの URL が AllItems.aspx 以外ではないか
ファイル／フォルダーが同じライブラリ内に存在しているか

ビュー URL が AllItems.aspx 以外の場合の修正

ライブラリのビューによっては、URL が AllItems.aspx ではないことがあります。

例：Documents.aspx
例：MyCustomView.aspx

その場合、href の部分を実際のビュー名に合わせて変更する必要があります。

"href": "='MyCustomView.aspx?id=' + [$FileRef]"

修正の手順は次の通りです。

ブラウザのアドレスバーで、現在開いているビューの URL を確認します。
- 例：https://contoso.sharepoint.com/sites/Team/Shared%20Documents/Forms/MyView.aspx
末尾の MyView.aspx の部分を覚えておき、JSON 内の AllItems.aspx と置き換えます。
列書式の編集画面で JSON を修正し、再保存します。

このように、ビューごとに URL が違うのが SharePoint の特徴なので、AllItems.aspx に固定すると意図通りに動かないケースがある点に注意してください。

defaultClick の挙動と限界

defaultClick は非常に便利なアクションですが、いくつかの制約があります。

ポイント	内容
対象は「通常クリック」	左クリック（単一クリック）の挙動を再現します。中クリックや右クリックを制御するものではありません。
新規タブを強制できない	`target="_blank"` のような制御は行えません。ブラウザの通常クリックの動作を再現するだけです。
既定動作を尊重する	ライブラリ設定やブラウザ設定に応じた「標準の開き方」をそのまま利用します。

つまり、ファイルを必ず新規タブで開きたいといった要件がある場合、

defaultClick ではなく、自前で <a href="[$FileRef]" target="_blank"> を使う

といった実装が必要になります。ただしその場合は、

Office Online のプレビューではなく、ブラウザがその拡張子をどう扱うかに依存する

など、ユーザー体験が SharePoint 既定と変わってしまう点に注意してください。

よくある疑問と注意点

非フォルダーだけ「完全に」既定表示に戻せないの？

残念ながら、列書式を使う以上「一部だけ既定レンダリングに戻す」ことはできません。列書式はセル内の HTML をフルカスタムする仕組みなので、

「条件に合うときだけカスタム」
「条件に合わないときは既定の描画を流用」

という切り替えは提供されていません。今回の解決策は、

見た目はカスタム（テキストだけ表示）
動きは既定（defaultClick）

の組み合わせで、可能な限り既定体験に近づけるというアプローチです。

フォルダーも同じタブで開きたい場合

「新規タブではなく、今のタブでフォルダーを開きたい」という場合は、単純に target="_blank" を外すだけで OK です。

"attributes": {
  "href": "='AllItems.aspx?id=' + [$FileRef]"
}

これで通常のリンク（同一タブでの遷移）になります。中クリックや Ctrl+クリックはブラウザ標準の挙動に任されるので、そのまま新規タブで開くこともできます。

アイコンも一緒に表示したい場合

シンプルにファイル名だけ表示するのではなく、

「フォルダー」や「ファイル」のアイコンを付けたい

という場合は、children を少し拡張して、span に attributes.iconName を付ける方法があります。

例えばフォルダー用リンクであれば、

{
  "elmType": "a",
  "style": {
    "display": "=if(startsWith([$ContentTypeId],'0x0120'), 'block', 'none')"
  },
  "attributes": {
    "target": "_blank",
    "href": "='AllItems.aspx?id=' + [$FileRef]"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Folder"
      },
      "style": {
        "margin-right": "4px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "[$FileLeafRef]"
    }
  ]
}

のようにすることで、フォルダーアイコン＋名前という形で表示させられます。高度なデザインの再現には限界がありますが、最低限の視認性向上には効果的です。

実運用でのチェックリスト

最後に、実際の運用で確認しておきたいポイントを一覧にまとめます。

チェック項目	内容
ビュー URL の確認	`AllItems.aspx` 以外の場合は、JSON の href も合わせて変更しているか。
別ビューとの整合性	ビューごとに列書式が独立しているため、必要なビューすべてに適用しているか。
権限	列書式の編集には適切な権限（デザイン以上など）があるか。
モバイル表示	スマートフォン表示でもクリックしやすいか（display: block の効果を確認）。
ドキュメントセット	ドキュメントセットもフォルダー同様に新規タブで開きたいかどうか。不要なら別の条件式を検討する。
ユーザーへの周知	「フォルダーは新規タブ」「ファイルは従来通り」の仕様をチーム内で共有しているか。

まとめ：列書式の制約を理解して「ほぼ既定」を再現する

今回のポイントを改めて整理すると、次の通りです。

列書式（JSON）を設定した列は、既定のレンダリングが完全に上書きされる
そのため、非フォルダーだけ「既定レンダリングそのもの」に戻すことはできない
ただし customRowAction: { "action": "defaultClick" } を使えば、既定のクリック動作だけを発火させられる
フォルダー判定には startsWith([$ContentTypeId], '0x0120') を使うのが実運用的にベスト
フォルダーは <a target=”_blank”> で新規タブ、ファイルは <div> + defaultClick で既定動作、という組み合わせで要件を満たせる

SharePoint の列書式は、一見シンプルな JSON に見えますが、

「既定レンダリングは上書きされる」
「動きだけ既定に寄せるなら customRowAction」

という基本ルールを押さえておくと、今回のような「フォルダーだけ挙動を変える」「アイテム種別ごとに見せ方を変える」といったニーズに、柔軟に対応できるようになります。

SharePoint ドキュメントライブラリのユーザビリティを少しでも上げたい場合、今回のような列書式カスタマイズはコストの割に効果が高いので、ぜひ検証環境で試してみてください。

この記事を書いた人

佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。

SharePoint 名前列をJSON列書式でカスタマイズしてフォルダーだけ新規タブ・ファイルは既定動作にする方法

SharePoint ドキュメントライブラリの「名前」列でやりたいこと

列書式（JSON）の基本仕様と限界

列書式を適用した列は「完全にカスタム描画」される

既定のクリック動作だけを呼び出す「customRowAction」

フォルダー判定には ContentTypeId の先頭「0x0120」を使う

完成版 JSON：フォルダーは新規タブ、ファイルは既定動作

JSON 各部分の詳細解説

全体のラッパー要素

フォルダー用 <a> 要素

ファイル用 <div> と defaultClick

実装手順：名前列に JSON を適用する

ビュー URL が AllItems.aspx 以外の場合の修正

defaultClick の挙動と限界

よくある疑問と注意点

非フォルダーだけ「完全に」既定表示に戻せないの？

フォルダーも同じタブで開きたい場合

アイコンも一緒に表示したい場合

実運用でのチェックリスト

まとめ：列書式の制約を理解して「ほぼ既定」を再現する

この記事を書いた人

コメント

コメントするコメントをキャンセル

SharePoint 名前列をJSON列書式でカスタマイズしてフォルダーだけ新規タブ・ファイルは既定動作にする方法

SharePoint ドキュメント ライブラリの「名前」列でやりたいこと

列書式（JSON）の基本仕様と限界

列書式を適用した列は「完全にカスタム描画」される

既定のクリック動作だけを呼び出す「customRowAction」

フォルダー判定には ContentTypeId の先頭「0x0120」を使う

完成版 JSON：フォルダーは新規タブ、ファイルは既定動作

JSON 各部分の詳細解説

全体のラッパー要素

フォルダー用 <a> 要素

ファイル用 <div> と defaultClick

実装手順：名前列に JSON を適用する

ビュー URL が AllItems.aspx 以外の場合の修正

defaultClick の挙動と限界

よくある疑問と注意点

非フォルダーだけ「完全に」既定表示に戻せないの？

フォルダーも同じタブで開きたい場合

アイコンも一緒に表示したい場合

実運用でのチェックリスト

まとめ：列書式の制約を理解して「ほぼ既定」を再現する

この記事を書いた人

関連記事

コメント

コメントする コメントをキャンセル

SharePoint ドキュメントライブラリの「名前」列でやりたいこと

コメントするコメントをキャンセル