css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。 カスタマイズの内容（デモ） 設置方法はいろいろなブログ...
JavaScript
css 
JavaScript 配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】
配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。今回操作する配列には、このようにオブジェクトが格納されているとします。それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。 con...
JavaScript ローカルストレージとプロキシの使い方についてまとめました【JavaScript/LocalStorage/Proxy】
LocalStrage（ローカルストレージ）とProxy（プロキシ）についてまとめたのでメモ。 LocalStrage（ローカルストレージ）とは LocalStrageは、キーと値の組み合わせをブラウザに保存する仕組みです。ブラウザを閉じた...
JavaScript ステップ式フォームを作成する【javascript/hashchange】
長いフォームをステップ式で作成したのでメモ。ステップ式といってもフォームの一部を非表示にして、ソレっぽく見せているだけです。切り替えの判定はURLの#（ハッシュ）値です。ハッシュが変更されたら表示を切り替えています。 完成したフォームを確認...
JavaScript ラジオボタンみたいに1つの要素だけ選択する【JavaScript】
フォームのラジオボタンは、グループ内で１つの要素しか選択できません。今回、同じ挙動をラジオボタン以外の要素で実装したのでメモ。 完成したラジオボタン風の動作を確認する（デモ） 動作デモ 今回、ブラウザの背景を切り替えるサンプルを作りました。...
JavaScript FlexSliderでカウントアップ（現在数/総数）を表示させる【javascript】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです！ を表示させる（←今ここ）（←今ここ） 画面が全て読み込まれるまでローディングアイコンを表示させる j...
JavaScript チェックした要素の数をそれぞれカウントする動きを実装しました【javascript/Observer】
Observer（オブザーバー）の勉強として、チェックした要素の数だけカウントする動きを実装したのでメモ。例としてイン●タグラム風のページを用意しました（笑）。「いいね」や「ブックマーク」のアイコンをチェックすると、実行結果のアイコンがアニ...
JavaScript 分割代入について調べました【javascript】
javascriptの分割代入について調べたのでメモ。 配列の分割代入 例えばこんな配列があるとします。 const user = ['user1234','tanaka','28']; この配列を分割代入するとこうなります。 const ...
JavaScript FlexSliderでローディングアイコンを表示させる【javascript】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです！ を表示させる 画面が全て読み込まれるまでローディングアイコンを表示させる（←今ここ） jsonファイ...
JavaScript FlexSliderの画像をjsonで読み込む【javascript/Fetch】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです！ を表示させる 画面が全て読み込まれるまでローディングアイコンを表示させる jsonファイルで画像デー...
JavaScript ブラウザの「戻るボタン」を押した時、ポップアップを表示させる※離脱防止【javascript】
ブラウザの「戻る」ボタンをクリックした時にポップアップが表示されるようにしました。主に入力フォームでの離脱防止対策です。 完成したポップアップを確認する（デモ） 動作デモ 実際の動作はこちらで確認できます。遷移先のページでブラウザの「戻る」...
JavaScript ブックマークレットでOGPタグを確認する【javascript】
OGPタグはページに表示されない裏側のタグです。そのためチェックがめんどくさいし、確認漏れも起こりやすいので『OGPタグ確認』ブックマークレットを作りました。 登録すればボタン一つでタグが確認できるので便利です！ ブックマークレットの登録方...
JavaScript 楽天の検索結果を取得してGoogleスプレッドシートに取り込む（スクレイピング）【GAS/JavaScript】
以前、VBAで楽天の検索結果を取得してエクセルに取り込みました。 今回、Googleが提供しているプログラミング言語であるGoogle Apps Script（GAS）での取得に挑戦しました。GASならinternet explorerがイ...
css Sass(SCSS)を使えるようにする（環境開発設定）【css/javascript】
最近使用頻度が多くなってきたSass(SCSS)の環境構築の方法をメモしておきます。 具体的には、node-sassパッケージをnpmでローカルにインストールします。 これだけだと意味不明ですが、調べながら手順をメモしていきます！ちなみに使...
JavaScript live-serverをグローバルインストールする【javascript/npm】
live-serverとは簡易ローカルサーバーを起動できるnpmのパッケージです。開発環境を立ち上げるほどでもないときに、手軽に使えるので便利。 今回、live-serverをグローバルインストールしたのでメモ。 グローバルインストールとロ...
JavaScript 連動するプルダウンで選択するカートボタンを作成しました【javascript】
アパレル系のショッピングサイトで見かける、色やサイズを別々に選択するタイプのカートボタンを作成しました。カラーとサイズを選択したらカートボタンをクリックできる仕様です。最終的にformでデータを送信することを想定して、パラメーターも設定でき...
JavaScript ブックマークレットで本番環境とテスト環境のURLを切り替える【javascript】
今回はWEB制作でよくあるテスト環境と本番環境のURL切り替えを、ブックマークレットで実装したのでメモしときます。※動作確認はChromeのみです。 ブックマークレットとは 気に入ったウェブサイトをブラウザのお気に入りに登録すると、通常その...
JavaScript レスポンシブデザイン javascriptでウィンドウのリサイズを検知する【javascript/jQuery】
レスポンシブページを作成するとき、javascriptで動的に切り替えるときによく使うコードなのでメモ。最近はCSSでもいろいろできるみたいですが。 $(function() { let timer = false; let initWid...
JavaScript javascriptで無限ループスライダーをつくりました【javascript/jQuery】
javascriptで横に流れるスライダーを作成しました。jQueryのプラグインを使えば比較的簡単に作れます。スライダープラグインで有名な「slick」を使って実装しました。 今回、クリックした画像をモーダルウィンドウで大きくするという動...
JavaScript ブックマークレットで楽天のPC版とスマホ版を切り替える【javascript】
楽天RMSで商品を登録して、スマホ版のページをチェックしたい！って時に使えるブックマークレット