Atnd地域検索作ったよー
Upcoming SlideShare
Loading in...5
×
 

Atnd地域検索作ったよー

on

  • 2,260 views

 

Statistics

Views

Total Views
2,260
Slideshare-icon Views on SlideShare
1,919
Embed Views
341

Actions

Likes
1
Downloads
2
Comments
0

3 Embeds 341

http://d.hatena.ne.jp 339
http://a0.twimg.com 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Atnd地域検索作ったよー Atnd地域検索作ったよー Presentation Transcript

    • @mikage014
      2011.06.11
      第9回山口県WEB勉強会
      ATND地域検索つくったよー
      1
    • インフラエンジニア 5年->転職
      Linux, Solarisでインターネットシステムの設計・構築
      プログラマ 3年目
      PHP + Postgresqlで業務系Webシステムの設計・構築
      ブログ
      http://d.hatena.ne.jp/mikage014/
      Twitter: @mikage014
      ←このアイコンが目印です
      About Me
    • 1.エピローグ
      2.勉強会とATND
      3.ATND地域検索の紹介
      4.開発環境・フレームワーク・ライブラリ
      今日話すこと
    • 4
      エピローグ
    • 2010ねん10がつごろ
      5
      さえき「アテンドのえーぴーあいをつかってなにかつくってみない?」
      みかげ「じゃあぐーぐるどっくで」
      なんかいかやりとりして
      とちゅうでさえきさんのおうとうがなくなったり、
      としあけにプロトタイプができたりして、
    • ぷろとたいぷ
      6
    • 201?ねん??がつごろ
      7
      ・・・そのままわすれられた。
      あの日見たAPIの名前を僕達はまだ知らない。 ~完~
    • 8
      勉強会とATND
    • 勉強会とは
      9
      勉強するキッカケを手に入れる場
        あれずげえ、おれもやってみたい。モチベーション↑ ↑
      ○○に詳しい人とつながる場
      プレゼンやLTをすることによって知識を形にする場
        説明できないのはよくわかってないということ
      ギブアンドテイクの世界
        自分も○○なら一番を目指す。ものすごくニッチでもいい
      懇親会が本番
    • ATNDとは
      10
      勉強会界隈でよくつかわれているイベント告知サイト
      ex. http://atnd.org/events/15712
      特徴
      • OpenIDでログインできる
        Twitter、Google、Mixi、Yahoo、はてな、Livedoor、Flickr、etc.
      • 検索用のATNDAPIが提供されている
      • 連絡手段がちょっと弱い(メール登録が必須じゃないので…
      ドタキャン問題
    • ATND以外のイベント告知サイト
      11
      勉強会界隈でよくつかわれているイベント告知サイト
      ATNDの他には…
      こくちーず
      http://kokucheese.com/
      PARTAKE
      http://partake.in/
      Twipla
      http://twipla.jp/
      …申し込みフォーム、名簿管理が充実
      …Twitter連携
        NoSQL(Cassandra)で運用されていて
        技術的に興味深い
      … Twitter連携が強力。
        DM送付、参加者リスト作成
        Twitterオフでよく使われている
    • 12
      ATND地域検索の紹介
    • なぜATND?
      13
      検索用のATNDAPIが提供されている
      =検索データを返すから表示は好きにしていいよ
      =ユーザーが望むイベント検索サイトが作れる
      ATNDAPIリファレンス 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/
      upmeetup
      http://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
      • CentOSon 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へ変数の受け渡し
      ATNDAPIからJSONで受け取り
      PHP配列に戻して加工
      JSONに変換してSmartyテンプレートにアサイン
      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月に開催?
      ・ WEBAPIを使ってみる?
        Twitter, ATND, GoogleMap, etc.
      ・ もくもくと開発?
      ・ Vimを極める?
    • 今後の展望
      27
      ・山口県のイベントカレンダーを作りたい。
       
       ないようで結構ある。知らないだけ
      あの日見たイベントの名前を僕達はまだ知らない。
      ・イベントの登録管理機能を付けてパッケージ化とか
      • Ustream配信の請負をセットにするとか
      ex. ついすと http://www.twistt.tv/
    • 28
      ご静聴ありがとうございました
      @mikage014
      2011.06.11
      第9回山口県WEB勉強会
      使用画像
      http://piapro.jp/t/bvvK