footmark

ひよっこエンジニアの足跡

ホームページに自分のツイートを表示する(埋め込み編)

今回は、前回前々回と扱ってきたツイートをホームページに埋め込んでみます。

どうやってツイートをスクロールさせるか

そもそもこの企画(?)はきゃりーぱみゅぱみゅのホームページかっけえ!!!から始まりました。
きゃりーぱみゅぱみゅのホームページをリスペクトするというならば、ツイートはスクロールさせなければいけません。

スクロールくらいならHTMLのmarqueeタグでも事足りそうですが、今回はjQuery Marqueeを使用することにします。
iPhoneiPadにも対応しているようです。
嬉しいですね。

いざ、スクロール

早速使ってみます。

The Silky Smooth Marquee
からダウンロードして、以下のように読み込み。

<!-- <head>に記述 -->
<script type="text/javascript" src="js/jquery.marquee.js"></script> // ファイルはリネームし、任意のフォルダに格納してください
<script>
    $(function () {
        $('p.ticker').marquee();
    });
</script>

これで準備は完了です。
それでは取得したツイートをスクロールさせてみます。

// 埋め込み部分
<p class="ticker">
    <?php
    require_once 'yumeochis_tweets_getter.php'; // 前回までの処理を関数化しました
    print(get_tweets()); // ツイートをstring型で返す関数get_tweets
    ?>
</p>

HTMLに組み込むので、ソースコード全体は長いのですが、該当箇所だけを抜き出すとこれだけです。

手を動かす前は、PHPからJavaScriptへの値の受け渡しってどうやるんだっけなんて思ってましたが、やってみたらそのままでした。

最後に

焼肉軍団から誕生日メッセージが届きました!!!
ありがとう!!!
22歳、まっすぐに生きていけたらなあ、まっすぐに生きていきたいなあと思います!!!

f:id:yuk4420:20140429055402j:plain