Page: 19 / 101

Cloudflare Hono / Sonik JavaScript SaaS / FaaS

Cloudflare R2をHonoから利用する方法

CloudflareのオブジェクトストレージサービスR2を使用してVectorデータのストア先を試した結果、ストレージの作り方に手間取ったが、手順をまとめる。R2バケットはWraglerから作成可能。ローカル開発環境では2つのバケットが必要。プレビュー用のR2バケットを作成し、WranglerでアプリのBindingsに追加する。HonoからR2バケットを呼び出す方法についても解説。ただし、R2にJSONデータを配置する方法は効率的ではなく、Cloudflare Vectorizeなど他のベクターストアを使用することが推奨される。しかし、R2バケットの扱い方は覚えたので結果は良い。

Published at: 2023/10/18

27aa7b68acc830eba707c8c11b79a180-20231015153446

AI / ML Cloudflare LLM SaaS / FaaS

Cloudflare Workers AIをWorkersの外からREST APIよびだしで利用する方法

Cloudflare Workers AIは、Workersから利用するためのAIサービスで、APIトークンを取得してREST APIを使用することで利用できます。記事では、APIトークンの取得方法やcURLを使用したREST APIの実行方法が紹介されています。また、リクエストBodyに質問を入れることでLLMに対して質問を送ることもできます。Cloudflareは、世界中のウェブサイトに安全性、高速化、可用性を提供するサービスプロバイダーであり、日本でも利用が増えています。Workers AIの恩恵を受けるためには、APIトークンの作成とREST APIの呼び出し方を理解する必要があります。

Published at: 2023/10/17

Cloudflare Event

Cloudflare Meetup Kobe Kick Off!で、Hono / Cloudflare WorkersをWordPressの前に置く話をしてきました。 #CloudflareUG

Cloudflare Meetup Kobe Kick Off!では、「WordPressとhonoで、Cloudflare Workersプロキシパターンをやってみた」というセッションが行われました。このセッションでは、BASIC認証やレスポンスの書き換えなどが紹介され、実際の案件でも活用できる可能性があります。次は、Cloudflare CDNとWorkersの併用に挑戦して、特定のパスでのみBASIC認証を設定するなど、より具体的な用途での活用を考えています。Cloudflare CDNでもルールを設定できるので、例えば「wp-admin以下だけWorkersを通る」といった設定も試してみたいと思っています。

Published at: 2023/09/23

Event WordPress 未分類

Kansai WordPress Meetupで、ブロックパターンを使ったサイト作成について紹介してきました。 #WMKansai 2023/09

Kansai WordPress Meetupでは、ブロックパターンを使ったデモサイトやLPの作成についてセッションが行われました。ブロックエディタでは、クエリーループブロックを使用することで、任意のカテゴリーやタグの記事をサイトや記事・固定ページに追加できます。WordPressの立ち位置については、ページ・ウェブサイトビルダー機能を持つOSSのCMSとして紹介されました。また、Toro_Unitのセッションでは、デザインシステムを提供・組み込むCMSとして位置付けられていました。次のWordPress系での登壇はWordCamp Tokyo 2023であり、AI・LLMに関する話題も含まれる予定です。

Published at: 2023/09/23

Cloudflare Hono / Sonik JavaScript SaaS / FaaS

HonoでCloudflare Turnstileのクライアント・サーバー側の処理を実装する

このテキストは、個人的な興味からCloudflare Turnstileの組み込みを試した経験について述べています。Cloudflareエバンジェリスト亀田さんの公開資料が参考になり、TurnstileをHonoで動かすことに挑戦しました。ローカル環境で動かすためにWranglerを使用し、Turnstileのキーを設定します。Honoを使用して認証ページを作成し、Honoでサーバー側の検証処理も行います。Honoの使い方には慣れが必要ですが、ルーティングの部分は書きやすくなりました。HonoとReactを組み合わせるか、Cloudflare PagesのfunctionsとしてHonoをデプロイする方法も考えられます。

Published at: 2023/09/23

kintone Stripe

kintoneのAPIプロキシーでFormデータを送信する方法

Stripe APIをkintoneのApp Proxyから呼び出すための方法を紹介しました。kintoneプラグインのAPIプロキシー機能を使用することで安全にAPIキーを管理できます。Formデータを作成する際にはURLSearchParamsを使用する方法が良いです。また、Stripeとkintoneを連携させるために、kintoneプラグイン経由でStripe APIを呼び出すサンプルコードも紹介しました。

Published at: 2023/09/23

JavaScript kintone SaaS / FaaS

kintoneプラグインで、表示中のレコードを更新するJavaScriptを書く

kintoneプラグインを使用して、ボタンやフォームをアプリに追加することができます。また、ボタンやフォームの操作によってkintoneのレコードを更新することもできます。この記事では、kintoneのREST APIを使用してレコードを更新する方法について説明しています。レコードを更新した後、ページを再読み込みすることもできます。さらに、Spinnerを使用するとローダーを表示することができます。更新した履歴を残すために、kintoneのAPIを使用することもできます。参考になるリンクも掲載されています。

Published at: 2023/09/21

JavaScript Next.js React

Next.js App RouterでuseState / useEffectが動かないときは、Node.jsのバージョンを確認する

Next.js App Routerでサンプルアプリを動かしていたところ、useEffectとuseStateを使った非同期処理が動かない場面に遭遇しました。解決方法自体は、「Node.jsのバージョンをアップグレードする」だけでOKでしたが、また別PCやワークショップで遭遇するかもしれないので、覚書としてまとめます。

Published at: 2023/09/16

4cb692696ba40fb341993d0c132652e8-20230910153846

JavaScript microCMS Next.js React SaaS / FaaS Stripe

Next.jsとmicroCMS + Stripeで簡単なECサイトテンプレートを作った話

microCMSテンプレートのシンプルなECサイトを紹介しています。microCMSやStripeを組み合わせて商品データを連携する方法や、注文時に商品データを作成する方法を解説しています。また、microCMSのWebhookを使用してデータの同期を行ったり、価格が変更された場合の処理方法も説明しています。ただし、カスタマイズやリスク要素についても言及しており、Stripe Elementsを使ったデータ連携の方法も提案しています。今後はテンプレートの更新情報や有料テンプレートの配布を検討しています。

Published at: 2023/09/10

JavaScript microCMS Next.js React SaaS / FaaS

Next.js App RouterでmicroCMSの画面プレビューに対応する

microCMSのテンプレート作成に挑戦する中で、画面プレビューの実装を行いました。Next.js App Routerを使用してmicroCMSのプレビュー機能を実装する方法を紹介します。ngrokを使用してローカルのNext.jsアプリに中継するためのセットアップ方法も紹介されています。microCMSのAPI設定画面でngrokのURLを設定し、Next.js側では公開済みのコンテンツを表示するページを用意する必要があります。また、プレビューコンテンツの取得にはdraft_keyを利用します。

Published at: 2023/08/31