modalの背景色が全体に適応されない時…。

iPadなどIOSのサファリでモーダルの背景が崩れるのを何とかする

原因

cssの-webkit-overflow-scrolling: touch; やtransformなどのプロパティが入ってると親が変わってしまって、modalが崩れることがあるらしい。

対策

ということで、 モーダルをbody直下に移動させる様に実装しました。

function moveModalAfterBody() {
     $(".modal-wrapper").insertAfter("body");
}

したのですが、ちょっと上の階層のクラスが足りなくて、 文字の大きさやフォントが変わってしまったので下記に変更。

function moveModalAfterBody() {
     wrapper = "<div class='needed-class-name'/>";
     $("body").append($(".modal-wrapper").wrapAll(wrapper));
}

Public Activityのgemをつかってみた（誰かがデータ更新して変更したとかしないとかを表示するために使える）

基本的にはこちらに書いてあるのですが、

github.com

少し詰まったとこもあったのでまとめ。

puclic_activityの概要 gemを通して追加したテーブルはactivitiesテーブルです。（デフォルトと一緒） gemの説明にコンソールにて、gemのREAD.MEに書いてあるように、下記のコマンドを実行したので、

$ rails g public_activity:migration
$ rake db:migrate

すると、 下記のactivitiesテーブルが作成されています。

# schema.rb
create_table "activities", force: :cascade do |t|
    t.integer  "trackable_id"
    t.string   "trackable_type"
    t.integer  "owner_id"
    t.string   "owner_type"
    t.string   "key"
    t.text     "parameters"
    t.integer  "recipient_id"
    t.string   "recipient_type"
    t.datetime "created_at"
    t.datetime "updated_at"
end

これでdbには枠ができたので、 次の章でmodelに使っている#trackedを使えば、ownerやrecipientに更新した人が誰なのかなど情報を追加できます。

Modelでの実装

例えば、Postモデルを例に上げると、下記のようなメソッドを追加して、「投稿の変更」が生成されるようにしています。 post.rbのmodelに追加。

更新された時はいいいのですが、削除の時、 物理削除されてしまうと、削除されたデータを参照できなくなってしまうので、

論理削除を扱うacts_as_paranoidのgemを入れて、 schemaに#deleted_atを付加することで、削除されたデータが何だったのかわかるように、別途migrationしました。

include PublicActivity::Model # gemから必要なメソッドを呼び出すために必要なinclude
tracked owner: proc { |controller, _model| controller.current_user } # postに変更があった時にユーザーのidをactivitesテーブルに入れるためのメソッド
tracked recipient: proc { |controller, _model| controller.current_xxx } # postに変更があった時に他に情報をつかたいときにどうぞ。

tracked xxx … と書くと、モデルが新規作成、更新、削除されたときにxxxにどういう値を入れるか決められます。 上記のように書くことによってactivitiesテーブルのデータには、 ownerにはモデルへの変更を行ったユーザーの情報が入るようにしています。（owner_idにuser_idが、owner_typeに"User"が） recipientにも同様にデータ格納ができるので、例えば、変更を通知したいグループのidとかを入れておくこともできます。

ちなみに、trackableは対象のモデルデータが入るので、 Postモデルを対象としている場合は、post_idと"Post"がそれぞれtrackable_idとtrackable_typeに挿入されます。

Controllerでの実装

・#current_userを実装、helperとかに皆さん入れていることが多いでしょうかね。 　更新（新規作成、更新、削除）を行ったユーザーが誰か特定して表示するために使用しています。

Viewでの更新の表示の実装

ロケールファイルに更新された時に出す文言を定義して、呼び出すことができます。

keyについてはcreateかupdateかdeleteかをデフォルトでgemが見てくれているので、 post.create post.update post.destroyのどれかがkeyに含まれていることになります。

ロケールファイルに

activity:
    post:
      create: 投稿が作成されました
      update: 投稿が更新されました
      destroy: 投稿が削除されました

と記述して、

viewにて、= t("activity.#{activity.key}") すれば、ymlで定義した最新の更新に使える文字情報を取得できます。

parametersというカラムも持っているので、 そこにより詳細な更新情報を持たせておけば、（新規作成、更新、削除した時に付加したい情報） よりわかりやすい情報を個別に表示することが可能になります。

ロケールにパラメータを渡す設定をしておけば、より親切な文言を表示してあげることが可能です。

activity関連のspecを追加する時の実装

通常時ではspec_helperに記述したメソッドが有効になり、 activitiesが作成されないようになっています。

*上記のために、spec_helperに下記の記述をしてあげてください。

require 'public_activity'
require 'public_activity/testing'

PublicActivity.enabled = false

require ‘public_activity/testing'だけでspecは大丈夫ってgemに書いてあったけど、 'public_activity'しないと動いてくれなかったので書きました。

PublicActivity.with_tracking do
  # your test code goes here
end

上記のように、with_trackingで囲んであげて、postやdeleteを行うようにspecを変更してあげてください。

PublicActivity.with_tracking do
  expect do
    post :create, ...
      
    end.to change(PublicActivity::Activity, :count).by(1)
  end
end

XcodeのSimulatorがあってよかった。

やりたかったこと

iPadのブラウザー表示が崩れていたので、修正のためにlocal環境で再現して表示したかった。

XcodeのSimulatorが使えた。

全然XcodeのSimulatorとか使ったことがなかったけれど、

私が困ってたら教えてくださった方がいて、助かりました。

Simulatorの起動の仕方。

Xcodeを開いて

左上のメニューから、File > new > project あたりを開いて。

下記の写真のhahahaの隣をクリックすると、シュミレートしたいデバイスの種類が選べるので選択。

▶ ボタンを押して、Buildされて、シュミレーターが起動されるのをしばしまちましょう。

Sumilatorが立ち上がったら、画面に何も映ってないな。と思うと思うので、

左上のメニューのHardware > Homeを選択すると、 iPhoneIやiPadのHomeボタンを選択したのと同じ動作ができ、

Appが画面に表示されるので、選べるようになります。

SumilatorのSafari（検証したいブラウザ）を開き、同時にMacの方でSafariを開いてデバッグする。

MacのSafariのデバッガーをSumilatorのSafariで開いている画面のデバッガーとして使うことができます。

Simulatorを起動して、開発しているページにsafariでアクセスしておきます。

そうすると、Macのサファリで、左上のメニューから開発 > Simulator の選択肢が出てきます。

その中に、Simulatorの方で開いているページの選択肢が出て来ますので、選択します。

デバッガーが出てくるので調べたいところを調べてください！