Page: 32 / 105

JavaScriptStencilTypeScript

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

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

Okamoto Hidetaka

AstroCloudflareJavaScriptSaaS / FaaS

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

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

Okamoto Hidetaka

CloudflareJavaScriptSaaS / FaaSTypeScript

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

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

Okamoto Hidetaka

SaaS / FaaSsainty.io

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

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

Okamoto Hidetaka

CloudflareSaaS / FaaS

Cloudflare Pagesへのデプロイを、GitHub Actionsから行う方法

GitHub Actionsを使用して、Cloudflare Pageにデプロイする方法を解説した記事です。この方法は、静的サイトジェネレーターであるSSGをスケジュールビルドする場合などに最適です。記事では、CloudflareのアカウントIDおよびAPIトークンの取得方法、APIトークンの認証方法、GitHubリポジトリのSecrets and variablesに格納する方法、そして、GitHub ActionsのWorkflowの作成方法について説明されています。また、wrangler-actionを使用することで、wranglerのインストールなどの作業を簡素化できることも紹介されています。参考記事には、Cloudflareの公式ドキュメントやwrangler-actionのGitHubリポジトリも紹介されています。

Okamoto Hidetaka

CloudflareJavaScriptSaaS / FaaSTypeScript

Cloudflare WorkersとKV + Wranglerを利用して、Connpassのイベント情報をDiscordに通知するスケジュールbotを作成する

CloudflareコミュニティでConnpassのイベント情報を通知するbotのサンプルを参考に、Wrangler & TypeScriptでプロジェクトを作成し、Connpassのイベント情報を取得し、KVストアに保存し、Discordに通知するアプリケーションを作成する方法を紹介しています。また、KVストアに保存したデータを確認する方法や、DiscordのWebhook URLを安全にデプロイする方法なども解説しています。

Okamoto Hidetaka

AstroJavaScriptMarkdoc

Astro&Markdown/Markdocで作ったサイトで、簡単な言語切り替え機能を実装する

個人のポートフォリオサイトを、2023年からAstroで構築しています。 サイトの要件として、「日本語でも英語でも表示すること」があったため、勉強も兼ねてある程度自前で実装してみました。 基本方針 英語をベースとする 日 […]

Okamoto Hidetaka

CloudflareSaaS / FaaSTypeScript

Cloudflare Workersで、OpenAIなどの外部APIを呼び出す方法

npmにSDKを公開しているSaaSは数おおくありますが、Workersの性質上全てが動作するわけではありません。 今回はOpenAIのAPIを例に、SDKを使わずに外部APIを利用する方法を紹介します。 SDKを使わず […]

Okamoto Hidetaka

AstroJavaScriptMarkdoc

Astro & Markdocで、独自のMarkdownタグを作成する

Markdocでは、{% custom %}Custom Tag{/% custom %}のような「独自のタグ」を作れます。 Astroでタグの作成・登録を行う方法を紹介します。 独自タグの描画内容を、実装する まずは「 […]

Okamoto Hidetaka

aws-amplifyJavaScriptNode.js

AWS Amplifyで、ログインユーザーのJWTをfetchのHeaderで渡す方法

基本的には、APIもAmplifyで管理して、APIクラスを使ったAPI呼び出しを行います。 同じCognito User Poolsを使う、Amplifyで管理されていないAPIを呼び出すケースでは、Authoriza […]

Okamoto Hidetaka
Home
Search
Bookmark