Qiitaのオフライン投稿環境を整備してみた

# 背景

vscodeとqiita-cliでオフラインQiita編集環境を作って投稿していくやる気を（無理やり）引き出していきたいと思います！
会社のConfidentialな情報（ちょっとしたものも含めて）Qiitaに間違って投稿してしまったらいやだなあと思い、今まで記事執筆尻込みしていたため、オフライン環境を準備することにしました。

# 前提

- macOS Ventura13.4.1
- vscode 1.82.2
- qiita-cli v1.1

# QiitaCLIを準備

[Github/qiita-cli](https://github.com/increments/qiita-cli)に沿って準備を実施します。

まずはQiita CLI の記事ファイルや管理をするディレクトリを作成します。
ディレクトリの名前はお好きな名前で。今回はqiitaにします。

```sh
mkdir -p ~/qiita
cd ~/qiita
```

```sh
npm install @qiita/qiita-cli@latest --save-dev
npx qiita version
npx qiita init
```

```npx qiita init 結果
設定ファイルを生成します。

  Creating /Users/username/qiita/.github/workflows/publish.yml
     Created!

  Creating /Users/username/qiita/.gitignore
     Created!

  Creating /Users/username/qiita/qiita.config.json
     Created!

Success! ✨

次のステップ:

  1. トークンを作成してログインをしてください。
    npx qiita login

  2. 記事のプレビューができるようになります。
    npx qiita preview
```

# Qiita のトークンを発行

APITOKENでのアクセス形式みたいですね。
[https://qiita.com/settings/tokens/new](https://qiita.com/settings/tokens/new)でトークンを発行していきます。
権限は「read_qiita」と「write_qiita」を設定すればOKだそう！

発行ボタン押すと一度しかトークンが表示されないのでメモしましょう。

# ログイン

```sh
npx qiita login
```

トークンの入力を求められたら先ほどメモしたものを入力して準備は完了です。

```npx qiita login 結果
以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  <https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli>
  
発行したトークンを入力: {トークン入力}
Hi Ta_Oo!

ログインが完了しました 🎉
以下のコマンドを使って執筆を始めましょう！

🚀 コンテンツをブラウザでプレビューする
  npx qiita preview

🚀 新しい記事を追加する
  npx qiita new (記事のファイルのベース名)

🚀 記事を投稿、更新する
  npx qiita publish (記事のファイルのベース名)

💁 コマンドのヘルプを確認する
  npx qiita help
```

# ローカルプレビュー画面起動

```sh
npx qiita preview
```

![Alt text](image-4.png)

## 実行結果

![image-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536077/ab8b8785-7411-ca2b-2b91-d7b5bf1a6974.png)
![image-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536077/34d12ca3-f066-0b5a-1430-1932528a6d57.png)

Preview画面で操作方法も載っているので忘れても安心。

# 記事管理について

[ローカルでの記事管理](https://github.com/increments/qiita-cli#qiita-cli-%E3%81%A7%E8%A8%98%E4%BA%8B%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)のみか、[Githubでの管理もする合わせ技](https://github.com/increments/qiita-cli#github-%E3%81%A7%E8%A8%98%E4%BA%8B%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)での自由選択ができるようです。

今回はGithubで管理したいニーズがないためローカルでの記事管理のみで実施しました。
編集方法や投稿方法などはまた余裕があれば、まとめてみたいと思います。

# vscodeとの連携

ここまでqiita-cliの準備をしてきましたが、ローカルのエディタと連携しないとさすがにつかいづらいなと。
今回は普段使用しているvscodeで準備したいと思います。

Markdownを書きやすくする拡張機能もたくさんあるため、相性がよさそうです。
今回はvscodeのworkspaceを開いたらPreview`http://localhost:8888`画面が開くようtasks.jsonの設定をしていきたいと思います。>

```~/qiita/.vscode/tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Qiita Preview",
            "type": "shell",
            "command": "npx qiita preview",
            "isBackground": true,
            "runOptions": {
                "runOn": "folderOpen"
            },
            "options": {
                "cwd": "${workspaceFolder}/",
                "env": {},
                "shell": {}
            },
            "promptOnClose": true
        },
    ]
}
```

![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536077/427f5444-79c7-e9b9-f166-72f1df40e786.png)

# 蛇足

## qiita-cliの更新頻度について

本記事作成より1ヶ月前にqiita-cli触ってたのですが、もうマイナリリースが2つも上がっていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3536077/1ee68895-c12d-f008-abe0-5bcb98790f9f.png)

## vscodeのカラーテーマについて

[https://marketplace.visualstudio.com/items?itemName=Increments.qiita](https://marketplace.visualstudio.com/items?itemName=Increments.qiita)を使うとワークスペースを開いた時だけカラーテーマが変わり、Qiitaの記事を書いてる感を出せました。

```~/qiita/qiita.code-workspace
{
  "settings": {
    "workbench.colorTheme": "Qiita",
  }
}
```

# 引用

- [Github/qiita-cli](https://github.com/increments/qiita-cli)
- [【VSCode】外部コマンドをタスク登録して作業効率をアップ](https://note.affi-sapo-sv.com/vscode-task.php)