最近のブログ記事

I posted several blog platform. So we can easy to summarize of my blog in this page.

WordPressのREST APIエンドポイントを追加する方法

WordPressのREST APIは/wp-jsonから始まるパスで提供されており、独自のAPIを追加して外部サービスと連携する方法を紹介しています。rest_api_initフックでregister_rest_routeを使用し、プラグインコードを追加するとAPIが追加されます。第一・第二引数で指定したパスでAPIにアクセスすることができ、APIの情報は自動的に登録されます。また、正規表現を使用してパスに商品や店舗のIDなどを渡すこともできます。さらに、バリデーション処理を追加することで、リクエスト内容のバリデーションとエラーメッセージの表示が可能です。最後に、WordPressのREST APIを活用することで、ブロック開発に役立つことも紹介されています。

SupabaseのDatabase Webhookを試してみた

SupabaseのWebhook機能について試してみた結果を報告しています。WebhookはAPIリクエストをDB操作と連動して外部に送ることができます。デフォルトではINSERTに対してイベントが発火し、指定したURLにJSON形式のデータが送信されます。開発時はngrokなどを使用してローカル環境にProxyを設定する必要があります。Webhookを活用することで、サービス開発とデータ連携を効率化することができますが、双方向の連携には注意が必要です。

WordPressのカスタムブロックで、子ブロック(InnerBlock)を扱えるようにする覚書

レイアウト系や認証エリアなどの機能を備えたブロックを作成する場合、InnerBlocksを使用する必要があります。InnerBlocksを編集画面に配置し、コードをビルドすると、ブロックの中にブロックを配置できるようになります。保存時にもInnerBlocksに対応し、配置した子ブロックも保存されます。また、allowedBlocksを使用して追加できる子ブロックの種類を制限したり、templateを使用して子ブロックの初期配置をカスタマイズすることもできます。詳細は参考記事をご覧ください。

WP APIのレスポンス内容をPHPでカスタマイズする方法

WP APIを使ってWordPress内の記事データをREST形式のAPIリクエストで取得できます。レスポンスカスタマイズ方法として、_fieldsパラメータを使用する方法や、register_rest_field関数を使用してカスタムなデータを追加する方法が紹介されています。ただし、デフォルトで提供されているAPIのレスポンス内容を減らすことは非推奨であり、注意が必要です。カスタムフィールドの情報を含める場合には、get_post_meta関数と組み合わせることができます。また、追加したフィールドには_fieldクエリを使用して必要なデータのみを取得することもできます。

WP APIで必要なデータだけレスポンスに含める方法

2023年2月にWordCamp Asia 2023で聞いた話をようやく試せたので、覚書です。WP APIのレスポンスは情報が豊富であり、不要な情報を絞るために_fieldsクエリパラメータを利用することができます。また、JavaScriptでAPIを利用する場合はURLSearchParamsを使用して_fieldsを指定することができます。参考記事に詳細があります。

Supabase AIを使って、SQLの構文エラーを修正する

SupabaseのダッシュボードのSQL Editorでは、構文エラーのSQLを実行するとSupabase AIボタンが表示されます。クリックすると、AIがサジェストと説明を提供してくれます。追加したい場合は「Accept addition」を押し、元のSQLを置換したくない場合は「Discard」を押します。AIのサポートは非常に強力で、SQLの試行錯誤をサポートしてくれます。Supabase AIは、SQLの学習に役立つでしょう。

SupabaseでDB Functionを試してみる

最近、SQLにも関数があることを知りました。Supabaseでも関数を作成できるので、SQL Editorを使って入門しました。関数はCREATE FUNCTIONで定義し、処理の本体は$$で囲んで書きます。関数の定義には関数名・戻り値の型・実行言語を指定します。戻り値がテキストの関数を作成する例を紹介しました。また、テーブルの情報を取得する関数や複数件取得する方法も説明しました。関数は後片付けにDROP FUNCTIONで削除できます。参考記事: https://supabase.com/docs/guides/database/functions

LangChain.jsでChatの履歴をMomentoに保存させてみた

Chat形式のUIを提供する際には、過去の会話履歴を保存する必要があります。この記事では、MomentoのCacheに保存する方法を紹介しています。MomentoのSDKを使用するためには、MomentoのAPIを呼び出すためにSDKをインストールする必要があります。また、Cloudflare Workersなどの一部のエッジサービスでは、Web SDKをインストールする必要があります。具体的なコードのセットアップ方法も述べられています。コードの実行例や関連記事へのリンクもあります。

Supabase AuthをNext.jsで触ってみた-1

公式のチュートリアルに従って、Supabaseを使用した認証画面をNext.jsで作成しました。手順を紹介します。まず、create-next-appを使用してNext.jsアプリをセットアップしました。次に、Supabase CLIを使用してSupabaseプロジェクトをセットアップしました。.env.localにプロジェクトIDとAPIキーを設定し、SDKをインストールしました。ログインページを作成し、ユーザーの作成とログインを試しました。セットアップに時間がかかりましたが、便利でカスタマイズ可能なAPIも使用できるため、CLIがあることは素晴らしいと感じました。チュートリアルの続きは後日紹介します。

registerBlockVariationで、WordPressのコアブロックを拡張したブロックを作ってみる

WordPressにはデフォルトでさまざまなブロックが用意されていますが、ブロックをカスタマイズしたい場合もあります。そのようなケースでは、「ブロックの拡張方法」が役立ちます。まず、create-blockコマンドなどを使用してブロックプラグインをセットアップし、registerBlockVariation関数を追加します。これにより新しいブロックが作成されます。また、コードでブロックの設定値をカスタマイズすることもできます。さらに、inserterプロパティを使用すると、コマンドや本文内からもブロックを追加できます。innerBlocksプロパティを利用すると、子ブロックも指定できます。カスタムブロックを作成する際には、保守コストに注意しながら検討することが重要です。

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

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

Stripe Connect fundamentals Series

dev.to/stripe のStripe Connect fundamentals Seriesを日本語化していきます。2章以降は随時追加予定

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

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

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

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

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

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

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

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

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

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

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

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

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

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に転職した話とコミュニティ採用について

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

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

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で立ち上げるサンプル

できれば公式の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で簡易的な商品注文ページをフルスクラッチしてみよう

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

【本編無料】Stripe CLIの本

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

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

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 ~」

ブログにまとめるほどでもないけど、記録しておきたかったのでこちらに。 現象 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のカスタムブロックで、その投稿のカテゴリ / タグを取得する

そのままデータが取れる系の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アプリを作ってみる

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の値を使ったテストをする

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