作ったWebサービスの表示速度を約20倍にした方法について(Ruby on Rails編)

ども。先日ようやく作ってたWebサービスを公開した昨今です。自分の好きなアニメを評価してランキング形式で共有できるWebサービスなので良かったら使ってみてね！

https://www.aniran.site/

んで、いざ作り終わって公開したところ、ログイン直後の評価対象アニメを一覧するページの表示がめっちゃ遅い。具体的にいうと表示に10秒以上かかってました。ダイアルアップ接続時代を彷彿とさせる表示速度です。というわけで、改善策を色々考えてためしてたんですが、一つ上手くいって実際に早くなったので、その方法を共有したいと思います。

その速度、実に約20倍速。

表示が遅い原因：ページ読み込み時にSQLを大量発行していた

対応策の前に、表示が遅かった原因なのですが1回のページ読み込みの際、内部でSQLが2,000回以上発行してました。そら遅いわ。

以下のように@animesに格納したアニメタイトル約2,000件に対して、@getanimesに含まれるタイトルを抽出するために、
「@getanimes.find_by(title: anime.title)」を実行する記述をしていました。

・controllerファイル

# 全アニメタイトル
@animes = Anime.all

# ユーザが選択済みのアニメタイトル
@getanimes = GetAnime.find_by(uid: @current_user.id)

・viewファイル

# @animesに格納されている約2,000タイトルを読み込むまで繰り返す
<% @animes.each do | anime | %>

  # 既に選択済みの場合はページ表示の際にチェックを入れる
  # ここで「select * from ～ 」のSQLがタイトル数(約2,000)分実行される
  <% if @getanimes.find_by(title: anime.title) != nil %>
    <%= check_box "animelist", "#{anime.title}", :checked => true %>
  <% else %>
    <%= check_box "animelist", "#{anime.title}" %>
  <% end %>

<% end %>

対策：抽出対象の文字列を全て配列に格納して「find_by」の代わりに「include?」を使用する

というわけで、なんとかSQL発行回数を減らせないかなと考えていたのですが、抽出対象の@getanimesの内容を一度すべて配列に格納して、「find_by」の代わりに配列に文字列が存在するかを確認する「include?」を使用したところ劇的に速度が速くなりました。

・controllerファイル

@animes = anime.all
@getanimes = Getanime.where(uid: @current_user.id)

# @getanimesのタイトルを全て配列に格納
i = 0
@ararry_getanimes = []
@getanimes.each do | anime |
  @ararry_getanimes[i] = anime.title
  i = i + 1
end

・viewファイル

<% @animes.each do | anime | %>
  # 配列内に対象のタイトルが存在するか「include?」で確認するに変更
  <% if @ararry_getanimes.include?(anime.title) %>
    <%= check_box "animelist", "#{anime.title}", :checked => true %>
  <% else %>
    <%= check_box "animelist", "#{anime.title}" %>
  <% end %>
<% end %>

まぁ、毎回DB（外部ディスク）からデータを引っ張ってくるより、配列（メモリ）にデータを読み込んだあとにあれこれした方が早くなるんだろうなと解釈してます。あまり大量データに対してこれやると、メモリ不足で逆に遅くなるかもですが…。

最後に

とはいえ、2,000タイトル以上を読み込んで整形する必要があるため、まだまだ速度は遅いなぁと感じています。何か他に良い方法があれば教えてください！！

CodeStarで作成したCloud9環境からhrokuへデプロイする手順と発生したエラーまとめ

ども、引き続きRuby on Railsで遊んでいる昨今です。ようやく、作ってたWebサービスが形になって、昨日herokuっていうプラットフォームサービスにデプロイ（Webサービスを利用できる形でアップロードする）したんですがめちゃくちゃエラーが出て完了するまでに5時間弱とかかかったので、次回以降のために発生したエラーと対処法をまとめておきます。

１．前提

この記事は2018/8/9に書いたものであり、その後のAWS側の変更次第では以下記載のとおりに実施しても成功しない可能性がありますのでご了承ください。

また、当記事でのCloud9環境はAWSのCodeStarを利用して作成したものになります。その他の手順で環境作った場合は、各種バージョンが異なっていたりすると思うので、適時対応してください。

CodeStarを利用したCloud9環境の構築手順は以下を参照してください。

【AWS】CodeStar + Cloud9でRuby on Railsを動かす手順まとめ - わかったつもりになってない？

２．herokuへデプロイする最短手順

エラー内容を残すためにも悪戦苦闘の過程を記事にしたいのですが、かなり長い上にぐちゃぐちゃした記事になってしまうので、「そんなことはいいから、とにかく手順が知りたい！」って方向けにまずは、上手くいく（はずの）手順をまとめておきます。

２－１．herokuにユーザ登録

なにはともあれ、herokuにユーザ登録しましょう。以下ページにアクセスして、各種情報を入力し「無料アカウント作成」ボタンを押下します。

すると、入力したメールアドレス宛に件名が「Key added to your Heroku account」のメールが届くので、メール本文に記載されているURLをクリックすれば登録完了です。登録自体はめっちゃ簡単。

https://signup.heroku.com/jp

２－２．herokuインストール

ここからが、Cloud9側の設定になります。

CodeStarでCloud9環境を作った場合、herokuがインストールされていないのでインストールします。以下コマンドを実行して、「command not found」が出力された場合はインストールされていないです。

$ heroku version
bash: heroku: command not found

以下コマンドを実行してインストールします。

$ cd ~/environment
$ wget https://cli-assets.heroku.com/heroku-v7.7.8/heroku-v7.7.8.tar.gz
$ sudo tar lxvf heroku-v7.7.8.tar.gz
$ export PATH="$PATH:~/environment/heroku/bin"

wgetとtarする対象のファイル名はherokuのバージョンアップに伴い変更される可能性が高いです。wgetできない場合は、以下サイト上に記載されているファイル名に適時変更してください。

https://cli-assets.heroku.com/version

このままだと、Cloud9のターミナル立ち上げるたびに「export」コマンドを実行しないとhrokuコマンドが使えないので、「.bash_profile」コマンドにexportコマンドを追記します。

$ vi ~/.bash_profile 
以下を登録して保存。
export PATH="$PATH:~/environment/heroku/bin"

再度、herokuコマンドを実行して以下のとおりエラーが出ればherokuのインストールは完了です。

$ heroku version
WARNING
WARNING Node version must be >=8.0.0 to use this CLI
WARNING Current node version: 6.14.3

２－３．node.js バージョンアップ

このままだと、node.jsのバージョンが古いとエラーが出てしまうので、node.jsのバージョンを上げます。

変更前のバージョン確認。

$ node -v
v6.14.3

バージョンアップ。エラーに記載されていた8.0.0に上げます。

$ nvm install v8.0.0

変更後のバージョン確認。

$ node -v
v8.0.0

node.jsのバージョン固定。これをしないと、Cloud9のターミナルを新しく立ち上げるたびにバージョンを上げる必要があります。

$ nvm alias default 8.0.0

再度herokuのバージョン確認。ちゃんとバージョンが返ってきました。

$ heroku version
heroku/7.7.8 linux-x64 node-v8.0.0

２－４．Gemfile修正

ここから、ようやくRailsチュートリアルの内容に入っていきます。
Cloud9上でGemfileを開き、以下のとおり修正します。herokuはCloud9で標準で使われているSqlLiteっていうDBはサポートしていません。そのため、Cloud9上ではSqlLiteを、herokuではPostgreSQLというDBを使うように設定します。

<<略>>
以下を削除
gem 'sqlite3', '1.3.13'

<<略>>

group :development, :test do
  以下を追記
  gem 'sqlite3', '1.3.13'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platform: :mri
  gem 'rspec-rails', '3.7.2'
end

<<略>>
以下を追記
group :production do
  gem 'pg'
end

２－５．PostgreSQLのライブラリインストール

PostgreSQLをインストールするにはGemfileを修正するだけでは不足していて、「yum」というコマンドを使って必要なライブラリをインストールする必要があります。

$ sudo yum -y install postgresql-devel

２－６．bundle install

これで、準備が整ったのでGemfileの内容を適用させましょう。
事前にプロジェクトフォルダへ移動するのを忘れないようにしてください。ここではプロジェクトフォルダ名を「heroku_test」としています。

$ cd ~/environment/heroku_test
$ bundle install

２－７．git add & commit

herokuへpushされる対象はgit上でcommitされたライブラリのみのようなので、以下コマンドを実行してcommitします。
※ メッセージは適当です。

$ cd ~/environment/heroku_test
$ git add -A
$ git commit -m "heroku fix"

２－８．herokuへpush

いよいよherokuにpushします。

まずはherokuにログイン。ユーザ登録時に設定したメールアドレスとパスワードを入力してください。

$ heroku login
heroku: Enter your login credentials
Email: XXXXXXX@gmail.com
Password: *********

次にssh公開鍵をherokuに登録します。
以下コマンドを実行すると、鍵の作成から登録までしてくれます。

$ heroku keys:add
Could not find an existing SSH key at ~/.ssh/id_rsa.pub
? Would you like to generate a new one? Yes　←「Yesと入力してEnter」
Generating public/private rsa key pair.
Your identification has been saved in /home/ec2-user/.ssh/id_rsa.
Your public key has been saved in /home/ec2-user/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:fqz10VRYx6/osU+051Bq9eKmuhbMBQ28I/NZ90NjVFI ec2-user@ip-172-31-1-3
The key's randomart image is:
+---[RSA 2048]----+
|         ..o  .oE|
|          o .  =o|
|           o  o o|
|        o o o .=.|
|        S* = o=o+|
|       . .* o+.*o|
|        . +o.oO +|
|         +..o=.= |
|        ..ooo+o .|
+----[SHA256]-----+
Uploading /home/ec2-user/.ssh/id_rsa.pub SSH key... done

そして、heroku上でアプリを作成します。コマンドを実行して以下のようなURLが表示されれば成功。ブラウザでherokuにログインすると、アプリケーション名が表示されています。

$ heroku create
Creating app... done, ? gentle-reaches-87917
https://gentle-reaches-XXXXXX.herokuapp.com/ | https://git.heroku.com/gentle-reaches-XXXXX.git

ようやくherokuにpushする準備が整ったので以下コマンドを実行します。
ここまできたら、後は成功を祈りましょう。

$ git push heroku master

DBを使用する場合は、以下コマンドを実行してheroku側のDBをマイグレーションします。

$ heroku run rails db:migrate

ここまででherokuへのデプロイ作業すべて完了です。あとは、herokuの管理画面で「Open app」ボタンをクリックすれば作成したWebサービスが表示されるはず…。長い道のりでしたね！

３．発生したエラーと対処法

ここからは、エラー奮闘記ということでデプロイ時に発生したエラーと対応を書いていきます。２の手順に書いたことと重複する点もありますが、あえてハマった順番通りに書いていきますね。

３－１．Cloud9にherokuコマンドが存在しない

Railsチュートリアルとか見てるとCloud9にはherokuがインストール済み前提で書かれていることが多いのですが、インストールされておらず、以下エラーが出力しました。対応は２－２で記載したとおり、herokuをインストールすることで解消しました。

$ heroku version
bash: heroku: command not found

３－２．node.jsのバージョンが古い

herokuをインストール後、herokuコマンドを実行すると、node.jsのバージョンが低いとのエラーが発生します。２－３に記載した方法でnode.jをバージョンアップすることで解消します。

$ heroku version
WARNING
WARNING Node version must be >=8.0.0 to use this CLI
WARNING Current node version: 6.14.3

３－３．PostgreSQLのbundle install失敗

Gemfileを修正後、「２－５．PostgreSQLのライブラリインストール」を実施せずにbundle installを実行すると、以下エラーが出力します。２－５の対応を実施後にbundle installを実行すると解消します。ここが一番ハマって、解消までにめちゃくちゃ時間がかかった…。

$ bundle install

<<略>>

Fetching pg 0.18.4
Installing pg 0.18.4 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

<<略>>

An error occurred while installing pg (0.18.4), and Bundler cannot continue.
Make sure that `gem install pg -v '0.18.4' --source 'https://rubygems.org/'` succeeds before bundling.

３－４．herokuへのpushに失敗（その１）

「２－８．herokuへpush」のgit pushコマンド実行時、以下エラーが出て失敗。原因は「heroku create」時にプロジェクトフォルダに移動していなかったため。heroku上にアプリはcreateされてしまっているので、herokuの管理画面にてアプリを削除後、プロジェクトフォルダに移動し、再度「heroku create」を実行すると解消。

$ git push heroku master
fatal: Not a git repository (or any of the parent directories): .git

３－５．herokuへのpushに失敗（その２）

３－４解消後、再度git pushコマンドを実行すると別のエラーが発生。原因はbundle install後、「２－７．git add & commit」を実施しなかったため。２－７の対応を実施することで解消。四苦八苦して色々弄っていましたが、git push前は必ず２－７の対応を実施するようにクセ付けると良いと思います。

$ git push heroku master

<<略>>

remote:  !
remote:  !     Gemfile.lock required. Please check it in.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

３－６．herokuへのpushに失敗（その３）

３－５解消後、再度git pushコマンドを実行すると、またまた別のエラーが発生。これは単純に自分のポカなのですが、「２－４．Gemfile修正」の際に、「gem 'sqlite3', '1.3.13'」の記述の削除が漏れていたため。記述を削除し、再度bundle install,git add -A,git commit -m messageすることで解消。

remote:  !     Failed to install gems via Bundler.
remote:  !     Detected sqlite3 gem which is not supported on Heroku:
remote:  !     https://devcenter.heroku.com/articles/sqlite3
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

３－７．herokuへのrails db:migrateに失敗

正常にherokuへpushしたあと、herokuへdbマイグレートしたところ以下エラーが発生。原因は、色々四苦八苦している中で「bundle install --without production」（Gemfile内のprodacution項目をインストールしない）を実行していたため。withoutオプション付きでbundle installを実行すると、その設定がプロジェクトフォルダ配下の「.bundle/config」に保持され、ずっと有効になるとのこと。

対応として「.bundle/config」を削除し、再度オプション無しで「bundle install」を実行し「２－７．git add & commit」実行後、「 git push heroku master」を再実行することで解消。

$ heroku run rails db:migrate
Running rails db:migrate on ⬢ shrouded-anchorage-47928... up, run.8592 (Free)
rails aborted!
Gem::LoadError: Error loading the 'postgresql' Active Record adapter. Missing a gem it depends on? pg is not part of the bundle. Add it to your Gemfile.

３－８．１度は成功したはずのherokuへのpushにまた失敗

[ 2018/8/18追記 ]
昨日再度git pushコマンドを実行すると、以下エラーを出力して失敗。原因は不明。Cloud9（開発環境）側でRailsサーバが立ち上がったままだったので、停止して再度herokuへpushしたところ成功しました。

Cloud9側でRailsサーバを立ち上げてるとpushできないのかな？と解釈していたんですが、検証のため本日Cloud9側でRailsサーバを立ち上げたままでpushしてみたところ成功しちゃいました。まだまだherokuは謎が多いです。

error: pack-objects died of signal 9
error: pack-objects died of signal 9
error: pack-objects died of signal 9
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
fatal: The remote end hung up unexpectedly
error: failed to push some refs to 'https://git.heroku.com/mysterious-cove-42981.git'

４．参考にしたサイト

先人たちがエラーと奮闘した結果を共有してくださっていたおかげでデプロイできました。感謝。

cloud9にheroku-cliを最短でインストール – LilPacy.info
Cloud9でHerokuが使えない時の対処法
cloud9 から heroku にデプロイするまで ＋ ごにょごにょ

【AWS】CodeStar + Cloud9でRuby on Railsの開発環境を構築するまとめ

ども。久しぶりの更新です。年始にprogateってサービスでプログラミング学んでから、気が向いたときにRuby on Railsで遊んでるのですが、開発環境作りに結構手間取ったのでAWSのCodeStar+Cloud9でRuby on Railsを動かす方法についてまとめておきたいと思います。同じように悩む人が少しでも少なくなれば嬉しいです。 

なお、この記事は2018年6月17日に書いたものであり、その後のAWS側の変更次第では以下の通りに実施しても動かない可能性があるのでご了承ください。

１．AWS上でCodeStar,Cloud9登録

１－１．Cloud9利用可能リージョン選択

まずは、Cloud9が利用可能なリージョンを選択します。残念ながら日本(東京、大阪)リージョンは利用不可なので、ここではオレゴンリージョンを選択します。

対応しているリージョンは以下を参照していただければと思います。

リージョン - グローバルインフラストラクチャ | AWS

１－２．CodeStarで新規プロジェクト作成

続いて、サービスを選択して、「開発者用ツール」の「CodeStar」を選択します。

AWS CodeStarの画面が表示されるので「新規プロジェクトの作成」を選択します。

１－３．Ruby on Rails(EC2)選択

そのあと、いろいろ開発環境の候補が出てくるので、ここでは「Ruby on Rails,Amazon EC2」を選択します。

１－４．プロジェクト名とソース保存レポジトリ選択

プロジェクト名（ここでは「RubyProject」と入力）を決めて、ソース保存レポジトリを選択します。アカウントを持ってる場合は、日経曰く「設計図共有サイト」らしいGitHubを選択すればよいと思います。僕は持ってないのでAWS CodeCommitを選択しました。

で、「プロジェクトを作成する」ボタンを押しましょう。

１－５．キーペア選択

ログインに利用する、キーペアを選択します。過去にキーペアを作成したことない場合は、サービスから「EC2」－「N個のキーペア」－「キーペアの作成」を選べば作成できます。

１－６．コード編集方法選択

コードの編集方法をせんたくします。ここでは当然「AWS Cloud9」を選択します。

１－７．EC2のタイプ選択

EC2のタイプを選択しましょう。無料枠で納めたい場合は「t2.micro」を選択します。

１－８．待ち

ようやく登録が完了して、セットアップが始まります。青色の２つの丸がくるくる回っているので15分くらい待ちましょう。そのうち緑色に変わればセットアップ完了です。

１－９．サンプルアプリ表示

緑色になったら、「アプリの表示」をクリックすると、サンプルアプリが表示されます。

なんか凄い

１－１０．Cloud9表示

横の「コーディングの開始」を選択するとCloud9の画面に遷移します。ブラウザだけでここまでできるとか、この先の世の中ネイティブアプリとか無くなるんじゃないのって思っちゃいますね。

CodeStar + Cloud9の登録は以上となります。

２．Cloud9の設定

続いて、Cloud9の設定に移ります。Cloud9のRuby on Railsは何故か以下の問題を抱えているので、こちらで設定してあげないと動きません。環境変数はともかく、他はマジでなんでなんだろう。

・gem listコマンドの結果とGemfileの内容が一致しない。

・Ruby on Railsプロジェクトのディレクト配下にbinフォルダが存在しない。

・SECRET_KEY_BASE環境変数の設定がされていない。

２－１．Gemfileの内容にgem listを合わせる

[2018/8/9追記]

以前はGemfileの内容とgem listとでrailsバージョンの表示結果が異なっていたのですが、本日確認したところ両方とも5.2.0になっており解消されていました。代わりに何故かSqliteのバージョンが異なっているため、bundle installはどのみち必要みたいです。

つーわけで、一つづつ解消していきます。Gemfileってのはgem(rubyのパッケージを管理するツール)の依存関係を管理するファイルらしいです。ジェムって読むらしいですね。ずっとゲムだと思ってた。

Cloud9はデフォルトでGemfileのパッケージ内容と実際に導入されているパッケージに差分があるためコマンドとかが上手く動きません。本当になぜなんだ…。

この問題を解消するために、Cloud9の下側にあるターミナル画面で「bundle install」コマンドを実行します。その前に、プロジェクトのフォルダに移動するのを忘れないでください。エラーになります。

ec2-user:~/environment $ cd rubyproject
ec2-user:~/environment/rubyproject (master) $ bundle install

The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies.....
Fetching rake 12.3.1
Installing rake 12.3.1

＜略＞

なお、Rails系のコマンドはプロジェクトフォルダ内で実行しないと概ねエラーになります。ターミナルを新規起動する度移動する必要があるので注意しましょう。

２－２．binフォルダ作成

続いて、以下コマンドでbinフォルダを作成します。

ec2-user:~/environment/rubyproject (master) $ rake app:update:bin

できた。

ec2-user:~/environment/rubyproject (master) $ ls -ltr bin
total 20
-rwxr-xr-x 1 ec2-user ec2-user 782 Jun 17 05:03 update
-rwxr-xr-x 1 ec2-user ec2-user 920 Jun 17 05:03 setup
-rwxr-xr-x 1 ec2-user ec2-user 90 Jun 17 05:03 rake
-rwxr-xr-x 1 ec2-user ec2-user 141 Jun 17 05:03 rails
-rwxr-xr-x 1 ec2-user ec2-user 129 Jun 17 05:03 bundle

２－３．SECRET_KEY_BASE環境変数設定

このままだと、rails起動に必要な「SECRET_KEY_BASE」という環境変数が設定されていないため、プレビュー画面を見ても以下のエラーが発生してしまいます。

Puma caught this error: Missing `secret_key_base` for 'development' environment, set this value in `config/secrets.yml` (RuntimeError)

というわけで設定していきましょう。以下のコマンドを実行すると「SECRET_KEY_BASE」環境変数に値が入って、ちゃんと起動するようになります。

$ rake secret > ~/.taskapp_secret_key_base
$ cat ~/.taskapp_secret_key_base
＜長い文字列が表示される＞
$ export SECRET_KEY_BASE=`cat ~/.taskapp_secret_key_base`

毎回実行するのがめんどくさい場合は、「.bash_profile」にexportコマンドを登録してあげればよいです。

$ vi ~/.bash_profile

 以下を登録して保存。

export SECRET_KEY_BASE=`cat ~/.taskapp_secret_key_base`

 ２－３．Ruby on Rails起動

以下コマンドでRailsを起動します。progateの時と違って開発環境ではバインドするIPを指定するフラグが必要らしいです。

rails s -b $IP

２－４．動作確認

以上でCloud9の設定は完了です。では、progateででてきた「rails generate controller home top」コマンドをプロジェクトフォルダ(ここでは「rubyproject」)配下で実行して表示を確認してみます。

$ rails generate controller home top
create app/controllers/home_controller.rb
route get 'home/top'
invoke erb

＜略＞

 Cloud9の「Preview」から「Preview Running Application」を選択します。

何故か真っ白なプレビュー画面が表示されるので、左上のボタンをクリックします。

ブラウザの別タブにRailsのプレビュー画面が表示されるので、アドレスの後ろに「/home/top」と入力します。

デフォルトでcssの設定がされてあるので、色ついてますが表示されました。設定は以上になります。

３．その他の注意点

その他、CodeStar+Cloud9を使用する際の注意点を書いてみます。主に料金系ですね。その他、思いついたら追記していきます。

３－１．EC2インスタンスは自動で停止しないことがある

Cloud9は30分操作しないとEC2インスタンスを自動で停止する機能があるのですが、なぜかたまに停止してくれないことがあります。起動したままにしておくと、思わぬ料金が発生することがあるので注意しましょう。

３－２．ディスク使用料が無料枠を超えていないか注意

CodeStar+Cloud9で環境を作るとEC2インスタンスが自動で２つ作成されます。それぞれのインスタンスに8GBのディスクが割り当てられており、それだけで16GB使ってしまいます。無料で使用できるディスクは30GBまでなので、無料内で納めたい場合は、作る環境は一つまでにしておきましょう。

 ４．最後に

以上でこの記事は終わりです。一応、初めての方でもわかりやすいように書いたつもりなのですが、「わからない」「書いてる通りにやっても動かない」とかあれば見直すので教えていただければと思います。

また、有識者の方々におきましては、誤っている点や、もっと良い手順があれば優しく指摘していただければ嬉しいです。

ではでは、サクッと環境を作ってプログラミングを楽しみましょう！

AWS Cloud9でTwitter認証(omniauth)ログインをテストした際にハマった点と解決方法

ども。引き続きRuby on Railsで遊んでるのですが、今回はTwitter認証によるログインでハマった点と、その解決策について書いていきます。

そもそもTwitter認証とは

Webサービスにログインするときに、昔はメールアドレス＆パスワードを入力してログインしてましたが、昨今はTwitterやFacebook経由でログインできるアレです。

Twitterの場合、↓のような画面を経由してログインできます。サービス利用者側はいちいちメルアドとパスワード入れなくてもログインできて楽というものがありますが、作る側としてはメルアドみたいな個人情報を保持しとかなくても良いっていうのは結構メリット大きいなと感じてます。

Ruby on Railsでの設定方法

2018年6月27日現在、以下Qiita様の記事の通り設定すれば後述するエラーが発生した箇所以外はうまく行きました。感謝。
qiita.com

ハマった箇所

そんで、先述したQiita様の記事に従い設定し、いざTwitterログインのリンクをクリックしたところ、以下エラーが発生しました。

調べたところ、Twitter開発用のページでアプリ登録を行う際に設定する際のコールバック用URLが誤っているときに出るエラーの模様。

403 Forbidden
Extracted source (around line #236):
             
    self.token_request(http_method, uri.path, token, request_options, arguments)
  when (400..499)
    raise OAuth::Unauthorized, response
  else
    response.error!
  end

解決方法

元記事では、ローカルで動かす場合はWebsite、及びCallbackには「172.0.0.1:3000」と書く必要があるとの記載があり、この通りに設定していました。が、これが良くなかった模様。（まぁ、後から考えてみればローカル環境ではないので、あたりまえなのですが…）

https://apps.twitter.com/app/new で設定をする。ローカルで動かすときのためにWebsiteにはhttp://localhost:3000 ではなく、http://127.0.0.1:3000 と書かないとうまく行きません。
あと、Callback URLはhttp://127.0.0.1:3000/auth/twitter/callback にしておく。
ここで取得できるAPI KeyとAPI Secretは後々使うのでメモしておく。

具体的には、「http://localhost:3000」の部分をCloud9のプレビュー画面に表示されるURLに置き換えて設定すればTwitter認証ログインに成功しました。

・以下赤枠部分をコピーし、

・Twitterのアプリ登録画面の「Website」と「Callback」に張り付ける。「Callback」にはURLの後ろに「/auth/twitter/callback」を記入する。

で、うまく認証画面が表示されました。些細なことなのですが、色々調べても同じ事象の記事がみつからず3時間ほど試行錯誤してようやく認証画面に辿り着きました…。同じように迷っている方の参考になれば幸いです。

合格体験記 応用情報技術者試験

ども。３度目の正直になるのですが、ようやく応用情報技術者試験に合格しました。これから受けられる方は、かっこよく一発合格した体験記の方が参考になるかと思いますが、まぁ、２回落ちたからこそ書けることもあるだろうと、受かるまでのアレコレを残しておこうと思います。

受験日

2018年4月15日

スコア

１回目（不合格）：
午前：68
午後：48

2回目（不合格）：
午前：72
午後：58

3回目（合格）：
午前：77.5
午後：68

勉強時間

120時間くらい（概算）

使用テキスト・アプリ

応用情報技術者　合格教本
応用情報技術者　一門一答問題集
応用情報技術者試験　午後の重点対策
IPA 独立行政法人 情報処理推進機構：過去問題

勉強方法

１回目

不合格となった１回目ですが、勉強期間は１か月くらい。過去問と解説書である「応用情報技術者　合格教本」を使用し、過去２年分（４回）の過去問をひたすら解き、わからないところ（大体わからない）は、解説を読む。それでも理解できない場合はWebで調べるを繰り返しました。それを３周くらい行い繰り返した上で、IPAで公開されている直近の過去問を解いたところ午前については７，８割程とれました。

問題の午後についてですが、同じく「応用情報技術者　合格教本」を使用し過去問を解くを繰り返しました。しかし、選択問題である午前問題と違い、午後問題は「○○について30文字以内で答えよ」というような問題が多く、答え合わせしたところで「テキストの解答とニュアンスは有ってるんだけど正解もらえるかわからない」といった感じが多かったです。まぁ、なんとかなるかなーと思って試験に挑みましたが上述の通り撃沈。

２回目

同じく不合格となった２回目の勉強期間は２週間くらい。午後に特化して勉強したかったので、新たに「応用情報技術者試験　午後の重点対策」を購入。またスマホアプリである「応用情報技術者　一門一答問題集」をiphoneに入れました。午前の問題は出勤時間(往復３時間くらい…）にひたすらスマホアプリで解き、仕事が終わった後２時間くらいは机の前でしっかりと午後問題を解くを繰り返しました。

「応用情報技術者試験　午後の重点対策」は、題名の通り午後に特化した問題集で、問題の解き方、時間をかけるべき問題、そうでない問題が懇切丁寧に説明されています。特に上述した「○○について30文字以内で答えよ」というような問題に対しては、問題文の用語を用意ること、文字数にあまり固執しないこと等、目からうろこな感じの解説が多く、大変参考になりました。…が、午後２点不足で不合格。単純に勉強時間不足でしたね。

３回目

ようやく合格した３回目は、２回目と同じことを追加で２週間行いました。午後問題は受ける年によって、結構難易度がかわるのですが今回は特に簡単な方だったかなと思います。なんにしても、受かってよかった。

所感

今から振り返ると、勉強期間はしっかり２か月とる。午後は最初から「応用情報技術者試験　午後の重点対策」を使って勉強する。を実施していれば１発合格できたかなーと思います。（期間が長いとなかなか、やる気スイッチが入らないんですよねぇ。）

肝心の試験内容についてですが、ネットワークやデータベース、プログラミングにセキュリティと広く、そこそこ深い内容となっています。ただし、概念や用語の内容が主になっており、この試験に合格したところで、実際にサーバを立てれるようになったり、プログラミングで何か作れるようになるわけでは無く、そこらへんは、ネットワークならCCNA、LinuxならLPIC等々ベンダー試験の方が強いなーと感じました。

ただ、いわゆるIT業界についての知識を横断的に学習できるのはこの試験くらいなので、視野を広げる意味でよい勉強になりました。これから受験を考えている方も、普段は専門に特化した勉強、および実務を行っているかと思いますが、自分の裾野を広げる意味でもチャレンジする価値はあるかと思います。

【Ruby on Rails】Checkboxの値を配列としてコントローラに渡し、チェックがついている値だけDBに保存する方法

ども。最近、趣味で毎晩Ruby on Railsで遊んでいます。twitterの100日間なにかしらコード書いていこうぜっていう趣旨の#100DaysofCodeという企画に乗っかってて、なんとか100日間継続してやっていきたい感じです。んで、本日は6日目になるのですが、振り返りも大事だろうということで、直近で学んだことをまとめておきたいと思います。

なお、この記事は最初にこの記事を知ってればもっと楽だったのにな…という観点で3日前の僕(progateのRuby on Railsを一周したレベル)を想定読者として書いています。

Checkboxのチェックがついている値だけを取得する

というわけで、記事タイトルで書いてますが、Cehckboxのリストに対し、チェックがついている値だけをDBに保存する方法について書いていきます。

Checkboxの値を配列に格納する

では、早速ですがCheckboxの値を配列に格納していきます。Ruby on Railsでチェックボックスを使う場合、check_boxというタグを使います。（ほかにもcheck_box_tagというのもありますが、ここでは説明を割愛します。）

check_boxの書式は以下の通りです。他オプションとか詳しいことはrailsドキュメントとかを見てください。

<%= check_box "オブジェクト名","プロパティ名" %>表示名

んで、オブジェクト名に指定した文字列へ、二次元配列として「"プロパティ名"、"チェック状況(0 or 1)"」が格納されます。具体例として、以下のように記述すれば…

<%= form_tag("/posts/like") do %>
  <ul>
    <li><%= check_box "gamelist", "マリオ" %>マリオ</li>
    <li><%= check_box "gamelist", "ゼルダ" %>ゼルダ</li>
    <li><%= check_box "gamelist", "カービィ" %>カービィ</li>
  </ul>
  <input type="submit" value="投稿">
<% end %>

「gamelist」という配列に、「マリオ」「ゼルダ」「カービィ」とそれに対応するチェック状況が格納されます。

上記状態だと、以下のように、それぞれのタイトルに対しチェック無しの場合は「０」、有りの場合は「1」が二次元配列に格納されます。

＜gemelist配列内容＞
　マリオ,0
　ゼルダ,1
　カービィ,0

コントローラでチェックがついている値だけDBに格納

後は、form_tagで定義している/posts/likeeに対するコントローラファイルを以下の通りに定義し、チェックがついている値だけを取り出します。（ルールファイルの定義は適切にされているものとします。）

def like
  # params:[gamelist]で配列の値を取得可能。
  # 二次元配列の場合、受取先の変数を2つ宣言する。下記例では、
  # di1がタイトル、di2がチェックボックスの状態(0 or 1)が格納される。
  params[:gamelist].each do | di1,di2 |

    # チェックボックスにチェックがついている場合
    if di2 == "1"
      # DBのtitleカラムにタイトルを格納し保存
      @get_game = GetGame.new(title:di1)
      @get_game.save
    end
  end 
  redirect_to("/posts/index")
end

あとは、適時redirect_to先のページで、DBの内容を表示させるなりしてください。

参考にしたサイト

ナレッジをアウトプットしてくれる方がいるから前に進めます。感謝。

kiyorin-net.blogspot.com

合格体験記 LPIC102(ver4.0)

ども。去年LPIC201に合格したとき、期限が切れてた101,102を年内に再取得できればいいなぁとか書いてたのですが、気が付けば年が明けて2月も半ばですね。あけましておめでとうございます。

合格体験記 LPIC201(ver4.5) - わかったつもりになってない？

合格体験記 LPIC202 (ver4.5) - わかったつもりになってない？

年明けてからProgateってWebサービスでプログラミング学んだりして遊んでたのですが年度内には取っちゃいたいので、今週勉強して無事LPIC 102受かりました。先に201,202から攻めていくことは希だと思うのであまり参考にならないかもですが残しておきます。

受験日

2018/2/12

取得点

640

勉強期間

1週間（一日平均2時間くらいでトータル15時間くらい）

使用テキスト

無し

参考にしたサイト（Web問題集）

Ping-t

勉強方法

今回実機は使用せず、ひたすらPing-tの問題を解きながら学びました。先にLevel2を取得している身としては、余裕だろうなーとか思ってたのですが、結構初見（覚えていない）問題が多くて焦りました。

特に、ディスプレイマネージャや、プリンター周りが覚えていなかったので、重点的に勉強。全て金になるまで説いたあと、前日に学習履歴を全て削除して、再度金になるまで解きました。

これから勉強する人は、とりあえずPing-tのWeb問題集を9割り以上解ける状態にして挑めば、そうそう落ないんじゃないかなと思います。

所感

流石にここで落ちたら恥ずかしいなとか思っていたので、無事受かって一安心です。

今後

というわけで、年度内にLPIC Level2の取得を目指して、ボチボチ勉強していたのですが、残すところはLPIC 101のみとなりました。2月中には取得できるよう頑張ります。