週刊Railsウォッチ(20181009)Rails 6の新機能:WYSIWYGエディタ「Action Text」、Rails 6の青写真スライド、Apache POIはスゴイほか

こんにちは、hachi8833です。休日があると平日が減ってむしろ大変です。 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを社内有志でつっついたときの会話です👄 今回は「Railsウォッチ 公開つっつき会 第3回」の日でした。おかげさまで本編・懇親会ともに盛り上がりました🎊🍻。参加いただいた皆さま、ありがとうございます!🙇 つっつきボイス:「(開始前の雑談)Action Text出ましたね」「そうそう、今回はそれがトップです」「え、そんなのが出てた?!😳」「ではぼちぼち始めま〜す🎬」 最初Active Textと書き間違えたりしてました💦。 ⚓臨時ニュース: Rails 6で新機能: ブラウザ向けリッチテキストエディタTrixを取り入れた「Action Text」が導入(Rails公式ニュースより) 公式: Introducing Action Text for Rails 6 | Riding Rails リポジトリ: rails/actiontext: Edit and display rich text in Rails applications BasecampのTrix: Trix: A rich text editor for everyday writing リポジトリ: basecamp/trix: A rich text editor for everyday writing 先週ぐらいにBasecampがTrixをリリースしたというDHHのツイート↓を見かけたのですが、その時点では様子がよくわからなかったので保留にしていました。TrixはBasecampでは前から使われていたらしく、公開間もないのに★が11000超えです。みんな欲しかったんでしょうね。 Celebrating the big 1.0 of our WYSIWYG editor Trix with a lovely new website by ⁦@AdamStddrd⁩. It powers all textareas in Basecamp. And you can have it for free! Congrats to ⁦⁦@javan⁩ and ⁦@sstephenson⁩ for reaching this milestone! https://t.co/uMompjGKkA — DHH (@dhh) September 26, 2018 既存のブラウザ用リッチテキストエディタのほとんどがIE5.5のcontenteditableやexecCommandのAPIを引きずっていたのを、新たにCoffeeScriptで作り直し(コンパイルはBladeを使用)、コードからの制御がうんとやりやすくなったということのようです。 <form …> <input id=”x” type=”hidden” name=”content”> <trix-editor input=”x”></trix-editor> </form> つっつきボイス:「BPS社内Slackでも話題になってたヤツ」「どれ、動画↑をポチッと」「15分あるので飛ばし飛ばしで」「(動画を見つつ)scaffoldしてちょろちょろっと何か書いて…おぉ〜〜?!テキスト入力にいきなりデスクトップから画像をドラッグアンドドロップしてるし😋」「これ自力でやろうとすると面倒なヤツ」「DHH、GCPをGCSと言い間違えてたっぽい😆」「はい〜じゃこの辺で🎬」「😆」 同動画10:10より # 同動画より post.rb class Post < AppicationRecord has_rich_text :content end <!– 同動画より _form.html.erb –> <%= form_with(model: post, local: true) do |form| %> … <div class=”field”> <%= form.rich_text_area :content %> </div> … <% end %> <!– 同動画より show.html.erb –> … <%= @post.content %> … 「ところでこの手のWYSIWYGエディタ機能って使ったことあります?」「あります〜: そのときはWYSIWYGエディタで検索して出てきたものをもう片っ端から試したんですけど、結局どれを使ってもつらかった😭」「これ↓に載ってるCKEditor、自分も使ったな〜」「TinyMCEも」「結局どれもつらいんですよね~」 参考: 商用でも利用できる、イケてるWYSIWYGエディタ7選 2017年版 - ランサーズ(Lancers)エンジニアブログ 「この手の汎用的なWYSIWYGエディタってJavaScriptで書かれているんですけど、どれを使おうと結局アップロードのエンドポイントは自分でサーバー側に用意しないといけないんですよね😅」「それそれ!」「PHPのサンプルコードぐらいはあったりするけど当然そのまま使えるはずがないので、エディタ側の制約に合わせて一生懸命エンドポイントを作り込まないといけないし、UIを日本語化したり不要な機能をオンオフできるようにするconfigを書いたりとか、YouTube動画を埋め込むためにカスタムタグを作ったりとかしようとすると、面倒が無限に続く😇」「froala使ったときとかapplication.jsとかCSSとかをひたすら書きまくったし」「WYSIWYGやった人は誰もがそうなる」 「つまりAction Textがここまで簡単になったのはバックエンドがRailsという前提が置けるからですね」「ちょうどWordPressも今度WYSIWYGをリニューアルするとか言ってるけどあれも同じ」「例のGutenberg↓ですね」 参考: WordPressの新しいエディタGutenberg(グーテンベルク)の長短所について 「Action Textが使えるのはRails 6からか〜」「TrixそのものはRails前提?」「独立してるはずですが、CoffeeScriptで書かれます(コンパイルはBladeで)」「こーひーすくりぷとか〜😅、フロントエンジニアからめっちゃマサカリが飛んできそう⚔️」「私も普段から『CoffeeScript滅べ』って言ってるし」「自分もCoffeeScriptはもういいや」「(Trixのリポジトリを開きながら)var使ってる↓の見つけた😆」「🤣」「🤣」「CoffeeScript以前にES2015ですらない😆」「🤣」 # bascamp/trixより var element = document.querySelector(“trix-editor”) element.editor // is a … Continue reading 週刊Railsウォッチ(20181009)Rails 6の新機能:WYSIWYGエディタ「Action Text」、Rails 6の青写真スライド、Apache POIはスゴイほか