個人開発で始まった情報共有サービス「Zenn」はいかにして作られたのか?【デブサミ2021】

個人開発で始まった情報共有サービス「Zenn」はいかにして作られたのか?【デブサミ2021】 サムネイル

今回は「個人開発で始まった情報共有サービス「Zenn」はいかにして作られたのか?【デブサミ2021】」についてご紹介します。

関連ワード (アプリケーション開発、イベントレポート、デブサミ等) についても詳細と、関連コンテンツとをまとめていますので、参考にしながらぜひ本記事について議論していってくださいね。

本記事は、CodeZine様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


catnose氏
catnose氏

 なお、本セッションは「Developers Summit 2021アワード」においてベストスピーカー賞1位を受賞している。

用途に応じた投稿形式を持つZenn

 「Zennは、エンジニアのための新しい情報共有コミュニティです。ひとつの大きなコンセプトとして、良いコンテンツを書いた人が対価を得られることを掲げています」と、catnose氏は、その特徴を語った。

 Zennには、目的や用途に応じて、3つの投稿形式がある。

 「Articles」は、記事形式で投稿するものだ。ひとつのテーマについて、ひとつのページで完結する内容を書いて公開する。記事は、サポート機能を備えており、無料で書いた記事に対して、読者が「この記事いいな、参考になったな」というときに、自らの意思でお金を払うことができる。

 「既存の記事投稿サービスであるnoteに、このサポート機能が付いていて、技術という分野と相性がいいなと思いました。開発中に問題にぶちあたったとき、検索してドンピシャの解説記事が見つかると、本当に感謝したくなることがありますよね。お金を払いたい、受け取ってください、みたいな。僕自身、そのくらい感謝したくなることがあって、このサポート機能を付けることにしました」

 「Books」は、その名の通り、本の形にまとめるものだ。ひとつのテーマについて、複数のチャプターに分けて、詳しく体系化して書いていく。書いた本は、Web上で読むことができる形式になり、値段を付けて販売できる。プラットフォームの利用料や販売手数料を除いても、販売価格の8割以上が著者に配分されるという。

 「Scraps」は、比較的最近リリースされたメモ機能だ。スレッド形式で、小さい単位のコメントをどんどんつなげることで情報をまとめていく。何か問題や不明点があったとき、調べながら書いていくことで、試行錯誤の記録を残していくことができる。

 「日々手を動かしていると、毎日のように問題にぶつかりますよね。それをあとから記事にしようと思っていても、数日たって、あれ何だっけ? となって、だいたい面倒になったりします。なので、今まさに取り組んでいる物事について、すぐに書いちゃおう。そういう発想で、この機能を付けました。『こんなエラーが発生した』というようなことをとりあえずスクラップする。何か分かったことがあれば、そのたびにコメントを書いていって、解決策にたどり着いたら、それも書いていきます。GitHub Issuesみたいにオープンとクローズというステータスがあるので、問題が解決したらクローズできます」

 このような投稿形式を組み合わせることで、まずは気軽にScrapsで調べものをメモして、解決策がまとまったらArticlesとして記事にして、詳しく理解できたらBooksで体系的に記述するという流れをイメージしているのだ。

用途に応じた3つの投稿形式を持つZenn
用途に応じた3つの投稿形式を持つZenn

Zennの開発をどう進めたか

 「なぜZennを作ったのかよく聞かれるのですが、一番の理由は、自分が欲しかったし、自分で作ってみたかったというのが大きいです」

 既存のサービスではあまり満足できなかったので、自分の考えた、こうだったらいいなという要素を盛り込んだサービスを作りたかったのだというのだ。さらに、時代の流れとして、書き手や作り手が対価を得られるサービスが普及し、当たり前になってきたことも大きい。例えば、YouTubeのスーパーチャットや、記事についてはnoteが人気を集めている。しかし、「技術記事を書くのには、noteは最適なプラットフォームではないと思う」とcatnose氏は言う。

 Markdownに対応していないというのもあるが、どちらかというと誰もが読めるポエムのような記事が求められるプラットフォームになっている。そのため、ゴリゴリの技術記事を書いても、どこかに流れてしまい、読み手も探しにくいというのだ。

 「そこで、書き手が対価を得られるような、技術記事の投稿プラットフォームにチャンスがあるのではと考えました。しかし技術系の情報共有サービスでは、Qiitaという巨大な競合がいて、かなり定着しています。そこで、意図的にQiitaのことはあまり参考にしないようにしました。競合ばかり意識していると、いつのまにか競合と同じようなサービスになってしまうことがよくあると思っているからです」

 Zennの開発は2019年の夏頃からスタートし、2020年の1月ごろにはリリースできる状態になっていた。ちょうどそのころ第一子が生まれて、両方に愛情を注ぐのは難しいだろうと考えて、そこから半年くらい、ゆるゆると開発を続けていたそうだ。

 「スタートアップの文脈では、“たぶん動くと思うからリリースしようぜ”というセリフがありますが、Zennではある程度作り込んでからリリースすることにしました。いまWebサービスやアプリが増えてきて、乗り換え先も多い。便利なサービスが増えている分、ユーザーの目も厳しくなっています。10年前だったら受け入れられたバグが、今は受け入れられない。今回の場合は、お金も絡んできますし、大きな競合がいるレッドオーシャンなので、ある程度作り込んでからリリースしました」

Zennの開発からリリースまでのタイムライン
Zennの開発からリリースまでのタイムライン

巨大アプリの実装例を参考にするため、ZennではRailsを採用

 続いて、Zennのシステム構成の説明に移った。バックエンドはRuby on RailsのAPI onlyモードを使用して、それをGoogle App Engineで運用しているという。

 「なぜ、Ruby on Railsを選んだのかとよく聞かれますが、Rails製のオープンソースアプリがたくさんあるからです。MastodonやGitLab、dev.toなどの超巨大アプリのソースコードを参考にできるのが、非常にありがたいと思っています。

 個人開発でやっていると、あまり周りに聞けないので、自力で調べることが増えてきます。そういうときは、GitHubでプロダクションレベルの事例を参考にしています。今回は、かなり大きなサービスになりそうだったので、自分が一番早く実装できそうなRailsを選びました」

 フロントエンドはNext.jsを利用して、それをVercelにデプロイしているという。

 「Vercelは、Next.jsを開発している企業が提供しているのでとても相性がいいです。例えば、Incremental Static Regeneration(ISR)という機能では、生成されたデータをキャッシュしてくれます。Next.jsをVercelにデプロイしていると、次のリクエストではキャッシュしたデータをエッジサーバーからCDN配信してくれるので、とても早くなります。ただし、動的なコンテンツをキャッシュする難しさもあります。例えば、プライバシーに関わる情報はキャッシュしないようにしているといった具合です」

 さらにZennの特徴として、投稿者が、GitHubリポジトリでコンテンツを管理できる点があるという。リポジトリにMarkdownファイルを配置すると、それが自動的にZennに反映されるのだ。ローカルでは、自分の使いやすいテキストエディタを使って記事を執筆できる。

 「ローカルで記事をプレビューしたほうが書きやすいので、Zennでは、専用のCLIを用意しています。このzenn-editorというツールはオープンソースで公開しており、Node Package Manager(NPM)に公開することで、zenn.devのフロントエンドと共通化を図っています。GitHubとの連携は、今後のZennでとくに注力していく部分です」

エディタで書いた内容がブラウザでホットリロードされる
エディタで書いた内容がブラウザでホットリロードされる

 「Zennは公開した直後から大きな反響がありました。PV数もユーザー数も想定以上で、たしか1週間で1万ユーザーを突破したと思います。ただ、まだ今の段階では数字自体はあまり気にしていません。それよりも、嬉しかったことは、内容の濃い記事や本が数多く投稿されたことです。また、自分が愛読していたブログや本の著者が、Zennで投稿してくれたことが、なにより嬉しかったです」

 なおZennは、2021年2月からクラスメソッドのサービスになった。catnose氏もクラスメソッドのメンバーとして、引き続き、Zennの開発と運営に携わっているそうだ。catnose氏は最後に次のように語って、講演をしめくくった。

 「Zennには、ユーザーにとっても自分にとっても、取り組まなければいけない問題が数多くあります。勝負はこれから。納得のいくサービスにするため、改善を重ねていき、時間をかけて育てていきたいと思っています」

COMMENTS


Recommended

TITLE
CATEGORY
DATE
AppleのEV開発、協業先探しが難航? 日産も交渉不調か
IT関連
2021-02-26 02:02
大日本印刷が指紋センサー搭載FeliCaカードを開発、2021年度内の製品化を予定
セキュリティ
2021-02-09 14:39
アップルがApple Teacher Portfolioの認定、アプリ「スクールワーク」と「クラスルーム」のアップデートを発表
EdTech
2021-03-25 09:24
ライフがネットスーパーの新会社 配送網の整備や専用アプリの開発など
企業・業界動向
2021-04-09 16:29
第27回:中堅企業のクラウドシフトが鮮明に
IT関連
2021-04-15 20:09
ビジネスインパクトからインフラまで可視化を実現するAppDynamicsの詳細に迫る
IT関連
2021-01-29 13:43
きらぼし銀行、フィンテックのサービスでマネージドセキュリティサービスを導入
IT関連
2021-02-10 16:32
フロントエンドエンジニアになりたい人の Webプログラミング入門
Udemy
2021-02-10 16:32
宣言後の人出、東京駅と渋谷駅で減少度に差 その理由は?
ライフ
2021-01-14 09:58
NVIDIA、AIを活用してデータセンターのサイバー攻撃を検出・防止する「Morpheus」を発表
IT関連
2021-04-16 13:01
米国の中小起業や地方自治体にも中国ハッカーによるゼロデイ攻撃の被害
セキュリティ
2021-03-16 05:20
Dart言語のフレームワーク「Flutter 2」公開。単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。WebAssemblyによるレンダリングエンジン搭載
Dart
2021-03-08 17:42
クルマを移動式オフィスに 日産がキャラバンのコンセプトモデルを発表
企業・業界動向
2021-01-19 23:30
AI契約書レビュー支援や契約書管理クラウド提供のLegalForceが30億円を調達
リーガルテック
2021-02-18 15:36
スタートアップのベストロゴ11(Y Combinator W21バッチ編)
その他
2021-04-06 21:41
Vue.js入門 基礎から実践アプリケーション開発まで
amazon
2021-04-06 21:41