Web系 ページ読み込み時にページ先頭ではなくページ途中の位置で表示問題について
ページを読み込んだ時に意図した位置で表示させた場合、例えば次のような方法があります。 アンカーリンクを設置し、URLにパラメーターを付与してアクセスするJavaScriptでスクロールさせる 今回、他人が作った資産を流用して制作していたとこ...
Web系
Web系 
Web系 iPhoneのsafariで画像が縦長に伸びてしまう問題がalign-items:flex-startで解消しない場合の対処
レスポンシブレイアウトのウェブサイト制作の際、PCのブラウザによるスマートフォンでのエミュレーションでは問題無いが、実機のiPhoneで閲覧した時に画像の縦横の比率が正しくなく、縦に伸びている現象が発生することがあります。 発生条件 私は下...
Web系 OWASP ZAPで脆弱性診断してみる
5年以上前に一度試したことがあったものの、久々にやってみようとして色々と忘れてしまっていたので、今後の為にも書き記しておくことにします。 Javaのダウンロード＆インストール 上記ページから「すべてのJavaのダウンロードを表示します。」の...
Web系 チェックされているチェックボックスの数を教えてくれるブラウザアドオンを作ってみた
ウェブページを読み込んだ時に、チェック済みのチェックボッスが存在する場合、その数をアラートウィンドウで表示するFirefox用のアドオン（拡張機能）を作ってみました。 全てのソースコードはgithubにあります。 そのまま使う場合はFire...
Web系 MacのSourceTreeからgitにpushしようとした際に”Support for password authentication was removed”と警告されてエラーになる場合
デスクトップアプリケーションではアカウントのパスワードでpush/pull出来なくなったとのが原因です。 github側の対応 二段回認証の設定を済ませていない場合は「Settings」→「Account security」から済ませておき...
Web系 React公式チュートリアルの改良問題に挑戦してみる
過去にprogateで基礎に触れてから長らく放置したままだったReactの勉強を本格的に始めることにしました。 というのも、遠くない未来で受ける案件において、Reactを使わないことは避けられそうにないからです。 その案件自体はVue.js...
Web系 Node.jsで追加したCSSのパッケージを利用する
LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。 インストール $ npm install -D lesshat; 設定ファイル package.json { "...
Web系 @wordpress/create-blockで作成したブロックのプラグインが認識されない場合の対処
ブロック開発を行うべく、下記を参考に作業しました。 $npx @wordpress/create-block hello-block $cd hello-block $wp-env start wp-envは既にグローバルインストールされて...
Web系 Vue.jsのonchangeイベント時にVue Devtoolsで値の変更を検知出来ない場合の対策
内部的には問題無く更新されているようだったが、なんとなく釈然としないので試行錯誤してみました。 コード HTML <input type="file" ref="file0" accept="image/*" class="" id="fi...
Web系 npmでインストールしたライブラリをjsファイルで読み込んで利用する方法
基礎過ぎて今更感が半端無いですが、個人的にド忘れしていたので、今後の為にも書いておくことにしました。 ここでは、テーブルが横スクロール出来ることを明示してくれるライブラリ「scroll-hint」を利用する例で説明します。その他の前提条件と...