36
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

クソアプリAdvent Calendar 2020

Day 18

執筆したいメディアが豊富な今だからこそMarkDownでネタを書き溜めてコンパイルするだけにしちゃおう!

Last updated at Posted at 2020-12-17

クソアプリ Advent Calendar 2020 18日目の記事です。

文字で自分の考えを発信する場所は今や数多く存在します。僕が主に使うのは以下です。

執筆文章は一元管理したい

執筆内容とそのターゲットでメディアを変える事になるのですが、執筆ファイルは一元管理且つMarkDownにしたいです。

というのもこの記事はQiita、これはZennとか事前に考えておくことは難しくて、リリースする前に**「やっぱりこれは、はてブログかな」**ってなっちゃう時がよくあります。

という事で執筆フォーマットは書きやすさからMarkDownにして、リリースする前にメディアを選ぶという事をしたいです。

ただしお気づきかと思いますが、MarkDownをそのままコピペすれば成り立つというわけでもなく、各メディアの文法というものがあって適切にリライトしてあげないと読みづらさがあったり、そもそも表示されないといった事が発生します。

このリライト作業は正直とても面倒くさいですし、全く生産性がありません。

ということでMarkDownでオリジナルの文章を管理しつつ、各メディアに適した文章に整形したファイルを作成すればよいのではないか?

と考え今回コンパイラを作成しました。

本記事のターゲットメディア

  • はてなブログ
  • Qiita
  • Zenn

この3つに絞ります。

各メディアの記法の違い

各メディアの記法をまとめてみます。

メディア 文法
はてなブログ はてな記法 + MarkDown + HTMLも可
Qiita Qiita記法 + MarkDown
Zenn Zenn記法 + MarkDown

といった感じだと認識しています。

具体例を紹介します。

画像の表示記法

はてな

慣れると便利なはてな記法。画像サイズ指定もできちゃいます。1

[はてなの画像ID:w550]

Qiita

全力でMarkDown。ただし画像サイズの指定が出来ない。

![](画像URL)

サイズ指定したい場合はHTMLで記述。

<img src="画像URL" width=550 />

Zenn

さすが後発サービス。MarkDownを拡張して画像サイズ指定が可能。

![](画像URL =550x)

その他様々な記述がある

画像の埋め込み以外にも、ハイパーリンク、TwitterやYoutubeの埋め込み(埋め込めないものもあるのも判定)などがあります。

コンパイラ作成

コンパイラを作成するわけですが、工夫したポイントをかいつまんで説明していきます。

FrontMatterで記事情報を定義

Zennで執筆した時に学んだのですが、MarkDownファイルの先頭に上記のような--で囲んだ区画を作ります。この区画をFrontMatterと呼びます。

---
title: "記事のタイトル"
emoji: "🍀"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: false
filename: kijino-filename
---

ここにyaml形式でパラメータを設定してコンパイラで読み取るようにします。
※だいぶZennの文法に引きづられております

コンパイラはPythonで作成

各メディアのコンパイラは粛々と正規表現などを使って実装します。

はてなブログ画像表示記法の例

※以下の変数lineにはオリジナルのMarkDownの各一行毎の文字列が格納されています

# はてな記法のサイズ指定付き画像置き換え
match = re.match(r'\!\[.*\]\((http.*)\#\w([0-9]*)\)', line)
if match:
    img_url = match.group(1)
    width = match.group(2)
    result += '<img src={} width={} />\n'.format(img_url, width)
else:
    result += line

※Python選択理由は勉強したかったからで、特に理由は無いです

まとめ

今回文章の発信を効率化するためのコンパイラを作ってみました。
自分としては無駄な事が多少減り、文章を書くのが楽しくなった気はします。

ただし、このアプリ(コンパイラ)がクソなのは人様に見せられるクオリティには至っていないことです。もう少し頑張って公開できるところまで持っていけたらとは思っています。

  1. はてなの画像IDとは画像をアップロードすると出力されるID

36
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?