AUTOVICE

TECH BLOG

【Rails】コードをシンタックスハイライトする『rouge』のカラーテーマ一覧と指定方法

2020-09-08
# はじめに Markdownで書いた記事のコード部分をシンタックスハイライトする『rouge』というGemがあります。当ブログでも使っており、導入や使い方については以前記事にしました。 <iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="【ブログタイトル】" src="https://hatenablog-parts.co [...]

ポートフォリオサイトをリニューアルしました

2020-09-07
# はじめに 当ポートフォリオサイトを公開してからもうすぐ1年が経とうとしています。完成した当初はそれなりに気に入っていたデザインでしたが、月日が経つにつれてあらが目につくようになり、早くリニューアルしたいと思っていました。 1周年までまだあと1ヶ月ほどありますが、一足早くリニューアルしてしまいました。このブログだけでなくトップページも変更していますので、ぜひ見ていただければと思います。 <div class="iframely-embed"><div class="i [...]

MySQLが頻繁に突然停止するので設定を見直す

2020-09-07
# はじめに 仕事で作成させていただいたWebアプリで使っているMySQLが頻繁に突然停止しているという現象が続いていました。Webアプリへのアクセスに時間がかかることも気になっていました。 少なくとも稼働当初はMySQLが突然停止するなんてことはなかったはずですし、Webアプリへのアクセス時間もいたって普通だったと記憶しています。 件のVPSはRailsアプリとWordPressの両方を稼働させているので、リソースが足りなくなってメモリリークを起こしているのかと思って [...]

【CSS】カーソルを乗せると流れるようなアニメーションのハンバーガーメニューを作る

2020-08-31
# はじめに 今回はハンバーガーメニューにカーソルを乗せると川のように流れるアニメーションを作りたいと思います。 今回の記事は以下の記事をベースにしていますので、まだご覧になっていない方は先にこちらをご覧ください。 <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.autov [...]

【CSS】JavaScriptを使わずにハンバーガーメニューを作る

2020-08-31
# はじめに 当初はスペースの限られるスマートフォンなどの低解像度デバイス向けサイトにおいてスペースを有効活用するために登場したハンバーガーメニューですが、最近はPCなどの高解像度デバイス向けサイトでも使われているのをよく見かけます。 何よりメニューをまとめられてすっきりした印象になりますし、スペースが広く使えるのでメインメニューだけでなくサブメニューまで網羅的に載せてサイトマップのように表示することもできます。 今回はそんなハンバーガーメニューをJavaScriptを [...]

【CSS】CSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装

2020-09-01
# はじめに 便利なCSSカスタムプロパティ。実はJavaScriptから取得/設定ができます。今回はCSSカスタムプロパティとJavaScriptを使ってモード切替(配色変更)を実装する方法を解説します。 # CSSカスタムプロパティ CSSカスタムプロパティとはCSS内で使用できる変数のことです。 Webデザインの配色を考えるとき、たくさんの色を使うことは滅多にありません。大抵は白色+黒色+テーマカラー(1〜2色)に落ち着くことと思います。 テーマカラーはW [...]

【Rails】webpacker-dev-server実行中のエラー「Could not freeze ... Cannot read property 'hash' of undefined」

2020-08-30
# はじめに `webpacker-dev-server`実行中に、突然以下のエラーが出力されました。 ``` [hardsource:3154a74b] Could not freeze ./app/webpack/packs/application.js: Cannot read property 'hash' of undefined (node:69641) UnhandledPromiseRejectionWarning: TypeError: current. [...]

【Rails】Webpacker管理下の構成を整える

2020-08-31
# はじめに Rails6で標準導入されたWebpacker管理下の構成を整えたので記事にします。Webpackerで管理対象としているのは以下の3つです。 - JavaScript - CSS - 画像 あくまで自分なりにわかりやすい構成に整えたという話ですので、ベストプラクティスを提案するとか言った大それたものではないことはご了承ください。 もっといい構成や命名があればぜひ教えてください。 # 構成を整える ## ソースパス(エントリーポイント [...]

【Rails】Webpacker管理下のアイコン画像をFaviconに設定する方法

2020-08-30
# はじめに Rails6から標準導入されたWebpackerで画像を管理し、その中のアイコン画像をFavicon(タブやお気に入りに表示されるアイコン)に設定する方法を解説します。 # Favicon設定方法 ## 画像の用意 まずはFaviconに設定する画像を用意します。今回はフリーで使用できるアイコンを使うことにします。ちなみにPNG画像でもFaviconに設定できます。 <div style="text-align:center;"> <img [...]

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

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