ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する - Qiita
背景 LP実装のフロントエンドを担当 Ruby on RailsのView内にてフロントエンド組み込み前提 デザインカンプにアニーメーション、インタラクションの仕様は無かったが、昨今全く動かないLPの方が少ないのではと思った デザイナーにインタラクション考えてもらうのも確認フロー大変だし、Railsにプラグイン組み込む検証リスクなど諸々あり、1回あきらめた 諦めてからが試合開始 変更に強いCSSアニメーション主軸にスクロールインタラクション作れればと思った ゴニョゴニョしたら意外と出来た 実装内容 CSSアニメーション実装 .anm_modデフォルト = 下から元来の位置に戻りつつフェードイン。速度ノーマル &.left, &.right 左右から元来の位置に戻りつつフェードイン &.delay, &.fast フェードイン速度遅め、早め 上記２点の設定で、フェードイン方向（３方向）とスピ
Railsで作られた管理画面にVue.jsを導入した話 - Studyplus Engineering Blog
Studyplusのweb版を担当していた久保です。 最近はRailsを触ったりしています。 今回は社内向けの管理画面を作る際に、どうしても動的にDOMを操作する必要があったのでjQueryの代わりにVue.jsを導入してみました。 なぜVue.jsを選んだのか Railsが生成したhtmlをテンプレートとして使うことができる Rails5系以降であれば、webpackerを利用するだけで良いので導入が楽 導入方法 導入時の環境は以下 rails: 5.2.0 ruby: ruby 2.5.1p57 node: v8.11.2 yarn: 1.7.0 webpacker: v3.5.3 webpacker gem 'webpacker' $ bundle install $ bundle exec rails webpacker:install Vue.js $ bundle exec r
react-rails と webpacker を使って Rails アプリケーション上で React を動かす - Qiita
Rails アプリケーション上で React を使う場合、何が必要なのかを知りたくなりました。 調べた所、最近では webpacker と react-rails の組み合わせで導入するのが簡単そうだったので、そちらを試してみました。 前提 検証環境 Rails 5.1.6 ruby 2.4.3 Mac OS X 10.13.4 利用する Gem について webpacker webpacker は、 JavaScript のモジュールバンドラである Webpack を Rails で簡単に利用できるようになる Gem のライブラリです。 GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails react-rails react-rails は、React を Rails 上で
週刊Railsウォッチ（20180330）春のリリースラッシュ: Rails 5.1.6/5.0.7とRuby 2.5.1など、Ruby 2.2は3月でメンテ終了ほか｜TechRacho by BPS株式会社
2018.03.30 週刊Railsウォッチ（20180330）春のリリースラッシュ: Rails 5.1.6/5.0.7とRuby 2.5.1など、Ruby 2.2は3月でメンテ終了ほか こんにちは、hachi8833です。Rails Developers Meetup 2018が無事終了しましたね。終わった後は久々のスタミナゼロ状態でした。関係者の皆さま、本当にありがとうございました。 I just published “Rails Developers Meetup 2018 を終えて” https://t.co/mxqwQFSsU0 — 無題のドキュメント (@yoshi_hirano) March 27, 2018 年度末の忙しさの中、桜咲く3月最後のウォッチ、いってみましょう。 今回からh2タグとh3タグにアンカーを付けました。 ⚓臨時ニュース ⚓Rails 5.1.6と5.0
Railsチュートリアル幻の15章 React編 - Qiita
社内で利用した、Reactの研修資料を公開します。 Railsチュートリアルの続編として作成したので、Rails上でReactを使うためには...ということが書かれています。Railsチュートリアルテイストになっていますが、一部社内でのコーディング規約や利用するライブラリについての言及があります。 また、研修ということで、ソースコードはGitHubの差分をスクショするという形で掲載しています。コピペできるコードが欲しいという人は、差分表示を作るのに使ったリポジトリを利用して下さい。 https://github.com/kouheiszk/sample_apps/tree/master/5_1_2/ch15 第15章 Reactの導入 この章では、サンプルアプリケーションで作ってきたUIパーツをReactというJavaScriptのライブラリを利用してコンポーネント化していきます。具体的に
Bootstrap3をRails4に導入 - Qiita
1年くらい前に書いた記事ですが、お蔵入りさせるのも何なので公開します。実は先程新しいプロジェクトでもやって違うところがないか確認もしたので2017年現在でも有効じゃないかと思います。 Bootstrap導入するのに結構ハマりました。実際両方の方法を試しました。 最新はBootstrap4だけどα版のため現時点（2016年7月時点）では3が無難。 あと、世にある導入方法の殆どがscaffoldでまず何らかの雛形作らせるんだけど、当然読み飛ばしています。 Gemを使う 以下はBootswatchをインストールする例だが、これだけだと動かない可能性あり、並行して手動のものもやってみました。 イイ感じのテンプレートができるとか言う有名なサンプルサイトはこちら。 http://bootswatch.com/ Rubyといえばお馴染みのこちらを参照。 http://dev.classmethod.jp
Railsで使う<% %>と<%= %>について - Qiita
どちらも、Railsを使うようになるとよく見るようになるものですが、HTMLやCSS、javascript、Ruby等を学んでいても出てこない(勉強を続けてるとだいたいどこかで見るでしょうが)ため、初見では「なんじゃ、これ？」となるでしょう。 これはhtml.erbのファイルで扱われるものです。 基本的にhtml.erbのファイルはviewsという見た目に関するファイルの格納されているディレクトリに入っていますが、<% %>も<%= %>もそれらにRubyの処理を施すためのものになります。 前者と後者の違いは、いざ作成した内容をブラウザに表示するとなった時に、その内容が目に見える形で出てくるか否か、ということです。 以下の例は<% %>で囲まれた内容の例になります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4 Tips for Learning How to Code Faster - Simple Programmer
Rails + webpacker + Vue.jsプロジェクトにESLintを導入 - Qiita
Railsをバージョンアップしてwebpack-dev-serverが動かなくなったときにやったこと - Qiita
RailsでC3.jsを使う - Qiita
[Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法 - Qiita![[Rails 5.1]webpackerを使用して、Spectre.cssを適用する方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c9d4fcef4acfa33df89fc8fec6f806cd9a638e3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNjM5MiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTU1MjE5OTI2MD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YjA3MTVjMGVjYTZhZWE4Mjc4MmM5MjEzYWI4ZWZkYw%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D3a7effd277183bfcf62d7fd752b89ece%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmFpbHMlMjA1LjElNUR3ZWJwYWNrZXIlRTMlODIlOTIlRTQlQkQlQkYlRTclOTQlQTglRTMlODElOTclRTMlODElQTYlRTMlODAlODFTcGVjdHJlLmNzcyVFMyU4MiU5MiVFOSU4MSVBOSVFNyU5NCVBOCVFMyU4MSU5OSVFMyU4MiU4QiVFNiU5NiVCOSVFNiVCMyU5NSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTAxZTZkZDlkNDM0NGMwNTUxOTZhYTQzMDY0MGMzYTg4%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzaGlyb2Vtb25zJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NDdlZjIzMTVlNzYyNmU4Y2M5M2QxZGNiNzVmMGFjYjk%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVG9yZXRhLCBJbmMu%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D6bfc01e2f728b725655b77d02cfafb9b)
Should We Upgrade to Rails 5? - DZone
RailsでSprocketsを使わないでwebpackを使いHMRで開発する - Qiita
Railsでajaxを用いた簡単なインクリメンタルサーチを実装する - Qiita