jquery mobile管理化に別のjavascriptを
jquery mobileは、一度ページを読み込んだらいつまでどこまでDOMを保持管理してるのかが、複雑に入り組んでいる。サイトに着地して、ページのヘッダまでを読み込んだら、あとはbody部分のDOMの書き換えでページ表示している。リンク、というか、ページの取得は ajax が基本。そのために、id属性などは、ページに一意ではなくて、サイトで一意にしておいて、DOMまわりのトラブルを避けることが推奨されている。ajaxとidなどのプロパティは密接だからねえ。
このあたり「jquery mobile ポケットリファレンス」の Chapter20 ページイベントに図があって、ちょっとわかりやすい、かも。
やろうとしたことを具体的に。
PCサイトでは。
・本の詳細ページを開くと、そこには立ち読みテキストを読み込んで表示するコンテナがある。
・このコンテナにページャーがあって、ページリンククリックで ajax を走らせて、立ち読みテキストの次ページを取得して、コンテナ内を書き換えている。
上記したように、jquery mobileのDOM管理下だ。自作Javascriptで、$.ajaxを使ってページを取得する…スキルはわたしにはない。該当ページだけ ajaxではなくて、サイト外リンクを読むのと同様、ページ遷移するやりかたも用意されているが、それは jquery mobileの作法流儀じゃない。該当ページは、perlで動的に作ってるので、ページの中にJSONのデータを埋め込んで、evalでオブジェクトに読み込んでおくことにした。
というのが昨日までのあらすじ。
あとは、読み込んだオブジェクトを該当コンテナに $(#id).html(obj) とやれば楽勝、のはずだったのが、表示されるのは初めてページを読み込んだ時だけ。次にjquery mobile がajaxで遷移するとなにも表示されない。
alert(obj)では表示される。コンテナに直接 document.write(obj) とやると、エラー。とりあえず、pageshow とか pagecreate とか pagebeforecreate とか、それっぽいところにalertを入れまくって何が起こってるのかみた。
見てると。一度、オブジェクトに読み込んだら、いつまでも保持してる、っぽい。てことは、#id も掴んでまわしてる様子。そんなところに $(#id).html(obj) とやっても、受け付けてくれない、ということ、かな。
なので、pagebeforeload ページを読み込む前のところで、無理やり $(#id).remove() と初期化(?)したら、意図通り立ち読みテキストを該当コンテナに流し込むことができた。
iphoneで見る 創作文芸見本誌会場HappyReading
【象印社 「ソラ」著者:永瀬月臣・鳥久保咲人・くまっこ イラスト:あめ】
ヒラギノ明朝の縦書きはバランスもよくて、ほれぼれする美しさ。フォントは大事。小説に縦書きは大事、というのがよくわかるスクリーンショット。
これで公開だ、と思って、ヨメのAndroidで確認して愕然。というか慄然。縦書きになってない。
Androidもiphoneと同じwebkitのはずなのに、AndroidのブラウザはまだCSS3のwriting-modeに対応してないのだ。なんじゃそりゃ、と思って検索してみたら、Androidは個々ばらばらで、怨嗟呪いの声があちこちからあがっていた。
てことで、今まで公開していたスマホサイトも android用に残しておくことに。
iphone のヒラギノ明朝がきれいな、 新スマホサイト
android のために残した 今までのスマホサイト
うーん。スマホになったらブラウザの対応は簡単だと思ったのに。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
初心者メモ:javascriptのオブジェクトとかJSON
ハマったのでメモしておく。とほほ。
やりたいこと。
JSONで連想配列のペアを渡して、そいつをevalで読み込みオブジェクトにして、キーを作って値を取り出す。ありがちで、よく使われるシチュエーションだ。なのに、どうにもこうにも見えてこないんで、小さくテストをしてみた。
var data = {key1:val1, key2,val2}; というJSONのデータ
まず、evalの書き方でハマった。WEBを探すと、evalに渡す時に、変数を()で括る必要がある、という記事を多数見かけたので、やってみたら、missing after elements だかのエラー。
var obj=eval(data);
と、なんの細工もせずにシンプルに書いたら、これでOKだった。()で括る必要があったり、”の展開を考えたり、ラベルが問題?とか右往左往した。ネットの2次情報を呪文状態で使っちゃだめですよ、てことだな。1次情報に当たるべし、だった。
さて、次のハマり。
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」
jquery mobileがあれば簡単スマホ対応
いや、本当に。先日も同じことを書いたんだけど、jquery mobileを使えば、ほとんど何も考えることなくスマホ対応できる。スマホアプリと見た目も変わらないんじゃないか、これ。
フレームワークというと、phpだとcakePHPとかsymphonyとか、perlもCatalystとか、定評のあるフレームワークがあって webアプリ開発のコスト軽減になっている。という話。たしかに規則・お作法さえ理解して、その通りにスクリプトを書いていけば、あえて書かなくてもいいことがたくさんあるっぽい。ひとつのことを決めて書けば、それに付随するもろもろまで書いたことになる。
で、この jquery.mobileだ。
先日ちょっと触っただけで、踏み込んだことは言えないんだけど、自作のブログ(https://t2aki.doncha.net/mobile.pl)とお言葉データベース(https://t2aki.doncha.net/mobile_books.pl)をスマホへの移植に使ったレベルで言うと。
これはデザイナーのかわりをしてくれる、デザインのフレームワーク。
わたしは、データをごそごそ加工したり引っ張り出したりする部分に関しては、好きだし面白くて、データをあれこれいじってる時は時間を忘れてやってる、いわばデータヲタク。さらに、シムシティじゃないけど、使う側のことを考えて、サイトの動線やUIを考えて想像するのも楽しい。
サイトを作っていてうんざりするのが、そこから先。
ボタンが1pxズレてる?んなぐらい、いいじゃん。
アイコンがジャギってる?んなの気にしないって。
どうしてロゴの位置はここなの?なんとなくだ。
というのは、まるでダメ。
デザインの神さまは細部に宿るし、デザインはいちいちちゃんと説明できる理屈がある。データとかサイトの動線などとは別のレイヤー・別次元。そこんとこ、苦手なんだよねえ。
漫画でいうと、データを用意する・サイトの動線などの骨格・設計を決めるところは、絵コンテ、下書き。これでは完成してないし、読者は見向きもしてくれない。ここから先、デザインワーク=ペン入れ、仕上げがあって初めて希求力のあるサイトになる。
同じ情報を画面上に表示しても、1pxにこだわったサイトと、そこがぬるいサイト(たとえば、ページを移動したら1pxだかで画面が揺れるとか)では、「ぱっと見」の印象が違う。この「ぱっと見」は大事で、WEBを見ていて、そのサイトを「読む」に値するかどうかを判断するのは「ぱっと見」(そこまで、こだわるんか、というのは、なにをサイトに要求するのか、てことなので、また別の話。ここでは、そこ、こだわるところだろ、て話)
てことで、jquery.mobileだ。こちらが書いたラフ画を、一気に仕上げまで持って行ってくれるスグレモノで、感謝感動。専属のデザイナーをひとり雇ったようなもの。スクリーンショットのページなんて、わたしはなにもしていない。テキストをセンタリングするために1行~3行ほどcssに書いただけ。これをいちから書いたら、と思うとぞっとする。リストの区切り線とか、ボタンの影とか、テキストの位置とか、こんなのをcssで書けとか言われたら、いらいらしながら一週間がかり。jquery.mobileのおかげで、移植は各々実質1日で、なおかつ、スマホネイティブアプリのような画面のできあがり、となる。
で、javascirpt は、油断してたらすっかり主流でこんなことまでできるのか!?という存在感。クライアント側でなにをやったところで、信用できないし、結局はサーバー側でやるよね、と思ってたわたしが悪かったすまんかった。
html5になると、web storageとか。javascript がデータベースまで手に入れてるらしい。すごく今さらだけど、javascriptも勉強しなきゃいけないんだなあ。うううむ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ajaxを強制終了する
名セリフ集、というともっともらしいけど。感想文が苦手で、ダ・カーポや、お楽しみはこれからだ、のように、読んだ本の印象に残ったフレーズを抜書きするようにしている。抜けがあったり、サボってたりしつつも、データとして蓄積されてるのが400弱。当然ながら、アマゾンに問い合わせにいって、書影など書誌情報詳細を引っ張ってくるスクリプトにしてある。
んだけど。アマゾンへの問い合わせが帰ってくるのを待つ時間が冊数分必要で、検索などで多数の本をリクエストすることになると、フリーズしたんか、ハングしたんか、というぐらい待つことになる。
なので、
著者名で検索の場合、とりあえず登録されているタイトルだけ別のコンテナに表示して、そのタイトルをクリックしたら、その一冊だけの分を表示するようにしよう。
と考えた。
1.著者名検索で、まずajaxでアマゾンに問い合わせにいく。
2.時間がかかるので、別コンテナに、ajaxでウチのDBに問い合わせてタイトルだけ表示する。
3.1がまだ終わってなくて、2で表示されたタイトルで気になったのをクリック。
新たに ajaxでアマゾンに問い合わせに行く。
4.一冊だけなので、すぐにアマゾンからの返答があって、メインエリアに表示される。
5.しばらく眺めてると、1でアマゾンに行ってたのが帰ってきて、メインエリアが書き換わる
6.びっくりする。
びっくりするのは困るので、3で別コンテナのタイトルをクリックしたら、まだ終わってない1の問い合わせを強制終了させたい。
という要件。
グーグルで検索して解決。ありがとうございます。
var req
req = $.ajax()
としておいて、ajaxで問い合わせるときに、
req.abort();
で、今、走ってるajaxの強制終了となる。
強制終了させて、新たに ajaxを走らせたら、その結果は success ではなくて、error で受け取る。これで、とりあえず問題解決。
そんなこんなの小説名セリフ集のページは こちら
ちなみに、こんなフレーズを抜粋。ときどき眺めてはニンマリしております。
歩き去っていく男に、ぼくは呼びかけた。
「あなたは神を信じていますか?」
男は立ち止まって、しばらくじっとぼくを見つめた。その質問になにか裏がないか、疑っているかのように--ぼくがこの教区民に雇われて、男の信仰の深さを調べてでもいるかのように。もしかすると男はただ、深夜に町の広場にすわって、赤の他人に信仰の確証を乞うほど絶望的になっている人間を、如才なくあしらおうとしていただけかもしれない。
男はかぶりをふった。
「子どものころは信じてた。だが、いまは違う。神ってのは、なかなかいい思いつきだが……まるで意味をなさん」
男はまだぼくの動機をはかりかねるように、疑い深げな目でこちらを見ていた。ぼくはきいた。
「では、生きることがつらすぎはしませんか?」
男は笑って、「四六時中ってわけじゃないさ」
[06/01 10:37:49]
そういや。きちんと考えずに作っていったもんだから、気がついたらajaxだけのページ遷移のないページになってしまった。
SEOを考えるとまずいので、ECサイトなんかだとこんな作りは却下。
集客に関しては、googleさま yahooさまから一見さんを拾い集めるのがセオリー。この名セリフ集は検索エンジンから見ると1ページだけの存在で、ユーザーにとって価値は低い、と判断される。外部リンクもないし。
ajaxについては、流れを追うのがけっこう面倒で、デバッグしにくい、という面と、ページをいちいち作る必要がなくてラクチン、という面が、作る側にはあって、無問題に大歓迎とは言い切れない。でも、使う側から見ると。スマホな感覚というか、そのページの中だけで済むので、ページ全体が書き換わるのを待つ必要がなく、コンテンツを読み込む間にほかのコンテンツを眺めてればいい。錯覚かもしれないけど、待たされないってことで、疲れない・ストレスが少ないページになるような気がする。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
個人情報をちょっと防衛
クラウドだWEBサービスだ、これが便利、意識の高い人間ならこれだ!みたいなこと言っちゃってる記事もあるけど、わたしはグーグルだろうがアマゾンだろうが、ネット企業は信用しない。ていうか、ネットの生い立ちからすると、ネット上にプライベートな場所などありえない。
なので、漏れると困るような情報は、ローカルPCか手帳。WEBにあげるなんてとんでもない、と思ってる。
とはいえ。WEBで営業するとか、自分宣伝するとか、通販するとか。そういった場合に、続きはWEBで、というわけにはいかない。メールアドレス、住所、電話番号などをWEBサイトに掲載する必要が出てくる。具体的に言うと、特定商取引にもとづく表示は、連絡先、電話番号の表示が決められている(ネット上で販売してたり、サービス提供して金銭のやりとりが生じるのに、特定商取引の表示がないようなサイトは、法律違反)
提供しているものを求める顧客に情報を開示するのは当然だし、むしろそれが目的だからいい。問題が、ロボットや名簿収集業者による地引網的な情報収集。
このブログのプロフィールや、 創作文芸見本誌会場HappyReading の特定商取引にもとづく表示といった個人情報は、現時点で、簡単にコピペできない、ロボットによる自動収集ができないように小細工してある。
個人情報防衛策Tipsってやつだ。
その0.
ページに表示するのは ajax 経由。
その1.
javascriptがONになっていていないと表示しない。
その2.
jQueryを利用して、コピーできなくする。
その3.
ajaxで呼び出されるスクリプト側でリファラやbotなどのチェック。など、ロジックをいれて、ページ表示をコントロール。
これだけで、少なくとも現時点では、クローラによる収集を回避。ひとを使った収集も、コピペができないので面倒になっている。
やり方次第で、無防備無自覚に、個人情報をばら撒くことは避けられるので、プロバイダなどに問い合わせてもいいかも。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
コミティア100サークルスペース配置図
昨日、我が家に案内が届いたので、サークルスペース配置図を作成。文芸島であろうと思われる「は」~「び」まで。
もうHTMLをベタで書いただけ。タイプ量が多くてゲンナリだけど、ロジックを考えるのが面倒で。
作ってみると、レイアウトさえ考えれば、HTMLだけでイケるんで、javascriptと組み合わせてマップにいろいろ仕掛けができそうなんだけど。ほんとはちゃんとロジックを考えて汎用的に使えるようなシロモノを作っておいたほうがいいんだろうな。
とりあえず。今回はクリックで登録のある最新刊を表示するようにしてみた。
javascript で event.target なんてはじめて知った。今さら。
これまで、javascriptでマウスがクリックされた位置にあるDOM要素、divとかlistとか、また、id属性とかrelとかtitleとか、どうやって取得すりゃええんだ、と考えては放置してたんで、今回こそいろいろググってみた。
html側で定番のonclickしたら
event.target.id で、クリックしたところの要素のidが
event.target.rel で、relが
取得できるのか。これはこれで便利。使いみちがありそう。
ということで、コミティア100に文芸で参加のみなさん、「創作文芸見本誌会場 HappyReading」に登録して、読者さんに事前告知しませんか?
https://books.doncha.net/happy-reading/taglist.pl?t=event2
ちなみに、アマゾンで同人誌を売るなら、たぶん、現状は密林社さんにお願いするのが手間を考えるとベストかな。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」