アカハヤの技術ブログ

クズと天才は紙一重 twitter:@akahaya719

railsでbootstrapを導入した時にDEPRECATION WARNINGがうるさかった話

railsでbootstrapを導入する方法は

Gamfileに以下を追加する。

gem 'therubyracer'
gem 'less-rails
gem 'twitter-bootstrap-rails'

 

その後、以下コマンドを実行

rails g bootstrap:install

 

bootstrapは使えるようになるのだが、

rails sでサーバを起動した時に

DEPRECATION WARNINGがうるさいので

gem 'less-rails'のところにこれを追加する。

gem 'less-rails', git: 'https://github.com/MustafaZain/less-rails'

するとDEPRECATION WARNINGが出なくなる。

 

もし、simple_formを導入していた場合

rails generate simple_form:installをしろというエラーも出るので

simple_formを導入していたらこちらも実行する。

Facebook APIでイベント情報を習得する

Facebook Graph APIへのアクセスをサポートしてくれる

gemを導入します。

 

Gamfileに以下を追加して、bundle installを実行

gem 'fb_graph'

 

APPIDとアプリのシークレットキーを取得

https://developers.facebook.com/apps

ユーザアクセストークンを取得

https://developers.facebook.com/tools/explorer/

または、

https://developers.facebook.com/tools/access_token

このままだと、トークンの期限は1時間だけです。

このURLに、必要箇所にトークンを入れてアクセスすれば

60日に期間が伸びます。

https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id=<App ID>&client_secret=<アプリのシークレットキー>&fb_exchange_token=<Graph API Explorerで取得したアクセストークン>

 

Facebookのアクセストークンを取得して、

以下のスクリプトを実行する。

 

require "rubygems"
require "fb_graph"
keyword = 検索するキーワード
access_token = 取得したアクセストーク
events = FbGraph::Event.search(keyword, access_token: access_token, since: Time.now.to_i)

 

これでイベントが取得できます。

 

 

railsでpostgresqlを使う

簡単なまとめなので、間違えているところがあるかもしれないです。

 

railsPostgreSQLを使いたい場合は

rails new プロジェクト名 -d postgresql

を実行し、プロジェクトを作成します。

 

config/databese.ymlを編集します。

 

development:
 adapter: postgresql
 host: localhost
 encoding: utf8
 port: 5432
 databese: 作成したデータベース名(作成するデータベース名)
 username: 作成したユーザ名
 password: 作成したユーザのパスワード
test:
 adapter: postgresql
 host: localhost
 encoding: utf8
 port: 5432
 databese: 作成したデータベース名(作成するデータベース名)
 username: 作成したユーザ名
 password: 作成したユーザのパスワード

 

ユーザを作成していれば、

rake db:create RAILS_ENV=development

でデータベースは自動で作成されます。

 

PostgreSQLがない場合は、以下コマンドを実行してインストールします。

brew install postgresql

 

PostgreSQLを実行する場合は、以下コマンドを実行します

postgres -D /usr/local/var/postgres

または、

pg_ctl -D /usr/local/var/postgres start

 

PostgreSQL起動後は、実行したまま、別ウィンドウで作業することになります。

 

ユーザを作成したい場合は、

createuser -P ユーザ名

-Pはオプションでユーザにパスワードをつけたいときに使います。

 

ユーザに権限をつけたい場合は、

psql -d postgres

PostgreSQLに入り

ALTER ROLE ユーザ名 WITH SUPERUSER;

で権限をつけられます。

また、逆に権限をなくしたい場合は、

ALTER ROLE ユーザ名 WITH NOSUPERUSER;

で権限を剥奪できます。

 

ユーザを削除したい場合は、

psql -d postgres

PostgreSQLに入り

DROP USER ユーザ名;

で削除できます。

 

ユーザ一覧を見たい場合は

psql -d postgres

PostgreSQLに入り

\du

で確認することができます。

 

データベースを作成するときは、

createdb データベース名 -O ユーザ名

で作成できます

-O ユーザ名はオプションで、

作成するデータベースの所有者となるユーザを指定できます。

 

データベースを削除したい場合は、

psql -d postgres

PostgreSQLに入り

DROP DATABASE データベース名;

で削除できます。

 

データベース一覧を見たいときは、

psql -l

でデータベースを確認できます。

jpostal.jpで住所を自動入力

jpostal.jpという、Nintonという日本の会社が開発している。

郵便番号から住所を自動入力するjQueryプラグインがあります。

これを使って、Railsで郵便番号から住所を自動で入力してくれる

フォームをつくります。

https://github.com/ninton/jquery.jpostal.js/

こちらより、

jquery.jpostal.jsというファイルを習得し、

vendor/assets/javascripts/に追加する。

 

assets/javascripts/application.jsに以下を記述

//= require jquery.jpostal

 

assets/javascripts/address.coffeeを作成し、以下を記述

$ ->
 $("#address_zipcode").jpostal({
  postcode : [ "#address_zipcode" ],
  address : {
       "#address_prefecture_name" : "%3",
       "#address_city" : "%4%5",
       "#address_street" : "%6%7"
       }
 })

 

今回は、住所をユーザに紐づけたのでこんな感じに編集

 

<%= simple_form_for (@user) do |f| %>

<%= f.input :name %>
<%= f.input :post_number, input_html:{id:"address_zipcode"} %>
<%= f.input :address_city, input_html:{id:"address_city"} %>
<%= f.input :address_prefecture_name, input_html:{id:"address_prefecture_name"} %>
<%= f.input :address_street, input_html:{id:"address_street"} %>

<%= f.button :submit %>
<% end %>


これで完成です。

 

郵便番号を入れると住所が自動で入力されます。

セレクトボックスで画像を選べるようにする

セレクトボックスで画像が選べるようにします。

 

セレクトボックスとは、コレ

 

今回はセレクト時に画像が表示されるようにします。

 

こちらに、CSS,JavaScriptをまとめてあります。

GitHub - nakajimakenta/ImageSelect

CSS,JavaScriptを習得し、

index.htmlのheadの部分に以下を追加。

 

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="imageselect.js"></script>
<link href="imageselect.css" media="screen" rel="stylesheet" type="text/css" />

 

その後、body内で以下を記述します。

<body>
<select name="logo">
<option value="1">画像パス</option>
<option value="2">画像パス</option>
<option value="3">画像パス</option>
<option value="4">画像パス</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('select[name=logo]').ImageSelect({dropdownWidth:425});
});

</script>
</body>

画像のパスは適当に入れてください。

これで完成です。

こんな感じになります。

f:id:akahaya_719:20170130020442p:plain

 

パンくずリストって知ってる?

 

そもそも、パンくずリストとは?

ホーム>ユーザー一覧

↑こういうやつです。

 

Railsには、パンくずリストが簡単に作れるgemがあります

 

Gemfileに以下を記述

gem "breadcrumbs_on_rails"

 

bundle install を実行

 

パンくずリストを追加したいページのコントローラに

add_breadcrumb '名前', :パス

という感じに記述します。

 

add_breadcrumb "User", :users_path

 

あとは、表示したいページのview側に以下を記述するだけです

 

<%= render_breadcrumbs separator: ' > ' %>