はじめに
毎度のことながら非IT従事者向けの記事です。
ベテランのエンジニアから見れば、回り道のような気もあるかもしれませんが、ご承知おきください。
今回は Qiita CLI を使用したオフラインでの執筆方法について書いていきます。
環境
本記事は以下の環境で検証しております。
- PC：Windows11
- エディタ：Visual Studio Code
事前準備
Node.js のインストール
Qiita CLI は Node.js を利用します。その為、Node.js のインストールが必要です。
インストール方法が分からない方は以下の記事を参照してください。
Qiita CLI のインストール / セットアップ
Qiita CLI のインストール / セットアップがまだの方は以下の記事を参照して、インストールとセットアップを行ってください。
エディタのインストール
マークダウン形式での執筆なので、マークダウンに対応したエディタが必要です。
好みのもので構いませんが、この記事で解説するのは Visual Studio Code を使用したやり方です。記事を完全再現したい方は以下の記事を参照して、Visual Studio Code をインストールしてください。
執筆環境を整える
記事の新規作成・プレビュー・公開などはコマンドを実行する事で行えます。
コマンドを実行するためのツールである「ターミナル」の表示を行います。
-
Visual Studio Code を起動します。
-
エクスプローラー ＞ フォルダーを開く をクリックします。
-
Qiita CLI のインストール時に作成したディレクトリ（フォルダ）を選択し、フォルダーの選択 をクリックします。
-
フォルダーが開きます。
5.画面上部の「表示」＞「ターミナル」をクリックします。
- ターミナルが起動します。
記事の新規作成
-
ターミナルの > の後に以下のコマンドを入力してEnterキーを押します。
npx qiita new [ファイル名]
-
publicフォルダ内にマークダウンファイルが作成されます。
-
ファイルを開いて、記事を執筆します。
記事のプレビュー
-
Ctrl ＋ S で記事を保存します。
-
ターミナルに以下のコマンドを入力して、Enterキーを押します。
npx qiita preview
-
Qiita Preview が開くので、プレビューが見たい記事を選択します。
-
記事のPreview が見れます。
Visual Studio Code 側で記事を保存するとプレビューが更新されます。
画像の表示について
画像は以下のような過程でアップ＆表示できます。
-
Qiita Preview の「画像をアップロードする」をクリックします。
-
お好みの方法で画像をアップロードします。
-
「画像のURLをコピー」をクリックします。
4.コピーした画像のURLをVisual Studio Code に貼り付けて、上書き保存します。
5.Qiita Preview に画像が表示されます。
記事の公開 / 更新
ターミナルに以下のコマンドを入力して、Entrerキーを押します。
npx qiita publish [ファイル名]
こんな感じで記事が公開されます。
Qiita Preview のコマンドを実行すると、ターミナルが自動的にnodeに切り替わります。node だと公開 / 更新の処理ができないので、PowerShell や Command Prompt に切り替えましょう。
ターミナルが複数できると、好きなものを右側から選択できるようになります。
個人的な感想
慣れればそうでもないのかもしれませんが、普段使いするにはちょっと疲れる気もします。
普段はブラウザ書いて、ネット回線ないけど時間潰しに Qiita 書きたいって時だけこれを使うのが私にはちょうどいいかもしれません。