Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What is going on with this article?
@ohbashunsuke

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

クソアプリ 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 

23
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ohbashunsuke
Twitterで初学者にUnityのチーム開発ノウハウを分かりやすくお届け。元デザイナー経験を生かしクリエーターと連携したエンジニアリング情報を共有しています。 🏢 株式会社サイバーエージェント ゲーム部門所属
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
23
Help us understand the problem. What is going on with this article?