なたで日記

いろいろな思ったこと書きますヽ(^▽^ゞ)

ウェブサイトを引っ越ししようの巻

time 2018/05/27

ウェブサイトを引っ越ししようの巻

こんにちはー!

私はいくつかウェブサイトを持っていまして、
なたでラボ
・なたで日記(本サイト)

先月「なたでラボ」(旧名 placeark)をお引越ししました。
そして、最近はこの「なたで日記」の方も引っ越そうかなーと思っている次第です。
そんなお引越しをしているときの調べたことなどを紹介したいと思います!


旧サイトのお引越し

はじめに

私はジオシティーズ全盛時代にウェブサイトを始めました。
ジオシティーズとは、Yahooが始めた無料ホームページサービスで、
15MBの容量を自由に使えるという今思えばすごい少ないのですが、そんなサービスです。
当時は、CGIも使える、infoseek とかいろいろ無料ホームページ作成サービスがあり、
広告の表示方法などで迷ったものです。

ジオシティーズといえば、住民が町に住んでいるという設定の特徴がありまして、
例えば私の場合は、シリコンバレーのカプチーノ通り、2XXX番地に住んでいました。
隣の番地に住んでいる人に挨拶したり、友達になったりそういった面白さがありました。

その後、プロパイダ付属の広告なし無料ウェブサイトに引っ越しし、
さらに数年後にさくらサーバーと、ムームードメイン
独自ドメインでウェブサイトを運営してました。
ちなみにこの時は、XHTML/CSS が流行っていまして、
HTMLとデザインは分離させたウェブサイトを作成しました。

そして、このとき取ったドメインがplaceark.comです。
なんで、こんな名前にしたかって・・・・・・まあそれはいつか。

就職してからは、ブログがメインとなり、ウェブサイトの更新も滞り、
placearkの方をどうしようかなーと思っていたのですが、
IoT用でとった休眠中のドメイン、natade.netがもったいないので、
サイトを引っ越すことにしました。
(引っ越すといっても、さくらサーバー自体はかえていないけどね)

引っ越し作業(内容編)

引っ越しをするにあたって、せっかくなので色々とやってみたいことをしました。

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

今更のAjax化です。
ウェブサイトを開いてから内部のサーバーからTSVをダウンロードして、
ウェブサイトの構造をブラウザで構築するようにしました。
つまり、TSVを編集するだけで簡単に管理できるようになるのです。

まあ、「1.」も「3.」も、
CMSでウェブサイトを構築すればいいじゃんといえばそれまでですが、
私は、自作ホームページまだまだ貫きます……。

引っ越し作業(アドレス編)

引っ越しして面倒なのは、
ウェブページのアドレスを変えないといけないのと、
検索結果を調整しないといけないという点。

ここを怠ると、ホームページに誰もたどり着けなくなります。
私は何度も失敗しました。

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が全然違う!
とまあ、操作する機会が少ないものの非常に大変な思いしました……。

コメントを残す




プロフィール

なたで

なたで

明るくて楽しいことが好きです!モノづくりや旅が趣味です!

RSS フィード RSS feed GitHub GitHub Twitter Twitter YouTube YouTube



sponsored link

タイムライン