【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」を使ったデバッグについ ...

【CSS+JS】モーダルウィンドウを表示しその中にYouTube動画を動的に埋め込む

2022年5月31日 23:58
はじめに 動画のサムネイル画像をクリックしてモーダルウィンドウを表示し、その中にYouTube動画を動的に埋め込む方法について説明します。なお、本記事ではYouTube動画を動的に埋め込むまでを範囲とし、埋め込んだ動画の再生制御などは範囲外とします。 実装 サンプル ふたつのサムネイル画像をそれぞれクリックして ...

【CSS+JS】テキストを1文字ずつ表示するアニメーションの実装方法

2021年5月26日 12:25
はじめに モダンなサイトでよく見かける「テキストを1文字ずつ表示するアニメーション」の実装方法を解説します。 実装 サンプル 繰り返し動作を確認したい場合は右下の「Rerun」ボタンをクリックしてください。 <iframe height="265" style="width: 100%;" scrolling= ...

【Rails】レンダリング(renderメソッド)でアンカー指定を行う

2021年5月25日 12:26
はじめに 通常、Railsでアンカー付きのリクエストを発生させるにはredirect_toを使います。 rb redirect_to root_path(anchor: 'target') では、renderでビューを表示させるときにアンカーを指定したいときはどうすればいいのでしょうか。renderはredi ...

【VSCode】「Search/Translate Hero」を使って右クリックで簡単に検索/翻訳を行う

2021年5月21日 14:52
はじめに VSCodeを使って開発を行なっているときに何らかのエラーが発生することがあります。しかし、エラーメッセージというのは英語で書かれていることがほとんどなので、英語が苦手な人にとっては解読に時間がかかってしまいます。英語のエラーメッセージでもGoogle翻訳やDeepLといった翻訳サービスを使えばいいの ...

【Rails】Bundler 2.2.x以降は開発者が適切なプラットフォームを追加する必要がある

2021年5月24日 12:56
事象 昔作ったRailsアプリを久しぶりに修正しデプロイしようとしたところ、以下のエラーが出力されました。 ```bash 実行コマンド Running $HOME/.rbenv/bin/rbenv exec bundle check エラー内容 Your bundle only supports platfo ...