zenn を試してみたので雑記
急に「zenn 試してみっかー」って気持ちになったので、昨日 コードゴルフを楽しもう ってのを書いてみた
セットアップから記事を書いてみるまで、思ったことの整理でもう一つ書いてみることにした
いくつか書いてみないと「ローカルでの記事管理がどんな感じになるか」とか掴みづらいしね
絶対 n 番煎じだけど
特定のサイトや zenn の特定の機能を批判する意図は一切ありません
「やる前に気になったけど、やらないとわからなかったこと」のまとめです
背景
📓 自分の記事数とか投稿ペースとか
自分でも驚いたけど、どうやら記事を書くのは結構好きらしい
しょーもないのからくだらないのまで、今見たら qiita に 5 年弱で 80 記事 ありました
（けど飲んで一晩で書いたやつとか、存在すら覚えてないしなんなら読んでも思い出さないこともちらほら...）
✍🏻 エディタ
昔は kobito 使ってた時期もあったけど、「結局この世の全てのインターフェースは vi なのよ病」が治らないので、vi 一本で書いてます
💻 記事管理
github の 1 リポジトリで管理する様にしたり、サンプルコードを一緒に git 管理したいので 1 リポジトリ作ってそこの readme.md を投稿したり、迷い気味
今は先述の病ゆえ「自分のローカルディレクトリの readme を吸い上げて、qiita 投稿済みのものは紐づける」という独自 vi plugin で管理している ご苦労さんだぜ
⬆ 記事作成
昔はブラウザ自動リロードの vi plugin 作ったりもしてたけど、最近はなんかもう qiita とか github とか、適当なプレビュー画面に貼って確認してる
途中で別の記事が書きたくなったときはブランチを変えてる
投稿したら github に push してバックアップしておく
🔍 記事検索
自分の記事を探すことがちょいちょいあって、そのときは例えば qiita だとuser:suzuki-hoge tag:dddみたいに探してる
zenn 初投稿まで
基本的に 公式 の説明読めばほぼ全部ちゃんと書いてありました
👍 大した手間ではありませんでした、思ったよりすぐ投稿までたどり着いた
特に、この辺ですね
やってみて思ったことをちょっとピックアップします
細かいけど、気になる人いるかも？という点を...
１. github 連携
１記事になっているけど、そんな大層な手間ではない
いつも通りリポジトリをぽちぽち作って、zenn 側で連携ボタン押すだけ
👍 readme や .gitignore すらいらない
ちなみに、作ったブランチが master で zenn 側のデフォルト監視ブランチが main だった
見てれば気づくけど、うっかりさんは注意
２. cli 入れる
特に警告なく手順通り入れられた
$ npx zenn initしてみると...
$ ls -a1
.
..
.gitignore
README.md
articles
books
node_modules
package-lock.json
package.json
$ cat .gitignore
node_modules
.DS_Store
なんかあるねぇ
👍 楽でいーや
ただarticles/に記事を入れてくってことは、これは記事書くたびにやるわけではないんだな
３. 書く
$ npx zenn new:articleってやると、記事がテンプレでできる
記事を書くたびに実行するのは、こっちだけなのね 理解
👍 冒頭の yaml 部で各種設定をするから markdown で完結するし全部を git 管理できる
公開設定とかまで出来るの、いいね
slug なるものが出てきた、要はユニーク id 的なやつ
$ git status -sb
# master
?? articles/eed3150daa0ceba92f0e.md
んー、articles/直下に今後全部置くんでしょ？
🤔 ファイルシステムだけでは識別できんな...
個人的には時系列順にしてファイル名で記事の識別をしたい
変えていいぞってことだったので変えてみるか
$ git status -sb
# master
?? articles/2020-10-コードゴルフを楽しもう-eed3150daa0ceba92f0e.md
適当なマークダウンを書いて、いざプレビュー！
プレビュー
怒られちゃったわ
slug はこの辺が落とし所かな
$ git status -sb
# master
?? articles/2020-10-golf-eed3150daa0ceba92f0e.md
あとはほとんど素直に markdown を書くだけかな
🤔 やっぱ自動リロードすげー楽だなーw
今時 markdown 書く方法なんていくらでもあるんだけど、xxx editor の vi plugin で記事書くの、しんどいんだよな
これなら素 vi でかけていーや
あとは push したら公開されるぞ！
他思ったこと
やる前に気になったけどやるまでわからなかったこと・やったら気になったこと
繰り返すけど、批判や評価ではないですよ
気になる人がいるかも？と思ったのでせっかくだし手元の雑記を整えてみたんです
記事もいくつか書いてローカルがどうなるか試してみたいしね
認証
新規アカウント作ろうかなーなんてなんとなく思ってたけど、どうやら google アカウント連携のみの模様
🤔 ただ github 連携とかあるんだし、そのうち github アカウントで認証できたりするのかなー？
push したあとぽかーんてなるw
「ん？今どうなってんだ？」ってなったけど、そういえばデプロイ管理画面があるって言ってたな、と
うろちょろして、マイページ的な所のそれを発見
1 分もたたずに行ったと思うけど、終わってた
🤔 ただ、このページから記事自体にはいけないのね？
サイドバーの Articles から行くっぽい
記事の url
多分 slug （というかファイル名）でそのまま作られる
投稿する前に id 的なのがわかるのは、地味に嬉しい
👍 例えば複数記事を並行で書いて相互リンクを張る時とか
せっかく cli ベースだし、push したらすぐ開きたいな ちょっとごにょったらすぐできそう...
...できた！
$ ls articles | percol | sed 's/.md//' | sed 's/^/https::\/zenn.dev\/suzuki_hoge\/articles\//' | xargs -Iurl open url
.mdは付いてても開けたけど、一応消した
強引に url 組み立ててopenで開くだけ ( mac 限定 )
👍 事前に url がわかるのはいろいろと捗っていいね
プレビュー
プレビュー結果がちょっと思ってたのと違った
どっちかっていうとマークダウンビューワだと思った方が近いかも
サイドバーが違うので、topic のアイコンが出なかったり、見出しが右側に出なかったりする
🤔 「zenn に投稿したらどう見えるか」って点で捉えるとちょっと違う
Tech / Idea
実は今回試そうと思ったのはこの分類が面白いなと思ったから
技術投稿サイトに「ゴルフって面白いぜ」って記事を書くのはちょっと違う気がしていたんだけど...
👍 Idea ってスタンスだと気軽に書けて良い気がした
Book
もう結構あって、すげーな！
まだ購入とか中身閲覧はしてないけど、表紙とかすげー凝ってて、なんていうかすげー！
一覧見てるだけでなんとも楽しい
表紙は画像なのかな？
思ってたよりハードル高くないのかも？
そのうちどんな本があるかとか書き方とかを調べてみたいと思う
Topic はさらっと？
現状の記事一覧画面とかだと、各記事の topic って表示されてないみたい
topic 一覧とかもどこから行くのかいまいちわからなかった
勘でうろちょろしたら見つけた → https://zenn.dev/topics
🤔 topic はまだあんまり重視してない、のかな？
投稿前の入力時に Topic を補完したい
ローカルエディタだと難しいかなと思うけど
🤔 java / Javaの表記漏れとか、どの topic だと記事が多いかとか、確認しながらつけたいなと思う
独自マークダウン
１記事書いて改めてマニュアル見てたら気づいたけど、警告みたいなのとか折りたたみとか出来るのいいな！
公式ガイド 通りやったら素直にできた
この記事でも使ってみた
👍 これはローカルプレビューでもちゃんと描画してもらえた
下書き
見出しとか topic アイコンとかなんとなく気になるし、気持ち的には一度は zenn 上でプレビューしたい
published: false
のまま push すれば良いっぽい
👍 限定公開になってるのでそこで確認できる
埋め込みコンテンツ
👍 公式の markdown 解説 を見る限り、いろいろ埋め込めるっぽい
slideshare いいな
作るだけ作って LT の機会を得られなかったスライド、slideshare に投稿して埋め込んでみようかな？
コミット履歴とデプロイ
コミットが気に食わなくて、過去に戻って改竄し直して push してから気が付いた
「あれ、先頭コミットの hash 変わっちゃっうのヤバい？」と
👍 けど結果的には問題なかった
多分差分管理じゃあなくて先端コミットの中身がデプロイされるんだろう
slug とローカルファイル名
🤔 slug 変わったら別記事なので、基本的に一度つけたファイル名は二度と変えられないと思った方が良い
トレードオフだな
まぁ基本的にarticles/の下にフラットに置け、だから頻繁にファイル名やディレクトリ構成変えたりはしないと思うけどね
あとプレビュー画面見る限り、自分の記事管理はプレビューサイドバーとかでやれって感じに見えた
ちなみに気になっていくつか記事を見てみたけど、公式は slug 入れてないっぽいね
英名タイトルだけになってる
他の人は slug だけの人が過半数っぽい気がした
見出し
結構長大ポエムを書くので、見出しが気になってる
コードゴルフを楽しもう の見出しが、#しか作られてない
公式みたいに#と#でサブ見出しみたいにするにはどうしたら良いんだろう？
今見たらなってた
なんだろ？時間かかるの？
ま、いっか！
articles/xxx ディレクトリ
勝手にarticles/golf/12345.mdとか作ってみたけど、やっぱプレビューには無視された
🤔 んー、「記事を書くときに用意するサンプルコード」とかを、どうやって一緒に上手に管理しようかなー
articles/, books/と並べてprojects/でも置いて、同じ slug でディレクトリ分ける、とかかな...
ここはやってみないと掴めないなー
移行・集約
ここは考え中
一箇所にしたいなぁと思いつつ、今まで公開してきた記事はあんまり動かしたくないなぁと思いつつ
中身空っぽにして「こっちに移動しました」するのも違う気がしつつ
きっと「今後書くのは zenn で」みたいにするんじゃあないかなー
総括
👍 思ったより初期コストちょろいぜ
👍 自動リロードいいぜ
👍 push で勝手にデプロイされんのいいぜ
🤔 ディレクトリ構成の融通が利かないぜ
🤔 知人にだけ記事を見せるってのができないぜ
ってところかな
github 連携しなければディレクトリの融通はどうにでもなる気がするけど、そうすると恩恵も減るしなー
自動デプロイ > ディレクトリの融通 という気持ちなので、いろいろ試して合うスタイルを作ることになりそう
なんやかやこういうの好きなので、しばらくは楽しくやってみようかな
Discussion