【手抜きUI】HTML5/JavaScriptによるJSON file viewer


ある日。Javascriptとjavaの違いもロクに分からないジジィが諸々な事情でそれらに関わらないといけなくなりました。そこで勉強がてらこれを作ってみました。

# 概要

JSONデータファイルを読み込んで解析して表示します。HTML5ベースで作りましたので、割といろんなプラットフォームで使るかと思います。

とはいえ、実際の解析部分は、kimihiro-n様が作成されたThe Fastest JSON visualizer（以下URL）をほぼそのまま利用させていただきました。

http://kimihiro-n.site44.com/json_dump/

また、**単なるViewerだと寂しいのでプロ生ちゃんを使ってみました。**

# 入手

GitHubで[ここ](https://github.com/gdaigo82/json_viewer)から入手してください。

# 使い方

#### ■起動

[githubから](https://github.com/gdaigo82/json_viewer)落としてもらって、index.htmlを引っ叩いてください。そうするとプロ生ちゃんが出てきます。後は彼女の指示に従って欲しいのです。

![jv_start.PNG](https://qiita-image-store.s3.amazonaws.com/0/129334/7b38f54e-0eb2-502e-a862-95313dea204f.png)
※とりあえずであればindex.htmlと同じフォルダにあるsample.jsonを利用できます。


#### ■解析結果はこんな感じで

JSON解析結果に関する補足もしておきます。結果はこんな感じで出ます。
（The Fastest JSON visualizerとほぼ同じです）

![jv_result.PNG](https://qiita-image-store.s3.amazonaws.com/0/129334/0cc4547e-1057-c7ff-29d4-0557ea60a584.png)
* 左側に表示される緑色の部分はルートからのパスになってます。Javascriptであればそのままコピペして使う事できます。
*  配列の場合、親要素をクリックすると子が畳まれます。JSONデータが大きいとか、後はプロ生ちゃんの反応（と言っても同じ反応しかしませんけど）を見たい場合に使ってみてください。


#### ■問題のあるJSONを開くと

解析結果でエラーが出ますと、以下のようにエラーメッセージが出ますので、参考にしてみてください。ファイルを修正した場合は、再度Browseをクリックして選び直す感じでお願いします。

![jv_err.PNG](https://qiita-image-store.s3.amazonaws.com/0/129334/f65175dd-1793-67b0-dbbd-5bae816ccfb5.png)

# 動作確認

以下環境で確認しています。（）はバージョンです。IEは恐らく動かないと思います。

 * Windows10 FireFox(47.0)／Chrome（51.0.2704.63 m 64bit）
 * MacOSX 10.11.5  FireFox(47.0)／Chrome（51.0.2704.84 m 64bit）／Safari( 9.1.1)

あと、Ubuntu 14-04のFirefoxでも恐らくは動くかと。
モバイル系はあまり意識していません。申し訳ありません…


# 制作のキッカケ

要はWindows、Mac、Linux系で共通で使えるJSON解析／可視化ツールが欲しかったのです。でも私は[こういう経緯](http://gdaigo.blog.jp/archives/4113464.html)もあり、初心者なのでどうしたものかと。

そうして調べますと、kimihiro-n様が作成したThe Fastest JSON visualizerが素晴らしかったので、これとファイルアップロードの機能使えば上記の要件が満たせると思い。HTML5系の勉強がてら作ってみました。

# プロ生ちゃんを使った理由

**手抜きがしたかった・・・ **

につきます（ごめんなさいプロ生ちゃん！）。

githubにあるgdaigo_bot.jsみたいなのを作ると、JPG作ってセリフ考えるだけで余計なデザインから解放されるかなーと思ってやり・・ま・・した。

今もいくつかIoTオモチャソフトを考えていて、これをベースにしたいなぁとかいうスケベ心もあったりします。組み込み系土方な私としては、デザイン考えるよりはsetStatus投げるんで後はしくよろーで済ませたかったのです。

もちろん以下のスケベ心の存在を否定するものではありません。

 * カワイイは正義。
 * もしかするとプロ生ちゃん目当てでクリックしてくれる人もいるかも。

ちなみにimgフォルダの画像はMikuMikuDanceを使ってポーズを作成して静止画で吐き出したものを使っています。

# 実装するにあたり。

いや、こんなレベルで苦労しているんです。
以下参考にしたサイトなどです。とにかく分からない事だらけでしたので・・

#### inputタグだけbootstrapっぽくないんですけど

以下サイトに書かれていますように、display:noneで隠してスクリプトで対応する方法があるようです。

http://vdeep.net/bootstrap-file

#### セリフっぽいUIどうしようか

以下のサイトを拝見し、popoverを固定するのが楽そうかなと思いました。

http://endoyuta.com/2013/09/30/twitter-bootstrap%E3%81%AE%E5%90%B9%E3%81%8D%E5%87%BA%E3%81%97/

#### JavaScriptでクラスっぽい実装はどうしましょう？

今だとJavaScriptが持つクラスはまだ使わない方が良いのでしょうか・・
以下のサイトがJavaScriptへの理解も含め大変参考になりました。

http://www.yunabe.jp/docs/javascript_class_in_google.html

#### HTMLのチェック

ここを使わせていただきました。私のような初心者だとimgタグのaltとかは忘れてしまっていたので、助かりました。

https://validator.w3.org/

#### こういうコード

```js
    $("#result").hide();
    $("#result").html(html);
```
JavaScript系で調べてもよく分からなくて困ってましたが、これらの詳細ははjQueryで調べないとダメなんですね。

# ライセンスなど

以下使わせて戴きました。素晴らしいソフトウェアを提供して下さり、ありがとうございます。

 * 本プロダクトは[MITライセンス](https://opensource.org/licenses/MIT)とします。詳細はGitHubを。
 * 元ネタのThe Fastest JSON visualizerは[MITライセンス](https://github.com/pistatium/json_dump)です。
 * bootstrapを利用しています。[MITライセンス](https://github.com/twbs/bootstrap/blob/master/LICENSE)です。
 * jQueryを利用しています。[MITライセンス](https://jquery.org/license/)です。
 * プロ生ちゃんの画像は[「プロ生ちゃん利用ガイドライン」](http://pronama.azurewebsites.net/pronama/guideline/)に従った利用が必要ですので、ご注意ください。
 * コードではありませんが、フォントはThe Fastest JSON visualizerと同じく[Google Fonts](https://www.google.com/fonts#AboutPlace:about)を使っています。


以上です。