@MIKAGE014

2011 .06 .11

第 9 回 山 口 県 WEB 勉 強 会

ATND 地域検索つくったよー1

イ ン フ ラ エ ン ジ ニ ア 5 年 → 転 職Linux , So lar i s で イ ン タ ー ネ ッ ト シ ス テ ム の 設 計 ・ 構 築

プ ロ グ ラ マ 3 年 目PHP + Postgresq l で 業 務 系 WEB シ ス テ ム の 設 計 ・ 構

築

ブ ロ グhttp : / /d .hatena .ne . jp /mikage014/

Twi t ter : @mikage014← こ の アイ コ ン が 目 印 で す

About Me

１ ． エ ピ ロ ー グ

２ ． 勉 強 会 と ATND

３ ． ATND 地 域 検 索 の 紹 介

４ ． 開 発 環 境 ・ フ レ ー ム ワ ー ク ・ ラ イ ブ ラ リ

今日話すこと

4

エピローグ

２０１０ねん１０がつごろ5

さえき「アテンドのえーぴーあいをつかってなにかつくってみない？」

みかげ「じゃあぐーぐるどっくで」

なんかいかやりとりして

とちゅうでさえきさんのおうとうがなくなったり、

としあけにプロトタイプができたりして、

ぷろとたいぷ6

２０１？ねん？？がつごろ7

・・・そのままわすれられた。

あの日見たＡＰＩの名前を僕達はまだ知らない。　～完～

8

勉強会と ATND

勉強会とは9

勉強するキッカケを手に入れる場　　あれずげえ、おれもやってみたい。モチベーション↑ ↑

○○ に詳しい人とつながる場

プレゼンや LT をすることによって知識を形にする場　　説明できないのはよくわかってないということ

ギブアンドテイクの世界　　自分も○○なら一番を目指す。ものすごくニッチでもいい

懇親会が本番

ATND とは10

勉強会界隈でよくつかわれているイベント告知サイトex. http://atnd.org/events/15712

特徴• OpenID でログインできる

　　 Twitter 、 Google 、 Mixi 、 Yahoo 、はてな、 Livedoor 、 Flickr 、 etc.

• 検索用の ATND API が提供されている

• 連絡手段がちょっと弱い（メール登録が必須じゃないので…ドタキャン問題

ATND 以外のイベント告知サイト11

勉強会界隈でよくつかわれているイベント告知サイト

ATND の他には…

こくちーずhttp://kokucheese.com/

PARTAKEhttp://partake.in/

Twiplahttp://twipla.jp/

… 申し込みフォーム、名簿管理が充実

… Twitter 連携　　 NoSQL(Cassandra) で運用されていて　　技術的に興味深い

… 　 Twitter 連携が強力。　　 DM 送付、参加者リスト作成　　 Twitter オフでよく使われている

12

ATND 地域検索の紹介

なぜ ATND ？13

検索用の ATND API が提供されている

＝ユーザーが望むイベント検索サイトが作れる

＝検索データを返すから表示は好きにしていいよ

ATND API リファレンス　 http://api.atnd.org/

ATND 検索サイト（ライバル）14

ATND カレンダー検索http://utf-8.jp/tool/atnd/search.html

ATND 検索http://atnd-kensaku.net/

非公式 ATND マップ（仮）http://kinokoru.com/atnd/

upmeetuphttp://upmeetup.appspot.com/

… カレンダー表示

… 一覧・カレンダー・ GoogleMap

… GoogleMap 上に吹き出し表示

… 人気順、新着順など

ここを変えたい15

• キーワードを入れるのが面倒• 各県のイベントを見たい• 開催日順に見たい• カレンダーで見たい• 地図上で見たい• Google カレンダーに登録したい

作りました！16

• キーワードを入れるのが面倒　→　ジャンルを選ぶだけ• 各県のイベントを見たい　→　県を選ぶだけ• 開催日順に見たい　→　日付順に並べました• カレンダーで見たい　→　カレンダー表示• 地図上で見たい　→　地図にピンを配置• Google カレンダーに登録したい　→　カレンダーに登録ボタン

ATND 地域検索　 http://atnd.granite.jp/

17

開発環境・フレームワーク・ライブラリ

開発環境・フレームワーク・ライブラリ18

• 開発環境• Xampp (Apache+PHP)• Mery ( テキストエディタ )• Subversion ( バージョン管理、デプロイ )

• ライブラリ・フレームワーク• CodeIgniter (PHP フレームワーク )• ATND API (ATND データ取得 )• GoogleMap API (GoogleMap 表示 )• jQuery• jQuery UI ( タブ表示 )• FullCalendar (jQuery プラグイン：カレンダー表示 )• TableSorter (jQuery プラグイン：タイムテーブル表示 )

サーバ・ネットワーク19

• サーバ• みかげクラウド ( 自宅サーバ / 録画 / エンコ兼 )• Core i5 2400S (2.5/3.3GHz 4C/4T 65W)• Intel 160GB SSD + 2TB HDD x2• CentOS on VMWareServer

• ネットワーク• wakwak ＋ i-revo ( 固定 IP)• granite.jp 今月 ValueDomain に移管しました

• 維持費 7980 円 → 2980 円• さえき亭と IX-2015 を介して VPN で繋がっている

• VPN 経由の PT1 で山口県のニュースが見れる• 今年中に IPv6 対応したい

ここが大変だった20

• ATND の検索結果が結構てきとう

• 検索結果が多い場合、イベントがこぼれる• 地域、ジャンル、日時で絞って対応

• 日付指定しても他の日が混じる• しょうがない

• 検索結果が日付順に並んでいない• はじめは PHP で並べ替え　→　 TableSorter にお任せ

• キーワード検索が全文検索しかない• 「福島県」で検索しても本文に混じっているとヒット• ex. 福島県応援イベント！東京飲み　とか

ここが大変だった21

• どこまで PHP でどこまで JavaScript でやるか

• はじめは PHP側でゴリゴリ書いていたが、　最終的にはほとんど JavaScript側に記述

　地図、カレンダー、タイムラインを切り替えられるように　データは一括で JavaScript側で持つ

• 最適なところは要件次第。やってみないとわからない

ここが大変だった22

• 慣れない JavaScript

• jQuery単体で使うことはあったけど GoogleMap との連携は初めて

• スコープが理解できると読み解きやすくなった　　どこから実行されるか読めるようになればこっちのもの

ここが大変だった23

• PHP から JavaScriptへ変数の受け渡し1. ATND API から JSON で受け取り2. PHP 配列に戻して加工3. JSON に変換して Smarty テンプレートにアサイン4. JavaScript の変数に代入

ex. var data = {/literal}{$event_list_json}{literal};

• JavaScript コンソールが役に立った（ Alert デバッグから進歩）• Chrome なら Ctrl+Shit+J• Alert() の代わりに Console.log()• 配列もダンプしてくれる

JavaScript コンソール24

（・∀・）ｲｲ !!

25

今後の展望など

今後の展望26

・次回WEB 勉強会が 8 月予定なので　開発系のイベントを 7 月に開催？

・ WEB API を使ってみる？　　 Twitter, ATND, GoogleMap, etc.

・ もくもくと開発？

・ Vim を極める？

今後の展望27

・山口県のイベントカレンダーを作りたい。　　ないようで結構ある。知らないだけ

あの日見たイベントの名前を僕達はまだ知らない。

・イベントの登録管理機能を付けてパッケージ化とか

• Ustream 配信の請負をセットにするとかex. ついすと http://www.twistt.tv/

28

ご静聴ありがとうございました

@MIKAGE014

2011 .06 .11

第 9 回 山 口 県 WEB 勉 強 会

使用画像http://piapro.jp/t/bvvK