Web系

Vue.jsのonchangeイベント時にVue Devtoolsで値の変更を検知出来ない場合の対策

内部的には問題無く更新されているようだったが、なんとなく釈然としないので試行錯誤してみました。コードHTML<input type="file" ref="file0" accept="image/*" class="" id="file0...
Web系

npmでインストールしたライブラリをjsファイルで読み込んで利用する方法

基礎過ぎて今更感が半端無いですが、個人的にド忘れしていたので、今後の為にも書いておくことにしました。ここでは、テーブルが横スクロール出来ることを明示してくれるライブラリ「scroll-hint」を利用する例で説明します。その他の前提条件とし...
Web系

Node.jsとEJSとwebpackでテンプレート管理出来るweb制作環境を作る

過去に似たようなことを試しましたが、webpackのバージョンも上がり新たに環境を作ってみました。前回はEJSのwebpack用プラグインを使いましたが、アップデートが放置されており不安だったのと、プラグインを使わない方法を実践している参考...
Web系

DockerのMySQLのボリュームをホストOSでの共有ディレクトリ以下に配置したらコンテナを起動出来なかった

未だにWindowsにおけるローカルの開発用サーバーとしてXAMPPを使うことがあるのですが、そろそろDockerに移行したいという思いがありました。今回、実際に環境を構築した際に掲題の件でつまづきましので、ここに対処法について記載しておき...
Web系

Vagrant上のDockerでWordPress開発環境のwp-envを使う

これまでWordPressの開発環境としてはLocal(旧Local by Flywheel)を使ってきましたが、最近はWordPress公式が開発しているDockerパッケージのwp-envという環境がオススメされているようなので試してみ...
Web系

[DataTables]ソート機能を持つ表の意図した順への並び替え

並び替え機能を持つtableタグで表示される表を実装する時、いつも使用するライブラリがあります。対象の表のidを指定するだけで、ソート・絞り込み検索・ページネーションの機能を提供してくれる素晴らしいJavaScriptライブラリです。ソート...
Web系

軽量CSSフレームワークのmini.cssを使ってみた

レスポンシブ対応ウェブサイトを作る際に、全て自分でCSSを設計するのは面倒なので、適当なフレームワークを使うことが多いです。これまではbootstrapばかり使ってきましたが、せっかくなので別のCSSフレームワークを使ってみることにしました...
Web系

WordPressの管理画面におけるカスタム投稿一覧画面のカスタマイズ

ここでは下記の条件を満たすカスタマイズを行います。カスタムタクソノミーとカスタムフィールドを持つカスタム投稿一覧にカスタムタクソノミーとカスタムフィールドのカラム(列)を追加する各カラムでのソートが出来るようにする各カスタムタクソノミーとカ...
Web系

Windowsにてnpmでグローバルインストールしたパッケージのコマンドが使用できない場合の対処法

Gatsbyという静的サイトジェネレーターを使用したかったので、npmコマンドにてグローバルインストールを実行して"gatsby"コマンドを叩くも、有効なコマンド認識としてされない問題が発生しました。Winodwsでコマンドが使えない理由の...
Web系

送信ボタンの二重クリック防止を目的とするボタン無効化の推奨される対応方法について

サーバーに対して何かデータを送信するフォームがある時、送信ボタンが誤って2回連続で押されてしまったり、リクエスト送信後のサーバー側における処理終了後の画面遷移を待たずに再度送信ボタンを押されたりすること防ぐ為に、「送信ボタンを押されたらボタ...