会社GithubでQiitaのOrganization記事を管理できるようした話

# 自己紹介
初めまして！株式会社 Panta Rhei CEOのかずさんと申します！Twitterはpantdasistaの名前で活動しています。

# 前段
## Qiita Engineer Festa 2024の景品が欲しい！
[Qiita Engineer Festa 2024](https://qiita.com/official-campaigns/engineer-festa/2024)というお祭りがあることを弊社メンバーから聞いたので、ぜひ乗っかろうという形です。
- 個人賞
  - 個人で38記事書いたら豪華景品！(半分の19記事でもちょっともらえるよ！)
- Organization記事で期間内のいいね数合計が多いOrganizationを表彰
  - 「10人以下」というエントリー枠があるよ！

というものです。表彰されたいし可愛いぬいぐるみも貰えたらもうアドアドのアドです。
<B>全社的に取り組みたい！！！！</B>

## 本記事を書く前の弊社の環境

- 技術記事を書く風土がそんなにない
- 技術力はしっかりにある
  - ほとんど理系情報系orDS系学部出身
  - <B>IPA資格者(応用情報とか)</B>や<B>Google Cloud Professionalの複数資格者</B>もいる
- 祭りだ祭りだワイがやという感じでもない

私の思いとしては
- 技術系企業なので
  「記事を毎日持ち回りで投稿しましょう！」
  というような運用による解決はなんだかなぁという
- 記事を書きたくなるような風土を作りたいなという

といった感じ。

## 思い立った

以前チラッとQiitaで見た「[GithubでQiitaのコードを管理する](https://qiita.com/Qiita/items/32c79014509987541130)」を導入すれば、普段の業務と同じ感じで、しかも<B>プルリクを出す喜びを感じられてモチベになるのでは！！！</B>

## 調べてみた
ただ、紹介されている内容は「個人の記事投稿のGithub管理」といった感じ。
Organizationで進めようというのはそのままやるのが難しそう！

# 本題
「<B>会社GithubでQiitaのOrganization記事を管理できるようにした話</B>」

以下が順序です。
1. (Organizationがない会社は)Qiitaの[Organization申請](https://help.qiita.com/ja/articles/qiita-org-create)
2. Qiita専用のレポジトリを作成
3. Qiitaのトークンを取得
4. レポジトリの中にnode.js環境用の```Dockerfile```を作成する
5. docker環境内でQiita初期設定！
6. Organization用の設定

# 1. QiitaのOrganization申請
QiitaでOrganization申請をしてください！
[このURL](https://help.qiita.com/ja/articles/qiita-org-create)に詳しく記載があります！
弊社(≒弊Organization)の場合、申請してから3日くらいで承認が降りたと記憶しています。
運営の方からメールが来れば申請完了です！

# 2. Qiita専用のレポジトリを作成
Githubで記事を管理するためのレポジトリを作ってください！
弊社の場合のディレクトリ構成は以下のようになっています。

```
Qiita Repository
├── Dockerfile
├── README.md
├── compose.yaml
├── credentials.json
├── images
│   ├── images_for_article1_1.png
│   ├── images_for_article1_2.png
│   └── images_for_article2.jpeg
├── node_modules(モジュール群ディレクトリ)
├── package-lock.json
├── package.json
├── public
│   ├── Article1.md
│   ├── Article2.md
│   └── Article3.md
├── qiita.config.json
└── read_env.sh
```

ここで、以下のディレクトリに関しては、```Qiita CLI```を有効にしてから出現するので、レポジトリ作成時にはなくても大丈夫です。
- credentials.json
- node_modules
- package-lock.json
- package.json
- public
- qiita.config.json

# 3. Qiitaのトークンを取得
QiitaでCLIを用いるためのトークンを取得します。
[この記事](https://qiita.com/Qiita/items/666e190490d0af90a92b#qiita-%E3%81%AE%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8B)が詳しいため、記事内容に沿ってトークンを取得してください。

# 4. node.js環境用のDockerfileを作成
小生はPython erなので、js系の環境を直に自前PCに入れるのは憚られます。
そんな方には、Dockerで```node.js```環境を作成することをお勧めします。
Dockerの具体的な解説は他記事に譲るとして、実際の```Dockerfile```の中身を見ていきます。

```Dockerfile
ARG _TAG='20.5-buster'
FROM node:${_TAG}

RUN apt update \
    && apt install -y \
    vim \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*
WORKDIR /usr/app
COPY ./package.json /usr/app/package.json
RUN npm install

COPY . /usr/app/

RUN npx qiita login --credential $(pwd)
```

上記は```docker run```2回目以降の```Dockerfile```となっています。

1回目は

```Dockerfile
ARG _TAG='20.5-buster'
FROM node:${_TAG}

RUN apt update \
    && apt install -y \
    vim \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*
WORKDIR /usr/app
COPY . /usr/app/
```

のDockerfileで環境を作成し、
Qiitaの諸々の初期設定を行います。5.で、その諸々の解説をします。

また以下は```compose.yaml```です。

```yml
# version: '3.9'

services:
  qiita-local:
    build: .
    container_name: qiita-local
    ports:
      - "8080:8000"
    restart: always
    volumes:
      - "./:/usr/app"
    working_dir: /usr/app
    tty: true
    networks:
      - qiita-public

networks:
  qiita-public:
    driver: bridge
```



# 5.docker環境内でQiita CLI初期設定

Docker環境が立ち上がったらまずは

```bash
npm install @qiita/qiita-cli --save-dev
```
を行いましょう。
```qiita CLI```の諸々をダウンロードしてくれます。

```npx qiita version```で確認が終わったら、次は初期セットアップです。

```bash
npx qiita init
```

を実行すると、
- .gitignore
- .github/workflows/publish.yml
- qiita.config.json
が生成されます。

```bash
npx qiita login
```
でログインを試みると、以下の要求がされます
```
以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli
  
発行したトークンを入力: 
```

ここで、3.で発行したトークンをペタッと貼ってEnterを押してください。

```
Hi {QiitaのID}!

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

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

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

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

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

これが出てきたら成功です！

# 6. Organization用の設定
まずは記事の雛形を作成してみましょう。

```bash
npx qiita new test
```

を実行すると、```publis```レポジトリ内に、```test.md```というファイルができます。

```markdown:test.md
---
title: test
tags:
  - ''
private: false
updated_at: ''
id: null
organization_url_name: null
slide: false
ignorePublish: false
---
# new article body
```
記事は```# new article body```以下にマークダウン形式で書いていきます。
```--```で囲まれた部分は記事の設定を表現する場所です。
ここでOrganization記事を出す時は、
```organization_url_name```の部分を入力します。

ここには```https://qiita.com/organizations/{organization_name}```の```{organization_name}```にあたる部分を書きます。これでOrganization記事を投稿することができます。

# Organization記事が書けた
以上でOrganization記事が書けます。各個人のトークンの運用など、課題はそれぞれあるものの、一旦はこれでネリネリ書いていくのが良いのかなと思います。
素敵なQiitaライフをお送りください！

# 紹介
[株式会社 Panta Rhei](https://www.pantarhei.co.jp)では「Everything Analysable」を標榜とし、世の中にあるあらゆる定性的な対象をAIによって定量化する事業をおこなっております。
AIに召し上がっていただく綺麗なデータを作る、データフローを整形するなどの課題や、そもそものAIの内製化等、挑戦したい試みがあればぜひご一報ください！