Web開発

Rails をAPI モードで new する

Ruby on Rails 5 から API モードが追加されました。
View 部分に関するファイルや Gem が外れている、API 開発に特化したアプリケーションを作成できます。

バージョン指定するための準備

さて、今回使用したい Rails のバージョンが 5.1.4 です。

ローカルの gem list を確認してみて、どのバージョンがインストールされているのかを確認します。

$ gem list rails

*** LOCAL GEMS ***

autoprefixer-rails (9.0.0, 7.1.4.1)
capistrano-rails (1.4.0)
coffee-rails (4.2.2, 4.1.1, 4.1.0, 4.0.1)
compass-rails (2.0.0)
factory_girl_rails (4.4.1)
font-awesome-rails (4.7.0.4)
haml-rails (1.0.0)
jquery-rails (4.3.3, 4.3.1, 4.2.1, 4.0.5, 4.0.4, 4.0.3, 3.1.5)
pry-rails (0.3.6, 0.3.4)
rails (5.2.1, 5.2.0, 5.0.7, 5.0.1, 4.2.6, 4.2.5, 4.2.3, 4.2.1, 4.1.6)
rails-controller-testing (1.0.2)
rails-deprecated_sanitizer (1.0.3)
rails-dom-testing (2.0.3, 1.0.9, 1.0.8, 1.0.7, 1.0.6)
rails-html-sanitizer (1.0.4, 1.0.3, 1.0.2)
rails_12factor (0.0.3)
rails_serve_static_assets (0.0.5)
rails_stdout_logging (0.0.5)
rspec-rails (3.8.0)
sass-rails (5.0.7, 5.0.6, 5.0.4, 5.0.3, 4.0.5, 4.0.4, 4.0.2)
sprockets-rails (3.2.1, 3.2.0, 2.3.3, 2.3.2, 2.2.4, 2.0.1)

ということで、5.1.xはいませんので、ローカルの gem に追加していきます。

$ gem i -v 5.1.4 rails
*** LOCAL GEMS ***

autoprefixer-rails (9.0.0, 7.1.4.1)
capistrano-rails (1.4.0)
coffee-rails (4.2.2, 4.1.1, 4.1.0, 4.0.1)
compass-rails (2.0.0)
factory_girl_rails (4.4.1)
font-awesome-rails (4.7.0.4)
haml-rails (1.0.0)
jquery-rails (4.3.3, 4.3.1, 4.2.1, 4.0.5, 4.0.4, 4.0.3, 3.1.5)
pry-rails (0.3.6, 0.3.4)
rails (5.2.1, 5.2.0, 5.1.6, 5.1.4, 5.0.7, 5.0.1, 4.2.6, 4.2.5, 4.2.3, 4.2.1, 4.1.6)
rails-controller-testing (1.0.2)
rails-deprecated_sanitizer (1.0.3)
rails-dom-testing (2.0.3, 1.0.9, 1.0.8, 1.0.7, 1.0.6)
rails-html-sanitizer (1.0.4, 1.0.3, 1.0.2)
rails_12factor (0.0.3)
rails_serve_static_assets (0.0.5)
rails_stdout_logging (0.0.5)
rspec-rails (3.8.0)
sass-rails (5.0.7, 5.0.6, 5.0.4, 5.0.3, 4.0.5, 4.0.4, 4.0.2)
sprockets-rails (3.2.1, 3.2.0, 2.3.3, 2.3.2, 2.2.4, 2.0.1)

ということで、5.1.x がインストールできました。

rails new

というわけで、無事にインストールしたいバージョンの gem をローカルにインストールしたので、いよいよアプリケーションを new します。

$ rails _5.1.4_ new app_name --api

サーバが起動するか確認する

$ cd app_name
$ rails s

http://localhost:3000/ にアクセスして以下が表示されたら成功です!
Image from Gyazo

最後に DB も作っておきます。

$ rake db:create
Created database 'db/development.sqlite3'
Created database 'db/test.sqlite3'

RESTful API とは?

最近までRailsのブートキャンプのために、TECH::EXPERTの夜間・休日コースに通っていました。渋谷の教室に主に通っていましたが、5ヶ月ほど経ってきた頃に疲労が・・・。
でも、そんなこんなでなんとか自分でオリジナルのアプリケーションをつくる最終課題に突入しましたので、その備忘録。

何を作るのか

というわけで、野球が大好きなので野球観戦日記を登録できるアプリケーションを作成しようと考えています。
私は普段の仕事では、Vue.js を使用しているのと、AWS の便利な所を組み合わせる予定で、Rails では RESTful API を作成しようと思います。

API(Application Programming Interface)とは?

APIとは、あるコンピュータプログラム(ソフトウェア)の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。(引用: IT用語辞典 e-Words

ということです。こんなときは、実例をみるのが一番ということで、よくお世話になる connpass のサイトの情報を API を使って覗いてみましょう。
connpass では、API リファレンスが存在します。こちらにアクセスしてみると色々書いてありますね!
イベントの一覧を取ってくるのは、
https://connpass.com/api/v1/event/
というAPIです。ですが、このAPIだと自分のほしい情報があるのかないのか、なんなのかわかりません。
そこで、rails という文字列の含まれるイベントを検索してみましょう
https://connpass.com/api/v1/event/?keyword=rails
これでもまだまだ多いので、rails 文字列の入っているイベントを1件だけ取得してみましょう!
https://connpass.com/api/v1/event/?keyword=rails&count=1
これで取得できます。これが、API です!

REST(REpresentational State Transfer)とは?

一般によく使われる狭義のRESTは、パラメータを指定して特定のURLにHTTPでアクセスすると、XMLで記述されたメッセージが送られてくるようなシステムおよび呼び出しインターフェース(「RESTful API」と呼ばれる)のことを指す。(引用: IT用語辞典e-Words

REST の設計原則は以下の4つだそうです。

  1. セッションなどの状態管理を行わない(やり取りされる情報はそれ自体で完結して解釈することができる)
  2. 情報を操作する命令の体系が予め定義・共有されている
  3. すべての情報は汎用的な構文で一意に識別される
  4. 情報の内部に、別の情報や(その情報の別の)状態へのリンクを含めることができる(ハイパーメディア的な書式で情報を表現する)

(引用: IT用語辞典e-Words

ちょっとむずかしく聞こえますが、なんとなくわかっていればなんとか先へ進めるはず!まずは作成してみようということで、 rails new app_name –api のコマンドを叩きにいきましょう!

Dockerの基礎

ここから Docker をインストールしてくださいね!

Docker の利点

面倒な環境構築の手間が格段に減る

プロジェクトを開始する時にネックになる、環境構築。下手したら1日を環境構築で終えてしまうことさえあります。
環境構築手順書を書いて共有していましたが、Dockerfile に必要な処理が全部書いてあるのでそれを Git で管理して共有し、build と run してもらえば済んでしまいます。

コンテナ型仮想環境

コンテナ型であることのメリットは、手元のマシン(Windows や Mac のこと)自体の OS を動かす必要がなくなります。そのため非常に軽量に動作させることが可能です。

Docker イメージとは?

AWS で言う所の、AMI に相当するものです。Docker 社オフィシャルのイメージや、世界中の開発者が様々なイメージを共有しています。百聞は一見に如かず!ということで、こちらにいろんなイメージがあるので見てみてください。イメージがつきやすいかと思います -> https://hub.docker.com/explore/

Docker コンテナとは?

上記イメージを展開する箱みたいな感じ!コンテナなので、色々なイメージを乗せることができるようです(docker-compose)

Docker コマンド一覧

詳細はこちらのドキュメントを参考にしてくださいね!
イメージをレジストリから持ってくるときは pull を使います。MySQL5.6 を持ってくるには
$ docker pull mysql:5.6
試しにこのイメージをコンテナで実行します。
$ docker run -d -e MYSQL_ROOT_PASSWORD=password --name mysql5.6 mysql:5.6

以下に備忘録的にコマンドを・・・

$ docker ps # 起動中のコンテナが表示される
$ docker stop <コンテナID> # 起動中のコンテナをストップ
$ docker ps -a # 起動中/停止中のコンテナが表示
$ docker start <コンテナID> # 起動中のコンテナをストップ
$ docker restart <コンテナID> # コンテナを再起動
$ docker images # ローカルに置いてあるイメージのリスト
$ docker inspect <コンテナID># docker の内部の割り振られているIPを取得する
$ docker rm <コンテナID> # 削除するときは、 stop してから
$ docker rmi イメージID

イメージやコンテナが膨れ上がったときは?

Docker アイコンをクリックして、Preferences を開き、Reset を押下します。

Image from Gyazo
Image from Gyazo

em と rem の違い!!

言わずと知れたフォントサイズ指定の単位「em」。レスポンシブやら様々なサイズのデバイスが多い中で「em」だけを使っていると、親要素の事をいちいち考えなければなりません。「px」指定も絶対的でいいのですが、汎用性に欠いてしまいますよね・・・。

「em」のデメリット

  • 親要素のフォントサイズを考慮しなくてはならない!
  • 兎に角計算がわけわかめ!

そこで「rem」
この「rem」を分解すると、「root + em」ということで、html 要素(最も親の要素)に指定されているフォントサイズから計算してくれます。
なので、直近とか少し離れた親要素関係なく root に指定された要素に指定してあるフォントサイズから計算してくれるので、非常に助かります!


html {
font-size: 10px;
}

p {
font-size: 1.4rem; /* => 14px */
}

こんな感じに相成りまする。
久々のブログだった・・・(`;ω;´)怠慢過ぎるよね、がんばろっと。。。
ここは秘密の日記帳兼メモ帳だ!!
そんなこんなで今後ともよろしくお願いいたしますm(_ _)m

Ruby の Array について

変数に何が入っているかわからない時、
valuable.class
するといい!

Array しか each メソッド使えない!

image_tag ヘルパーの assets path の書き方と幅・高さ指定

image_tag ヘルパーを使用したときに assets path の書き方をいつも検索してしまうので、備忘録。

このヘルパーを使用した時の画像パスは、デフォルトで app/assets/images/ を参照するようになっているので、表示させたい画像が images ディレクトリにある場合は、画像のファイル名だけ記述するだけで大丈夫。

=image_tag 'image.png', :alt => '画像だよ'

※ ちなみに alt 属性は指定しないと、画像のファイル名の拡張子以外の部分の先頭大文字で設定してくれます。ファイル名にアンダースコアが入っている場合はそこが半角スペースになって設定されます。

そして、ついでに image_tag ヘルパーなら画像の幅と高さの指定も簡単にできます。

=image_tag 'image.png', :alt => '画像だよ', :size => '100x150'

幅と高さを別々に指定する場合は

=image_tag 'image.png', :alt => '画像だよ', :width => '100', :height => '150'

こんな感じです。

link_to ヘルパーの中に image_tag ヘルパーを入れる

View を Haml で記述しているのですが、いつも画像リンクの作り方を失念してしまうので、ここで備忘録。
link_to ヘルパーのブロック構文を使って記述するのがどうやら良さそうですね(^^)

=link_to "url"  do
  =image_tag "image_source", alt: => "alternate strings"

=link_to image_tag("image_source"), "url"

ブロック構文を使用すれば、リンクタグの中身に画像以外のものも追加で記述したいときに便利です(^^)

=link_to "url"  do
  %span ポコにゃん!
  =image_tag "image_source", alt: => "alternate strings"

Compass を install したのに “compass: command not found” になる。

複雑な mixin を書く機会があって、そろそろ Compass を使用してみなくてはと思って、ひとまずインストールして、いじってみようと思ったら、躓いたのでメモしときます。

下記のような結果になりました。

$ gem install sass
$ gem install compass
$ compass -v
-bash: compass: command not found

compassをインストールしたのにcommand not foundになる
`rbenv: rails: command not found`の対処方法

上記のページを参考にさせて頂いて、下記のようにしたらうまくいきましたm(_ _)mありがたや・・・。

$ gem install railties && rbenv rehash
$ compass -v
Compass 1.0.3 (Polaris)

できました!

rbenv は私の環境にもインストールしてあったので、これかなと思ったらそうでした。
ただ、この辺はとても疎くて説明を読んでもなかなか理解できませんでした。

そういえば、Sass についてそんなに勉強したことなかったので、評判の良いこの本でも買ってみようかなって思います。

47都道府県カンマ区切り文字列メモ

完全に自分用のメモです。ただいまプログラミングを勉強しているのですが、その際に都道府県文字列が必要になったので、作成しました!よかったら使ってくださいね(^^)

'北海道', '青森県', '岩手県', '宮城県', '秋田県', '山形県', '福島県', '茨城県', '栃木県', '群馬県', '埼玉県', '千葉県', '東京都', '神奈川県', '新潟県', '山梨県', '長野県', '富山県', '石川県', '福井県', '岐阜県', '静岡県', '愛知県', '三重県', '滋賀県', '京都府', '大阪府', '兵庫県', '奈良県', '和歌山県', '鳥取県', '島根県', '岡山県', '広島県', '山口県', '徳島県', '香川県', '愛媛県', '高知県', '福岡県', '佐賀県', '長崎県', '熊本県', '大分県', '宮崎県', '鹿児島県', '沖縄県'

Facebook の Page Plugin をレスポンシブ対応させる

タイトルの件ですが、開発者向けの Facebook のドキュメントにも書いてありますが、要は

  1. “.fb-page”の生成コードを埋め込む際の width の設定を 500px に設定。これはページプラグインの設定可能最大幅です。
  2. その生成されたコードの親要素の幅を指定したい幅に設定します。CSS で設定することも可能です。

デスクトップ版で表示させたい幅を media query で記述してあげます!これだけでした(^^)

@media screen and (min-width: 500px) {
  .fb-page-parent > .fb-page {
    width: 300px;
  }
}

2015/07/14 追記

上記のコードだけでは、スマートフォンでウィンドウサイズを超えて、500px で表示されて、全体の表示が崩れる事態が発生しました。なので、CSS には下記のようなコードを追記することにしました。お粗末さまでしたm(_ _)m

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
  width: 100% !important;
}

参考URL: https://developers.facebook.com/docs/plugins/page-plugin#adaptive-width