元々JSONといえばWordPressのカスタマイズでPHPとJavaScript間のデータ受け渡しなんかでも使っていました。
今回はEJSで自動データ流し込みに使うためのJSONを作る時に、私がつまづきやすいところなどを軽くまとめました。
元データ（Excel）
- 1行目は項目名、2行目以降は1セルにつき1つの項目のデータが入った1シートのデータにする。
- 必要なくても通し番号を入れておくと、抜けがないかチェックしやすい
- 方眼紙シートの場合は関数を駆使してなんとかする
- 改行がある場合は、html生成後に検索置換で<br>タグを入れられるように特定の文字列を埋め込んでおく（元からある文字列と被らない文字列にする）
例：こんにちは。普段は自転車通勤をしています。
↓
こんにちは。＜＞普段は自転車通勤をしています。
※改行箇所に「＜＞」という文字列を入れて、1行のデータにしている
- 「CSV UTF-8」形式で書き出す
テキストエディタ
テキストエディタはお好きなものを使っていただいて構いませんが、Visual Studio CodeやAtomなど拡張機能やプラグインがあてられるものだと後々いい感じになります。
id,name,age,region,pref,curry
1,沼田 広之,45,北海道地方,北海道,左ルー・せき止め派
2,小野寺 りえ,51,北海道地方,北海道,左ルー・せき止め派
3,新田 美里,59,北海道地方,北海道,左ルー・ルー攻め派
4,牧瀬 広司,60,北海道地方,北海道,左ルー・混ぜ混ぜ派
5,三輪 サンタマリア,56,東北地方,宮城県,ぶっかけ・ルー攻め派
6,宇田川 賢二,35,東北地方,宮城県,奥ルー・せき止め派
7,伊沢 路子,58,関東地方,茨城県,左ルー・混ぜ混ぜ派
8,小高 景子,38,関東地方,栃木県,ぶっかけ・せき止め派
9,内藤 ひろみ,27,関東地方,栃木県,別盛り・せき止め派
10,沢村 ひとり,29,関東地方,埼玉県,左ルー・混ぜ混ぜ派
11,大滝 敏也,46,関東地方,埼玉県,奥ルー・別口派
12,菅原 法嗣,33,関東地方,埼玉県,左ルー・別口派
13,皆川 優一,20,関東地方,埼玉県,左ルー・せき止め派
14,松島 悟志,54,関東地方,千葉県,奥ルー・混ぜ混ぜ派
15,小玉 玲那,59,関東地方,千葉県,左ルー・混ぜ混ぜ派
16,新垣 早紀,46,関東地方,東京都,左ルー・ナン派
17,矢沢 めぐみ,42,関東地方,東京都,左ルー・混ぜ混ぜ派
18,浜口 あさみ,37,関東地方,東京都,左ルー・せき止め派
19,佐藤 さんま,49,関東地方,東京都,ぶっかけ・ルー攻め派
20,中原 弘也,46,関東地方,東京都,左ルー・混ぜ混ぜ派
21,松尾 優,46,関東地方,東京都,左ルー・混ぜ混ぜ派
22,小野田 涼子,24,中部地方,富山県,左ルー・別口派
23,鹿賀 由宇,35,中部地方,富山県,手前ルー・ナン派
24,竹中 広司,34,中部地方,長野県,左ルー・別口派
25,小口 真一,27,中部地方,静岡県,ぶっかけ・ルー攻め派
26,正木 瞳,42,中部地方,静岡県,手前ルー・ルー攻め派
27,川畑 拓郎,40,中部地方,愛知県,左ルー・せき止め派
28,結城 雅彦,50,中部地方,愛知県,右ルー・ナン派
29,余 エリカ,32,中部地方,愛知県,左ルー・せき止め派
30,笹川 しぼり,29,中部地方,愛知県,右ルー・せき止め派
31,坂元 優,28,中部地方,愛知県,左ルー・ルー攻め派
32,小畑 薫,28,中部地方,愛知県,左ルー・別口派
33,井村 早織,36,近畿地方,滋賀県,左ルー・ルー攻め派
34,岡本 恵梨香,58,近畿地方,京都府,別盛り・別口派
35,邑野 優,44,近畿地方,大阪府,ぶっかけ・せき止め派
36,菊池 千佳子,26,近畿地方,兵庫県,左ルー・ルー攻め派
37,岡山 愛,44,近畿地方,兵庫県,左ルー・ルー攻め派
38,前川 朝陽,23,中国地方,鳥取県,左ルー・混ぜ混ぜ派
39,大畑 怜奈,41,中国地方,島根県,右ルー・ルー攻め派
40,宮崎 京子,46,中国地方,岡山県,奥ルー・混ぜ混ぜ派
41,黄川田 早織,36,中国地方,広島県,ぶっかけ・別口派
42,河原 美智子,30,中国地方,広島県,左ルー・混ぜ混ぜ派
43,山野 千佳子,26,中国地方,山口県,左ルー・せき止め派
44,小関 愛子,22,四国地方,愛媛県,左ルー・混ぜ混ぜ派
45,大木 瞬,31,四国地方,愛媛県,奥ルー・せき止め派
46,浜本 寿々花,58,九州・沖縄地方,福岡県,右ルー・ナン派
47,宮下 広司,55,九州・沖縄地方,福岡県,手前ルー・ルー攻め派
48,池谷 陽子,27,九州・沖縄地方,長崎県,左ルー・別口派
49,榊原 友以乃,58,九州・沖縄地方,鹿児島県,奥ルー・せき止め派
50,倉田 正敏,46,九州・沖縄地方,沖縄県,左ルー・ナン派- データにタブなど特殊文字が紛れているとエラーが起きるので、入っていないか確認しておく
- 余計なスペースや改行コードなど、想定外の記述がないかも確認しておく
- もう一度csvとして上書き保存をする
- CSV→JSONに変換する
オンラインの変換サービス（CSV to JSON – CSVJSON）や、Visual Studio CodeやAtomなどのテキストエディタの拡張機能やプラグインに変換できるものがある - ネストしている箇所は別に書き出して階層に注意してコピー＆ペーストする
サンプルデータ
途中「…」のところは長いので端折ってます。
{
"curry-lover-east": {
"title": "カレー大好きサークル会員紹介 東日本",
"description": "カレー大好きサークルの東日本在住メンバーを紹介します！",
"keyword": "カレー大好き, curry, 東日本",
"path": ".",
"linkimgpath": "common/img/",
"linkjspath": "common/js/",
"url": "https://curry-lover.hoge/member/east/",
"area1": [
{
"id": 1,
"name": "沼田 広之",
"age": 45,
"region": "北海道地方",
"pref": "北海道",
"curry": "左ルー・せき止め派"
},
…
{
"id": 4,
"name": "牧瀬 広司",
"age": 60,
"region": "北海道地方",
"pref": "北海道",
"curry": "左ルー・混ぜ混ぜ派"
}
],
"area2": [
{
"id": 5,
"name": "三輪 サンタマリア",
"age": 56,
"region": "東北地方",
"pref": "宮城県",
"curry": "ぶっかけ・ルー攻め派"
},
{
"id": 6,
"name": "宇田川 賢二",
"age": 35,
"region": "東北地方",
"pref": "宮城県",
"curry": "奥ルー・せき止め派"
}
],
"area3": [
{
"id": 7,
"name": "伊沢 路子",
"age": 58,
"region": "関東地方",
"pref": "茨城県",
"curry": "左ルー・混ぜ混ぜ派"
},
…
{
"id": 21,
"name": "松尾 優",
"age": 46,
"region": "関東地方",
"pref": "東京都",
"curry": "左ルー・混ぜ混ぜ派"
}
],
},
"curry-lover-west": {
"title": "カレー大好きサークル会員紹介 西日本",
"description": "カレー大好きサークルの西日本在住メンバーを紹介します！",
"keyword": "カレー大好き, curry, 西日本",
"path": ".",
"linkimgpath": "common/img/",
"linkjspath": "common/js/",
"url": "https://curry-lover.hoge/member/west/",
"area1": [
{
"id": 22,
"name": "小野田 涼子",
"age": 24,
"region": "中部地方",
"pref": "富山県",
"curry": "左ルー・別口派"
},
…
{
"id": 32,
"name": "小畑 薫",
"age": 28,
"region": "中部地方",
"pref": "愛知県",
"curry": "左ルー・別口派"
}
],
"area2": [
{
"id": 33,
"name": "井村 早織",
"age": 36,
"region": "近畿地方",
"pref": "滋賀県",
"curry": "左ルー・ルー攻め派"
}
…
{
"id": 37,
"name": "岡山 愛",
"age": 44,
"region": "近畿地方",
"pref": "兵庫県",
"curry": "左ルー・ルー攻め派"
}
],
"area3": [
{
"id": 38,
"name": "前川 朝陽",
"age": 23,
"region": "中国地方",
"pref": "鳥取県",
"curry": "左ルー・混ぜ混ぜ派"
},
{
"id": 39,
"name": "大畑 怜奈",
"age": 41,
"region": "中国地方",
"pref": "島根県",
"curry": "右ルー・ルー攻め派"
},
…
{
"id": 43,
"name": "山野 千佳子",
"age": 26,
"region": "中国地方",
"pref": "山口県",
"curry": "左ルー・せき止め派"
}
],
"area4": [
{
"id": 44,
"name": "小関 愛子",
"age": 22,
"region": "四国地方",
"pref": "愛媛県",
"curry": "左ルー・混ぜ混ぜ派"
},
{
"id": 45,
"name": "大木 瞬",
"age": 31,
"region": "四国地方",
"pref": "愛媛県",
"curry": "奥ルー・せき止め派"
}
],
"area5": [
{
"id": 46,
"name": "浜本 寿々花",
"age": 58,
"region": "九州・沖縄地方",
"pref": "福岡県",
"curry": "右ルー・ナン派"
},
…
{
"id": 50,
"name": "倉田 正敏",
"age": 46,
"region": "九州・沖縄地方",
"pref": "沖縄県",
"curry": "左ルー・ナン派"
}
]
}
}ポイント
- カレー大好きサークルという謎の団体の会員名簿で、会員の居住地で東日本（curry-lover-east項目の配下）と西日本（curry-lover-west項目の配下）の2ページ分に分けて掲載する想定です
- title、description、keyword、urlなど<head>に入る情報を変数にしておく
- pathはページによってディレクトリ階層を変えても変数の値を変更するだけでページ全体的に書き換えができる
- 画像やスクリプトの外部ファイルをまとめて入れておくディレクトリがある場合はlinkimgpath、linkjspathのように変数にしておくと便利。相対パスで準備して公開直前に絶対パスに書き換えなんてことも簡単にできる
- area1〜area5の中に会員情報をネストすることで、1つの会員情報のejsデータを使いまわすことができる（階層に注意！）
詳しくはEJSの記事のincludeの項を参照
コメント