Jotai Friendsを立ち上げてからあっという間に2ヶ月が経ちました。
今回は上記サイトの技術スタックと使用しているサービス等を紹介したいと思います。
Jotai Friends立ち上げについてのポエムはいつか書こうと思います。
上記サイトへメールアドレスの登録、Twitterアカウントのフォローして頂けると泣いて喜びます。よろしくおねがいします！
そしてJotaiをまだ使ったことがない人は是非この機会に触れてみてください🙌
Next.js on Cloud Run
Next.jsを使ってCloud Runにデプロイしています。一人で作っていることや速度重視などの都合でTSではなくJSで書いてます。エディターの補完に助けられて辛うじて書き続けられてます。
特段変わったことをしてないので起動が若干遅いのが残念ポイントです。CDN噛ませられるっぽい？ので今後やっていきたいです。こんなやり方あるよ、などあれば教えて頂ければです🙏
あまり珍しいものでもないのでこのくらいで。
Chakra UI for UI Component Library
もう手放せないです。今回始めてライトモード/ダークモードを使ってみました。
Figma for Page Designing
デザインにはFigmaを使ってます。書き出しやパスツールが簡単に使えて重宝しています。
Jotaiはおばけの絵文字が採用されたのが始まりでおばけのマスコットですので、2人のおばけでatomを掲げてみました。
くるくる回ってたりするのはSVG書き出ししてその中にanimateTransform書いたり、chakra-uiのanimation + keyframes使ったりしてます。
Prismic.io for Headless CMS
Headless CMSのPrismicを採用しています。色々無制限で無料で使わせてくれるということで採用しました。
個人的に初めてのHeadless CMS体験 + Next.jsのISRも初めて使ったので楽しく書けました。
ガッツリとした記事は今の所Zennにお世話になってる状況ですが、Topics TimelineはPrismicにコンテンツを追加してツイートっぽく表現しています。
Prismicの採用からやった作業記録はこちら
Cloudinary for Media Storage
Topics Timelineの１つ１つをTwitterで共有したいなぁ、目を引くようにしたいなぁ、と考え、OG画像を動的生成するようにしました。実装よりOG画像のデザインに一番時間がかかりました。
動的生成ネタは世に溢れてると思うのでデザインについては別途なにか記事を書こうかなと思います。
例えばTwitterだとこう見えます。
この生成画像の置き場所としてCloudinaryを採用しました。これもまた初めてこういうことをしたので調査からでしたが、Zennが採用していることに気が付き右に倣えしました。
Convertkit for Sending E-mails
メール配信には、Convertkitを採用しています。はじめはSendgridなどを使おうと思っていたんですが、Remixのメルマガがこれを採用しており、十分に活用できそうだったので右に倣えしました。unsubscribe機能を自前で用意するのは面倒だなと思ったのが大きかったでしょうか。
Emojicom for Getting Feedbacks
埋込み型のフィードバック収集サービスにEmojicomを採用しました。こういうサービスは大手がシェアを握っているのかリッチすぎたり、それゆえに有料のものばっかりと、手軽に使えるものを探すのに苦労しました。
最近は絵文字を活用するのが流行ってる印象だったので、それに習いました。個人的にも絵文字フィードバックは気が楽な方なので。
余談ですが、日本製では最近こんなサービスを知りました。大企業さん向けですかね。
おわりに
ざっと並べましたが、こんな感じでJotai Friendsは構成されています。機能追加もやっていきたいんですが、まずはコンテンツ作りを地道にがんばります。（Apple税払ってるのでExpoでモバイルアプリも作ってみたい）
対象がwebエンジニア、しかも内容がReactの状態管理ライブラリのコンテンツサービス、なのでユーザー層激狭ですが、"日本"で盛り上げていきたいと思ってます。お便り待ってます！よろしくおねがいします！
おまけ1
最近はReduxユーザーをターゲットにサンプルコードをJotaiで書き換えたりしてます。コーディングビデオなんかも撮ってみました。そもそもフォロワーが少ないので反応が無いのは当たり前ですが、少しでも需要のあるものから提供していきたいのでフィードバック頂けると嬉しいです・・・ 🙇♂️🙇♂️🙇♂️
おまけ2
Jotai入門はこちらをどうぞ！
ボトムアップ型とは？
ReduxのカウンターアプリをJotaiで書き換え
Jotai Friends のテックブログです。 React状態管理ライブラリJotai(jotai.org)を新たな選択肢に。 エンジニアの皆さんが安心してJotaiを採用できるように支援します。 Powered by twitter.com/t6adev
Discussion