Page: 23 / 101

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

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

Published at: 2023/06/08

JavaScript Stencil TypeScript

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

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

Published at: 2023/06/08

JavaScript Stencil TypeScript

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

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

Published at: 2023/06/08

未分類

test

The given text is Lorem Ipsum, a placeholder text commonly used in the design and publishing industries before actual content is available. It consists of Latin words that do not have any real meaning or context.

Published at: 2023/05/08

Astro Cloudflare JavaScript SaaS / FaaS

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

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

Published at: 2023/04/10

Cloudflare JavaScript SaaS / FaaS TypeScript

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

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

Published at: 2023/04/09

SaaS / FaaS sainty.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にはアプリのプレビュー機能もあり、とても便利です。

Published at: 2023/04/07

Cloudflare SaaS / 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リポジトリも紹介されています。

Published at: 2023/04/06

Cloudflare JavaScript SaaS / FaaS TypeScript

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

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

Published at: 2023/04/06

Astro JavaScript Markdoc

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

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

Published at: 2023/04/06