ajaxでHTMLをリクエストするタイプの設計のときに、メタ情報もうまく受け取りたい

Railsアプリケーションを書くときに、turbolinksやstimulusなどを使い、なるべくサーバサイドはHTMLを返してjsをあまり書かずに楽をする、という方針でいくとします。このように割り切るとだいぶ楽なのですが、例えば次のようなケースで悩みます。

コメントを最新10件表示する
コメントが11件以上ある場合は「もっと読む」ボタンが表示される
「もっと読む」を押したときにajax経由でHTML片を取得し、新しくコメントを10件追加表示する
最後のコメントにたどり着いたときに「もっと読む」ボタンを消す

一番最後の「もっと読む」ボタンを消すやり方が悩みどころです。単にHTMLを受け取りコメントの末尾に差し込むやり方では対応できません。だからといってレスポンスをJSONで返し、そこからDOMを生成するのは面倒なのでやりたくない。

いくつかやり方を考えてみました。

DOM構造を変更し、「もっと読む」ボタンを上書きできるような形でコメントを追加できるようにする
サーバからはHTMLを含んだjsを返し、クライアント側ではそれを実行するようにする。js内でHTMLの挿入と「もっと読む」ボタンの削除を両方できるように書く
(stimulusを使っていれば)「最後のコメントまで来た」というdata-targetを追加で挿入しておき、HTMLを挿入したあとにtargetをチェックする
レスポンスヘッダに「これが最後のコメントである」という情報を含める

3か4のどちらかがよさそうです。1はDOM構造がページングの仕様に引きずられてしまうのがよくないでしょうし、2はstimulusを使っている場合はjsの処理が散らばるので可読性が下がりそう(stimulusを使っていなければこれが楽でよさそうです)。3は悪くないですが、これも若干DOM構造がページングの仕様に引きずられる感じがありますね。直感的ではない。

stimulusを使っているので、最終的に4で実装しました。こんな感じ。

    fetch(Routes.api_comments_path({ page: nextPage }), { credentials: 'include' })
      .then(response => {
        if (response.headers.has('X-Comments-Last-Page')) {
          this.pagingButtonTarget.style.display = 'none'
        }
        return response.text()
      })
      .then(html => {
        this.commentListTarget.insertAdjacentHTML('beforeend', html)
        this.data.set('page', nextPage)
      })

2018-10-09

macで/etc/hostsに定義を追加するときの注意点

開発用に、127.0.0.1に解決されるドメインを/etc/hostsに登録する、ということはそれなりにあると思います。

そのときに、次のように複数行に分けて書くとなぜか example.com へのDNS lookupがめちゃくちゃ遅くなります。自分の環境ではだいたい5秒ほどかかりました。

127.0.0.1       localhost 
127.0.0.1       example.com

これを次のように1行で書くと問題なくなります。

127.0.0.1       localhost example.com

なぜか開発用のサーバが遅い！となってからここにたどり着くまでめっちゃ大変でした…＞＜

参考

superuser.com

確認したバージョン

macOS 10.13.6

参考リンクをたどると、ずっと前からある問題っぽいですね。

2018-09-16

OmniAuthでログインを失敗したときのテストでエラーが出たときの対処法

OmniAuthを利用したログインのsystem specで、ログインに失敗した場合のテストが次のようなエラーになった。

  1) ユーザがログインする ログインに失敗したとき "ログインに失敗しました"と表示されること
     Failure/Error: click_link 'Twitterでログイン'
     
     OmniAuth::Error:
       invalid_credentials
     # ./spec/system/login_spec.rb:98:in `block (3 levels) in <top (required)>'

もとになったspecはこちら。

  context 'ログインに失敗したとき' do
    around do |example|
      original_mock_auth = OmniAuth.config.mock_auth[:twitter]
      OmniAuth.config.mock_auth[:twitter] = :invalid_credentials
      visit root_path
      click_link 'Twitterでログイン'
      example.run
      OmniAuth.config.mock_auth[:twitter] = original_mock_auth
    end

    it '"ログインに失敗しました"と表示されること' do
      expect(page).to have_content 'ログインに失敗しました'
    end
  end

これまでは普通にテストが通っていたのでなんだろうと思って調べた。

原因

OmniAuthはデフォルトの挙動して、RACK_ENVがdevelopmentのときに単にOmniAuth::Errorを投げる設定になっている
- omniauth/failure_endpoint.rb at 8179ba796aae82f857f63b50ae848a3fbe369b4d · omniauth/omniauth
- それ以外の環境ではエラー用のURLにリダイレクトする(これが期待していた挙動)
jsを利用したsystem specのときにpumaをサーバとして使っている
- pumaは起動時にRACK_ENVが設定されていないと、developmentを設定する
- puma/server.rb at master · puma/puma

つまりテストの実行順序の問題で、pumaの起動がOmniAuthのテストより前に来てしまうとRACK_ENVがdevelopmentになり期待していた挙動と異なる振る舞いをするようになってしまっていた。

とりあえず明示的に、次の行をconfig/rails_helper.rbに追加したところうまく動くようになった。

ENV['RACK_ENV'] ||= 'test'

所感

これ、自分と同じようにハマる人が出てくると思うのでライブラリ側でどうにかしたいのだけど、どのライブラリにどのようにPR投げるか悩ましいですね…

rspec-rails
puma
capybara
omniauth

のどれか。rspec-railsでrails_helper.rbのテンプレートをいじってRACK_ENVもRAILS_ENVと同様に設定するようにする、というのがいいだろうか。

おまけ

どこでRACK_ENVが設定されているか調べるのに使った雑なスクリプトを置いておきます

module DebugEnv
  def []=(*args)
    key = args.first
    if key == 'RAILS_ENV' || key == 'RACK_ENV'
      p args
      p caller
    end
    super
  end
end

ENV.singleton_class.prepend DebugEnv

あと、この手の環境変数関連のデバッグではspringは切っておいたほうが良さそう(ちゃんと調べきれてないけど、設定されていないはずのタイミングでRACK_ENVが設定されていて、これでかなり時間を奪われた＞＜)

また、rake spec や rakeでテストを実行しているときにはこの問題は発生しなさそう。

rspec-rails/rspec.rake at master · rspec/rspec-rails

2018-09-02

Turbolinks5でPOSTするときはajax経由のほうが良いのかも

Turbolinks5になってから「フォームでバリデーションエラーになったあとその画面をリロードしたときの挙動がTurbolinksを利用していないときと異なる」という問題がある。

2年半くらい前からIssueが立っている

Turbolinks doesn't recognize form re-submission [POST] and navigates instead [GET]. · Issue #251 · turbolinks/turbolinks

POSTしたあとの画面をリロードしようとすると、通常は「フォームの内容を再送信しますか？」みたいな確認ダイアログが出る。しかしTurbolinks経由だと単にいまのURLをGETで取得しようとする*1。これは、Turbolinksがhistory apiを使って履歴を操作しているのが原因。history apiに履歴を足すときはGETとしてのURLしか足せないので、現状のTurbolinksの仕様では対応するのは無理ぽい(放置されている原因の一つはこれだと思う)

そもそもTurbolinks(というかBasecamp)的には、formは全部js経由にしてしまう方針なので上記の問題で困っていない、というのもありそう。Railsでform_withを使ったとき、デフォルトではremote: trueになる。

普通はajaxリクエストでリダイレクトはできないのだけど、turbolinks(turbolinks-rails)ではajaxでpostを受け付けたときのハックが書かれていて、redirect_toされたときはTurbolinks.visitを使うようにしてリダイレクトを実現している。なので正常系だけならremote: trueで問題ない。

バリデーションエラーになったときの対応が面倒で、これは独自に定義をしないといけない。DHHはSJR(Server generated Javascript Response)でやればいいと書いてる。ようするにcreate.js.erbみたいなやつ。

Provide form_with as a new alternative to form_for/form_tag · Issue #25197 · rails/rails

わかるんだけどバリデーションエラーを表示するためだけにそれをやるのってめんどいのですよね。画一的に処理できるgemをつくればいいのか。すでに誰か作っていそうだからそれでも良さそう。

*1:railsであればindexアクションのURLになるはず

2018-09-02

同一モデルへの関連に対するdependentオプション

いつ書いたのか忘れたけど、下書きに書いてあったので公開

次のように、同じモデルに対してdependent: :destroyを設定してしまうと、もとのモデルを削除したときに二重にDELETEが発行されてしまう

class User < ApplicationRecord
  has_one :latest_post, -> { order(created_at: :desc) }, class_name: 'Post', dependent: :destroy
  has_many :posts, dependent: :destroy
end

 user.destroy
   (0.1ms)  begin transaction
  Post Load (0.3ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."user_id" = ? ORDER BY "posts"."created_at" DESC LIMIT ?  [["user_id", 1], ["LIMIT", 1]]
  Post Destroy (0.4ms)  DELETE FROM "posts" WHERE "posts"."id" = ?  [["id", 2]]
  Post Destroy (0.1ms)  DELETE FROM "posts" WHERE "posts"."id" = ?  [["id", 1]]
  Post Destroy (0.1ms)  DELETE FROM "posts" WHERE "posts"."id" = ?  [["id", 2]]
  User Destroy (0.1ms)  DELETE FROM "users" WHERE "users"."id" = ?  [["id", 1]]
   (0.8ms)  commit transaction

dependent: :destroyは片方だけにしておいたほうがよさそう

2018-07-17

capybaraでunicornを使うときの注意事項

capybaraで利用するテストサーバは変更可能
デフォルトだとwebrickだったはず？
- (追記)capybara3からpumaになっていた
- capybara/UPGRADING.md at master · teamcapybara/capybara
Railsのsystem testだとpuma
unicornをproductionで使っているのであれば、unicornにしたほうがいいのでは？と思うタイミングがありやってみた

やり方

CapybaraでUnicornを使う - Qiita の設定をベースにゴニョゴニョするとできる
修正内容貼りたかったけどどこかに行ってしまった＞＜

問題点

feature spec(system spec)でモックを使うことができないので使いづらい
puma(やwebrick)はテストのプロセスと同じプロセス内のスレッドで利用するので、モックの定義がテストサーバにも反映される
unicornは、最低でも2プロセスになる(マスタプロセスとワーカプロセス)
ワーカプロセスはテストのプロセスとは独立しているので、テストのプロセス内でモックを定義してもテストサーバには反映されない

まとめ

capybaraでunicornを使うには覚悟が必要

2018-04-07

るりま編集方法のメモ

プログラミング言語 Ruby リファレンスマニュアルでリンク切れが見つかったので、PRしようと思って調べたことのメモ。

内容はGitHubで管理されているrurema/doctree: Repository of Japanese Ruby reference manual
- 普通にPRだせばよいみたい
wikiに古い記事がたくさんあって、何をどうしたら修正内容を確認できるのかよくわからない…
- Rakefileがあったのでrakeタスクでhtmlファイルを確認できるのだろうと推測
- bundle exec rake statichtml:2.5.0 のようにすると、ローカルの/private/tmp/html 配下にhtmlファイルが出力された
  - html出力用のdatabaseが/tmp/db-2.5.0のような場所にできる
  - 編集前にdatabaseを作ると、編集しても内容が反映されないっぽい

ということで編集した内容をローカルで確認できるところまでやった。がリンクの仕様がよくわからずPRまだ出せていない＞＜

追記

PRだしました Fix broken link by willnet · Pull Request #1193 · rurema/doctree

おもしろwebサービス開発日記チラシの裏

チラシの裏的なメモ