ハマったのでメモしておく。とほほ。

やりたいこと。

JSONで連想配列のペアを渡して、そいつをevalで読み込みオブジェクトにして、キーを作って値を取り出す。ありがちで、よく使われるシチュエーションだ。なのに、どうにもこうにも見えてこないんで、小さくテストをしてみた。

var data = {key1:val1， key2，val2}； というJSONのデータ

まず、evalの書き方でハマった。WEBを探すと、evalに渡す時に、変数を()で括る必要がある、という記事を多数見かけたので、やってみたら、missing after elements だかのエラー。

var obj=eval(data)；

と、なんの細工もせずにシンプルに書いたら、これでOKだった。()で括る必要があったり、”の展開を考えたり、ラベルが問題？とか右往左往した。ネットの２次情報を呪文状態で使っちゃだめですよ、てことだな。１次情報に当たるべし、だった。

さて、次のハマり。

var str = "key"；

var num = 1；

var key = str + num；

どの値が欲しいのか、てことで、こんなことは当たり前にある。

変数の key を作ったんで、さて値の取出しだ、と

obj.key

とかやったら undefined

for(var k in obj){

alert(k)；

}

でオブジェクトを確認すると、当然 key1 はある。添え字とか、オブジェクトとか、値の取出しとか、グーグル様にすがった…これもevalの書式と同じことだった。基本部分をちゃんと読め、だ。おれ。

obj[key]

とやればいいだけだった。上記以外にも、セミコロンを最後に忘れてたり、JSONの中のダブルクォートをどうしようかとか（結局わからず、JSONのデータ中で使われてるダブルクォートはシングルクォートにした）

ほとんど半日潰れたようなもんだぞ、ううう。

とりあえず。これが解決したので、創作文芸見本誌会場HappyReading のスマホ版リニューアルに向けて立ち読み動作の目途が立った、かな。

ここんとこ同じことばかり言ってアレだけど。jquery mobile は文句のつけようのないデザインフレームワーク。ネーム、絵コンテ、下書きまでやったら、残りのペン入れ、仕上げをやってくれるのだ。でもさすがに、それにはお約束事があって、jquery mobile のお作法では、リンクでページの読み込みや、ajaxの挙動にクセがある。

テキトーにページを読み込んだりajaxでコンテナを書き換えたりできるんだけど、それをしちゃうと、デザインフレームワークを生かせない。jquery mobileが提供してくれているデザインは、スマホに特化したもので、それはスマホの特性、画面、UIを考えて作られたデザインだ。考えらえたデザインを捨ててまで、自前のオリジナルjavascriptを組み込むのは愚の骨頂。デザインとjavascriptと、どちらのコストが高いか、比べるまでもない。

てことで、今、ajaxでいちいちページごとにサーバーに来て取得していた立ち読みテキストを、JSONで一度に取得してあとは、javascriptで document.write するだけ、に変更中。iphoneのヒラギノで見る縦書きにぞっこん、なので、モチベーションは高いのでありました。