「ブログ」と一致するもの

結論から言うと、.htaccessのRewriteRuleによるリダイレクトを設定しているとHTTPS接続でBASIC認証が効かない状態になるみたいです…
時代の流れに乗ってSSL化作業を済ませ、前の記事にて電車猫ブログのHTTPS化が完了したと書いたのに一件落着ではなかったですねorz

本題の前に、前提条件のお話を。

電車猫ブログのHTTPS化をしたのは良いのですが、HTTPでアクセスして来てもらっては常時SSL化とはならず、セキュリティ的なメリットが半減するわけですよ。
Google先生に聞いたところ、.htaccessのRewriteRuleでリダイレクトさせれば良いということが分かりました。
.htaccessでのリダイレクトの目的は2つあります。

  1. HTTPでアクセスした人をHTTPSの同じパスのページにリダイレクトさせる(常時SSL化の趣旨)
  2. www.traincat.netでアクセスしてもtraincat.netにアクセスさせる(SEO的な目的)

以下のページを参考に、.htaccessを書きました。

m630.net - httpからhttpsへのリダイレクトしてwwwありなしを統一する
デジ研 - 常時SSL導入の注意点とSSLページのインデックスまでにかかる時間 - HSTSを設定しましょう

.htaccessの内容は以下になります。

RewriteEngine on

# HTTPの場合のリダイレクト.
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# www.traincat.netの場合のリダイレクト
RewriteCond %{HTTP_HOST} ^(www\.traincat\.net)(:80)?
RewriteRule ^(.*) https://traincat.net/$1 [R=301,L]

# HSTSの設定
Header set Strict-Transport-Security "max-age=31536000" env=HTTPS

これによって、例えば
 http://traincat.net/foo/bar/
 http://www.traincat.net/foo/bar/
 https://www.traincat.net/foo/bar/
は最終的に以下のURLへリダイレクトされます。
 https://traincat.net/foo/bar/

HSTSにも対応することで、SSLに対応していることをブラウザや検索エンジンのクローラーに通知させます。
上記.htaccessをルートディレクトリに配置することでリダイレクトに対応できました。

ここからが本題になります。
上記.htaccessをアップロードした後、BASIC認証ありのページにアクセスし、動作検証を試みたところ、問答無用で403エラーになりました。
SSL化する前はアクセスできていましたし、以前の.htaccessファイルに戻したらBASIC認証ができるので、確実に今回の設定に問題がある訳ですね。
この問題を解決する為に日本語のサイトだけでは見つからず、Stack Overflowなどの海外サイトまで調べましたが、なかなか正解にたどり着けず、手間取りました。
しかし、結局日本語のソースで役に立ちそうなページを発見しました!

blog20100901 - [memo] .htaccess の RewriteRule で Basic 認証が効かない問題 (0x21e)

BASIC認証をかけている.htaccess(先ほどの.htaccessとは別ファイル)を修正することで対応できるようです。
赤字が追記箇所になります。

ErrorDocument 401 "Unauthorized Access"
RewriteEngine off

SSLRequireSSL
AuthUserFile /home/users/lovecats/hoge/basic-area/.htpasswd
AuthGroupFile /dev/null
AuthName "Password Required"
AuthType Basic
require valid-user
order deny,allow

詳しい内容は前述のブログに記載されているので、ざっくりと解説を。
BASIC認証とリダイレクト(RewriteRule)の相性は悪いようなので、RewriteEngineをoffにします。
ErrorDocument 401 "Unauthorized Access"があることで、HTTPSでもBASIC認証が効くようになるようです。
その代わり、上記で記載したリダイレクトは無効になりますが、制限ページの役割を考えるとSEO的なリダイレクトは気にしなくても大丈夫でしょう。
ただ、HTTPアクセスでBASIC認証ページに訪問されてしまうと、リダイレクトが無効になってるので、HTTPS化した意味がなくなってしまいます。それに対応する為に、HTTPS接続に限定する「SSLRequireSSL」を記述しました。
※なお「ErrorDocument 401 "Unauthorized Access"」の部分については、401エラー用のHTMLを用意できるのであれば、例えば「ErrorDocument 401 /error-pages/401.html」のようにしても良いと思います。「ErrorDocument 401 "Unauthorized Access"」の設定だと、BASIC認証に失敗した場合は「Unauthorized Access」と1行テキストが出力させるだけになります。

常時SSL化によりBASIC認証が無効になってしまったら、HTTPSとHTTPの共存もやむなしかと思っていたので、この様な逃げ道があって良かったです。
常時SSL化の流れになっている今後は同じ問題が発生することが多くなるのではないかなと思っていますので、ご参考になりましたら幸いです。

電車猫ブログHTTPS化完了

最近の常時SSL化の流れもあり、電車猫ブログをSSL化したかったのですが、ついに実現できました。
それも、気付いたらロリポップがLet's Encryptの無料SSLに対応してくれたお陰です。

LOLIPOP!レンタルサーバー - 2017/07/11 無料の独自SSLがご利用いただけるようになりました!

ロリポップサイトに手順書がありますし、ロリポップの設定については記載を省きますが、5分足らずでHTTPSでのアクセスを可能にしてくれました。
ところが、HTTPS接続で電車猫ブログを確認するとスタイルシートや画像の読み込みに問題があることが発覚。
HTTPS接続のサイトなのにHTTPのURLが混在していることで発生していました。

そこで、Movable Typeのダッシュボードにログインし、以下の手順でHTTPをHTTPSに書き換えました。
※以下の例では電車猫ブログのURLを提示していますが、自サイトのドメインに読み替えて作業をしてください。

・URLのHTTP→HTTPS化
[システム]→[ウェブサイト]→[設定]→[全般]より[全般設定]画面を開く。
[公開パス]より[ウェブサイトURL]を「http://traincat.net/」から「https://traincat.net/」に変更し、[変更を保存]ボタンを押下する。

・検索/置換機能によるHTTP→HTTPS化
[システム]→[ブログ]→[ツール]→[検索/置換]より[検索/置換]画面を開く。
[検索]テキストエリアに「http://traincat.net/」を入力し、[検索]ボタンを押下する。
[検索/置換]ラジオボタンをチェックし、[置換]テキストエリアに「https://traincat.net/」を入力する。
置換対象の記事のチェックボックス、または全て選択のチェックボックスをチェックした後、[選択したものを対象に置換]ボタンを押下する。
同様の対応を[検索/置換]画面上部にある、[記事]タブだけではなく、[コメント]、[トラックバック]、[ウェブページ]、[テンプレート]、[ユーザー]タブにも実施する。

・ブログの再構築
更新ボタンをクリックし、すべてのファイルを再構築する。

・ブラウザでの確認
HTTPSでブログにアクセスし、問題なく表示されるか確認する。
特にスタイルシート、画像のURLやリンクの遷移を確認し、HTTPに戻ってアクセスしていないか確認する。

いかがでしたでしょうか。(※最近流行りのキュレーションサイトの定型文を書いてみた)

上記手順を実施することで、ロリポップ+Movable Typeでは、1時間程度でHTTPS化が可能です。
いや~素晴らしい。

今後はSSL化した電車猫ブログをよろしくお願いしますm(_ _)m

家探しの苦労点と参考サイトのご紹介

今回は家探しを始めたあらましと参考サイトをご紹介したいと思います。


家探しの苦労点とは何か?
約30年に渡り、月10万円以上のローンを組む約束を銀行と取り交わし、人生最大の買い物を購入する決断をしなくてはいけないことかと思います。
高度経済成長期のように景気、給料、そして雇用が保証されていません。さらには高齢社会、人口減少時代も見据えなければいけません。

しかし、法律、金融、不動産の知識に長けている方でない限り、一般の方で土地、建物、ローンのリスクに気付ける人は少ないと思います。
家を購入するにはローンを組みます。ローンは決して安い金額ではありません。
しかし、物件はロケーションが命です。バス20分以上のバス便エリアだったり、高圧電線が上空を通過していたり、土砂災害警戒区域だったり、河川の氾濫エリアだったりと安い物件には何らかの理由があります。
似たような条件で物件があったとします。一見、条件が似ているように見えても、雨漏りしやすい家、地震で倒壊しやすい家、リフォームしやすい家、固定資産税が6倍も変わってしまう家、保証期間が10倍も違う家、ローンが組めない家(違法建築・古すぎる建物)、再建築不可の土地があります。

それに対して、不動産の営業担当者は何十件、何百件の物件を売ってきたプロです。
不動産業界は体育会系の風潮があり、経験年数が長い人であればあるほど強者と言って問題ないでしょう。
説明したら物件を売りにくくなることは言わないでしょうし、中途半端な知識でこちらが質問しても、それをはぐらかせるだけのセールストークは過去の経験から持ち合わせています。
毎月のノルマ達成の為には、何とか言いくるめて売れる物件をなるべく高く売りたいと思うのは、営業担当者の心理からしたら当然のことです。(そうでない方もいるかとは思いますが。)


そんな、私が家探しを意識したのは2016年の春頃です。

結婚してしばらく経ち、猫の飼える家に住みたいなと思うようになりました。
その際、たまたま自宅近くでマンションの建設があり、マンションギャラリーを見学しました。
そこのマンションは5000~7000万円の物件がメインで、営業担当者より、5900万円の物件を自己資金500万円、月額12万円、ボーナス時30万円/回の返済ならば返済比率が25%未満になると説明を受けました。

営業担当者より返済比率が25%だから問題ないと説明を受けても、すぐに買いましょうという金額ではないのは確かです。
そして、借りられると、今後の生活を踏まえても返せるは違うのではないかと疑問が湧きました。
しかし、その当時の自分には疑問が湧いても、何がリスクなのか、そしてリスクを回避する為の知識は持ち合わせていませんでした。
マンションギャラリーの訪問前後で、不動産関係の書籍を2冊読んでいましたが、頭に入ったとは言えない状態でした。
家探しを進めて半年以上が経ち、何度も不動産関連の書籍を読み直し、十件以上の物件を見てきたからこそ、今では物件選びの観点を書き残すことができます。
しかし、仕事とは直結せず、不動産分野の知識を0から学習することになるので、書籍を隅から隅まで読んで、その知識をフル活用するというのは至難の業でした。

色々考えた結果、そのマンションについてはローンの仮審査をせずに、購入しないことを決めました。
営業担当者に電話し、断るときも「両親世代や知り合いの言ったことを信じるんですか? 当時の物件購入と今の物件購入では考え方が全然変わっているので、~」みたいなこと言われて思いとどまるよう説得されましたけどね。
現在は、マンションを検討から外し、一軒家(新築・中古)に絞って家探しを進めています。

以前の不動産記事を見てない方がいましたら、当ブログの以下の記事もご参照ください。
新築一戸建て物件を探す際の注意点をまとめてみた
物件探しに利用した書籍をレビューしてみた

ネガティブなことを色々書いてしまったので、この記事を読んだ方が家探しを止めようかなと思われてしまうのが心配なのですがΣ
ただ、家探しを進めるには、かなりの精神力が必要と言うことは確かです。
結婚式とか家探しのときに夫婦で揉めると言うのは、経験して分かる気がしました。
資金面も物件のロケーションも良いと思える物件に出会えたとしても、台所・収納・子育ての観点で妻から指摘が入り、断念するという話も聞いたことがあります。
注文住宅にした場合は、壁紙、外壁、設備を自分たちで決める必要があります。

不動産が専門分野ではなくても、人生最大の買い物をする為には、自分たちが主体となり、物件選びをしなくてはいけないと言うことです。
その為には必要なことは覚える必要があります。
ただ、する必要のない苦労はしなくても良いと思います。

書籍を購入する程では…と思っている方がいましたら、まずは以下のブログをお読みください。


納得できる住まい選び 9割が知らない不動産の真実

上記ブログの著者である山田剛司様は一般社団法人住まい選びコンシェルジュ協会を運営されています。
不動産屋側ではなく、利用者側の立場で物件購入のアドバイスをされています。
一部の記事を引用し、紹介しますと、以下のような内容です。

失敗事例から学ぶ!必勝の住宅購入術
これを一番最初に見てほしいと思います。
軽い気持ちで資料請求してしまった、事前に調べずに営業担当者と会ってしまった、マイホームのイメージに踊らされてすぐに契約してしまったことから、購入した物件を公開した失敗事例が書かれています。
ノルマを達成しないと上司からえげつない圧力が掛かる営業担当者はあの手この手でアプローチをし、一秒でも早く購入させようとします。
その手に乗らないように事前に、そして計画的に、必要な知識は覚える必要があります。

徹底比較!賃貸vs購入。損をしない住まいの選び方
家賃8万円の賃貸と購入して月11万円の返済の場合、住居費は8万円から11万円に3万円上がったことになります。しかし、その内訳の消費部分(支払ったまま戻ってこないお金)は8万円から5.5万円なる為、2.5万円程下がるというのが定量的に分かります。
賃貸は大家を儲けさせるだけでも、購入したものは自分の資産であり、売却することが可能ですからね。

住宅ローンの頭金はゼロ?貯めた方がオトク?頭金の誤解と真実
親世代(50~60代)が購入した1990年前後は、金利が6%前後もありました。
3,000万円を35年間で借り入れると、月額約17万円(うち金利分約10万円)、総返済額約7,100万円(うち金利分約4,200万円)でした。
現在は金利0.4%~1%ですので、0.6%とした場合、35年間の借入で月額返済額約8万円(うち金利分0.8万円)、総返済額約3,300万円(うち金利分約330万円)となります。
頭金として月数万円を貯金したとしても、賃貸に住み続けるなら家賃が発生します。親世代とは異なり、頭金なしで購入しても問題ないことが定量的に分かる記事です。

都市圏に潜む「限界集落」の真実に迫る!
人口減少は地方だけの話かと思われがちですが、政令指定都市の中でも人口減少が始まっている地域が存在しています。
政令指定都市であっても、通勤が便利な都心に近い地域は人口が増え、都心から離れた地域は人口が減っています。
そして、今後は都心に近くてもバス便エリア(徒歩20分以上)は人口が減少する=不動産価値が目減りすることを意識する必要があります。
逆転の発想で、都心から近いエリアで空き家を別荘として展開している自治体があるようです。将来、カーシェアならず別荘シェアの時代が来るかもしれませんね。

後悔しないマイホーム購入「マンションVS一戸建て」選び方
私がまさしくそうでした。最初は資金面でマンションだと考えていました。
しかし、ローンに含まれない管理費・維持修繕費用を加味すると一戸建ての方が良いと気づきました。
マンションの場合、住宅ローンの他に管理費や維持修繕費用が月々5万円掛かります。今の金利で計算すると、住宅ローンは100万円増えると月々の支払額が約3,000円上がります。月5万円の管理費・維持修繕費用は約1,800万円分の住宅ローンと同じになることが計算から分かります。
定量的に書かれると認識が変わりますよね。

中古はおトク?「新築VS中古」結局どっちの物件がいいの?
掘り出し物の中古物件はプロが買い取ってしまうので、市場に出回ることはまずないこと。
値段だけで考えてしまうと、女性が気にする部屋や排水管の臭いで嫌がられ、夫婦の火種になる。
また、耐震性を考えて中古物件を選ぶなら、マンションはマンションなら1983年以降、一戸建てなら2000年の法改正以降の物件を探す。
中古物件を下手にリフォームしても新築と変わらないなどの注意点が分かります。


如何でしたでしょうか。
不動産関連の書籍だと物件選びに主眼が置かれていることが多く、資金面に着目して定量的に書かれている内容にはなかなかお目にかかれません。
親世代の考えと現状が異なることが分かり、住宅ローンを組んで家を購入するにあたり、目から鱗が落ちるような内容が多いと私は感じました。

上記記事を読んで少しでも不動産購入に興味を持たれましたら、是非他の記事も合わせてお読み下さい。
マンションを断念した後、物件選びを進める為にしたことについては、別の記事にして書きたいと思います。

前回の記事の続きです。
月別記事リスト、カテゴリ別記事リスト、および別途作成した全エントリーの各テンプレートにはOGPの設定がされていなかったので、設定を追加することにしました。

ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[アーカイブテンプレート]の[月別記事リスト]と[カテゴリ別リスト]のテンプレートを開き、「</head>」の前の行に以下の設定を加えました。
※赤字の部分が注意が必要の部分です。

<!-- Open Graph Protocol -->
<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<meta property="og:url" content="<$MTCanonicalURL$>">
<meta property="og:description" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">
<!-- Metadata -->
<meta itemprop="description" content="<$mt:ArchiveTitle encode_html="1"$>アーカイブ - <$mt:BlogName encode_html="1"$>">
<link itemprop="url" href="<$MTCanonicalURL$>">
<link itemprop="image" href="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">

descriptionの部分はもうちょっと工夫できそうな気がしますが、一旦タイトルと同じにしてみました。
「<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png」の部分は利用するスタイルによって変わる可能性もあるので、流用される方はご注意ください。

続いて、ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[アーカイブテンプレート]の[全エントリー]のテンプレートを開き、「</head>」の前の行に以下の設定を加えました。

<!-- Open Graph Protocol -->
<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<meta property="og:url" content="<$MTCanonicalURL$>">
<meta property="og:description" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">
<!-- Metadata -->
<meta itemprop="description" content="全エントリー - <$mt:BlogName encode_html="1"$>">
<link itemprop="url" href="<$MTCanonicalURL$>">
<link itemprop="image" href="<$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/rainier/img/siteicon-sample.png">

<$mt:ArchiveTitle encode_html="1"$>」だと「全エントリー」と出力できなかったので、修正しています。

前回と同様、TwitterとFacebookでのOGP表示を以下で確認しました。

Twitter Developers - Card Validator
開発者向けFacebook - デバッガー

これで更にOGP対応ぽいブログができましたということで∠( ̄∧ ̄)

Twitter、Facebook、mixi等でブログ記事のリンクを張られたときの為に、もっと早く設定を修正すべきだったとちょっと後悔してます。

Webアクセス解析を確認したところ、SNSから当ブログの記事が紹介されていることを見つけました。
確認してみると、単なるリンクではなく真っ白な画像と説明が微妙に表示されてるではありませんか。
色々調べてみると、OGPの設定が関係していることが分かりました。
OGPについては以下のサイトの説明をご参照くださいませ。

ferret [フェレット] - Facebook・TwitterのOGP設定方法まとめ

ダッシュボード→[ブログ]→[デザイン]→[テンプレート]からメインページ(index.html)と個別記事のテンプレートを確認したところ、「<meta property="og:○○" content="~" />」のタグが含まれてました。
月別アーカイブや別途追加した全アーカイブのテンプレートからリンクが張られるということは少ないので、デフォルトの状態でも基本的な対応はされていると。
では、何故画像が真っ白になるかと言いますと、og:imageに設定されているURLの画像ファイルがデフォルトのままなのであたり前田のクラッカーということで。
画像を以下の画像に差し替えました。

サイト画像

あまりに単純すぎるだろというツッコミはありまくりかもしれませんが、絵心はなかったので、フリー素材を使い電車猫ロゴを作成しました…
ただ、Twitterで記事をサマリ表示する為には設定が足りないのと、どうせならfaviconも設定したいと欲が出てしまいまして、テンプレートの修正箇所を探しました。
ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[テンプレートモジュール]→[HTMLヘッダー]に以下の設定を加えれば良いそうです。

<!-- favicon -->
<link rel="shortcut icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<link rel="icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary" />

「(faviconのURL)」の部分はICOファイルのURLを指定してください。
電車猫ブログのfaviconは、以下の記事を参考にし、オンラインでフリー素材の画像ファイルをICOファイルに変換しました。

Forgot the Milk. - Faviconをサクサク作ってくれる8つの Faviconジェネレータ サイト

TwitterとFacebookでのOGP表示を確認するには以下のデバッグサイトを利用すると便利です。

Twitter Developers - Card Validator
開発者向けFacebook - デバッガー

og:imageとTwitterカードを設定すると、それっぽいサイトに見えますね(´∀`)(笑)
色々なSNSからリンクされるくらい重要と思われる記事を書かないと無用の長物となってしまいますので頑張ります∠( ̄∧ ̄)