Jsonデータを扱うRubyとJavaScriptのプログラムを作ってみた

Excelで作成した表があるので、それをブラウザーで表示してみようと思いました。

JavaScriptから直接Excelファイルを読み込む方法もあるようだけど、Jsonの勉強がしたくて、敢えてExcel⇒JsonをRubyで作成して、Jsonファイルを読み込んで表示するJavaScriptを作成しました。

作成したとたんに、後から見ると何でこんなコーディングになっているんだっけ、と記憶力の低下は否めません。(T T)

という事で、作成したプログラムのコーディング内容を記録したいと思います。

概要

全体の流れ

先ず、全体の流れを図に整理してみます。

ステップ1でExcelの表を作成し、ステップ2でそれからJsonファイルを作成し、ステップ3でそれを読み込んでHtmlで表示します。

ステップ１

ステップ1では、普通にExcelで表を作成しています。

サンプルで作成した表は、以下のものです。

A列には、ブラウザーで検索するときのキーとなるグループ名を入れています。検索はアルファベットを想定しているので、グループ名は英数字や特殊文字(@,&)としています。

ステップ２

これから、ステップ2のRubyプログラムでJsonファイルを作成します。

実行のログと実行結果は以下のようになります。

これで、以下のようなJson形式のテキスト・データを作成します。

{
"Kantoh": 
[{"店番":"001","支店名":"東京","製品A":"88","製品B":"77","製品C":"83","製品D":"78"},
{"店番":"002","支店名":"埼玉","製品A":"91","製品B":"65","製品C":"99","製品D":"94"},
{"店番":"003","支店名":"千葉","製品A":"80","製品B":"76","製品C":"78","製品D":"78"}],
"Chuubu": 
[{"店番":"004","支店名":"名古屋","製品A":"51","製品B":"53","製品C":"90","製品D":"52"},
{"店番":"005","支店名":"岐阜","製品A":"67","製品B":"51","製品C":"84","製品D":"83"},
{"店番":"006","支店名":"三重","製品A":"90","製品B":"71","製品C":"87","製品D":"86"}],
"Kansai": 
[{"店番":"007","支店名":"大阪","製品A":"59","製品B":"56","製品C":"62","製品D":"89"},
{"店番":"008","支店名":"京都","製品A":"75","製品B":"97","製品C":"53","製品D":"92"},
{"店番":"009","支店名":"兵庫","製品A":"100","製品B":"93","製品C":"58","製品D":"95"},
{"店番":"010","支店名":"奈良","製品A":"51","製品B":"58","製品C":"95","製品D":"56"}]
}

"kantoh"や"chuubu"、"kansai"をキーとしたハッシュになっており、それぞれの値は配列になっています。さらに、その配列の各データはハッシュになっています。

ステップ３

ステップ3で、ブラウザーを使って表示します。

当然Htmlをブラウザーで表示させるには、Webサーバーがあった方がいいと思います。

しかし、Webサーバーを持っていなくて立てるのが面倒なのと、Jsonファイルもローカルにあるので、ローカルに作成した index.html をブラウザーで表示させます。

最初に index.html を表示させた結果は、以下のようになります。

「参照」ボタンをクリックしてJsonファイルを選択すると、以下のように現在日時とファイル名が表示されます。

この状態で「検索」ボタンをクリックすると、全件のデータが表示されます。

ここで「検索」ボックスにキーを入力すると、一致する地域のものだけが表示されます。そのことについては、後ほどのJavaScriptのメモのところに記述します。

全体の流れが整理できたところで、RubyプログラムとJavaScriptのそれぞれの内容について、後続のページで記述していきたいと思います。

開発してみて、Excel⇒Json⇒JavaScript という流れは、頻繁にExcelの表を修正する場合には面倒に感じます。今後勉強して、Excelファイルを直接JavaScriptで読んでブラウザーに表示するのが簡単に出来るようであれば、挑戦してみたいと思います。

でも、今回JsonのデータをRubyやJavaScriptで使ってみて、簡単だと感じたのと、大変勉強にはなりました。