Mar, 2013 - 冬言響

イヤホン

ケーブルが u 字型になっているものを探してるのだけどなかなか良いものが見つからないので標準の Y 字型イヤホンの左だけを短くしてみた。

三つ編み。「イヤホンケーブル三つ編み」とかで検索すれば色々解説してるサイトが見つかると思うのでまあ探せ。

コードの三つ編み伝授: blog版・なんかつくろ

俺が参考にしたのはここ。2 つ折りにしてケーブルが 3 本並んだ状態にして髪の毛とか編むときと同じ要領で普通に編んでいく。普通に編んでいくと髪の毛を編む場合と違くて末端側も絡んでいくので適当に解きながら。最後は輪っこを作って先端を通す。適度な太さを持った紐使って何度か練習すると良いと思う。

その結果。まあ左だけ短くすれば良いってもんでもないね。右の長さも足りない。あとそれ以外にも iPod shuffle 標準のイヤホンは全体の長さがこう、胸ポケットとかに入れるには長いし腰ポケットに入れるには短い。長いぶんには上記の要領で編んでやれば良いかも知らんがそれ以外にも自重が無いので胸ポケットで収まりが良くないのは変わらない。クリップ付いてるけどポケットの縁とかに挟むのは外から見えるのが嫌。Y 字型であることと長さ以外は良いカンジなんだけどね標準イヤホン。プラグの根本が円柱型で iPod shuffle 本体の縁のラインと揃うところとか。

やっぱ社外製を探そう。u 字型で適当な長さがあるもの。そんで腰ポケットに入れちゃう。

或いはネックストラップ型はどうかなあ、とも考えている。iPod shuffle 本体にはストラップ通す穴とか無いのだけどクリップに引っ掛けるか(ちょっと不安)ストラップ穴付きケース(そういうのがあるのかは知らん)を使う。どうかなあ。

先日の英語ブログなんですがね

スクリプトをゼロから書いてるのだけど、その過程で諸々の設定をデータベース上に置いてそれ読み込んでカスタマイズもブラウザ上で出来るようにしたりとか、ユーザーを複数登録してドメインとかで区別してそれぞれ別のブログとして生成するようにしたりとか、まあレンタルブログとして使えるようなものを試しに作ってみようって気になってきて(実際にやるつもりは無いけど)、でもブログをもうひとつ作ってもしょうがないしなー、などと思っていたらなんかブログの形式に囚われない使い方も出来なくもなくなってきてしまったので、こんなことを始めてみた。

諸君、私はアメコミが好きだ

例によってタイトルはあとで変えるかも。あくまでブログスクリプトの実験が主、ってスタンスでゆるゆるとやっていく予定ですので突発的に閉じちゃう可能性も踏まえて宜しくお願いします。とかなんとか。

追記。Google でブログ検索したときにヒットして面倒くさいと思うタイプのサイトであることに今気づいた。どうしよう。

G-SHOCK 買っちゃった(GW-8900-1JF)

2 年近く前に買ったやつはヨーロッパで紛失してしまい(帰るとき空港で預入荷物に入れた記憶はあるのでどっかで抜き取られたんじゃないかと考えてるのだけど証拠とかは無い。そもそも何で持ってったんだって話だけど)、とりあえず目に付いた中古を買ってみたりはしたけどやっぱちゃんとしたゴツくて黒くてカッチョイイ G-SHOCK を 1 本ぐらいは持っておきたくて色々中古を中心に探してて本日割とよさげなものを発見したので購入。

GW-8900-1JF。中古本体のみで 12,800 円がさらになんか 10% 引きだったので 11,520 円。定価 23,000 円！とか値札には書いてあったけど Amazon.jp とかでの実売価格は 15,000 円ぐらい。

20 気圧防水でタフソーラーで電波ですよ奥さん。奥さん！前のやつより高機能。それが前より安い値段で。まあ正直電波って機械式腕時計のトゥールビヨン並とまでは言わんけど無いなら無いでそれだけの機能な気もするけど。ソーラーは便利。オート LED とか電池式だと使ってらんないよね。

[Amazon] [カシオ]CASIO 腕時計 G-SHOCK ジーショックタフソーラー電波時計 MULTIBAND 6 GW-8900-1JF メンズ

スノーボード

をしに行って来ました。友人たちと。ちなみに未経験。遥か古の時代、高校生のフリをしてた頃に修学旅行で一度スキーをやったことがあるだけ。修学旅行は小学校が奈良・京都、中学が東京、高校がスキーだったんだけど高校のときこそ奈良・京都行って自由行動したかったよなー。小学生が奈良・京都連れ回されたって鹿しか憶えとらんよ。

で。

スノーボード。一応本を読んだり経験者の友人に教えて貰ったりしつつ、どうにかざりざりと滑れるようにはなった。のだけど。バックサイドでの横滑りとか木の葉落としとかがどうにか出来るようになって、それで適当に直滑降しつつ速度が出過ぎたら減速して木の葉落としで進路調整してまた直滑降、でそれなりに楽しめるようになったのな。んでフロントサイドでの横滑りや木の葉落としがおざなりになってしまい、その結果右カーブが出来ないので上から下まで途中で停まらずに S 字を描きながら滑っていくということが出来ず、それに気づいた頃にはもう体力とか脚の筋肉とかが限界になってしまって改めてそれらの練習とかしんどくなってしまった。もう右行きたかったら右半身を前にして直滑降してって減速したかったらその状態からバックサイドで前向きゃ良いじゃん！(逆ギレ)みたいな。

あと道具。一応グローブとゴーグルだけは購入して、ウェアとボードとブーツとバインディングはレンタル。グローブもゴーグルもレンタルはあったのだけどグローブはまあ単車用の冬グローブがそろそろ限界でそれ用にも使えそうだったし、ゴーグルはレンタルのものが眼鏡の上から掛けられるか判らなかった(実際駄目だった)ので一応購入。ゴーグル以外は特に問題は無いのだけど、ゴーグルがまあ曇る。眼鏡も曇る。なんだかんだでそれほど眩しくないときはゴーグル外して眼鏡だけで滑ってた。途中で吹っ飛んだりしないかどうか多少は心配だったけどそこら辺特に問題無く。だったらもう以前作ったスポーツグラスで良かったなあと。要らん買い物してしまった。

また機会があったら(友人たちの間では来年からも毎年行こうぜって方向で話してる)この次はフロントサイドの練習とスポーツグラスを持って行くことを忘れないようにしよう。あとブーツとウェアぐらいは持ってても良いかも知れない。オフシーズンのうちに探せば安く手に入るはず。

apple-touch-icon.png とか apple-touch-icon-precomposed.png へのリクエスト

がちょくちょくありましてですな、もちろんそんなファイルは無いので 404 を返してはいるのだけど、まあファイル名から想像は付くけどそのうちちゃんと調べようと思いつつ放置してて最近ようやく調べた。

その結果。

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | Web担当者Forum

iPhone や iPad でそのサイトを端末のホームに登録したときに表示してくれるアイコン画像だそうな。規定のファイル名でルートに置いておくと自動で登録されるので、端末はとにかく apple-touch-icon.png を探しに来る、と。無い場合はそのサイトのキャプチャがアイコンになるそうな。

作るべきなんだろうか。検索するとだいたい「作ろう ZE！」ってことが書いてある。けど、俺自身が iPhone も iPad も使ってないのでなんとも言えんのだが、何もしなければキャプチャがアイコンになるのならむしろそれで統一された方が好き勝手なアイコンで表示されるより判りやすいように思える。少なくとも最大で 114x114 px をフルに使ってヒラギノ明朝か何かで「冬」って描いてあるだけのアイコンよかキャプチャのが億倍マシだよねそうだよね。

おし(自己完結)。

jQuery というのに手を出してみたよ

JavaScript のこととか良く判らないままに。本読んだら jQuery はプログラムが良く判らなくても HTML や CSS が判れば使えるって書いてあったからきっとバチは当たらないはず。

そんで何をやったかというととりあえずブロック引用に cite 属性値と title 属性値から引用元を示す cite 要素を生成して追加。Firefox というか Mozilla は昔は右クリックからアレして表示出来た(それも充分な手間だけど)と思ったのだけどなんか最近のは出来ないぽかったので。

最近ブロック引用を使った記事

コードはこんな。

// ブロック引用の引用元を表示。
$("blockquote").each(function(){
	// 引用元URI。
	var strUri = $(this).attr("cite");
	// 引用元タイトル。
	var strTitle = $(this).attr("title");

	// URIとタイトルが両方ある。
	if(strUri && strTitle) {
		var strCite = "<div><cite><a href=\"" + strUri + "\">" + strTitle + "</a></cite></div>";
		}
	// タイトルのみ。
	else if(strTitle) {
		var strCite = "<div><cite>" + strTitle + "</cite></div>";
		}

	// 追加。
	if(strCite) {
		$(this).append(strCite);
		}
	});

とりあえず望みどおりの結果は得られるのだけどこれで jQuery 的にというか JavaScript 的に正しいのかどうかは知らない。

ちうかあんま jQuery でございって具合の処理でもないよな。もっとこうメニューをパタパタ閉じたり開いたり画像をうねうね動かしたりするようなことをやってみた方が良いか。あんま興味無いのだけど。

追記。blockquote の内容はブロック要素なので cite 直置きはマズかったな。てことで div 追加。なんかもー jQuery が云々以前の話だな。

アコーディオンメニュー

<dl id="archive">
<dt>2013年</dt>
	<dd>1月</dd>
	<dd>2月</dd>
	(略)
	<dd>11月</dd>
	<dd>12月</dd>
<dt>2012年</dt>
	<dd>1月</dd>
	<dd>2月</dd>
	(略)
	<dd>11月</dd>
	<dd>12月</dd>
</dl>

みたいな定義リストがあって、普段は dd を非表示にしといて年号をクリックするとその年の月を表示、他の年の月は非表示、にしたい。まあどこにでもよくあるごく普通のありふれたアコーディオンメニューですな。jQuery の解説してるサイトならたいがいサンプルがある。

のだけど、そーゆーサンプルってだいたい定義リストだったら dt と dd が一対一だったり、あるいは箇条書きリストで li の中に ul が入れ子になってたりして、とにかく見出しをクリックしたときに表示/非表示すべき要素が $("+dd", this) とか $(">ul", this) みたいなセレクタで指定出来る。

今回の場合は dd で dt と兄弟要素の関係にあり、一対一でもない。クリックされた dt より後、そして次の dt より前にある dd 要素のみを対象にし、それより前や後の dd は別に扱いたい。対象となる dd の個数は常に 12 個。

これちょっと CSS のセレクタだけじゃ無理なんじゃないか。適当にクラス名でも付ければ良いか知らんけど元の HTML はなるべくいじりたくない。幸い個数は 12 個で固定なので $("+dd, ++dd, (略), +dd+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd, +dd+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd+dd", this) ってやってみたら一応うまく行ったけどさすがにこれは無いだろ。コードを少しでも見やすくしようとカンマのあとに改行入れたらエラーになっちゃったし。

んでまあ色々調べてみた結果、間接セレクタに jQuery の基本フィルタの :lt も交えてみたらどうにかなった様子。

// 月(dd)を非表示。
$("dl#archive > dd").hide();
// 年(dt)をクリック。
$("dl#archive > dt").click(function() {
	// 他の月を(表示状態になっているかも知れないので改めて)非表示。
	$("dl#archive > dd").hide();
	// クリックした年(dt)の月(dd)のみを表示。
	$("~dd:lt(12)", this).show();
	$(this).nextUntil("dt").show();
	});

こんな具合で。なんか後で判んなくなりそうなのでメモ。しかし dd の個数が固定じゃなかったらもうお手上げになりそうだ。なんか別の手段でループ回してなんかするとか。dd を 1 個にしちゃってその中に箇条書きリスト入れてやるとかのがラクかな。

追記。$(this).nextUntil("dt").show(); で良いのか。よっしゃ無敵だ。

ウィスキー

コンビニになんかニッカシングルモルト余市というウィスキーが売ってたので買ってみた。小っちゃいボトルで 1,200 えんぐらい。隣にあった同じようなサイズのサントリーの角瓶？だかなんだかはの倍ぐらいのお値段。

ウィスキーにはシングルモルトとブレンデッドってのがあってなんとなくシングルモルトのが上等って印象があって実際コンビニとかに売ってるお安いのはだいたいブレンデッドで一度シングルモルトも飲んでみてどう違うか体感してみたかったのだけどそのためにわざわざ酒屋さんとか行くほどでもなかったのだけどあったので買った。改めて調べてみると単純にシングルモルトだから偉いってもんでもなさそうだけど。

んで 100 均のショットグラスでミネラルウォーターと 1：1 で割って飲んでみた結果。良い、気がしないでもないけどあんま違いは判らない。まあ色々ストレートにしてみたり水増やしてみたりコーラとかジンジャエールで割ってみたり色々試してみよう。そんながっぱんがっぱん飲めるもんでもないし。

ウィスキーとかそんな好きなわけでも詳しいわけでもないです。まあ洋酒全般を飲めるようにはなってみたいな、ぐらいの。友人たちと飲み会行くと一杯目：ビール、二杯目：チューハイを飲んだり飲まなかったり、三杯目：グラスワインとか、四杯目以降：ソフトドリンク、とそんな具合。んで終わったあとで「ワイン好きなの？」「好きというか飲めるようになりたいとは思ってる」という遣り取りを毎回誰かとするというね。最近ようやくワインうめーと思えるようになってきた。

別にヨーロッパ行ったときローマのスーパーでうろうろしてたら日本人女子二人組に「お土産にワイン買いたいんですけど良く判らないんでもしワインに詳しいようでしたらお勧めとか無いですか？」って声掛けられたけど全く力になれなかったことがトラウマになってるわけじゃないんだからね。

大河原遁『王様の仕立て屋?サルトリア・ナポレターナ?[3]』俺達の戦いはこれからだ！

紳士服の聖地と呼ばれるナポリに "極めし職人" と呼ばれる日本人がいた。
彼の名は織部悠。
伝説の名仕立て職人マリオ・サントリヨが唯一認めた弟子である。
自分の店をナポリに開店した悠だが、ナポリ仕立ては今、守旧派と革新派が真っ向から対立。
しかも職人流出の危機も迫ってきて…！？
ナポリ仕立ての未来を問う話題のシリーズ、完結！！

って、掲載誌の構成変更で一部改題・巻数リセットしたばっかなのにもう完結かーい、と。なんかまた掲載誌をグランドジャンプ PREMIUM からグランドジャンプ本誌へ移って 2nd series として今月から改めて新連載だそうで。

なんかまたマリオ親方縁の新キャラがぽこぽこ出てきたかなあ、って感じではあるのだけどこの巻では誰が出てこようとジョナタ・ジャイオッティが全てを持って行ってしまうというね。

やっちまったなあ。良いけど。

ラウラは出番なし。

追記。ジョナタ・ジャイオッティは別にジョイオッティでも良いじゃねぇかと思って検索してみたら、

王様の仕立て屋にジョジョ - わさっき

どうも雑誌掲載時はジョイオッティだったらしい。

単行本ではジャイオッティ。ジャイオッティ Giaiotti っていう人名はあってもジョイオッティは無さげなので修正したんだろうか。別に構わんと思うのだけど。もしくはジョリッティ Giolitti って名前はあるぽいのでそっちとか。

[Amazon] 王様の仕立て屋 3 ～サルトリア・ナポレターナ～ (ヤングジャンプコミックス) [コミック]

『クラウドアトラス』観り(劇場/字幕)

予告編だけ観て興味持ってそれ以外の基礎知識殆ど無しで観賞。

男女が悲劇的な結末を繰り返しながら時代を超えていって最終的に結ばれてハッピーエンド、みたいな話かと思ってたけどそうでもないのかな。生まれ変わってるのはあくまでそれぞれのエピソードの主人公一人？でもアレがアレでアレだったら…うん、良く判んない。

良く判んないけど 3 時間近くの長丁場をだれずに最後まで観られたしエピソード間の繋がりだとか多分いろいろ見逃してる点はあるだろうと思うしこれはもう一度劇場で観ても良いかもなあ。原作小説とか考察ブログとか読んでから。面白かったですはい。

[Amazon] クラウド・アトラス上 [単行本] クラウド・アトラス下 [単行本]

えいちてぃーえむえる 5 その後(1 年以上振り)

手元にあるのが英訳版のみなので改変前の台詞はうろ覚え。

というわけで、というわけでもないのだけど(どっち)、まあ色々試行錯誤してます。当初はとりあえず全部 section だったのだけど、Blog の個別記事は article というのはだいたい意見の一致を見ているのでそうしてみたり、んでその中の日付とかある部分は footer かな、とか、そんで個別記事表示時のコメントやトラックバックそれぞれは section でまとめてやれば良いのかな、とか、そうやって収まりの良い配置をしてやると article 内で footer よりもあとに section が出てきちゃってこれはどうなんだろう、とか、aside の中のひとつひとつのブロックはこれはたぶん section で良いだろう、とか、あ、トップページの過去記事へのリンクはこれは nav か？とか、コンテンツの内容を大雑把に説明するブロックが欲しいなそしてこれは article と同じ並びにあると収まりが良いなでもそれってどう考えても header の中に収めるべきだよな、とか色々。

もう全部 div で良いかー、とか言いたくなるね。たのしい。

まあちょっとイメージマップ使ってみたかったっていうそんだけの記事です。

AppleJack

ウチの Mac mini(Mid 2010)がですね、起動も非常に遅いし起動してからもことあるごとにレインボーカーソルがぐるぐるしだしてまともに使えない状況が長らく続いて、ディスクの修復してもアクセス権の修復してもクリーンインストールしてさえも解決しなくて(クリーンインストール直後はしばらくまともに使えるのだけど程なく現象が再発する)、あとそれとは別件で光学ドライブが認識されてないわけでもない様子なのにディスクの挿入認識してくれなかったりして、しかもこっちは前の Mac mini でも発生してて、これはもう何かの呪いか、そうでもなければウチのネットワーク環境とかその辺に原因でもあるんじゃないかしらー、などと思いつつたまに色々対処を試みたりはしてたのだけど、本日試してみた AppleJack というメンテナンスユーティリティがちょっと効果があったかも知れない。

Appejack Project Page

Mac：たぶん最強のメンテナンスソフト、AppleJackの使い方 | Macとかの雑記帳

↑参考。たぶん最強、らしい。インストールしておけばなんぞ問題が発生してまともに起動しなくなった場合でも Command + S キー押しながら電源入れてシングルユーザーモードで起動してコマンドプロンプトから applejack auto restart とか入れてやれば自動的にアクセス権の修復やらキャッシュの削除やら一通りやってくれて再起動してくれる。別途起動ディスク的なものを用意しておく必要は無い。便利。

やってみた結果、久方ぶりに待たされることなくさくっと起動してアイコンクリックしたりウィンドウ閉じようとしたりする度にいちいちレインボーカーソルがぐるぐるしだすこともない快適な環境が戻ってきた。光学ドライブもちゃんと動いた。すげぇ！すげぇ、っていうか本来あるべき当たり前の環境なんだけど。

ディスクユーティリティから修復したり OnyX で諸々のキャッシュ削除したりするのとどう違うのか良く判らんが良い結果がもたらされたので良しとしておこう。そもそもクリーンインストールしても解決しなかった問題なのだからハードウェアになんぞ根本的な問題は残ってるかも知らんけど、とりあえずしばらく様子見。それなりにまとまった期間使えて駄目になってきたらまたシングルユーザーモードで起動してコマンド打ち込んでまたしばらく使えるなら当面はそれで戦えるだろうし(何と)。

なお少なくとも公式からリリースされている最新バージョン 1.6 は OS X Lion や Montain Lion には対応していない様子。対応していないってのが一部の機能が無効なだけなのか全く動かないのかは知らんが。ウチのは Snow Leopard なんで大丈夫。アップグレードする予定もないし。

『スーパーマン：アースワン』『バットマン：アースワン』買い

なんかアメコミ買ったの久しぶりな気がする。最近は邦訳がガツガツ出ててもう DC だけに限定しても把握出来なくなってきて大変よろしい。『ジャスティスリーグ：誕生』は買おうかどうか迷ってるんだけど原書のデジコミでだいたい話も把握出来てるから別に良いかなーとも思ってる。『バットマン：梟の法廷』と『ダークナイト：姿なき恐怖』はまあ良いかなと。

で、『スーパーマン：アースワン』。スーパーマンの物語をより現代的な設定で新しい解釈で描いた、リブートでもリランチでもないリメイク。「アースワン」はニューアース以前の正史世界である「アース 1」とはまた別の、2008 年?2009 年のクロスオーバーイベント「TRINITY」のラストで生まれた新しい世界。今後も発展していく予定があるようなので「フラッシュポイント」の影響を受けていない、DC マルチバース群とはやや離れたスタンスの世界観てことでよろしいのかな。知らん。

滅び行く惑星クリプトンの最後の生き残りで地球に送り込まれたカル＝エルが地球人クラーク・ケントとして成長し、その力をどう使ったら良いものか判らないままなんとなくメトロポリスに上京して自分探しじみたことをしてたら侵略者が地球にやってきて色々あってスーパーマンとしての使命に目覚めてみたりしましたよ、と。

ペリー・ホワイトもロイス・レーンもジミー・オルセンも出るし巻末の新聞記事でラナ・ラングの存在も仄めかされている。敵キャラクターは完全新キャラだけど背後にもっと強大な敵が居る様子で、まあきっとあのひとか或いはあのひとなんだろーな、と。

コスチュームの素材が赤ん坊のカル＝エルを包んでいた毛布だってのはリランチ前から継続だけど「S」のシンボルマークがエル家の家紋であるという設定は無しでマーサ母さんの趣味。色が派手なのは元からで染色を受け付けなかったから。コスチュームが派手であれば人はそっちに注目して素顔をあまり意識しない、ただしマスクをしてしまうと人に恐怖を与えかねないのでそれを避けるためにあえて素顔を晒す、てのはこれは「アースワン」の新しい解釈要素ってことで良いのかな。なかなか。

去年の 10 月に続編が出たとのこと。今後も続いてもしスーパーガールが登場するようだったらコスチュームはリランチ前準拠だと良いなー、とか。

んでもうひとつ『バットマン：アースワン』。同じく現代的な再解釈で描かれたバットマン。バットマン自身の基本設定は従来通りなんだけどそんなことより(主人公捕まえてそんなことて)アルフレッドのキャラクターが大幅に刷新されていて一言で言うと非常にカッコイイ。元英国海兵隊員で片足が義足の百戦錬磨の初老の男ってカンジ。まあ正史世界のアルフレッドも若い頃に 007 みたいなことやってたんじゃないかと俺は信じてるんだけど(あくまで俺の妄想)。

他登場キャラクターはジム・ゴードンとバーバラ・ゴードンは概ね従来通り。フォックスは社長とかじゃなくて下っ端。ハービー・ブロックもアルフレッドと同じく大きく刷新されてるけどラスト見てるとだんだん従来通りになっていきそうな。新キャラクターはハービー・デントの双子の妹とか。敵なペンギンだけど結構変わってて最後に死亡。次作にはリドラーの登場が仄めかされている。バーバラがバットガールやる気マンマンだけどロビンは気配も無し。

解説によるとこの「アースワン」シリーズはワンダーウーマンが水面下で企画中とのこと。その後もグリーンランタンとかフラッシュとか出していってジャスティスリーグまで扱ぎつけて欲しいニャー、と。とりあえず原書の『SUPERMAN: EARTH ONE vol.2』買うかどうか検討。

[Amazon] スーパーマン:アースワン (ShoPro Books) [単行本] 4796871446

[Amazon] Superman: Earth One Vol. 2 [ハードカバー]

↑ vol.2 原書。

Hide money

お金を本とかに挟んだりして隠しておいてそのまま忘却してある日突然発見して幸せになろうってのは誰でも試みると思うのだけどだいたい忘れようたってなかなか忘れられずに結局手持ちが足りないときに出して遣っちゃったりするよね異論は認めない。

1 箇所に隠しておいたってそれを忘れることはなかなか出来ない。そこで本日ご提案するのは、5 箇所 6 箇所あるいは 10 箇所でもあちこちに隠しておくこと。隠したという事実自体は憶えていてもこんだけ分散しておけば 1 箇所 2 箇所ぐらいは忘れられるだろう、と。

結果として今日、完全に全く予測してなかったところから 1 万円札が出てきて幸せになった。いいねこれ。お勧め。

気をつけなければならないのは今後要らなくなった本とか CD とか DVD とか服とか鞄とか処分するときはお金を隠してないかちゃんとチェックしてからにしないとならないこと。あと何らかの理由で全部回収しようとしてもいくつか漏れる可能性もある。

そもそも元々全部自分のお金だしね。やめた方が良いね。

jQuery で Ajax を利用して「もっと読む」

ウチのサイトはトップページに日記の最新 5 件ぶんを降順に表示して、その下に以前は過去ログの月別ページへのリンクを置いていたのだけど、これはサイドバー領域にあった方が収まりが良いなあと思うようになったのでそっちに移動した。古い記事が読みたい場合はそっちから過去ログを辿って頂ければよろしい。

とはいえ、なんかの弾みでふらっとウチのサイトに来たひとがトップページを上から順に眺めていって一番下まで来てもう少し以前の記事も読みたいなとか思ったときに自然に辿れるリンクがあった方がよろしいという気もするので、本文の一番最後にこんなものをこさえてみた。

<div id="readmore">
<p><a href="/?page=2">もっと読む</a></p>
</div>

リンク先は 2 ページ目ということでトップページと概ね同じ仕様でありながら最新記事から数えて 6 件目から 10 件目が表示される。その次は 3 ページ目で 11 件目から 15 件目、4 ページ目は 16 件目から 20 件目…以下略

で、ここからが本題。ただ単にフツーにリンクアンカーでページ辿っていくだけの原始的なアレならなんでもないのだけど、なんか最近のお洒落なブログなんかだとアンカーなりボタンなりをクリックしたらページ全体を読み込むんではなくて続きぶんだけを読み込んで下に追加して表示したりとか、クリックするまでもなくページ最下部までスクロールしたら自動的に続きが表示されるような仕組みがあったりするじゃないですか。なんでも Ajax とゆう仕組みを利用するとそれが出来るそうで、しかも jQuery だとそれが楽に使えると。

やってみよう。

というわけで色々調べてどうにかでっち上げてみた。

$("#readmore a").click(function() {
    $(this).text("読込中…");
    var intPage = parseInt($(this).attr("href").replace(/\/\?page=([0-9]+)$/, "$1"));
    $.ajax({
        type: "POST",
        url: "readmore.php",
        data: "page=" + intPage,
        cache: false,
        success: function(strHtml) {
            $("#readmore").before(strHtml);
            $("#readmore a").text("もっと読む")
                            .attr("href", "/?page=" + (intPage + 1));
            }
        });
    return false;
    });

「もっと読む」リンクをクリックしたらまずアンカー文字列を「読込中…」に変更。フツーはなんかぐるぐる回る GIF アニメなんかを使うんだろうけど面倒くさかったのでとりあえず文字だけで。

次に href 属性値から次に表示すべきページ番号「2」を取得。正規表現でぶった切っただけだと文字列型なので parseInt() で整数型に変換。

$.ajax() メソッドで Ajax リクエストを実行してページ番号を readmore.php に渡す。readmore.php はそのページに当たるぶんのログをデータベースから引っ張ってきて <article>?</article> のフツーに本文に表示するときの形で出力する。readmore.php は実際のものと同一ではないけど概ね以下のような具合。

<?php
if(preg_match("/^[0-9]+$/", $_GET["page"]) {
    $intPage = (int)$_GET["page];
    $re = mysql_query("SELECT subject, body FROM log ORDER BY datetime DESC LIMIT " . (($intPage - 1) * 5) . ", 5");
    while($aryRe = mysql_fetch_array($re)) {
        echo("<article>\n");
        echo("<h1>" . $aryRe["subject"] . "</h1>\n");
        echo($aryRe["body"]);
        echo("</article>\n");
        }
    }

出力された内容は strHtml に格納されているので「もっと読む」リンクがある div の手前に追加。「読込中…」を「もっと読む」に戻し、href 属性値をその次のページのものに書き換え。

最後に return false; で a 要素本来の挙動を停止して終了。

ローディング表示の仕組みとかとりあえずこれで動くから良いかとか思ってたら世間的には ajaxStart() とか ajaxStop() を使うもんぽいのだけど動いてるから良いよね。そのうちそっちも試す。

概ね意図通りに動いてくれるんだけどこれで読み込まれた部分には以前に書いた blockquote の引用元表示とかが適用されない。最初にページが読み込まれたときに処理されるから、と思う。どうしたら良いか今はまだ判らんけどそのうちどうにかする。

どうにかなった…か？

昨日の続き。

$(function() {
    $("article").each(function() {
        var objArticle = $(this);
        ControlDOM(objAtricle);
        });

    $("#readmore a").click(function() {
        (略)
        $.ajax({
            (略)
            success: function(data) {
                var objNew = $(data);
                ControlDOM(objNew);
                (略)
                }
            });
        return false;
        });

    function ControlDOM(obj) {
        // blockquote に引用元を追加する処理。
        obj.find("blockquote").each(function() {
            (略)
            });
        }
    }

(略)が多いな。でも全部書いてもアレだし。

最初に書いた blockquote に引用元を追加するやつとかを $(function(){... 直下からユーザー定義関数内に移動。ControlDOM() って名前で良いのかは知らんが。$("blockquote").each(function(){... ってやってた部分は obj.find("blockquote").each(function() {... と書き換える。今後もこのテの要素を追加したりする系はこの中に書く。

んで $(function(){... 直下から article のオブジェクトを ControlDOM() に投げる。アコーディオンメニューだとか「もっと読む」処理だとかは入れる必要は無い。

んでんで、「もっと読む」で Ajax リクエストから受け取ったデータも、同じく ControlDOM() に放り込んであれこれ処理してから本文に追加する。

さあどうだ。

「ページトップへ」

「もっと読む」でチョーシ乗ってずんずん画面を下にスクロールしてたらそこから一番上へ戻るのがしんどくなってきたので(スクロールバー使えば良いんだけど)、これまたよくある「ページトップへ戻る」ボタンをこさえてみた。

var objToPageTop = $("<div />");
$("body").append(objToPageTop);
objToPageTop.text("ページトップへ")
            .css({"position":"fixed", "z-index":"100", "bottom":"10px", "right":"10px",
                  "background":"#666", "opacity":"0.5", "padding":"5px 10px", "border":"solid 1px #FFF", "border-radius":"5px", "color":"#FFF"})
            .hide()
            .hover(function() {
    $(this).css({"cursor":"pointer", "opacity":"1"});
    },
function() {
    $(this).css("opacity", "0.5");
    });
$(window).scroll(function() {
    if($(this).scrollTop() > 100) {
        objToPageTop.show("slow");
        }
    else {
        objToPageTop.hide("slow");
        }
    });
objToPageTop.click(function() {
    $("html").animate({"scrollTop": "0"});
    objToPageTop.css("opacity", "0.5");
    });

objToPageTop という名前で div 要素を生成して body 直下の一番最後に追加。どうせ表示位置はスタイルシートで設定するからどこでも良いのだけど。position: fixed でウィンドウ右下で z-index は一応 100 に。あとは色とか。基本は半透明。そして初期状態では非表示に。

hover() でマウスオーバー時のイベント。透過を無しにしてマウスカーソルをポインタに。外れたら透過を戻す。

初期状態は非表示だけどウィンドウをスクロールしたら表示する。$(window).scrollTop が 100 を超えたら表示。100 をきったら非表示。

そして最後にクリックしたら一番上へスクロール。ただスクロールするだけなら $(this).scrollTop(0) で済むのだけどちょっとアニメーションしてみた。

元の HTML はいじってないのでこのスクリプトだけコピペすれば他所の環境でも動く、だろか。header 辺りに ID 振っといて <a href="#header">ページトップへ</a> みたいなリンクアンカーをページ最下部に置いといてスクリプト非対応環境でも一番下から一番上へは行けるようにしといてそのうえで jQuery で表示位置とか挙動とかいじっても良かったかも知らんけど、縦方向へスクロールする視覚系 UA のためのものを HTML に直置きするよかスクリプトで要素から生成ってのをやってみたかったので。

例によって概ね動くんだけどたまに半透明になってないことがあるんだよな。パターンがちょっと良く判らん。なぞ。

追記。クリックしてページトップにスクロールしてその後また画面を下にスクロールしたとき表示された「ページトップへ」が半透明になってない。何故ならページトップへ行った時点で半透明にし直す処理がされずに objToPageTop が hide() されてしまうから。というわけで click() の中でスクロールしたあとに半透明化処理を追加、と。

冬言響 / 日記