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

最近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にはバージョンアップしない方がいいです。

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

ふと思いついたんだけど、ブログにコメントをもらったとき、アドレス欄にTwitterのURIが入れてあれば該当アカウントのアイコンをTwitterから取ってきてコメント欄に表示する、というのはどうだろう。

Twitterを使っていると何らかの発言の横にはユーザーの顔＝アイコンが表示されてて当然という気になるので、ブログのコメント欄で顔アイコンがないのは何だか無味乾燥に感じられる。ふぁぼったーでこのようなアイコン表示は実現されているから、やってみようと思えばそんなに苦労せずにできるんじゃないかと思う。

以前、P_BLOGでブログを書いていたmacotoさんのtriflesで元になるアイディアが披露されていた。残念ながらtriflesは閉鎖されてしまい、いまはその記事を参照しているkazさんのJAM LOGでこの技術の概要が確認できる。

しかしこの方法ではブログオーナーのアイコンは本人オリジナルのものが表示できるが、ゲストのアイコンは一種類しか選べず、オーナーとゲストの区別しか行うことは出来ない。Twitterのユーザーアイコンであればそれぞれ個別のものが与えられているので、ゲスト同士のアイコンの区別も可能となる。

WordpressやMovable Type（TypePad）ではこのような技術は採用されているかも知れないが、wordpress.comのアカウント、TypeKeyがないと多分だめだよね？

Twitterならいまウェブ（といってもはてな界隈が中心だけど）で活発に活動している人は必ずアカウントを持っているし、こんな風にOpenID的な使い方が出来ると楽しいと思う。

Reference

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

　ISBN変換プラグインを少し修正しました。入れ換える方は /include/user_include/plugins/plg_isbn.inc.php だけを差し替えるだけでOKです。

変更点

オリジナルバージョン

  1. 福耳 Cafeさんで配布されていたオリジナルバージョンのように、Amazonへのリンク部分を文章で囲い込まないようにしました。
  2. 加えて、映画の場合は監督名、本の場合は著者名、音楽の場合はアーティスト名をそれぞれ表示するようにしました。

囲い込みバージョン

　Amazonへのリンクを文章で囲い込む表示の方が好きな人は、 plg_isbn.inc.php の289行目から309行目を削除し、312行目のコメントアウトを解除すると↑のように表示します。

　ダウンロードはこちら。

ちなみに、名前を "ISBN変換プラグイン mod" にしてバージョン番号とか振ってみた。