コメント欄にユーザーのアイコンを表示するプラグインを作ってみました。
設置は少々面倒ですが、興味がある人は試してみてください。
deliciousにブックマークした内容を簡易表示するプラグイン
作ってみました。
ちょっと前に deliciousのHTMLフィード という記事で、「RSSをHTMLに整形するのめんどい」みたいなことを書いていましたが、実際のところPHP 5なら simplexml_load_file という関数が使えて、とっても簡単にRSSフィードの内容を利用することが可能です。HTMLタグの出力形式を自分で選べるので、deliciousが提供するHTMLをそのまま取り込むよりもRSSフィードをいじる方が良いのかも知れない。
ニーズがあるかどうかは不明ですが公開してみます。
ちょっといじればLast.fmのフィードも取って来られますし、はてなブックマークの内容も取ってこられるでしょう。
P_BLOGの resources フォルダの管理ファイルを改良
デフォルトの管理ファイルは画像のサムネイル表示しないし、一ページに全部のファイルを表示して見にくかったので見やすいように改良してみました。これで画像ファイルの管理のためにFTPクライアントを起動する必要がなくなると思います。一ページに100ファイルずつサムネイル付きで表示します。詳しくはダウンロードページを見てください。
DOWNLOAD : P_BLOGの resources フォルダ管理ファイル改善版
配列の操作とPOSTメソッドでのPaginationの勉強になったなー。あとはファイルの作成日時ごとにソートできるようにとかしたいですね。
ところでWordPressは画像をアップロードした場合もいちいちデータベースに情報を保存してるっぽいですよね。画像のためにそこまでやるのは無駄なような気もするけど、どの画像がどの記事で使われているのかといった情報が参照できるのは確かに便利かなーと思った。DBにこういう情報が保存してあるなら日付ごとのソートとかファイル管理も劇的にやりやすくなりそう。
PHP 5でしか使えない関数を使っていたので公開停止します。ダウンロードした方すみません。
差し替えました
PHP 4でも動くものに差し替えました。ご迷惑おかけしました。
jQueryでぬるっとコメントを表示
最近のコメントのページ（Recent Comments）で、各コメントのタイトルにマウスオーバーするとコメントの本文を取ってきてぬるっと表示するようにした。Tumblrの notes を読み込むときみたいなアクション。結構かっこいい。
コードはこんな感じ。相変わらず無駄な変数が多い気がする。もうちょっと行数減らせそうなんだけど書き方が分からん。
// load entire comment
$(document).ready(function() {
$("#recent-comments a.taggedlink").mouseover(function() {
var loadUrl = $(this).attr("href");
var id = loadUrl.match(/#.*/);
var cid = 'div' + id;
var cip = 'div' + id + ' + p.auth' ;
var loadPath = loadUrl + ' ' + id + ' div[class=comment-content]';
$(cid).load(loadPath, function() {
$(cip).css("clear", "both");
$(this).slideDown("slow");
});
});
});今回はonclickとか使わずに極限までJavaScriptだけでアクションを実現しようとしたけどやっぱ無理だった。諦めて途中でHTMLの構造をいじってしまった（idを指定した）。もっと勉強しないといけないなー。
deliciousのHTMLフィード
自己紹介のページに最近deliciousにブックマークしたものを表示しようと調べてたんですけど、こういうの発見しました。知ってました？
HTML Feeds
HTML feeds are available for users. This is an easy way to add your Delicious links to your blog, and can be used as a simple view of your bookmarks on a mobile device.
スゲー。たとえば僕のブックマークだったら http://feeds.delicious.com/html/morygonzalez/ で一覧を取ってこられます。 ? のあとにいろいろパラメーターを指定すると細かく出力内容を調整できるし、タグごとのフィードも吐き出してくれる。しかもHTMLなのがいい。プログラミングはあんまりわからんちんなので、RSSを解析してHTMLとして出力とかできないし。HTMLで提供してもらえるならそれをちょいちょいと読み込んでしまえばいい。HTMLでiframeのなかにぶっ込むのもあり。
僕はPHPに以下のように記述して読み込んでます。ちと時間かかるけど。
// Get delicious Bookmark
ob_start();
readfile('http://feeds.delicious.com/html/morygonzalez/?count=10&tags=no&rssbutton=no');
$delicious = ob_get_contents();
ob_end_clean();「もっと読む」をもっとかっこよく
クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。
ローディングgifはこちらで作った。
コードはこんな感じ。よかったらどなたか添削してください。
function readMore(x) {
// format vars
var id = x.replace("#", "");
var loadPath = '/article.php?id=' + id + ' div#wrapper div[class=comment entry-content]';
var rm = x + ' p.read-more a';
// hide read-more
$(rm).hide();
// write ajax-loader.gif
$(x).append('<div id="loading" style="text-align: right; position: relative; top: -28px;"><img src="./images/ajax-loader.gif" width="28" height="28" /></div>');
// show and hide ajax-loader.gif
$("#loading").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).fadeOut("slow");
});
// load rest of content
$(x).load(loadPath);
}「もっと読む」をAjaxで
jQueryを使って、「もっと読む」をインタラクティブにした。これまでもjQueryを使って細工してたんですけど、slideToggle() で先読みしたものを隠しておいて、クリックで展開するという感じにしてた。まぁこれでも良いんだけど、Ajaxってのに挑戦してみたかったので、「もっと読む」リンクをクリックした後に残りの部分を読み込むような仕掛けにした。どんな風になるかは「もっと読む」をクリックして調べてみてください。 Continue reading...