💛

Jotai Friendsを構成する使用技術等の概要紹介

2022/02/22に公開

Jotai Friendsを立ち上げてからあっという間に2ヶ月が経ちました。

https://jotaifriends.dev

今回は上記サイトの技術スタックと使用しているサービス等を紹介したいと思います。
Jotai Friends立ち上げについてのポエムはいつか書こうと思います。

上記サイトへメールアドレスの登録、Twitterアカウントのフォローして頂けると泣いて喜びます。よろしくおねがいします!
https://twitter.com/jotaifriends

そしてJotaiをまだ使ったことがない人は是非この機会に触れてみてください🙌

Next.js on Cloud Run

Next.jsを使ってCloud Runにデプロイしています。一人で作っていることや速度重視などの都合でTSではなくJSで書いてます。エディターの補完に助けられて辛うじて書き続けられてます。

特段変わったことをしてないので起動が若干遅いのが残念ポイントです。CDN噛ませられるっぽい?ので今後やっていきたいです。こんなやり方あるよ、などあれば教えて頂ければです🙏
https://firebase.google.com/docs/hosting/cloud-run

あまり珍しいものでもないのでこのくらいで。

Chakra UI for UI Component Library

もう手放せないです。今回始めてライトモード/ダークモードを使ってみました。

https://chakra-ui.com/

Figma for Page Designing

デザインにはFigmaを使ってます。書き出しやパスツールが簡単に使えて重宝しています。
Jotaiはおばけの絵文字が採用されたのが始まりでおばけのマスコットですので、2人のおばけでatomを掲げてみました。

くるくる回ってたりするのはSVG書き出ししてその中にanimateTransform書いたり、chakra-uiのanimation + keyframes使ったりしてます。

https://twitter.com/tell_y_t/status/1490445197448298503

https://twitter.com/jotaifriends/status/1491635131450204161

Prismic.io for Headless CMS

Headless CMSのPrismicを採用しています。色々無制限で無料で使わせてくれるということで採用しました。

https://prismic.io/
https://prismic.io/pricing

個人的に初めてのHeadless CMS体験 + Next.jsのISRも初めて使ったので楽しく書けました。
ガッツリとした記事は今の所Zennにお世話になってる状況ですが、Topics TimelineはPrismicにコンテンツを追加してツイートっぽく表現しています。

https://jotaifriends.dev/topics-timeline

Prismicの採用からやった作業記録はこちら
https://zenn.dev/tell_y/scraps/fff7e45432b089
https://zenn.dev/tell_y/scraps/62b6ba3de1ab18

Cloudinary for Media Storage

Topics Timelineの1つ1つをTwitterで共有したいなぁ、目を引くようにしたいなぁ、と考え、OG画像を動的生成するようにしました。実装よりOG画像のデザインに一番時間がかかりました。
動的生成ネタは世に溢れてると思うのでデザインについては別途なにか記事を書こうかなと思います。

例えばTwitterだとこう見えます。
https://twitter.com/jotaifriends/status/1494296792238014466

この生成画像の置き場所としてCloudinaryを採用しました。これもまた初めてこういうことをしたので調査からでしたが、Zennが採用していることに気が付き右に倣えしました。

https://zenn.dev/tell_y/scraps/bd8020aa755d15

https://cloudinary.com/

Convertkit for Sending E-mails

メール配信には、Convertkitを採用しています。はじめはSendgridなどを使おうと思っていたんですが、Remixのメルマガがこれを採用しており、十分に活用できそうだったので右に倣えしました。unsubscribe機能を自前で用意するのは面倒だなと思ったのが大きかったでしょうか。

https://convertkit.com/

Emojicom for Getting Feedbacks

埋込み型のフィードバック収集サービスにEmojicomを採用しました。こういうサービスは大手がシェアを握っているのかリッチすぎたり、それゆえに有料のものばっかりと、手軽に使えるものを探すのに苦労しました。
最近は絵文字を活用するのが流行ってる印象だったので、それに習いました。個人的にも絵文字フィードバックは気が楽な方なので。

https://emojicom.io/

余談ですが、日本製では最近こんなサービスを知りました。大企業さん向けですかね。
https://karte.io/solutions/moment-reaction/

おわりに

ざっと並べましたが、こんな感じでJotai Friendsは構成されています。機能追加もやっていきたいんですが、まずはコンテンツ作りを地道にがんばります。(Apple税払ってるのでExpoでモバイルアプリも作ってみたい)

対象がwebエンジニア、しかも内容がReactの状態管理ライブラリのコンテンツサービス、なのでユーザー層激狭ですが、"日本"で盛り上げていきたいと思ってます。お便り待ってます!よろしくおねがいします!

おまけ1

最近はReduxユーザーをターゲットにサンプルコードをJotaiで書き換えたりしてます。コーディングビデオなんかも撮ってみました。そもそもフォロワーが少ないので反応が無いのは当たり前ですが、少しでも需要のあるものから提供していきたいのでフィードバック頂けると嬉しいです・・・ 🙇‍♂️🙇‍♂️🙇‍♂️

https://twitter.com/tell_y_t/status/1494905501213409282

おまけ2

Jotai入門はこちらをどうぞ!
https://zenn.dev/tell_y/articles/7a5bd147d34ec2

ボトムアップ型とは?
https://zenn.dev/tell_y/articles/d714f9c16c1d3a

ReduxのカウンターアプリをJotaiで書き換え
https://zenn.dev/tell_y/articles/9a2339eb7e83cf

Jotai Friends

Discussion