250920ビリビリ登壇大会＃5

AIのままにわがままに～僕はコパだけを使わない～ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

自己紹介プライベート(2児の父) みのる (@meccha__eeyan) / X POWER CLUB 部長 Qiita PowerAppsタグ年間4位資格取得 ⚫ 基本情報技術者試験 (2025年1月) ⚫ MCP PL900,100,300,500,200,600 ⚫ APPLIED SKILLS 会社(製造業の品質保証部) Power Platformの社内コミュニティ(約150名)運営 ⚫ Power Apps ⚫ Power AppsとDataverse ⚫ Power Automate ⚫ Copilot Studio 非IT部門で初の環境管理者権限 Dataverseアプリリリース Power Platformで初の外部伴走支援導入 POWER CLUB - connpass 2025年9月20日奇想天外ビリビリ☆Power Apps同好会 POWER APPSで市民開発したいけぇ#7

3.

普段会社ではCopilot一色(というか他NG) • Microsoft 365 Copilotの数々の恩恵 ✓ 各種オフィスツール付帯 ✓ リサーチツール ✓ DAX、Power Fx等のコーディングサポート ✓ Copilot Studio lite 宣言型エージェント • Copilot Studio カスタムエンジンエージェント 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

4.

早速タイトル回収コパ以外も使いたい！ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

5.

AI(LLM)とは 3Blue1BrownJapan - YouTube ニューラルネットワークの仕組み | Chapter 1, 深層学習(ディープラーニング) 深層学習の仕組み, 勾配降下 | Chapter 2, 深層学習(ディープラーニング) 誤差逆伝播法(バックプロパゲーション) | Chapter 3, ニューラルネットワークの仕組み誤差逆伝播と微積分 | Chapter 4, ニューラルネットワークの仕組み GPTとは何か Transformerの視覚化 | Chapter 5, Deep Learning GPT解説2 アテンションの仕組み (Attention, Transformer) | Chapter6, 深層学習 LLMはどう知識を記憶しているか | Chapter 7, 深層学習 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

6.

※ おススメあれば是非ご教授ください気になってるLLM関連ツールツール名主な用途特徴 - オープンソース - LLM(GPT, Claude, Gemini, Llama 等)を統合 Dify AIアプリ開発プラットフォーム - RAG対応(PDF, DB, Docs検索) - ノーコードでフローチャート的にAIワークフロー構築 - APIとして外部公開可能 - 300+サービス連携(Slack, Gmail, Notion, 等) - 条件分岐・ループなど柔軟な制御が可能 n8n ワークフロー自動化 - 自分のサーバーにデプロイ可能 - ブラウザ上で即コーディング可能 - 50+言語対応(Python, JS, Rust など) オンラインIDE Replit - AI補完(Replit Ghostwriter)で自動コード生成バイブコーディング - 即デプロイ・共同編集機能 - AIでWeb情報を要約・整理 Genspark AI知識検索 & 学習支援 - 複数の検索結果を一つに統合して解説 - 対話形式で深堀り学習が可能- 研究・学習用に特化 - Web検索 + LLMの統合 - 出典付きで回答を提示(引用が明示される) Perplexity AI検索エンジン - 「Copilot」機能でAIに深堀り調査依頼可能 - リアルタイム情報にも強い想定ユーザー/ユースケース - 内製でAIチャットボットや業務支援ツールを作りたい - ノーコードでRAGやエージェントを試したい - 自動化を安く柔軟にやりたい企業・個人 - AI処理を組み込んだ自動ワークフロー (例: 新着メール→要約→Slack送信) - プログラミング学習者 - 小規模Webアプリを素早く試作したい開発者 - AI支援付きのコード実験環境が欲しい人 - 調査・学習を効率化したい - 最新情報をAIでまとめて知りたい - 最新情報を正確に把握したい - 出典を確認しながら安心してAI検索したい乗るしかない、このBIG WAVEに。。。 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

7.

Power Appsは今後どうなっていくのか Generative page 2025年9月20日奇想天外ビリビリ☆Power Apps同好会 Code Apps ビリビリ☆POWER APPS 同好会登壇大会＃5

8.

自分は今後どうしたいのかバイク乗りたい健康になりたい業務部門として現場が楽に(楽しく)なるシステム作り小遣い増やしたい業務アプリはセキュリティとかガバナンス大事 AIがコード書いてくれても中身よくわからん・・・ IT部門は個別業務アプリの面倒あまりみてくれない・・・キャンプ行きたい週3でジム行きたい自然言語でAIファーストなシステム開発は今後も加速俺がやるしかないのか・・・キーボード欲しいマウス欲しい海外旅行行きたい AIを使いこなすためにもAI先生にプロ開発を学ぼう！そして、ソリューションアーキテクトの高みへ！ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

9.

3大AI先生に師事無料プラン基本情報技術者試験(FE)で基礎も勉強 ※来年度から応用情報技術者試験(AP)もCBT方式へ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

10.

Webシステムの3層モデルケースフロントエンドフルスタックバックエンドプレゼンテーション層アプリケーション層データ層クラシック業務アプリ JavaScript(jQuery) Java (Spring Framework) Oracle Database モダンWebアプリ React(SPA, TypeScript) Node.js(Express) MongoDB(NoSQL) マイクロソフト系 Blazor / ASP.NET Razor Pages ASP.NET Core API SQL Server / Azure SQL Python系データアプリ Vue.js Django / Flask(Python) PostgreSQL ローコード (Power Platform) Power Apps Power Automate Dataverse / SharePoint 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

11.

ようやく今回のお題 Power Apps で利用できるオリジナルのPCFコントロールのソリューションを出力する | ギークフジワラ https://www.geekfujiwara.com/tech/powerplatform/5509/ https://pcf.gallery/ 前提条件全部ゼロだけど、いってみよっ！ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

12.

できた！アプリリンク https://github.com/minoru365/QRCodeGeneratorMnr 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

13.

QRコード生成PCFをわざわざ作る理由 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

14.

AI先生にどうやって教わったか 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

15.

こうなりますよね、、、知識ゼロからPower AppsのPCF作ってみた (作ってもらった) #PowerApps - Qiita ツライ・・・ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

https://qiita.com/meccha__eeyan/items/f1df96dc2b65b44fab7a

16.

CLIすごい CLI：Command Line Interface 文字だけでコンピュータを操作する方法 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

17.

CLIの威力 Codex Claude Code Gemini CLI どれも素晴らしい・・・ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

18.

もっと素晴らしいのが・・・エージェントモードあるやん！ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

19.

PCFの開発環境 VS Code (IDE) 派生ツールも気になる・・・プログラムを書いたりファイル管理したりコマンド実行したり Node.js (JavaScript実行環境) npmというパッケージ管理ツールで依存関係管理ローカルテストサーバの実行 Power Platform Tools (VS Code拡張機能) ソリューション作成 Power Platform環境への発行 Visual Studio 2022（IDE）ソリューションインポートZipのビルド 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

20.

PCF開発の流れコード書く npmでビルドソリューションにビルド環境にインポート 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

21.

各ファイルの意味 2025年9月20日奇想天外ビリビリ☆Power Apps同好会ビリビリ☆POWER APPS 同好会登壇大会＃5

22.

[beta]

AI先生の教え
/// <reference types="powerapps-component-framework" />
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as QRCode from "qrcode";
// ECC (Error Correction Level): QR の誤り訂正レベルを表す型
// L: 約7%復元 / M: 約15%復元 / Q: 約25%復元 / H: 約30%復元
// 値を高くするほど汚れ・欠損に強いが、データ密度が上がりサイズや読み取りに影響
type ECC = "L" | "M" | "Q" | "H";
/**
* QRCodeGeneratorMnr コントロール本体。
* - 入力テキストから QR コードを生成し、`<img>` に表示します。
* - 生成した PNG の Data URL を出力プロパティ `qrDataUrl` として返します。
*/
export class QRCodeGeneratorMnr implements ComponentFramework.StandardControl<IInputs, IOutputs>
{
// コントロールのルート要素（この中に img やメッセージを描画）
private _container!: HTMLDivElement;
// Power Apps から渡される実行時コンテ キスト（プロパティ値取得などに使用）
private _context!: ComponentFramework.Context<IInputs>;
// 出力値が変わったことをホストに通知するコールバック（getOutputs が再評価される）
private _notifyOutputChanged!: () => void;
// 表示用の <img> 要素（QR の Data URL を src に設定）
private _img?: HTMLImageElement;
// 生成済みの PNG Data URL（出力プロパティとして返す値）
private _qrDataUrl: string = "";

/**
* コントロールのクリーンアップ（DOM から要素を取り外す）
*/
public destroy(): void {
if (this._img?.parentElement) this._img.parentElement.removeChild(this._img);
}
/**
* 画面描画ロジック：入力から QR を生成し、img に表示。qrDataUrl も更新。
*/
private render(): void {
// 入力値を取得（マニフェストで定義したプロパテ ィ）。未設定時は既定値を採用。
const text = this._context.parameters.textToEncode.raw ?? "";
const ecc = (this._context.parameters.errorCorrection?.raw as ECC) || "M";
const size = this._context.parameters.size?.raw ?? 256;
const margin = this._context.parameters.margin?.raw ?? 4;
const colorDark = this._context.parameters.foregroundColor?.raw || "#000000";
const colorLight = this._context.parameters.backgroundColor?.raw || "#ffffff";
// このコントロールは常に <img> で表示します（canvas は使用しません）
// 既存の子要素を一度クリア（再描画時に重複しないように）
while (this._container.firstChild) this._container.removeChild(this._container.firstChild);
// 入力テキストが空の場合は、プレースホルダーを表示して出力を空にする
if (!text) {
const placeholder = document.createElement("div");
placeholder.className = "qr-placeholder";
placeholder.textContent = "Enter text to generate QR";
this._container.appendChild(placeholder);
if (this._qrDataUrl !== "") {
this._qrDataUrl = "";
this._notifyOutputChanged();
}
return;
}

// constructor は空実装のため省略可（init 内で初期化を実施）
constructor() {}

/**
* コントロールの初期化（DOM のセットアップや初回描画）
*/
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
_state: ComponentFramework.Dictionary,
container: HTMLDivElement
): void {
this._context = context;
this._notifyOutputChanged = notifyOutputChanged;

// qrcode ライブラリに渡すオプション（誤り訂正、余白、色、サイズ）
const opts: any = {
errorCorrectionLevel: ecc,
margin,
color: { dark: colorDark, light: colorLight },
width: size,
};

// ルート要素を作成し、ホス トから渡されたコンテナにぶら下げる
this._container = document.createElement("div");
this._container.className = "QRCode.QRCodeGeneratorMnr";
container.appendChild(this._container);

// img 要素を生成してコンテナに追加。Data URL が生成されたら src に設定。
this._img = document.createElement("img");
this._img.alt = "QR Code";
this._container.appendChild(this._img);
QRCode.toDataURL(text, opts, (err, url) => {
if (err) return this.showError(err);
if (url) {
this._img!.src = url;
this._qrDataUrl = url;
// 出力変更を通知（ホストが getOutputs を再取得する）
this._notifyOutputChanged();
}
});

// 初回描画
this.render();
}
/**
* 入力プロパティ/サイズ/テーマの変化などで高頻度に呼ばれる。ここで再描画する。
*/
public updateView(context: ComponentFramework.Context<IInputs>): void {
this._context = context;
this.render();
}

2025年9月20日
奇想天外ビリビリ☆Power Apps同好会

/**
* 失敗時の簡易エラーレンダリング（画面にメッセージを表示）
*/
private showError(e: unknown) {
const msg = e instanceof Error ? e.message : String(e);
const err = document.createElement("div");
err.className = "qr-error";
err.textContent = `QR generation failed: ${msg}`;
this._container.appendChild(err);
}

}

ビリビリ☆POWER APPS 同好会 登壇大会＃5

/**
* ホストへ返す出力値（qrDataUrl）。notifyOutputChanged 後に呼ばれる 。
*/
public getOutputs(): IOutputs {
return {
qrDataUrl: this._qrDataUrl,
};
}
}
// PCF ライフサイクル（標準コントロール）概要
// - init(context, notifyOutputChanged, state, container):
//
初期化。DOM 構築やイベント購読などを行う（1度だけ）
// - updateView(context):
//
入力プロパティの変化、サイズ/テーマの変化などで高頻度に呼ばれる。画面更新はここで行う
// - notifyOutputChanged():
//
出力が変わったときにコール。直後にホストから getOutputs() が呼ばれ るトリガー
// - getOutputs():
//
現在の出力値を返す（副作用は持たせない）
// - destroy():
//
破棄時に呼ばれる 。タイマー/購読解除、DOM 片付けなど
//
// 本コントロールでは：
// - init でルートDOMを作成し render() を実行
// - updateView で context を更新して render() を再実行
// - QR の Data URL 生成時に notifyOutputChanged() → getOutputs() で qrDataUrl を返す
// - destroy で追加した要素を片付ける

23.

まとめ 2025年9月20日奇想天外ビリビリ☆Power Apps同好会やっぱりコパ！ビリビリ☆POWER APPS 同好会登壇大会＃5

24.

現場からは以上です。ご安全に。 2025年9月20日奇想天外ビリビリ☆Power Apps同好会 POWER APPSで市民開発したいけぇ#7

250920ビリビリ登壇大会＃5

みのる

関連スライド

250816気ままに勉強会LT

250316PBIL

250607JPAUGOSAKA_LT

250125JPPCC

241124JPAUG広島

Shoot&bloom

各ページのテキスト