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

初めてつくる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でスクレイピング