Qiitaとはてなブログの編集機能（SVG、CSS、MathML）比較と、結局はてなブログからQiitaに出戻りした話

はじめに

　Qiitaで、図や式をSVG、SVGアニメーション、自作フォント(CSS)、MathMLを直接編集して記事の作成をしたかったが、QiitaはMarkdownとTex数式記法以外の選択肢がない。 　そこで、SVGやCSS、MathMLを直接編集可能な技術ブログを試してみることにした。

技術ブログ選抜

　表１に技術ブログの比較一覧を示す。以下の条件でネットから個人的に気になったものを選抜した。直、個人的感想になるが、「dev.to」は「Qiita」に似ている。 【条件】

• 技術系ブログ　→　MarkdownやTex数式記法が使えると技術ブログ系だろう（独断と偏見）
• Markdownは直接編集可能な場合「〇」
• Tex数式記法は、数式画像貼り付けは「×」
• シンタックス・ハイライト（語法高亮）がなるべく使える。
• SVGの画像貼り付けは「×」
• 無料
• 可能な限りHTMLやCSSを直接編集できる
  　

表１　技術ブログの編集機能比較

技術ブログ	HTMLや CSSを 直接編集	SVG 直接 書込	Markdown 直接 記法	Tex 直接 記法	その他
Qiita	×	×	〇	〇
はてなブログ	〇	〇	〇	〇	★★★
note	×	×	×	×
WordPress	〇	？	〇	〇	★★
Zenn	？	？	〇	〇	★
Medium	？	？	×	×	英語圏
dev.to	？	？	〇	×	英語圏

　★★★選抜の結果「はてなブログ」を選択した。

「Qiita」と「はてなブログ」の比較

　実際に利用して分かった「Qiita vs はてなブログ」の「MathML、SVG、自作フォント(CSS)」の編集機能（カスタマイズ）比較を表２に示す。

表２　「Qiita vs はてなブログ」の編集機能比較

	Qiita	はてな ブログ
Markdown記法	〇	〇
数式(Tex記法)	〇	〇
数式(MathML)	×	〇
SVG	×	〇
SVGアニメーション	×	〇
自作フォント(CSS)	×	〇

　「はてなブログ」は私の欲する機能がある事が分かった。実際に作成したはてなブログ
　この「はてなブログ」ならば、私のモヤモヤも解決して楽しい自己表現ライフが送れる！と、喜んでいたが、しばらく利用して重大な問題があることが判明した。

重大な問題(SEO対策)

「はてなブログ」のアクセス数が悲しいぐらいに増加しないのだ。😥 Qiitaに記事を投稿した場合、閲覧者を示す「views」数は少なくとも１日１件増加した。(翌朝見ると嬉しい😀) 一方「はてなブログ」は最大で１０日に１件アクセルがある程度だった。 「Qiita」と「はてなブログ」への私の投稿記事の内容はそれほど変わらない。 ネットで理由を調べてみると、「はてなブログ」のSEO対策も高いようだが、QiitaのSEO対策は超強力のようだ。

	Qiita	はてな ブログ
SEO対策	◎	△

『世間に私の記事にそれほど需要があるとは思ってもいないさ』
『私の記事は備忘録を兼ねたメモさ』
と斜に構えていたが、記事の閲覧数が明らかに低い現実を突きつけられると辛いものがある。
　やっぱり人間何かしらの評価が欲しいのだ。一人は寂しいのさ。「Qiita」に戻ろうかな

「Qiita」に出戻り

　Qiitaの強力なSEO対策は捨てがたい。かと言って、HTMLやCSSを直接編集したい。ウーム。と悩んだ末、選択肢は二つに絞られた。

(1)Qiitaで「MathML、SVG、自作フォント(CSS)」を編集・表現する方法を探す
(2)強力なSEO対策を持ち、かつ「MathML、SVG、自作フォント(CSS)」を編集できる技術ブログを再度探す

　(2)は前途多難なので、(1)を模索したいと思う。結果「CodePen」をQiitaで利用することにした。
　↓こんなやつです。

　「CodePen」の詳細な内容は【ここ】を参照。 　表３に「CodePen　+ Qiita」と「はてなブログ」の機能比較を示す。

表３　「CodePen + Qiita」と「はてなブログ」のSVG、CSS、MathMLの編集機能比較

	CodePen + Qiita	はてな ブログ
Markdown記法	〇	〇
数式(Tex記法)	〇	〇
数式(MathML)	〇 CodePenで補助	〇
SVG	〇 CodePenで補助	〇
SVGアニメーション	〇 CodePenで補助	〇
自作フォント(CSS)	〇 CodePenで補助	〇

終わりに

　CodePenが縦に狭い。CodePen以外の方法もなにかないだろうか。