初めてつくる webアプリの開発戦略
TRANSCRIPT
初めてつくるWebアプリの開発戦略地元の話題を知る「Zimoto」開発
小石 真人
流れ
1. 自己紹介
2. 開発したアプリ紹介
3. アプリ構成
4. 気軽にアプリを作るには
5. 終わりに
はじめに
Ruby on Rails を使用して地元の話題提供サービス「Zimoto」を開発しました
+ Why…なぜつくったか
+ What…何をつかったか
+ How…結局、どう作ればいいの?
自分なりに考えてみました
はじめましてうめねりです。
研究開発ストレージ
Ruby, R
群馬県渋川市
都道府県魅力度ランキング
46 → 45 (+1)2014 → 2015
地元の魅力ってなんだろう
Railsで開発してみた
地元を知ってもらう話題作りに
デモ
全体構成
クライアント側 サーバ側
観光地、著名人情報
WebAPI
GoogleMaps API
使用データ
1. 地元地図と観光地…GoogleMapとオープンデータ
2. 地元観光地の写真とつぶやき…WebAPI(twitter, flicker)3. 地元出身著名人…Wikipediaダンプデータ
JQuery & Railsで楽々開発
豊富なドキュメント&プラグイン & 初心者目線
JQuery:
1. railsにデフォで入っている
2. ajaxの実装が楽
3. アニメーションも簡単
Web APIでデータ取得
Gem使うと割りと簡単にデータが出せて面白い
→テストするときのモチベ維持
1. Google Map API → gem ‘gmap4rails’2. Twitter API → gem 'twitter'3. Flickr API → gem 'flickraw'
デザインはBootStrapに任せる
クラス名を調べて入れるだけなのでCSSを覚えなくていい
masonry.js
開発モチベーションを維持するために
1. 日本語&初心者向けドキュメントの充実した
→ Rails&jQuery 2. デザインはBootStrapに任せる
→ 機能を作ることに集中
3. WebAPIを利用すると面白い → テストするときのモチベ維持
ご清聴ありがとうございました
補足資料 参考にさせていただいたサイト
* [Wikipediaデータ利用参考サイトリンク集 | mwSoft](http://www.mwsoft.jp/programming/munou/wikipedia_link.html)wikipediaのダンプデータを SQLに入れる方法
* [日本百選と座標値(経緯度数値 ](http://100sen.cyber-ninja.jp/)県別の観光地一覧情報
* [コンテンツや画像などを順番にフェードインする jQuery | mororeco](http://morobrand.net/mororeco/javascript/fadein/)非同期で画像を順番に表示する方法
* [HTML5アプリ作ろうぜ!( 11):Webデザイン初心者でもできる、 Bootstrapの使い方超入門 (4/4) - @IT](http://www.atmarkit.co.jp/ait/articles/1403/19/news034_4.html)BootStrapのテーブルやボタンなどの使い方
* [【保存版】TwitterAPI1.1 REST API 全項目解説|DX.univ](http://dx.24-7.co.jp/twitterapi1-1-rest-api/)
* [Flickr API で Ruby + flickraw を使い画像検索 | EasyRamble](http://easyramble.com/flickr-api-with-ruby-flickraw.html)
[無料の写真 - Pixabay](https://pixabay.com/ja/)* 発表資料の写真素材
補足:MySQLにWikipediaダンプデータ保存&クレンジング
著名人の出身地をだす
1. ダンプデータ(2GB)から県別の芸能人一覧のページを取得
2. Mysqlにwikipediaの全ページ保存a. xml2sqlb. pandocでmediawiki記法をhtmlに c. ogaでスクレイピング