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

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" にしてバージョン番号とか振ってみた。

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

 あまりにも AutoPagerize が便利なので、自分のブログでもAutoPagerizeできるようにしてみた。

 AutoPagerizeに対応させる方法は二つあって、一つはuser.jsに直接SITEINFOを書き込んで対応させる方法。もう一つはAutoPagerizeのMicroformatsをサイト自体に埋め込んで対応させる方法。Web Serviceなど、自分が中身をいじれないサイトはSITEINFOを書いて対応させるしかないけど、自分のブログだったらXHTMLにMicroformatsをちょこちょこっと書き加えることで、閲覧者全員にAutoPagerizeしてもらえるようになる。/index.php/search.php でAutoPagerizeするようにMicroformatsを埋め込んでみた。AutoPagerizeのMicrofarmatsは配布元に記述があるので参照されたし。

 いじるのは /include/fnc_base.inc.php 。 586行目付近の

. '&f='  . $topic_id . '">';

の末尾の部分を削って

. '&f=' . $topic_id;

とし、594行目と604行目をそれぞれ以下のように書き換える。

$flip_link .= '<span class="prev">'.$page_array[$array_key-1]["tag"].'" rel="prev">'.
$flip_link .= '<span class="next">'.$page_array[$array_key+1]["tag"].'" rel="next">'.

 さらに、670行目の <a> タグ内に rel="next" を埋め込んで以下のようにする。

'<a href="./search.php?k=&p='.$cfg['pagemax'].'&c=0&pn=2&d=all" rel="next">'.

 これで fnc_base.inc.php のモディファイは終了。最後に /include/user_include/base_xhtml.inc.php#content 部分を以下のように書き換えれば完了。

<-- Begin #content -->
<div id="content">
{$contents_top}
<div class="autopagerize_page_element">
{$contents}
</div>
<div class="autopagerize_insert_before"></div>
</div>
<!-- End #content -->

 ちなみに、FirefoxじゃなくてSafariでAutoPagerizeしたい人は、 GreaseKit を入れて oAutoPagerize をインストールすると幸せになれます。

加筆修正

 このハックを適用すると、サイト検索をしたときなどに表示されるFlip Linkの表示がおかしくなっていました。587行目の
$tag_array["anchor"] = $pagenumber. '</a>';

$tag_array["anchor"] = '>' .$pagenumber. '</a>';

と書き換えて下さい。

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