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

【CSS+JS】ウィンドウ内全体にファイルをドラッグ&ドロップしてアップロード

2021年6月9日 21:59
はじめに ユーザーが選択したファイルをアップロードする必要がある場合、ファイル選択フィールドを設置することはもちろんですが、ファイルをドラッグ&ドロップしてアップロードできるようにもなっていると使い勝手のいいサービスだと言えます。しかし、ドラッグ&ドロップできるエリアが一部分だけだと少し不便な場合があります。 ...

【自作Webサービス】Napstablook《投資信託管理サービス》の機能紹介

2021年6月2日 13:54
はじめに <iframe class="hatenablogcard" style="width:100%; height:155px; max-width:680px;" title="Napstablook" src="https://hatenablog-parts.com/embed?url=http: ...

【Rails】Railsアプリのデバッグ《マルチデバイス篇》

2022年6月16日 18:26
はじめに 近年のWebアプリはレスポンシブ対応が当たり前になっています。最低でもPCとスマートフォンに対応したデザイン、ときにはその中間のタブレットに対応したデザインなんかも作成する必要があります。 Webアプリの開発はPCを使って行うのでPCでのデバッグは簡単ですが、スマートフォンやタブレットなどの別端末での ...

【Rails】Railsアプリのデバッグ《Better Errors篇》

2022年6月16日 18:25
はじめに Railsアプリの開発中になんらかのエラーが発生すると、デフォルトでは以下のような画面が表示されます(画像をクリックすると拡大します)。 <a class="gallery" data-group="gallery" href="https://i.imgur.com/V9lx7Iy.png"><im ...

【Rails】Railsアプリのデバッグ《byebug篇》

2022年6月16日 18:25
はじめに Ruby on Railsに限りませんが、アプリの開発中にはエラーは付き物です。なにかしらのエラーが発生したときに、エラーの原因を特定しエラー箇所を修正することをデバッグと言います。Railsではデバッグの手助けとなる機能があらかじめ備わっています。 本記事では、「byebug」を使ったデバッグについ ...