iPad safariで csv にアクセスすると tableタグが勝手に。
2010 年 7月 25 日
某Flash案件が「どうせだったらiPadで観たいよね」と、そっくりそのまま「HTML+Javascript」案件に変更され、現在も制作中ではありますが、途中で引っかかったので個人的メモ。
「jsで外部csvを引っ張ってきて、そのデータに対応したソースを表示」という、なんてことのない処理を行うとしたところ、iOS4の実機では動くものの、iPadとiOS3.2のシミュレータで動かず。ん?なんでだ?jsがおかしいのか?と小一時間苦闘して、特にjsに悪いところは見つからず胃が痛くなり、藁にもすがる思いでsafariから直接csvデータにアクセスしてみたところ、左上の画像のように、なんか線が引かれてます。なんだこれ(汗)。
ちなみに、元データのcsv(utf-8)の内容は
田中,180cm,70kg
鈴木,175cm,65kg
佐藤,170cm,60kg
と、極めて一般的なカンマ区切りのcsv。だのになぜtable調に表示されているんだ?と読み込んだcsvをalert()で表示させたのが、右上の画像です。なにやら親切に、tableタグやらcss設定やらbodyやらがくっついています。カンマは見る影もありません。これが諸悪の根源でした。で、いろいろ自分なりに苦闘した結果、
●iOS3.2以前のiPhone / iPadの safari でこうなる。
●iOS4はこんなことにはならない(そのままのcsvが表示される)
●回避方法として「.csv」を「.txt」に変えれば問題なし。
ということがわかりました。「csvにアクセスしたら、ほら、表で表示されて便利でしょ?」っていう機能が良かれと思って付いていたっぽいのですが、個人的には「誰だこんな機能つけたやつ。一歩前出ろ。メガネをはずせ。歯をくいしばれ」と鉄拳制裁を加えてやりたい気分であります。しかし、外部csvデータとjsを連携させたサイトなんて沢山あると思うんですが、なぜにこんなことしたんでしょう。
