JSONの視覚化・編集用スクリプトJSON形式データ等の配列・オブジェクトリテラルのデータをツリー化表示して構造を見やすくするスクリプトのツリー表示版。Explorer風にしてリテラルデータの編集(Edit)をする事ができるようにしてあります。スクリプト中から呼び出す事でJSON形式データの作成、表示・編集する事も可能です。(編集後に呼出元スクリプト中の変数に戻す機能は無駄なのでありません)スクリプトからの呼び出しフォームからの入力PHPからPHPの配列をJSON形式に変更作成して表示・編集する事も可能です。リテラルデータを貼り付けて視覚化確認する方法Windows、Shift_JIS記述のHTMLファイルが入っています。]Step1調べたい配列のあるJavaScriptソースのあるHTMLファイルと同じ場所にjson_explorer.htmlを置きます。window.open('json_explorer.html?main','Hashwin','width=870,height=600,resizable=yes,scrollbars=yes');Step3自分のスクリプトを動かしてください。(むき出しならリロード、関数内ならその関数を呼び出すまでの流れ)その地点に処理が来ると、ポップアップウィンドウが開きます。ポップアップウィンドウ側から変数が参照されて配列、連想配列がテーブルとして表示されます。}を書き込むか、関数化するなどしてこの処理へ誘導してください。配列変数を引数として指定してください。$Hashstrに、配列をJSON形式にした文字データが格納されます。Step2HTML部分、またはHTML出力部分で、次のようなスクリプトタグとコードを打ち出すようにしてください。$Hashstrが変数の値として展開されるように。無理な場合は$Hashstrを単純にHTML上に文字列展開させてください。JSON型のリテラルデータが表示されますので、コピーして『使い方3』を利用してください。]Step1ブラウザで普通にjson_explorer.htmlをそのまま開いてください。単独で開くとインターフェイスとしてデータ入力用フォームが表示されます。Step2変数名(参照用)はあっても無くても良いですが、あった方がわかりやすいかも?データを入力してSubmitボタンを押します。JSON編集などJSON_Explorer右画面のバリューがJSON形式で表示される部分が編集可能領域です。バリューがオブジェクトや配列であればJSON形式になりますし、単一の値であれば値が表示されます。必要な箇所を編集する、コピーするなどしてください。JSON形式が視覚的に見辛いので多重配列の深さにあわせてインデントを加えてあります。同階層のデータを同じ位置に表示するようにして、データを見やすくなります。IndentModeを外して左ツリー画面で目的のオブジェクトクリックして再表示させてください。インデントありのままでも使えますが、無駄にスペースをとります。ボタンがアクティブになります。ボタンがアクティブになります。編集画面に出ているデータを、キーソート、バリューソート、リバース可能です。これはフォーム上が書き換えられるだけで『ChangeData』を押すまではツリー側のオブジェクトは変更されません。変更が必要な箇所を変更、リバースやソートなどが済んだら『ChangeData』ボタンを押すと、左に表示中のツリーのデータが書き換わります。JavaScriptコードから起動したからといって元画面のスクリプトの変数が書き換えられるわけではありません。『あくまでも受け取ったデータの編集』だけです。編集画面に表示されている物が反転します。IEはアクセス拒否していなければそのままクリップボードコピーにされています。NN系は右クリックでコピーをしてください。Operaを使う場合は必ず後述の注意事項を読んでください。■JavaScriptのルールに則って編集データを書き換える時は必ずJavaScriptソース内に書き込むのと同じ書き方を必ずしてください。数値型になり、囲めば文字列型になります(普通のJavaScriptと同じ)。様にJavaScriptでエラーがでない形式で書き込んでください。JavaScriptのeval()での評価が入りますので、JavaScriptのコード記述形式に合わない物はエラーではねられます。オブジェクト記述するfunctionコードの中身は実行されるまでは評価されないので、エラーチェックはできません。正しいリテラルデータであれば普通に表示・編集が可能です。}の様なものも普通に表示・編集できます。一つ上の階層のリテラルデータを編集すれば可能です。IndentModeで見れば見やすくなります。eval()での評価などがプログラム中にあるのでJavaScript内で扱えるリテラルデータとしてはほぼ大丈夫だと思います。(バグの存在の可能性は十分あります)FireFoxのtoSource()より少し丁寧なリテラル記述になっています。IE6、IE7、FireFox2、Netscape7では全て同じように動きます。キー:バリューの決まった形式になります。ソートやリバースも正しく行われるはずです。Operaに関しては条件によって問題が出ます。OperaOperaはバグか仕様なのかコンストラクタがオブジェクトであっても、数字キーは優先されて先頭に並ぶようにできています。従ってリバースやソートが正しく行われない場合があります。数字キーがまず先頭に並び、その後の文字キー部分だけがソートやリバースされた状態のオブジェクトが出来上がります。現在、当サイトでデータを収集スクリプトを置いてブラウザの違いを記録していますが、Operaだけはやはりこの自動整列が起きるようです。従ってJOSN_Explorerでのリバースやソートは数値キーを持たないオブジェクト・連想配列であれば正しく行えますが、それ以外はこの癖からは抜けられません。できるだけ意図した目的に沿う正確なデータが欲しい場合は、FireFox2かIE7以上を使ってください。私はメインがIEなのでIE基準で作っていますが、FireFoxが推奨です。スクリプトからの呼び出し(別ウィンドウからの呼び出し)の使い方をする場合はIEだと重いです。ローカルファイルとして使う場合は特に重く、ローカルサーバーも含めサーバー上で使う場合はそれほど重くなりません。スクリプトの構造上、元ウィンドウを参照しなくなるので軽くなります。起動時にこのアクションをつけると、データ量が多い場合起動がかなり遅くなるので手動でお願いします。ローカルHTMLファイルとして使用すると、何度もChangeDataを繰り返す度に重くなっていきます。ローカルで使う場合はサーバーを介した方が使いやすいです。FireFoxがデータの正確性、速さは最も安定しています。最速はSafariです。多少他のブラウザ達と動きが違う問題点もあるブラウザですが、その変は一応調整してあります。Operaは前述の問題点があるのでデータの正確性からいくと推奨できません。注意事項等このスクリプトこれは単に連想配列や多重配列を視覚的に確認、編集する為の物で、JavaScriptのライブラリではありません。処理の計画を立てたり、処理の結果の確認、データの編集などに利用する為の補助ツール、編集ツールです。対応ブラウザIE6、IE7、Netscape7、FireFox2、Opera9、Safari3で確認しています。IEとNetscape、FireFox、Safariはまったく同じように動くようにスクリプトをちょっと遠まわしにしながら調整できています。Safariもほとんどこれらとゞ動きをするように、これも調整されてコーディングしてあります。Operaについてはブラウザの仕様の問題で、前述の問題点などがあるだけでそれ以外は逆にSafariよりもIEやFireFoxと同じ動作をします。正確性を求めるならIEかFireFoxを使ってください。このスクリプトはFireFoxが最も正確に動く可能性が高いです。OSはWindowsXPのみで確認しています。この時に元のウィンドウを閉じない(リロードさせない)でください。IEの場合は元の変数への参照が不可能になりエラーが出て動作できなくなります。他のブラウザでも、元のウィンドウが消えるとJSON_Explorerのリロードでデータが取れなくなります。元のウィンドウは残したまま利用してください。元のウィンドウをリロードする場合はリロードが再ポップアップ(ウィンドウは同じで良い)させてください。windowオブジェクトなどのJavaScriptが持つオブジェクトは渡さないでください。windowの場合はtopと言うプロパティが存在すれば、windowその物を指し示すので無限ループします。これらのオブジェクトはFireFoxのDomInspectorなどで見ればわかる通り大量のプロパティと、下層の何層にもなるオブジェクトプロパティの構成でできています。このテーブルビュアーは最深層までfor()ループを繰り返します。データが大きすぎるとフリーズします。それをJSON_Explorer.htmlのフォーム入力から使う方が便利だと思います。別窓で開いておいて参照用にする事でコーディングも楽になると思います。したデータでも結構な長さ(大きさ)の配列になる場合があるので、処理が重くなる場合が多いです。データの正確性データツリー及びバリュー画面がデータを100%正確に表示しているかどうかに関しては保証しかねます。自己責任で利用してください。公開ネット上への掲載はこれはコード中の変数の確認をする為の物ですので、基本ローカルやコーディング中に使う為の物です。JSON_Explorerのフォーム入力インターフェイスをネット上に掲載する必要があるかもしれませんが、その際は著作権表示及びリンクが必ずはっきりわかるようにしてください。無駄に見える部分コーディング上の無駄に見える部分は、大抵ブラウザの違いによる動作の違いを吸収する為の遠回りの処理です。部分引用も含めて確認連絡を必ずください。BBSやMailフォームはJPドメイン以外は受け付けません。)無駄な高額ドメイン管理料金払ってませんか?バリュードメインムームードメインお客さんに振込手数料を払わせていませんか?イーバンク銀行同士なら振込手数料無料。配布素材以外のコンテンツの無断使用・転載を禁じます。