Skip to content
BranchesTags

Repository files navigation

Power Apps Code Apps 開発テンプレート

Vite + TypeScript + React を使用した Power Apps コードアプリ開発用のモダンなスターターテンプレートです。

image

Microsoft Learn Catalog API データをサンプルとして活用し、ダッシュボード、フォーム、ギャラリー、フィルター、カード表示などの実装パターンを紹介します。

主な特徴

  • モダンなツール - Vite、TypeScript、React を採用
  • すぐに使えるスタイリング - Tailwind CSS、shadcn/ui コンポーネント、テーマ機能を標準装備
  • サンプル実装 - Learn API データを活用したギャラリー、フォーム、フィルター、カード表示の実装例
  • API 連携パターン - React Query を使用したデータフェッチとキャッシングの実装例
  • 標準パターン - 業界標準のパターンとベストプラクティス
  • AI エージェントフレンドリー - コーディングエージェントでの使用に最適化
  • 日本語UI - 日本語でのユーザーインターフェース
  • レスポンシブデザイン - モバイル対応のサイドバーナビゲーション
  • 使い方ガイド - GitHub Copilot との連携方法を含む詳細なガイド
ScreenRec_2025-11-17.06-13-37.mp4

サンプル実装

このテンプレートには、Microsoft Learn Catalog API を活用した以下のサンプル実装が含まれています:

🎨 ギャラリー&フィルター実装

  • 検索機能付きアイテムギャラリー
  • 複数条件フィルタリング (ロール、プロダクト、レベル)
  • ページネーション
  • レスポンシブグリッドレイアウト
image image

📝 フォーム実装

  • モーダルベースのフォーム
  • API データを活用した動的フォームフィールド
  • バリデーションとエラーハンドリング
image

📊 ダッシュボード実装

  • 統計カード表示
  • データの集計と可視化
  • カードベースのレイアウト
image

🎴 カード表示実装

  • Learn データを活用したカードコンポーネント
  • バッジとメタデータ表示
  • 外部リンク確認モーダル
image

🎯 タスク優先順位管理

ドラッグ&ドロップでタスクの並び順を変更できるインタラクティブなリスト

image

📋 カンバンボード

タスクをドラッグ&ドロップでステータス間を移動できるカンバンビュー

image

📅 ガントチャート

タスクをドラッグで移動、ハンドルで期間変更できるインタラクティブなガントチャート

image

クイックスタート

前提条件

  • Node.js (最新LTS版推奨)
  • Git
  • VS Code (推奨)
  • GitHub Copilot 拡張機能 (推奨)
  • GitHub Pro / Enterprise ライセンス
  • Power Apps Premium ライセンス

インストール

このリポジトリは Template repository です。clone ではなくテンプレートから自分のリポジトリを生成します。

# テンプレートから新しいテーマのリポジトリを生成して clone（private 推奨）
gh repo create <your-account>/<your-theme-repo> --template geekfujiwara/CodeAppsStarter --private --clone
cd <your-theme-repo>

リモートを作らずローカルだけで試す場合: npx degit geekfujiwara/CodeAppsStarter <フォルダ名>

# 依存関係をインストール + 開発標準（エージェント・スキル）を同期
npm install
npm run setup

npm run setup は CodeAppsDevelopmentStandard から .github/（GeekPowerCode エージェント・スキル一式。認証ヘルパー・日本語パッチ・地図 SVG 等のスキル所有アセットを含む）と scripts/（共通ツール）・.env.example をこのプロジェクトに同期し、続けて環境チェック（bootstrap）を実行します。

  • 標準の更新を取り込むときは npm run sync-standards を再実行します（テーマ固有のコードには触れません）
  • リファレンス実装サンプルは同期されません（必要なら node scripts/sync-standards.mjs --with-samples）
  • .power/ / src/generated/ / power.config.json は同期対象外です。pac code init / pac code add-data-source で Power Apps SDK に生成させてください
# 開発サーバーを起動
npm run dev

ブラウザで自動的に開かれるアプリの動作を確認してください。

ここまでできましたら起動された Code Apps Starter アプリ内のガイドのとおりに実行してください。

テンプレートの使い方

このテンプレートには、GitHub Copilot を活用した効率的な開発方法を説明する詳細なガイドページが含まれています。

アプリを起動後、「このテンプレートの使い方」ページにアクセスして、以下の情報を確認できます:

  1. 開発環境のセットアップ - 必要なツールとセットアップコマンド
  2. Power Apps へのデプロイ準備 - npx power-apps init コマンドの使い方
  3. 開発標準の活用方法 - GitHub Copilot との連携方法

詳細な開発標準については、CodeAppsDevelopmentStandard リポジトリを参照してください。

機能

実装済みの機能

  • サンプル実装 - Learn API を活用したギャラリー、フォーム、フィルター、カード表示の実装例
  • API 連携 - React Query を使用したデータフェッチとキャッシング
  • ダークモード対応 - システム設定に合わせた自動切り替え
  • レスポンシブデザイン - モバイル、タブレット、デスクトップに対応
  • サイドバーナビゲーション - コラップス可能なナビゲーション
  • リンク確認モーダル - 外部リンクを開く前の確認ダイアログ
  • 使い方ガイド - GitHub Copilot 連携ガイドとURL コピー機能
  • 日本語ローカライゼーション - 完全な日本語UI

ダッシュボード

  • 統計カードによるデータ可視化
  • 人気モジュールのハイライト表示
  • フォーム実装サンプル
  • カード表示サンプル

コントリビューション

プルリクエストを歓迎します！大きな変更の場合は、まずissueを開いて変更内容について議論してください。

ライセンス

MIT License

作成者

Geek Fujiwara

謝辞

このテンプレートは、Microsoft の Power Apps Code Apps プロジェクトをベースに、日本語環境と開発標準を統合したものです。

About

Power Apps Code Apps の開発を助けるテンプレート

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages