Qiita CLI を使って記事投稿の第一歩を踏み出してみた
はじめに
初めまして。都内で SESとして働いているwebエンジニアです。
エンジニア歴 3 年目にしてようやく「記事投稿」なるものをしてみようと思い、今回 1 本目を書き始めました。せっかくならqiita-cliを使って記事をGit管理したりDockerで仮想化したりと思っていますので、もし機会があればそれらの記事も書いてみたいと思います。
この記事でできること
この記事を読むことで、以下のことができるようになります。
- Qiita CLI を使って記事を投稿できるようになる
- 初めての記事投稿のハードルを下げられる
- 記事投稿の第一歩を踏み出せる
対象読者
- 記事投稿をしたことがない人
- 記事投稿に興味はあるが、第一歩が踏み出せない人
- Qiita CLI を使って投稿することに興味がある人
Qiita CLI とは
Qiita CLI とは、手元の環境で記事の執筆・プレビュー・投稿ができる Qiita が提供している公式ツールです。
作成した Markdown ファイルをコマンドで投稿できるため、エンジニアとして慣れ親しんでいるエディタを使って「コーディング」のように記事を書くことができます。
GitHub Actions による自動投稿もサポートしているので、「記事投稿」ではなく「コミット」や「PR のマージ」といった、エンジニアの日常作業寄りの操作にすることで、「記事投稿」へのハードルが下がるのではないかと思います！
詳細は公式記事をご参照ください：自分のエディタで記事投稿ができる、Qiita CLI の使い方
環境・前提
- PC
- .md ファイルを編集するための任意のエディタ（VSCode、Vim など）
- Node.js 18.0.0 以上
- Node.js のインストール方法は公式サイトを参照してください
- インストール済みかどうかは
node --versionコマンドで確認できます
手順
1. Qiita にログイン（サインアップ）する
Qiita にログイン、または新規登録してログインします。
Qiita は GitHub、Google、X（Twitter）での OAuth（ユーザーのパスワード情報を他のサービスに渡さずに、外部のアプリケーションにアクセス権を与える仕組み）をサポートしているので、アカウント作成自体はかなり簡単に行えます。
2. メールアドレスを認証する
Qiita に記事投稿するためには、メールアドレス認証を行う必要があります。
設定を保存すると、登録したメールアドレスに認証メールが飛んでくるので、そこにあるリンクをクリックすれば OK です。
※通知設定はお好みでチェックしてください。自分は通知が苦手なので、「編集リクエスト」「リンク」「いいね」以外はすべて外しました
3. Qiita CLI による記事投稿
※ここからは上記で紹介した、Qiita CLI の使い方の公式記事に書かれていることとほぼ同じです。
3.1 Qiita CLI のインストール
npm install @qiita/qiita-cli --save-dev
3.2 Qiita CLI のセットアップ
下記のコマンドによって初期化することで、
- .gitignore
- GitHub Actions のワークフローファイル
- ユーザー設定ファイル（qiita.config.json）
が生成されます。
npx qiita init
3.3 Qiita CLI のログイン
下記のコマンドから Qiita CLI のトークン発行画面へ飛び、トークンを生成して登録を行います。
npx qiita login
Qiita CLI トークン発行ページ
※read_qiita と write_qiita にチェック
トークン情報
トークン情報が生成されるので、コピーして CLI に貼り付ける
3.4 記事の作成
下記コマンドで記事を新規作成できます。
※本記事はコマンドで作る前に書き始めたので、ファイルをpublicディレクトリ配下に移し、記事の設定（Front Matter）だけ追記しました
npx qiita new ${ファイル名}
3.5 記事のプレビュー
下記コマンドを実行し、ブラウザで http://localhost:8888 アクセスすることででプレビュー画面が表示されます。
プレビュー画面では、画像のアップロードも行えます。
npx qiita preview
3.6 記事の投稿・更新
下記コマンドで記事を投稿できます。
※記事の削除は Qiita CLI ではできないので注意
npx qiita publish ${ファイル名}
ハマったポイント
- 画像を投稿するためには、結局一度ブラウザを開かなければいけない
当初、画像は[画像](image.png)のような形式で埋め込んでいましたが、実際に投稿するためにはプレビュー画面から画像をアップロードし、S3 のアクセスリンクを取得して img タグに埋め込む必要があることに気付きました。
手順としては以下の通りです。
-
npx qiita previewでプレビュー画面を開く - プレビュー画面の画像アップロード機能を使用して画像をアップロード
- 生成された S3 の URL をコピー
- Markdown ファイル内の画像パスを
<img src="S3のURL">の形式に置き換える
ローカルの画像はもちろん参照できないので、当然といえば当然なのですが、結局ブラウザ操作が必要なら CLI コマンドで完結できない...。少し残念。
任意だけどおすすめなこと
-
VSCode に markdown のフォーマッタをインストールし、保存時に自動フォーマットをかける
→ 記述スピードのアップとストレスの軽減につながります -
ドラフトの作成
→ 初めの一歩は何を書いていいか、どう書いていいか分からないので、AI におすすめのジャンルや書き方のドラフトを出力してもらい、そのフォーマットをコピペして書き始めました -
リポジトリ管理
→ 自分は Git でコミットが積みあがっていくのが好きなので、今回の技術記事自体もリポジトリ管理することにしました。ゆくゆくは Docker による仮想化や Cursor のプロンプト等も盛り込んで、投稿しやすい環境を整備していきたいと思います。
まとめ
実際に記事を書いてみて、
- Qiita CLI だけでは完結できないので、結局ブラウザを開く必要がありそうなこと
- GitHub Actions で自動化したり、Docker で環境構築をしたりといったプラスアルファなことがどんどん思いついたこと
が分かりました。特に 2 については、今まで 0→1 でやりたいことが見えてこなかった自分にとっては大きな収穫で、スモールスタートしたことによる恩恵が受けられそうだなと感じました。
また、本記事は実際は下記のような流れで書いていました
- Qiita CLI を使った記事投稿手順の確認（公式ページ）
- ChatGPT に相談して、ジャンルとドラフトの相談
- ドラフトをもとに Markdown ファイルを用意
- 「タイトル」、「対象読者」、「はじめに」を書き始める。後はハンズオンしながら追記していく
- 完成した Markdown ファイルを AI（自分は Cursor）に投げて、添削してもらう
- 最後に Qiita CLI で記事投稿して終了
記事の構成やコンテンツが、記事投稿初心者の最も悩めるポイントだと思うので、そこら辺を AI に投げることで、まずは「記事投稿」へのハードルを下げることが有効だと思います！
（あまり多用すると「自身のスキルアップ」や「知見の共有」といった目標とズレてしまうので、距離感には気を付けていきましょう）
最後に
ここまで読んでいただいてありがとうございました。これからはエンジニアの皆様に読みやすく有用な記事を届けていきたいと思います。