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

スクリプトの処理の流れの中での連想配列や多重配列のデータの状態を、 わかりやすく視覚的に確認する為の補助スクリプトです。

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

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

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



配布スクリプト


外部ソースファイルとして読み込ませてスクリプト内から呼び出すシンプルテーブル版と、 同じディレクトリにHTMLファイルを置き、スクリプト内から呼び出すリッチテーブル版があります。 名前と違ってリッチ版の方が使いやすいです。

■ File DownLoad  =>    simpletable.zip  

使用サンプル => スクリプトコード中から呼び出した場合


■ File DownLoad  =>    richtable.zip  

使用サンプル => スクリプトコード中から呼び出した場合

使用サンプル => リテラルデータを貼り付けて視覚化確認する方法

※どちらもWindows、Shift_JISで書かれている物が入っています。

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


Simple版 使い方

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

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

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

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

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


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

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


を書き込むか、関数化するなどしてこの処理へ誘導してください。
literal(配列,1);の『配列』の所に 変数を指定してください。
$Hashstrに、配列をJSON形式にした文字データが格納されます。

(JSONデータ作成用PHPライブラリがあればそっちを使ってOKです) 

Step2
HTML部分、またはHTML出力部分で、次のようなスクリプトタグとコードを打ち出すようにしてください。 必ず$Hashstrが変数の値として展開されるように。


Rich版 使い方


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

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

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

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

その地点に処理が来ると、ポップアップウィンドウが開きます。
ポップアップウィンドウ側から変数が参照されて配列、連想配列がテーブルとして表示されます。

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

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

を書き込むか、関数化するなどしてこの処理へ誘導してください。
literal(配列,1);の『配列』の所に 配列変数を引数として指定してください。
$Hashstrに、配列をJSON形式にした文字データが格納されます。

(JSONデータ作成用PHPライブラリがあればそっちを使ってOKです) 

Step2
HTML部分、またはHTML出力部分で、次のようなスクリプトタグとコードを打ち出すようにしてください。 必ず$Hashstrが変数の値として展開されるように。

PHPは使えるがJavaScriptは一切わからないとか、HTML出力できない人はいないと思いますが 無理な場合は$Hashstrを単純にHTML上に文字列展開させてください。 JSON型のリテラルデータが表示されますので、コピーして『使い方3』を利用してください。

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

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

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


その他 注意事項等


  1. このスクリプト

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

  3. 膨大なデータは注意

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

  5. JSONデータ等の場合

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

  7. PHPでのXMLパース

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

  9. データの正確性

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

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

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

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

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




専用ページから申し込むと
So-netより高い3万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか?

バリュードメイン
ムームードメイン