Railsでリダイレクト時にアンカーを設定

Railsでは、redirect_toメソッドに対してモデルのオブジェクトを渡すと、そのオブジェクトを表示するページに簡単に遷移させることができます。

# /users/<id> に遷移
redirect_to @user

ただ、アンカー(ページ内での位置)を指定するには少し工夫が必要で、次のように指定します。

# /users/<id>#description に遷移
redirect_to user_path(@user, anchor: 'description')

※user_pathはroutes.rbで定義しておく必要があります。

Rails(Turbolinks)でGoogle AdSenseを利用

TurbolinksはPjax(pushState + Ajax)を実現するためのライブラリで、Rails 5では標準で有効になっています。Turbolinksを使うと、ページ遷移時に画面全体の読み込みが行われないため、非常にスムーズな操作性を実現することができます。

しかし、Turbolinksが適用されたサイトにGoogle AdSense(Googleが提供する広告配信サービス)を導入すると、ページ遷移後に広告が正しく表示されない問題が発生する場合があります。

これを防ぐには、Turbolinksによる画面の読み込みをトリガとして、新たに表示された広告ユニットを認識させる処理を加える必要があります。

例えば、自動サイズの広告ユニットを表示させる場合、Turbolinksを適用させていない通常のサイトでは、<head>タグ内に

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

を追加した上で、HTMLの広告を表示させたい場所に次のようなコードを挿入します。一つのページに複数の広告ユニットを表示することも可能です。

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

一方、Turbolinksが適用されたサイトでは、<head>内でのadsbygoogle.jsの読み込みは同じですが、広告を表示させたい場所には<ins>タグのみを挿入し、

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

その上で次のコードを<head>タグ内に挿入します。(外部Javascriptファイルに切り出して、読み込ませてもOKです。)

document.addEventListener('turbolinks:load', function () {

  var ads = document.querySelectorAll('.adsbygoogle');

  if (ads.length > 0) {
    ads.forEach(function (ad) {
      if (ad.firstChild) {
        ad.removeChild(ad.firstChild);
      }
    });
    ads.forEach(function() {
      window.adsbygoogle = window.adsbygoogle || [];
      window.adsbygoogle.push({});
    });
  }
}

ここでは、 adsに格納された<ins>要素を一つ一つ走査し、既に広告の実体が挿入されている<ins>に関しては初期化を行った上で、 window.adsbygoogleに対して空のハッシュを挿入することで、adsbygoogle.jsに対して広告ユニットの存在を知らせています。

以上で、Turbolinksが利用されたサイトでもGoogle AdSenseによる広告が正しく表示されるようになります。

WindowsにRuby on Rails環境をセットアップ

Windows10においてRubyおよびRailsフレームワークをインストールする手順についてのメモです。

Rubyのインストール

WindowsでRubyをインストールする手段はいくつかあるようですが、RubyInstallerを使うのが簡単なようです。

RubyInstallerのダウンロード

RubyInstallerをダウンロードするには、http://rubyinstaller.org/にアクセスをして、Downloadボタンをクリックします。

左側のRubyInstallersの中から、インストールしたいバージョンのリンクをクリックします。ここでは、最新安定版であるv2.2.4の64ビットマシン用のインストーラを選択しました。リンクをクリックするとダウンロードが開始します。

 

インストーラの実行

ダウンロードしたインストーラを起動すると、まず言語の選択ウィンドウが表示されます。ここでは日本語を選択しました。

次に、使用許諾契約書に同意をし、「次へ」ボタンをクリックします。

次に、インストール先とオプションを指定するための画面に進みます。インストール先は初期値とし、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れ、「インストール」ボタンをクリックします。

インストールのインジケーターが進み、以下の画面が出たら「完了」をクリックしてインストールは終了です。

DevKitのインストール

Windows上でネイティブC/C++拡張を利用するためのツールで、Railsを利用するために必要となります。ダウンロードは、RubyInstallerと同じページです。左側のメニューのDEVELOPMENT KITから、インストールしたRubyに合ったパッケージをクリックします。

ダウンロードしたファイルは、自己解凍アーカイブになっているため、先ほどRubyをインストールしたフォルダにdevtoolsというサブフォルダを作成し、そこを選択します。

次のようなインジケーターが進み、100%になると自動的にウィンドウが閉じます。

次に、コマンドプロンプトを開き、DevToolsを展開した場所に進みます。(エクスプローラで対象のフォルダを開き、Shift + 右クリックで表示されるコンテキストメニューから「コマンドウィンドウをここで開く」を選択すると楽です。)

コマンドプロンプト上で以下のコマンドを実行します。

>ruby dk.rb init
>ruby dk.rb install

以上でDevKitのインストールは完了です。インストール後もdevtoolsフォルダは消さないよう注意してください。

Railsのインストール

Railsをインストールする準備が整いましたので、gemを利用してインストールします。gemはRubyのパッケージマネージャで、RubyInstallerを使ってRubyをインストールすると、一緒にインストールされています。Railsをインストールするには、以下のコマンドを利用します。

>gem install rails

完了までに数分かかります。正しくインストールできていることを確認するために、railsコマンドを実行します。

うまくインストールできているようですね。

Top