Claude 3.7 Sonnetで作ったPower Apps 開発補助ツールでグローバルに反響がきた話

# はじめに
[Claude 3.7 Sonnet](https://www.anthropic.com/news/claude-3-7-sonnet)。本当に凄まじいですね。
Anthropic社が2025年2月25日に発表されてから、かなり使いまくっています。

https://www.anthropic.com/news/claude-3-7-sonnet

Claude 3.5 Sonnetでも凄まじすぎると感じていましたが、**「ハイブリッド推論モデル」と称される史上初の仕組みを備え、高度なレスポンスを提供してくださります。**

::: note info
AI関連に課金しすぎている反省もあり、Claudeのサブスクリプションを解約したばかりでしたが、「*Limited time offer: Switch to Claude Pro annual plan and save 25%* 」という2/27の急なDMから課金を余儀なくされました・・・。月額20$で凄まじい知性が使えるのであれば良しとするか・・・と一旦考えています。
:::

さてインターネットにありふれている*Claude 3.7 Sonnet*の紹介は、GPTのDeep Researchに任せるとして、今回使ってみた体験談を書いていきたいと思います、


# Claude 3.7 Sonnetの開発力
[前述の記事](https://www.anthropic.com/news/claude-3-7-sonnet)に下記の記載があります。

> We’ve developed Claude 3.7 Sonnet with a different philosophy from other reasoning models on the market. Just as humans use a single brain for both quick responses and deep reflection, we believe reasoning should be an integrated capability of frontier models rather than a separate model entirely. This unified approach also creates a more seamless experience for users.
> Claude 3.7 Sonnet embodies this philosophy in several ways. First, Claude 3.7 Sonnet is both an ordinary LLM and a reasoning model in one: you can pick when you want the model to answer normally and when you want it to think longer before answering. In the standard mode, Claude 3.7 Sonnet represents an upgraded version of Claude 3.5 Sonnet. In extended thinking mode, it self-reflects before answering, which improves its performance on math, physics, instruction-following, coding, and many other tasks. We generally find that prompting for the model works similarly in both modes.
> Second, when using Claude 3.7 Sonnet through the API, users can also control the budget for thinking: you can tell Claude to think for no more than N tokens, for any value of N up to its output limit of 128K tokens. This allows you to trade off speed (and cost) for quality of answer.
> Third, in developing our reasoning models, we’ve optimized somewhat less for math and computer science competition problems, and instead shifted focus towards real-world tasks that better reflect how businesses actually use LLMs.
> Early testing demonstrated Claude’s leadership in coding capabilities across the board: Cursor noted Claude is once again best-in-class for real-world coding tasks, with significant improvements in areas ranging from handling complex codebases to advanced tool use. Cognition found it far better than any other model at planning code changes and handling full-stack updates. Vercel highlighted Claude’s exceptional precision for complex agent workflows, while Replit has successfully deployed Claude to build sophisticated web apps and dashboards from scratch, where other models stall. In Canva’s evaluations, Claude consistently produced production-ready code with superior design taste and drastically reduced errors.
>> [Claude 3.7 Sonnet: Frontier reasoning made practical](https://www.anthropic.com/news/claude-3-7-sonnet)

**高度なコーディング機能である「Claude Code」によってソフトウェア開発支援体験について記載されています。**

プレビュー段階ですが、GitHubリポジトリをClaudeと接続し、プロジェクトを把握したうえでの作業も依頼できるため、プログラミング、ドキュメンテーションなど開発体験が大幅に変わることが期待できますね。

さてその機能がどういったものなのか、「*HTML*、*CSS*、*JavaScript*」も少ししか理解できていない私でもアプリが作れるのか、検証してみることにしました。

最初はハマりまくっているゲーム [Pokémon TCG Pocket](https://www.pokemontcgpocket.com/ja/)のレア度別カード希少性計算アプリの作成からです。

https://www.pokemontcgpocket.com/ja/

当ゲームは人生で初課金してしまうほどのめり込んでいます。

::: note info
3月27日(木)に新パック「シャイニングハイ」が登場するなど、もはや泥沼です。

:::

https://www.pokemontcgpocket.com/ja/news/27/

ゲームに登場するカードには、ダイヤ1〜クラウンまでの8種類のレア度が存在します。
[Game8](https://game8.jp/pokemon-tcg-pocket/650713)様の記事によると希少度合いは下記のようになっています。

■ 通常封入パック（99.950%）

| ランク   | 1〜3枚目   | 4枚目      | 5枚目      |
|---------|------------|------------|------------|
| ♦       | 100%       | 0%         | 0%         |
| ♦♦      | 0%         | 90%        | 60%        |
| ♦♦♦     | 0%         | 5%         | 20%        |
| ♦♦♦♦    | 0%         | 1.666%     | 6.664%     |
| ⭐       | 0%         | 0.2572%    | 10.288%    |
| ⭐⭐     | 0%         | 0.5%       | 2%         |
| ⭐⭐⭐    | 0%         | 0.222%     | 0.888%     |
| 👑      | 0%         | 0.04%      | 0.16%      |

■ レア封入パック（0.050%）

| ランク   | 1〜5枚目 |
|---------|----------|
| ⭐       | 40%      |
| ⭐⭐     | 50%      |
| ⭐⭐⭐    | 5%       |
| 👑      | 5%       |


::: note warn
最近ゲームをやっている感覚ですが、上記の情報から変動している可能性があります。
:::

数値的にはわかりますが、一体カードに置ける**希少度の偏差値**を表したらどうなるんでしょうかね。

*Claude*へ、*希少度に基づく偏差値*を聞いてみることにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/16a90e04-7e2a-4b90-b841-c6d96f4da90f.png)

| レア度   | 取得確率(%) | 偏差値  |
|:-------:|------------:|-------:|
| ♦       | 99.950      | 37.34  |
| ♦♦      | 95.952      | 37.55  |
| ♦♦♦     | 23.988      | 44.44  |
| ♦♦♦♦    | 8.216       | 49.76  |
| ⭐       | 12.636      | 47.62  |
| ⭐⭐     | 2.537       | 55.60  |
| ⭐⭐⭐    | 1.111       | 59.71  |
| 👑      | 0.211       | 67.98  |

:::note warn
筆者には数学的知識が薄く、二重チェックできる能力がないため、誤りがある場合はコメントでご指摘ください。
o3-mini-highと同様のプロンプトで試した結果を採用しています。
:::

へぇ～という印象です。
👑に至っては約475パックに1パックの割合で出現するんですね。
それは当たらないやとシュンとしてしまいます。

ここで自分の興味関心から、自分が持っているカードのコレクションを総合計するとどれくらいアカウントとして希少性を表せるだろうと考え始めました。

**どれだけレアカードもっていて私のアカウント凄いのか** 計算ですね。
今までは興味を持っても知識不足から手が出ませんでしたが、Claudeを使って計算機能を作ってみました.


## 計算式
カードのレアリティが⭐⭐、⭐⭐⭐、👑の枚数に応じて重みづけを行い、どれくらいのスコアができるか計算します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/583bd2b4-cfd0-4c31-bcb6-5cebdf7f8ebb.png)

```
総合スコア = Σ(各⭐⭐の累進重み) + Σ(各⭐⭐⭐の累進重み) + Σ(各👑の累進重み) 
           + ⭐⭐閾値ボーナス + ⭐⭐⭐閾値ボーナス + 👑閾値ボーナス 
           + コンボボーナス
```
上記の計算式を提案してもらい、アプリにしてみます。

# アプリの作り方
簡単にWebアプリケーションを展開する方法として、立場的に*Power Apps*を推したいところですが、今回はフルコードですのでデプロイの手軽さを加味し、**GitHub Pages**を採用しました。

ほかにも`Google Apps Script`や`Google Colab`という方法もありますが、結果の保存を要しないことと、サーバーレスで気軽に展開できることを考えると、最もマッチしているのは**GitHub Pages**です。

実際にコードの作成を依頼した成果物がコチラです。

### Card Rarity Calculator

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/bc7e9247-990b-4d4c-a4fe-bf0061e8b98e.png)

https://demodorigatsuo.github.io/card-rarity-calculator/

**一発でコチラが出来ました！！驚異的！！**

 - *index.html*
 - *styles.css*
 - *script.js*

上記をあっという間に作成してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/7e62ea6c-e017-471a-b363-b2c86cf8df6d.png)

`Card Count Input`へレア度に応じたカードの枚数を入力するとスコアが出ます。
私は👑を持っていません・・・。

**ちなみにこれは1時間もかかっていないです！！**

それであれば本格的に使いたいものを作ってみたくなり、**Power Appsの開発補助ツールの作成にチャレンジしてみました。**

# Power Apps Table Generator

最初は[Power Apps Table Generator](https://demodorigatsuo.github.io/power-apps-table-generator/)です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/4b46bb72-6083-4ced-8b97-f6a016ee03ce.png)

https://demodorigatsuo.github.io/power-apps-table-generator/

*Power Apps*において、テーブルの作成は個人的に課題を感じています。

ギャラリー コントロールは、テーブル形式にすることを目的としたコントロールではなく、無理にテーブル形式にコントロールを並べると、コントロール数がかさみます。

**またテーブル コントロールはプレビュー段階であり、実稼働には使えません。**

::: note
プレビューの機能を実稼働で使うとえらい目をみます（体験談）
テーブルにはやられた経験ありです
:::

開発において表形式のビューはニーズが依然として高いこともあり、ノーコードから外れた`HTML 文字列`を使った表作成を度々採用します。

メリットとしては下記のようなことが挙げられますね。
 - コントロール数をおさえられる
 - 罫線が綺麗に揃えられる
 - `OnSelect`イベントを使える
 - `Color`や`Fill`もGUIで制御できる

ギャラリー コントロールで`テキスト ラベル`のコントロールを並べて罫線ありの表にすると、レンダリングの際に不格好になったりするので、私の中ではこれ一択です。

ジェネレータではデザインに合わせて、`HTML 文字列`に設定する値を表示します。

完全な表は`Complete Table`のセクションで表示された値

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/d0d2dfa8-c717-4436-9c13-cac425c38798.png)

ヘッダーを独立した`HTML 文字列`で表し、行を`垂直ギャラリー`で表現する場合は
 - Header Row
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/60f15688-0523-4eb2-94ff-c1bc1558f4ec.png)

 - Data Rows
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/30129866-dc6e-46bd-82c4-f018ce436796.png)

上記のセクションの値をコピペするだけでテーブルにFitします。

**完全に俺得ツールです。**

中身の透明性を高めるために「*Style Properties Guide*」にそれぞれの*style*タグ内のプロパティの意味を載せています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/a8bf8200-edd8-476b-b11e-7448ba6d6d2a.png)


**ダブルクオーテーション表記はコードで制御されているため、基本的にコピペで機能します。**
モダン コントロールのテーブルコントロールがGAされた場合は、お役御免のツールですが、同様の開発の悩みに届いてほしい！と心から思います！

::: note info
グローバル🌎に展開することを見据えて、全てツールは英語で統一しました。
:::

# Essential JSON
次は[JSONの読み方をトレーニングするツール Essential JSON](https://demodorigatsuo.github.io/Essential-JSON/)です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/e4049fa6-15ee-49fe-a9a9-6d99f4cf85b8.png)

https://demodorigatsuo.github.io/Essential-JSON/

クイズモードでは、サンプルの`JSON`の値から、`Power Automate`で値を呼び出すときには、どのような書き方が正しいですか？というトレーニングをすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/68a96568-8310-495f-90e3-3b6a91d9c4a0.png)

市民開発者の開発Platform、Power Platformですが、やはり**JSONの理解がない状態で開発をしたり、活躍することは不可能です。**

自分自身、育成に携わったりする立場になることを見据えて、ツールを用いた解決を試みました。

また`実践モード`というモードでは、`JSON`を入力することで、データの構造が視覚的にどうやっているのか、図解する機能も持っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/608fdb19-7188-4855-bdff-f238770aaf7c.png)


# Power Apps Control Naming Tool
次に[Power Apps Control Naming Tool](https://demodorigatsuo.github.io/power-apps-rename-tool/)です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ea19ff3e-2046-4fb8-b0bb-72194e4c79a7.png)

https://demodorigatsuo.github.io/power-apps-rename-tool/

[Power Appsにおいても、変数およびコントロール名には命名規則がガイドラインで公開されています。](https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability)

持論ですが下記による命名は論外です。絶対にやめましょう。
 - 我流
 - 日本語

https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-readability

しかしながらコントロールを設定する際には、デフォルトでコントロール名が設定されており、リネームには手作業でかなりの手間を要することになります。

**実際に私はこの作業が大嫌いです。**

命名は`lblUserName`のように `lbl（ラベル コントロール）` 、 `UserName（値の意味）`命名されるべきです。

> キャンバス上のすべてのコントロール名にはキャメル ケースを使用する必要があります。 3 文字のタイプ記述子で始まり、その後に制御の目的が続きます。 
>> [コントロール名 - Microsoft learn](https://learn.microsoft.com/ja-jp/power-apps/guidance/coding-guidelines/code-readability)

幸いなことに、Power Apps Studioにおいて、[Code View is now Generally Available](https://www.microsoft.com/en-us/power-platform/blog/power-apps/code-view-is-now-generally-available/)が発表されたこともあり、コードのコピー & ペーストで値の置き換えを実践することができるようになりました。

https://www.microsoft.com/en-us/power-platform/blog/power-apps/code-view-is-now-generally-available/

今回は、フォーム コントロールに含まれる、[カード コントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/working-with-cards)の`DataField`プロパティを参照して、`3 文字のタイプ記述子で始まり、その後に制御の目的が続く`ガイドライン通りの命名に置き換えるリネームツールを作成しました。

https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/working-with-cards

こちらを[LinkedIn](https://www.linkedin.com/posts/shougossdr_power-apps-control-naming-tool-activity-7305897548206985217-JOOU?utm_source=share&utm_medium=member_desktop&rcm=ACoAACbSh6QB7nxt8Ra5ZPP94XHRh9JIjIYTSlM)で投稿したところ、**海外のPower Platformerから反響をいただきました!!!!**

**インプレッションの詳細はコチラ！初めてです！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/3417f7fd-f6a6-4067-abe8-921686dc16e1.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">海外の方からの反響大きく経験したことがないほどのインプレッションをいただきました。<br><br>Power Apps作成が快適になれば何より。感謝です。 <a href="https://t.co/m4N2dxoC4M">https://t.co/m4N2dxoC4M</a> <a href="https://t.co/7tXrAcamd2">pic.twitter.com/7tXrAcamd2</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1901231647321702752?ref_src=twsrc%5Etfw">March 16, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**つながり申請も止まらず衝撃的な体験でした。まさにバズです！**
 *Very handy !!* という嬉しいお声もいただき、とても嬉しかったですね。

# Power Apps Dependency Visualize
あとはPower AppsのYAMLソースコードから、コントロール間の依存関係を可視化するツールを作成しました。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">Claude 3.7 Sonnetが凄すぎて沼。<br>またPower Appsの開発お便利ツールを作りました。<br><br>コントロールの依存関係可視化ツールです。<br><br>海外に向けてバズります。<a href="https://t.co/D2Mp9LMKAe">https://t.co/D2Mp9LMKAe</a><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://twitter.com/hashtag/Claude37Sonnet?src=hash&amp;ref_src=twsrc%5Etfw">#Claude37Sonnet</a> <a href="https://t.co/cehFqLK96G">pic.twitter.com/cehFqLK96G</a></p>&mdash; 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) <a href="https://twitter.com/DemodoriGatsuo/status/1900480716527612250?ref_src=twsrc%5Etfw">March 14, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

https://demodorigatsuo.github.io/power-apps-dependency-visualizer/

YAMLを貼り付ければ、グラフィカルに関係を見ることが出来ます。
また表形式でも一覧化されるため、Power Appsの透明性に貢献していると思います。

一旦自分のアイディアであれば便利！というツールを用意してみましたが、荒いところがありますので、改善方法や`GitHub`の使い方のアドバイスがあれば是非教えてください。

# おわりに
こんなに簡単に自分でもWebアプリケーションを用意できるのか！と衝撃を受けました。特にコードの精度が非常に高く、最大でも半日以内には作成が完了する速度で自分がほしいものをデプロイすることが出来ます。

私のような事務職出身のものがコードに親和性を感じる素晴らしい機能であることは間違いないですね！

**是非皆様も「あれ🧐こんなものも作れるのでは❓」という物があれば試してみてください！**