フロントエンド開発

最近、CSSのタイプミスを防ぐためにStylelintを導入した。特にCSS変数のミスを検知するために必要なパッケージをグローバルにインストールし、VS Codeの拡張機能を設定。個人使用のため、直接設定ファイルに必要なプラグインとルールを記述した。

新しくなったreCAPTCHA (Google Cloud) を、自前で実装してみた。reCAPTCHAを自前で実装すること自体が初めてなので、学んだことをまとめた。ソースを見る(GitHub)デモを見るreCAPTCHAキーの作成まずはGoogle Cloud

例えば www.example.com/sub のようなサブディレクトリでLaravelアプリケーションをホストする場合、作りによってはローカル環境では繋がっていたリンクが切れたり、不具合が発生することもある。こんな時ローカル開発環境もサブディレクトリで構築しておけば、対処がしやすくなる。

問い合わせフォームで完了画面からブラウザバックで確認画面に戻らせないようにしたかった。バックエンド側の作りは出来たのだが、ブラウザが戻った時にキャッシュされたページを表示してしまう。色々試してみたので、その記録。1. ヘッダーでキャッシュを無効化する<meta http-eq

自分の新しいロゴを作ってみた。このロゴはアニメーションを想定して作っている。

WordPressのブロックエディタは最初受け入れられなかった人もいたと思うが、登場してからもう4年が経ち、みんなもうすっかり慣れた頃だと思う。（フルサイト編集はまだ慣れないが・・・）テーマ開発者がブロックパターンを使いこなすことで、クライアントにとって更新しやすいサイトを作ることができる

WordPressプラグインのMTS Simple Bookingビジネス版では、設定画面から行う設定のほかに、コードを追加することで柔軟なカスタマイズが可能だ。基本的には開発者のWebサイトを見ながら書けばいいのだが、ここでは悩みやすい予約品目ごとに異なるカスタマイズを行う方法を紹介する。

古いサイトでContact Form 7がエラーを吐いていることがある。よく見ると「その他の設定」に次のようなコードが入っている。on_sent_ok: "ga( 'send', 'event', 'カテゴリ', 'アクション', 'ラベル' );"どうやらGoogleアナリティク

WordPressのXMLサイトマップは便利なので使っているが、サイトにはインデックスしたくないページもあると思う。たとえば小規模なサイトだと、カテゴリやタグ機能なんて使わなかったりする。noindexつけているページがXMLサイトマップに載っていると、Googleサーチコンソールに怒られたりもす

最近はSEOのために構造化データを入れているサイトも多いと思う。簡単にできるツールを見つけたので紹介。このサイトにアクセスして、フォームに必要事項を入力するとコードが生成される。scriptタグを丸ごとコピーして、自分のサイトのhead要素内に貼り付ければ完成。<script