いまさらLightbox
写真を自分用に整理するため、ということで作ったスクリプトがまずありきで、見せびらかしページはおまけ。てな感じだったので、トイカメラページは、サムネイルで一覧表示、サムネイルについてるリンクはほうり込んだままの原寸画像を別窓で表示、という紀元前ホームページ。それで、わたしとしては全然ＯＫなんだけど、勘違いしつつ、まがりなりにも「ウェブで何かやってます」なので、さすがに見栄えがよろしくない。自分で眺める時にも取り込んだ原寸だと大きすぎてスクロールが邪魔くさい感じもする。試しにImageMagickで減色なし・jpgクオリティ80で、幅640の画像を生成。元画像と比べてあまり違いもないので、スクリプトに組み込んだ。サムネイルと表示用画像を自動生成、元画像はリネームして保存のためにコピー。当然自動生成に時間がかかるようになったけど、もともと時間のかかるところなので気にしない。
てことで表示用なんだからちょっと見栄えを作ろうと、今さらlightbox.jsを入れた、と相変わらず無駄な前フリが長いのは勘弁してくれ。
この雑記帖と、お言葉データベース、リンクページと、お気楽カメラはひとつのモジュールに詰め込んでいて、htmlのヘッダは共通。トイカメラのページのためにあれこれ依存関係があったり、コンフリクト起こしそうなJavascriptのライブラリは避けたい。というより、そもそもjavascriptはわたしの理解の範囲外なので、これ以上自分で作っているページに自分が把握できないものを入れたくない。
検索するといろんな、クールだかホットだか知らんが、画像表示のためのライブラリが出てくる。けど、どれも上記理由で却下。いっそAjax使って自作しようかと思ったけど、それもなんか時間の無駄くさい。
んなこんな、探したらLightbox2の前のバージョンLightboxがまだ公開されていたのでありがたく使わせてもらうことにした。これなら、軽いしソースも短くて読めるので自分でも多少いじれるし依存関係で巨大なライブラリを要求することもないし既存のものとコンフリクトもないし、それでいてそれなりに「イマどきのページ」っぽい。
という無駄に長い文章をまとめると。
あれこれ考えてLightbox.jsを使うことにした。
…年寄りは話が長くなるのだ。
うーむ。台風が迫りつつあるのか。
[09/19 20:21:19]
この時間はまだ台風っぽくないな。
明日は朝っぱらから内科の予約が入ってるし、夜のうちに通過してもらいたいもんだ。台風一過の青空も期待したいところだしねえ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
入力formをAjaxにすると
状態が変わった場合に、同じページのほかのコンテナの表示も変えないといけないケースがけっこうあるぞ。ページごと移るなら話は単純だけど。
ううむ。気づいてなかった。入力した、もしくは削除したのに、ページ内の表示が変わらないのはマズイ、ていうか、そんな腐ったページはありえない。
なにかアクションを起こしたら、必ずそれがわかる、てのが世の中の大原則、いわば等価交換だ（by フルメタルアルケミスト）
Ajaxを使った入力formでデータの状態を変えたら、データを表示しているコンテナに反映させるためのRequestも必要ってこと。んでなんでAjaxかというと非同期だから。…これで、たぶん、まぬけにハマる。
new Ajax.Requestあれこれ
この時点で、デフォルトだと、返事が帰ってくる前に別の処理を始められるのがAjaxというやつ。これがチョー便利なんだけど（初老のおっさんが「チョー」はない）、だけど、今回の入力formとその反映を考えると返事を待たなきゃいけないぢゃん。
Ajax.Requestを複数仕込む時に。
new Ajax.Request あれこれ
new Ajax.Request あれこれして変更されたデータを取得
最初のpostするRequestはデフォルトを同期に変更して、次のgetするRequestは非同期。てことでイケる…ような気がしてきたぞ。週末にでもちょっと試してみるか。だめならperlの側でsleepをいれてごまかす、というのもありだな。
にしても、案の定、というか無知なままのJavascriptなんかを使うんでハマりまくりだ。でも、Ajaxは流行だし、わたしは流行に弱いミーハーだし（あれ？もしかして、ミーハーも死語かな）
まだ先は長かった、か。とほほ。
夕方のスコールが続いたかと思ったら、いきなり涼しい都心だ。
[08/22 23:23:39]
なんか今日もこき使われてへとへとの図。牛馬だぜ、やれやれ。こんなじゃ青空所属も近いな。と、ぶちぶち言ってもしょうがない。
で、検索してみたらやっぱり、Ajax.Requestで「非同期」じゃなくて、同期通信の要望・ノウハウがちらほら。そりゃそうだよなあ。更新系がすんでから、それを閲覧、というのが普通だ。その一方で、
サーバー側がコケるとクライアントが固まるから、同期通信は「推奨」されない、てのももっともな話。
うううむ。非同期でやると、サーバー側perlにsleepさせるしかないけど、sleep時間が短かいと確実じゃないし、長すぎると連打されて簡単に負荷がかけられる。クライアントを固めるようなことになっても、更新系がからむところは同期でいくほうがいいよなぁ。どっちにしてもあちこち見直しが必要だわ。ふうう。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
Form.serializeで複数の送信ボタン
javascriptなんてわからないし、わからないから好かんのだけど、どうしても使わないと読書SNSのリニューアルが一からやり直しになってしまう。
なので、しかたなくあれこれごそごそと。
Ajaxでフォーム送信、このとき、フォームの中に複数の送信ボタンがあることはままよくある話だ。だけど、prototype.jsのForm.serializeだと押してもいないボタンのnameとvalueをパラメータに追加してくれる。
てことは。action=postもaction=deleteもパラメータに入るのだ。入力と削除なんて物騒なのがパラメータに同居して混じるのは困る。ぐーぐるさまに詣でる。https://d.hatena.ne.jp/susie-t/20060911/1157959024 の記事で助かった。
buttonタグで、nameを空にしておいてvalueの方にだけ入力とか削除とかいれておく。こうするとForm.serializeでパラメータにはこのボタンは入ってこない。受け側のjavascriptの関数にthisでクリックしたボタンのオブジェクトを引き渡し、パラメータに &action=obj.value(入力とか削除とか) を追加。actionなんて決め打ちするのはちょっとアレな匂いがするし、動作を決めるところをjavascriptなんかで作るのは危険なにおいもする。
とはいえ、こんなところでひっかかってるヒマもないんで、とりあえず採用。危険なところは受け側でガードを固める。
javascriptは便利なのは確かなんだけどねぇ。
どうにか、本のメモに関してはこれでやっとメドがついた、かなぁ。（まだデータベース側での設定を決めなきゃいけないけど）これ以外の書き込み更新系はAjaxを使わないフツーのページ。デバッグもやりやすいんでストレスも少ない、かな。
まともな本を読めていないってのに、「検索連動型広告を成功に導くSEM戦略」とか「ロングテールキーワードをねらえ！Googleアドワーズ＆アナリティクス活用テクニック」とかロクでもない本を買ってしまう。つくづく、実体のない虚業だよなぁ、とうんざり、ていうかやるぞという気にまるでならない。「おもしろい」匂いがしないんだよなぁ。なんか無理やり商売にしようとしてないか。
生活するって大変だわ。
[17:44:49]
ちなみに、雑記帖リニューアル後、タイトルがわりと具体的なものになっているのは。SEO対策の実験ていうか。一応ブログのように、個々のタイトルをh3タグにしてみたんで、無意味なものが並ぶのもナニだなぁ、と。思いつくようだったら、タイトルは具体的なものにしてみよう、ということで。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
Ajaxはわかりにくいんだ
今日はヨメが出かけたんで、いちんちぼーっと部屋でごろごろ。身体がだるくてぼわぁっと力もはいらず。鋼の錬金術師とか大きく振りかぶってとかアカギをダラダラかけて眺めて過ごすジダラクなテイタラク。夕方からタンカレーをいただきながらイネムリこく。
うーむ。アカギかっちょよすぎだろ。
で、いくらなんでもそれじゃ時間がもったいないんで、ちらっとだけ中断している読書SNSのソースを。やっぱりAjaxのフォームがうまくいかんなぁ。ここが片付かないとリニューアルは難しい。Ajaxを使わないでやるなら、今度はページの設計を見直しとなるんで、それはまたリニューアルやり直しとなってしまう。
Ajaxは欲しいところだけを持ってくるんで動作も軽いし直感的なのでいいんだけど、チェックが面倒なのだ。javascriptでalertを入れて、サーバー側perlでprint文入れて、2重にチェック。そうやったところで、Ajaxで表示したコンテナは「ソース表示」じゃ出てこないので、ナニが起こってるのかわかりにくい。デバッグの効率が非常によろしくない。
こりゃちょっとリニューアル予定はさらに延期、ということになりそうだ。…ほんとは、今月にはリニューアルしたかったんだけど。
にしても、スコールのような雨の都内だ。日本はいつのまに亜熱帯になったんだろう。
[08/18 09:50:11]
→
この雑記帖「RELOAD」とか「ひまつぶし雑記帖」をクリックして出てくる右側の小ネタ類（ケータイメモとかリンクとかお言葉データベースとか）がAjaxを使ったコンテナ。この部分だけを読み込むので全体の動作は確かに軽い…んだけど、やっぱ面倒。
今日はまた蒸し蒸しと残暑厳しいなぁ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
めも：ajaxの戻る
またハマってるのがajax…ブラウザの戻る。
ブラウザの「戻る」自体はわたし自身もよく使うし、いわゆるユーザビリティを考えても、ブラウザ標準の機能をサービスの都合でどーこーするのは、発想する時点で負け確定。
とはいえ、確認画面なんかで、おっといけない書き直し、となった場合、用意されてる「戻る」ボタンじゃなくて、ブラウザの「戻る」を押すことが多くて（わたしはSleipnirでマウスジェスチャで戻る）それはそれで問題。
ブラウザで戻られると、ajaxで出してるフローティングコンテナのフォームがぶっ飛んでしまう。
せめて一度だけこのときだけでもブラウザの「戻る」は「なにもしない」で欲しい、と。
あれこれ検索してみて、とりあえず一度きり、ブラウザの戻るを「なにもしない」にしてみる。
if(document.all){
var ifr = document.createElement('IFRAME');
ifr.style.cssText="display:none";
document.body.appendChild(ifr);
var iframe = frames[frames.length -1].document;
iframe.open();
iframe.close();
iframe.location.hash="#books";
}
else{
window.location.hash="#books";
}
location.hashにテキトーな値を入れると、URLの履歴にページ内ジャンプのURLが追加される＝ページ遷移が起こらない。これを利用してブラウザの戻るを意図どおり一度だけ「なにもしない」にできる。
ajaxが絡むページ移動やブックマークではこいつをさらにガリガリ使って、いわゆるフツーのページ遷移・ブックマークを実現する…らしいけど、わたしはそこまで考えてないし、そんなスキルもない。
で、どうもIEだけが別扱いらしく、widndow.location.hashに値を入れても反応してくれない。
document.allでくくった中のように、ダミーでiframeを生成して、そのiframeをopen→closeして、そのiframe のlocation.hashに値を代入、なんて二度手間三度手間してようやく。
うーん、でもこれでいいのか、本当に意図どおりなのか、てのはいろんなパターンを検証しないとわからんちんだなぁ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ブラウザの戻るがよろしくない
てことでUIのためのAjaxなのに戻る先が「てれこ」にしかできないんじゃ論外。スキルがないんでしょうがない。無駄無意味なAjaxは外そう。
そうすると、今度は全画面書き換えで、メニュー部なんてほとんど同じ表示なのにそのためにいちいちDBに問い合わせが生じてレスポンスが遅くなる。最新の本を５冊表示とかランキング表示とか。テーブル構造とSQLが素人芸、しょせんヘボなんで、登録が６万冊越えていて処理が重いのだ。
order by modifytime desc offset 0 limit 5
なだけなのになあ…。
キャッシュを作るか、メニュー部だけのためにコンパクトなテーブルを作るか。
書き込みがリアルタイムに反映される、てのが前提だろうからキャッシュはやりかたをあれこれ考えないといけない。
とりあえず、最新本はwhere句でちょっと絞り込み条件をつけたら早くなったのでこのまま。著者人気順とタイトルの人気順はさすがに重いんで、こればかりはリアルタイムに反映というのは無謀、だよなあ。てことでコンパクトなテーブルを作ってそこにつっこむことにした。
新着と違ってそんなに変動するものでもないし。今のところの動きをみてると週に一度集計すればいいぐらい。集計用のスクリプトをcrontabに登録して動作確認。当たり前だけど軽くなった。ページ表示に2〜3秒かかってたのが１秒におさまった。ただ、それでもHDDへのアクセスが気になるようだとキャッシュを使うしかなさそう。ちょっと様子見。
ちなみに作家１位は恩田陸、タイトル１位は「図書館戦争」。
ポンコツの身にはハードな状況が続くのであった。とほほ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
