多重配列、連想配列、JSONの視覚化・編集用スクリプト

JSON形式データ等の配列・オブジェクトリテラルのデータをツリー化表示して構造を見やすくするスクリプトのツリー表示版。

Explorer風にしてリテラルデータの編集(Edit)をする事ができるようにしてあります。

別ページの『配列視覚化』テーブルのスクリプトと同様に、 スクリプトの流れの中での配列(多重配列・連想配列・オブジェクト)の状態を スクリプト中から呼び出す事でJSON形式データの作成、表示・編集する事も可能です。
(編集後に呼出元スクリプト中の変数に戻す機能は無駄なのでありません)

スクリプトからの呼び出し
フォームからの入力
PHPからPHPの配列をJSON形式に変更作成して表示・編集する事も可能です。

---

配布スクリプト

---

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

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

Windows、Shift_JIS記述のHTMLファイルが入っています。

---

使い方 起動関連

---

■使い方１ [ JavaScriptコード内からの起動と視覚化確認 ]

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

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

/* 変数 ARTEMIS は 必ずグローバル */ ARTEMIS = [配列変数名,'配列変数']; window.open('json_explorer.html?main','Hashwin','width=870,height=600,resizable=yes,scrollbars=yes');

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

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

---

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

Step1
調べたい配列のあるPHPコードの、調べたい時点の場所に
/* ほぼ正しい 配列(多重・連想)のJSON形式への変換 */ $Hashstr = ''; literal(配列変数,1); //ここで配列変数を引数に設定 function literal($Hash, $first){ if(is_null($Hash)){ return false; } Global $Hashstr; if( is_array($Hash) ){ /* 普通配列をjavascript側でも普通配列にする場合 */ $markF = '['; $markR = ']'; $array = true; $tmp = array_keys($Hash); $tmpstr = join('',$tmp); if( ereg('[^0-9]',$tmpstr) ){ $markF = '{'; $markR = '}'; $array = false; } /* 全てー key & value のペアとしてjavascriptのObjectで良いなら、 $markF = '{'; $markR = '}'; $array = false; の1行だけ。 */ $Hashstr .= $markF; foreach ($Hash as $key => $val){ if( $first ){ $first = 0; }else{ $Hashstr .= ','; } if(!$array){ $Hashstr .= '"' . $key . '":'; } if( is_array($val) ){ literal($val, 1); } else{ if( is_null($val) ){ $str = 'null'; } elseif( is_bool($val) ){ $str = var_export($val, true); } elseif( is_string( $val) ){ $str = '"' . $val . '"'; } else{ $str = $val; } $Hashstr .= $str; } } $Hashstr .= $markR; } }
を書き込むか、関数化するなどしてこの処理へ誘導してください。
literal(配列,1);の『配列』の所に 配列変数を引数として指定してください。
$Hashstrに、配列をJSON形式にした文字データが格納されます。

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

Step2
HTML部分、またはHTML出力部分で、次のようなスクリプトタグとコードを打ち出すようにしてください。 必ず$Hashstrが変数の値として展開されるように。 <script type="text/javascript"> phpData = <?=$Hashstr?>; ARTEMIS = [phpData,'phpData']; window.open('json_explorer.html?main','Hashwin','width=870,height=600,resizable=yes,scrollbars=yes'); </script>

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

---

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

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

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

使い方 JSON編集など

---

JSON_Explorer右画面のバリューがJSON形式で表示される部分が編集可能領域です。 バリューがオブジェクトや配列であればJSON形式になりますし、単一の値であれば値が表示されます。
必要な箇所を編集する、コピーするなどしてください。

IndentMode(チェックボックス) はJSON形式が視覚的に見辛いので多重配列の深さにあわせてインデントを加えてあります。 同階層のデータを同じ位置に表示するようにして、データを見やすくなります。 コピーする際は IndentModeを外して左ツリー画面で目的のオブジェクトクリックして再表示させてください。
インデントありのままでも使えますが、無駄にスペースをとります。

バリューがオブジェクトであれば keysort、valuesort、reverse ボタンがアクティブになります。 バリューが配列の場合は valuesort、reverse ボタンがアクティブになります。 編集画面に出ているデータを、キーソート、バリューソート、リバース可能です。
これはフォーム上が書き換えられるだけで『ChangeData』を押すまではツリー側のオブジェクトは変更されません。

変更が必要な箇所を変更、リバースやソートなどが済んだら『ChangeData』ボタンを押すと、左に表示中のツリーのデータが書き換わります。
間違えないで欲しいのが、このJSON_Explorer上で読み込んでいるオブジェクトデータが書き換わるだけで、 JavaScriptコードから起動したからといって元画面のスクリプトの変数が書き換えられるわけではありません。 『あくまでも受け取ったデータの編集』だけです。

全ての変更が終わったらツリーのTOPオブジェクトの部分をクリック、または欲しい場所のデータを表示させてCOPYボタンを押すと、 編集画面に表示されている物が反転します。
IEはアクセス拒否していなければそのままクリップボードコピーにされています。 NN系は右クリックでコピーをしてください。

Operaを使う場合は必ず後述の注意事項を読んでください。

---

■JavaScriptのルールに則って編集

データを書き換える時は必ずJavaScriptソース内に書き込むのと同じ書き方を必ずしてください。 文字列であれば『ダブルクォーテーションで囲む必要があります』
数字の場合は ダブルクォーテーションを使わなければ 数値型になり、囲めば文字列型になります(普通のJavaScriptと同じ)。 functionであれば、正しくfunction(){ } の様にJavaScriptでエラーがでない形式で書き込んでください。

他人が入力送信するようなものではないので、入力チェックは行っていませんが、 JavaScriptのeval()での評価が入りますので、JavaScriptのコード記述形式に合わない物はエラーではねられます。 オブジェクト記述するfunctionコードの中身は実行されるまでは評価されないので、エラーチェックはできません。

JavaScript内で使う、オブジェクト形式にまとめ上げたコーディングなどのオブジェクトも、 正しいリテラルデータであれば普通に表示・編集が可能です。 例えば、JavaScript内で使うようなオブジェクトの
{ jump:function(){},on_click:function(){} }の様なものも普通に表示・編集できます。

特定の下層オブジェクトのキーを変更したり、追加したり、キーごとデータを削除・追加する場合は 一つ上の階層のリテラルデータを編集すれば可能です。 IndentModeで見れば見やすくなります。

---

■JSON形式の信頼性について
JSON形式に100%沿っているかどうかまでわかりかねますが、 eval()での評価などがプログラム中にあるのでJavaScript内で扱えるリテラルデータとしてはほぼ大丈夫だと思います。 (バグの存在の可能性は十分あります)
FireFoxのtoSource()より少し丁寧なリテラル記述になっています。

確認済みブラウザとして IE6、IE7、FireFox2、Netscape7では全て同じように動きます。 普通配列は[ ]でくくられインデックスは表示されず、連想配列やオブジェクトは オブジェクトとして { } でくくられて キー：バリューの決まった形式になります。ソートやリバースも正しく行われるはずです。

ただOperaに関しては条件によって問題が出ます。

Opera
Operaはバグか仕様なのかコンストラクタがオブジェクトであっても、数字キーは優先されて先頭に並ぶようにできています。(配列じゃないのに…) 従ってリバースやソートが正しく行われない場合があります。
例えば通常キーが 1,bbb,ccc,4,aaa という並びの物でも、Operaの場合はこのオブジェクトができた時点で自動整列されて 1,4,bbb,ccc,aaaa となっています。これを一旦配列化分解してソートして新しくオブジェクトを作り直しても、 必ず数字キーがまず先頭に並び、その後の文字キー部分だけがソートやリバースされた状態のオブジェクトが出来上がります。 現在、当サイトでデータを収集スクリプトを置いてブラウザの違いを記録していますが、Operaだけはやはりこの自動整列が起きるようです。
従ってJOSN_Explorerでのリバースやソートは数値キーを持たないオブジェクト・連想配列であれば正しく行えますが、それ以外はこの癖からは抜けられません。
できるだけ意図した目的に沿う正確なデータが欲しい場合は、FireFox2かIE7以上を使ってください。

---

■その他
推奨ブラウザは FireFoxです。
私はメインがIEなのでIE基準で作っていますが、FireFoxが推奨です。 フォーム入力式で使う場合ははどれもブラウザの速度差による違いしかありませんが、 スクリプトからの呼び出し(別ウィンドウからの呼び出し)の使い方をする場合はIEだと重いです。
ローカルファイルとして使う場合は特に重く、ローカルサーバーも含めサーバー上で使う場合はそれほど重くなりません。 コーディングに問題があると思いますので軽くする為に勉強中です…

IEの場合ツリーが表示されたら一度TOPオブジェクトをクリックしてから『ChangeData』を押すと、 スクリプトの構造上、元ウィンドウを参照しなくなるので軽くなります。 起動時にこのアクションをつけると、データ量が多い場合起動がかなり遅くなるので手動でお願いします。
また、ローカルHTMLファイルとして使用すると、何度もChangeDataを繰り返す度に重くなっていきます。 ローカルで使う場合はサーバーを介した方が使いやすいです。
FireFoxがデータの正確性、速さは最も安定しています。最速はSafariです。
多少他のブラウザ達と動きが違う問題点もあるブラウザですが、その変は一応調整してあります。
Operaは前述の問題点があるのでデータの正確性からいくと推奨できません。

---

その他 注意事項等

---

1. このスクリプト

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


2. 対応ブラウザ

IE6、IE7、Netscape7、FireFox2、Opera9、Safari3で確認しています。
IEとNetscape、FireFox、Safariはまったく同じように動くようにスクリプトをちょっと遠まわしにしながら調整できています。 またSafariもほとんどこれらとゞ動きをするように、これも調整されてコーディングしてあります。 Operaについてはブラウザの仕様の問題で、前述の問題点などがあるだけでそれ以外は逆にSafariよりもIEやFireFoxと同じ動作をします。 正確性を求めるならIEかFireFoxを使ってください。

このスクリプトはFireFoxが最も正確に動く可能性が高いです。 OSはWindowsXPのみで確認しています。



3. 元ウィンドウを閉じないで

JavaScriptスクリプトやPHPスクリプトから呼び出した場合はPOPアップウィンドウでJSON_Explorerが起動しますが、 この時に元のウィンドウを閉じない(リロードさせない)でください。 IEの場合は元の変数への参照が不可能になりエラーが出て動作できなくなります。 また他のブラウザでも、元のウィンドウが消えるとJSON_Explorerのリロードでデータが取れなくなります。 元のウィンドウは残したまま利用してください。 元のウィンドウをリロードする場合はリロードが再ポップアップ(ウィンドウは同じで良い)させてください。


4. 膨大なデータは注意

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


5. JSONデータ等の場合

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


6. PHPでのXMLパース

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


7. データの正確性

データツリー及びバリュー画面がデータを100%正確に表示しているかどうかに関しては保証しかねます。
自己責任で利用してください。


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

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


9. 無駄に見える部分

コーディング上の無駄に見える部分は、大抵ブラウザの違いによる動作の違いを吸収する為の遠回りの処理です。 『Arrayか？Objectか？』『可変indexの配列か？連想配列か？』などを単純なプロパティチェックで見分ける方法を知らないので(^^； constructor以外で知ってる方は教えてくださいm(__)m


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

部分引用も含めて確認連絡を必ずください。
BBSやMailフォームはJPドメイン以外は受け付けません。

---