TECH BLOG

【CSS】transitionの効果を一方向（ゆっくり変化し即座に戻る）にする

2020-08-27

# はじめに最近は`transition`を使った動きのあるWebサイトがたくさんあります。まったく動きのない静的なページを見つけるのが難しいくらいです。今回は、`transition`の効果を一方向（ゆっくり変化し即座に戻る）にする方法について書きたいと思います。 # transitionは双方向（ゆっくり変化しゆっくり戻る）の変化 `transition`のよくある例としては、マウスをリンク要素に乗せたときにゆっくり色を変えたりすることです。 ```ht [...]

【CSS】テキストを領域内に入った部分から徐々に表示

2020-08-27

# はじめに現在、お仕事でWebアプリを作っています。これを機会にイチからWebデザインの勉強をしようと思い、脱・Bootstrapを目指して頑張っています。まだまだ高度なコードは書けませんが、これから少しずつCSS関連の記事も書いていきたいと思います。さて、今回は「テキストを領域内に入った部分から徐々に表示」についての記事です。「テキストをふわっと表示」について説明している記事はたくさんありますが、「テキストを領域内に入った部分から徐々に表示」について説 [...]

【Rails】Webpackerで画像ファイルを管理し、CSSやビューから参照する方法

2020-07-30

# はじめに Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。 # 画像ファイルの配置場所 Webpackerで画像ファイルを管理するには、Webpackerのデフォルトソースパス（`app/javascript/`）配下に`images`ディレクトリを新規作成し、その中に画像ファイルを配置します（ディレ [...]

【Rails】Webpacker管理のCSSがHerokuで反映されない場合の対処

2020-07-30

# はじめに Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 # 対処 `app/views/layouts/application.html.erb`を以下のように修正します。 ```erb # 修正前 <%= stylesheet_link_tag 'applicati [...]

Let's Encryptの証明書を自動で更新する方法

2020-07-04

Let's Encrypt

# はじめに先日、仕事で作成させていただいたWebサイトにアクセスできなくなっていました。 <img data-src="https://i.imgur.com/BTV9Ot1.png" class="lazyload effect-fade"> 原因は、Let's Encryptの証明書自動更新方法に不備があったことでした。今回はLet's Encryptの証明書自動更新方法について記載します。 # 暫定対処 Webサイトにアクセスできない状況が長時 [...]

模写コーディングに挑戦してみたら思ったより大変だった話

2020-06-18

模写コーディング

# はじめに模写コーディングに挑戦してみました。モデルにさせていただいたのはAirbnbの以下のページ。模写コーディングのおすすめサイトとしてよく紹介されているページです。 <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.airbnb.jp/host/homes" da [...]

Railsアプリのデプロイ時に必要となる【Capistrano】や【Unicorn】の理解に役立つ記事まとめ

2020-06-16

# はじめに Railsアプリのデプロイ方法を調べていると【Capistrano】や【Unicorn】といった見慣れない名称がほぼ必ず出てきます。はじめてデプロイするときはそれが何なのかもわからないままとりあえずインストールして、見様見真似で設定（ほぼコピペ）して、やっぱりエラーが出て絶望... という流れを経験していると思います。というか、私がそうでした。それでも最終的にはほぼコピペしただけの設定でデプロイができてしまい、Webアプリが運用できてしまうのは【Cap [...]

【Nuxt.js+Firebase】core-js関連のエラーが大量に出力される事象の原因と対処

2020-06-09

# はじめに Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。 # 事象先日、GitHubでソース管理を行っているNuxt.jsプロジェクトにセキュリティアラートが届いたので対応を行いました。 <div class="iframely-embed"><div class="iframel [...]

【Nuxt.js】GitHubからセキュリティアラートが届いたときの対応【package.json】

2020-06-08

# はじめに GitHubでソース管理を行っているプロジェクトに`package.json`のセキュリティアラートが届いたときの対応を記載します。今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js」と記載していますが、npm/yarnでパッケージ管理を行っているプロジェクトであれば適用可能です。また、Nuxt.jsではnpm/yarnのどちらでもパッケージ管理が行えるため、両方の手順を記載します。 # `package [...]

【Rails】bundle updateでGemがアップデートされない原因

2020-06-07

# はじめに前回、GitHubからセキュリティアラートが届いたらすぐにGemのアップデートを行おうという記事を書きました。 <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.autovice.jp/articles/87" data-iframely-url="//cdn.ifr [...]