diary : Hisato's twits ...

ぴのぱーつ。

Logpi!! BlogParts
非常になんとなく。
ログピのブログパーツらしきものをぺちぽんしてみた。

※この先しばらくいつもの戯れ言、万が一使いたい人は記事の下の方へどうぞ。

ほーピもユーザー個別でRSSあんのなー。

てかついったでもこれあるけどどうしろというのだろうかね?

よーしJSで拾ってみるかー。

JSで別ドメインにアクセスできない事になぜか気づかないオレ。

あばばばばば。

サーバー経由してえんやこらしょ。っ[jFeed]

ローカルで拾えたのを確認。ふぅ。

あれ?ちょっとまって。普通こういうのブログにはるよね?

ブログってレンタルだったりしない?

え?ていうことはPHPうごかねーじゃん。

あばばb、、、。

「ブログ→jFeedをおいたサーバー→ログピ(XML)」でアクセスすればよいんだけど。
外部とれないからってjFeed使ってるのにそいつが外部にいたらまたそれがとれないとかなー。

うふふ。あはは。えへへー。

うーんうーん。

ぴこーん。

ブログ内にiframeでjFeedをおいたサーバー→ログピ(XML)で道をこじ開けてみた。

まぁそんなJSにこだわんなやーって話ではあるなこれもう。

ということで。
非常になんとなくそして限りなく無駄な努力でログピのブログパーツらしきものをぺちぽんしてみたんだよ。
とりあえずは満足した。

んでは。
外部からCGI呼んでる訳じゃないし規約ギリセーフだろ?ろ?ってほんのりびくびくしながら。
いいじゃんペパボのサービスをペパボのサーバーでごねごねしてんだから!っていう開き直りを見せつつ。
コピペして使おうずばばばばーん!のコーナーです。

※こっから先はただのコード説明のようだ。必要ない人はバックスペースキーでもぺちんぺちんしれい。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://www.nono150.net/logpi/plugins/jquery.iframe.js"></script>
<script type="text/javascript" src="http://www.nono150.net/logpi/jfeed/jquery.jfeed.js"></script>
<script type="text/javascript">
	// ▼ 設定項目この辺からっぽいよー。
	// ログピID
	var LOGPI_ID = "itigoppo";
	// 表示件数(1-30 or [max]
	var VIEW_CNT = "10";
	// 表示枠サイズ(横)
	var WIDTH = "200";
	// 表示枠サイズ(縦)
	var HEIGHT = "300";
	// CSSファイル場所
	var CSS = "./logpi.css";
	// サムネイル画像/ 使用する:1、使用しない:0
	var THUMBNAIL = "0";
	// 画像サイズ(横)/ 縮める場合のみ指定
	var IMG_WIDTH = "50";
	// 画像サイズ(縦)/ 縮める場合のみ指定
	var IMG_HEIGHT = "50";
	// アイコン画像
	var ICON_IMG = "http://image.jugemkey.jp/user/itigoppo/76?service=logpi";
	// ▲ 設定項目この辺でおしまい!
</script>
<script type="text/javascript" src="http://www.nono150.net/logpi/logpi.js"></script>

↑をheadタグ内とかにかきませう。
んで▼ と▲ の中身をぐりぐり書き換えます。
コメントで書いてある通りだから一部だけ補足。
表示枠サイズはiframeのサイズになるよ。
サムネイルはピ自体が一覧表示のときに使ってるちっちゃい画像を表示するかしないか。
で、それを使わないときだけ画像サイズの設定が有効に。
個別記事ページで見れる大きめの画像をimgタグレベルで指定サイズに。
いやだいいやだい。サムネとか縮めるとかするなやい。
って言うならサムネイルを使用しないにして画像サイズを両方0にしてくだし。
ただしiframe内に表示されるから表示枠サイズより大きい画像だと収まらないので気をつけるよろしな。
アイコン画像は一番下に出てくる3つのうちの一番右の子の画像になるよ。
あ、なかったら空欄にするとログピ君画像になるはず。
あとはCSSか。
表示かえたい人は自分のサーバーにでもcssつくってそのアドレス設定してくだしあ。
要素は多分これぐらい。


#logpi_line{
}
#logpi_line dl{
}
#logpi_line dt{
}
#logpi_line dd{
}
#logpi_line dd a{
}
#logpi_line dd span{
}
.logpi_img img.imgbox {
}

あと↑とは別に全体枠とフッタのアイコン付近のCSS(要素は下)は表示するHTMLにでも書いておくとよいかもしれぬ!


#logpi{
}
#logpi_copy{
}

で、最後に。これ大事。
CSSとか画像サイズとかはオプションだからデフォのままでもいいけどこれは大事。


<div id="logpi"></div>

パーツを表示させたい位置に↑を書きませう。
これないと表示されませんともさ!
ということで以上!ぽん!
サンプルはこれね。
ここのコード必要なのしか書いてないからコピーしても動くと思うんだぜ。

・使ったライブラリとかメモ。
jQuery: The Write Less, Do More, JavaScript Library
jFeed: JavaScript jQuery RSS/ATOM feed parser plugin – jf-hovinne.blog
33Rockers | Unobtrusive iFrame with JQuery
Facebox 1.2

About Archive

Categories:

Recent Posts:

Tag Cloud:

Meta: