つくったもの

kula (ウェブアプリ)

サイボウズ株式会社の提供している業務改善プラットフォーム「kintone」との連携を想定したウェブアプリを運営しています。

kintone とは、業務で使用する様々な情報をアプリ単位で管理するプラットフォームです。類似するアプリとしては Microsoft の Power Apps や Google の AppSheet が近いと思いますが、SFA や CRM として活用されることも多く、SalesForce や Zoho CRM と比較されることもあります。

kula ではこの 1 アプリを CMS のように捉え、API を介してデータを取得し、ブログやオウンドメディアを作成することができるサービスです。

サイトはこちら

システム構成図 システム構成図

トップ画面 トップ画面

技術スタック

  • 言語: TypeScript, Node.js

  • フレームワーク: React, Next.js

  • ツール・サービス: Firebase(認証機能・データベース・ストレージ), Sentry(エラーログ)

kintone プラグイン

kintone に用意されているエコシステムの 1 つとして、プラグインがあります。プラグインの構成は Chrome の拡張機能に似ており、HTML、CSS、JavaScript で構成され、導入することで、kintone の機能を拡張することができます。

このプラグインをオープンソースで公開しており、多くの法人に導入いただいています。

紹介ページはこちら

開発とリリースフロー

開発とリリースフロー

ポートフォリオ(このサイト)

Next.js を用いて作成し、Cloudflare Pages にデプロイしています。

API Routes のみ Edge ランタイムで動作させ、それ以外のページは SSG で生成しています。

また、現在値を取得する必要のあるページについては、 Cloudflare Workers を使用して、Vercel の ISR(Incremental Static Regeneration)を部分的に再現しています。

kintone プラグインの利用者数は sqlite(Cloudflare d1)を使って収集・管理していますが、訪問者がこのサイトにアクセスする度、データを集計し表示するのはリソースを多く消費してしまいます。

これを解決するアプローチはいくつかありますが、このサイトでは各エンドポイントに ttl を設定し、sqlite から取得・集計した情報を Cloudflare KV へキャッシュし、ウェブサイトに表示するようにしています。

バージョンについて

何度か作り直しています。

学習を兼ねて作ることが多かったですが、現在は自分の目標を人の目に触れる場所に置き、目標を達成するためのアウトプットの場として利用しています。

技術スタック

技術スタックの変遷は以下の通りです。

バージョンフレームワークホスティング
v1Gatsby.jsNetlify
v2Next.jsVercel
v3Next.jsCloudflare Pages
v4Next.jsCloudflare Pages(Edge ランタイム)

ブログ

何度か作り直しているブログです。2024 年 5 月に 10 万 PV/月を達成しました。

サイトはこちら

技術スタック

作り直す度に、その時関心のあるフレームワークを採用して作りました。

変遷は以下の通りです。

バージョンフレームワークホスティングコンテンツ管理システム
v1Gatsby.jsNetlifyContentful
v2Next.jsVercelContentful
v3Next.jsCloudflare PagesCDN
v4Astro.jsCloudflare PagesCDN

その他のブログ

発信のコアとなるブログに加えて、いくつかのブログを運営しています。