【Rails】deviseを使った認証機能の実装【初学者】

はじめに Railsアプリに認証機能を導入するには「devise」というGemを使う方法が最も簡単です。「devise」は認証に係る機能をほとんどコードを書くことなく実装できる反面、処理がブラックボックス化されており、全容が把握しづらいというデメリットがあります。Railsで初めて認証機能を導入する場合、まずは ...

【Rails】IDとパスワードによる認証機能の実装【初学者】

2022年6月16日 18:21
はじめに 大抵のWebアプリでは、ユーザー登録/解除、ログイン/ログアウトといった認証機能を持っています。Railsには簡単に認証機能を導入できる「device」というGemが用意されています。「devise」は多くのRailsアプリで使われている実績のあるGemですが、「devise」を使わなくても比較的簡単 ...

【Rails】Railsプロジェクトの新規作成【初学者】

はじめに Ruby on Rails(または単にRails)は、Rubyというプログラミング言語で設計・開発されたWebアプリケーションフレームワークです。一般的に、Webアプリケーションをイチから作成するには膨大な量のコードを書く必要があります。Webアプリケーションフレームワークは、Webアプリケーション開 ...

【CSS+JS】メニューアイコンの一種、ベントーメニューの実装方法(アニメーション付き)

2021年10月19日 14:56
はじめに メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。 <a class="gallery" data-group="gallery" href="https://i.imgur.com/zTufFAS.jpg"><img ...

【CSS+JS】メインコンテンツの裏から現れるフッターの実装方法

2021年10月18日 13:58
はじめに オシャレなサイトなどでたまに見かける「メインコンテンツの裏から現れるフッター」の実装方法について説明します。 サンプル <iframe height="392" style="width: 100%;" scrolling="no" title="Untitled" src="https://code ...

【CSS+JS】背景画像の視差効果(パララックス)を実装する方法

2022年6月1日 00:05
はじめに JavaScriptプラグインを使わずに、背景画像の視差効果(パララックス)をVanilla JS(ピュアなJavaScript)だけで実装する方法について説明します。 サンプル まず、背景画像の視差効果(パララックス)とはどういうものなのか確認するために、下記のサンプルをご覧ください。 <ifram ...

【Rails】ダウンロードしたフリーフォントをWebpackerを使って導入する方法

2021年10月16日 15:56
はじめに Webサイトのデザインを彩るひとつの要素にフォントの種類があります。Google Fontsの登場により、様々なフォントが手軽に導入できるようになりました。しかし、世の中にはGoogle Fontsが提供するフォント以外にもたくさんのフリーフォントが存在します。 本記事では、ダウンロードしたフリーフォ ...

【Rails】mimemagicに依存しているRailsアプリでbundle installコマンドが失敗する事象の対処法

2021年12月12日 09:53
はじめに Railsアプリでbundle installコマンドを実行しようとしたところ、以下のエラーメッセージが出力されコマンドに失敗しました。 Your bundle is locked to mimemagic (0.3.5), but that version could not be found i ...

【Rails】macOSのアップデート後にrailsコマンドが失敗する事象の対処法

2021年10月14日 15:18
はじめに 久しぶりにRailsアプリに手を入れようと思い、rails serverコマンドを実行してRailsサーバーを立ち上げようとしたところ、エラーが出て起動に失敗してしまいました。 前回までの間にしたことの中で思い当たることと言えば、macOSのアップデートを行ったくらいです。そういえば以前から何度かma ...

【CSS+JS】現在のスクロール量を確実に取得する(プロパティ対応状況まとめ)

2021年6月7日 12:34
はじめに JavaScriptで現在のスクロール量を取得するためのプロパティはたくさんあります。種類がありすぎるため、かえってどれを使えばいいのかいまいちわからないという人も多いかと思います。 本記事では、各プロパティのブラウザ対応状況まとめと、現在のスクロール量を確実に取得する方法について説明します。 スクロ ...