Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog
こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。 最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。 このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。 今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。 作った画面 書いたソースコード 使った技術 解説 Turboを理解する Turbo Frameでフレーム分割する 追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更
HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？後編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。今回は後編です。 HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳） 前編: TurbolinksをTurbo Driveに置き換える 前編: Turb
HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。 サマリー The HEY stack: - Vanilla Ruby on Rails on the backend, running on edge - Stimulus, Turbolink
Rails `ActionDispatch::Cookies::CookieOverflowエラー - よしそぶろぐ
RailsでDeviseを使用してログイン機能を作っていたら、ActionDispatch::Cookies::CookieOverflow (ActionDispatch::Cookies::CookieOverflow):なるエラーに遭遇しました。 どうやらsessionに4KB以上の情報を乗せてしまっており、cookieがオーバーフローを起こしてしまうことによるエラーのようです。 ソースはこちら class Api::V1::SessionsController < DeviseController before_filter :login_required, except:[:new,:create] respond_to :json def create self.resource = resource_class.new(user_params) resource = User
Railsで静的ファイルをcontroller経由で配信する - 俺、サービス売って家買うんだ
目的 特定の理由でpublic以下の静的ファイルをunicornでサーブする必要がある 前提 本番ではpublic以下をnginxやapacheでサーブしている 本番のconfigureをいじって全体に影響する設定を書き換えるのは嫌 本番のconfigure config.serve_static_files = false ・・ということでcontrollerで静的ファイルをrenderする方法です。 class StaticController < ApplicationController def index render file: 'public/static.html', status: 200, layout: false end end 設定の問題か、これだとレスポンスヘッダにLast-Modifiedが付与されないので少し追記。 class StaticControlle
Turbolinksをオフしないためにやった事 - Qiita
この記事は Turbolinks v2.2.0 時点のものです Turbolinks Classic is now deprecated Rails4系で使われていたTurbolinksはturbolinks-classicと命名が変更されました。 Rails5ではVersion 5 として turbolinks のversion ~> 5.0 が使われます。動作としては似てますが内部の実装が大きく変わっているので注意してください。 Turbolinksとは TurbolinksはRails4.0からデフォルトで導入されたgem railsアプリケーションを 簡単に pjaxっぽくすることが出来る。 ajaxとhistoryAPI(popState, pushState)を利用して画面遷移 Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する csrfトー
【Rails】【Turbolinks】ページを移動した時にJavascriptが起動しない | エビのテックブログ
今回はRails（4以降）で、Turbolinksが原因でjavascriptが動かない・起動しない現象について説明します。 結論から言うと、Turbolinksによってサイトの画面遷移が高速化する一方で、jsのDOMContentLoadedなどのイベントが発火しなくなるので、turbolinks:loadに変更すれば良いです。 このJSを document.addEventListener('DOMContentLoaded', function(){ 〜処理〜 }); 以下のように変更しましょう。 document.addEventListener('turbolinks:load', function(){ 〜処理〜 }); 目次 TurbolinksとはなにかJavaScriptへの影響と対処 1.Turbolinksとはなにか Turbolinksとは、以下の２つの機能を持った
railsプロジェクト内でpdfファイルを表示する方法 - Qiita
<object data="pdfファイルのURL" type="application/pdf" width="" height=""></object> 属性 data : pdfファイルのURLを入力する必要がある。例えばassets以下にいれた場合、image_url("")などを使って、ファイルの位置をURL化し挿入する。参考: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html type : ソースのMIMEタイプを定義する。しかし、dataとtype両方書く必要はなく、dataだけあれば、とりあえず表示される。 width : ファイルの横幅を定義する height : ファイルの縦幅を定義する その他の属性はこちらを見てください。 http://www.htmq.com/html
Rails 5.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル - Qiita
2019/12/03追記 Rails 6.0.x 版を書きました ↓ Rails 6.0.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル TL;DR (長い3行で) Ajaxの勉強をするにあたり，Rails上でAjaxするためのサンプルを探していたのですが，Rails 5.xがもともとテンプレとして持っている.html.erbや.coffeeではなく，.html.hamlや.js.erbを使ったものもあり，ヨコ道知識を調べながらになってしまったので，できる限りrails newした状態からの差分が少ない，世界一シンプルなサンプルコードを目指してまとめてみました． ざっくりシーケンス だいたい ↓ のようなシーケンスを実現します． Client-Server間でSession張って双方向通信とかそういうところはRails Framewor
フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
Atomでソースコードを綺麗に整形してくれる atom-beautify を使ってみる | naremo [ナレモ]
最近、エディタをSublime TextからAtomに変えました。もともと、エディタにはそんなにこだわりはなく、変えた理由もAtomがいいという声を聞くようになったからという単純なものです。 AtomもSublime Textと同じように”パッケージ”をインストールすることで様々な機能を追加することができます。これで自分が使いやすいエディタに進化させていくわけですね。 今回はソースコードを自動で綺麗に整形してくれる”atom-beautify“というパッケージを試してみました。 対応言語はHTML、CSS、Java、Rubyなど atom-beautifyのWebサイトから引用しますが、以下に示したように多くのプログラミング言語に対応しています。一部の言語においては別のツールをあらかじめインストールしておかなければいけない場合があるそうです。 Beautify HTML, CSS, Jav
![Atomでソースコードを綺麗に整形してくれる atom-beautify を使ってみる | naremo [ナレモ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5bc53d7d8ef41689447fc036a437b2aa32340ea/height=288;version=1;width=512/http%3A%2F%2Fnaremo.jp%2Fwp-content%2Fuploads%2F2016%2F02%2Fatom-beauty001.png)
Hamlのサンプル（フォーム） - Qiita
!!! %html %body %form{:action => "/", :method => "post"} Title: %input{:name => "title", :size => "40"} %br URL: %input{:name => "url", :size => "80", :value => "http://"} %br %input{:type => "submit", :value => "send"} - @bookmarks.each do |bookmark| %div %a{:href => bookmark['url']}= h bookmark['title'] - unless bookmark['title'] == '' %hr %div#record 登録数#{@now_rec} %div#page #{@paging} Register
Hamlの書き方 - Qiita
htmlを記述するとき、簡単かつ簡易的に記述できるHamlについての書き方を記します。 Ruby On Rails などを扱うとき、Hamlで記述する人も多いでしょう。 ちなみに私はSlimなども好きです。 Hamlの基本 （例） ＜コード解説＞ 1. !!! <!DOCTYPE html>を表す 2. % タグの前に%を付けると< 開始タグ >と< 終了タグ >を表す。 3. インデントを必ず入れる 入れ子構造にする時は字下げを必ず同じスペース分入れる。 ちなみに私の場合はRubyが主ですがその他プログラムでも記述するときは字下げ（タブ幅）を2にしています。だいたい4つスペースか2つスペースなんかが一般的でしょうか。 4. 属性を入れる場合 Ruby風に{}とシンボルで書ける。 尚、HTML風に書くなら「%html(lang="ja")」 コメント記法 HTML的に記述 「/ コメントだ
Ruby関連HTML/Webスクレイピング・ライブラリまとめ 2014年版
※[ブックマーク]ボタンの中に delicious, reddit, digg, Google+(G+) のボタンもあります。 2014年5月時点で、HTML/Webスクレイピングに使える Ruby 関連のライブラリたちについて、前回 (2010年) のまとめとの差分とともに、概要をまとめた。各々のライブラリの特徴と入手先、HP、インストール方法、ライセンスなどについて簡単に説明している。 今回扱っているのは、nokogiri, Mechanize, Selenium-webdriver, Capybara-webkit, poltergeist の 5 つ。Ruby 以外にも、PhantomJS, Yahoo!Pipes, ScraperWiki, kimono についても取り上げた。 一覧をまとめたのち、比較と評価、おすすめの用途について簡潔に述べる。 背景 2010年に「Ruby関連
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rubyを使って20分でスクレイピングの大元を作る - Qiita
ruby nokogiriでスクレイピング - Qiita
[Rails]ActionDispatch::Cookies::CookieOverflow 解決法 - Qiita![[Rails]ActionDispatch::Cookies::CookieOverflow 解決法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/24af281340d02b89c55a28d2d2635e33ecd8981d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNURBY3Rpb25EaXNwYXRjaCUzQSUzQUNvb2tpZXMlM0ElM0FDb29raWVPdmVyZmxvdyUyMCVFOCVBNyVBMyVFNiVCMSVCQSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NTgxZmJkNWU3YjhhNzM0NGMxMjc0MDRhY2FmYjQ1Njc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWNoaW90b21pdGEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTdjMjM1OGJkNDYxZDRlNDQyYWNiYWFkNmUzMWQyNzFm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dede945f593c2550805ef9db7bef29e92)