皆さん、こんにちは！マイクです！今日は2025年9月13日、土曜日です！今日はZennでトレンドの記事をいくつか紹介していきますので、お楽しみに！
さて、前回紹介した記事についてですが、今回は特に触れません。さっそく今日の内容に移りましょう！
今日紹介する記事の本数は、なんと5本です！
まず最初の記事は、「nano-bananaでモバイルアプリUIモックアップを作る」です。この記事では、モバイルアプリ開発におけるUIデザインのアイデア出しをテーマに、Googleの画像生成AI「Gemini 2.5 Flash Image」、通称nano-bananaを活用したUIモックアップの作成方法について解説しています。著者はアプリ開発初心者で、モックアップ作成にさまざまな手法を検討した結果、nano-bananaを使用することに決定しました。
nano-bananaはプロンプトを入力することで高品質な画像を生成できるツールで、iOSアプリのユーザージャーニーを可視化するために4つのiPhone画面を横並びで配置する構造になっています。具体的にはアプリのコア機能やビジュアルテーマ、ターゲットオーディエンスを自由にカスタマイズ可能です。記事ではフィットネスアプリや料理レシピアプリ、財務管理アプリといった具体的なUIモックアップの例が紹介されていて、開発者は自身のアプリに適したデザインを簡単に生成できることが分かります。
著者は、nano-bananaを利用することで、プロンプトを工夫するだけで一定の品質の画像生成が可能で、アプリデザインのアイデア出しに役立つと強調しています。これにより、初学者でも手軽にモバイルアプリのUIを視覚化できる可能性が広がります。
。...。...
続いて紹介するのは、「あるべき場所に帰ろう！ReActに立ち返りClaude Code + Playwright MCP + Figma MCPでデザインを反映」です。この記事では、フロントエンドエンジニアのSatokoさんがFigmaのMCPサーバーを用いたデザインのコーディングプロセスを改善する方法について述べています。特にFigma MCPサーバーが生成するコードの品質に不満を持つ開発者に向けて、ReActというアプローチを提案しています。
ReActは思考と行動を交互に行う手法で、AIによる自動化の助けを借りることで、Figmaから生成されたCSSを高精度で実装することが可能です。具体的には、Figma MCPサーバーを利用してデザインデータを取得し、Claude CodeでHTMLファイルを作成、その後Playwrightを用いてE2Eテストを行う流れです。この記事では具体的なコード例やプロンプトの設定方法も示されており、読者が実際に試すことができるよう配慮されています。
結論として、Figmaのデザインを高い精度でウェブに反映させるためには、ReAct思考を取り入れ、AIの力を活用することで、エンジニアリングの効率とクオリティを向上させることができるというメッセージが強調されています。
。...。...
次は「ぞうのあしあと」を開発しました、という記事です。このサービスはファントフット株式会社が開発したもので、児童発達支援・放課後等デイサービスを探す保護者と福祉施設をマッチングするプラットフォームです。保護者が会員登録後、お子さんの情報を入力することで、条件に合った福祉施設からスカウトを受けることができます。この仕組みにより、複数の施設へ問い合わせる手間を省き、適切な施設を見つけやすくしています。
技術スタックにはフロントエンドにNext.js、バックエンドにTypeScriptとGoを使用し、インフラはGoogle Cloudを基盤としています。データはFirestoreに保存され、Cloud Runを利用してAPIや決済処理を行っています。また、決済はStripeを用いて、サブスクリプション形式での支払いが可能です。
開発では迅速なリリースと初期投資の抑制が重視され、Firestoreを採用することで初期コストの削減に成功しました。今後は福祉施設の業務自動化やデータ連携機能の追加を考えており、より便利なサービスを目指しています。
。...。...
次に紹介するのは、「SceneDelegate対応した手順や参考にした情報」です。WWDC25での発表により、iOS27からSceneDelegate対応が必須となります。特にUIKitを使用し、iOS13.0以降のアプリが対象です。移行手順としては、info.plistに設定を追加し、SceneDelegateを作成、AppDelegateからWindow関連のコードを移行する流れです。
info.plistの設定では、マルチウィンドウをサポートする場合は適切な設定が必要です。移行の際はAppDelegateのメソッドを確認し、SceneDelegateでのAPIにマッピングすることが大切です。特にUniversal LinksやPush通知の処理はSceneDelegateに移行する必要があり、注意が必要です。
この記事は、移行作業を行うエンジニアにとって役立つ参考資料として整理されています。
。...。...
最後、5つ目の記事は「tfaction を段階的に導入した」です。この記事では、Social PLUSのエンジニアがTerraformのCI/CDツール「tfaction」を段階的に導入した経緯とそのプロセスについて説明しています。tfactionはGitHub Actionsを基にしたCI/CDフレームワークで、特にローカルモジュールの変更を検知して自動化する機能が強みです。
導入の初期段階では、ローカルモジュールの変更を検知する「list-targets」アクションを導入し、次にtfactionのplanアクションを追加し、PRコメント機能を活用して変更内容を見やすくしました。その後、tfactionのtestアクションを導入し、自動化されたコード検証を行っています。
最終的にapplyアクションを追加し、terraform applyを安全に実行できるようにしました。このプロセスを通じて、tfactionの機能を活用しつつ、効率的なCI/CD体制を築くことができたと結論づけています。
それでは、今日の内容をおさらいしましょう！まずは「nano-bananaでモバイルアプリUIモックアップを作る」、次に「あるべき場所に帰ろう！ReActに立ち返りClaude Code + Playwright MCP + Figma MCPでデザインを反映」、「ぞうのあしあとを開発しました」、「SceneDelegate対応した手順や参考にした情報」、そして最後に「tfaction を段階的に導入した」でしたね。
次回も楽しみにしています！詳しい内容はショーノートに書いてありますので、ぜひチェックしてください。そして、番組の感想もお待ちしています！それでは、また次回お会いしましょう！