【Rails】Bootstrapを導入したらAjaxが機能しなくなっていたお話

2019-12-14T11:44:05+09:00

参考にしたサイト

参考１
【Rails】 jQueryが動作しない時の対処法 (読み込む順番に気をつけないといけない) - Qiita
参考２
【2019年版】jQuery最新の読み込みスクリプト「コピペOK＋裏技」 | マコブログ
今回の自作Railsアプリはこちら。
Workdiary
GitHub - Massasquash/workdiary

１．起こったこと

Railsアプリで、Ajax（jQuery）を使用した機能を作っていてしばらく上手く動いていたのですが、Bootstrapを導入してjavascript周りをいじってから機能しなくなっていました。

２．解決策

とても簡単なことで、HTMLファイルのheadタグ内に記述すべきjQuery CDN（scriptタグ）の位置が間違っていたのが原因でした。
さらにこのjQuery CDN（scriptタグ）とjavascript_include_tagの順番がこの通りになっていることが大事なようです。（参考リンク１）

app/views/layouts/application.html.erb


    ・
    ・
    ・
  
  
  
  
  

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

３．解説・補足

bootstrapを導入する際に、bodyタグの一番下にjQuery CDN（scriptタグ）を移動してしまっていたのが原因のようです。
記述する位置には気をつけましょう！

このAjaxを使用している部分は「フォーム入力時にプルダウンでテンプレートを選択 → 選択されたテンプレートの中身がフォームに自動入力される」という機能なのですが、
まずはjavascriptが正常に読み込まれていないのかと思い、
試しに「プルダウンを選択した時に選択されたテンプレートがアラートで表示される」ように、呼び出されるjavascriptにalert(template_id)を記述してみたところ、しっかりとアラートが出てきました。
javascriptは機能しているようです。

Ajax（jQuery）が機能しているか確かめる

次に、Ajaxで渡されるはずのtemplatesコントローラーのget_bodyアクションが処理されているかを調べました。適当な行にraise params.inspectと入れることで、その箇所でエラーが発生するはずです。
ところがプルダウンリストを選択してもエラーは発生せず、フォームにも何も反映されません。
Ajaxが機能せず、目的のコントローラーのアクションに渡っていないことがわかりました。
javascriptは読み込まれていても、Ajaxが動作しない。
つまりjQueryの読み込みが上手くいってなさそうで、調べてみると（参考リンク１）にたどり着いた経緯です。

用語

jQuery CDN

という単語が出てきましたが、（参考リンク２）によると、
jQueryを使うには、jQuery本体をダウンロードして読み込む方法と、CDNを経由して使う方法の２種類があるようです。後者の方が、jQueryをダウンロードする必要がなく、今回のようにHTMLファイルのheadタグ内に以下のようなsqriptタグを貼り付けるだけでjQueryが動作するようになります。

これが概念としてまだイマイチ理解できませんでした。
宿題とします。

MEMO

参考までに該当部分のコードを晒しておきます。
（色々余計なコードもそのままにしていると思うので、初心者の方は参考にしないでください…）

app/views/layouts/application.html.erb


  
  
  

  
  

  Workdiary
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>


  
  
  
  
  

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

app/assets/javascripts/application/js

function changeTemplate(val){
  var template_id = val;

  // alert(template_id)

  $.ajax({
    url: "/templates/get_body",
    type: "GET",
    data: {
      template_id: template_id
    }
  })
}

app/controllers/concerns/templates_controller.rb

  def get_body
    template = Template.find(params[:template_id])
    @template_body = template.body
    respond_to do |format|
      format.js
    end
  end

熨斗（のし）の王様を作ったときに気をつけたこと

2019-10-13T23:43:10+09:00

まとめ

のし王というWebサービスを作った。
のし作成サービスが既に存在する中で、下記に気をつけたというお話。
- サービス作成のきっかけになった不満点・ニーズをもれなく仕様に落とし込む
- 仕様策定時は技術的な楽さに甘えず、ユーザー体験を優先する
- 上記を実現するため必要最低限の技術を選定する

不満点の解消、ニーズを仕様に落とし込む

ちょっとした贈り物に「のし」をつけたかった。
既存サービスは、以下の点で不満が残った。
- 「のし紙」のテンプレート（背景画像）だけが提供されており、Wordなどに貼り付けた後、自分で文字を描かないとダメだった
- Web上で任意の文字まで入れられるサービスでは、最後になるまで仕上がり具合がが分からなかった
- 最終画像にサービス名のロゴが入ってしまい、贈り物には不向きだった
- フォントがしょぼかった
- 水引き（背景画像）や表書き（御礼などの上部の文字）をどう選んでよいか分からなかった
不満点の解消をもれなく仕様に落とし込んだ。
- 背景画像と任意の文字を組み合わせてPDFで出力できるようにする
- 最終出力結果には広告を入れない
- 有料でもカッコいいフォントを採用する
- 用途に応じて自動で「水引き」と「表書き」が選択できるようにする
マッスルの神様＝マ神　→　熨斗の王様＝のし王

ユーザー体験を最優先する

	技術的な楽さを優先	ユーザー体験を優先
文字描画	ユーザー自身がWordなどで描画	Webサービス上で描画
仕上がり確認	プレビュー不可 or プレビューボタンクリックで表示	リアルタイムプレビュー表示
水引き、表書き	ユーザーの選択したものを表示	用途を選ぶと最適な水引き、表書きを自動で選択
描画フォント	無料の範囲で選択可能	有料で質の良いフォントが選択可能
ユーザーが泥酔状態	酔いが冷めてから使う	泥酔状態でも直感で使える

仕様の実現方法を考える

使用した技術
- Webサービス上で文字描画しPDF出力
  - 水引きの種類や表書きなどの情報をブラウザ上で選択させる
  - サーバーでPDFを作成してダウンロードさせる(Golang/Google App Engine)
- リアルタイムプレビュー表示
  - サムネイル描画サーバー(Golang/Google App Engine)を準備
  - 水引きの種類や表書きなどの情報が変更されたらAjax(jQuery)でサーバーからサムネイル画像を取得し、ブラウザ上に即時反映
- 用途を選ぶと最適な水引き、表書きを自動で選択
  - Bulma-ExtensionsのQuickViewで用途一覧を表示
  - 用途を入力させて絞り込み(jQuery)
  - 用途クリックで「水引き」と「表書き」を最適なものに変更(jQuery)
選定理由
- 仕様実現に際して最低限／シンプルなものを選ぶ
- 最新の技術よりも枯れて安定した技術を選ぶ
- なるべくメンテナンスが不要なものを選ぶ

「Ajax」の記事 - Crieit