多重配列、連想配列、JSONの確認用視覚化スクリプト

JSONデータの様に自分で作っていないデータの場合は、どう処理の流れを組むか？などは データの構造がはっきり見えていないと暗中模索の状態です。 一旦視覚化して構造を頭に入れておくとコーディングが楽になります。

データを変更したり、処理したりする物ではなく状態を見る為だけのスクリプトです。
スクリプトコードの中から呼び出したり、リテラルな配列・オブジェクトデータを貼り付ける事で 死人しやすいテーブルの状態で表示されます。

PHP内で扱ってる連想配列、多重配列などもJSON形式のJavaScriptデータを打ち出すことで簡単に確認できます。

配布スクリプト

Explorer風ツリー表示と編集、コピーが可能な物は別ページにあります。
=> JSON編集

Simple版 使い方

■使い方１ [ JavaScriptコード内の配列・連想配列・オブジェクトの確認 ]

Step1
調べたい配列のあるJavaScriptソースのあるHTMLファイル内で、
他のJavaScriptコードより先に
<script type="text/javascript" src="simpletable.js"></script>
読み込ませるか、simpletable.jsのコードを書き込んでください。

Step2
自分のJavaScriptソースコード内の配列の状態を確認したい地点に
HashTable(変数,'変数名');
の様に、
変数名と変数名を ' ' で囲んだものを引数０、１としてHashTable関数を呼び出します。

Step3
自分のスクリプトを動かしてください。
（むき出しならリロード、関数内ならその関数を呼び出すまでの流れ)

その地点に処理が来ると、HashTable関数が呼び出されてポップアップウィンドウが開き、 配列、連想配列がテーブルとして表示されます。

■使い方２ [ PHPスクリプト内の配列・連想配列の確認 ]

Step1
調べたい配列のあるPHPコードの、調べたい時点の場所に

Rich版 使い方

■使い方１ [ JavaScriptコード内の配列・連想配列・オブジェクトの確認 ]

Step1
調べたい配列のあるJavaScriptソースのあるHTMLファイルと同じ場所にrichtable.htmlを置きます。

Step2
自分のJavaScriptソースコード内の配列の状態を確認したい地点に
このコードを書き、配列(オブジェクト)名とそれをクォートで囲んだ物をカンマで区切って [ ]に入れてください。

■使い方３ [ フォームからの入力 JSONデータなどのリテラル ]

Step1
ブラウザで普通にrichtable.htmlをそのまま開いてください。
単独で開くとインターフェイスとしてデータ入力用フォームが表示されます。

Step2
変数名(参照用)はあっても無くても良いですが、あった方がわかりやすいかも？
データを入力してSubmitボタンを押します。

その他 注意事項等

1. このスクリプト

これは単に連想配列や多重配列を視覚的に確認する為の物で、ライブラリではありません。
処理の計画を立てたり、処理の結果の確認などに利用する為の物です。


2. 膨大なデータは注意

JavaScriptの windowオブジェクトなど、JavaScriptが持つオブジェクトは渡さないでください。
例えば windowの場合はtopと言うプロパティが存在すれば、 これは単独で開いてる場合、windowその物を指し示すので無限ループします。 また、これらのオブジェクトはFireFoxのDomInspectorなどで見ればわかる通り大量のプロパティと、その下層の何層にもなるオブジェクトプロパティの構成でできています。 このテーブルビュアーは最深層までfor()ループを何度も繰り返します。 データが大きすぎるとフリーズする場合もあります。


3. JSONデータ等の場合

処理の計画を立てる場合は無理にソース中から呼び出すよりは、 ブラウザのアドレスバーにAPIへのURLを打ち込んでJSONデータを取り出せばリテラルでデータが手に入りますから、 それをrichtable.htmlのフォーム入力から使う方が便利だと思います。(その為にフォームインターフェイスを用意しています) 別窓で開いておいて参照用にする事でコーディングも楽になると思います。


4. PHPでのXMLパース

APIでXMLデータなどを受け取ってxml_parseなどで処理して連想配列化されたデータの表示もできますが、 ちょっとしたデータでも結構な長さ(大きさ)の配列になる場合があるので、処理が重くなる場合が多いです。


5. データの正確性

データテーブルがデータを100%正確に表示しているかどうかに関しては保証しかねます。
HTMテーブルで表示をする為データの表示用加工などもありますので。
自己責任で利用してください。


6. 公開ネット上への掲載は

これはコード中の変数の確認をする為の物ですので、基本ローカルやコーディング中に使う為の物です。 richtable.htmlのフォーム入力をネット上に掲載する場合などもあるかもしれませんが、その際は著作権表示及びリンクが必ずはっきりわかるようにしてください。


7. スクリプトコードの利用

部分引用も含めて確認連絡を必ずください。