---
title: SharePointアプリの作り方（SPFxとAIで始めるMicrosoft 365アプリ開発）
tags: 
author: [ことりちゅん](https://www.docswell.com/user/KotorinChunChun)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LELMYY417R.jpg?width=480
description: 【第57回 Microsoft 365 勉強会】でお話しさせていただいた際の資料です。 SharePointの中でMarkdownをデータソースとして動くWikiを開発したので、そのときの知見を元にSPFxについて紹介します。 SpWikiの場所：https://github.com/KotorinChunChun/SpWiki/releases
published: September 19, 26
canonical: https://www.docswell.com/s/KotorinChunChun/K4NRRD-2026-09-19-195044
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LELMYY417R.jpg)

はじめに / SharePointアプリの作り方
SharePointアプリの作り方
SPFxとAIで始める
Microsoft 365アプリ開発
ことりちゅん
ことりちゅん | Microsoft365勉強会 | 2026.09.19
Created by Codex
01


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4JMYNNK5JW.jpg)

はじめに / SharePointアプリの作り方
自己紹介＆登壇経緯
普段の仕事
好きなもの
SPFxとの出会い
企業の情シス
Excel
Excel-Funのボイチャ
・問い合せ対応
Power Apps
AIとの相性を実感し
・自社のIT化
Notion
社内アプリ開発へ
・効率化ツール開発
Codex ← New
AIコーディングを使い始めて約半年。試行錯誤の体験を共有します。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
02


# Page. 3

![Page Image](https://bcdn.docswell.com/page/PJR9DDXZ79.jpg)

目次 / SharePointアプリの作り方
目次と時間配分
章
タイトル
冒頭 開始の挨拶
章
タイトル
5
作ったアプリをSharePointに入れるには
1
SharePointアプリの紹介
6
AIとアプリを作ってみよう
2
SPFxとは？
7
SPFxでアプリを開発して感じたこと
3
Power AppsとSPFxの主な違い
8
まず何から始めたらいいか
4
どのデータが扱えるか
まとめ 終了の挨拶
ことりちゅん | Microsoft365勉強会 | 2026.09.19
03


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PEXQ1161JX.jpg)

第1部 / SharePointアプリの紹介
Markdownファイルで執筆できる、SharePoint Wiki
ことりちゅん | Microsoft365勉強会 | 2026.09.19
05


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3EK9221MED.jpg)

第1部 / SharePointアプリの紹介
SharePointのMarkdown作成・編集・プレビュー
新規作成にmdが増えている！
ことりちゅん | Microsoft365勉強会 | 2026.09.19
06


# Page. 6

![Page Image](https://bcdn.docswell.com/page/L73W44Q275.jpg)

第1部 / SharePointアプリの紹介
ページ内のMarkdown Webパーツ
パーツにも増えているが、ドキュメントライブラリの .md とは繋がらない（今は）
ことりちゅん | Microsoft365勉強会 | 2026.09.19
07


# Page. 7

![Page Image](https://bcdn.docswell.com/page/87DKQQ96JG.jpg)

第1部 / SharePointアプリの紹介
Wikiの原稿は、ドキュメントライブラリへ
SpoWikiドキュメントライブラリに .md を保存し、カスタム列で分類タグを付ける。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
08


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VJPKLL9ZE8.jpg)

第1部 / SharePointアプリの紹介
ファイルツリー・タグ・リンクを、一つの画面に
ドキュメントライブラリのmdを読み込んでwikiとして表示
ことりちゅん | Microsoft365勉強会 | 2026.09.19
09


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2EVVQQMMEQ.jpg)

第1部 / SharePointアプリの紹介
AIへ、画面づくりから調査・修正まで依頼する
設計・画面
データ準備
調査・修正
日本語で作りたいものを伝
える
既存データソースを調査
エラーの原因を調べる
リスト・テストデータを準
備
実行結果から改善する
画面や処理を形にする
認証・アクセス権にはMicrosoft 365の仕組みを活用する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
10


# Page. 10

![Page Image](https://bcdn.docswell.com/page/57GLWWGXEL.jpg)

第2部 / SPFxとは
SPFx = SharePoint Framework
何を作る？
何で作る？
どう使う？
SharePointの中で動く
HTML・CSS・TypeScript
独自のアプリやWebパーツ
一般的なWeb技術
ビルドして .sppkg にまと
め
アプリカタログへ登録
公開サンプルの活用も可能。ビルドにはNode.jsなどの開発環境が必要。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
11


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4EQY33X5JP.jpg)

第2部 / SPFxとは
フルページ・Webパーツ・Teamsの3つの使い方
使いたい表示方法に合わせ、開発段階で対応を組み込む。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
12


# Page. 12

![Page Image](https://bcdn.docswell.com/page/KJ4W116V71.jpg)

第2部 / SPFxとは
フルページアプリも、SharePointのページとして管理
新しい .aspx ページを作る場合と、既存ページにWebパーツを置く場合。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
13


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LE1YGGV47G.jpg)

第2部 / SPFxとは
同じWebパーツを、設定を変えて使い回す
対象ライブラリ・タイトル・件数・絞り込み条件などを配置ごとに指定。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
14


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GEWGKKLZJ2.jpg)

第2部 / SPFxとは
Microsoft 365のサインインとサイト情報を活用する
01
既存のサインインを使う
利用者がログイン済みのSharePointの中でアプリを動かす
02
現在のサイト・利用者の情報を受け取る
SPFxが提供するコンテキストを利用する
03
登録したアプリをページに配置する
配置先やデータへの権限に従って利用する
ことりちゅん | Microsoft365勉強会 | 2026.09.19
15


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47ZLZZMLJ3.jpg)

第3部 / Power Appsとの違い
運用・展開に関する比較 1/2
比較項目
Power Apps（キャンバスアプリ）
SPFx（SharePoint Framework）
テナント管理者またはサイトカタログ管理者
開発者がアプリを保存・公開し、ユーザーや
利用者への公開方法
が .sppkgをアプリカタログに登録、
グループに共有
SharePointに配置する
テナント管理者または委任された担当者によ
るアプリの承認・配布が必要。SharePoint
外のデータアクセスはAPI権限の承認が必要
になることもある
管理者の関与
不要
利用者に必要な条件
アプリの共有、必要なサイト・データへのア 配置先のサイト・ページとデータへのアクセ
クセス権
ス権
原稿の前提：M365テナントの標準設定・標準ライセンスの範囲。実際の運用・契約は組織ごとに確認。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
16


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YJ6WZZNMJV.jpg)

第3部 / Power Appsとの違い
運用・展開に関する比較 2/2
比較項目
Power Apps（キャンバスアプリ）
SPFx（SharePoint Framework）
追加費用
不要（Premiumで機能追加あり）
不要
更新
アプリを修正して再公開（F5リロード）
コードを修正してビルド・アップロード（
F5リロード）
原稿の前提：M365テナントの標準設定・標準ライセンスの範囲。実際の運用・契約は組織ごとに確認。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
17


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GJ5MWW5QJ4.jpg)

第3部 / Power Appsとの違い
アプリの実行環境の比較
アプリを動かす場所
Power Apps
SPFx
Teamsアプリ〈タブに追加〉
○
○
Webアプリ〈ブラウザでフルページで利用〉
○
○
SharePointページ内のパーツ〈ほかのコンテンツと並
べて配置〉
○
○
インストールアプリ〈Storeから導入〉
○
無し
実行環境の比較は原稿に基づく。対応する配置方法は開発時に設定する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
18


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LE3W44NZE5.jpg)

第3部 / Power Appsとの違い
開発手順の比較 1/3
比較項目
Power Apps（キャンバスアプリ）
SPFx（SharePoint Framework）
プラットフォーム
Power Platform
M365 SharePoint / Teams
主な技術
Power Fxという数式言語、標準コントロー
ル、コネクタ。
HTML、CSS、TypeScriptなど。
開発環境
ブラウザ上のPower Apps Studioで開発する
Claude、Codex、VS Codeなどで開発する。
。
UI実装方法
GUI中心。画面に部品を配置し、プロパティ コーディング中心。画面・動作・データ処理
や数式で動作を設定する。
をコードで実装する。
原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
19


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8EDKQQW47G.jpg)

第3部 / Power Appsとの違い
開発手順の比較 2/3
比較項目
Power Apps（キャンバスアプリ）
SPFx（SharePoint Framework）
画面・操作の自由度
標準部品や数式で利用できる仕組みの範囲で 独自の画面・操作をコードで細かく実装でき
実装する。
る。
SharePointのデータ SharePointコネクタを使って読み書きする
。
連携
SharePoint REST APIなどを使って読み書き
する。
他のM365データ連
携
テナント管理者が承認したGraphAPIで読み
書きする。
コネクタで読み書きする。
外部サービスとの連
用意されたコネクタを使って接続する。
携
APIを呼び出すコードを実装する。
原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
20


# Page. 20

![Page Image](https://bcdn.docswell.com/page/V7PKLL9VJ8.jpg)

第3部 / Power Appsとの違い
開発手順の比較 3/3
比較項目
Power Apps（キャンバスアプリ）
SPFx（SharePoint Framework）
起動速度・応答性
起動時の数式、データ取得量、画面間の依存
件数が少ない時は高速だが、データ量によっ
関係などが影響する。重くなりすぎないよう
て処理の設計が重要となる。
な仕組みがある。
サーバー側に検索・処理を任せる「委任」が
APIへの検索条件やページ単位の取得をコー
大量データへの対応 重要となる。委任できないクエリには原則
ドで設計する。接続先APIの制約は受ける。
500件、設定で最大2,000件の制約がある。
AIを使った開発
Copilotに自然言語で相談したり式の作成を
依頼できる
コーディングエージェントに自然言語で指示
するとコーディングできる
原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
21


# Page. 21

![Page Image](https://bcdn.docswell.com/page/2JVVQQMRJQ.jpg)

第3部 / Power Appsとの違い
Power Apps：画面を見ながら、部品と数式を設定
GUIでコントロールを配置し、プロパティを編集する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
22


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5EGLWWG6JL.jpg)

第3部 / Power Appsとの違い
Power Apps：コネクタからデータソースへ接続
画面操作で接続を追加。周辺の調査・データ準備にはAIも活用できる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
23


# Page. 23

![Page Image](https://bcdn.docswell.com/page/4JQY33X27P.jpg)

第3部 / Power Appsとの違い
何を重視するかで、開発方法を選ぶ
Power Appsが有力
SPFxが有力
管理者によるSPFx登録が難しい
AIとコードで開発を進めたい
多くのデータ接続を利用したい
自由な画面・操作を作りたい
GUIで画面を作りたい
既存のWebライブラリを使いたい
SPFxでは、アプリの公開と利用するAPIの承認を開発前に相談する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
24


# Page. 24

![Page Image](https://bcdn.docswell.com/page/K74W116PE1.jpg)

第3部 / Power Appsとの違い
Code Appsも、別の選択肢として検討
コードで開発
管理者の設定
利用者の費用
コーディングエージェント
を
Power Platform環境で
実行する利用者の
有効化が必要
追加ライセンスも確認
活用できる選択肢
原稿では調査範囲の情報として紹介。利用者数を含めて条件を確認する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
25


# Page. 25

![Page Image](https://bcdn.docswell.com/page/LJ1YGGVXEG.jpg)

第4部 / データと接続
データへの接続は、3つの範囲で考える
SharePoint REST
Microsoft Graph
外部API
リスト・ライブラリ
ユーザー・組織・Teams
ファイル・フォルダー
Outlook・メール
社内システム・外部サービ
ス
サイト情報
カレンダー
認証やネットワークも
個別に検討
最初はSharePoint内で完結させ、必要に応じて広げる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
26


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJWGKKLK72.jpg)

第4部 / データと接続
アプリの許可と、利用者の権限が重なる範囲
アプリ側の権限
利用者自身の権限
利用するGraph機能に応じて
SharePointにサインインした
必要な権限を宣言し
利用者が持つアクセス権で
管理者へ承認を依頼
データへアクセス
通常のユーザー委任では、片方の権限だけで何でも取得できるわけではない。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
27


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EZLZZMN73.jpg)

第4部 / データと接続
APIは「このデータをください」と頼む窓口
01
まず、現在のサイトのファイル一覧を読む
SharePoint RESTで接続し、結果を確認する
02
AIには、APIの調査と接続コードを依頼する
取得対象・要求する権限・見せてよい情報は人が確認する
03
接続先が変われば、管理者への依頼も変わる
Graphや外部APIへ広げる前に、必要な条件を整理する
ことりちゅん | Microsoft365勉強会 | 2026.09.19
28


# Page. 28

![Page Image](https://bcdn.docswell.com/page/Y76WZZN97V.jpg)

第5部 / アプリの導入
アプリカタログへ登録して、SharePointで使う
本番用にまとめる
カタログへ登録
ページで使う
ビルド・パッケージ化で
テナント全体、または
展開設定に応じて
.sppkg を作成
サイトコレクションの
サイトへ追加し
アプリカタログ
Webパーツを配置
普通のドキュメントライブラリへ置くこととは役割が異なる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
29


# Page. 29

![Page Image](https://bcdn.docswell.com/page/G75MWW5D74.jpg)

第5部 / アプリの導入
① SharePoint管理センターからアプリを開く
「その他の機能」から、アプリの「開く」へ。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
30


# Page. 30

![Page Image](https://bcdn.docswell.com/page/9J29QQGMER.jpg)

第5部 / アプリの導入
② アプリカタログで .sppkg をアップロード
Uploadから登録。操作する担当者に必要な権限があるかを確認する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
31


# Page. 31

![Page Image](https://bcdn.docswell.com/page/DEY4WWVPJM.jpg)

第5部 / アプリの導入
③ 内容と展開設定を確認して、有効にする
ソリューション名・バージョン・配布範囲などを確認する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
32


# Page. 32

![Page Image](https://bcdn.docswell.com/page/VJNY99MM78.jpg)

第5部 / アプリの導入
④ Graph権限の要求がある場合
必要な権限と、その利用目的を事前に管理者へ伝える。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
33


# Page. 33

![Page Image](https://bcdn.docswell.com/page/YE9P22NWJ3.jpg)

第5部 / アプリの導入
⑤ APIアクセスのページで、要求を確認する
原稿では、要求を1件ずつ承認する操作を紹介している。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
34


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GE8D55KRED.jpg)

第5部 / アプリの導入
公開経路を、開発前に管理者へ相談する
01
登録できるアプリカタログはありますか
検証用サイトの運用や、サイト単位のカタログを確認する
02
確認・登録は、どなたへ依頼しますか
申請方法、テスト、担当部署、更新の流れを確認する
03
この目的で、このAPI権限を使いたいです
利用するデータと必要な権限を具体的に伝える
公開ルールと相談先は、会社によって異なる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
35


# Page. 35

![Page Image](https://bcdn.docswell.com/page/LELMYYZ27R.jpg)

第5部 / アプリの導入
設計 → 実装 → レビューを、AIと進める
01
高性能モデルで設計を相談
課題と目的を伝え、実装設計書・HTML・ER図・シーケンス図を確認
02
実装用のチャットへ設計を渡す
設計に沿った実装、ビルド、デバッグ、修正を依頼する
03
高性能モデルで厳しくレビュー
指摘を確認して修正し、実際の動作で確かめる
ことりちゅん | Microsoft365勉強会 | 2026.09.19
36


# Page. 36

![Page Image](https://bcdn.docswell.com/page/4JMYNNV9JW.jpg)

第6部 / AIとの開発実演
今回は、Web版AIからSPFx作成を試す
01
Web版AIでも、どこまでできるか試す
CopilotとChatGPTの事前試行を画面で紹介する
02
完成しない場合は、コーディングエージェントへ
Codex、Claude、VS CodeのGitHub Copilotなどへ引き継ぐ
03
全工程の実演ではなく、要所を見る
原稿では初回作成に約40分かかった試行を紹介する
以降は登壇者の試行記録。モデル名・表示・結果は取得当時のもの。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
37


# Page. 37

![Page Image](https://bcdn.docswell.com/page/PJR9DD2979.jpg)

第6部 / AIとの開発実演
依頼文：Markdownを読むSPFx Wikiを作る 1/3
SPFx開発のデモンストレーション用に、シェアポイントでマークダウンファイルを読み込んで
プレビュー表示する、簡易的なSPFxアプリを作りたいです。
パラメータにはドキュメントライブラリのパスを指定します。
画面の左2割には、ライブラリ以下のフォルダ・ファイル一覧をツリー表示してください。
画面の右8割には、ユーザーがファイル一覧から選択したマークダウンファイルの内容をレンダ
リング表示してください。
内容としては、上から順にファイル名、タグ、目次、本文、関連ページという順番のブロック単
位で表示してください。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
38


# Page. 38

![Page Image](https://bcdn.docswell.com/page/PEXQ11D3JX.jpg)

第6部 / AIとの開発実演
依頼文：Markdownを読むSPFx Wikiを作る 2/3
目次は、見出しから自動で生成して見出しへジャンプできるようにしてください。
タグは、そのドキュメントに付与された複数選択形式の「タグ」列のタグを横方向にカラフルな
バッジで表示してください。
関連ページは、開いている同じタグが付いたライブラリ内のファイル一覧を表示するようにして
ください。
右上に編集ボタンと保存ボタンを置いてください。
編集ボタンを押したらコードの編集画面が表示されてコードを編集でき、保存ボタンを押したら
変更内容を保存できるようにしてください。今回は競合検知は不要です。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
39


# Page. 39

![Page Image](https://bcdn.docswell.com/page/3EK922XNED.jpg)

第6部 / AIとの開発実演
依頼文：Markdownを読むSPFx Wikiを作る 3/3
相対パスの画像は、ライブラリ内の画像をプレビュー表示してください。
相対パスのリンクは、ライブラリ内の他のマークダウンファイルへハイパーリンクで飛べるよう
にしてください。
このようなプログラムをビルドして、src.zipとspfx-wiki-demo.sppkgの完成品をダウンロード
できる状態でください。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
40


# Page. 40

![Page Image](https://bcdn.docswell.com/page/L73W445Z75.jpg)

第6部 / AIとの開発実演
Copilot：自動モードでは作成を断られた例
最初に、完成品の
.sppkg を依頼。
モードによって応答が
変わった試行を紹介。
事前試行の画面。原稿ではThink Deeperへ切り替えて再試行。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
41


# Page. 41

![Page Image](https://bcdn.docswell.com/page/87DKQQD4JG.jpg)

第6部 / AIとの開発実演
同じ依頼を、ChatGPTとCopilotで試す
ChatGPTの試行画面
ことりちゅん | Microsoft365勉強会 | 2026.09.19
Copilotの試行画面
42


# Page. 42

![Page Image](https://bcdn.docswell.com/page/VJPKLLXVE8.jpg)

第6部 / AIとの開発実演
先にHTMLで、UIの完成イメージを確認する
まずは完成イメージを確認するために、HTMLファイルでデザインを一つ作ってください。
動作確認用のマークダウンファイルを3ファイル作成してください。 名前はindex.mdとhelp.md
とsample.mdとします。indexにはヘルプとサンプルへのリンクだけおいてください。 ヘルプに
は本ツールの概要を書いてください。 サンプルには本システムでサポートするマークダウンの
全記法を網羅したサンプルコードを書いてください。
また、イメージ確認用の画像ファイルimage.pngも作成してください。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
43


# Page. 43

![Page Image](https://bcdn.docswell.com/page/2EVVQQLREQ.jpg)

第6部 / AIとの開発実演
完成イメージとサンプルを渡して、実装を依頼
添付したhtmlがUIの完成イメージです。
そしてmdとpngがサンプルとして組み込んで欲しいデータです。
このようなプログラムをビルドして、src.zipとspfx-wiki-demo.sppkgの完成品をダウンロード
できる状態でください。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
44


# Page. 44

![Page Image](https://bcdn.docswell.com/page/57GLWWX6EL.jpg)

第6部 / AIとの開発実演
Copilot：コード実行まで進んだ工程
実行環境の確認や
コード作成が進行。
エラーと処理結果を
確認しながら進める。
原稿の事前試行を収録。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
45


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4EQY3382JP.jpg)

第6部 / AIとの開発実演
Copilot：エラーと、未完成の結果
タイムアウトが発生した画面
ことりちゅん | Microsoft365勉強会 | 2026.09.19
完成した .sppkg を提供できなかった画面
46


# Page. 46

![Page Image](https://bcdn.docswell.com/page/KJ4W112P71.jpg)

第6部 / AIとの開発実演
ChatGPT：作成が進んだ工程
設計とコード作成、
確認の工程が進行。
生成結果と実環境での
動作は分けて確認する。
事前試行の進行画面を収録。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
47


# Page. 47

![Page Image](https://bcdn.docswell.com/page/LE1YGGMX7G.jpg)

第6部 / AIとの開発実演
ChatGPT：成果物が返された画面
原稿では約42分で成果物を生成。npm接続不可により独自パッケージ化との説明。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
48


# Page. 48

![Page Image](https://bcdn.docswell.com/page/GEWGKK3KJ2.jpg)

第6部 / AIとの開発実演
ダウンロードした成果物を確認する
パッケージがあることと、SharePointで正しく動くことを確認する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
49


# Page. 49

![Page Image](https://bcdn.docswell.com/page/47ZLZZVNJ3.jpg)

第6部 / AIとの開発実演
別の進め方：既存のSPFxプロジェクトへ変換
このHTML画面を、既に用意してあるSPFxプロジェクトのWebパーツへ変換してください。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
50


# Page. 50

![Page Image](https://bcdn.docswell.com/page/YJ6WZZ59JV.jpg)

第6部 / AIとの開発実演
SharePointで、実データを使って確かめる
01
準備済みのWebパーツを開く
現在のサイトのライブラリからファイル一覧を表示する
02
ファイル名をクリックする
対象のファイルが正しく開くか確認する
03
小さな変更を追加依頼する
余白・更新日時・PDFへの絞り込みなどを試す
実演：ここでSharePointの画面へ切り替える。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
51


# Page. 51

![Page Image](https://bcdn.docswell.com/page/GJ5MWWYDJ4.jpg)

第6部 / AIとの開発実演
生成されたコードより、まず動作とデータを確認
01
何を読み、何を書き換えるか
利用者が変わった場合、権限や見える情報はどうなるか
02
データ同士の関係と、誤操作の影響
依存関係や、取り返しのつかない変更がないかを確認する
03
テストから本番公開まで確認する
ビルド → .sppkg → カタログ登録 → 実ページで検証
AIが実装しても、目的・データ・公開範囲は人が判断する。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
52


# Page. 52

![Page Image](https://bcdn.docswell.com/page/9E29QQYM7R.jpg)

第7部 / 制作事例とAI開発
制作事例：月間カレンダーとCopilot Chat
月間カレンダー
Copilot Chatアプリ
SharePointの予定を月表示
SharePoint上のチャット画面
色・配置・操作・絞り込みを
対話しながら文章を編集
目的に合わせて実装
原稿ではAPIベータ版を活用
実演：月間カレンダーとCopilot Chatアプリの画面へ切り替える。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
53


# Page. 53

![Page Image](https://bcdn.docswell.com/page/D7Y4WWGPEM.jpg)

第7部 / 制作事例とAI開発
画面・調査・データ・修正を、同じ会話で進める
画面を作る
周辺作業を進める
確認して直す
「月間カレンダーにして」
APIと実装方法を調査
実行結果を確かめる
「検索欄を追加して」
リストとテストデータを準
備
エラーを調査・修正
Power Appsでも、データ準備や調査などの周辺作業に活用できる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
54


# Page. 54

![Page Image](https://bcdn.docswell.com/page/VENY99GMJ8.jpg)

第7部 / 制作事例とAI開発
実演
sppkgをアップロード
Codexでビルド
Codexで修正
自社（個人）のテナントに
sppkgをアップロードしてみる
Codexにソースコードを取り
込んでビルドする
プログラムを修正してアップ
ロードする
Power Appsでも、データ準備や調査などの周辺作業に活用できる。
ことりちゅん | Microsoft365勉強会 | 2026.09.19
54


# Page. 55

![Page Image](https://bcdn.docswell.com/page/Y79P22WWE3.jpg)

第7部 / 制作事例とAI開発
開発速度が10倍以上になったと感じる
10倍以上
登壇者の体感
人の役割
何を作るか
どのデータ・権限を使うか
誰に公開するか
ことりちゅん | Microsoft365勉強会 | 2026.09.19
55


# Page. 56

![Page Image](https://bcdn.docswell.com/page/G78D55NR7D.jpg)

第8部 / 最初の一歩
会社導入におけるチェックポイント
01
公開・更新できるか、情報システム部門へ相談
登録の頻度、カタログ管理の委任、検証用サイトを確認する
02
まず .sppkg の公開を試す
Microsoft公式のアプリでもよいので、追加と動作の流れを体験する
03
AIと小さなWebパーツを作る
リストやファイル一覧から、開発・接続・公開まで経験する
ことりちゅん | Microsoft365勉強会 | 2026.09.19
56


# Page. 57

![Page Image](https://bcdn.docswell.com/page/L7LMYYP2JR.jpg)

第8部 / 最初の一歩
早めに知りたかったこと
01
SharePointリスト・ドキュメントライブラリの一覧を収集
AIが開発するために必要なコンテキストを揃える。フィールドの定義表
02
Entraアプリの登録に関する知識
Power Appsでは必要なかったGraphAPIを呼び出す知識が必要
03
ライブラリの種類とバージョン
Node.jsのバージョンが揃っていなくてビルドに失敗することが多かった
ことりちゅん | Microsoft365勉強会 | 2026.09.19
56


# Page. 58

![Page Image](https://bcdn.docswell.com/page/4EMYNN49EW.jpg)

第8部 / 最初の一歩
今日、覚えて帰っていただきたいこと
01
Microsoft 365には、SPFxという開発の選択肢がある
コーディングエージェントと組み合わせて、開発を効率化できる
02
管理者の許可と、公開経路を最初に確認する
作る前に、利用するデータと管理者対応を相談する
03
Power AppsとSPFxには、それぞれ向く用途がある
作りたいもの・接続先・許諾の可否に合わせて選ぶ
ことりちゅん | Microsoft365勉強会 | 2026.09.19
58


# Page. 59

![Page Image](https://bcdn.docswell.com/page/PER9DDW9J9.jpg)

第8部 / 最初の一歩
ご清聴ありがとうございました
ご質問をどうぞ
SpWikiのソースコードおよびダウンロード先
Releases · KotorinChunChun/SpWiki
ことりちゅん | Microsoft365勉強会 | 2026.09.19
59