JavaScript 配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】
配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。今回操作する配列には、このようにオブジェクトが格納されているとします。それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。cons...
どんぐり
JavaScript 
JavaScript ローカルストレージとプロキシの使い方についてまとめました【JavaScript/LocalStorage/Proxy】
LocalStrage（ローカルストレージ）とProxy（プロキシ）についてまとめたのでメモ。LocalStrage（ローカルストレージ）とはLocalStrageは、キーと値の組み合わせをブラウザに保存する仕組みです。ブラウザを閉じたり、...
css floatでキャプション付き画像にテキストを回り込ませる【CSS】
floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。floatでテキストを回り込ませるデモ（デモ）ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。PC版SP版実際の動作はこちら...
css ルビ（ふりがな）の位置を調整する方法【CSS】
ウェブページの漢字にルビ（ふりがな）をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。ルビをふるコードこちらがルビをふるタグです。<rt>タグの部分が表示されるルビです。<...
css ページ全体に色違いの背景パターンを表示する方法【CSS】
ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。完成したページを確認する（デモ）こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザインが実現できそうで...
JavaScript ステップ式フォームを作成する【javascript/hashchange】
長いフォームをステップ式で作成したのでメモ。ステップ式といってもフォームの一部を非表示にして、ソレっぽく見せているだけです。切り替えの判定はURLの#（ハッシュ）値です。ハッシュが変更されたら表示を切り替えています。完成したフォームを確認す...
JavaScript ラジオボタンみたいに1つの要素だけ選択する【JavaScript】
フォームのラジオボタンは、グループ内で１つの要素しか選択できません。今回、同じ挙動をラジオボタン以外の要素で実装したのでメモ。完成したラジオボタン風の動作を確認する（デモ）動作デモ今回、ブラウザの背景を切り替えるサンプルを作りました。好きな...
JavaScript FlexSliderでカウントアップ（現在数/総数）を表示させる【javascript】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。作業した内容は次の通りです！を表示させる（←今ここ）（←今ここ）画面が全て読み込まれるまでローディングアイコンを表示させるjsonフ...
Linux Gitのブランチをマージする手順についてまとめました【Git】
クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。作業する時、まずブランチを作成&切り替えます。最終的には作業したブランチを元のブランチにマージします。ブランチに関するコマンド...
JavaScript チェックした要素の数をそれぞれカウントする動きを実装しました【javascript/Observer】
Observer（オブザーバー）の勉強として、チェックした要素の数だけカウントする動きを実装したのでメモ。例としてイン●タグラム風のページを用意しました（笑）。「いいね」や「ブックマーク」のアイコンをチェックすると、実行結果のアイコンがアニ...
JavaScript 分割代入について調べました【javascript】
javascriptの分割代入について調べたのでメモ。配列の分割代入例えばこんな配列があるとします。const user = ['user1234','tanaka','28'];この配列を分割代入するとこうなります。const [id,n...
JavaScript FlexSliderでローディングアイコンを表示させる【javascript】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。作業した内容は次の通りです！を表示させる画面が全て読み込まれるまでローディングアイコンを表示させる（←今ここ）jsonファイルで画像...
JavaScript FlexSliderの画像をjsonで読み込む【javascript/Fetch】
スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。作業した内容は次の通りです！を表示させる画面が全て読み込まれるまでローディングアイコンを表示させるjsonファイルで画像データを読み...
JavaScript ブラウザの「戻るボタン」を押した時、ポップアップを表示させる※離脱防止【javascript】
ブラウザの「戻る」ボタンをクリックした時にポップアップが表示されるようにしました。主に入力フォームでの離脱防止対策です。完成したポップアップを確認する（デモ）動作デモ実際の動作はこちらで確認できます。遷移先のページでブラウザの「戻る」ボタン...
JavaScript ブックマークレットでOGPタグを確認する【javascript】
OGPタグはページに表示されない裏側のタグです。そのためチェックがめんどくさいし、確認漏れも起こりやすいので『OGPタグ確認』ブックマークレットを作りました。登録すればボタン一つでタグが確認できるので便利です！ブックマークレットの登録方法こ...
Linux Gitのコミットまでの手順をまとめました【Git】
クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。コミットまでの流れは以下の図のようなイメージです。ワーキングディレクトリには、Gitが監視していないファイルも含め作業中のファ...
WordPress 解決法：更新に失敗しました返答が正しいJSONレスポンスではありません。【WordPress/SiteGuard】
WordPressで記事を更新しようとしたら「更新に失敗しました。返答が正しいJSONレスポンスではありません。」とエラーが出るようになりました。更新しようとすると「更新に失敗しました。返答が正しいJSONレスポンスではありません。」とエラ...
Linux lsofコマンドで実行しているポート番号の通信状態を確認する【Linux】
サーバーで通信しているポート番号を確認する必要があったので、確認方法をメモ。結論からいうと、次のコマンドで確認できます。※環境はAWSのAmazon Linux 2です。$ sudo lsof -i -n -P実行結果は次の通りになります。...
Linux ファイアウォール（firewalld）の設定について【Linux】
ファイアーウォールについて調べました。一度設定するとなかなか触ることがないので忘れがちです。忘れないようにメモしておきます。ファイアウォールとはファイアウォール（firewalld）とは、通信プロトコルの不要な入り口を塞いでくれる機能のこと...
JavaScript 楽天の検索結果を取得してGoogleスプレッドシートに取り込む（スクレイピング）【GAS/JavaScript】
以前、VBAで楽天の検索結果を取得してエクセルに取り込みました。今回、Googleが提供しているプログラミング言語であるGoogle Apps Script（GAS）での取得に挑戦しました。GASならinternet explorerがイン...