LoginSignup
54
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@DEmodoriGatsuO(Gatsuo De'modori)

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

Posted at

はじめに

Claude 3.7 Sonnet。本当に凄まじいですね。
Anthropic社が2025年2月25日に発表されてから、かなり使いまくっています。

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

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の開発力

前述の記事に下記の記載があります。

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

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

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

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

最初はハマりまくっているゲーム Pokémon TCG Pocketのレア度別カード希少性計算アプリの作成からです。

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

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

ゲームに登場するカードには、ダイヤ1〜クラウンまでの8種類のレア度が存在します。
Game8様の記事によると希少度合いは下記のようになっています。

■ 通常封入パック（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%

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

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

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

image.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

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

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

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

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

計算式

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

image.png

総合スコア = Σ(各⭐⭐の累進重み) + Σ(各⭐⭐⭐の累進重み) + Σ(各👑の累進重み) 
           + ⭐⭐閾値ボーナス + ⭐⭐⭐閾値ボーナス + 👑閾値ボーナス 
           + コンボボーナス

上記の計算式を提案してもらい、アプリにしてみます。

アプリの作り方

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

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

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

Card Rarity Calculator

image.png

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

  • index.html
  • styles.css
  • script.js

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

image.png

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

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

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

Power Apps Table Generator

最初はPower Apps Table Generatorです。

image.png

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

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

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

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

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

メリットとしては下記のようなことが挙げられますね。

  • コントロール数をおさえられる
  • 罫線が綺麗に揃えられる
  • OnSelectイベントを使える
  • ColorやFillもGUIで制御できる

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

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

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

image.png

ヘッダーを独立したHTML 文字列で表し、行を垂直ギャラリーで表現する場合は

  • Header Row
    image.png

  • Data Rows
    image.png

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

完全に俺得ツールです。

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

image.png

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

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

Essential JSON

次はJSONの読み方をトレーニングするツール Essential JSONです。

image.png

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

image.png

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

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

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

image.png

Power Apps Control Naming Tool

次にPower Apps Control Naming Toolです。

image.png

Power Appsにおいても、変数およびコントロール名には命名規則がガイドラインで公開されています。

持論ですが下記による命名は論外です。絶対にやめましょう。

  • 我流
  • 日本語

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

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

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

キャンバス上のすべてのコントロール名にはキャメル ケースを使用する必要があります。 3 文字のタイプ記述子で始まり、その後に制御の目的が続きます。

コントロール名 - Microsoft learn

幸いなことに、Power Apps Studioにおいて、Code View is now Generally Availableが発表されたこともあり、コードのコピー & ペーストで値の置き換えを実践することができるようになりました。

今回は、フォーム コントロールに含まれる、カード コントロールのDataFieldプロパティを参照して、3 文字のタイプ記述子で始まり、その後に制御の目的が続くガイドライン通りの命名に置き換えるリネームツールを作成しました。

こちらをLinkedInで投稿したところ、海外のPower Platformerから反響をいただきました!!!!

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

image.png

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

Power Apps Dependency Visualize

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

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

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

おわりに

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

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

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

54
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
54
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?