やむのこばなし

ひっそりと続けてる人を重んじるエンジニアのブログ

技術ブログを何で書こうか迷いに迷った結果はてなだった。

思考

f:id:noikari:20220213160625p:plain

アウトプット全盛期かつ、ツールに溢れたこの世界でどのように技術ブログを書こうか迷ったことはありませんか。

自分がどのサービスを使うか迷った挙げ句に、結局はてなに戻ってきた話の紆余曲折になります。

1. 逡巡編

1.1. アウトプットしたい

エンジニアなら誰しもが考えます。アウトプットをしたいということです。

「インプットをたくさんしても、アウトプットをしなければエンジニアとして差別化にならない」といった感じで言われることがあります。

ちまたではアウトプット駆動開発なんて言葉も存在するようです。xx駆動開発はエンジニア大好きですからね。

でもまあ、ツールが書きやすくないとアウトプットも捗らないわけです。（言い訳じゃないよ）

たとえば、メモ帳でアウトプットするのと、適度なツール（VS Code, Typoraなど）を使用して書くのでは、雲泥の差です。

これはブログサービスやブログシステムにおいても同じ事が言え、結局のところ技術ブログは何で作れば良いのって話に帰結します。（当然ですね）

答えとしては 【自分が使いたいものを使って作る】 なんですが、自分自身この回答が一番嫌いです。

自分は背中を押してもらいたくてGoogleで「技術ブログ オススメ サービス」とかで検索してるのにこの回答が出てきたら頭にきます。

なので、前置きがちょっと長くなりましたが、自分が今まで通ってきた軌跡に所感を織り交ぜながら、なぜはてなブログに行き着いたのかを説明します。

1.2. ブログに求めるもの

1.2.1. 書きやすさ

当然です。誰でも求めています。Markdownが使えないってなると一気に使う気は失せます。

  • 勝手に文章をLintしてくれる機能（整形・typo指摘）
  • Markdownが書きやすいこと（即時プレビュー反映または見たまま編集）
  • GitHub等で管理できる（環境が変わっても楽）
  • Markdownが独自の形式をしていないもの（絵文字とかサービス依存がある）

1.2.2. 保守性

保守性です。自分で極力手をかけたくないし、なんなら自分は書く事だけに集中していたい。（わがまま）

フロントエンドの人はブログをオシャレにすることで一目置かれ、業界でもトップスターに…なんてこともありますが、基本的にはまずないです。

ちなみに最初にある程度面倒をかけて、その後のメンテコストを下げるって方針は全然ありです。というかその方針がベストだと思っています。

技術ブログはアウトプットしたいだけで、その他もろもろ設定を気にしたくないのでここは結構重要な部分な気がします。

1.2.3. 金をかけたくない

最近のサブスクリプションサービスは高額です。月1000円を超えるケースなんてザラにあります。

「月1000円かかってるんだし、せっかくだからブログ書かなきゃ」と考える人がいるのですが、残念ながら人間はそんなんじゃ書きません。

なんなら「全然ブログ書いてないし、サブスクリプション解除しちゃおうかな…」となってしまい、余計アウトプットが滞ります。悪循環ってやつですね。

1.2.4. 金も稼ぎたくない

技術ブログはお金を絡ませたくないです。（持論）

本紹介等でアフィリエイトを使う分には問題ないですが、広告を置いて、広告収入を得るためにブログを書こうってなると一気にやる気が冷めます。

それに広告収入を増やすためにアクセス数を増やそうと思ってしまい、記事が初心者向けなものや未経験エンジニア宛なものになってしまって、自分の書きたいことが書けなくなるジレンマです。

広告収入が目的になってしまうと内容の質も基本的に落ちがちです。

だから自分はお金を稼ぎたくないという方針で帆を進めました。

1.2.5. 記事の質を求められたくない

前項で質の話をしておいて何言ってるんだという感じですが、質を求められたくない気持ちもあります。

QiitaやZenn、ここらへんは簡単に利用でき、オシャレでプレビューは稼げるしで良いことづくめです。

しかし、自分の中に最低限品質のある記事を書かなきゃいけないという念が働いてしまい、結局書くハードルが高くなって書かなくなる事が多くあります。

たしかにサクサクっとQiitaやZennでLGTMをたくさん集めてる人はかっこいいですが、自分が思っていること、考えていることをありのまま書ける場所。自分だけの世界を求めたかったのです。

1.2.6. ある程度は見られたい

さあ、そろそろワガママが炸裂してきました。

この項ですが、サーチエンジンからきた人・情報を求めてる人にはしっかり届いて欲しいという意味合いがあります。技術ブログは人に見られる前提で書かないと意味がないですし、質もあがりません。ある程度はプレビューされたいのです。（これでチラシの裏に書いてろはナシで）

1.2.7. それなりにオシャレにしたい

保守性のところで、文字を書く事以外にあまり注力したくないと言っておきながらワガママですが、見た目にもそれなりに気を配りたいという気持ちがあります。

たとえば、シンタックスハイライトがない技術ブログは見にくくて仕方ないので嫌ですし、かと言って時代を感じてしまうようなデザインは嫌です。でもCSSやJavaScriptないし、デザインの構築は面倒なのでしたくないんです。

めちゃくちゃワガママですね…。自分でも反吐が出てきました。

1.2.8. 要約

以上をまとめると、快適にMarkdownで書けて保守する部分が極端に少なく、そんでもって無料でお金の誘惑が少なく質を求められないユートピア。

サーチエンジン等にはちゃんとインデックスされるしSEOも強くデザインがオシャレでシンタックスハイライト等もカスタムできる（JavaScript置ける）サービスが自分の求めているものになりました。果たして満たせるものはあるんでしょうかね。

2. 調査編

以上の条件をもとに、自分が快適だと思えるものを探していきました。結論を言うとはてなブログなんですが、いろいろサービスごとに懸念点があったので見てみるとおもしろいです。

2.1. note

みなさんご存知のnoteです。人に見られる可能性もあり、SEOも最近は結構強くなった方に見えます。

デザイン性も悪くないです。シンプルなのは良いことですね。スキ機能もあり、アフィリエイト機能はない（有料販売があるのはマイナスポイント）のも良いです。フォロー概念があってSNSみたいなのでファンが付けば一定プレビューも稼げます。 …。

でも…Markdownで書けないんです。

むしろMarkdownで書けないのがnoteの特徴って感じがします。どっちにしろ自分の中では一発OUT, レッドーカードです。バイバイ。（一瞬だけ試して書いてみたこともあります）

2.2. WordPress

Web界の大御所、WordPressです。これで書いてる人も結構いますし、最近はエディターもアップデートされて書き心地が良くなったそうです。テーマをいじれて好き勝手できるらしいですし（有料テーマがゲキ高ですが）自由度もある程度ありそうです。

でも…保守面倒だし、サーバ費かかるんです…。

ちゃんとセキュリティアップデートする必要がありますし、SEOの設定（All in One Packみたいなの）が面倒極まりないです。おまけにインフラ関係にも目を配らなきゃいけないのでモチベがまず上がりません。（しかもアフィリエイト多すぎる…） これは偏見ですが、WordPressを使って、ちゃんと技術ブログ書いてるところはごく少数だと思っています。 基本的に初心者向け とか 未経験エンジニア転職向け または 「いかがでしたか」 の代表だと思っています。（違ったらごめん）

一時期使っていましたが、結局ブログを書き続けるモチベが続かず、さよならしてしまいました。バイバイ。

2.3. Notionを使ったブログサービス

Notionが最近は波にのっています。自分もその一人でNotionヘビーユーザーな部分があります。

それでNotionを使って一時期ブログを運営していたことがあります。

Next.js Notion Starter Kitを使っていた時もありますし、Wraptasをお試し期間だけ使ったこともあり、Superも使ったことあります。

Notionは素晴らしいツールです。書きやすさがあり、Markdownでも書け、Markdownで書き出しもできるし、画像も簡単に入れられて楽です。

でも…各自デメリットがあるんです…。

2.3.1. Next.js Notion Starter Kit

プログラマーらしくGitHubのオープンソースなのでVercelを使えば無料で運用できます。

でもこれ、流れの早いReactですし、Next.jsですし、本業じゃない自分がメンテするのには結構手間がかかってしまいすぎでした。

なんならこのOSSも最近はメンテされておらず、書き方も前のReactの部分とかでライブラリも古くなってしまっているのでうんざりしてしまいます。昔はよかったんですけどね…。

2.3.2. Wraptas

お値段がそこそこします。さらに似たようなサービスでSuperがあります。

わざわざこっちを選ぶ理由はないかな…（日本語なのは●）っていう部分で候補から外れてしまいました。ごめんねAnotion（旧名） 。

2.3.3. Super

ちょっと前の自分の結論でした。Notionをそのままブログにできるし、CSSを比較的簡単に書き換えられ、独自ドメインの設定やパフォーマンス面でも悪くない。意外と理想的なサービスでした。

値段以外は。

Superはオシャレで便利で使いやすくて文句なしです。でも高いんです。月1350円くらいします。高すぎでしょ。

サービスは良くても値段で手が引きました。

ちゃんと週1くらいで書いてればいいんですが、如何せんサブスクリプション代を取り戻そうという邪念が入ってしまい、アフィリエイトっぽい記事が増え、投稿ハードルも高くなってしまいました。

2.4. Qiita

エンジニアといえばこれってくらいお世話になるQiitaです。Qiitaは前提条件の部分でチラッと書いたところもあるのですが、やはり求められる質が高いと感じてしまいます。

もちろん「質なんて気にせず書いちゃえばいいじゃん」って人もいるし、その通りです。でも一部過激派「Qiita原理主義者」もいて、変なポエムを載せようものなら裏で誹謗中傷されてしまいます。

でもポエマーなのでポエム書きたい時が自分にはあります。 そういった時にどうすればいいのか。それだけnoteに書くのか。

分散してしまうのは運用コストが高くつくのでなるべくやりたくないところです。

Qiitaに書く為のインプット量が増え（これ自体は良い）、質を高めるために推敲し、結局そのハードルがきつく感じてしまい、アウトプットが滞ります。

毎日ランニングをしようとして、初日に10km走ったら次の日以降やらなくなるパターンに似ていますね。

2.5. Zenn

Qiitaに続いて出てきたナウい技術的ブログサービスになります。デザインは正直こっちの方が好きです。記事の質も高い上に、エンジニアがアウトプットしやすいように考えられているので（CLIとか）候補としては良い選択肢でした。

本を出版できる機能とかおもしろいですし、スクラップとかも良いですね。

GitHubのリポジトリとも連携できるし…ってあれ、こっちでも良くね

デメリットとしては、高い質が求められている雰囲気があるので、Qiita同様ポエムを書きにくい部分ですかね。

吟遊詩人なのでポエムが書けることは割と必須です。

ただ結構サービスとしては良いので、はてなブログに辟易した頃、こっちに移行する可能性があります。吟遊詩人なので。

2.6. 自作

茨の道ですが、自分のブランドがちゃんと作り出せます。転職の際、アピールポイントになりますし、ブログを自作した経験は自分自身に良い影響を与えるのは間違いないです。

でも…面倒だし、金かかるし、保守コスト高いし、始めるまで時間かかるんです…。

今育ち盛りの自分としては、ブログを作ろうって1ヵ月2ヵ月足止めを喰らうのは正直しんどい部分があります。 なんなら頑張ったところで思い通りの品質のものができ上がるとは限りません。リスクも高いです。

これらを考えてしまうとブログを自作するという選択肢はほとんどなくなってしまいます。MicroCMSもふくめて自作に入れてます。ごめんね。

2.7. Medium・dev.to

英語圏がターゲットとなっているので日本人ユーザーは少なめです。ときどきこのプラットフォームで書いているツヨツヨエンジニアの人がいますが、自分には不向きだと感じてしまい候補としては早急に捨てました。

2.8. ScrapBox

ScrapBoxは昔使っていました。今はNotionに取って代わられた感じはしますが…。 独自記法ですが簡単に書けるのは魅力です。デメリットとしては、ディレクトリ管理ができないサービスだったので情報が散らばってしまい、昔に書いたリソースを追いづらいという部分が気になりました。

無料なのもかなり魅力的なんですけどね…。自分はScrapBoxでは満足できない体になってしまいました。ワガママエンジニアです。

2.9. はてなブログ（有料）

技術ブログといったらはてなブログみたいなところがあります。一時期これで書いていた時もありました。ただその時は自分のリテラシーが低く、はてなブログの独自記法にうんざりしてしまっていたり、デザインを変えるのが少し面倒だったりですぐに別のサービスに移ってしまいました。 有料版は値段が高く、お財布に優しくないのでアフィリエイト広告を置き、収入を得るための行動をし始めてしまいました。一時期「いかがでしたか」みたいな質の記事を書いてました。恥ずかしい…。

3. 行動編

ここからは自分がやったアウトプットのための環境づくりの話になります。

3.1. 使用サービスを決める

Zennとはてなで迷いましたが、はてなブログの無料利用を選びました。理由としては、ポエムを書ける（敷居が低い）ということとカスタマイズが楽だからです。（あと無料） デザインは公式デザインでLifeというものがありNotionっぽくて気にいっています。これくらいシンプルなくらいがちょうど良いんですよね。

3.2. エディターを決める

MarkdownをGitHubで管理したいと思っていた為、ローカルのエディターを使うことは決定していました。 ただ、ローカルのエディターと一言に言っても数多くあるので、どうすればいいか迷っていましたがVS Codeを採用することにしました。

VS Codeでプラグインを入れれば、他のMarkdownライターソフトにも負けないポテンシャルがあると感じたからです。 具体的に入れたプラグインとしては…。

  • Markdown All in One
    • キーボードショートカット・リスト補完・オートコンプリート・自動リンク紐付けなどNotionと同じような編集感を与えてくれます。
    • 自動見出しナンバリング・目次の自動作成等もあるそうです。
  • Markdown PDF
    • MarkdownをPDFとして出力できるプラグインです。現時点では使う予定はないですが、便利そうなのでそのうち役に立つでしょう（適当）
  • テキスト校正くん
  • VS Codeにtextlintを導入して文章を校正する
    • 日本語的におかしいよねって部分を指摘してくれます。結構この記事でも怒られているのでありがたい限りです。
    • こちらのtextlintを使用する方針に変更しました。
  • Markdown Preview Enhanced
    • Markdownで書いたものをリアルタイムでプレビューしてくれる拡張機能です。なんちゃってでMarkdownを書いている自分にはありがたいです。
  • markdownlint
    • Markdownの書き方がおかしい際に怒ってきます。勝手にフォーマットもしてくれるので便利です。
    • 結構うぜぇので別途設定ファイルでMD024,MD025,MD026,MD041はfalseにしてます。
  • Markdown Image
    • Markdownで画像入れたい時どうすんねんって問題を解決してくれます。
    • Imgurのアカウントを作って、アクセスキーを発行し、設定すればshift + option + vを押せば自動でアップロードして短縮リンクを貼ってくれます。

他にも間接的にtabnine・GitLens・VS CodeVimとか役立っている部分はありますがキリがないので割愛します。

3.3. アップロードを自動化する

毎回Markdownで書いたものをはてなブログの記事投稿画面にいきコピペ・・・。煩わしくて考えたくないです。

理想としては書き終わってリポジトリにPushをした時にGitHub Actionsが走り、勝手に記事反映くらいまではしていて欲しいです。

自分でGitHub Actionsを書かなきゃいけないと辟易していたところ、すでにやってる人がいました。

push-to-hatenablogを使い，はてなブログへの投稿記事をGitHubで管理したら最高だった！の記事を参考にしつつ、push-to-hatenablogを使って自動化ができました。

だんだん理想郷に近づいてきましたね。

3.4. はてなブログがちょっとイケてないので直す

はてなブログのデフォルトコードブロックはイケてないです。

シンタックスハイライトもなく、見にくいです。それを改善しました。

はてなブログのコードハイライトをhighlight.jsでオーバライドしたの記事を参考にhighlight.jsを使って見やすいようにしました。

記事だと微妙にバージョンが古いのと、GitHub-dark-dimmedを使うように細かいところを修正すると…。

<style>
 pre.code {
     background: #22272e;
     color: #A9B7C6;
 }
</style>

<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/github-dark-dimmed.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>


<script>
 // はてなブログデフォルトのハイライト解除、
 // codeタグで囲む
 function resetHatenaHighlight() {
     $('pre.code').each(function () {
         const text = $(this).text();
         const lang = $(this).attr('data-lang');
         const code = $('<code>').text(text).addClass(lang);
         $(this).text('').append(code);
     })
 }

 // コードブロックにテーマ適用
 $(function () {
     resetHatenaHighlight();
     $('pre code').each(function () {
         if ($(this).parent().attr('data-lang')) {
             hljs.highlightBlock(this);
         }
     });
 });
</script>

とこのような感じになりました。（ほとんどコピペ） パフォーマンスを考えたらJQueryとお別れしてバニラJSに置き換えた方が良いのでしょうが、そのモチベは今日沸きませんでした。

これで長い技術ブログサービス探しの旅は終わりです。今度はブログが長く続くといいですね

4. まとめ

  • VS Codeを使えば快適なMarkdown環境は用意できる。
  • はてなブログは無料運営で十分。だってエンジニアは大体広告ブロック入れてるし。
  • シンタックスハイライトには気を使おう
  • push-to-hatenablogの力が偉大。 これではてなの快適性が段違いになる
  • 快適な環境を整えるとアウトプットがはかどる