戦うWEBディレクターのブログ

五反田に住む戦うWEBディレクターのブログ

jQuery Mobileでスマートフォン用の飲食店検索サイトを作ってみた!

4ヶ月振りのブログの更新です。
最近、独学でプログラムの勉強をはじめまして、こんなサイトをつくってみました。

かんたん!飲食店検索

QRコードはこちら

キーワードとエリアとページ数を入力すると、飲食店の一覧と店舗情報が表示される、スマートフォン用のWEBサイトです。
これといって全然大したサイトでは無いので何ですが、このサイトを作った経緯と、参考にしたサイトをご紹介したいと思います。

プログラムの勉強をはじめた経緯

自分はWEBディレクターをやっていますが、全くプログラムが書けませんでした。
それで、プログラマーに対して憧れや劣等感をもっていた訳で、そんなある日、このエントリーを見て衝撃をうけました。
自分でWEBサービスを作りたいと思っている人へ
WEBと関係ない仕事をしている人が、たった4ヶ月で、こんなスゴいサイト(完全に一致|AV女優類似検索システム)を作っている!
なのに、何も作れない自分が恥ずかしくなった訳で、そこで自分もひとりWEBサービスをつくる決意をしました。

まずは「javascript」から

まずはじめに、「プログラム」や「入門」といったキーワードで検索しました。すると、次のサイトがヒットしました。

とりあえず、このサイトで「JavaScript」や「Ajax」「API」の基礎を学びました。

jQuery」と「Yahoo! Pipes」は簡単かも!

それから、ちまたで「jQuery」が流行っていること知りました。
jQuery」で動的なサイトを作りたいと思い、いろいろ検索したところ、次のサイトがヒットしました。

これらサイトで「JSON」「Yahoo! Pipes」の存在を知り、「jQuery」で簡単に「API」を呼び出す方法を学びました。

jQuery Mobile」でスゴいかも!

jQuery」を学んでいるときに、会社の近くで「jQuery Mobile」の無料セミナーがあったので、気軽な気持ちで参加してみました。

このセミナーが「目からウロコ」で、「jQueryMobile」を使うと、マークアップだけで、スマートフォン用のデザインやアニメーションが作れることを知りました。

jQuery Mobile」でトラブル!

ところが、いざ「jQuery Mobile」で動的なサイトを作ってみると、スタイルを適用させることができず、とても苦労しました。
そこで、「jQuery Mobile」で検索しまくって、下記のサイトがヒットしました。

これらのサイトから、「jQuery Mobile」で動的なページにスタイルを反映させるには、.page()や.removeData("page")を使うことを学びました。

最後に

という訳で、まだまだ知識が浅いので、現段階では、このサイトで精一杯な感じです。
これから、GPSTwitterなど、機能をマッシュアップしていく予定です。
もっとプログラムを勉強して、マッシュアップアワードに応募するのが目標です。
※それにしてもやっぱり、4ヶ月であのWEBサイトを作った人はスゴいなぁ。。。