そろそろExcelで資料作るのやめたい #JavaScript

(追記）
このアイデアを一部利用したエディタを作りました→完全に単一のHTMLファイルで動作するMarkdownエディタ作った

概要

Excelの代わりにHTML5+markdownを使うといいんじゃないの？というお話し。

エクセル方眼紙つらい

SIer界隈ではいまだにExcelが大流行です。Excelは使いどころさえ間違えなければ大変強力で便利なツールですが、いかんせん使いどころを間違えた資料が多すぎるなと感じています。

例えば開発環境などの導入手順書とかバグの調査報告書とか、どう考えてもExcelに向いてない資料まで頑張ってExcelで作っていたりします。使いどころを間違えたExcelの資料は、非常にメンテナンス性が悪いです。

Excelで作られた資料を手直ししたら改行位置がずれて一行一行手動で直した
1行増えただけで罫線がずれて1ページ1ページチマチマと泣きながら直した
追記しようとしたけどなんかセル幅が変更されていたり結合されていたりでどうすればいいのよ

こんな経験、誰しも一度はあるのではないでしょうか。

Excelに走ってしまう理由

辛いと分かっててもそれでもExcelを使ってしまうことがあります。なぜでしょう？

単一ファイルで扱える

例えば画像を使った資料を作りたいとき、エクセルだとファイルの中に画像を埋め込めるので便利です。何枚画像を使ってもファイルは一つなので、そのままメールに添付できたりして便利なのでしょう。

誰でも見れる

SIer業界なら端末にExcelが入っている確率は非常に高いです。誰でも見れるフォーマットとしてExcelが選ばれているのかもしれません。

markdownって気軽ですよね

ところで、個人的には、図が多かったり複雑な表を多用するのでなければ、markdownなどの軽量マークアップ言語を使うほうが気軽です。

例えば、以下のような内容ならさくっと書けてしまいます。

# Javaによる開発の流れ

## 開発環境構築
この資料で説明するツールは以下のバージョンを前提としております。

| ツール           | バージョン | 備考                          |
|------------------|------------|------------------------------ |
| JDK              | 1.8        | 必ず1.8以上を導入してください |
| テキストエディタ | -          | 特に指定はありません          |

### JDKのダウンロード
JDKは[ここ](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)からダウンロードしてください。

### pathの設定
パスをよしなに設定してください。

## コーディング
それでは早速Javaでのコーディングを体験しましょう。
以下の手順に従って作業してください。

### ソースコードの作成
テキストエディタで次のようなファイルを作成してください。
ファイル名は**必ず**``Main.java``としてください。

\```
public class Main {

    public static void main(String[] args) {
        System.out.println();
    }

}
\```

### コンパイル
コマンドプロンプトで``Main.java``を保存したディレクトリに移動して
次のコマンドを実行してください。

\```
javac Main.java
\```

### 実行
次に、次のコマンドを実行してください。
\```
java Main
\```

次の画像のように``HelloWorld``と表示されれば成功です。

![img1]

## まとめ
Javaによる開発では次のような流れで進めます。

1. ソースコードを編集
1. コンパイル
1. 実行

これをレンダリングすれば次の画像のように表示されます。見た目もgithubっぽくていい感じです（文章の中身はさておき）

これ、そのまま資料として渡せたらいいのに・・・
でもmarkdownだからいちいちHTMLに変換しないといけないし・・・
画像は別ファイルにしないといけないしで悔しいけれどExcelには敵わない・・・

と思っていた時期が私にもありました

それ実現できるよ、そうHTML5ならね

以下のソースをご覧ください。

できればローカルに適当な名前で保存してブラウザで開いてみてください。上の画像と同じページが表示されるはずです。

そう。完全に単一のHTMLファイルでmarkdownや画像を使った資料ができるのです。
ブラウザで開けるので本当に誰でも見られますし、単一ファイルなのでメール添付も可能です。

解説

先ほどのHTMLは以下の構造になっています。

<!DOCTYPE html>
<meta charset="utf-8">
<title>タイトル</title>

<script type="text/template" id="content1">
<!--==================================================================
 ここにmarkdownを記述します
====================================================================-->

<!--==================================================================
 ここにbase64化した画像を埋め込みます
====================================================================-->
</script>


<!--==================================================================
 ↓ここからは内部で用いるjsやcssの定義です
====================================================================-->
<style>
 /* github風css */
</style>

<div></div>

<script>
// marked.js
</script>
<script>
var content = document.getElementById("content1");
document.getElementsByTagName('body')[0].innerHTML = marked(content.innerHTML);
</script>

Markdownのレンダリング

ファイル先頭のscriptタグの中にマークダウンを記述します。ファイル末尾のJSによってmarked.jsを呼び出し、マークダウンをHTML化して表示しています。

ファイル中間あたりにスタイルシートが記述されているので、見た目も自動的にgithub風になります。
※今回利用したcssはこれです

画像埋め込み

画像はデータスキームを用いてファイルに直接埋め込んでいます。

![img1]

\[img1]:data:image/

画像のURLに直接データスキームを記述してもいいのですが、読みにくくなるので別名でURLを定義し、参照させるようにします。
※URLスキームを使えば画像だけでなく一応画像ファイル以外も埋め込めます。

まとめ

このように、HTML5を使えば見た目の良い資料を気軽に作成することができます。文章と画像部分を空白にしたひな形を作っておけば思い立った時に作り始められますね。
ここにひな形バージョンを置いておきます。

正直、画像編集や印刷周りはエクセルには到底かないません。しかし、JavaScriptが使えるのでSVGエディタを作って組み込んだり、シンタックスハイライトを導入できたり工夫次第ではより使いやすくなるのではないでしょうか？

なんといっても、編集はいつものお気に入りのエディタでいいし、プレビューだっていつものブラウザでかまいません。作る人も見る人も、新しいツールを何一つ導入しなくても、ここまでの資料が作れるのはすごいことではないでしょうか？

もしかしてこの方向性でExcel方眼紙を駆逐できるんじゃないか？そう思ってこの記事を書きました。もっといいアプローチやアイデアがあればぜひ教えてください。

追記

わりと「Wordつかえよ！」という至極まっとうな意見が多いようですね。
印刷する目的の資料ならWordがベストに近いと私も思います。

ただ、私のまわりでは印刷を目的としない軽めの資料が結構あり、
その辺にこのようなアプローチもありかなと思った次第であります。¹

wordで作ったら「こんな手の込んだ資料は頼んでない」と怒られたこともあります。その辺に落っこちてたスタイルを当てただけなのに・・・wordは大げさと捉える人もいるみたいです・・・ ↩