Qiita Engineer Festa20242024年7月17日まで開催中！

株式会社 Panta Rhei

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

Posted at 2024-07-16

自己紹介

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

前段

Qiita Engineer Festa 2024の景品が欲しい！

Qiita Engineer Festa 2024というお祭りがあることを弊社メンバーから聞いたので、ぜひ乗っかろうという形です。

個人賞
- 個人で38記事書いたら豪華景品！(半分の19記事でもちょっともらえるよ！)
Organization記事で期間内のいいね数合計が多いOrganizationを表彰
- 「10人以下」というエントリー枠があるよ！

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

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

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

私の思いとしては

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

といった感じ。

思い立った

以前チラッとQiitaで見た「GithubでQiitaのコードを管理する」を導入すれば、普段の業務と同じ感じで、しかもプルリクを出す喜びを感じられてモチベになるのでは！！！

調べてみた

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

本題

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

以下が順序です。

(Organizationがない会社は)QiitaのOrganization申請
Qiita専用のレポジトリを作成
Qiitaのトークンを取得
レポジトリの中にnode.js環境用のDockerfileを作成する
docker環境内でQiita初期設定！
Organization用の設定

1. QiitaのOrganization申請

QiitaでOrganization申請をしてください！
このURLに詳しく記載があります！
弊社(≒弊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を用いるためのトークンを取得します。
この記事が詳しいため、記事内容に沿ってトークンを取得してください。

4. node.js環境用のDockerfileを作成

小生はPython erなので、js系の環境を直に自前PCに入れるのは憚られます。
そんな方には、Dockerでnode.js環境を作成することをお勧めします。
Dockerの具体的な解説は他記事に譲るとして、実際の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 run2回目以降のDockerfileとなっています。

1回目は

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です。

# 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環境が立ち上がったらまずは

npm install @qiita/qiita-cli --save-dev

を行いましょう。
qiita CLIの諸々をダウンロードしてくれます。

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

npx qiita init

を実行すると、

.gitignore
.github/workflows/publish.yml
qiita.config.json
が生成されます。

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用の設定

まずは記事の雛形を作成してみましょう。

npx qiita new test

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

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では「Everything Analysable」を標榜とし、世の中にあるあらゆる定性的な対象をAIによって定量化する事業をおこなっております。
AIに召し上がっていただく綺麗なデータを作る、データフローを整形するなどの課題や、そもそものAIの内製化等、挑戦したい試みがあればぜひご一報ください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up