Excelでjsonファイルのデータ作ろうぜ

はろはろわたしです。
さてさて、、開発に関連することならなんでも書いてやるという心持でいます。
結果、とっちらかる自信だけがあるわたし。

最近ですね、わたしのアプリの使い方Q&Aみたいなページをウェブで表示しようと思いまして、まぁ、html,css,javascript『完全に理解した!』マンの私なので(´・ω・`)ムツカシイ

まぁ、いろんな記事を読みつつ実装しているのですが、QAデータについては
Json形式で持たせて、そこからデータを拾わせるのが楽そうだなぁとか思ったのが最初です。

で、ですね、Jsonファイル。。。みんなどうやって作っとるんだと。
ちょっと調べたけれど出てこないからぁ、
わたしのやり方をざくざくぅーっとやっていこうかなと。

JSONって何?

『ホワイジャパニーズピーポー!』の方がきっと知ってると思います。(雑
jsonの説明はいろいろなところに転がっているので、そちらを参考にするとよいと思います(丸投げ

なぜExcel?

そりゃね、みんな使えるから。
たぶん。
いや、まぁ、学生時代にね、叩き込まれたので、やりやすいんですわ。
ほかの表計算のソフトでもできるかって聞かれるとわからん。です!

作りたいウェブサイトのQ&Aイメージ

こんな感じにできるといいですね。
(javascriptの説明はしたくないなぁ)

こんな感じですわ。

まぁ、ウェブページの実装の話はあんまりしたくない(正直
まぁ、json形式のデータで持たせてやって、そこからごにょごにょするとできるんですが、、詳しくはググるがよいぜよ。
javascriptとか人気だからいっぱい記事あるよ。
で、ですね、今回作成しようとしているデータの感じがこんな感じになります。

[
  {
    "name": "このアプリについて",
    "nakami": [
      {
        "q": "どういったことができますか?",
        "a": "こんなことができます"
      },
      {
        "q": "○○ですか?",
        "a": "××ができます"
      },
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  },
  {
    "name": "○○について",
    "nakami": [
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  }
]

ざくっと説明しますよ?

[]
この中に入るのは配列です。同じ要素を持つものが複数回連続します。

{}
1グループのデータが入ります。これで囲まれると「ひとまとまり」という感じ。

”なまえ”:”内容”
要素の名前と、その内容になります。名前には必ずダブルクオーテーションがつきます。内容は数値だと付かないかな?ついたりつかなかったりだったはず(うるおぼえ

,
まだ続くときに付けます。
続かないときはつけません。

ふぅ、、こんな感じか。
で、ですね、これを手書きでやってもいいんですが、面倒なので、Excelさんにちょっと手伝ってもらいます。

ってことでこんな感じを作っていきましょう。

Excel召喚!

えーっと、私が使っているのは無料版のやつです。ありがとうマイクロソフト✨
キーボード入力が早いと最初の一文字目がアルファベットになって「…キィーー!」となるやつです。

うーん、いきなりやるとムツカシイから、まずはQAのデータだけ入れてみますか?
こんな感じに。

かんたんに、かんたんに

はい、では次に、この二つをくっつけた文字を表示してみましょう。

はい。

キーボードで入力しなくてよいですよ
「fx」って書いているところにありますね「=B2&C2」と書いてあります。
これは、「B2の内容とC2の内容をくっつけて表示する」という意味になります。
ちなみにこの内容をコピペすると、ほかの場所でもくっつける文字列を自動で判断して思った通りの文字を返してくれます。(説明下手だな。。w

え?これじゃ使えないって?
わかってますがな。
じゃ、何が必要か?えーっと
”なまえ”:”内容”
という形式にしたいんですよ。
で、詳しく書くなら

      {
        "q": "どういったことができますか?",
        "a": "こんなことができます"
      },
      {
        "q": "○○ですか?",
        "a": "××ができます"
      },
      {
        "q": "質問",
        "a": "回答"
      }

こうしたいのです。
ちょっと分解しましょう。
えーっと質問の前に表示したい文字列は、、
{ "q": "
で、質問と回答の間に表示したい文字列は、
", "a": "
んでんで、回答の後ろに表示したい文字列は、
" },
こんな感じになります。
あ、改行は気にしなくて良いです。
出来上がったデータを張り付けた先で整地する機能が大体あるはずなので。

では、今確認した最初と真ん中と最後につけたい文字をExcelの適当なところに張り付けます。

こんな感じか。

で、それらをくっつけるとこうなる。

おおおおお!

良さげな感じになりましたね。
式を見てみましょう。
先ほど説明したとおり、「&」で並べると文字列をくっつけてくれます。=$D$1&B2&$E$1&C2&$F$1
はい、突然$が出てきましたね。
こちら「固定」という意味です。
これを付けているとこの式をほかの場所にコピペしても「$」がついた部分は変わらないんです。要は
「必ず、指定したセルの内容を使う」という感じですね。

おし、張り付けてみっぞ

え?早い?いやいや、ちゃんとできてるか確認するならさっさと張り付けた方が良いです。
貼り付け先はVisualStudioで、、
適当なjsonファイルを新規作成してください。

突然のVisualStudio

んでですね、今回作成したのは配列の中身になるんです。
配列は[]で囲まないといけないので、先にそれだけ書きますね。

こんなかんじ

で、

ここの内容を

作成した内容をコピーしまして
jsonファイルの中に張り付けますと、、

おぉ~

VisualStudioさんが勝手に改行なりインデントなりつけてくれるのでこんな風になります。ラクチンポン!

ふぅ、Q&Aの内容についてはこれでいけそうですね。
次はQ&Aの見出しの部分。

ここよ。

「このアプリについて(以降小見出しって呼びますね)」ってのも同時にやれると楽チンですね。項目増えてもjsonファイル修正するだけで勝手に対応されるとか楽じゃん。
じゃぁ、こちらについても分解しましょう。

  {
    "name": "このアプリについて",
    "nakami": [
      {
        "q": "どういったことができますか?",
        "a": "こんなことができます"
      },
      {
        "q": "○○ですか?",
        "a": "××ができます"
      },
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  },

これを作ります。
えーっと分解。小見出しの前に必要なのは
{"name":"
小見出しとQA配列の間に必要なのは
","nakami": [
で、QA配列の後に必要なのは、
] },
こんな感じですね、
ではExcelを見るぜ。

行挿入

行挿入は一番左の数字のところを右クリックして「上に行を挿入する」
で右クリックした行の上に一行追加されます。
で、ここに小見出しを書いてみますかね

うん、あかんw

このままだとよくないですね、
小見出しの時は小見出し用の文字をあれしたいのです。
えーっと、、どうすっかな。。
えいや。

まずは前後にくっつける文字をエクセル上に記述しておきますね。
で、

いったん小見出しがどうなるか書いてみました。
こんな感じですね。
でも、でもですよ。
「ここは小見出し、ここはQA」って一つ一つ手作業で式を切り替えるのは面倒ですね。
ということでこうです。(ちょっと式が長くなる)

IF文をつかうのです。。

回答欄が空白の場合小見出しとしてテキストを作成し、
回答欄が空白でない場合はQAとしてテキストを作成するようにしています。
これでコピペだけで必要なテキストが作成されるようになりました。
・・・と、おもうでしょ?
もうちょっとです。
二つ目の小見出しを見てもらうとわかるのですが、
二つ目の小見出しの前に、一つ目の小見出しを閉じなきゃいけないんですがそれがないんですよね。。
なので、こう。。

こんなかんじ。

えーっと質問・小見出しが入るエリアが空白の場合は小見出しを閉じるように記述してみましたよ。(雑
これでいける気がします。
コピペしてみますかね、よいしょっと。

うむ。よい。

おかしなところがあるとVisualStudioさんが波線つけて教えてくるのですが、それがないので、問題なさそうです。
ふっふっふ、、、面倒ごとはExcelに押し付けるにかぎるぜ。。

注意点

ダブルクオーテーションですが、全角と半角の見分けが難しいです。全角を使用してしまうとうまく行かなくなるので注意。
”←全角ダブルクオーテーション
"←半角ダブルクオーテーション
・・・ね。全然わからんw
(わたしの使用している端末のフォントの問題かもしれない)

これでJsonファイルの更新も怖くないぜ!
ではでは。

この記事が気に入ったらサポートをしてみませんか?