【Rails】Railsアプリのデバッグ《マルチデバイス篇》

# はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行うのでPCでのデバッグは簡単ですが、スマートフォンやタブレットなどの別端末でのデバッグは少々面倒です。Google Chromeのデベロッパーツールを使えば任意のスマートフォンの解像度に変更することが可能ですが、そこで確認したデザインと実機で確認したデザインは微妙に異なるということがよくあります。

【Rails】Railsアプリのデバッグ《Better Errors篇》

# はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます（画像をクリックすると拡大します）。 Railsアプリの開発者なら誰しも一度は見たことがあるこのエラー画面ですが、Better ErrorsというGemを導入すると、より見やすくより使いやすくカスタマイズすることができます。 本記事では、Better Errorsの導入から使い方について説明します。 # Better Errorsの表示例 上記のエラー画面をBetter

【Rails】Railsアプリのデバッグ《byebug篇》

# はじめに Ruby on Railsに限りませんが、アプリの開発中にはエラーは付き物です。なにかしらのエラーが発生したときに、エラーの原因を特定しエラー箇所を修正することをデバッグと言います。Railsではデバッグの手助けとなる機能があらかじめ備わっています。 本記事では、「byebug」を使ったデバッグについて説明します。 # byebugの使い方 ## byebugのインストール Railsアプリを作成した時点でbyebugはインストールされています。作成後にbyebugを削除してしまったなどの理由でインストールされていない場合、`Gemfile`に以下を追記して`bundle

【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む

# はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外とします。 # 実装 ## サンプル ふたつのサムネイル画像をそれぞれクリックしてみてください。フルスクリーンのモーダルウィンドウが表示され、その中にそれぞれに対応したYouTube動画が埋め込まれています。モーダルウィンドウの動画以外の場所をクリックするとモーダルウィンドウが閉じます。 See the Pen WNpRxYM by whitia

【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法

# はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 # 実装 ## サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 See the Pen abJBryq by whitia (@whitia) on CodePen. ## HTMLの実装 コンテナーの中に二行のテキストを入れています。行数は好きなだけ増やすことができます。 #### HTML ```html Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

【Rails】レンダリング（renderメソッド）でアンカー指定を行う

# はじめに 通常、Railsでアンカー付きのリクエストを発生させるには`redirect_to`を使います。 ```rb redirect_to root_path(anchor: 'target') ``` では、`render`でビューを表示させるときにアンカーを指定したいときはどうすればいいのでしょうか。`render`は`redirect_to`のような書き方はできません。 ```rb # 以下の書き方はできない render :index(anchor: 'target') render "index#target" ```

【VSCode】「Search/Translate Hero」を使って右クリックで簡単に検索/翻訳を行う

# はじめに VSCodeを使って開発を行なっているときに何らかのエラーが発生することがあります。しかし、エラーメッセージというのは英語で書かれていることがほとんどなので、英語が苦手な人にとっては解読に時間がかかってしまいます。英語のエラーメッセージでもGoogle翻訳やDeepLといった翻訳サービスを使えばいいのですが、VSCodeでエラーメッセージをコピーし、ブラウザを開き、翻訳サービスにアクセスし、エラーメッセージをペーストという一連の作業すら面倒なときがあります。 Search/Translate

【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある

# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle check # エラー内容 Your bundle only supports platforms ["x86_64-darwin-18"] but your local platform is x86_64-linux. Add the current platform to the lockfile with `bundle lock

【Rails】Webpackerと互換性のないNode.jsがインストールされているとエラー

# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile # エラー内容 error @rails/webpacker@4.3.0: The engine "node" is incompatible with this module. Expected version ">=8.16.0". Got "6.17.1" ``` > エンジン "node"

�【Rails】Capistranoの設定でシンボリックリンクを張るファイルをなぜかディレクトリとして作成しようとしてエラー

# 事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash # 実行コマンド Running /usr/bin/env mkdir -p /var/www/app/shared/config/master.key /var/www/app/shared/log ... # エラー内容 mkdir: ディレクトリ `/var/www/app/shared/config/master.key' を作成できません ``` Capistranoの設定ファイルは以下の通りです（抜粋）。 #### deploy.rb ```rb set

【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: failed to load command: rake (/var/www/app/shared/bundle/ruby/2.6.0/bin/rake) Gem::Exception: can't find executable rake for gem rake. rake