HTMLとCSSでここまでできる! GAE＆Twitter API開発 (3/5)
2010年05月11日 10時00分更新
変更後のサンプルはどこが変わった？
デザイン変更後のhome.htmlではどこが変わったのか、解説していきましょう。大きく変わったのは以下の3カ所です。
- CSS定義
- HTMLタグの構造
- 表示するTwitter APIデータの追加
CSS定義の変更
提供しているサンプルコードのhome.htmlに記述してあるCSS定義は、
<style type="text/css">
body{
background-color : #ffffff;
}
</style>
というように、背景色を白に指定しているだけの簡単なものでしたが、新しいhome.htmlでは大幅に定義が増えています。これらのCSS定義と、次に説明するHTMLのクラス名やID名の定義が組み合わさって、新しいデザインを実現しているのです。
HTMLタグ構造の変更
CSS定義を追加しただけでは、変更できるデザインにも限界があります。より細かな指定をするためには、HTML側にもクラス名やID名を定義する必要があります。
今回のサンプルで一番分かりやすいのが、「発言を表示する部分のループ」のHTMLです。
サンプルコードのhome.htmlでは、デザイン変更前／変更後ともに <!-- timeline --> ～ <!-- //timeline --> というコメント行の間で、Twitter APIから取得した結果をループ処理しながら1つずつHTMLで出力する、という処理をしています。ただし、変更前のhome.htmlではシンプルなdivタグで出力していたのに対して、変更後のhome.htmlではデザインを適用するために、タグにクラス名が追加されていたり、より複雑な構造になっていたりするのが分かります。
たとえば、今回のhome.htmlの67行目のCSS定義部分にある「tweet」というクラスのCSS定義を見てみましょう。
.tweet{
position :relative;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
width:550px;
height:120px;
text-align:left;
border-bottom:dashed 1px #cccccc;
}
この「tweet」クラスは、127行目の
<div class="tweet">
から、150目の
</div>
という閉じタグまでの範囲のスタイルを定義しています。ピンとこない場合はこのCSS定義にbackground-colorプロパティ（背景色を設定するCSSプロパティ）などを加えてみましょう。tweetクラスを使用した部分にbackground-colorが適用されますので、実際にどの範囲を指しているのか、よく分かると思います。
結果だけをみるとちょっと難しいようですが、1つ1つの定義を見ていけば、HTMLやCSSの基本的な知識があれば理解できる内容だと思いますので、CSSを変えてみたり、あるいはタグを足してみたりして、表示結果がどのように変わるのかを試してみてください。
表示するデータの追加
デザイン変更後のサンプルでは、変更前には無かったTwitterのプロフィール画像（アイコン）が追加され、デザイン上の重要なアクセントになっています。おかげでぐっとTwitterらしくなったと思いませんか？
このアイコンを表示しているのは、デザイン変更後のhome.htmlの131行目、<img src="{{st.user.profile_image_url}}" style="pwidth:48px;height:48px;"/> です。{{st.user.profile_image_url}} の部分で、APIから取得した結果に含まれるアイコン画像のURLをimgタグのsrc属性に適用しています。
今回追加したのはアイコンだけですが、Twitter APIではほかにもさまざまなデータを取得できます。もちろん、データの取得だけでなく『返信』『リツィート』といった機能も追加できます。Twitter APIの他のデータや機能を利用することで、もっと面白い、もっと便利なWebサービスができると思いますので、Twitter API Wikiを参考に試してみましょう。
