イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです


このエントリーをはてなブックマークに追加

忘れんぼうを直すために自分でAsciiDoc風なメモ帳を作った

明けましておめでとうございます。
イノベーションのエンジニアのオヤイヅと申します。

皆さん書き初めって最後にいつしましたか?今年の抱負って決めましたか??
弊社では毎年、新年一発目の出社日には今年の抱負を書き初めでしたためる文化があります。

今年の私の新年の抱負はコチラです!!

shodo.JPG

私は異常なくらい忘れんぼうで、すぐ忘れ物などをしてしまいます。
今まで5回以上はトイレや出かけ先、駅などに財布を置いたまま忘れてきています。
(忘れてきた財布は一度を除く全てが落とし物センターに届けられました。日本って素敵ですね。)
忘れんぼう具合もそろそろ仕事に支障きたすくらいになってきたので、しっかりとメモを取り、忘れない決意をしました。

でも、忘れんぼうなので、メモを取ることを忘れてしまいます…​
そこで、メモしたくなるように自分でメモ帳を作ってみることにしました。
このブログではAsciiDocというマークアップ言語を使用しているのですが、 今回はそれのメモ帳を作成します。
今回はブラウザで動かせるものを完成形とします。

AsciiDoc風メモ帳

完成品はコチラ。

note.png

コードはコチラ。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>AsciiDoc</title>
    <link rel="stylesheet" href="asciidoc.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="asciidoc.js"></script>
</head>
<body>
    <h1 class="center">AsciiDoc風ノート</h1>
    <textarea id="editor"></textarea>
    <div id="preview"></div>
</body>
</html>

js

$(function(){
    $('#editor').keyup(function() {
        // テキストエリアの値を受け取る
        var el = $('#editor').val();
        // プレビューの表示を一度リセット
        $('#preview').text("");
        // 受け取った値を変換してプレビューの表示として渡す
        $('#preview').append(textConvert(el));
    });
});

// テキストを受け取り、ルールにしたがって変換する
function textConvert(el) {
    // *強調*
    var text = el.replace(/\*(?!\n)(?=\S)([\s\S]*?\S)(?!\n)\*/g, function() {
        var str = arguments[0].replace(/^\*/g, "<strong>");
        return str.replace(/\*$/g, "</strong>");
    });
    // _イタリック_
    text = text.replace(/_(?!\n)(?=\S)([\s\S]*?\S)(?!\n)_/g, function() {
        var str = arguments[0].replace(/^_/g, "<i>");
        return str.replace(/_$/g, "</i>");
    });
    // `コマンド`
    text = text.replace(/`(?!\n)(?=\S)([\s\S]*?\S)(?!\n)`/g, function() {
        var str = arguments[0].replace(/^`/g, '<span class="command">');
        return str.replace(/`$/g, "</span>");
    });
    //----
    //コードブロック
    //----
    text = text.replace(/----\n(?=\S)([\s\S]*?\S)\n+----/g, function() {
        var str = arguments[0].replace(/^----\n/g, '<div class="codeblock">');
        return str.replace(/----$/g, "</div>");
    });
    console.log(text);
    // ====== ヘッダ6
    text = text.replace(/======\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^======\s/g, '<h6>');
        return str.replace(/\n$/g, "</h6>");
    });
    // ===== ヘッダ5
    text = text.replace(/=====\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^=====\s/g, '<h5>');
        return str.replace(/\n$/g, "</h5>");
    });
    // ==== ヘッダ4
    text = text.replace(/====\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^====\s/g, '<h4>');
        return str.replace(/\n$/g, "</h4>");
    });
    // === ヘッダ3
    text = text.replace(/===\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^===\s/g, '<h3>');
        return str.replace(/\n$/g, "</h3>");
    });
    // == ヘッダ2
    text = text.replace(/==\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^==\s/g, '<h2>');
        return str.replace(/\n$/g, "</h2>");
    });
    // = ヘッダ1
    text = text.replace(/=\s(?=\S)([\s\S]*?)\n/g, function() {
        var str = arguments[0].replace(/^=\s/g, '<h1>');
        return str.replace(/\n$/g, "</h1>");
    });
    // ライン
    text = text.replace(/''''\n/g, '<div class="line"></div>');
    // 改行
    text = text.replace(/[\n\r]/g, "<br>");

    return text;
}

css

* {
    padding: 0;
    margin: 0;
    font-size: 16px;
}
.center {text-align: center;}
textarea {
    box-sizing: border-box;
    padding: 10px;
    display: block;
    border: none;
    width: 50%;
    height: 900px;
    float: left;
    background-color: #fafafa;
    resize: none;
}
textarea:focus {
    outline-offset: 0;
    outline: 0;
}
#preview {
    box-sizing: border-box;
    padding: 10px;
    width: 50%;
    height: 900px;
    float: right;
}
.line {
    height: 2px;
    width: 100%;
    background-color: #CCC;
}
.codeblock {
    padding: 10px;
    background-color: #EEE;
    border-radius: 3px;
}
.command {
    padding: 0 7px;
    background-color: #EEE;
    color: #E40A5D;
    border-radius: 3px;
}
h1 {font-size: 40px;}
h2 {
    border-bottom: 1px solid #CCC;
    font-size: 33px;
}
h3 {font-size: 30px;}
h4 {font-size: 27px;}
h5 {font-size: 24px;}
h6 {font-size: 21px;}

主にJQuery、正規表現を使用して作成しました。
正規表現難しい !!
そして、結構長いですね。もっと短く書けると思いますが、こうなってしまいました泣

これ以外にもAsciiDocには多彩な表現があり、まだ全然足りない状態です。
他にも改行は+で表現するなどの違いなどはありますが、あくまでもAsciiDoc風ということで本記事はここまでとします。
またテーブルなどを表現する記法もあるのですが、その正規表現はまだできそうにないので、修行がてら今後もチャレンジし、完全なAsciiDocに徐々に近づけたいと思います。

自作のメモ帳ならちゃんとメモを取るモチベーションが続くかも?
2017年は少しでも忘れものを減らせるよう頑張ろう…​

今回はここで失礼します。