はじめに
様々な技術情報やトピックを公開していくために、Zenn を使い始めてみました。
これが記念すべき最初の記事です。
最初はつたない部分などいろいろあると思いますが、温かく見守っていただけると嬉しいです。
折角 Zenn を始めてみましたので、導入手順をまとめておきます。
記事の書き方には、ブラウザで書いていくパターンと、GitHub と連携して.md 形式のファイルを作成する形で記載していくパターンがあります。
途中からでも書き方を変えられるようですが、一旦エクスポートするなど手間もありそうですので、技術者らしく最初から GitHub 連携で.md 形式（マークダウン）で書くことにしました。
※マークダウン書きなれていない人は慣れましょう！
GitHub なのでうまくやれば、いずれ記事のプルリク運用とかもできるんじゃないかと思っています。
また、サポートを受けるという、読者からお金をいただくいわゆる投げ銭機能がついていたり、
本のような形にして販売することもできるようです。
あまり、そういった形でお金になることは期待はしていないですが、記事を書くモチぺーションはちょっと上がりそうですね。
編集には VisualStudioCode を使用し、プラグインとして「Markdown All in One」をインストールしています。
Zenn CLI というツールを入れると、プレビューしながら記事が書けます。（すごい！）
実際に行った導入手順は以下の通りです。
必要になるもの
- Google アカウント
- GitHub アカウントおよび記事管理用のリポジトリ
- マークダウンエディタ（何でもいいと思いますが、私は VisualStudioCode を使用しています）
- NPM（npm/npx コマンド使います。普通にインストールしておきましょう）
- Git（普通にインストールしておきましょう）
Google アカウントを作成する
Google のアカウントを作成しておきます。
Zenn は Google アカウントでの登録をのみをサポートしています。
Zenn に登録する
次の URL から、Zenn に登録を行います。
画面に従って登録していけば簡単に登録できます。
画面をスクロールした下のほうに「Join Zenn」という部分がありますので、「今すぐ始める」を押して登録します。
連携する Google アカウントを効かれますので、事前に作成した Google アカウントを選択します。
GitHub でリポジトリを作成する
GitHub で記事登録用のリポジトリを作成します。
プライベートでもパブリックでも利用は可能なようです。
このあたりの設定は意外と悩みました。
以下参考にさせて頂きました。
結論、「zenn-contents」で、プライベート設定にすることにしました。
Readme ファイル等は作成する必要はありません。
ちなみに、ブランチはmasterではなく、mainを読み取るようなので注意しましょう。
※GitHub デフォルト設定だと今は、mainになっていると思いますが。
Zenn 管理画面からリポジトリを連携する
Zenn の管理画面の右上のアイコンから「GitHub からのデプロイ」というメニューがありますので、そちらから連携設定を行います。これも、画面通りに操作を進めていけば簡単に登録できます。
途中で GitHub に遷移してパスワードと連携するリポジトリを聞かれるので入力します。
このとき、全リポジトリを連携するか、特定のリポジトリを連携するか聞かれるので、特定のリポジトリのみを連携するようにしましょう。
GitHub リポジトリを Clone する
GitHub に作成したリポジトリを、ローカル PC の任意のフォルダに clone します。
私は、以下のフォルダにしました。
C:\zenn-contents
git clone https://github.com/[ユーザ名]/zenn-contents.git
Zenn CLI をインストールする
※NPM をインストールしていない方は事前にインストールしてください。
先ほど、clone してきたディレクトリ上で、以下のコマンドを実行します。
npm init --yes
npm install zenn-cli
npx zenn init
プレビュー機能の動作を確認する
次のコマンドを実行することで、ローカル PC 上で node のサーバが立ち上がり、記事を書きながらプレビュー確認することができます。
npx zenn preview
ブラウザで以下の URL にアクセスすることで、プレビュー確認ができます。
http://localhost:8000
記事を書いて保存するだけで、すぐに画面に反映されます。（画面のリロードも不要）
そのほかにも「記事の作成ガイド」や「マークダウン記法」へのリンクもあり、そのあたりを参考にしながら記事を書けます。
記事の作成
新しい記事を作成するときには、articlesフォルダ配下に.md ファイルを置くことで作成できますが、Zenn にタイトルやタグ、属性情報を認識させるための情報を入れる必要があります。
（例）
---
title: "Zennの初期導入手順"
emoji: "📑"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["Zenn"]
published: false
---
コンソールで以下のようにコマンドを実行することで、テンプレートを簡単に作成できますので、コマンドで作ったほうが良いです。
ちなみに、この際にslugという指定が任意でできます。これが.md ファイルのファイル名になり、指定しないと、ランダムで作られるようです。また、これがサイト上の公開 URL にも入るようです。
後から分かりやすいような名前にしておくのがよさそうです。
なお、この slug は同じ名前で被ることができないので、12 文字以上という制限があるようです。（どういう名前をつけるか悩みますね）
以下では、zenn-first-installという名前を付けてみました。
npx zenn new:article --slug zenn-first-install
articles/zenn-first-install.mdといったファイルが出来上がります。
ちなみに、slug を指定せずにコマンド実行したらd1d21fc9d14635.mdのような名前のファイルができました。
後は、出来上がった.md ファイル内にマークダウン形式で記事を書いていけば OK です。
ちなみにこの際に、記事の先頭のpublishedという属性をtrueにすると公開で、falseにすると下書きになります。
最初はfalseでやってみたほうが良いです。
GitHub に push する
記事が完成したら、コミットしてプッシュしましょう。
git add .
git commit -m `最初のコミット`
git push origin [main]
※TortoiseGit 等が使い慣れている方はそちらでもよいかと思います。
Zenn から表示を確認する
記事を GitHub に Push すると、その Push をトリガーとして、Zenn に自動連係されます。
管理画面からArticlesというメニューを選択すると、Push した記事が表示されます。
このときpublishedをfalseに設定していれば、「下書き」と表示されます。
記事の右側のプレイボタン「△」を押すと、プレビュー確認できます。npx zenn previewとはまた少し違って見えるので、確認しておきましょう。
また、この時編集ボタンから編集もできてしましますが、GitHub に PUSH すると上書きされてしまうので、編集はしないようにします。
記事を公開する
記事の準備ができたら、.md ファイルのpublished設定をtrueにして、再度 PUSH を行います。
慣れてきたら、いきなり公開するのもありかもしれません。
- サポートの受付設定（閲覧者からサポート（投げ銭）を受け取りたい場合）
- プロフィールの自己紹介（簡単にでよさそうです）
- カード情報（これは、他の人にサポートしたい場合のみでよさそう）
- お振込先（これはサポートを受け取ったり、本を販売した場合の振込先のようです）
- GoogleAnalytics 設定（GoogleAnalytics で測定 ID(トラッキング ID)を作成して設定しておくとアクセスが測定できるようです）
トッカシステムズは、受託開発や自社製品・サービス開発を行うエンジニアリング企業です。Webサービスやアプリ、電子マネー、認証機能などの開発や、CMSによるWebサイト構築などを行っています。 Java,PHP,React,Nextでの開発や、AWSを用いた基盤構築・運用等を行っています。
Discussion