Sqale+RailsでWebサイトを作ってみる

未分類

あけましておめでとうございます、とんトロです。
年末年始を使って「ひつじみくじ」というくだらないWebサイトを絵を込みで4日くらいで作成してみました。

image
ひつじみくじ

記事について

今回はほぼはじめてのサーバーサイドということでSqale+Railsでウェブサイトを作る、というところを目標に掲げて作りました。
最初から最後までを説明すると長くなるのでかいつまんでの説明です。
同じようにSqale+Railsで何か作ってみる場合の参考になれば幸いです。

Sqaleとは

https://sqale.jp/

GMOペパボが運営するPaaSです。
構築作業をせずに、すぐにRailsを動かせる。
GitでリポジトリにPushすればデプロイしてくれる。
2週間無料。
料金体系が想像しやすい。
という点から採用しました。
選択肢としてはHerokuも考えていました。

なおAWSの東京リージョンで動いているらしいです。

すごくサックリと試せるので、これから作ってみたいという人にはオススメです。
パフォーマンスまわりは、よく分かってないです(ごめんなさい)

ほぼ作業メモなのでRails入門のサイトなりと併せて、つまづいた時にでも読んで頂けるといいと思います。

SqaleのGitデプロイができない場合

デフォルトはSFTPが選択されています。
デプロイ設定はアカウント毎の設定のようでダッシュボードの「アカウント設定」からできます。
アプリケーションの設定ではないのでご注意を。

SSHログインができない場合

最初ダッシュボードより鍵を生成してSSHログインを試みたのですが、うまくいきませんでした。
Macの場合はターミナルよりssh-keygenして生成した鍵を使うのが良いかもしれません。
やり方はサポートページに載っています。
Sqale – 公開鍵の設定方法 (Mac 編)

SqaleではアプリケーションサーバーにUnicornを使っている

なのでローカルでの開発段階からUnicornを使うと良いと思います。

アクセスからHtmlレスポンス生成まで

サーバーへのアクセス->ルーティングにてコントローラクラスのメソッドを指定->コントローラーのメソッドにて必要な処理を行う。-&gt必要があればテンプレートが使えるように変数を定義->対応するerbというテンプレートファイルからHtmlを生成

という流れで処理されているようです。

コントローラ生成

プロジェクトを作成したら

でコントローラを作成します。
この時ルーティング設定、テンプレートなどなども自動で追加してくれます。

例えば

http://somehost/ctrl/act1

http://somehost/ctrl/act2

にアクセスできるようになり
対応するコントローラとビューが生成されます。

コントローラ編集

app/controllers/ctrl_controller.rb
のようなファイルが生成されおり、クラスも生成されています。
クラス内のメソッドは
def act1 ならば http://somehost/ctrl/act1
def act2 ならば http://somehost/ctrl/act2
にアクセスがあった時に実行されます。
この設定はカスタマイズもできます。

入門:ビュー編集

コントローラctrlのメソッドact1に対応するビューは
app/controllers/views/ctrl/act1.html.erb
になります。
実際に返したい内容のhtmlを作ります。

ただしここに書くのはbody内のコンテンツのみで
ヘッダなどの編集をするには
app/controllers/views/layouts/application.html.erb
をいじります。
ここにある<%= yield %>の部分が各ビューに置き換わるイメージです。

ビューに変数を渡したい

コントローラのメソッド内で

のように書くと

とerbでnameの値を参照できます。

入門:ルーティング

サーバーにアクセスがあった時、どのコントローラを使用するか、リダイレクトをするか、などの振り分け作業をルーティングと言います。
この設定が書かれているのが/app/config/routes.rbです。
以下、今回自分が使った設定と意味です。

http://somehost/ctrl/actionへのGETでのアクセスを

ctrlというコントローラのactionというメソッドに対応させる

http://somehost/ctrl/actionへのGETでのアクセスを

ctrlというコントローラのactionというメソッドに対応させる。
上との違いはURIとコントローラを別々に設定できるところです。

http://somehost/ctrl/action/3へのGETでのアクセスを

ctrlというコントローラのactionというメソッドに対応させる。
:idの部分の文字列は、actionメソッド内でparams[:id]で参照可能。

http://somehost/index.htmlへのアクセスがあった時、

http://somehost/へのリダイレクトを行う。

Missing secret_key_base

ローカルで実行していたアプリをいざデプロイするとページが表示されない…。

のようなログを発見しました。
調べてみると、どうやら本番環境ではサーバー側の環境変数を参照する箇所があるようです。
これがなぜ存在しているかは分かりませんが(暗号化などに使える汎用的なキーなのでしょうか?)
SECRET_KEY_BASEという環境変数が必要なようです。
Sqale上での環境変数の設定の仕方はSqale – FAQ: 技術的な仕様に関する質問にのっています。

以下参考リンクです。

Rails が production 環境で真っ白、SECRET_KEY_BASE 設定忘れが原因でした | EasyRamble

Rails 4.1 の secret.yml とは… – ARCHIVESDRIVE HD

Angularが動かない時がある。jQueryのreadyが動かない…

今回はAngularJSとjQueryを使用していたのですが、ここで問題が起きました。
どうやらRails4にはturbolinksというページ遷移をAjaxに置き換える機構がデフォルトで備わっているようです。遷移イベントをフックしてページのDOMのみを書き換えて、擬似的に遷移を実現するようなカンジです。
このおかげで遷移は早くなりますが、$(document).ready()などを使用しているとイベントが起こらず挙動がおかしくなります。
Ruby – Rails 4 で turbolinks をオフにする方法 – Qiita
でturbolinksをオフにした方がいいと思います。
これは結構ハマりました。

以下参考リンクです
Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc

Twitterでの画像ポスト

当初、Twitterのウェブインテントを使おうとしてたのですが画像付きのポストに対応してませんでした。
もし画像ポストをしないつもりなら、ウェブインテントを使った方が楽です。
形式に沿ったURLを生成するだけで、テキスト、ハッシュタグなどを組み込んだフォームを呼び出す事ができます。
Web Intents | Twitter Developers

なので
RailsでOmniauthを使ってTwitterログインする – Qiita
を参考にアプリ連携を実装しapiを叩くようにしました。
1時間くらいで認証できるようになったので感動しましたw

詳細な処理が分かってないので手順だけ書きますが
- /app/initializers/omniauth.rbを作って、consumerKeyとsecretKeyをセット
- 未ログイン時に/auth/twitterへリダイレクトで認証周りの処理をする
- Twitterの連携ページへ自動的に移動。
- Twitterから/auth/:provider/callbackが呼ばれるのでルーティング設定
- コントローラ側で認証情報をリクエストから取得してsessionsに適宜保存

こんなカンジで楽に設定ができます。
投稿時はgemのtwitterを使用して

という処理をするだけで投稿ができます。
これならネイティブアプリでの投稿機能も自前で実装できそうでホクホクしております。

と、いうわけでざっとこんなカンジでした。
もっと踏み込みたい方はサイトなり書籍なりを購入すると良いと思います。