レイアウトプラン紹介 (準備中)
2016年12月01日 (4)

さくらのブログ内でドメインを移転する&カスタマイズする

このブログは,もう何年前から契約しているのかすら覚えていない,さくら Internet のレンタルサーバーに無料で付属しているオプション,"さくらのブログ" 機能を使っています.ドメインはこれまで,さくらのブログで用意してくれている sblo.jp をそのまま使い,自由に選べるサブドメインは ngage-layout として,ngage-layout.sblo.jp という URL を使っていました.
今回,.blog ドメインが申し込めるようになり,ngauge.blog という短いドメイン名を取得出来ましたので,URL を変更しました.ブログ移転のために色々と設定をカスタマイズすることで Google での検索に影響を与えないように出来たのと,これを機に,これまでもカスタマイズして使っていたさくらのブログのテンプレートをさらにいくつかカスタマイズしましたので,自分の備忘録も兼ねてドメイン移行手順・カスタマイズ内容を記しておきます.
ところで,「ゲージ」はアメリカ英語では gage で,イギリス英語が gauge だと覚えていたので,N ゲージも ngage (N-gage) なのかと思っていたのですが,どうやら専門用語の場合はアメリカ英語でも gauge のようで,N ゲージはその意味から ngauge で綴られることが多いようです.このためこれを機に,ドメインの綴りも gauge にしました.
なお,さくらのブログは Seesaa ブログ機能をそのまま使っていますので,カスタマイズ等の使いこなしの際には,Seesaa ブログでのノウハウがそのまま流用出来ます.

さくらのブログでは記事の URL が連番になっている

さくらのブログの場合,自分で取得した独自ドメインを使うのであれば実は簡単です.これまで使っていた ngage-layout.sblo.jp というドメイン (ブログ) に,新たなドメインを割り当てる作業をすればよいだけです.しかしこれだと,1 点,懸念がありました.
それは,この操作だと '移転' ではなく,'コピー' になってしまうということです.つまり,この操作を行っても,今までの ngage-layout.sblo.jp でもこれまでどおりアクセス出来てしまうのです.これは新旧ドメインにまったく同じコンテンツが存在することとなり,SEO の観点ではよろしくないようです.そこで,さくらのブログはいくつでもブログを作ることが出来ますので,ngage-layout.sblo.jp はそのままにして,新しいブログを作成しそちらで新ドメインを使うこととしました.
さくらのブログでは,データの export/import が MT 形式で簡単に出来るので,あっという間に新旧のブログが出来上がりました.……が,ここからが大変でした(;´Д`)

まず,これもあちこちで書かれていますが,さくらのブログ (Seesaa ブログ) の場合,記事のパーマネントリンクが,よく判らない

http://ngauge.blog/article/177866817.html

のような,9 桁の数字が入ったものになってしまいます.よく判らないとういうか,自分のブログだけでなくてシステム全体での記事の通し番号ってことは容易に想像が付きますね(^_^;
このためデータを export/import すると新旧ブログで見事に (ドメイン以外の部分の) URL が変わってしまうのです (´・ω・`)  ブログに,自分自身のブログの記事へのリンクを一切張っていない場合はこれでも構いませんが,私の場合,出来るだけ関連過去記事へのリンクを張るようにしています.こうしないと,何かの話題について検索して訪れてくれた方が,たまたま,その話題について語っている "後半" の記事にたどり着いた場合,それまでの経緯を探すのに苦労することがあると考えているからです.
こうした状態だと,新しいサイトに記事をすべて引っ越しても,そこから出ている自分の記事へのリンクはすべて古いサイトへのリンクとなってしまいます.……ん〜,こりゃ困った!

そこで今回は,次のような荒技に出ました.export したデータには残念ながら URL は含まれていません.そこでまずは,export したデータが手許にありますが,敢えて wget を使って,新旧ブログ双方ですべてのファイルを取得します.

%wget ngage-layout.sblo.jp -r --domains=ngage-layout.sblo.jp
%wget ngauge.blog -r --domains=ngauge.blog

これで,すべての記事が URL とともに手に入りました.次に,以下のようにして一覧化します.

%cd ~/ngage-layout.sblo.jp/article/
%fgrep '<title>' * | sed -e s'/<title>//' -e 's/<\/title>//' > ~/ngage-layout.sblo.jp.txt
%cd ~/ngauge.blog/article/
%fgrep '<title>' * | sed -e s'/<title>//' -e 's/<\/title>//' > ~/ngauge.blog.txt

この結果,以下のような新旧ブログでの URL (ファイル名)・ブログタイトルが入ったテキストファイルが完成しました.

% head ~/ngage-layout.sblo.jp.txt
175839570.html:突如として: Nゲージ立川駅レイアウト作成記
175842139.html:E257 系・E259 系: Nゲージ立川駅レイアウト作成記
175842680.html:ED16・ホキ2500: Nゲージ立川駅レイアウト作成記
175842826.html:立川駅はどうなっている?: Nゲージ立川駅レイアウト作成記
175846667.html:鉄道模型レイアウター F 2013: Nゲージ立川駅レイアウト作成記
175847190.html:立川駅はどうなっている? (2): Nゲージ立川駅レイアウト作成記
175847804.html:レイアウトプラン作成: Nゲージ立川駅レイアウト作成記
175848160.html:レイアウトプラン作成 (2): Nゲージ立川駅レイアウト作成記
175848311.html:立川駅縮小第 1 期工事資材発注 (随意契約): Nゲージ立川駅レイアウト作成記
175848451.html:レイアウトを組むも...: Nゲージ立川駅レイアウト作成記
% head ~/ngauge.blog.txt
177856358.html:突如として: Nゲージ立川駅レイアウト作成記
177856359.html:E257 系・E259 系: Nゲージ立川駅レイアウト作成記
177856360.html:ED16・ホキ2500: Nゲージ立川駅レイアウト作成記
177856361.html:立川駅はどうなっている?: Nゲージ立川駅レイアウト作成記
177856362.html:鉄道模型レイアウター F 2013: Nゲージ立川駅レイアウト作成記
177856363.html:立川駅はどうなっている? (2): Nゲージ立川駅レイアウト作成記
177856364.html:レイアウトプラン作成: Nゲージ立川駅レイアウト作成記
177856365.html:レイアウトプラン作成 (2): Nゲージ立川駅レイアウト作成記
177856366.html:立川駅縮小第 1 期工事資材発注 (随意契約): Nゲージ立川駅レイアウト作成記
177856367.html:レイアウトを組むも...: Nゲージ立川駅レイアウト作成記

同じタイトルの記事にも関わらず,URL が見事に違っているのが判りますね.ちなみに新ブログのほうはきれいに連番になっています.つまりこれは,上で書いたとおり,ほかの人のブログも合わせて連番になっていることを示しています.
さて,ここまで来ればあと一歩です.これ以降も Linux 上で処理することも出来ますが,このあたりからは Windows 上の GUI アプリケーションでやってしまった方が確実ですので,このファイルをまずは Windows PC 上にダウンロード.そして,不要なブログ名を削除してから,

ブログタイトル, 旧URL (ngage-layout.sblo.jp), 新URL(ngauge.blog)
突如として, 175839570.html, 177856358.html
E257 系・E259 系, 175842139.html, 177856359.html
ED16・ホキ2500, 175842680.html, 177856360.html
立川駅はどうなっている?, 175842826.html, 177856361.html
鉄道模型レイアウター F 2013, 175846667.html, 177856362.html
立川駅はどうなっている? (2), 175847190.html, 177856363.html
レイアウトプラン作成, 175847804.html, 177856364.html
レイアウトプラン作成 (2), 175848160.html, 177856365.html
立川駅縮小第 1 期工事資材発注 (随意契約), 175848311.html, 177856366.html
レイアウトを組むも..., 175848451.html, 177856367.html
    :

のような,新旧 URL 対照表を Excel 上で作成しました.これを元に,

s|http://ngage-layout.sblo.jp/article/175839570.html|http://ngauge.blog/article/177856358.html|g;
s|http://ngage-layout.sblo.jp/article/175842139.html|http://ngauge.blog/article/177856359.html|g;
s|http://ngage-layout.sblo.jp/article/175842680.html|http://ngauge.blog/article/177856360.html|g;
s|http://ngage-layout.sblo.jp/article/175842826.html|http://ngauge.blog/article/177856361.html|g;
s|http://ngage-layout.sblo.jp/article/175846667.html|http://ngauge.blog/article/177856362.html|g;
s|http://ngage-layout.sblo.jp/article/175847190.html|http://ngauge.blog/article/177856363.html|g;
s|http://ngage-layout.sblo.jp/article/175847804.html|http://ngauge.blog/article/177856364.html|g;
s|http://ngage-layout.sblo.jp/article/175848160.html|http://ngauge.blog/article/177856365.html|g;
s|http://ngage-layout.sblo.jp/article/175848311.html|http://ngauge.blog/article/177856366.html|g;
s|http://ngage-layout.sblo.jp/article/175848451.html|http://ngauge.blog/article/177856367.html|g;
    :

という sed での置換用コマンドファイルを作成します./ をいちいちエスケープしてもよいですが,sed の場合,このようにデリミタを自由に指定出来るのが便利ですね.これを使って,

%sed -f ~/ngauge.blog.sed mtarchive-ngauge-blog-2016-05-2016-11.log >mtarchive-ngauge-blog-2016-05-2016-11.cnved.log

として,取得したブログのログを変換します.これで,新ブログに含まれていた旧ブログへのリンクがすべて新ブログへのリンクに変更されました.半自動的に出来るのは残念ながらここまで.以降は,上記のログファイルから,ngauge.blog/article/ で始まるリンクがある記事を検索し,ヒットしたものを,さくらのブログのブログコントロールパネルから更新しました.私の場合は今現在ではまだ 169 記事しかありませんでしたし,すべての記事で自分自身の記事へのリンクを張っている訳でもないので,数時間の手作業ですべての記事を更新出来ました.
ブログについても同様に処理してもよいのですが,今後は放置する予定の旧ブログのコンテンツに手を入れるのも生産的ではないので,今回はこのままとすることにしました.

ここまでの作業で,旧ブログは放置,新ブログでは旧ブログの残骸を含まない形で移転が完了しました.

さくらのブログでは 301 リダイレクトが使えない

ブログを移転した場合,放置しておいてもそのうち Google 先生などの検索エンジンが見付けてくれると思いますが,SEO 的には検索エンジンにそのことを通知してやる必要があります.って,アフィリエイトで金儲けを企んでいるサイトでないので SEO も何もない気がしますが,ま,気分の問題ですね.
通常はこうした場合,301 リダイレクトを使うようです.しかし 301 リダイレクトは .htaccess に記載することで実現します.しかしここでまた問題が... さくらのブログは CMS 関係のファイルに直接アクセスは出来ないため,.htaccess の記載を変えることが出来ないのです.ここまで時間をかけてせっかくやって来たのに,肝心の Google 先生への申告が出来ないなんて(;´Д`) ……ん〜,こりゃ困った!

となれば 302 リダイレクトを使うしかありません.しかし,それを考えた時点で既に困ってしまいました.というのも,

<META HTTP-EQUIV="Refresh" REL="cannonical" CONTENT="0; url=http://ngauge.blog/article/177856358.html>

といった META タグをページごとに入れていく必要がある訳ですが,さくらのブログでは,HEAD 部はブログ全体でのカスタマイズしか出来ず,記事ごとに違う META タグを入れられないのです.これだと単純には,

<META HTTP-EQUIV="Refresh" REL="cannonical" CONTENT="0; url=http://ngauge.blog/>

のように,すべてのページを新ブログのトップページにリダイレクトするしかなくなります.これは SEO 的にはいまいちというか,逆効果のようです.さてどうするか... そこでさらに色々と調べたところ何と,さくらのブログでは (?) BODY 部にこの META タグを記述してもきちんと動くんだそうです.飛ばすべき URL はこれまでの作業で既に判っていますから,169 記事ごとに META タグを入れていけばいいのですね.
……が,これからは放置しようとしている旧サイトにその手作業はちょっと辛いな... そこでちょっと考え,1 日に 1 記事しか載せていない私の場合に限って有効なやり方ですが,次の方法を考えました.
記事の日付は article.createstamp で取得することが出来ます.これを date_format() を使って色々なフォーマットに変換することも出来ます.一方さくらのブログでは,

突如として: Nゲージ立川駅レイアウト作成記
http://ngauge.blog/article/177856358.html

の記事は,http://ngauge.blog/article/177856358.html というパーマネントリンク以外に,http://ngauge.blog/archives/20160525.html という日付ベースでの URL も持っています.私は 1 日 1 記事を大原則として来たおかげで,記事の投稿日すら特定出来れば,この URL も自動的に作成出来るという訳です.
そこで,以下のような記載を各記事に入れることにしました.この記載は,さくらのブログの設定で 1 か所やればよく,169 記事すべてで実施する必要がなく手間がほとんどかかりません.

<% if:page_name eq 'article' -%><META HTTP-EQUIV="Refresh" REL="cannonical" CONTENT="0; url=http://ngauge.blog/archives/<%- article.createstamp | date_format("%Y%m%d") -%>.html" ><%- /if -%>

これによって,ページごとの URL が入った次のような HTML が自動的に生成されます.

<META HTTP-EQUIV="Refresh" REL="cannonical" CONTENT="0; url=http://ngauge.blog/archives/20160525.html" />

トップページ用には,以下の記載を入れておきます.

<LINK REL="canonical" HREF="http://ngauge.blog/" />
<META HTTP-EQUIV="Refresh" REL="cannonical" content="0; url=http://ngauge.blog/" />

これで,2 か所の HTML の変更だけで,それぞれの記事からも,トップページからも適切な URL に自動的に転送されるようになりました.ただし,archive/category 等の URL については,日付ベースの URL でない一方,さくらのブログではそのページの URL を取得することが出来ないため (article.page_url は article 配下のみで有効),自動的な転送は実現出来ていません.
まぁ,これらのページは無視するしかないでしょう...

これらの処理を行い,Google Search Console で新ブログの URL を登録したところすぐにクロールがあり,

で検索すると,ただ今ではこんな感じで新サイトのほうが概ね上位に表示されるようになりましたので,ひとまず移転は完了かなと.
ただし,よく検索される,

だとまだですねぇ... これでも,新サイトに 302 リダイレクトされるのでまぁいいか...

さくらのブログの日付に日本語で曜日を表示する

以上書いたのがブログ移転に伴い行ったことです.これまでもさくらのブログはカスタマイズして使っていましたが,これを機についでにいくつかの点でさらに手を加えたので,それについて記します.
まず,日付を表示している部分を変更します.変更点は 2 点あって,1 点目は,もともと,さくらのブログ (Seesaa ブログ) では日付が H2 で表現されていますが,これを単なる DIV に変更します.H2 は,その文書における一番重要な見出し (H1) に次いで重要な見出しですから,日付が H2 というのはあり得ません.
もう 1 点は "1984年02月11日" のように,日付だけ表示されていますが,曜日も表示させます.曜日を出力させるのは date_format() 関数を使って,%A (フルスペル) か %a (短縮形) のフォーマット文字列を使えばよいのですが,英語でしか表示してくれません.そこでいったん,%u を使って曜日を数字で出力します.月曜日が 1,日曜日が 7 として表示されます (0-origin がよい場合は %w のはずなのですが,%u と同じく 1-origin になってしまっているようです).

Before:
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
After:
<% if:with_date %><DIV CLASS="date"><% article.createstamp | date_format("%Y年%m月%d日") %> (<A NAME="adayofweek"><% article.createstamp | date_format("%u") %></A>)</DIV><% /if %>

H2 を DIV に格下げしたことに伴い,CSS などこのほかに修正が必要になる部分も合わせて修正しておきます.このあたりはこちらのページなど多数のページで解説されていますので,必要あれば適宜参照します.
この修正を加えた結果,日付は以下のように表示されます.以下で書く書き換えがうまくいかなかった場合のことを考えると,曜日の出力は %u ではなく %A (%a) を使ってひとまず英語で Sat のように表示しておくのもよいかも知れません.

1984年02月11日 (6)

次に,(6) となってしまう曜日をどうにかして修正しなければなりません.Seesaa ブログをカスタマイズするための関数や変数の仕様を読んでみると,

<% if:with_date %><DIV CLASS="date"><% article.createstamp | date_format("%Y年%m月%d日") %> (
<% if:article.createstamp | date_format("%u") eq 1 %>月<% /if %>
<% if:article.createstamp | date_format("%u") eq 2 %>火<% /if %>
<% if:article.createstamp | date_format("%u") eq 3 %>水<% /if %>
<% if:article.createstamp | date_format("%u") eq 4 %>木<% /if %>
<% if:article.createstamp | date_format("%u") eq 5 %>金<% /if %>
<% if:article.createstamp | date_format("%u") eq 6 %>土<% /if %>
<% if:article.createstamp | date_format("%u") eq 7 %>日<% /if %>
)<% /if %>

とでもすればうまくいきそうな感じなのですが,条件式を () で括ったり,比較する定数を ' や " で囲ってもダメでした.ん〜,こりゃこ困った!
仕方ないので,上に書いたように (6) なんて風に出力してから,後で書き換えることにします.このため,曜日部分は CLASS="adayofweek" としてクラス名を指定しておきます.
こうした準備をした上で,JavaScript でこの adayofweek CLASS 内の文字列 (数値) を書き換えてしまいます.HTML ファイルを編集して,<HEAD> 内に以下のようにスクリプトを入れます.

<script type="text/javascript">
  <!--
    $(document).on('ready', function() {
        var str = ["", "月", "火", "水", "木", "金", "土", "日"];
        var spanElements = document.getElementsByName("adayofweek");

        for (var i = 0; i < spanElements.length; i++)
            spanElements[i].innerHTML = str[spanElements[i].innerHTML];
    });
  //-->
</script>

ID ではなく CLASS を使っているので,このように配列で簡単に処理出来ます.また,曜日も %u として数値で出力させるようにしておいたので,同様に配列を使って一発で処理出来,スクリプトを短く出来ました.これで,日付が無事,

1984年02月11日 (土)

という思った通りの表示になりました.HTML が全部読み込まれるまで曜日部分が書き換えられないのでちょっと格好悪いのですが...
これ以外にも,新サイトではいくつか,細かなカスタマイズをしました.

 
posted at 00:00:00 | Comment(0) | TrackBack(1)