| @技術/プログラミング

P_BLOGをわさわさいじって、Tagを付けられるようにしました。いや正確には前からTag付けられるようになってたんだけど、P_BLOGのTagは「CategoryをTagっぽく使う」っていうコンセプトなので、WordPressとか他のブログツールのTagの概念とちょっと違った。もともとP_BLOGにはTagはなくて、SafariStandのhetimaさんのハックを取り入れてCategoryをTag代わりに使えるようになっていたわけでした。

Tagはいっぱい付けといた方がいいとは思うんだけど、いままでTagをいっぱい付けまくったので数が260個ちかくになってしまって、こうなると逆に目当ての情報にたどり着くのが難しくなった。そういうわけでTagとは別にCategoryによって記事を大まかに分類しておくと便利だなーと思って、ちょちょっといじってみました。

データベースの `p_blog_log` テーブルのこれまでTagとして使っていた `category` フィールドを `tag` という名前にしてしまい、新たに `category` フィールドを作ってphpMyAdminでテキトーに記事にカテゴリーを割り振りました。その後P_BLOG本体のカテゴリーにまつわる部分をごにょごにょと改造して、TagとCategoryの機能を明確に分けました。要するにコピペして変数名や関数名を書き換えただけなんですけどね。

P_BLOGの後継プロジェクトのLoggix含め世の中には優れたブログツールが沢山ありますが、「自分で欲しい機能をどんどん拡張できる」のはオレオレ仕様のこのP_BLOGだけなわけでして、もう開発は終了していますがオレオレ仕様でどんどん進化して行っております :-) なんかもう主客転倒で、P_BLOGをいじる片手間でブログ書いてるような感じです :-P

| @技術/プログラミング

LDRizeはSITEINFOの“domain”のところにサイトのXPathを記入できるんだけど、AutoPagerizeは“url”にはサイトのURLしか記入できない。AutoPagerizeの“url”の部分にもXPathが指定できれば凄く便利だと思ってたんだけど、taizoooさんという方がその方法を紹介している。

ここで紹介されてる通りにAutoPagerizeの該当部分を書き換えると、“url”にXPathが書けるようになる。つまりURLごとにSITEINFOを書くんじゃなくて、ブログツールとか同じ構造をしているサイトならXPath別にSITEINFO書くだけで済むので、SITEINFOの数が減らせる。WordPress用、MovableType用みたいな感じでSITEINFOを書いとけば事足りるようになる（テンプレートが違ったら動かないだろうけど）。XPathでAutoPagerizeが実行可能か判定するので、独自ドメインで運営されてる個人サイトでもAutoPagerizeできるようになる。これは画期的なことですよ！

そういうわけでP_BLOGでもAutoPagerize本体に改変を加えてSITEINFOを書けばAutoPgerizeできるようになった。XHTMLに変更を加える必要なし。以下にSITEINFOを晒しておきますので興味がある方はどうぞ。なお僕はPHPerなので正規表現には自信がありません。不都合がありそうだったら教えていただけるとうれしいです。（ちゃんと直します）URL使わないんだから正規表現関係なかった。もうダメだ。

url:	 '//address/a[contains(@title, "P_BLOG")]',
nextLink:	'id("prev-logs")/a | //div[contains(@class, "section") and  position()!=1]/p[@class="flip-link"]/span[@class="next"]/a',
insertBefore:	'id("prev-logs")',
pageElement:	'//div[contains(@class, "section")][1]',
exampleUrl:	'http://pbx.homeunix.org/p_blog/index.php',

なおFooterの address/a のtitleの中に“P_BLOG project”という文字列が含まれているかどうかでP_BLOGで動いているかを判定していますので、カスタムフッターを使ってたり、FooterにP_BLOG projectへのリンクを表示していないサイトではAutoPagerizeは効きません。

微修正

“insertBefore”追加と、“pageElement”を修正。すでにXHTMLにMicroformatsを埋め込んであるサイトだと挙動がおかしくなるっぽいので、 '//div[@class="section"][1]' を '//div[contains(@class, "section")][1]' とした。

さらに追記

なんかXPathで指定するのってパフォーマンス悪いらしい。確かに重いかも…。

AutoPagerizeがurlしかスクリプト実行可能かの判定に使ってないのにはちゃんと理由があったのか。

| @技術/プログラミング

最近JavaScriptで遊んでます。まだ初歩的なことしかできないんだけど、IE6でアクセスがあった場合、初回と10回目にアラートを出すことにしました。IE6ユーザーのみなさん、うざいでしょう 8-) はやくあんな前近代的ブラウザは捨ててFirefoxをインストールしましょう。

で、今回やったのがjQueryを使って「もっと読む」をかっこよくするっての。P_BLOGでは記事中に <!-- more --> というタグを挿入すると、以後の部分は index.php や category.php では省略され、パーマリンクをクリックしなければ表示されません。長い記事を書くときはトップページが冗長にならないようにこのタグを挿入してたんですけど、AutoPagerizeで閲覧しているときに「もっと読む」をクリックしていちいちパーマリンクを開くのはかったるい。そういうわけであらかじめ全文読み込んで非表示にしておき、jQueryのshowToggleを使ってかっちょいい効果を付けながら展開したり折りたたんだりできるようにしてみました。

今後はしばらくJavaScriptを勉強してブログをもっとうざい感じにしていこうと思います ;-)

追記

うーん、AutoPagerizeで読み込んだ2ページ目以降ではきちんと動いていないっぽい！ :-!

| @技術/プログラミング

遅ればせながら、LDRizeとMinibufferというGreasemonkeyをFIrefoxに入れてみました。GoogleやTwitterやTumblrの閲覧が劇的に改善されます。いままでメリットが分からず入れてなかったんだけど、アホですね。もっと早くに入れれば良かった。

となると一年前にやったAutoPagerizeのとき同様、P_BLOGでも動くようにしたくなる。というわけで例のごとくMicroformatsをXHTMLに書き加えました。AutoPagerizeの場合は独自規格のMicroformatsでしたが、LDRizeとMinibufferはhAtomという汎用Microformatsに対応しており、他の用途にも御利益のあるものなんだそうです。ありがたやありがたや。

ところで僕は知らなかったんですけど、XHTMLの中にclassって複数書けるんですね。一要素あたり一個しかclass書いちゃいけないと思ってた。アホだ。これまで autopagerize_page_element 専用に <div> を用意してましたが、これはhAtomのhfeedとご一緒してもらい、<div class="hfeed autopagerize_page_element"> としました。無駄な <div> を一個減らせました。

Continue reading...

| @技術/プログラミング

usericons.relucks.orgをご存じですか？ 様々なウェブサービスのユーザーアイコンを拾ってきて画像のURLを渡してくれるAPIです。これすごく便利。

このブログにコメントを書き込んでもらったときにURI欄にTwitterのユーザーページのURLが書いてあったら、twitty.jpのAPIを使わせてもらってユーザーアイコンを表示していたんですけど（参照：Twitterアイコンをブログのコメント欄に表示するというアイディア）、このAPIはtwitty.jpがTwitterから収集してきたアイコンを表示するのでタイムラグがあったし、透過pngとかはgifに変換されてて背景がきちゃなくなっていました。自分でTwitterから取ってこようかなーとも思ったのですが、ページが表示される度にアイコン取りに行ったらすぐにAPI制限喰らっちゃうし、MySQLにユーザー情報を格納するとかごちゃごちゃやってたんだけど結局わからんくて断念。そんな折、swdyhさんが作ったサービスに出会ったわけでした。

これまでTwitterの画像だけ取ってくるようにしてたけど、 usericons.relucks.org は

  • flickr
  • github
  • hatena
  • lastfm
  • logpi
  • najimi
  • nowa
  • turnyournameintoaface
  • twitter
  • wassr

に対応してるので、Twitterの他に自分がアカウントを持ってる flickr, hatena, last.fm, wassr のアイコンも取ってくるようにしました。

このAPIは本当にスバラシイ！

で、やり方なんですけど、 /include/fnc_logs.inc.php の382行目付近から396行目付近

Continue reading...

| @技術/プログラミング

　ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用させることにした。P_BLOGにはUAごとに適用するCSSを切り替える機能が付いているのでとっても簡単。

　ダンコーガイメソッドはメニューバーなどをCSSで display: none; にして見えなくするやり方なわけだけれど、それをそのまま真似したらメニューバーの部分が空白になるだけで、コンテンツ部分にフォーカスされなかった。そういうわけなので、#contentの親要素である#wrapperにもCSSで min-width を指定してやり、さらにその後#contentに min-width を指定してやった。で、↑にご覧の通り、iPhoneに最適化されて表示されるようになった。

Continue reading...

| @技術/プログラミング

　レンタルサーバーをXREA内で引っ越したので、PHP、MySQLともバージョンがあがって、それぞれ5.2.5、5.1.22-rcになった。

　P_BLOG本体は簡単に移せたんだけど、MySQLでハマった。調べて見たところMySQL4.0から4.1、5.xへのアップグレードは文字コードにとても気をつかうようで、かなり苦労した。ISBN変換プラグインは全く動かなくなってしまったので大幅にリニューアルした。

　MySQL5系はテーブル、レコードごとに文字コードを指定できたりとか、自動でクライアントとサーバーとDB間の文字コードを調節してくれるみたいなんだけど、こういった付加機能がむしろ悪さをして文字化けを頻発させてるみたい。

　結論としては、現在MySQL4.0がインストールされているサーバーでP_BLOGを運営している人は、自信がない限りMySQL5.xにはバージョンアップしない方がいいです。