水族館コミュニティの作り方のご紹介

このページでは、水族館コミュニティの作り方をご紹介いたします。
水族館コミュニティは、以下のような方法で、サイトが作られています。

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

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

では、前置きが長くなりましたが、水族館コミュニティの作り方をご紹介いたします。

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

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

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

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

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

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

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

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

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

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

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

(4)水族館コミュニティで利用しているWebAPI一覧
このサイトで利用しているWebAPIの一覧は以下の通りです。
Webサービス by Yahoo! JAPAN
楽天ウェブサービス
Google Maps API Web サービス
MarkerClusterer for Google Maps v3
Panoramio API
Picasa Web Albums Data API
Livedoor Weather Web Service
Wikipediaデータベース
Twitter API
バリューコマース Developer Center
ホットペッパー Webサービス
じゃらんWebサービス

(5)水族館コミュニティで利用しているWordPressのプラグイン一覧
このサイトで利用しているWordPressプラグインの一覧は以下の28個です。
.html on PAGES
001 Prime Strategy Translate Accelerator
Akismet
Contact Form 7
Custom Field Template
Executable PHP widget
FE Advanced Search
Feedback Champuru
Get Recent Comments
Hello Wapuu
Ktai Style
Lightbox 2
Livedoor Weatherプラグイン(自作・非公開)
My Category Order
Popular Posts
Post-Plugin Library
ProductAPI Simple List(自作・非公開)
Search Everything
ShowID for Post/Page/Category/Tag/Comment
StatPress
SyntaxHighlighter Evolved
WordPress Database Backup
WP-PostRatings
WP Hyper Response
WP Multibyte Patch
WP Social Bookmarking Light
WP Super Cache
WP Total Hacks

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

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

(7)情報の調べ方について
基本的には検索をすれば情報は出てくると思います。そのためには、多くの人が活用しているオープンソースの方が、情報が多く出てくると思います。その点、このサイトのベースとなっている「WordPress」は日本でのシェアはもちろん、世界でのシェアも高く、不明点があれば「WordPress (不明点)」などのキーワードで検索すれば、たいていのことは解決します。WordPressの場合、日本語公式サイトのCodexというwikiやフォーラムという掲示板も充実していますので、ご参照ください。

また、私はインターネット上の情報だけでなく、書籍を買って読む派です。書籍も情報がまとまっていて、個人的には好きです。その点、「WordPress」は日本語の書籍だけでも30冊近くあります。従いまして、本で調べるにも適しています。

その他には、今は、無料や場所代だけのIT系のカンファレンスや勉強会も多くあります。そのような場所に足を運ぶと、詳しい人と知り合えて、文字情報以外の情報を知ることができることも多いと思います。
「WordPress」の場合、WordBenchというWordPressに詳しかったり好きだったりする人達が集まる地域コミュニティがあります。WordBenchは全国各地で毎月数回は行われているほど活発です。大きなイベントとしては、WordCampというイベントもあり、こちらは世界中で行われていて、日本でも年に数回行われており、1回で500人以上が集まるイベントです。
私自身も、多くのIT系のカンファレンスや勉強会に足を運んでいます。
ネスト赤羽IT勉強会プログラミング実習室WordCampWordBenchWordCampオープンソースカンファレンス、その他、WEB制作やプログラムやデザインやiPhoneアプリやAndroidアプリなどのカンファレンスや勉強会によく行きます。
もし何かの機会で同じ会場になることがありましたら、お気軽にお声掛けいただけましたら嬉しいです。

バリューコマースEXPO2011でお話ししました

お声掛けいただきまして、
セミナー | バリューコマースEXPO2011公式サイト
にて、お話しました。
その時に、この水族館コミュニティをWebAPIとスマートフォン対応の事例としてご紹介しました。
スライドも約200枚作りまして、公開しましたので、もし良かったら、こちらもご参考ください。
WordPressを使って、WebAPI連携&スマートフォン最適化をしてみよう! | WordPress(ワードプレス)コミュニティ

水族館コミュニティの作り方のご紹介に寄せられた口コミ情報

    今日のセミナーで使用したプラグインがすべてのってる笑。http://t.co/DY3NXOYW

    take566さんの口コミ情報 - 2011年10月1日 17時02分

    今日のセミナーで使用したプラグインがすべてのってる笑。

    take566さんの口コミ情報 - 2011年10月1日 18時24分

    水族館コミュニティの作り方のご紹介 | 水族館コミュニティ – http://www.japan-aquarium.com/web…

    take566さんの口コミ情報 - 2011年10月1日 18時24分

    昨日のバリューコマースEXPOのWordPress&API&スマホ対応のスライドはココ http://t.co/DLcGGuqP サンプルサイトの作り方や使ったプラグインはココ http://t.co/pmNkwMie にそれぞれ載っていますので、ご参考ください。 #VCEXPO

    khoshinoさんの口コミ情報 - 2011年10月2日 10時49分

    昨日のバリューコマースEXPOのWordPress&API&スマホ対応のスライドはココ http://t.co/DLcGGuqP サンプルサイトの作り方や使ったプラグインはココ http://t.co/pmNkwMie にそれぞれ載っていますので、ご参考ください。 #VCEXPO

    8noheさんの口コミ情報 - 2011年10月2日 10時49分

    昨日のバリューコマースEXPOのWordPress&API&スマホ対応のスライドはココ http://t.co/DLcGGuqP サンプルサイトの作り方や使ったプラグインはココ http://t.co/pmNkwMie にそれぞれ載っていますので、ご参考ください。 #VCEXPO

    zetta_segmentさんの口コミ情報 - 2011年10月2日 10時58分

    水族館コミュニティの作り方のご紹介 | 水族館コミュニティ: http://t.co/ZGLlS434 めも

    masashi_385さんの口コミ情報 - 2011年10月2日 14時40分

    昨日のバリューコマースEXPOのWordPress&API&スマホ対応のスライドはココ http://t.co/DLcGGuqP サンプルサイトの作り方や使ったプラグインはココ http://t.co/pmNkwMie にそれぞれ載っていますので、ご参考ください。 #VCEXPO

    zawapapa7さんの口コミ情報 - 2011年10月2日 19時26分