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

   

   View Slide

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

   

   View Slide

3. Railsウォッチとは？

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

   3

   

   View Slide

4. @hachi8833（TechRacho編集部）
   ● 八田昌三（はったしょうぞう）
   ○
   TechRacho
   記事執筆・編集・翻訳（
   2016.08
   〜）
   ○ サイトメンテナンス
   ○ ローカライズ業界出身
   ○ 好きなもの
   :
   正規表現
   /Go/Ruby/Goby
   など多数
   ● やってきたこと
   ○
   Rails
   チュートリアル翻訳・翻訳ディレクション
   ○
   Rails
   ガイド翻訳
   ○
   Goby
   言語メンテナー
   4
   ※今日はお休み
   

   View Slide

5. 今日の皆様の情報

   5

   事前にアンケートを出させていただきましたので、軽く紹介します

   ご回答頂いたみなさま、ありがとうございました。

   

   View Slide

6. 今日のトピック

   6

   ● Rails 6新機能を抜粋して紹介

   ● 週間Railsウォッチで紹介したGem / ライブラリから一部を紹介

   

   ※間違いなどあれば物言い・Twitter等でご意見下さい（質疑タイムあるかも？

   

   View Slide

7. Rails6 新機能紹介

   Action Text編

   7

   めも：ここまでを5分以内に・・・ 

   

   View Slide

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
   

   View Slide

9. Rails6の新機能から少しピックアップ解説

   ● 前回：複数DB対応関連

   ● 今回：Action Text関連

   9

   

   View Slide

10. Action Text

    ● Rails標準搭載のWYSIWYGエディタ

    ● Basecampが元々OSSとして basecamp/trix として提供していたTrixをRailsにBundle
    した（という理解です。間違っていたらツッコミ下さい

    10

    Rails公式リリースノートより 

    https://weblog.rubyonrails.org/releases/

    

    View Slide

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

    

    View Slide

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

    

    View Slide

13. なぜWYSIWYGエディタがRails統合されるとうれしいのか？

    ● ファイル（主に画像）アップロード周りの取り扱いが楽になる

    ○ WYSIWYGエディタはアップロード部分だけはサーバーサイド実装が必要になるため、プラグイン仕
    様に合わせたサーバーサイドコードを用意する必要があったが、それが不要になる 

    ● 開発速度が求められるラピッドプロトタイプ開発で考えることが減る

    ○ 「Rails標準」があることで、考えることが減る（CoC: Convention over Configurationの精神） 

    ○ ただし、きちんとしたものを作るのであれば、他のWYSIWYGエディタとメリット・デメリットを比較・検
    討すべき（WYSIWYGエディタのマイグレーションはとてもつらい） 

    13

    

    View Slide

14. ちょろっとDemo

    14

    

    View Slide

15. ActionTextを使う（1）

    ● `rails action_text:install` を実行

    15

    Trixがインストールされる 

    

    View Slide

16. ActionTextを使う（2）

    ● 作られたmigrationその1

    16

    `rails active_storage:install` で作られるActiveStorage用の管理テーブル
    ※ファイルアップロードに利用される
    

    View Slide

17. ActionTextを使う（3）

    ● 作られたmigrationその2

    17

    これがActionTextで管理するリッチテキスト部分を保存するテーブル 

    

    View Slide

18. ActionTextを使う（4）

    Model

    18

    Controller

    Gemfile（Rails6デフォルトからコメントアウト）

    messagesテーブルにcontentフィールドは不要
    ※リッチテキストの実体は action_text_rich_textsに保存される
    ここで付けた :contentがaction_text_rich_texts.nameに利用される
    strong_parametersで許可するのを忘れずに
    画像アップロードを利用する場合に必要
    

    View Slide

19. ActionTextを使う（5）

    View

    19

    フォーム側

    表示側

    で囲まれたHTMLになる
    Trix用のタグが生成される
    

    View Slide

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

    

    View Slide

21. Action Textを使ってみた感想

    ● 最低限の手間でサクッと画像・ファイルアップロードまで動くのは嬉しい

    ○ 既存のWYSIWYG系Gemではここまでセットアップが統合されているものはなかったと思われる 

    ○ ※既存のRails向けWYSIWYGエディタGemは、assetsのインストールはしてくれるが、サーバーサイ
    ドのアップロード・参照コードは自力で書く必要があるものがほとんど（の認識です 

    ● Trixの動きは現代最低限求められる挙動を満たしていると感じた

    ○ モバイルブラウザ対応 

    ○ クリップボードからの画像ペースト 

    ○ ドラッグ＆ドロップでのファイルアップロード 

    ● Trixの定義済みスタイルや機能は少ない印象を受けた

    ○ FloaraなんかはHTMLソースビューやPDF出力、画像のトリミングや色調補正機能まで備える（超絶
    多機能）

    21

    とてもリッチなWYSIWYGが欲しい場合は機能が足りない恐れがあるが、
    ちょっとしたWYSIWYGをさらっと付けたいくらいのユースケースであれば必要十分
    

    View Slide

22. Railsウォッチで話題になった

    Gem/ライブラリ/スライドなど

    ● MySQLパフォーマンス・チューニングTIPS | スライド

    ● Optimizing Ruby with JIT | スライド

    ● Faker 2リリース

    ● Shrine 3.0がもうすぐリリース

    22

    めも：残り時間で走り抜けるぞ 

    

    View Slide

23. MySQLパフォーマンス・チューニングTIPS

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

    

    View Slide

24. Optimizing Ruby with JIT

    https://speakerdeck.com/k0kubun/optimizing-ruby-with-jit

    @k0kubun さんのRubyのJITコンパイラ解説（Builderscon 2019）

    日本語 && とても丁寧な解説なので、オススメです

    24

    

    View Slide

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

    

    View Slide

26. Shrine 3.0がもうすぐリリース（現在beta2）

    ● 高機能な添付ファイル管理Gem

    ○ とても高機能なのでRails 6でも引き続き使う選択肢はありそう 

    ○ Rails以外でも使えるので、SinatraやRodaで添付ファイルを扱いたいケースでも使える 

    ● 新機能の解説記事

    ○ https://twin.github.io/upcoming-features-in-shrine-3-0/ 

    26

    

    View Slide

27. 宣伝：週刊Railsウォッチ 公開つっつき会

    ● 毎月第一木曜日、社外の方も参加できる公開つっつき会を開
    催してます

    ○ 次回は2019/10/03（木）19:30～＠西新宿 BPS会議スペー
    スにて

    ● TechRachoの週刊Railsウォッチの最新記事、または「週刊
    Railsウォッチ公開つっつき会」でぐぐってTECH PLAYから君も
    エントリー！

    ○ https://techplay.jp/event/750243

    27

    

    View Slide

28. 次回以降もブラッシュアップしていきます

    感想・リクエストなどあればTwitter

    #ginzarails

    @morimorihoge

    @hachi8833

    までお声かけください

    28

    

    View Slide