YAMLで列挙されたデータをejsとgulpでグリッドシステムに出力

例えば、下記のようなyamlのデータがあったとします。

# 【記述ルール】
# 1段目(インデントなし)はあ行~わ行の指定
#    2段目(インデントあり)は配列5つ
#    「0:名前, 1:読み仮名, 2:漢字名(ある場合), 3:説明, 4:リンクURL」という順番とする
#
# 【ソート】
# 五十音も各行の項目も自動ソートされるため、どちらも順番はバラバラで構わない
"あ":
"か":
    - ["Kiribi Ususama","きりび うすさま","切火 烏枢沙摩","自分用Webサイトのテンプレ(Bootstrap使用前提、gulp, ejs使用)","https://github.com/arm-band/kiribi_ususama"]
    - ["Kamimai","かみまい","紙舞","markdown-pdfを自動実行し、pdfのプレビューを表示するボイラープレート","https://github.com/arm-band/kamimai"]
    - ["Crucession Beast","くるせっしょん・びーすと","","Mastodon APIを叩いて画像付きトゥートを行うテストプログラム",""]
    - ["Katsuragi Kai","かつらぎ・かい","葛城・改","It's very the simple cms that's consist of one file and powered by PHP. And cooperating API to Mastodon.","https://github.com/arm-band/katsuragi_kai"]
    - ["Katsuragi","かつらぎ","葛城","It's very the simple cms that's consist of one file and powered by PHP.","https://github.com/arm-band/katsuragi"]
"な":
"は":
    - ["frigga","ふりっが","","jsonファイルの配列データを、1つずつmdファイルに切り出すツール(自分用)",""]
    - ["fuguruma","ふぐるま","文車","markdown-pdfをWeb上から実行するためのミニマルパッケージ",""]
    - ["Benten", "べんてん","弁天","自分用のスライド制作用テンプレートです。","https://github.com/arm-band/benten"]
"さ":
    - ["The 9kb Pizza Toast", "ざ・ないん・きろばいと・ぴっつぁ・とーすと","","Cookieによる2度目以降の表示抑止ができるシンプルなトーストのjQueryプラグインです。","https://github.com/arm-band/the_9kb_pizza_toast"]
"た":
"ま":
    - ["mocalf.js","もかるふ","","モーダルウインドウでFlexなカレンダーを表示させるjQueryプラグイン","https://github.com/arm-band/mocalf"]
"や":
"わ":

これを五十音順でそれぞれの行をソート、各行内の各項目も読み仮名(配列の2番目の要素)について五十音でソートして生成、ということをやりたくなったのでさっくりと作ってみました。

突貫な作り方ですが、とりあえず形にはなったのでサンプルとして。

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。