はじめに
こんにちはー！
私はいくつかウェブサイトを持っていまして、
- なたでラボ
- なたで日記（本サイト）
先月「なたでラボ」（旧名 placeark）をお引越ししました。そして、最近はこの「なたで日記」の方も引っ越そうかなーと思っている次第です。そんなお引越しをしているときの調べたことなどを紹介したいと思います！
なお、WordPress.comで運用していた「なたで日記」を引っ越した経緯や、その時に困ったことをまとめた記事は、以下にあります。
経緯
すみません。少し長くなりどうでもいいことですが、せっかくの機会なので経緯を紹介したいと思います。飛ばしてもいいですし、暇で物好きなかたは読んでみて下さい。
私はジオシティーズ全盛時代にウェブサイトを始めました。ジオシティーズとは、Yahooが始めた無料ホームページサービスで、15MBの容量を自由に使えるという今思えばすごい少ないのですが、そんなサービスです。当時は、CGIも使える、infoseek とかいろいろ無料ホームページ作成サービスがあり、広告の表示方法などで迷ったものです。
ジオシティーズといえば、住民が町に住んでいるという設定の特徴がありまして、例えば私の場合は、シリコンバレーのカプチーノ通り、2XXX番地に住んでいました。隣の番地に住んでいる人に挨拶したり、友達になったりそういった面白さがありました。
その後、プロパイダ付属の広告なし無料ウェブサイトに引っ越しし、数年後にさくらサーバーと、ムームードメインで独自ドメインでウェブサイトを運営してました。この時は、XHTML/CSS が流行っていまして、HTMLとデザインは分離させたウェブサイトを作成しました。(このとき初めて取得したドメインがplaceark.comです！名前の理由は、またいつか！）
就職してからは、ブログがメインとなり、ウェブサイトの更新も滞り、placearkの方をどうしようかなーと思っていたのですが、IoT用で偶然とっていた休眠中のドメインnatade.netがありまして、それがもったいないので、サイトを引っ越すことにしました。（引っ越すといっても、さくらサーバー自体は代えていません）
内容の変更作業
ホームページの内容などの変更作業を解説します。これから解説する内容自体、CMSでウェブサイトを構築すればいいじゃんといえばそれまでなのですが、自作ホームページのロマンはもう少し続けていこうと思います。
1. ホームページの構造の作り替え
不要なページやデザインを大幅に変更しました。そもそも個人ウェブページ自体も数少ないレアなものとなっていますが・・・にしても今どき「掲示板」や「リンク」とかはいらないですからね。
デザインは、流行りのマテリアルデザインを採用しました。ここ10年で、リッチデザイン、フラットデザイン、と変わってきましたが、2018年現在の最先端デザインがマテリアルデザインです。
リッチデザインは高密度ディスプレイだと作成に時間がかかることから、業界が作成に時間がかからないフラットデザインに移行。フラットデザインだと影や立体感がないから不便な部分も多いことに気が付き、マテリアルデザインへ変わっていったような感じがします。
マテリアルデザインは、Materialize というフレームワークを使って作りました。Materialize は jQuery に依存しないので好きです。最近は古いIEも少なくなってきて jQuery 無しで書けるようになってきて良い時代になりました。
ついでに、サイト内コンテンツのアドレスもかなり気にして作り替えをしました。色々悩みましたが、以下のようなスタンスとしました。
- アドレスは「
html」を付けない。（シンプルにするため） - ドメインは「
www」は付ける。（サブドメインで何かできるように）
アドレスは最後まで迷い続けていまして、結局後から変更することになり、大変な目にあいました・・・。
2. 常時SSL化
Googleは、httpsを推奨しています。httpsで通信をしていれば、中で何を通信しているか外から見えないので安心ですからね。それで、SSL化にするにはどうすればいいかというと、Let’s Encrypt （日本語解説サイト）という素晴らしいサービスがあるのでこれを利用したいと思います。
当初、設定が大変なのかなと思いましたが、幸い私が使っているさくらサーバーでは、Let’s Encrypt を内部で自動で処理してくれて、ボタン1発でhttps化できる機能がついていたので結局とくに何もすることはありませんでした。
3. Ajax
2018年、今更になってAjax化してみました。
内容としては、ウェブサイトを開いてからXMLHttpRequestを利用して、内部のサーバーからTSVをダウンロードして、
ウェブサイトの構造をブラウザで構築するようにしました。このようにすることで、TSVファイルを編集するだけで簡単に管理できるようになるのです。
アドレスの変更作業
引っ越しして面倒なのは、ウェブページのアドレスを変えないといけないのと、検索結果を調整しないといけないという点です。ここを怠ると、ホームページに誰もたどり着けなくなります。私は何度も失敗しましたのでメモとして残しておきます。
1. DNSの設定
私は、value-domainを使用しているのですが、新しいドメインからアクセスできるように設定する必要があります。
内容としては以下のように変更します。
cname @ ***.sakura.ne.jp. cname www ***.sakura.ne.jp.
@がついているのは、www無しのサブドメインを省略した場合です。後ろに.がついている理由は完全修飾ドメイン名（FQDN）とするためです。
NSレコードを使用して、すべてさくらサーバーのネームサーバーを使用してもいいのですが、他のサブドメインも使いたいので、CNAMEレコードを使用して設定しました。
2. 引っ越し元の設定
元のウェブサイトのアドレスを入力された場合に、新しいウェブサイトに飛ばすように設定します。この設定をしておかないと、後の Google の WebMasters Search Console の設定も失敗します。
私はすでに、Search Consoleで引っ越し前のサイトを登録していたのですが、Search Console に登録していないのであれば、この「2.」をする前に登録しておきましょう。引っ越し前サイトを「2.」を行った後に登録しようとすると、登録に失敗します。
話は戻りますが、リダイレクトするようにするためには、.htaccessを次のような感じに設定します。
Redirect permanent / https://www.hikkoshisaki.com/
もし、いくつサイトのアドレスが変わるのであれば、こんな感じに複数行書きます。たぶん上から順番の優先度で実行されていくと思います。
Redirect permanent /top/top.html https://www.hikkoshisaki.com/top.html Redirect permanent /top_news.html https://www.hikkoshisaki.com/news.html Redirect permanent /index.html https://www.hikkoshisaki.com/ Redirect permanent / https://www.hikkoshisaki.com/
3. 引っ越し先の設定
httpsなのか、httpなのか。www付きなのか、www無しなのか。これらの表記が揺れないように、.htaccessの設定をしておきます。
以下のように設定すれば、自動でwww付きhttps付きにリダイレクトされます。
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.hikkoshisaki.com/$1 [R=301,L]
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(hikkoshisaki\.com)(:80)?
RewriteRule ^(.*) https://www.hikkoshisaki.com/$1 [R=301,L]
4. Google アナリティクスの設定
Google アナリティクスの設定をします。
初期設定の方法は忘れましたが、すでに引っ越し前のサイトで登録している場合は、引っ越し先のアドレスに変更しておきましょう。以前のプロファイルとかは使いまわしできるので、アドレスのみ変更するだけでよいです。
5. Google WebMasters Search Console の設定
WebMasters Search Consoleの設定をします。
引っ越し前のウェブサイトは「2.」で記載したようにそもそも登録していたとして、新しいウェブサイトを登録します。
注意として、古いウェブサイトの設定は消さないでください。
そして、古いウェブサイトから、「アドレスの変更」機能を利用して登録した新しいウェブサイトを選択します。この時、色々自分の管理しているウェブサイトなのかを認証する必要があるので、非常に面倒です・・・。
さいごに
とりあえず、そんなこんなで引っ越しは完了しました。
一番手間取ったのが、WebMasters Search Consoleです。wwwあり／なし、httpsのsあり／なし、がそれぞれ登録できるとか、非常に難しい仕様です。インデックス登録も1日に使用できる回数が限られていたり、エラーが出ても解決方法が書いていないので、基本的にググりまくるしかありません・・・。そもそも、同じ Google なのに、アナリティクスと Search Console のGUIが全然違うので混乱します。
以上、おつかれさまでした・・・。
コメント