SlideShare a Scribd company logo
初めてつくる
Webアプリの開発戦略
地元の話題を知る「Zimoto」開発
小石 真人
流れ
1. 自己紹介
2. 開発したアプリ紹介
3. アプリ構成
4. 気軽にアプリを作るには
5. 終わりに
はじめに
Ruby on Rails を使用して地元の話題提供サービス「Zimoto」を開発しました
+ Why…なぜつくったか
+ What…何をつかったか
+ How…結局、どう作ればいいの?
自分なりに考えてみました
はじめまして
うめねりです。
研究開発
ストレージ
Ruby, R
初めてつくる Webアプリの開発戦略
群馬県
渋川市
都道府県
魅力度ランキング
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. xml2sql
b. pandocでmediawiki記法をhtmlに
c. ogaでスクレイピング

More Related Content

What's hot (20)

PDF
文系から半年でRuby(Sinatra, Rails)を学んだら人生変わった@沖縄Ruby会議02
Masayoshi Tokumoto
 
PDF
Came From Ruby No Kai 20090124
Shintaro Kakutani
 
PDF
在宅フリーランスで 失敗した話3選
Tomoe Sawai
 
PDF
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜サービスデザイン編 先生:増井 雄一郎
schoowebcampus
 
PDF
Yapc2012ltthon
Junya Murabe
 
PDF
私はこれでエバンジェリストをやめました
Yasuhiro Horiuchi
 
PDF
京都在住、時々大阪、アメリカ向けの基盤開発
Ryo Mitoma
 
PDF
Webサービスのコンテンツパターン 或いはデータの活⽤
Yusuke Wada
 
PPTX
APIコンテスト11 柿島大貴 一語一絵
calil jp
 
PDF
Ruby and I at 神奈川Ruby会議01
Yutaka Tachibana
 
PDF
Refrection of kawasaki.rb
Aki Ariga
 
PDF
ベンチャーCTO、AWSエバンジェリストを経て考える、 クラウド時代に向き合うエンジニアの心構えとは?
Yasuhiro Horiuchi
 
PDF
プログラミングTipsサイトlt(town bash 201710)
Ryosuke Miyahara
 
KEY
Yokohama.rb Kaja推薦
joker1007
 
PDF
Cssアニメーションとその制御
Muyuu Fujita
 
KEY
JRubyで作るapiサーバー
Yamamoto Kazuhisa
 
PDF
プラグインだけじゃない!そのままでもすごいvim
Keisuke Izumiya
 
PDF
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Cake YOSHIDA
 
PDF
プロジェクトでRubocopを使って自動コードレビューしてみた話
Cake YOSHIDA
 
PDF
Kyakusaki.rb
Yasuyuki Fujikawa
 
文系から半年でRuby(Sinatra, Rails)を学んだら人生変わった@沖縄Ruby会議02
Masayoshi Tokumoto
 
Came From Ruby No Kai 20090124
Shintaro Kakutani
 
在宅フリーランスで 失敗した話3選
Tomoe Sawai
 
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜サービスデザイン編 先生:増井 雄一郎
schoowebcampus
 
Yapc2012ltthon
Junya Murabe
 
私はこれでエバンジェリストをやめました
Yasuhiro Horiuchi
 
京都在住、時々大阪、アメリカ向けの基盤開発
Ryo Mitoma
 
Webサービスのコンテンツパターン 或いはデータの活⽤
Yusuke Wada
 
APIコンテスト11 柿島大貴 一語一絵
calil jp
 
Ruby and I at 神奈川Ruby会議01
Yutaka Tachibana
 
Refrection of kawasaki.rb
Aki Ariga
 
ベンチャーCTO、AWSエバンジェリストを経て考える、 クラウド時代に向き合うエンジニアの心構えとは?
Yasuhiro Horiuchi
 
プログラミングTipsサイトlt(town bash 201710)
Ryosuke Miyahara
 
Yokohama.rb Kaja推薦
joker1007
 
Cssアニメーションとその制御
Muyuu Fujita
 
JRubyで作るapiサーバー
Yamamoto Kazuhisa
 
プラグインだけじゃない!そのままでもすごいvim
Keisuke Izumiya
 
Comableを支える技術〜できるだけコーディングせずにズルして作るRailsアプリ〜
Cake YOSHIDA
 
プロジェクトでRubocopを使って自動コードレビューしてみた話
Cake YOSHIDA
 
Kyakusaki.rb
Yasuyuki Fujikawa
 

Similar to 初めてつくる Webアプリの開発戦略 (20)

PPTX
Movable Type Data API Swiftアプリ作成事例
FromF
 
PPTX
Kids, Ruby, Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
宏治 高尾
 
KEY
20120413 nestakabaneworkshop
Yoichiro Sakurai
 
PDF
Webデベロッパの祭典@東京:Webエンジニアの視点
masayoshi takahashi
 
PPTX
マイクロサービスにおける 非同期アーキテクチャ
ota42y
 
PDF
RubyKaigi2009 - RubyをつかったiPhoneアプリケーション開発
takuma mori
 
KEY
RubyMotionを1週間 触ってみた印象
Tatsuya Tobioka
 
PPTX
テックリンク資料20170529
yoshito funayose
 
ZIP
Ruby会議2009:Ruby, Railsによる「ケータイ」ポータルの作り方
Tomoya Narita
 
PDF
Rails api way in aiming
Yasutomo Uemori
 
PPTX
Ruby on Rails を用いたWEBアプリケーションの開発
Koichi Shimozono
 
PDF
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
 
PPTX
エンジニア向け絶対に挫折しない個人サービスの作り方
Atsushi Harada
 
PDF
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
DIVE INTO CODE Corp.
 
PPTX
RubyとRのおいしい関係
sady_nitro
 
PDF
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
 
PDF
[社内向け]Titanium勉強会
Rei Matsushita
 
PPTX
AWS ソリューションアーキテクト アソシエイト受験レポ
かの たん
 
PDF
Yokohama.vim
gu4
 
PPTX
PWAをWebサービスに導入した話
dobby618
 
Movable Type Data API Swiftアプリ作成事例
FromF
 
Kids, Ruby, Fun! ぼくたち、 Rubyプログラミング少年団! 〜小学生からはじめる Ruby プログラミング〜
宏治 高尾
 
20120413 nestakabaneworkshop
Yoichiro Sakurai
 
Webデベロッパの祭典@東京:Webエンジニアの視点
masayoshi takahashi
 
マイクロサービスにおける 非同期アーキテクチャ
ota42y
 
RubyKaigi2009 - RubyをつかったiPhoneアプリケーション開発
takuma mori
 
RubyMotionを1週間 触ってみた印象
Tatsuya Tobioka
 
テックリンク資料20170529
yoshito funayose
 
Ruby会議2009:Ruby, Railsによる「ケータイ」ポータルの作り方
Tomoya Narita
 
Rails api way in aiming
Yasutomo Uemori
 
Ruby on Rails を用いたWEBアプリケーションの開発
Koichi Shimozono
 
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
 
エンジニア向け絶対に挫折しない個人サービスの作り方
Atsushi Harada
 
【入門】3時間でアプリ公開!ゼロからのプログラミングRails講座
DIVE INTO CODE Corp.
 
RubyとRのおいしい関係
sady_nitro
 
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
 
[社内向け]Titanium勉強会
Rei Matsushita
 
AWS ソリューションアーキテクト アソシエイト受験レポ
かの たん
 
Yokohama.vim
gu4
 
PWAをWebサービスに導入した話
dobby618
 
Ad

初めてつくる Webアプリの開発戦略