Atnd地域検索作ったよー

2,345 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,345
On SlideShare
0
From Embeds
0
Number of Embeds
383
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Atnd地域検索作ったよー

  1. 1. @mikage014<br />2011.06.11<br />第9回山口県WEB勉強会<br />ATND地域検索つくったよー<br />1<br />
  2. 2. インフラエンジニア 5年->転職<br />Linux, Solarisでインターネットシステムの設計・構築<br />プログラマ 3年目<br />PHP + Postgresqlで業務系Webシステムの設計・構築<br />ブログ<br />http://d.hatena.ne.jp/mikage014/<br /> Twitter: @mikage014<br />←このアイコンが目印です<br />About Me<br />
  3. 3. 1.エピローグ<br />2.勉強会とATND<br />3.ATND地域検索の紹介<br />4.開発環境・フレームワーク・ライブラリ<br />今日話すこと<br />
  4. 4. 4<br />エピローグ<br />
  5. 5. 2010ねん10がつごろ<br />5<br />さえき「アテンドのえーぴーあいをつかってなにかつくってみない?」<br />みかげ「じゃあぐーぐるどっくで」<br />なんかいかやりとりして<br />とちゅうでさえきさんのおうとうがなくなったり、<br />としあけにプロトタイプができたりして、<br />
  6. 6. ぷろとたいぷ<br />6<br />
  7. 7. 201?ねん??がつごろ<br />7<br />・・・そのままわすれられた。<br />あの日見たAPIの名前を僕達はまだ知らない。 ~完~<br />
  8. 8. 8<br />勉強会とATND<br />
  9. 9. 勉強会とは<br />9<br />勉強するキッカケを手に入れる場<br />  あれずげえ、おれもやってみたい。モチベーション↑ ↑<br />○○に詳しい人とつながる場<br />プレゼンやLTをすることによって知識を形にする場<br />  説明できないのはよくわかってないということ<br />ギブアンドテイクの世界<br />  自分も○○なら一番を目指す。ものすごくニッチでもいい<br />懇親会が本番<br />
  10. 10. ATNDとは<br />10<br />勉強会界隈でよくつかわれているイベント告知サイト<br />ex. http://atnd.org/events/15712<br />特徴<br /><ul><li>OpenIDでログインできる</li></ul>  Twitter、Google、Mixi、Yahoo、はてな、Livedoor、Flickr、etc.<br /><ul><li>検索用のATNDAPIが提供されている
  11. 11. 連絡手段がちょっと弱い(メール登録が必須じゃないので…</li></ul>ドタキャン問題<br />
  12. 12. ATND以外のイベント告知サイト<br />11<br />勉強会界隈でよくつかわれているイベント告知サイト<br />ATNDの他には…<br />こくちーず<br />http://kokucheese.com/<br />PARTAKE<br />http://partake.in/<br />Twipla<br />http://twipla.jp/<br />…申し込みフォーム、名簿管理が充実<br />…Twitter連携<br />  NoSQL(Cassandra)で運用されていて<br />  技術的に興味深い<br />… Twitter連携が強力。<br />  DM送付、参加者リスト作成<br />  Twitterオフでよく使われている<br />
  13. 13. 12<br />ATND地域検索の紹介<br />
  14. 14. なぜATND?<br />13<br />検索用のATNDAPIが提供されている<br />=検索データを返すから表示は好きにしていいよ<br />=ユーザーが望むイベント検索サイトが作れる<br />ATNDAPIリファレンス http://api.atnd.org/<br />
  15. 15. ATND検索サイト(ライバル)<br />14<br />ATNDカレンダー検索<br />http://utf-8.jp/tool/atnd/search.html<br />ATND検索<br />http://atnd-kensaku.net/<br />非公式ATNDマップ(仮)<br />http://kinokoru.com/atnd/<br />upmeetup<br />http://upmeetup.appspot.com/<br />… カレンダー表示<br />…一覧・カレンダー・GoogleMap<br />…GoogleMap上に吹き出し表示<br />… 人気順、新着順など<br />
  16. 16. ここを変えたい<br />15<br /><ul><li> キーワードを入れるのが面倒
  17. 17. 各県のイベントを見たい
  18. 18. 開催日順に見たい
  19. 19. カレンダーで見たい
  20. 20. 地図上で見たい
  21. 21. Googleカレンダーに登録したい</li></li></ul><li>作りました!<br />16<br /><ul><li> キーワードを入れるのが面倒 -> ジャンルを選ぶだけ
  22. 22. 各県のイベントを見たい -> 県を選ぶだけ
  23. 23. 開催日順に見たい -> 日付順に並べました
  24. 24. カレンダーで見たい -> カレンダー表示
  25. 25. 地図上で見たい -> 地図にピンを配置
  26. 26. Googleカレンダーに登録したい -> カレンダーに登録ボタン</li></ul>ATND地域検索 http://atnd.granite.jp/<br />
  27. 27. 17<br />開発環境・フレームワーク・ライブラリ<br />
  28. 28. 開発環境・フレームワーク・ライブラリ<br />18<br /><ul><li> 開発環境
  29. 29. Xampp (Apache+PHP)
  30. 30. Mery (テキストエディタ)
  31. 31. Subversion(バージョン管理、デプロイ)
  32. 32. ライブラリ・フレームワーク
  33. 33. CodeIgniter (PHPフレームワーク)
  34. 34. ATND API (ATNDデータ取得)
  35. 35. GoogleMap API (GoogleMap表示)
  36. 36. jQuery
  37. 37. jQuery UI (タブ表示)
  38. 38. FullCalendar(jQueryプラグイン:カレンダー表示)
  39. 39. TableSorter (jQueryプラグイン:タイムテーブル表示)</li></li></ul><li>サーバ・ネットワーク<br />19<br /><ul><li>サーバ
  40. 40. みかげクラウド (自宅サーバ/録画/エンコ兼)
  41. 41. Core i5 2400S (2.5/3.3GHz 4C/4T 65W)
  42. 42. Intel 160GB SSD + 2TB HDD x2
  43. 43. CentOSon VMWareServer
  44. 44. ネットワーク
  45. 45. wakwak+i-revo (固定IP)
  46. 46. granite.jp 今月ValueDomainに移管しました
  47. 47. 維持費7980円 -> 2980円
  48. 48. さえき亭とIX-2015を介してVPNで繋がっている
  49. 49. VPN経由のPT1で山口県のニュースが見れる
  50. 50. 今年中にIPv6対応したい</li></li></ul><li>ここが大変だった<br />20<br /><ul><li>ATNDの検索結果が結構てきとう
  51. 51. 検索結果が多い場合、イベントがこぼれる
  52. 52. 地域、ジャンル、日時で絞って対応
  53. 53. 日付指定しても他の日が混じる
  54. 54. しょうがない
  55. 55. 検索結果が日付順に並んでいない
  56. 56. はじめはPHPで並べ替え -> TableSorterにお任せ
  57. 57. キーワード検索が全文検索しかない
  58. 58. 「福島県」で検索しても本文に混じっているとヒット
  59. 59. ex. 福島県応援イベント!東京飲み とか</li></li></ul><li>ここが大変だった<br />21<br /><ul><li> どこまでPHPでどこまでJavaScriptでやるか
  60. 60. はじめはPHP側でゴリゴリ書いていたが、</li></ul> 最終的にはほとんどJavaScript側に記述<br /> 地図、カレンダー、タイムラインを切り替えられるように<br /> データは一括でJavaScript側で持つ<br /><ul><li> 最適なところは要件次第。やってみないとわからない</li></li></ul><li>ここが大変だった<br />22<br /><ul><li>慣れないJavaScript
  61. 61. jQuery単体で使うことはあったけどGoogleMapとの連携は初めて
  62. 62. スコープが理解できると読み解きやすくなった</li></ul>  どこから実行されるか読めるようになればこっちのもの<br />
  63. 63. ここが大変だった<br />23<br /><ul><li> PHPからJavaScriptへ変数の受け渡し</li></ul>ATNDAPIからJSONで受け取り<br />PHP配列に戻して加工<br />JSONに変換してSmartyテンプレートにアサイン<br />JavaScript の変数に代入<br />ex. var data = {/literal}{$event_list_json}{literal};<br /><ul><li> JavaScriptコンソールが役に立った(Alertデバッグから進歩)
  64. 64. ChromeならCtrl+Shit+J
  65. 65. Alert()の代わりにConsole.log()
  66. 66. 配列もダンプしてくれる</li></li></ul><li>JavaScriptコンソール<br />24<br />(・∀・)イイ!!<br />
  67. 67. 25<br />今後の展望など<br />
  68. 68. 今後の展望<br />26<br />・次回WEB勉強会が8月予定なので<br /> 開発系のイベントを7月に開催?<br />・ WEBAPIを使ってみる?<br />  Twitter, ATND, GoogleMap, etc.<br />・ もくもくと開発?<br />・ Vimを極める?<br />
  69. 69. 今後の展望<br />27<br />・山口県のイベントカレンダーを作りたい。<br /> <br /> ないようで結構ある。知らないだけ<br />あの日見たイベントの名前を僕達はまだ知らない。<br />・イベントの登録管理機能を付けてパッケージ化とか<br /><ul><li>Ustream配信の請負をセットにするとか</li></ul>ex. ついすと http://www.twistt.tv/<br />
  70. 70. 28<br />ご静聴ありがとうございました<br />@mikage014<br />2011.06.11<br />第9回山口県WEB勉強会<br />使用画像<br />http://piapro.jp/t/bvvK<br />

×