初心者メモ：javascriptのオブジェクトとかJSON

2012/6/4 [23:26:02] (月)

ハマったのでメモしておく。とほほ。
やりたいこと。
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のヒラギノで見る縦書きにぞっこん、なので、モチベーションは高いのでありました。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら