Rails4でつくるInstagramビューアーアプリ

Size: px

Start display at page:

Download "Rails4でつくるInstagramビューアーアプリ"

しょうすけよしなが
8 years ago
Views:

2 Rails4 Instagram

3 2013 Nyanstagram Rails + ios Rails Rails4, Ruby2.1 (?)Rails Bootstrap Heroku github Heroku PDF Mac OSX Ruby 2.1 PostgreSQL 9.3 Bundler 1.5 Git 1.8 i

4 i i i 1 Nyanstagram Rails PDF Rails Rails Gem Rails Instagram API instagram gem Instagram ID Heroku heroku ii

4 Rails................................ 5 2.5................................... 6 3 Instagram API 8 3.1 instagram gem.......................... 8 3.2 Instagram ID........................ 8 3.3..................................... 9 3.

5 heroku Bootstrap bootstrap-sass View assets : Instagram API ID iii

....................... 20 6.4...................................... 21 6.5.

6 1 Nyanstagram Rails 1.1 Instagram Rails Ruby, Git Ruby on Rails Tutorial 1

7 1 Nyanstagram Rails 1.3 Ruby 2.1 PostgreSQL 9.3 Bundler 1.5 Git 1.8 Heroku Toolbelt Instagram Heroku 1.3 Rails Ruby on Rails Tutorial PDF PDF 2

3 Rails Ruby on Rails Tutorial http://railstutorial.jp/?version=4.0 1.

8 2 Rails 2.1 Rails Rails Gem --skip-bundle $ rails new nyansta-demo --skip-bundle create create README.rdoc create Rakefile create config.ru create.gitignore create Gemfile create app create app/assets/javascripts/application.js create app/assets/stylesheets/application.css create app/controllers/application_controller.rb create app/helpers/application_helper.rb 2.2 Gem Gem Gemfile /Gemfile source ruby gem rails, gem pg # assets gem sass-rails, ~> gem uglifier, >=

js create app/assets/stylesheets/application.css create app/controllers/application_controller.

9 2 Rails 2.2 Gem # javascript gem coffee-rails, ~> gem jquery-rails gem turbolinks gem jbuilder, ~> 1.2 group :development, :test do gem rspec-rails end group :development do gem better_errors gem binding_of_caller gem byebug gem pry-rails gem rails_best_practices gem rubocop end group :test do gem capybara gem factory_girl_rails gem poltergeist gem shoulda gem vcr gem webmock end bundle Gem bundle install Gem --path $ bundle install --path vendor/bundle Fetching gem metadata from Fetching additional metadata from Resolving dependencies Using rake (10.1.1) Your bundle is complete! It was installed into./vendor/bundle git.gitignore /.gitignore # Ignore vendor/bundle vendor/bundle 4

:test do gem capybara gem factory_girl_rails gem poltergeist gem shoulda gem vcr gem webmock end bundle Gem bundle install Gem --path $ bundle install --path vendor/bundle Fetching gem

10 2 Rails Heroku PostgreSQL database, username /config/database.yml development: adapter: postgresql encoding: unicode database: nyansta-demo_development pool: 5 username: nyansta-demo password: test: adapter: postgresql encoding: unicode database: nyansta-demo_test pool: 5 username: nyansta-demo password: production: adapter: postgresql encoding: unicode database: nyansta-demo_production pool: 5 username: nyansta-demo password: DB $ bundle exec rake db:create $ bundle exec rake db:migrate 2.4 Rails rails server 5

adapter: postgresql encoding: unicode database: nyansta-demo_test pool: 5 username: nyansta-demo password: production: adapter:

11 2 Rails 2.5 $ bundle exec rails s 2.1 git $ git init Initialized empty Git repository in /Users/asakura/Sites/github/mochiz/nyansta-demo/.git/ $ git add. $ git commit -m initial commit [master (root-commit) 74a30c8] initial commit 52 files changed, 702 insertions(+) create mode gitignore create mode Gemfile create mode README.rdoc create mode Rakefile

12 2 Rails 2.5 : assets helper /config/application.rb module NyanstaDemo class Application < Rails::Application config.generators do g g.assets false # g.helper false # g.view_specs false # end config.time_zone = Tokyo # Tokyo config.i18n.default_locale = :ja # end end 7

generators do g g.assets false # g.helper false # g.

13 3 Instagram API 3.1 instagram gem Instagram API Gem Gemfile bundle /Gemfile # instagram gem instagram group :development, :test do gem dotenv-rails end $ bundle 3.2 Instagram ID API ID Instagram CLIENT ID, CLIENT SECRET

instagram group :development, :test do gem dotenv-rails end $ bundle 3.

14 3 Instagram API instagram Instagram API images $ bundle exec rails c [1] pry(main)> Instagram.configure do config [1] pry(main)* config.client_id = f46bbe97d5d44c5e8d f4b86e5 [1] pry(main)* config.client_secret = 23f b45e6a5055b816ac37d42 [1] pry(main)* end [2] pry(main)> Instagram.media_popular => [{"attribution"=>nil, "videos"=> "images"=> {"low_resolution"=> {"url"=> " "width"=>306, "height"=>306}, 3.3 client_id, client_secret /config/initializers/instagram.rb require "instagram" Instagram.configure do config config.client_id = ENV["INSTAGRAM_CLIENT_ID"] 9

$media_popular => [{"attribution"=>nil, "videos"=> "images"=> {"low_resolution"=> {"url"=> "http://distilleryimage10.s3.amazonaws.$

15 3 Instagram API 3.4 config.client_secret = ENV["INSTAGRAM_CLIENT_SECRET"] end ID git ID, dotenv dotenv-rails gem.env ID,.ignore /.env INSTAGRAM_CLIENT_ID=[your client id] INSTAGRAM_CLIENT_SECRET=[you client secret] /.gitignore # Ignore.env.env dotenv tag_recent_media URI 3.1: $ bundle exec rails c [1] pry(main)> medias = Instagram.tag_recent_media(URI.encode( )) [2] pry(main)> medias.first.images.standard_resolution => {"url"=> " 10

$encode( )) [2] pry(main)> medias.first.images.standard_resolution => {"url"=> "http://distilleryimage4.s3.amazonaws.$

16 3 Instagram API 3.5 "width"=>640, "height"=>640} instagram-ruby-gem instagram-ruby-gem git $ git add. $ git commit -m Instagram API

17 4 Rails 4.1 rails generate $ bundle exec rails g controller home index create app/controllers/home_controller.rb route get "home/index" invoke erb create app/views/home create app/views/home/index.html.erb invoke rspec create spec/controllers/home_controller_spec.rb 4.2 /routes.rb NyanstaDemo::Application.routes.draw do root home#index end Rails Home#index 12

18 /app/controllers/home_controller.rb class HomeController < ApplicationController def = Instagram.tag_recent_media(URI.encode( )) end end /app/views/home/index.html.erb <%= render partial: media, %> /app/views/home/_media.html.erb <%= image_tag(media.images.low_resolution.url) %> 13

tag_recent_media(URI.encode( )) end end /app/views/home/index.html.

19 git $ git add. $ git commit -m

20 5 Heroku Heroku heroku Heroku Toolbelt heroku toolbelt 15

21 5 Heroku 5.1 heroku 5.1 heroku heroku create $ heroku create Creating dry-everglades-1554 done, stack is cedar git@heroku.com:dry-everglades-1554.git Git remote heroku added 5.2 git push $ git push heroku master Initializing repository, done. Counting objects: 100, done. Delta compression using up to 4 threads. Compressing objects: 100% (87/87), done. Writing objects: 100% (100/100), KiB 0 bytes/s, done. Total 100 (delta 21), reused 0 (delta 0) -----> Ruby app detected -----> Compiling Ruby/Rails -----> Using Ruby version: ruby heroku.env Instagram API Heroku heroku config:add $ heroku config:add INSTAGRAM_CLIENT_ID=[YOUR_CLIENT_ID] $ heroku config:add INSTAGRAM_CLIENT_SECRET=[YOUR_CLIENT_SECRET] heroku config 16

22 5 Heroku 5.4 $ heroku config grep INSTAGRAM INSTAGRAM_CLIENT_ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx INSTAGRAM_CLIENT_SECRET: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 5.4 heroku open $ heroku open

23 6 Bootstrap Instagram Bootstrap Bootstrap 18

24 6 Bootstrap 6.1 bootstrap-sass 6.1 bootstrap-sass Rails + Bootstrap Gem bootstrap-sass Gemfile bootstrap-sass font-awesome-rails Bootstrap3 /Gemfile # css gem bootstrap-sass, ~> gem font-awesome-rails, ~> bundle "font-awesome"; /app/views/layouts/application.html.erb <body> <div class="container"> <%= yield %> </div> </body> 6.2 View /app/assets/stylesheets/nyansta.css.sass 19

25 6 Bootstrap 6.3 "nyansta"; /app/assets/images/bg.jpg /app/assets/stylesheets/nyansta.css.sass body background: image-url( bg.jpg ) no-repeat center center fixed padding: 60px 60px -webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background-size: cover.thumbnail background: #fff background: rgba(255,255,255,0.9) /app/views/home/_media.html.erb <div class="col-xs-12 col-sm-6 col-md-4"> <div class="thumbnail"> <%= link_to(media.link) do %> <%= image_tag(media.images.low_resolution.url, class: img-rounded ) %> <div class="caption"> <p> <i class="fa fa-instagram"> </i> <%= truncate(media.caption.text, length: 20) if media.caption %> </p> </div> <% end %> </div> </div> 6.3 assets heroku (production ) assets true 20

26 6 Bootstrap 6.4 /config/environments/production.rb NyanstaDemo::Application.configure do config.serve_static_assets = true end git $ git add. $ git commit -m Bootstrap 6.4 heroku $ git push heroku master $ heroku open 21

27 6 Bootstrap

28 7 Bootstrap Instagram API Rspec 23

29 8 : Instagram API ID 8.1 Instagram API ID Instagram 24

30 8 : Instagram API ID Application Name Description Website URL OAuth redirect_uri URL 25

31 8 : Instagram API ID CLIENT ID, CLIENT SECRET 26

2 Rails pico planner camel case camel pico planner _ pico_planner snake case snake - chain case chain pico planner pico-planner CSS id class 2.3 Rails

2 Rails 2.1 DBMS PicoPlanner SimpleGreeter DBMS Ruby on Rails 3 PostgreSQL MySQL SQLite3 SQLite3 2.2 Web PicoPlanner pico planner 11 2 Rails pico planner camel case camel pico planner _ pico_planner snake