zennの記事を作成するツール作ってみた
TL;DR
この動画をご覧ください
動機
皆さんは調べ物やエラー解決をする際、どのような順序で進めていますか？
僕はまずGoogleで検索し、QiitaやZenn、Stack Overflowなどのコミュニティサイトを参照し、それでも解決しない場合は公式ドキュメントを読んでいます。
最近では、ChatGPTやClaude.aiといったAIモデルを利用して調べることもあります。
以前は、調べた内容をNotionにメモしていましたが、あることに気づきました。
Notionにメモしても、調べる時には全然参照していないことに。
同じエラーで何度もつまずいているのに、Notionは一切確認していないという現実に気付き、最近は調べ物をした際にはZennに記事を書くようにしています。
Zennに記事を書くことで、次に同じ問題に直面した時に助けになるし（ZennはSEOが強い）、他の人の役にも立つかもしれません。
そんなわけで、最近はZennの記事を書く機会が増えたのですが、やはり記事を書くのには時間がかかります。
そこで、記事を書いてくれるツールを作ってみました。
GitHubリポジトリ
ツールはこちらのリポジトリで公開しています：
用意するもの
- Zennのアカウント
- GitHubのアカウント
- OpenAIのアカウント（APIキーが必要です）
事前準備
1. ZennをGitHubと連携させる
この記事を参考に、ZennとGitHubを連携させます。
レポジトリ名は、できればzennにしておいてください。
2. GitHubアプリを作成
次に、GitHubのAppsを作成します。作成したアプリをフォークしたレポジトリや、Zennに記事を保存するレポジトリにインストールしてください。
詳細はこちらの記事を参考に設定します。
3. GitHub Secretsと環境変数の設定
GitHubに以下の環境変数とSecretsを設定します。
Secrets
-
APP_ID: GitHub AppのID -
PRIVATE_KEY: GitHub Appのプライベートキー
環境変数
-
DESTINATION_REPO: Zennの記事を保存しているレポジトリ（例:Masuda-1246/zenn） -
DESTINATION_REPO_BASE_BRANCH: ベースブランチ（例:main） -
DESTINATION_REPO_HEAD_BRANCH: ヘッドブランチ（例:zenn-maker）
セットアップ方法
- このリポジトリをフォーク
- フォークしたリポジトリをローカルにクローン
-
npm installを実行 -
.envrc.exampleを参考に環境変数を設定-
OPENAI_API_KEY: OpenAIのAPIキー -
OPENAI_MODEL: 使用するOpenAIモデル（例:gpt-3.5-turbo-0125）
-
-
npm run devを実行
使い方
-
localhost:3000 にアクセスします。
-
調べたいことやエラー内容をテキストエリアに入力し、
Sendボタン（またはCtrl + Enter）をクリックします。
-
AIが回答を生成しますので、少し待ちます。
-
問題が解決したら、
Generate Blog Postボタンをクリック。 -
ファイル名を入力し、
Generateボタンをクリック。
-
しばらく待つと、記事が生成されます。
-
記事が気に入ったら、
Save Blog Postボタンをクリック。 -
記事が
data/articlesに保存されます。
-
git pushを実行。 -
Zennの保存先レポジトリにPRが自動で作成されます。
-
PRをマージすると、記事が公開されます。
構成技術
- Next.js
- OpenAI
- GitHub Actions
- V0
まとめ
このツールを使うことで、記事を書く作業が劇的に楽になりました。もはや楽を通り越して怠けているかもしれませんが…。
今回はローカルで動かす簡単なアプリですが、興味がある方はPRを送っていただけると嬉しいです！
フォークして使って問題ありませんが、バグや改善点があれば、ぜひIssueを立ててください。
自分なりにカスタマイズして、使いやすいように改善してみてください！
Discussion