「東京お花見スポット.com」の作り方のご紹介

このページでは、このサイト「東京お花見スポット.com」の作り方をご紹介いたします。
「東京お花見スポット.com」は、以下のような方法で、サイトが作られています。

WEB制作の経験のある方には、何か一つでも参考になることがありましたら嬉しいです。
また、このサイトをご利用いただいた方で、WEB制作の無い方でも、ホームページがどのように作られているかを、少しでもご理解いただいて、WEBを作るということに、もし興味を持っていただけましたら嬉しいです。

インターネットは、大きなテーマはもちろん、ニッチな分野でも、必要としている人がいれば、コミュニティが成り立ちやすいツールだと思いますし、情報を発信しやすく、情報の収集もしやすいツールだと思います。
このお花見のサイトもそのような想いから制作しました。
サイトの内容だけでなく、サイトの作り方でも、何か一つでもお役に立つことがあれば、WEBの作り手としてこれ以上嬉しいことはありません。

では、前置きが長くなりましたが、このサイト「東京お花見スポット.com」の作り方をご紹介いたします。

(1)概要
まず、このサイトは、オープンソースCMSの「WordPress」をプラットフォームとすることで、制作しています。

そして、サイトのデザイン部分やシステム部分は、WordPressのデフォルトテーマである「TwentyTen」の子テーマ、WordPressのプラグイン、jQueryのライブラリ、各会社が提供しているWEBAPI、を組み合わせることで作成しています。

つまり、WordPressをPHPのフレームワークのように使い、WordPressの管理画面からMySQLのデータベースにデータを入れて、そのデータと関連する情報を、jQueryのライブラリと各会社が提供しているWEBAPIから自動取得して、出力データを「TwentyTen」の子テーマとWordPressのプラグインで整える、という作り方をしています。

言葉で説明すると、とても難しいことをしているように思われるかもしれませんが、実際に制作や作業していることはとてもシンプルで簡単なことです。例えば、このサイト「東京お花見スポット.com」は、実質2日間で完成してリリースしています。
もし全てを自分一人でゼロから制作をしていたら、確かに多くの時間が掛かるかもしれません。しかしながら、オープンソースCMSであるWordPressをプラットフォームとして上記を組み合わせて制作することで、その工程を大幅に短縮することが可能になります。

(2)オープンソースを活用して組み合わせる
オープンソースとは、誰でも自由に入手して活用することのできるソースコードのことを言います。詳しくは、Wikipediaのオープンソースの説明などをご覧ください。

このサイトは、オープンソースを組み合わせることで制作しています。
WordPress、それに付随するプラグイン、jQueryも、全てオープンソースです。

車輪の再発明」という言葉がありますが、確立している技術や解決方法があれば、それを活用するのが一番だと思います。
オープンソースの場合、その技術や解決方法を、無料で活用することができます。
そして、オープンソースの場合、多くの人が開発に関わり、利用されているので、セキュリティの改善やバグの修正なども迅速に行われるケースが多く、むしろ安心な場合が多いです。また、検索をすれば、多くの事例や使い方やカスタマイズ方法やソースコードなどの情報が手に入るので、解決方法も簡単に見つかることが多いです。
これらのメリットが、商用CMSより優れている点だと思います。

このサイトが、短時間でプログラムを整えることができたのも、オープンソースを組み合わせることができたからです。

請負案件の場合、先方の要望により商用CMSを活用する必要が出てくる場合もありますが、自社運営サイトや個人でサイトを制作する場合には、商用CMSよりもオープンソースCMSをベースにして、その上で他のオープンソースも組み合わて活用する方が、短時間で無料で制作&運営が可能で、かつ、情報も多くインターネット上にあるので、便利だと、個人的にはオススメです。

また、車輪の再発明をしないためにも、どのようなオープンソースがあって、どのような機能があり、どのような使い方ができるのかを、知る、ということも、大切なことだと、私自身は考えて、勉強や活動をしています。

(3)「東京お花見スポット.com」で利用しているWordPressテーマ
WordPressでいう「テーマ」とは、WEBのデザインの着せ替えのことを言います。
このサイトは、WordPressをインストールしたデフォルト(初期設定)のテーマである「TwentyTen」の子テーマで作っています。
子テーマの説明については、「WordPress3.0の新デフォルトテーマ「Twenty Ten」をベースに子テーマを作る方法(1) | WordPress(ワードプレス)コミュニティ」をご覧ください。

(4)「東京お花見スポット.com」で利用しているWEBAPI一覧
このサイトで利用しているWEBAPIの一覧は以下の7個です。
Yahoo!デベロッパーネットワーク
楽天ウェブサービス
Google Maps API Web サービス
Livedoor Weather Web Service
Twitter API
ホットペッパーWebサービス
じゃらんWebサービス

(5)「東京お花見スポット.com」で利用しているWordPressのプラグイン一覧
このサイトで利用しているWordPressプラグインの一覧は以下の22個です。
.html on PAGES
Akismet
Breadcrumb NavXT
Business Calendar
Contact Form 7
Custom Field Template
Executable PHP widget
FE Advanced Search
Feedback Champuru
Get Recent Comments
Ktai Style
My Category Order
Popular Posts
Post-Plugin Library
Search Everything
Similar Posts
StatPress
Weather Hacks
WordPress Database Backup
WP Multibyte Patch
WP No Category Base
WP Social Bookmarking Light
WP Super Cache

(6)まとめ
いかがでしたでしょうか?
つまり、具体的には、オープンソースを活用して、WordPressをプラットフォームとして、TwentyTenの子テーマをベースに、上記のjQueryとWEBAPIとプラグインを、ポンポンと足していけば、短時間のうちにサイトができる、ということです。
「東京お花見スポット.com」は、このレベルのサイトではありますが、その仕組みを応用すれば、より上級のサイトにもチャレンジすることはもちろん可能です。

もし上記のことで、不明点があれば、Twitter@khoshinoまで、声を掛けていただければ、分かる範囲内でお答え致します。

(7)情報の調べ方について
基本的には検索をすれば情報は出てくると思います。そのためには、多くの人が活用しているオープンソースの方が、情報が多く出てくると思います。
また、私はインターネット上の情報だけでなく、書籍を買って読む派です。書籍も情報がまとまっていて、個人的には好きです。
その他には、今は、無料や場所代だけのIT系のカンファレンスや勉強会も多くあります。そのような場所に足を運ぶと、詳しい人と知り合えて、文字情報以外の情報を知ることができることも多いと思います。
ちなみに、私自身は、多くのIT系のカンファレンスや勉強会に足を運んでいます。
ネスト赤羽IT勉強会プログラミング実習室WordBenchWordCampオープンソースカンファレンス、その他、PHPやiPhoneアプリやAndroidアプリなどのカンファレンスや勉強会によく行きます。
もし何かの機会で同じ会場になることがありましたら、お気軽にお声掛けいただけましたら嬉しいです。

サイトの更新履歴

サイトの更新履歴です。
2011年3月29日(火)
作り始める。
WordPressのデフォルトテーマTwentyTenの子テーマ作成やプラグインのインストールなどを行なう。
2011年4月1日(金)
3月30日と31日は、出先の仕事や、新しいオフィスの契約や立会いがあり、作業できず。
4月1日の午後の時間で、カスタマイズなどを行なう。
2011年4月2日(土)
一応の完成をして、リリースする。
2011年4月9日(土)
仕事が忙しく、一週間サイトを更新できず、ようやく時間ができて、モバイルサイトを実装する。東京の桜も満開に近づく。

今後の実装予定

以下が今後の実装予定です。お花見という時期的なモノもありますので、上から順番に実装していって、仕事などの関係で実装が間に合わなければ、来年のお花見シーズンに対応していきたいと思っています。
(1)
モバイルサイトにも対応させる。(WordPressのプラグイン「Ktai Style」をカスタマイズすることで実装予定。)
→2011年4月9日(土)に実装しました!
(2)
スマートフォンサイトにも対応させる。(WordPressのプラグイン「Ktai Style」をカスタマイズすることで実装予定。)
→実装しました!
(3)
お花見関連についてつぶやくTwitterのBotを作る。
(4)
WordPressに入っているMySQLのデータから取得して、ブログパーツを作る。
(5)
WordPressに入っているMySQLのデータから取得して、iPhoneアプリを作る。
(6)
WordPressに入っているMySQLのデータから取得して、Androidアプリを作る。(←上に挙げた実装予定のうち、Androidアプリ以外は制作経験がありますが、Androidアプリは作ったことが無いので、これから勉強をして来年のお花見シーズンには間に合えばと思います。ですので、Androidアプリに関しては2011年のお花見シーズンには間に合いません。)

「東京お花見スポット.com」の作り方のご紹介に寄せられた口コミ情報

    技術,wp

    hatakazu93さんの口コミ情報 - 2011年10月19日 00時17分

    @komari http://t.co/9V0AQAoO こんな感じですww

    snicker_jpさんの口コミ情報 - 2012年3月31日 14時31分