【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む
はじめに
動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外とします。
実装
サンプル
ふたつのサムネイル画像をそれぞれクリックして ...
【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法
はじめに
モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。
実装
サンプル
繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。
<iframe height="265" style="width: 100%;" scrolling= ...
【Rails】レンダリング(renderメソッド)でアンカー指定を行う
はじめに
通常、Railsでアンカー付きのリクエストを発生させるにはredirect_toを使います。
rb
redirect_to root_path(anchor: 'target')
では、renderでビューを表示させるときにアンカーを指定したいときはどうすればいいのでしょうか。renderはredi ...
【VSCode】「Search/Translate Hero」を使って右クリックで簡単に検索/翻訳を行う
はじめに
VSCodeを使って開発を行なっているときに何らかのエラーが発生することがあります。しかし、エラーメッセージというのは英語で書かれていることがほとんどなので、英語が苦手な人にとっては解読に時間がかかってしまいます。英語のエラーメッセージでもGoogle翻訳やDeepLといった翻訳サービスを使えばいいの ...
【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある
事象
昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。
```bash
実行コマンド
Running $HOME/.rbenv/bin/rbenv exec bundle check
エラー内容
Your bundle only supports platfo ...
【Rails】Webpackerと互換性のないNode.jsがインストールされているとエラー
事象
昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。
```bash
実行コマンド
Running $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
エラー内容
error @rai ...
【Rails】Capistranoの設定でシンボリックリンクを張るファイルをなぜかディレクトリとして作成しようとしてエラー
事象
昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。
```bash
実行コマンド
Running /usr/bin/env mkdir -p /var/www/app/shared/config/master.key /var/www/app/shared ...
【Rails】RubyGemsのバージョンが3.1.3未満だとBundler実行時にエラー:bundler: failed to load command: <gem>
事象
昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。
```bash
実行コマンド
Running $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile
エラー内容
bundler: f ...
【Rails】アプリケーションサーバー「Unicorn」の基本情報と実装方法
はじめに
Railsアプリケーションを本番環境で安定して稼働させるには、Webサーバーの導入が不可欠です。Webサーバーは、クライアントからのHTTPリクエストをRailsアプリに伝達し、アプリで処理されたレスポンスをクライアントに返す役割を担います。
本記事では、Railsアプリ用のアプリケーションサーバー「 ...
【Rails】デプロイツール「Capistrano」の基本情報と実装方法
はじめに
アプリを本番環境にアップロードして誰でもアクセスできる状態にすることをデプロイと言います。デプロイで行うべきことは多岐にわたります。Railsアプリの場合で言えば、本番環境にアップロードすることはもちろんですが、Gemのインストールやマイグレーション、SprocketsやWebpackerのコンパイル ...
坂井 光太郎 / Sakai Kotaro
Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。