AUTOVICE

TECH BLOG

【Zapier】Zapier(ザピアー)を使ってブログの更新情報を自動でTwitterに投稿する

2021-02-12
# はじめに <img data-src="https://i.imgur.com/ytXoLY0.png" class="lazyload effect-fade"> 当ポートフォリオサイトでは、ブログの記事を新しく投稿すると、自動で更新情報がTwitterに投稿されるようになっています。これはTwitter APIの機能を使って実現しているわけですが、Twitter APIを利用するにはかなり面倒くさい手順を踏まなければなりません。 <iframe class="h [...]

【Integromat】GoogleのカスタムOAuthクライアントを使用したGoogleサービスへの接続方法

2021-02-11
# はじめに 当ポートフォリオサイトでは、トップページのコンタクトフォームから送られた内容を自分のGmailアカウントに送信するために「Integromat」というWebサービスを使用しています。 <iframe class="hatenablogcard" style="width:100%; height:155px; max-width:680px;" title="独自ドメインのメールアドレスでメールを送受信する方法【ほぼ無料】 - AUTOVICE" src="ht [...]

【Rails】「NoMethodError (undefined method `cookie_value' for nil:NilClass):」の原因と対処法

2021-01-17
# はじめに 当ポートフォリオサイトのブログにてエラーが出ていて見られない状況が続いていました。気づいたのはつい先日のことで、知り合いの方との通話中にたまたま発覚しました。 結論から言うと`impressionist`というGemが原因でした。 2020年9月のリニューアル時から`impressionist`を導入しているので、そのときからエラーが出続けていたことになります。利用者の方々にはご迷惑をおかけしたことを深くお詫びいたします。 # 症状 Googleな [...]

【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. [...]