読者です 読者をやめる 読者になる 読者になる

クズと天才は紙一重

不定期更新です。主に日々の活動記録( ・ㅂ・)و ̑̑

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を導入していたらこちらも実行する。

modal

erbでの記述

<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
 <div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <h4 class="modal-title">タイトル</h4>
   </div>
   <div class="modal-body">
   </div>
  </div>
 </div>
</div>

 

slimでの記述

.modal.fade tabindex="-1" role="dialog" data-backdrop="false"
 .modal-dialog role="document"
  .modal-content
   .modal-header
   button type="button" class="close" data-dismiss="modal" aria-label="Close" &times;
   h4 class="modal-title" タイトル
   .modal-body

data-backdrop="false"

黒い画面と画面外をクリックした時に、閉じるのをなくすオプション。

 

jsの

$('.modal').modal('show');

$('.modal').modal('hide');

で開いたり、閉じたり

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

 

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

 

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

createuser -P ユーザ名

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

 

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

psql -d postgres

PostgreSQLに入り

ALTER ROLE ユーザ名 WITH SUPERUSER;

で権限をつけられます。

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

ALTER ROLE ユーザ名 WITH NOSUPERUSER;

で権限を剥奪できます。

 

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

psql -d postgres

PostgreSQLに入り

dropuser ユーザ名;

で削除できます。

 

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

psql -d postgres

PostgreSQLに入り

\du

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

 

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

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

で作成できます

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

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

 

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

psql -d postgres

PostgreSQLに入り

dropdb データベース名;

で削除できます。

 

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

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

 

2016年を振り返る

2016年も、もう終わりということで今年を簡単に振り返ってみます。

今年は、大学に入学したものの、大学で学ぶことがないと悟り絶望し、すぐに外部活動に移ったので、 ほとんど外部で活動していた一年でした。 VCの方とピッチさせていただいたり、交流会やMeetupに参加して様々な方と知り合ったり 充実していたなと感じています。

また、8月から、株式会社コンシェルジュというスタートアップのベンチャー企業で エンジニアとして働いています。

僕が入った当初は、僕も含め6人でしたが、今では9人になり、日々頑張っています。

会社の立ち上がりをフェーズ毎にみているようで、開発はもちろん それ以外のことも自分の経験として身についていっているなと感じています。

最近は、プログラミングを教えるみたいなところが多いけど、 そもそも教わるようなものでないし、教えてもらおうというようなスタンスの時点で向いてないしやめたほうがいいんじゃないかなと感じています。 僕の周りの出来るエンジニアの方たちはみんな独学だし、スクールやセミナーで教わった人は一人もいないです。

自分自身スキルアップしたと言えるような一年でした

まだまだ、実力不足なところもあるので、来年は今年以上に頑張って行きます!!