Hello! I‘m Hidetaka Okamoto

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

AWSとTwitter API v2を利用して、自動ツイートシステムを作る方法

Twitter APIのV2への移行により、APIの認証フローやトークンの管理をAWS上で行う方法が紹介されています。SSMリソースをIaCで定義することで、OAuthクライアントシークレットを取得する方法、ツイートのリクエスト内容についての解説、Secrets Storeの使用方法が紹介されています。個人利用で廉価に利用したい場合、Systems Manager Parameter Storeを利用し、GetParameterCommandとPutParameterCommandを利用した処理をすることが推奨されています。また、2つのクラスを利用するOAuthで認証してAPIを利用する方法も紹介されています。

Node.jsでOpen AI APIをいろいろ呼び出してみた

この記事は、OpenAIのChat GPTを使ってAIアシスタントを作成する方法について説明しています。APIキーを取得するAPI呼び出しには、OpenAIのダッシュボードから作成したAPIキーが必要です。設定したAPIキーを使い、入力・発話はrole: user、前提条件や設定・前提条件をrole: systemで渡すことでAIアシスタントを作成できます。また、DynamoDB等のDB・ストレージにJSONを保存することで、ステートレスなインフラ上にChatbotを作成することもできます。

Format Lambda invocation input from EventBridge using AWS CDK

EventBridgeからLambdaへ送信された値は、通常、detailの内部に展開されます。ただし、「API Gatewayで呼び出しているLambdaを再利用したいケース」などでは、detailの中身だけをLambdaに渡す必要があります。これを実現するために、CDKで提供されているEventBridgeのinput transformerを使用して、中身を変換することができます。コードの場合、RuleTargetInput.fromObjectの代わりに、RuleTargetInput.fromTextを使用します。

Astroで構築したアプリにて、RSSフィードを出力する (TypeScript)

Astroでサイトを構築している場合、RSSフィードの生成が必要となることがあります。Astroには、@astro/rssを利用することで、公式でRSS周りのライブラリが用意されています。getメソッドで、rss()の実行結果をreturnし、Markdownのデータからフィードを生成する例を示しています。RSSOptions型を利用することで、型安全なフィード生成処理を作成することもできます。詳細は、https://docs.astro.build/ja/guides/rss/を参照してください。

Node.jsで`URLPattern`を使ったコードを書いてみる

Cloudflare WorkersでURLPatternを利用したい場合、「Pico」というフレームワークを使用することができます。Node.jsではURLPatternがサポートされていないため、Polyfillを使って補完する必要があります。Picoを使用することでURLPatternを利用することができ、Cloudflare WorkersでもOKです。ただし、URLPattern APIはまだ実験的な段階で、安定版ではないようです。プロジェクトによっては使用することができそうです。

Stencilを2.14.2から3.3.0にアップグレードした時の覚書

Stencil.jsのメジャーアップデートで、ライブラリの更新を忘れていたため、エラーが発生。具体的には、非推奨になった出力ターゲット`dist-custom-elements-bundle`を使用していたため、`dist-custom-elements`に変更する必要があった。また、TypeScriptのバージョンが合わなかったため、アップグレードも必要だった。依存関係のエラーを解決し、ビルドしていけば、問題なく動作した。

Stencilで、コンポーネントのユニットテスト

Stencilを使用してWebコンポーネントを作る場合に、テストの書き方について整理しました。サンプルコンポーネントModalの表示・非表示を制御するコンポーネントにテストを追加する方法を説明しています。@Methodと@Eventをテストする方法についても述べられています。また、スナップショットテストを使用することもできます。Jestを使ったモックについても説明があります。さらに、参考記事のリンクも掲載されているので、Stencilでテストをする際に役立つでしょう。

Astroでビルドした静的WebサイトをGitHub経由でCloudflare Pagesに自動デプロイする方法

AstroとCloudflare Pagesを使い、サイトをビルドし、デプロイする方法について説明されています。Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで、ビルド設定を行い、環境変数をAdvancedメニューから設定しましょう。その後、ビルド・デプロイログを追跡し、デプロイが完了するとサイトにアクセスできるようになります。最後に、定期的にビルドするには、GitHub Actions側からWranglerでデプロイする方法が良さそうです。

Cloudflare WorkersでRSS Feedを読み込む方法

Cloudflare WorkersはNode.jsそのものではありません。(2023/04時点) そのため、fsなど一部のAPIが利用できず、npmに公開されているライブラリにもWorkersで動かないものがあります。...

Headless CMSのSanityで、Sanity Studioを使ってコンテンツを管理できる様にする方法(Public URL編)

JamstackアプリケーションにSanity Studioを取り付けることができます。Sanityの管理画面にアクセスするために、Next.jsアプリケーションを公開URLにデプロイする必要があります。公開URLからSanity Studioにアクセスできるようにするには、Sanityの管理用APIにアクセスできるようにCORSの登録が必要です。登録が成功した場合、Sanity Studioにログインし、アプリのコンテンツ管理画面を利用することができます。Sanity Studioにはアプリのプレビュー機能もあり、とても便利です。

Spoken events

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