I aim to creator.

デザインや組み立てるだけじゃ楽しくないので機能的なテンプレートを、

作ろうっと思い始めています。

でも自分は、PHPの本を持っているがまだ読んでない状況で、

PHPやCGIなど組めないので、

jQueryやjsを使って何か機能的なサイトは、作れないのか?

っと思いjsもうまく組めないのですが

Twitterの投稿をサイトに表示してみました。

今回その方法を教えたいっと思います。

多少めんどくさい仕組みですが慣れれば簡単です。

まずTwitterの投稿を表示するのに必要なリンクを取得します。

https://api.twitter.com/1/statuses/user_timeline/アカウント名.json?callback=?&count=10

このURLのアカウント名っと言う部分を変更します。

この場合僕の場合は、アカウント名をaqua2117822と変更します。
アカウント名を書き終わったらちゃんとリンクされるか試してみましょう。

編集したURLをブラウザーで、開いて変なコードがいっぱい出たらokです。

そしたらそのURLをメモしておいて下さい。

次にjsコードを書きます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $.getJSON('ここに取得したURLを入力', function(json){ var html = '' for (var j in json) { var created_at = json[j].created_at.split(' ') if (created_at[2].indexOf('0') == 0) created_at[2] = created_at[2].slice(1) var day = created_at[5] + '.' + created_at[1].replace('Jan','1').replace('Feb','2').replace('Mar','3').replace('Apr','4').replace('May','5').replace('Jun','6').replace('Jul','7').replace('Aug','8').replace('Sep','9').replace('Oct','10').replace('Nov','11').replace('Dec','12') + '.' + created_at[2] html += ' <li><span>☆</span>' + day + '　<a href="ここに自分のTwitterのアカウントURLを入力" target="_blank">' + json[j].text + '</a></li> ' } $("#twitter").html(html) }) </script>


以下の部分にさっき取得したURLを入力します。
$.getJSON('ここに取得したURLを入力', function(json)
僕の場合は、以下の様になります。
$.getJSON('https://api.twitter.com/1/statuses/user_timeline/aqua2117822.json?callback=?&count=10', function(json)


次に以下の部分を編集して下さい。
html += ' <li><span>☆</span>' + day + '　<a href="ここに自分のTwitterのアカウントURLを入力" target="_blank">

この部分は、自分のTwitterのページのURLを入力して下さい。

最後に投稿するdiv要素を作ります。
今作ったjsでは、「$("#twitter").html(html)」っとなっているので、
<ul id="twitter"></ul>っと入力します。

これで、完了です。

Twitterの投稿は、liの中に入力されます。
デザインもカスタム可能なので、皆さんも試してみて下さい。

以上です。