2022/09/20.htaccessにページ単位での301リダイレクトを効率よく記述する。新しいサイトを作ったので、旧サイトのコンテンツをサブドメインにお引越ししたいという状況になりました。その場合はリダイレクト設定をしないと検索エンジンにそっぽを向かれてしまう恐れがあります。301リダイレクトにはドメイン単位とかディリクトリ単位とかいろいろあります。今回のケースだとページごとにひとつずつ設定するしかなさそうだったので、やった手順を書き残しておきます。はじめにサーバーはApacheです。試した結果、私の環境では以下のコードできちんとリダイレクトできました。[L,R=301]引用元:https://ecco.co.jp/blog/htaccess-redirect/※このとき気づいたのが、日本語URLはエンコードされているとリダイレクトしないので、デコードしておく必要がありました。Spiderを使い対象ページを収集。収集したURLをCSV形式でダウンロードし、Googleスプレッドシードにアップ。フォーマットに沿った形に文字列を連結する。.htaccessに転記してアップ。Spiderを使い、サイトの全ページを取得し、投稿ページのみリダイレクト対象としてCSVファイルにエクスポートしました。?海外製のアプリで、サイトをクロールしSEOに必要な各種データを取得できる便利なツールです。(2)Googleスプレッドシードにアップし、不要なデータを削除。リダイレクト先のURL一覧を作ります。(3)フォーマットに沿った形になるように文字列を連結します。(画像参照)(4)コードが完成したら、.htaccessに記載しサーバーにアップ。ブラウザからアクセスし、正しくリダイレクトできているか確認。.htaccessにページ単位での301リダイレクトを効率よく記述する。復習】querySelector()とclassListを使ってclassを着脱するサンプル実装したサンプルタイトルの通り、JavaScriptのquerySelector()とclassListを使い、DOM要素にclassをつけたり外したりするスクリプトのサンプルを作ってみました。CodePen.querySelector()引数で渡した値にマッチするhtml要素の最初のひとつを取得します。HTMLElementが返されます。input[name='login']");querySelectorAll()マッチする全ての要素を取得したい場合はdocument.querySelectorAll()を使います。NodeListが返却されます。document.querySelectorAll("p");jQueryライクに記述できて便利です。classListdocument.querySelector("p").classList.add("red");のように記述すると、取得したhtml要素に対して引数で渡した値をclassとして付与することができます。document.querySelector("p").classList.remove("red");のように記述すると、引数の値にマッチするclassを除去します。document.querySelector("p").classList.contains("red");classの有無を判定し、真偽値を返します。document.querySelector("p").classList.toggle("red");とし、クリックイベントなどで発火させればclassの着脱が可能。IEを気にすることはほとんど無くなったし、jQuery無しのDOM操作が面倒だった時代は終わったのかもしれませんね。2020/01/06【2019年6月】Node.js/npm-scriptsでWordPressのテーマ開発環境を構築。(ライブリロードあり)WordPressのテーマ作成用のGulp開発環境をしばらく放置してしまい、gulpと各種プラグイン、Node.js本体をバージョンアップしたところエラーが多発してビルドできない状況になってしまいました。これを機に、以前からやってみたかったnpm-scriptsによるビルド環境に移行することにしました。本記事は、その時実施した内容の備忘録です。※本記事はMacで検証しています。package.jsonのconfigの値を参照する記法がwindowsの場合は異なるという情報がありますが、未検証なのでご注意ください。※WordPressのローカル環境構築は割愛しています。distディリクトリに設置し、起動できる前提としています。筆者はMAMPを使っています。※ライブリロードは、WordPressを動作させるローカルサーバー(この記事ではMAMP)をbrowser-syncで連携させることにより利用できる前提です。*WordPressのテーマで使うphpファイルはここにまとめて設置。*npmで配布されていないライブラリなどはここに設置。--save-dev設定ファイルの作成ルートディリクトリに下記設定ファイルを設置。true};bs-config.js※MAMP等でサーバーを起動したときにWordPressサイトが動作するURLをproxyに記載します。※configとscriptsのみ掲載します。※distPathはテーマファイルを出力したいパスを指定します。},※configのdistPathにはテーマファイルを出力したいパスを指定します。buildしてみてください。cleanまとめCSS/JSの圧縮は今回見送りました。webpackを使うと良いのかもしれません。lint系のプラグインも入れてません。この辺はエディタ任せでもいいかと思いつつ、気が向いたら試すかなー?という感じです。Flywheelとの連携も試しました。browser-syncの監視対象をカンマ区切りで複数指定すると、ファイルを編集してないのに勝手にリロードするという現象が発生しましたが、カンマ区切りやめてアスタリスクで全ファイル指定したら大丈夫そうでした。以下の記事を参考にさせていただきました。とローカルサーバーを連携させて自動リロードさせる。【2019年6月】Node.js/npm-scriptsでWordPressのテーマ開発環境を構築。Nuxt.jsインストールとカスタマイズ。(webサイト構築用)最近Nuxt.jsを使ってサイト制作をちょこちょこやってます。自分なりの環境構築の手順と、追加の設定をまとめておきます。v12.2.0Nuxt.jsをインストール任意のディリクトリで下記コマンドを実行する。Nuxt.jsNuxt.jsをカスタマイズSassをコンパイル可能にするコンパイラとローダーを追加する。sass-loaderfoundationなcssを設置サイト全体で効かせたい共通デフォルトのcssはfoundation.scssに書きたい。]}ress(リセットCSS)をインストールリセットCSSにressを採用。下記コマンドでインストール。ressnuxt.config.jsに以下のように追記。]}各コンポーネントで共通のsass変数やmixinを使えるようにするstyle-resources-moduleプラグインを使って実現する。下記コマンドでインストール。]}参考:《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。dev上記コマンドを実行しブラウザでhttp://localhost:3000にアクセスする。ファイル監視、ホットリロードも動作する。デプロイ静的ファイルを生成する下記コマンドで静的なファイルが生成できる。Nuxt.jsインストールとカスタマイズ。GridをIE11に対応しやすくするAutoprefixerの設定。GridをIE11に対応させる方法が紹介されています。上記の記事ではgulpやwebpackでの実装方法が書かれているのですが、LaravelMixでどうやるかは書かれていなかったので調べてみました。installが済んでいる状態。Laravelのバージョンは5.7.7で試しました。Autoprefixerはデフォルトで使用可能になっています。実装webpack.mix.jsに、以下のコードを追記する。Autoprefixer追記//こんな書き方でコンパイルできる。]});//これもOK。GridをIE11に対応しやすくするAutoprefixerの設定。none;が効かない。display:inline;の組み合わせは要注意。none;は要素にマウスやタッチで触ることができなくなるCSSのプロパティです。最近よく使うようになったのですが、Edgeでうまく動作しないケースに遭遇し、何でだーとなったので記録を残しておきます。none;の実装にあるようです。none;が機能しなくなります。Edgeのバグではないかと思われます。対策displayをinline以外の値に変えてやると正常に機能します。以下に確認用のサンプルを作成しました。none;が動作せずa要素がクリック(タップ)できてしまい、アラートが出るようにスクリプトを入れてあります。以上に挙げた条件以外でも期待通りの動作をしないケースがあるようです。以下の記事が参考になります。none;が効かない。display:inline;の組み合わせは要注意。GridをIE11に対応しやすくするAutoprefixerの設定。Bootstrap3でレスポンシブなレイアウトを組むときの要点覚え書きJavaScriptの習作。Yahooの住所ディレクトリAPIと気象情報APIを利用して一時間後の予想降水量を調べるWEBアプリのサンプルを作ってみました。Underscores.me.。