JavaScript

ステップ式フォームを作成する【javascript/hashchange】

長いフォームをステップ式で作成したのでメモ。ステップ式といってもフォームの一部を非表示にして、ソレっぽく見せているだけです。切り替えの判定はURLの#(ハッシュ)値です。ハッシュが変更されたら表示を切り替えています。 完成したフォー...
JavaScript

ラジオボタンみたいに1つの要素だけ選択する【JavaScript】

フォームのラジオボタンは、グループ内で1つの要素しか選択できません。今回、同じ挙動をラジオボタン以外の要素で実装したのでメモ。 完成したラジオボタン風の動作を確認する(デモ) 動作デモ 今回、ブラウザの背景を切り替えるサ...
JavaScript

FlexSliderでカウントアップ(現在数/総数)を表示させる【javascript】

スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです! を表示させる(←今ここ)(←今ここ) 画面が全て読み込まれるまでローディングアイコ...
スポンサーリンク
Linux

Gitのブランチをマージする手順についてまとめました【Git】

クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。 作業する時、まずブランチを作成&切り替えます。最終的には作業したブランチを元のブランチにマージします。 ...
JavaScript

チェックした要素の数をそれぞれカウントする動きを実装しました【javascript/Observer】

Observer(オブザーバー)の勉強として、チェックした要素の数だけカウントする動きを実装したのでメモ。例としてイン●タグラム風のページを用意しました(笑)。「いいね」や「ブックマーク」のアイコンをチェックすると、実行結果のアイコン...
JavaScript

分割代入について調べました【javascript】

javascriptの分割代入について調べたのでメモ。 配列の分割代入 例えばこんな配列があるとします。 const user = ['user1234','tanaka','28']; この配列を分割代入...
JavaScript

FlexSliderでローディングアイコンを表示させる【javascript】

スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです! を表示させる 画面が全て読み込まれるまでローディングアイコンを表示させる(←今ここ...
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 ...
Linux

WordPressの画像をAmazon S3にアップロードする【AWS/WordPress】

WordPressにアップする画像の保存先を、WebサーバーからAmazon S3に変更したのでメモ。Amazon S3とはAWSのクラウドストレージサービスです。容量を圧迫しがちな画像の保存先をS3に変更することで、Webサーバーの容量...
Linux

MySQLでWordPress用のデータベースを作成する【データベース/MySQL】

WordPress用にデータベースを作成したのでメモ。今回、AWSのデータベースであるRDSを使用しました。サーバーにはRDSを設置済みです。また、マスターユーザーのログインIDはrootで作成しました。 AWSといっても、他のサー...
Linux

よく使うコマンドまとめ-通常作業編【Linux/CentOS】

Linuxで良く使うコマンドをメモ。都度追加していく予定。 SSH接続 ポート番号をデフォルトの22から変更しており、鍵認証で接続する場合。 $ ssh -p -i @ ファイル・ディレクトリ操作 カレントディレクトリのフルパスを表示 ...
Linux

初心者がポート番号とは何か?を調べました【Linux】

サーバーを勉強していると、ポート番号という言葉が出てきます。そもそもポート番号とは何か?を調べたのでメモ。 ポート番号はIPアドレスとセットで使う まず前提として、ポート番号はIPアドレスとセットで使用するものらしいです。パソ...
css

グリッドレイアウトをfloatで実装する【CSS/SASS(SCSS)】

あまり需要がなさそうですが、floatでグリッドレイアウトを実装したのでメモ。特に今回はSassで実装したので、その忘備録も兼ねてのメモです。 そもそもグリッドレイアウトとは?から良くわからなかったので調べました。 グリッ...