Hello! I‘m Hidetaka Okamoto

JavaScriptを利用して、ServerlessなWebアプリケーションの開発を行う。 また、StripeのDeveloper Advocateとして、オンライン決済の組み込み方法の紹介やサンプルコードの作成、イベントでの登壇などに取り組みます。

IssueやPull Requestに返事をしてくれるAIサービスDosuの無料プランを触ってみた

WP Kyoto Blog

LangChain.jsのIssueにDosuが迅速に回答し、無料のサービスであることが分かり導入した。DosuはOSS開発者向けに500回までの無料利用枠を提供し、GitHubと連携して質問や問題を自動化できる機能がある。チャンネル作成や回答生成、Issue自動化などが可能で、使い方を確認した後、要求に応じてPauseや削除も行える。無料枠を超えた際の料金については気になるが、機能の利便性に期待が高まっている。

LangChain.jsで@langchain/anthropicを使うときは、モデル名を必ず指定しよう(v0.3.15以前)

WP Kyoto Blog

メンテナーからの指示で、@langchain/anthropicではモデル名の指定が必須となった経緯をまとめる。エラーが発生した際には非推奨のモデルを変更するよう促され、モデル名の必須化に関する問題を解決するためにIssueを立て、メンテナーとやり取りを行った。今後、モデルの進化に備えて明示的にモデル名を指定する必要があることが結論として提示された。その他、LangChain.jsのメンテナーの返信が迅速であり、アプリケーション側でも環境変数で設定可能な形でモデル名を管理することが望ましい。

next-on-pagesでのビルドでerror _not_foundが出たら読む記事

WP Kyoto Blog

Next.jsのページをCloudflareにデプロイする際にビルドエラーが発生しました。”not-found”エラーの対処法として、”app/not-found.tsx”に”export const runtime = ‘edge’;”を追加する必要があります。これによってCloudflare上で正しく動作することが確認できます。ビルドエラーの原因はデフォルトのNot Foundページが”export const runtime = ‘edge’;”を持っていないことにあるようです。

Honoxでhono/clientのパス指定を力技でダイナミックにする

WP Kyoto Blog

HonoのRPCモードを使用すると、作成したREST APIをSDKライクにアプリケーション側で利用できるが、APIのホスト指定が固定される課題がある。この問題を解決するために、middlewareを使用してクライアントを動的にする試みが行われた。ただし、dummyのURLを指定するとエラーが出るため、ステージング環境やlocalhostなど実際の環境に合わせた設定が必要。クライアント側ではuseEffectを使用した処理は正常に動作するが、本番環境での利用には慎重さが必要。

next-on-pagesでApp RouterのREST APIがエラーになった時に見る記事

WP Kyoto Blog

Cloudflare PagesでNext.jsアプリをデプロイする際のエラーと対応方法についての覚書です。REST APIを追加するとWranglerでのプレビューがエラーになる場合、compatibility_dateを更新することで解決できます。最新の日付に更新後、再度ビルドとプレビューを行うと問題が解消されます。

Cline ( Roo Code ) MCPでStripeの実装をやる

WP Kyoto Blog

Stripeが昨年末に出したAgent Toolkit SDKにMCPが追加され、AIエージェントのタスク完了を支援するプロトコルとして活用される。Cline ( Roo Code )を使用してStripe MCPをセットアップし、Stripeのリソースを利用するコマンドを設定する。MCPを使ってStripeで1年間で自動解約するサブスクリプションを作成し、Clineがコード生成から実装までサポートする。AIを活用した実装により、決済・サブスクリプションの組み込みタスクを効率化する過程で、MCPの活用やAIに任せるべき部分を模索する意義がある。

HonoでRPCモードを触ってみた

WP Kyoto Blog

たまたま見かけたHonoのRPCモードについて、TypeScriptの型を使ってサーバーとクライアントの仕様を共有できることがわかりました。APIの定義やレスポンスの型情報を共有することで、クライアントアプリ側でも参照しやすくなる点がポイントです。RPCを活用する際は、メソッドチェーンでAPI Routeを作成する必要があります。RPCモードを使用すると、API側で定義した型情報をクライアント側でも利用できるため、便利な機能と言えるでしょう。

Next.jsをCloudflareで使う時に `await is not defined`が出たら見る記事

WP Kyoto Blog

RevTech / Serverless Devの岡本さんがCloudflare Pagesでアプリをデプロイする際にハマった点を共有しました。Next.jsのバージョン15.1.0でawaitが使えないエラーが発生し、next.config.tsをmjsに変更することで対応しました。変更後に再起動すると問題が解決し、Next.js 15.1.0でアプリが正常に動作したようです。

CursorでStripe MCPを使ってサブスクリプションの実装をやらせてみる

WP Kyoto Blog

Stripeが昨年末に出したAgent Toolkit SDKに、MCPが追加されました。MCPはStripeのリソースをLLMが利用するためのコンテキストを伝えるプロトコルで、AIエージェントに指示されたタスクを完了するツールです。MCPの設定や利用方法について詳細が記載されており、Stripe MCPは幅広い用途で使えますが、APIの制限も可能です。生成されたコードは一部修正が必要かもしれませんが、初めてStripeを触る人にとって参考になる内容も含まれています。LLMとAgent Toolkit SDKの進化に期待が寄せられています。

Honoxで動的な値をmiddlewareで設定する場合はcontext.set/getを使う

WP Kyoto Blog

Honoxでページを作成する際、サイト全体で利用したい動的な値を設定する方法について解説されています。middlewareとcontextを使用して解決策を示し、例としてAPIのアドレスを動的に設定するコードが示されています。環境変数を使用する方法と比較しつつ、ステージングやプレビューデプロイでも利用できる利点が紹介されています。さらに、取得した値にTypeScriptの型情報を追加する方法も提案されています。

StripeのAPIキーからStripeアカウントを特定する方法

Zenn

複数のStripeアカウントで開発や運用を行っていると、プロジェクトで利用しているAPIキーがどのStripeアカウントで利用しているものかがわからなくなることがあります。 この記事では、APIキーから対象のStripeアカウントを特定する方法を紹介します。 Checkout Sessionを利用して確認する もっとも簡単な方法は、Checkout Sessionを利用することです。Checkout Sessionには、カード情報を保存するためのsetupモードが用意されています。setupモードでセッションを作成し、リダイレクトを行うAPIを実装しましょう。 app.get('/c...

Stripe Appのローカル開発で、`localhost:4242 is already in use`が発生した時の対処法

Zenn

Stripeにはサービス連携やカスタムUI、ワークフローなどを構築・カスタマイズできる「Stripe Apps」があります。 https://stripe.com/jp/apps これをローカルで開発する際、時より「localhost:4242 is already in use」というエラーが発生することがあります。 今回はこのエラーが発生した時の対処法を簡単に紹介します。 ステップ1: 現在のポート使用状況の確認 エラーが発生した際、まず確認することは、対象のポートを使用しているプロセスがあるかどうかをチェックすることです。Terminalやコマンドプロンプトで以下のコマンドを実...

No Codeで始めるStripe - 触って覚える Stripe Payment Links

Zenn

StripeのPayment Linksを利用すると、コードを書かずにクレジットカードなどの決済を受け付けるURLを作成できます。 また、Dashboardで設定を行うことで、割引やGoogle Analyticsでのトラッキング、QRコード発行なども簡単に行えます。 この本では、Stripe Payment Linksを使って、簡単に決済・サブスクリプション申し込みを組み込む方法を紹介します。 サービスやアプリを新しくスタートする際に欠かせない「オンライン決済」を、Payment Linksでシンプルにはじめましょう。

[Cloudflare & Stripe入門] Cloudflare WorkersとStripeで、オリジナルの決済リンクを作ろう

Zenn

「Cloudflare Workers」を利用すると、サーバーレスなアプリケーションをCloudflareのデータセンターにデプロイできます。 この記事では、これからCloudflare Workers(以下Workers)を触ってみようという方向けの、簡単なAPIの作り方を紹介します。 Stripe SDKを利用して、オリジナルのPayment Linksを作るAPIを作成しよう ここでは、「Stripeの決済フォームへ遷移するAPI」をWorkers上に作りましょう。 ユーザーがWorkersのURLにアクセスする Workers内でStripe SDKを利用して、Checko...

Amazon EventBridgeとStripeで、ノーコードに有料サーバー起動システムを作るワークショップ

Zenn

このワークショップ資料は、JP_Stripesで開催された「AWSでサーバーレスなSaaSバックエンド開発ワークショップ」の後編資料です。 ここでは、AWS Step FunctionsとAWS CloudFormationを利用したWordPressサーバーの起動システムを構築します。 その後、Amazon EventBridgeと連携させ、Stripeのサブスクリプション申し込みと連動してサーバーが起動するようにします。 AWSマネージメントコンソールとStripe Dashboardのみで完結する、ローコードなワークショップ資料です。

Stripe APIマイグレーションガイド (Charge/Token API -> Payment Intents編)

Zenn

Stripeでは、決済方法の増加や法的な要件の追加といった周りの状況の変化に応じて、大きくAPIを変更することがあります。 その場合、より多くの決済方法や機能・オプションを利用するためには、実装の変更が必要です。 このガイドでは、言語・FW別に、Charge APIやToken APIから、Payment Intentsを利用した決済フローへ変更する方法を紹介します。

Angularのmoduleでネストしたルーティングをやってみた

Zenn

やりたかったこと /adminのように、特定のパス以下でのルーティングやファイル群をmoduleにまとめたい。 ベースアプリ 公式チュートリアルをやっていたので、これをリファクタリングした。 https://angular.jp/tutorial やったこと 1: 子ページのRoutingモジュールを作成 子ページにしたいコンポーネントのインポートとRouteの定義を実施。 ネスト先の場合、RouterModuleはforChildを使う。 import { NgModule } from '@angular/core'; import { RouterModule, R...

Next.jsとStripeではじめるシンプルなECサイト開発ワークショップ

Zenn

Next.jsを利用することで、より多様なwebサイト・アプリケーションを開発できるようになります。 今回のワークショップでは、Next.jsとStripeを利用した、シンプルなECサイトをフルスクラッチする方法を体験できます。 なお、このワークショップドキュメントは不定期にアップデートを行います。 内容が前回開催時と変更されている場合もございますのでご了承ください。

Stripe Connectでアカウントを作成する際の住所の正規化に、GeoloniaのOSSライブラリで挑んでみる

Zenn

年末のJP_Stripe配信で、Stripe Connectでの住所の書き方の記事が話題になりました。 https://gist.github.com/toruf-stripe/60293ec99a333a7af1daaca31b562741 その中で、「Geoloniaがリリースしている住所正規化ライブラリが使えるのでは?」と思いつきで言っちゃったので、どこまでいけるか試してみました。 使用するライブラリ https://github.com/geolonia/normalize-japanese-addresses 表記揺れや新旧字体など、住所入力でありがちな揺らぎを吸収してくれ...

DeveloperからDeveloper Advocateにキャリアチェンジして3週間経った話

Zenn

DevRel Advent Calendar 2021 20日目の遅刻記事です。 これまで 2013年ごろからWeb業界に入り、PHPやWordPressでプログラミングを始めました。 2015年にAWSを利用するSaaS企業に転職し、そこからはAWS LambdaまたはAmplifyとNetlify / Stripe / Algoliaを組み合わせるようなアプリケーションをJavaScript / TypeScriptで色々作ったり保守したりしていました。 現在地 2021年11月末からDeveloper AdvocateとしてStripeにジョインしました。 まだ1ヶ月経って...

コミュニティ活動がきっかけでStripeに転職した話とコミュニティ採用について

Zenn

2021/11/29から、Stripeにジョインしました。 自分の知る限りでは、日本でコミュニティ経由でStripeに入社したのは、自分が一人目なはずなので、そのへんの振り返りを兼ねて、Stripe Advent Calendar 1日目の記事としたいと思います。 StripeとStripeコミュニティへの関わり Stripeそのものを触り始め、Stripeコミュニティ(以降JP_Stripesと表記)への関わりが始まったのが2017年でした。 在籍していた会社でStripeを採用することになり、Stripeに関する情報がより知れる場所を探していた時期だったと記憶しています。そして...

Amplify CLIを使って、作成済みのDynamoDBテーブルをアプリにimportする

Zenn

GraphQL (AppSync)やREST APIですでに作成済みのDynamoDBテーブルにアクセスしたい場合、Amplify CLIでデータをインポートする必要があります。 Storageとしてimportする必要がある これ結構な罠な気がしますが、DynamoDBのテーブルはStorageとしてimportします。 amplify import storageを実行すると、S3バケットかDynamoDBかを質問されるので、ここでDynamoDBを選びましょう。 % amplify import storage ? Please select from one of the b...

Serverless Next.jsをAWS CDKで立ち上げるサンプル

Zenn

できれば公式のExampleに持っていきたいので、PRたててリクエスト中。 https://github.com/serverless-nextjs/serverless-next.js/pull/1522 マージされたらそっちベースにちゃんとした記事書き直す予定。 Serverless Next.jsでAWS CDK Serverless Next.jsといえば、Serverless Componentを使う印象でした。が、最近CDK版も出たみたいです。 定義イメージ import * as cdk from '@aws-cdk/core'; import { NextJSLa...

NestJSとStripe Checkoutで簡易的な商品注文ページをフルスクラッチしてみよう

Zenn

Stripe Checkoutは少ないコード(ローコード)で単発・定期課金のカード決済システムを提供できるStripeのサービスです。この機能を、NestJSをつかったAPIと静的ホスティング機能を利用して、簡単な商品購入ページを作る本です。 # 触れるもの - NestJSで作るREST API - NestJSで静的なHTMLを配信する - Stripe Checkoutの決済URLの発行方法など NestJSの入門と、Stripe Checkoutのことはじめに役立てばと思い執筆しました。

【本編無料】Stripe CLIの本

Zenn

Stripeから提供されているCLIツールのインストール方法や使い方について紹介します。 JP_Stripesなどのコミュニティイベントで紹介する内容を本としてまとめたものですので、本編については無料公開としています。 有料部分には個人的に使っているTipsのようなものを載せていますので、興味がある方はあわせてご覧ください。 ## 紹介しているCLI version v1.7.9 ## 前提としている環境 macOS / zsh

Alexaスキル開発を効率化するためのフレームワーク「Talkyjs」を作った背景など

Zenn

https://talkyjs.dev/ この記事について Amazon Alexaのカスタムスキルを開発する際に使用するnodejsのライブラリ、「ask-sdk」をより便利に使えるようにするフレームワークを作りました。 そして例によってその紹介記事をまともに書いていないことを思い出したので、ここにまとめます。 背景: スキル開発100チャレンジからask-utilsまで 2018 -> 2019年に「#スキル開発100チャレンジ」というものに挑戦してました。 https://twitter.com/search?q=%23スキル開発100チャレンジ&src=h...

Amplify SDK + Reactでビルド後「Cannot read property 'call' of ~」

Zenn

ブログにまとめるほどでもないけど、記録しておきたかったのでこちらに。 現象 Ionic ReactでSPA AWS Amplify SDKをいれてAppSync(GraphQL)を使う ionic buildを実行 ビルドした後のアプリでCannot read property 'call' of undefinedが発生する 原因 どうもIonic Reactが内部的に使っているreact-scriptがAWS Amplify SDKの地雷を踏むらしい。 Issue: https://github.com/aws-amplify/amplify-js/issues/2667...

WordPressのカスタムブロックで、その投稿のカテゴリ / タグを取得する

Zenn

そのままデータが取れる系のAPIが見当たらない様子だったので、作ってみました。 コード import { useSelect } from '@wordpress/data'; const useCurrentPostCategories = () => { const categoryIds = wp.data.select('core/editor').getEditedPostAttribute('categories') return useSelect((select) => { const {getEntityRecords} = select('co...

AWS NorthstarでAWSっぽいReactアプリを作ってみる

Zenn

AWSが突如としてリリースしたOSSが「AWS Northstar」です。 Aboutをざっと読む限り、「社内でのプロトタイピングなどを目的に作られたデザインシステム兼FWをオープンにしました」というところかなという感じですね。 せっかくなので触ってみます。 セットアップ 実際の実装ではTypeScriptを使っていますが、説明が面倒なのでこちらでは省きます。 $ npx create-react-app northstar $ cd northstar $ yarn add aws-northstar react-router react-router-dom Provid...

JestでsessionStorageの値を使ったテストをする

Zenn

TypeScriptでいい感じにかけるライブラリとかが見当たらなかったので、自前で書いた覚書。 参考記事 https://stackoverflow.com/questions/51566816/what-is-the-best-way-to-mock-window-sessionstorage-in-jest https://github.com/facebook/jest/issues/2098 setupTests.ts const localStorageMock = (() => { let store = {}; return { getI...

AWS Certified Alexa Skill Builderに合格したのでやったことをまとめる

Zenn

Zennで何か書いてみようと思ったので、最近受験したAWS認定試験のことについて振り返ります。 AWS Certified Alexa Skill Builderとは AWSの認定資格の1つで、「Specialty」というカテゴリに含まれています。 Alexaスキルの開発や運用に関する知識の試験ですので、Alexaスキル開発に注力したい方は受験しておくとよいでしょう。 また、Alexaスキルに関する人材を採用したい企業は、この資格を持っている人であればある程度の知識があると判断できるかなと思います。 試験結果 試験は制限時間170分で、1,000点中750点以上獲得する必要がある...

Spoken events

  1. Company
    JP_Stripes 東京 Vol.23: これからの価格と収益の話をしよう
    Role
    Date
    2025-01-21T15:00:00.000Z
  2. Company
    JP_Stripes Online Meetup Vol.4~ECやサブスク決済を手早く作るには?~
    Role
    ローコード、ノーコード志向の人のためにStripe使いこなし術
    Date
    2022-06-29T11:00:00.756Z
  3. Company
    Stripe&Ionic Reactハンズオン - Ionic Meetup #20 札幌
    Role
    オンライン決済とStripeについて
    Date
    2022-06-19T05:00:00.000Z
  4. Company
    JP_Stripes in サッポロ Vol.7 Stripe再入門 & アプリ開発入門
    Role
    Stripe 再入門 & Stripe Appsではじめるサービス連携・UIカスタマイズ
    Date
    2022-06-18T06:00:00.000Z
  5. Company
    [Web技術でモバイルアプリをつくる] Ionic Meetup #19 Tokyo
    Role
    Next.jsでIonic Reactを利用したWebサイトを開発した話
    Date
    2022-05-29T05:00:00.000Z
  6. Company
    LINE de 決済勉強会!LINE API×Stripeエキスパート秘伝のノウハウを共有!
    Role
    Stripe Search APIを利用した、LINEとStripeの顧客情報連携
    Date
    2022-05-16T10:00:00.000Z
  7. Company
    JP_Stripes What's new 2022/04
    Role
    Date
    2022-04-26T03:15:00.000Z
  8. Company
    【Stripe Japan & Engineer Cafe 主催】Next.jsではじめるシンプルなECサイト開発ワークショップ
    Role
    Date
    2022-04-22T04:00:00.000Z
  9. Company
    JP_Stripes DeepDive 2022/04
    Role
    Stripeでクレカ決済に加えて、 コンビニ決済/銀行振込を追加する
    Date
    2022-04-20T03:15:00.000Z
  10. Company
    PHPerKaigi 2022
    Role
    AWS LambdaとStripeでオンライン決済・定期課金APIを実装しよう
    Date
    2022-04-11T06:00:00.000Z
  11. Company
    AWS CDK Conference Japan
    Role
    AWS CDKを利用して、 Next.js/Stripeで構築したフルスタックSaaSアプリをデプロイ・管理する
    Date
    2022-04-09T03:00:00.000Z
  12. Company
    JP_Stripes What’s new in 2022/02
    Role
    コンビニ決済/Payment Links API他
    Date
    2022-03-08T03:15:00.000Z
  13. Company
    AWS エバンジェリストシリーズ AWSの基礎を学ぼう - 特別編 AWS CDK v2 ハンズオン
    Role
    Stripeを組み込む際の CDK実装Tips
    Date
    2022-02-26T04:15:00.000Z
  14. Company
    Shifter ミートアップ!Shifter Headless ではじめる Headless CMS 入門
    Role
    Stripe / Next.js / AWSによる Headless WordPress活用法
    Date
    2022-02-25T11:00:00.000Z
  15. Company
    ジャムジャム!!Jamstack_5
    Role
    microCMSとStripeを使ったJamstackなECサイトの作り方(Next.js篇)
    Date
    2022-02-22T10:30:00.000Z
  16. Company
    JP_Stripes DeepDive
    Role
    Stripe Quotesで見積書発行から請求業務をノーコードで管理しよう
    Date
    2022-02-10T03:15:00.000Z
  17. Company
    JP_Stripes What's new 2022/01
    Role
    Date
    2022-01-13T03:15:00.000Z