Page: 27 / 105

AstroCloudflareJavaScriptSaaS / FaaS

AstroでmicroCMSのコンテンツを利用したサイトを静的ビルド + Cloudflare Pagesにデプロイした話

最近Astroをよく使っている人に向けて、microCMSのデータを取得する方法を簡単にまとめました。まず、microCMSのAPIキーを取得し、環境変数に設定します。次に、microCMSのJS SDKを使って記事情報を取得するためのライブラリをインストールし、APIクライアントを作成します。作成したクライアントを使用して情報を取得して表示する処理を追加しましょう。また、Astroでのビルド・デプロイには、環境変数の扱いに注意が必要です。

Okamoto Hidetaka
75667c46baca0a7d09a73ba169eb3c04-20230316215732

WordPress

LLMでWordPressブログ記事作成を支援するサービス「GetGenie」の無料版試してみた

WordCamp Asia 2023で紹介された記事をAIで作成するサービス、GetGenieについて紹介されました。GetGenieはLLMをベースにしており、記事作成やセールスコピー作成を支援するウェブサービスです。SEOを意識した記事作成のためのリサーチ機能やテンプレート・フォーマットが用意されており、ウェブメディア運営に便利です。Freeプランもあり、APIやプラグインも利用できます。プラグインのインストールや記事の作成方法も詳しく解説されていますが、本文生成時にはモデルの情報に制約があるため、編集作業は人間が行う必要があると感じられました。

Okamoto Hidetaka

JavaScriptStencil

Stencil(v3)で作成したコンポーネントに、Storeを追加する

Stencilは、アプリやリッチな機能を持つWebコンポーネントを作成する際に、@stencil/storeを使用してストア機能を追加することができます。この記事では、@stencil/storeを使用したストアの作成方法や使用例が紹介されています。ストアを作成するためには、createStore関数を使用し、グローバル変数のようにストアを扱うことができます。また、onChange関数を使用して非同期処理を実装する方法や、setやget関数を使用してイベントを設定する方法も紹介されています。ストアを使用することで、コンポーネントの表示と処理を切り分けることができます。

Okamoto Hidetaka

AWSJavaScriptServerless FWTwitter

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

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

Okamoto Hidetaka

JavaScriptNode.jsOpenAI

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

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

Okamoto Hidetaka

AWSAWS CDK

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を使用します。

Okamoto Hidetaka

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