工学院大学学生団体ポータルサイト｜SHAiRのURL変更
9月
#Webサイト #URLの変更 #リダイレクト #アップグレード
いつもお世話になっております．
工学院大学学生自治会常任委員会 SHAiR局です．平素は当委員会Webサイトをご利用いただきまして誠にありがとうございます．
現在提供中の「工学院大学学生団体ポータルサイト｜SHAiR」は2023年8月29日に https://www.ns.kogakuin.ac.jp/SHAiR/ から始まる新しいURLになったことを報告します．
そしていままでの https://www.ns.kogakuin.ac.jp/~wws5023/ から始まる旧URLは2024年3月31日以降アクセスできなくなります．なお旧URLにあったページと新URLにあるページはあまり違いはありません．サイトの更新に関しましてSHAiRのXやTOPページで通知していきます．
これからも新しいURLでSHAiRをよろしくお願いいたします．
さて今回のSHAiR Blogでは新しいURLになったことを周知させる方法のひとつと，新URLでの仕様の改善について備忘録的に記していきます．
要約
・周知させる方法のひとつ
そのひとつは新しいURLへリダイレクトさせる方法です．
Google検索やYahoo!検索などの検索エンジンからアクセスした場合はすぐさま新しいURLへリダイレクトさせるようにしました．また，特定の期間にアクセスした場合もすぐに新URLへリダイレクトさせるようにしました．
それ以外では7秒間新URLについてのお知らせを表示させてから新URLへリダイレクトさせるようにしました．リダイレクトはJavaScriptで実行させるようにしています．
ただし場合分けは厳密ではありません．ブラウザの設定や機能によってはすぐさま新URLにリダイレクトされず7秒間新URLのお知らせが表示させられるでしょう，でもそれは非常に少数です．新URLになったことを周知させるのが主な目的なので7秒間表示させることには越したことはないですよね．
・新URLでの仕様の改善
.htaccessファイルを用いてWebサーバの動作を変更しました．改善点は3つあります．ここではWebサーバを「サーバ」と記し，ユーザのブラウザなどを「クライアント」と記していきます．またクライアントからサーバへなにかを要求することを「リクエスト」を記していきます．
1. 全てのファイルにおいて必ず通信を暗号化するように実現させました．
2. 全てのファイルにおいてクライアントは更新されているかどうか毎回サーバにリクエストするようにしました．つまりファイルが更新されていたら最新のものをダウンロードさせて，更新されていなかったらキャッシュを再利用させるようにしました．
3. 高い圧縮率が見込めるファイルにおいて圧縮機能を使いデータ通信量を削減させるようにしました．この機能は元々有効になっていませんでした．サービス提供元の方と相談をして，ついに2023-08-31に有効化していただきました😄
このように，通信コストを抑えつつ，常に最新のコンテンツを安全に皆様へお届けできるようにしました！
本文・詳細・コード
以下はさらに技術的なことが含まれていおり多い文章です．続きを読む場合は詳細をクリックしてください．
【詳細】続きを読む
・周知させる方法のひとつ
そのひとつは旧URLにアクセスしていただいたユーザに新しいURLへリダイレクトさせる方法です．リダイレクトさせるにあたり，どの様なタイミングか，どの様にさせるか，どうやって知ってもらうかを考えました．
最初にリダイレクトさせるタイミングについてです．ただ単に新しいURLへすぐにリダイレクトさせるとユーザは気づきにくいし，数秒待ってからリダイレクトさせるのはサイト訪問者からすれば遅く感じてしまうだろうし，，，
そこで思いついたのはGoogle検索やYahoo!検索などの検索エンジンからアクセスしてきた方にはすぐに新しいURLへリダイレクトさせて，それ以外で（ブックマークやPDF，QRコード，URLを直接入力などから）アクセスしてきた方を数秒間新しいURLの周知をしてからリダイレクトさせよう，と大雑把に場合分けをしようと考えました．
このポータルサイトSHAiRは多くの方が検索エンジンからアクセスしていただいています．検索エンジンからアクセスする方は大体初めてであったり久しぶりにSHAiRサイトが必要になった方であったりと推測されます（Google Search Console，Bing Webmaster Toolsより）．探している情報を早く得たいでしょうから検索エンジンを頼りにしている方に数秒間新しいURLの周知をさせるのはあまり必要ないと判断しました．
一方でサイトに直接訪れたり別のWebサイトからアクセスしてきた方は旧URLのページを知っていたり旧URLが今後も利用されると思われていたりする可能性が高いため，新URLになったことを表示させる必要があると判断しました．
次にどの様にリダイレクトさせるかについてです．結論から言うとJavaScriptのコードでクライアント側でリダイレクトさせるようにしました．本当はPHPや.htaccessファイルを使用して上記の場合分けの通りにサーバ側でリダイレクトさせることが望ましかったのですが，諸事情によってサーバでのリダイレクトを辞めました．
JavaScriptのコードを一つ一つのHTMLファイルで変更するのは大変なため，上記を基に全てのHTMLファイルに同じJavaScriptのコードを含めることにしました．次の図1にそのコードを示します．
図1 HTMLファイルのコード（多少異なる）
初めの＜script＞要素内で端末の日時と旧URLから新URLへ変換したものをそれぞれ変数に入れます．次にif文内で比較を行います．||は「または」を現し&&は「かつ」を現します．
1. test()メソッドで前のページのURLが検索エンジンのURLに含まれる文字列と一致するか
2. test()メソッドでユーザーエージェントにbotやspider（大文字小文字関係なし）が含まれるか
3. 端末の日時が日本標準時間で2023年10月1日午前9時から2023年10月16日午前9時の間であるか
4. 端末の日時が日本標準時間で2023年9月13日午前9時以前であるか
上記の4つの条件のうち一つ以上真である場合にreplace()メソッドですぐに新URLへ移ります．一方どの条件にも当てはまらない場合はsetTimeoutメソッドで7,000ミリ秒後に新URLへ移ります．
条件に当てはまらない場合7,000ミリ秒間は＜body＞要素内で新URLになったことなどを表示させます．
さてほとんどのクライアントで想定通りにリダイレクトを実現させることができましたが，検索エンジンに2023年3月31日以降も検索結果に出てきてしまう恐れがあります．それを阻止するため，HTMLのhead内にある＜meta＞要素でウェブクローラーに対してnoindexであることを示しました．また.htaccessファイルにHeader set X-Robots-Tag "noindex, follow"を追記してnoindexであることを示しました．そうすることで検索エンジンの結果に旧URLを表示させないように明示しました．
さらに詳細を書こうと思えば書けますがこの辺にしておきます．
・新URLでの仕様の改善
.htaccessファイルで改善をしました．
1つ目，常に通信を暗号化させるためにApacheのmod_rewriteモジュールを使用してhttp:でアクセスしてきたらhttps:から始まるURLにリダイレクトさせるようにしました．それを実現する設定を図2の1つ目のmod_rewrite.cと囲まれた所に示します．また，セキュリティを少しでも向上させるために設定したことを図2のmod_headers.cと囲まれた所の2, 3行目に示します．2行目のContent-Security-PolicyではHTTPSでないリクエストがWebページ内に侵入しないようにしたり，違うドメインのWebページに当サイトのページが埋め込まれても利用できないようにしたりしました．3行目のStrict-Transport-Securityでは次回当サイトのドメインにアクセスする時，初めから通信を暗号化するようにしました．数字は秒を示していて約37カ月間はHTTPSだけで接続することをクライアントが記憶します．
2つ目，旧URLではキャッシュコントロールを明示していなかったためサイトのデザインを更新しても数週間後（クライアントごとに異なる）にそれが反映されるというようなことがありました．それを解消するためにmod_headersモジュールを使用してno-cacheと明示することでクライアントのキャッシュを再利用する前にサーバに更新があるかを常に確認させるようにしました．それを実現する設定を図2のmod_headers.cと囲まれた所に示します．
3つ目，通信量を抑えるためにmod_deflateモジュールを使用してJavaScriptは62%以上，CSSは48%以上，HTMLは70%前後と通信量を圧縮させました．またFilesMatchで高い圧縮率が見込めるファイルのみに限定しました．それを実現する設定を図2のFilesMatchと囲まれた所に示します．ちなみにサービス提供元と相談した結果，8月31日にこのモジュールを有効にしていただきました．
図2 .htaccessファイルの中身（2023年9月8日時点）
￥に見えるのはバックスラッシュです
コピー利用可能
このように，通信コストを抑えつつ，常に最新のコンテンツを安全に皆様にお届けできるようにしました！
参考にしたサイト
・Google 検索セントラル (developers.google.com)
・Bing Webmaster Tools (www.bing.com)
・MDN Web Docs (developer.mozilla.org)
・Can I use... (caniuse.com)
・Apache HTTP Server (httpd.apache.org)
・Analyse your HTTP response headers (securityheaders.com)
・GZIP Compression Test (www.giftofspeed.com)
工学院ポケモンだいすきクラブ
2月 サークル紹介
#サークル活動 #ポケモン
皆さんこんにちは。工学院ポケモンだいすきクラブです。
私たちはポケモンというコンテンツを通して友好関係を深めています。
私たちは2022年5月にできたとても若いサークルです。当時新入生だった現2年生を主体に、平日を中心に活動しています。
主にSwitchを媒体としたポケモンのゲーム、ポケモンカードゲームやポケモンにまつわるクイズや絵描きなどメンバー全員で楽しく活動しています。
とても自由でアットホームな空間で活動しておりますので、ポケモンが好きと言う人は是非遊びに来てくださいね。
工学院ポケモンだいすきクラブ
Twitter @Pogakuin