ちいさな創造 wp

TwitterのAPIを使って、タグをORで繋げて検索して、その結果を表示します。
賢さが全く感じられないコードだけど
以下コードをテンプレートの個別記事の下に貼りつければ動くはず。
記事の下が寂しい時に使えるかも。

探せばこんなプラグインありそう。

<?php
$wpkeywords = get_the_tags();
$twkeywords = ”;
$wpkeywords_count = count( $wpkeywords );
$i = 0;
foreach( $wpkeywords as $twkeyword ){

if($i){
$twkeywords .= ‘ OR ‘;
}
$i++;
$twkeywords .= $twkeyword->name;
}
?>
<script type=”text/javascript”>
//<![CDATA[

$j=jQuery;
$j(document).ready(function() {
search($j().val());
});

function search(word) {
$j.ajax({
type: "GET",
url: "http://search.twitter.com/search.json",
data: {
"q": "<?php echo $twkeywords; ?>",
"rpp": 10,
"lang": "ja"
},
dataType: "jsonp",
success: function(data) {
$j("#result").empty();
$j.each(data.results, function(i, item) {
$j("#result").append($j('<div><a href="http://twitter.com/'+item.from_user+'" target="_blank"><img src="'+item.profile_image_url+'" width="36" height="36" />'+item.from_user+'</a></div><div>'+item.text+'</div>'));
});
}
});
}
//]]>
</script>
<div id=”result”>Twitter読み込み場所</div>

jQueryはWordpressでは標準で読み込まれるので、ちょっと使っていじろうと思ったら、動かない。
エラーを見ると

エラー: $ is not defined

の表示が。

検索してみたら、prototypeなど同じく「$」を使うプログラムと競合しないように
”jQuery.noConflict();”が使われている時に出るエラーだそうです。
wordpressのheadタグ内で読み込まれるjquery.jsを見てみたら、それを最後の行に発見。

解決策としては、「$」の代わりにjQueryを使えばいいということだけど、
長いので改めて

$j = jQuery;

と定義して使用しました。

prototypeとかほぼ間違いなく使わないだろうから、

$ = jQuery;

でもいいと思うけど、一応。

ちなみにjQueryは、通常、header.phpに書かれているwp_head()関数で読み込まれるので
それが無いと読み込まれません。しかも他のプラグインも動かないことが多いです。
自分でテンプレート作るときは忘れないように入れましょう。

思いつきで作りましたが、そのまま消滅させるのも僅かにもったいないので、 寝る前に公開しておきます。 入力した文章を英訳、もしくは和訳して、そのままTwitterに送れるツールです。 翻訳してTwitter（http://tw.17sai.jp/） サーバーの共有SSLが使えるので、鍵マークが好きな方はどうぞ↓。 翻訳してTwitter[SSL](https://ss1.coressl.jp/tw.17sai.jp/) ※TwitterのID、PASSを使う場合は、何かあっても責任取れないので、気をつけて使わないで下さい。 Googleの翻訳できるAPIをいじってみたら、文章、特に日本語が超約というかダメ約で、 変な方向に面白かったので、最近流行のTwitterとあわせてみたらいいんじゃね？っていう そんな感じの作りはじめだったと思います。覚えてないけど。今考えた。 英語の勉強に使えるってのは、作りはじめてから、さらにしばらくして思いついた後付設定です。 前述したように、超約なのであんまり役に立たないと思います。 英語ってなってるけど、GoogleAPIの方で対応してるのは一応選択できます。 正しく訳せているのかは全く分かりませんが。 どれだけの情熱と手間がかかっているかは、デザインとタイトルを見ればお分かりいただけると 思います。 その分、セキュリティやバグが心配なので、クッキーも使ってないし、TwitterのID＆PASSも 受け次第保存などはせず、そのまま送ってます。 どうこうしてほしいとか、詳しい仕組み知りたいとかあったらコメントで教えてください。

みつりんなどAmazonAPIで取得した情報を貼り付けるjavascriptのタグを作るときに いろいろ試したんですが、やっぱりdocument.writeは使わない方がいいですね。 そこでページの描画が止まってしまいイライラします。 試行錯誤の結果、貼り付けタグにscriptタグだけでなく、id付きのdivも一緒に発行し、 document.getElementById(“id名”)でその中に流し込むのが良さそうです。 divの中身には、テキストリンクなどを書いておけば、javascriptが動かない環境や、javascriptが読み込めなくなっても、 最低限の情報は確保できるし、空divじゃなくなるのでエラーも出ませんしね。 そして、実行するタイミングは、下記のページを参考にwindow.onloadに追加する形で。 ページの描画が邪魔されないので高速です。 イベントに処理を追加する ↑これは、いろいろな所で応用が利きますので覚えとくと便利です。 サンプルに週刊少年マガジンRSScheckerで使っているものを以下に。 Read More…

現在主流のjavascriotのライブラリjqueryの使い方とそれを用いたAJAXの説明本。 いまいち使いづらいAmazonのリンクや貼り付けタグを生成する自作自分用プログラム（みつりん）に 流行のAJAXとjqueryを使ったら凄いよくなるんじゃないかと、勉強用に購入。 画面の読み込み直しは無い方がいいですよね。 近々amazonの認証が必要になりそのための改修も必要なので、ついでにやっちゃえというのもあり。 でも、秋葉原の書泉で立ち読みした時から気づいたけど、タイトルのAJAX関連のものはちょっとしかなく、 ほとんどがjqueryの説明でした。まあ読み込んだりするのに必要な分は十分書いてありますけど。 そのおかげで、jqueryの凄さと使い方が帰宅中の電車の中でなんとなくつかめました。 jquery関係はHPも充実してるけど、それを読むだけではイメージしづらくやる気にならなかったんですが、 この本は分かりやすいサンプルと説明がしつこいくらい豊富で、簡単にイメージし理解することが出来ました。 使いこなせてきたら、現在妄想中のWordpress用のamazonプラグインのアイデアも実行したいと思います。 脳内的には、面倒くさがりな私にとってかなり便利なプラグインになる予定です。