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

はじめに Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。 今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。 画像ファイルの配置場所 Webpackerで画像ファイルを管理するには、Webpack ...

はじめに Rails6から標準導入されたWebpacker（Webpack for Rails）でCSSを管理しているRailsアプリのCSSが、ローカル開発環境では反映されていたのに、デプロイ先のHerokuでは反映されないという事象がありました。 対処 app/views/layouts/applicati ...

はじめに 先日、仕事で作成させていただいたWebサイトにアクセスできなくなっていました。 <img data-src="https://i.imgur.com/BTV9Ot1.png" class="lazyload effect-fade"> 原因は、Let's Encryptの証明書自動更新方法に不備があっ ...

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

はじめに Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。 なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。 事象 先日、GitHubでソース管理を行っているNuxt.jsプロジェクトに ...

はじめに GitHubでソース管理を行っているプロジェクトにpackage.jsonのセキュリティアラートが届いたときの対応を記載します。 今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js」と記載していますが、npm/yarnでパッケージ管理を行っているプロジェクトで ...

はじめに 前回、GitHubからセキュリティアラートが届いたらすぐにGemのアップデートを行おうという記事を書きました。 <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bott ...

はじめに GitHubでソース管理を行っていると、ときどきGitHubからセキュリティアラートのメールが届くことと思います。 該当のリポジトリを見てみると以下のようにセキュリティアラートが並んでいて少しびっくりしてしまいます。 <img data-src="https://i.imgur.com/S3RxpPZ ...

はじめに 6月2日夜間にConoHa VPSにて障害が発生していました。 <img data-src="https://i.imgur.com/SBcK4aA.png" class="lazyload effect-fade"> おそらくこの影響だと思うんですが、障害復旧後の2日日中頃にVPSサーバーの確認をし ...