jQueryがものすごく便利だったお話
UT Startup Gymというグループに参加しています。UT Startup Gymはウェブサービスをスタートアップするための勉強会で、今は第3期目を迎えています。
第1期、第2期といくつかのサービスがスタートアップしました。私も第2期にちょっとだけ参加させていただいたのですが、どこかプロジェクトに参加するわけでもなく勉強会だけ参加していた感じです。今期は私も何か作ってみたくて参加しています。
そういうわけで、まずは、ウェブサービスを作るための勉強です。UT Startup Gymでは毎週初心者のための勉強会をやっています。昨日は PHP でかんたん Twitter アプリをつくるでした。
私は第2期にも参加していたのでTA的に参加です。https://api.twitter.com/1/statuses/user_timeline.json?screen_name=appresso_dstnというURLでappresso_dstnのユーザータイムラインが取得できます。このままだとJSON形式ですので、htmlで見やすい形に整形したものを表示するPHPのプログラムを作るというのが目標です。
勉強会は初心者のひともたくさんいるし、環境から作っていくという感じでなかなか大変でしたが、大体の人がプログラムを動かすところまで出来たので大成功です。
勉強会が終わった後でも、数人が残ってプログラムを更に発展させるということをやっていて、とても活気を感じられました。
そのプログラムを発展させる例なのですが、このままではユーザー名が固定なのでテキストボックスからユーザー名を入力してJavaScriptで動的に表示を切り替えるということをやりました。
残っていた人は私も含めてみんなHTML、JavaScriptの素人ばかりでした。最初は動的に切り替えるというのが難しそうだったので、Submitボタンを押したらリロードしてユーザーのタイムラインを切り替えるということをやりました。
そして、ここからが大変です。今度はJavaScriptでタイムラインの中身を取得して動的に切り替えます。
これにはAJAXという技術が必要だということが分かっているのですが、どうやればいいのかわかりません。XMLHttpRequest というのを使えばAJAXを実現できるということも分かっているのですが、面倒くさそうだし、難しそうです。
そこでjQueryというAJAXを簡単に実現するライブラリがあるので、jQueryを使ってみました。
結論から言うと、とても簡単に実現できました。PHPでタイムラインを表示する部分だけを別のプログラムに分離して、jQueryをつかって挿入するだけです。
という要素の中にタイムラインを挿入したければ、JavaScriptで
という呼び出しをするだけです。
これで動的にページが更新されたときには一同感動しました。これなら自分たちでもやれる!という実感を持つことが出来ました。
いまさらですが、jQueryはとても便利なライブラリです。UT Startup Gymでやるプロジェクトの中でも積極的に使っていこうと思います。
※ 今回のプログラムの全体は後日アップしようと思います。
第1期、第2期といくつかのサービスがスタートアップしました。私も第2期にちょっとだけ参加させていただいたのですが、どこかプロジェクトに参加するわけでもなく勉強会だけ参加していた感じです。今期は私も何か作ってみたくて参加しています。
そういうわけで、まずは、ウェブサービスを作るための勉強です。UT Startup Gymでは毎週初心者のための勉強会をやっています。昨日は PHP でかんたん Twitter アプリをつくるでした。
私は第2期にも参加していたのでTA的に参加です。https://api.twitter.com/1/statuses/user_timeline.json?screen_name=appresso_dstnというURLでappresso_dstnのユーザータイムラインが取得できます。このままだとJSON形式ですので、htmlで見やすい形に整形したものを表示するPHPのプログラムを作るというのが目標です。
勉強会は初心者のひともたくさんいるし、環境から作っていくという感じでなかなか大変でしたが、大体の人がプログラムを動かすところまで出来たので大成功です。
勉強会が終わった後でも、数人が残ってプログラムを更に発展させるということをやっていて、とても活気を感じられました。
そのプログラムを発展させる例なのですが、このままではユーザー名が固定なのでテキストボックスからユーザー名を入力してJavaScriptで動的に表示を切り替えるということをやりました。
残っていた人は私も含めてみんなHTML、JavaScriptの素人ばかりでした。最初は動的に切り替えるというのが難しそうだったので、Submitボタンを押したらリロードしてユーザーのタイムラインを切り替えるということをやりました。
そして、ここからが大変です。今度はJavaScriptでタイムラインの中身を取得して動的に切り替えます。
これにはAJAXという技術が必要だということが分かっているのですが、どうやればいいのかわかりません。XMLHttpRequest というのを使えばAJAXを実現できるということも分かっているのですが、面倒くさそうだし、難しそうです。
そこでjQueryというAJAXを簡単に実現するライブラリがあるので、jQueryを使ってみました。
結論から言うと、とても簡単に実現できました。PHPでタイムラインを表示する部分だけを別のプログラムに分離して、jQueryをつかって挿入するだけです。
<div id="timeline"/>
という要素の中にタイムラインを挿入したければ、JavaScriptで
$("#timeline").load("timeline.php", {username: "appresso_dstn"});
という呼び出しをするだけです。
これで動的にページが更新されたときには一同感動しました。これなら自分たちでもやれる!という実感を持つことが出来ました。
いまさらですが、jQueryはとても便利なライブラリです。UT Startup Gymでやるプロジェクトの中でも積極的に使っていこうと思います。
※ 今回のプログラムの全体は後日アップしようと思います。