はじめてのjQueryで小ネタ、流れる本屋
twitterで、回転寿司のように本が流れるのも面白いかも、とか言ってみたら面白がってくれるひとがいたので、ちょっとソレっぽいのが作れるかな、と。
amazonからランダムに本をピックアップして、表紙・タイトル・著者を右から左に移動させて消える、それだけ。
たぶん、探せばこんなブログパーツはどこかに転がってるだろうけど、いまウチで自作してあるモジュールを使い回せばそんなに手間もかからないので、作ってみた。
一期一会本屋
ただの一発芸なので、それなりのエフェクトでごまかす必要がある。てことで今回初めてjQueryを使ってみた。
prototypeと比べていいのかどうかわからないけど、jQueryの方が扱いが簡単。プログラムチックじゃない、というか。cssの指定と同じような感覚でjavascriptが組み込める。
エフェクトもそろっていて、javascriptがflashに置き換わるんじゃないか、これ。
で、まだフェードインとか移動の速度とか調整した方がいいけど、ぼーっと本が流れるを見てるのも、2分ぐらいは飽きない、かな。
…とはいえ、一発芸で2分もてば十分面白いぞ、と例によって自画自賛芸だ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
横のものを縦にする
小説なんかはやっぱり縦書きじゃなきゃいけないのだ。
てことで、テキストファイルを縦書きで表示するスクリプトをでっちあげてみた。…って、この手のスクリプト、編集時代にいくつか使い捨てで食い散らかすように作ってあって、探してみたら、中には字数行数のフォーマットに合わせて文章を流し込むように仕込んであるやつまであった。
しかし、残念ながら、5分前の自分はもう他人、5年も前の自分などまったく記憶になく、スクリプトを見てもよくわからんので、無駄だと思いつつ１から作ってみた。
ttp://www.holeinthewall.jp/~butch/zakki/tate.pl
点丸の句読点は代替のものに置換したけど、三点リーダーやかっこ類は代替が見当たらず、cssで回転させて基点を少し調整した、のでFireFox、Safari（Chrome）限定で、IEはダメ。
とりあえずの初校版、だ。もう少しちゃんと使える・見られるシロモノにして公開します。きっと。
青空文庫のテキストも縦書きでディスプレイで読めるな。
[12/02 23:44:20]
ふぁっきんIEはfilterを使えば文字の回転ができるのか。てことで、IEでも記号は回転させてみた。
JSONでデータを渡して、javascriptでページ送りすれば、それっぽくなるなあ、と追加してみた。
ページ送りの見た目に、display:table とか display:table-cell なんて呪文があったのか。てことでふたたび、IE7以前は却下となる。
で、さらに、縦書き文庫というかなりイケてるサイトを発見。
https://tategakibunko.mydns.jp/
ルビにまで対応していて気合の入り方がハンパじゃないし、いまどき。てことで、わざわざ凝ったものを作る必要を感じられなくなった。ちゃちゃっとそれっぽくそれなりに縦書きになって、自分のサイトにちょろっと貼り付けられる、というポジションでOKだな。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
IE8で表示がバグってた
読書SNSの本棚のタブメニューがIE８で表示バグ。いや、気づいてたんだけど、IEなんてもうイラね、と放置。
タブメニューが４つほどあって、その各々でやることが違う＝コンテンツ量が違うので、コンテンツ部分のdiv要素の高さが違う。
これをjavascriptで display:block noneを切り替えるわけだが。
FireFox、Safari、IE7は意図どおり、コンテンツ部分の高さに合わせて、親要素の高さを広げてくれるんだけど、IE8はコンテンツ部分の高さを広げてくれない。ケイ囲み（親要素）からべろ～んとコンテンツがはみ出してみっともないったらありゃしない。floatした子要素の高さを親要素に伝えるためのハックをスタイルシートには適用してあるんだけど、なんでやねん、と。ごそごそスタイルシートをいじったりHTMLに直接styleを埋め込んでみても、ちっともいうことを聞きやがらず、すっかり放置だった。
朝から団地の掃除、イトーヨカドーの特売、と地域密着活動の合間を縫って、見直してみた。結果。
javascriptで切り替えるときに、親要素もいじれば意図どおりになった。
id.style.display='none'
id..parentNode.style.display='none'
id..parentNode.style.display='block'
id.style.display='block'
IE8はけっこうまともという話なので、本来こうすべきところ、なのかな。
ちなみに、
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
こんなのヘッダに入れると強制的にIE7互換表示モードにしてくれるんだけど、このIE７互換がいい加減っぽくて、本当のIE7と表示が違ってたりするんで困ったちゃんでした。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
最近はFireFox3
いきなり都内は10度だと。もう11月も終わりだしこんなもんか。
google chromeがOEM供給されるようになる、らしい。パソコン買ったら最初から使える。どこのメーカーか詳細はまだわからないけど。
ヨーロッパあたりじゃFireFoxがシェアをのばしてるという話だし、IEはシェアを失っていく。
んな勢力図はどうでもよくて、今日も今日とていちんち中データの修正修繕作業に追われる、落ち目のIT雑務屋としては、cssやjavascriptの解釈が今以上にばらばらにならないことをひたすら祈るだけ、だ。
んで、ここんとこ、ウチに帰ったら帰ったらで、perlにcssにjavascriptにsqlにどっぷり。自分がよくわかってないので、できるだけjavascriptは使わないでおこうと思いつつ。メニュー系なんかは使い勝手を考えると避けて通れないんだよなあ。このタブがアクティブになってる時の画面はこっちがいいに決まってる、とか、画面がこれなのになんでタブはこっちなんだ、とか。
cookiemanager.jsが便利すぎるのだ。
cgiだとページを生成する時に、htmlヘッダの前にcookieを設定するのが通例。原則ページに一回設定、となる。
なのにjavascriptのcookiemanagerはいつでもどこでもおかまいなくcookieを使える。メニューの表示や画面の状態を保存して取得して、なんてのがお手軽にできるのだ。
var cookie = new Cookiemanager()
と使う準備を一行いれたら。
cookie.setCookie(key,val)
cookie.getCookie(key)
cookie.clearCookie(key)
とこれだけ。
cookieという名の便利なデータ保存場所を確保してるようなもんだ。DBやもろもろ絡むログイン系には使わないけど、使い勝手の部分をいじるにはホント便利すぎる。
ちょっとハマったのが。スクリプトの設定したcookieをcookiemanagerから触るには cookie の path を合わせる必要があった。上書きできずに、同じ名前のcookieが作られたんで驚いた。どっちに合わせるかは要検討。
cookiemanagerもあるし、書き込みにはAjaxを使わないことにしたので、多少ラクに進めてるけど、表示だけでも、Ajaxが絡むと不具合の原因の特定がとたんに難しくなる。ページのソースを表示させてもAjaxで出すhtmlは見えないんだよねえ。…と、なかば諦めてたら、なんとFireFoxのwebdeveloppertoolsではhtmlの要素が見える。エラーコンソールでjavascriptのエラーも一発だし、オプションメニューのクッキーも扱いやすい。てことで、ここんとこFireFoxがメインとなりつつあるなあ。
ということで、話がとっちらかって、とりとめもない、ただなにかが漏れてるだけの文章だが、ようやくマクラとオチが繋がってほっとひと息の帰宅途中。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
せっかくの週末なのに
曇天雨混じりの寒空、だ。おまけに、週末まで、ブラウザ間の解釈に違いにムカつく。
Ajaxで取ったデータをコンテナに流し込んで、そいつをポップアップ風に表示する、てのはありがちなこと。で、「ポップアップ風」てのはページ上の最前面に表示するのが当然なので、z-indexというのを使う。
こいつの解釈が、FireFoxやSafariと、IEで違ってるので悶絶。ありえねえ。
firefox safari
z-indexが最優先。z-indexの大きいものが必ずページ上最前面に表示される。
z-indexの指定がなければ、HTMLの順番（後ろのものが上に）
ie
HTMLの順番がz-indexよりも優先される、っぽい。z-indexの指定に関わらず、HTMLの後ろに別のコンテナが書かれていたら、それが上となってz-indexで表に出したいコンテナは下に潜りこんでしまう。
ieでz-indexの指定を、別のコンテナに適用するには、z-indexを指定したコンテナの親コンテナにもz-indexを指定して前面に出すか、後ろのコンテナにz-indexを指定して背面にまわすか。
if(document.all){
$(c).parentNode.style.zIndex=999;
}
って、なんでieだけのために、と思いつつ入れてみた。とりあえず、直後のコンテナに対しては意図どおり…だけど、さらにコンテナをまたがってポップアップすると、さらに後ろのコンテナにz-indexの指定が勝てなくて、下に潜り込んでしまった。
もうなんかね。ieにイラついたので、ieの時だけ。
HTMLのフッター部分に（最後に）ポップアップ用の空コンテナを用意、
body左上(0,0)から表示位置にある該当div要素の座標を取得して、
絶対位置指定で表示
function get_offset(ele) {
var ele = (typeof ele == 'string') ?
document.getElementById(ele) : ele;
var valuetop = 0, valueleft = 0;
do {
valuetop += ele.offsetTop || 0;
valueleft += ele.offsetLeft || 0;
ele = ele.offsetParent;
} while (ele);
return {left:valueleft, top:valuetop};
}
body左上から、divなどblock要素の座標を取得するスクリプトを、検索しまくり。ありがたくいただいた。
ううううむ。しかし、こんなしょーもないことに半日も取られてしまって…ふぁっきんIEが。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
Ajaxは書き込みに使わない
読書SNSのリニューアルを一から設計しなおす。あれこれ寝かせてみたんだけど、やっぱりAjaxを書き込み系に使うのは不安。確認画面や「戻る」を考えると素直にページ遷移したほうが安全だ。※
なにかと便利なAjaxだけど、閲覧系と気楽なあしあと系だけに限定しよう。となると、ページのレイアウトもリニューアル用にデザインしたものより、従来のページレイアウトを使う方が違和感なくていい。うううむ。まさかこんなところでひっかかるとは…ていうか、Ajaxの特性をちゃんと把握してから採用しような、おれ。
なもんで、一からやり直し。だけど、データ取得部分はリニューアル用のものをそのまま使えるので、まるっきり一からってわけじゃない、のがちょっと救いか。
先日、なにも写ってなかったフィルム。どうやらまっサラのフィルムを現像に出したっぽい。酔っ払っててよく覚えてなかったけど、ポケットにベロのないフィルムがあって、たしか一本予備に持っていたフィルムがなくなっていた。…てことはもしかして、と思って今日フィルムを出したら案の定。撮ってたのはこっちだった。頼みます。ベロの出てるフィルムを客が出したら、それもあきらかに酔っ払ってる客が出したら、「これまだ撮ってないんじゃないですか」とひとこと声かけてください。金町カメラのおにいさん。
銀座と浅草で試しつつ撮ってみた。
絞りをほぼ5.6に固定してシャッター速度で調整というパターン。思ったよりもアンダーになってんなぁ、と。絞りをもっと開けてボケ味の出る、いかにも一眼レフで撮りました、という写真も欲しいんだけど、露出がいい加減だから絞りを開けるのはヤバイな。もちっと修行せんと。 COSINA CT1 SUPER
今回はほとんど無限遠。トイカメラでも同じじゃん。いや、ネピア3段重ねが、いくらなんでもネタすぎんだろ、と思ったんで。
※てのは、わたしのスキルでは、ということで、まともなプログラマがきちんと仕様決めされたとおりに作ればAjaxだろうと問題にならないです。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
