第 3 回 Japan M365 Dev User Group 勉強会でのLT資料です。 https://jpm365dev.connpass.com/event/207225/

1. SPS 開発から SPO 開発に
変わる際に気をつけなければ
ならないポイント 3 選
第 3 回
Japan M365 Dev User Group 勉強会
@mappie_kochi

2. 今回お話させていただく内容
⬡ SPS → SPO 開発で私が沼ったポイント
⬡ SPO でマスターページ編集は NG
⬡ Web パーツなくなった問題
⬡ リストの列名の⽂字数には注意
2
他にも沼ったポイントはありますが
特に印象に残っている 3 点を LT させていただきます

3. 1.
マスターページ編集は
NG
マスターページを編集できるのはSPSのみ

4. サイトのレイアウト（SPS）
⬡ サイトレイアウトにマスターページを利⽤
⬡ システム既定は seattle.master など
⬡ /_catalogs/masterpage 配下に配置
⬡ カスタムレイアウト
⬡ .master を作成して配置し設定
⬡ マスター内で aspx, html, css, js を指定可能
4

5. サイトのレイアウト（SPO）
⬡ サイトレイアウトにマスターページは利⽤不可
⬡ できないわけではないが MS ⾮推奨
⬡ SharePoint Framework をちゃんと使う
⬡ ポータルブランド化ガイダンスというものがある
⬡ https://docs.microsoft.com/ja-
jp/sharepoint/dev/solution-guidance/portal-branding
5

6. 6
https://docs.microsoft.com/ja-jp/sharepoint/dev/solution-guidance/portal-branding

7. サイトのレイアウトは SPFx でやる
⬡ SPFx で作成できるコンポーネント
⬡ Web パーツ
⬡ 拡張機能
⬡ ライブラリ
⬡ 拡張機能で作成しレイアウトを調整
⬡ フィールドカスタマイザー
⬡ css / js を SPFx で読み込み
7

8. 2.
Web パーツなくなった
問題
コンテンツ/スクリプトエディター Web パーツは
何処に︖

9. コンテンツエディター Web パーツ
⬡ 別途作成したページだったり css/js を読み込
ませることができる
9

10. SPOにはコンテンツエディターがない
⬡ M365 モダンページでは、以下は利⽤不可
⬡ コンテンツエディター Web パーツ
⬡ スクリプトエディター Web パーツ
⬡ 代替 Web パーツは提供されている（が…）
⬡ 埋め込み
⬡ マークダウン / テキスト
⬡ ボタン / アクション
⬡ 天気予報
⬡ ワールドクロック
10
※Microsoft Support
SharePoint のコンテンツエディター web パーツと
スクリプトエディター web パーツはどこにありますか?

11. 代替 Web パーツで対応不可の時
⬡ SharePoint Framework に移⾏
⬡ って⾔われても困る・・・
⬡ GitHub
⬡ 海外の有志が既に代替 Web パーツを公開︕
⬡ ⾞輪の再発明はしない︕
11

12. 12
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor

13. 3.
リストの列名の⽂字数
には注意
意外な場所に落とし⽳が存在していたりもする

14. 意外なところに落とし⽳が…
⬡ サイトのレイアウトも検討した
⬡ SPFx への移⾏なども検討した
⬡ Web パーツとかも⽤意した
⬡ さぁ、、SPS のデータ移⾏して動くか確認
⬡ と思って検証始めたらコードが動かない⁉
14

15. 列名がサイレント Trim される
⬡ SPO リストの内部列名
⬡ 最⼤⽂字数は 32 ⽂字
⬡ 新規作成画⾯では 33 ⽂字以上⼊⼒可
⬡ SPS だと内部列名は 33 ⽂字以上も指定は可
⬡ 同⼀リストを作ったつもりでも実は列名不⼀致
⬡ 既存コードの流⽤でも思わぬ落とし⽳が
15
そもそも「列名⻑過ぎ」
についてはご容赦ください。。

16. 16
おい・・・

17. まとめ
実装してわかったこと

18. SPS → SPO 開発に向けて
⬡ ばりばりカスタマイズの SPS 開発者
⬡ SPFx ちゃんと勉強しよう（新 Ver. も出たね）
⬡ ⼀部の Web パーツはモダンに存在しないので注意
⬡ ⾞輪の再発明は（もう）しない
⬡ リストの列名など、細かい部分にも注意
⬡ 意外なところに落とし⽳が存在していたりもする
⬡ 他にもレスポンシブ css 対応とかいろいろある
18

19. 19
Thanks!
Any questions?