20190912_出張！Railsウォッチ in 銀座Rails#13

2019/09/12に銀座Rails#13で発表したスライドです。
https://ginza-rails.connpass.com/event/143155/
週刊Railsウォッチ: https://techracho.bpsinc.jp/tag/%e9%80%b1%e5%88%8arails%e3%82%a6%e3%82%a9%e3%83%83%e3%83%81

Transcript

1. 出張！Railsウォッチ
 in 銀座Rails#13
 森 雅智 / @morimorihoge 2019/09/12 1

2. About Me
 • 森 雅智： @morimorihoge
 • BPS株式会社でRailsの受託開発チームをやってたり、週1大学非常勤で Web開発を教えてたりします
 • Ruby/Rails歴は8年くらい。Web開発は14年くらい
 • 銀座Ralis #10でActiveRecordでVIEWを使おうという話をしました
 About BPS & TechRacho
 • Web受託開発や電子書籍製品開発をやっている会社です
 • TechRachoという自社技術Blogを運営しています
 ◦ 3年ほど前から平日毎日更新してます
 ◦ https://techracho.bpsinc.jp/ • お仕事相談、転職相談、TechRachoへのご意見など気軽にどうぞ
 ◦ https://www.bpsinc.jp/ 2

3. Railsウォッチとは？
 技術ブログTechRachoで毎週連載しているRails / Ruby界隈を中 心とした雑多な情報を提供する技術雑談マガジン
 3

4. @hachi8833（TechRacho編集部） • 八田昌三（はったしょうぞう） ◦ TechRacho 記事執筆・編集・翻訳（ 2016.08 〜） ◦ サイトメンテナンス ◦ ローカライズ業界出身 ◦ 好きなもの : 正規表現 /Go/Ruby/Goby など多数 • やってきたこと ◦ Rails チュートリアル翻訳・翻訳ディレクション ◦ Rails ガイド翻訳 ◦ Goby 言語メンテナー 4 ※今日はお休み
5. 今日の皆様の情報
 5
 事前にアンケートを出させていただきましたので、軽く紹介します
 ご回答頂いたみなさま、ありがとうございました。

6. 今日のトピック
 6
 • Rails 6新機能を抜粋して紹介
 • 週間Railsウォッチで紹介したGem / ライブラリから一部を紹介
 
 ※間違いなどあれば物言い・Twitter等でご意見下さい（質疑タイムあるかも？

7. Rails6 新機能紹介
 Action Text編
 7
 めも：ここまでを5分以内に・・・ 

8. Rails 6の試し方
 環境を汚したくなければDockerで手軽にお試しできます
 8
 $ docker pull ruby $ docker run --rm -it ruby bash root@392debe154fd:/# gem install rails Fetching thread_safe-0.3.6.gem Fetching tzinfo-1.2.5.gem Fetching zeitwerk-2.1.9.gem Fetching rack-2.0.7.gem ...(略)... Successfully installed sprockets-3.7.2 Successfully installed sprockets-rails-3.2.1 Successfully installed rails-6.0.0 40 gems installed root@392debe154fd:/# rails -v Rails 6.0.0
9. Rails6の新機能から少しピックアップ解説
 • 前回：複数DB対応関連
 • 今回：Action Text関連
 9

10. Action Text
 • Rails標準搭載のWYSIWYGエディタ
 • Basecampが元々OSSとして basecamp/trix として提供していたTrixをRailsにBundle した（という理解です。間違っていたらツッコミ下さい
 10
 Rails公式リリースノートより 
 https://weblog.rubyonrails.org/releases/

11. WYSIWYG：What You See Is What You Get
 • 画面で見えているものと出力されるものが同じになるUIのこと
 ◦ MS WordやPowerPoint、Adobe InDesignやIllustratorなんかもWYSIWYG 
 • WebシステムでWYSIWYGエディタといえば、JavaScript+CSSで頑張ったプラグイン で実現することになる
 ◦ メジャーどころだとCKEditorやTinyMCE、Froalaなど。最近だとWordPressが5.0からGoutenbergに切 り替わったのが話題になったり 
 11
 TinyMCE
 https://www.tiny.cloud/
 Froala
 https://www.froala.com/wysiwyg-editor

12. About Trix
 • Trix自体はRails非依存のWYSIWYGエディタ
 ◦ https://trix-editor.org/ でデモが見られます 
 • 利用するだけならリポジトリにあるCSSとJSをHTML側で読み込めば良い
 ◦ 世の中にある他のWYSIWYGエディタプラグインと同じような使い方ができる 
 • HTMLのcontenteditable属性やブラウザのexecCommandを使わないようにすること で、ブラウザ依存の強い個別hackを避けた実装になっている
 ◦ ちらっと調べた限り、FroalaやCKEditor5はcontenteditableを使っていた。TinyMCEはiframeを使って さらにその中にcontenteditableなbodyをレンダリングしているようだ 
 ◦ contenteditable v.s. iframeの議論は検索すると出てくるので、興味がある人は調べてみて下さい 
 • 元ソースはCoffeeScriptで書かれているが、使うだけなら意識不要
 12

13. なぜWYSIWYGエディタがRails統合されるとうれしいのか？
 • ファイル（主に画像）アップロード周りの取り扱いが楽になる
 ◦ WYSIWYGエディタはアップロード部分だけはサーバーサイド実装が必要になるため、プラグイン仕 様に合わせたサーバーサイドコードを用意する必要があったが、それが不要になる 
 • 開発速度が求められるラピッドプロトタイプ開発で考えることが減る
 ◦ 「Rails標準」があることで、考えることが減る（CoC: Convention over Configurationの精神） 
 ◦ ただし、きちんとしたものを作るのであれば、他のWYSIWYGエディタとメリット・デメリットを比較・検 討すべき（WYSIWYGエディタのマイグレーションはとてもつらい） 
 13

14. ちょろっとDemo
 14

15. ActionTextを使う（1）
 • `rails action_text:install` を実行
 15
 Trixがインストールされる 

16. ActionTextを使う（2）
 • 作られたmigrationその1
 16
 `rails active_storage:install` で作られるActiveStorage用の管理テーブル ※ファイルアップロードに利用される
17. ActionTextを使う（3）
 • 作られたmigrationその2
 17
 これがActionTextで管理するリッチテキスト部分を保存するテーブル 

18. ActionTextを使う（4）
 Model
 18
 Controller
 Gemfile（Rails6デフォルトからコメントアウト）
 messagesテーブルにcontentフィールドは不要 ※リッチテキストの実体は action_text_rich_textsに保存される ここで付けた :contentがaction_text_rich_texts.nameに利用される strong_parametersで許可するのを忘れずに 画像アップロードを利用する場合に必要
19. ActionTextを使う（5）
 View
 19
 フォーム側
 表示側
 <div class=”trix-content”></div>で囲まれたHTMLになる Trix用の<trix-editor>タグが生成される
20. ActionTextのデータ保管場所（間違ってるかも）
 • `has_rich_text`を書いたModel
 ◦ 保管されないが、ここで保管用のキーワードを決める 
 • `action_text_rich_texts` テーブル
 ◦ name: `has_rich_text` で指定した名称 
 ◦ body: Trixフォームに入れたHTMLテキスト（添付ファイルは action-text-attachmentタグで管理され ている）
 ◦ record_type: `has_rich_text` を記述しているModel名 
 ◦ record_id: `has_rich_text` で指定したモデルのインスタンスID 
 • `active_storage_blobs` ◦ アップロードファイルの情報が格納される（ saveしてなくてもTrixに貼り付けた時点で保 存される） • `acive_storage_attachments`テーブル ◦ アップロードファイルを ActiveStorageを通じて保管・管理する ◦ こちらはsaveされたタイミングで作成される 20

21. Action Textを使ってみた感想
 • 最低限の手間でサクッと画像・ファイルアップロードまで動くのは嬉しい
 ◦ 既存のWYSIWYG系Gemではここまでセットアップが統合されているものはなかったと思われる 
 ◦ ※既存のRails向けWYSIWYGエディタGemは、assetsのインストールはしてくれるが、サーバーサイ ドのアップロード・参照コードは自力で書く必要があるものがほとんど（の認識です 
 • Trixの動きは現代最低限求められる挙動を満たしていると感じた
 ◦ モバイルブラウザ対応 
 ◦ クリップボードからの画像ペースト 
 ◦ ドラッグ＆ドロップでのファイルアップロード 
 • Trixの定義済みスタイルや機能は少ない印象を受けた
 ◦ FloaraなんかはHTMLソースビューやPDF出力、画像のトリミングや色調補正機能まで備える（超絶 多機能）
 21
 とてもリッチなWYSIWYGが欲しい場合は機能が足りない恐れがあるが、 ちょっとしたWYSIWYGをさらっと付けたいくらいのユースケースであれば必要十分
22. Railsウォッチで話題になった
 Gem/ライブラリ/スライドなど
 • MySQLパフォーマンス・チューニングTIPS | スライド
 • Optimizing Ruby with JIT | スライド
 • Faker 2リリース
 • Shrine 3.0がもうすぐリリース
 22
 めも：残り時間で走り抜けるぞ 

23. MySQLパフォーマンス・チューニングTIPS
 https://speakerdeck.com/yoshiakiyamasaki/mysqlpahuomansutiyuningutips 「WEBエンジニア MeetUp＠札幌 #6 MySQL Special」の資料とのことですが、MySQL のEXPLAINで出した実行計画を読むのにとても役に立ちます 23

24. Optimizing Ruby with JIT
 https://speakerdeck.com/k0kubun/optimizing-ruby-with-jit
 @k0kubun さんのRubyのJITコンパイラ解説（Builderscon 2019）
 日本語 && とても丁寧な解説なので、オススメです
 24

25. Faker 2
 • 恐らく使っている人も多いであろうFaker（faker-ruby/faker）が7/31に2.0系リリース
 • 1系からインターフェースが一部変更されたので、利用しているプロジェクトでは注 意が必要そう
 • @koicさんの記事などを参照するとよさそう
 ◦ Faker 2.0の破壊的変更とその緩和施策 
 ◦ http://koic.hatenablog.com/entry/breaking-changes-of-faker-2-0 
 25

26. Shrine 3.0がもうすぐリリース（現在beta2）
 • 高機能な添付ファイル管理Gem
 ◦ とても高機能なのでRails 6でも引き続き使う選択肢はありそう 
 ◦ Rails以外でも使えるので、SinatraやRodaで添付ファイルを扱いたいケースでも使える 
 • 新機能の解説記事
 ◦ https://twin.github.io/upcoming-features-in-shrine-3-0/ 
 26

27. 宣伝：週刊Railsウォッチ 公開つっつき会
 • 毎月第一木曜日、社外の方も参加できる公開つっつき会を開 催してます
 ◦ 次回は2019/10/03（木）19:30～＠西新宿 BPS会議スペー スにて
 • TechRachoの週刊Railsウォッチの最新記事、または「週刊 Railsウォッチ公開つっつき会」でぐぐってTECH PLAYから君も エントリー！
 ◦ https://techplay.jp/event/750243
 27

28. 次回以降もブラッシュアップしていきます
 感想・リクエストなどあればTwitter
 #ginzarails
 @morimorihoge
 @hachi8833
 までお声かけください
 28