Page: 30 / 108

AstroJavaScriptTypeScript

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

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

Okamoto Hidetaka

JavaScriptNode.js

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

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

Okamoto Hidetaka

JavaScriptStencilTypeScript

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

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

Okamoto Hidetaka

JavaScriptStencilTypeScript

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

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

Okamoto Hidetaka

未分類

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.

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
Home
Search
Bookmark