おはようございます！「zenncast」の時間がやってまいりました。MCのマイクです。今日は2024年6月3日、月曜日。皆さん、週の始まりをどんな風に過ごしていますか？私は元気いっぱいです！さて、今日はZennでトレンドになっている記事をいくつかご紹介しますよ。
前回紹介した記事、覚えていますか？「Next.jsとPrismaをCloudflareにデプロイして月300万のDBクエリに無料で耐える」「社内ネットワークに制限した静的サイトホスティング環境をAmazon S3で構築する」「個人開発で月30万の売上を3ヶ月で達成！」など、かなり興味深い内容でしたね。
今日は全部で5つの記事をご紹介します。
まず1つ目の記事です。
タイトルは「PayPay Api使って爆速で支払いシステム作ってみた(Nextjs app router)」です。
この記事では、PayPay APIとNext.jsを使って支払いシステムを構築する方法が詳しく説明されています。最初にPayPay Developerに登録し、APIキーを取得するところから始まります。次に、JavaScriptのPayPay SDKとHTTPクライアントライブラリのaxiosをインストールし、環境変数ファイルにAPIキーやシークレット、加盟店IDを設定します。
APIの実装部分では、支払いURLを取得するエンドポイントと支払い状況を確認するエンドポイントを作成します。支払いURL取得のエンドポイントでは、支払いIDをUUIDで生成し、PayPay SDKを使ってQRコードを作成します。一方、支払い状況確認のエンドポイントでは、定期的に支払いステータスをチェックし、結果を返します。
フロントエンド部分では、Next.jsのページを作成し、ユーザーが金額を入力して支払いリンクを取得するページと、支払い状況を確認するページを実装します。これにより、ユーザーは簡単に支払いリンクを取得し、そのリンクで支払いの状況を確認することができます。
この記事はウェブアプリケーションに限定して実装されていますが、今後はiOSやAndroidなどのネイティブアプリでも同様の実装を行う予定とのことです。興味深いですね！
。。。。
次に、2つ目の記事です。
タイトルは「enableForestを使うことでReact Compilerでメモ化のレベルを変更できる」です。
`enableForest`はReact Compilerでメモ化のレベルを変更できるオプションで、Reactのコードのパフォーマンスを調整するために使用されます。`enableForest`を有効にすると、JSX要素のメモ化がほぼ行われなくなり、コンポーネントの再レンダリング時のパフォーマンスに影響を与えます。
具体的には、`memoizeJsxElements`と`forceMemoizePrimitives`の値が変わり、それによりメモ化の対象が変動します。サンプルコードでは、`enableForest`がオフの場合は各コンポーネントがメモ化され、再レンダリングが最適化されます。一方、`enableForest`がオンの場合はJSX要素のメモ化がほぼ行われず、単純な再レンダリングが行われます。
このオプションを使うことで、Reactのパフォーマンスを細かく調整することが可能です。ただし、すべてのメモ化を下げず、必要に応じてメモ化レベルを調整する方が実用的だと考えられます。このオプションは特定のシチュエーションで有用ですが、開発者の判断により適切に使用することが重要です。
。。。。
3つ目の記事です。
タイトルは「AWSでB/GデプロイやCanaryデプロイができそうな機能をまとめて比較してみた」です。
この記事では、AWSを使用してBlue/GreenデプロイやCanaryデプロイを実現するための各種リソース（Route53、CloudFront、API Gateway、ALB）の機能を比較検討しています。まず、Route53は名前解決サービスで、ルーティングポリシーを使って異なる環境へのトラフィック分散が可能です。ただし、sticky sessionや即時のルーティング切り替えはサポートされていません。
次に、CloudFrontはCDNサービスで、プライマリとステージングDistributionにリクエストを割り振ることができますが、縮退運転時には意図せずプライマリにリクエストが集中することがあるため、厳密なアクセス制御は難しいです。API GatewayはCanaryリリース機能を使ってリクエストをランダムに割り振ることができますが、異なるアクセス制限の設定は困難です。
ALBは高度なリクエストルーティングや加重ターゲットグループ機能を使って、複数環境へのリクエスト分散が可能です。sticky sessionやセキュリティグループによるアクセス制限もサポートされていますが、前段にプロキシがある場合には送信元IPの特定が難しくなります。
AWSの各サービスは、それぞれ異なるデプロイシナリオや要件に適しています。本記事を参考に、必要な要件に最適なサービスを選定することが重要です。
。。。。
4つ目の記事です。
タイトルは「【Dify × Next.js】AIが東京グルメを紹介してくれるアプリを作ってみた」です。
この記事では、オープンソースのLLMアプリ開発プラットフォーム「Dify」を利用して、Next.jsを使った東京グルメ紹介アプリの作成手順を紹介しています。まず、Difyのセットアップ方法として、公式サイトを利用する方法と、自分でサーバーを用意する方法があり、Docker環境が整っていれば短時間で利用開始できます。
Dify上でチャットボットを作成し、使用したいモデルを選択し、APIキーを取得して設定します。Next.jsでのアプリ開発では、チャットの履歴表示とメッセージ送信フォームを実装しています。APIリクエストはcurlを使ってテストし、Next.jsのServer Actions機能を利用してユーザーのメッセージを処理し、DifyのAPIに送信します。
このアプリは、ユーザーが入力したメッセージに基づいてAIが東京のグルメ情報を提供するもので、Difyの生成AI機能を活用しています。Difyを使うことで、個人開発でも簡単に高度なAI機能を組み込むことができます。さらに、RAGを使ってAIを賢くするなど、Difyには多くの応用可能性があります。
。。。。
最後に5つ目の記事です。
タイトルは「Google Apps ScriptとYouTube Data APIで動画データを分析！Dify.APIでさらに自動化！」です。
この記事は、Google Apps Script（GAS）とYouTube Data APIを用いて、YouTubeの動画データを収集・分析する方法を解説しています。まず、Google Cloud PlatformでYouTube Data API v3を有効にし、APIキーを取得します。その後、GASプロジェクトを作成し、YouTube Data APIを有効化します。GASを使ってスプレッドシートと連携し、データを簡単に操作する方法も紹介されています。
具体的なデータ取得方法として、特定のチャンネルの最新動画情報の取得、キーワード検索による動画リストの取得、動画の詳細情報の取得が挙げられます。これらの方法を組み合わせることで、例えばチャンネル登録者数の推移をグラフ化したり、特定キーワードを含む動画のコメントを分析するなど、様々な応用が可能です。
さらに、Dify.APIを利用することで、取得した動画データを要約し、Discordに自動通知する仕組みを構築する方法も解説されています。Dify.APIは最先端のAI技術を用いてテキストや動画の内容を要約するAPIで、GASからリクエストを送ることで要約結果を取得し、DiscordのWebhook URLを使って通知する方法が具体的に示されています。
この記事を参考にすることで、YouTube動画データの効率的な取得と分析、さらには高度な自動化処理を実現することができます。
。。。。
さて、今日ご紹介した記事を駆け足でおさらいしますと、「PayPay Api使って爆速で支払いシステム作ってみた(Nextjs app router)」「enableForestを使うことでReact Compilerでメモ化のレベルを変更できる」「AWSでB/GデプロイやCanaryデプロイができそうな機能をまとめて比較してみた」「【Dify × Next.js】AIが東京グルメを紹介してくれるアプリを作ってみた」「Google Apps ScriptとYouTube Data APIで動画データを分析！Dify.APIでさらに自動化！」の5つの記事でした。
次回もまたお会いできるのを楽しみにしています。詳しい内容はショーノートに書いてありますので、ぜひチェックしてくださいね。そして、番組の感想も募集していますので、どしどしお寄せください。
それでは、良い一日をお過ごしください！マイクでした。