Bloggerを独自ドメインで公開する

これまでhttp://njmkktkg.blogspot.com/として公開してきたこのブログ、前回の記事のとおりドメインを軽いノリで取得した(要は酔ってたらドメイン取ってた)ので、独ドメ化することにした。

具体的には、

• 個人サイト：https://watahari.com/　（www.watahari.comも同）
• ブログ：https://blog.watahari.com/

となるように、サブドメインblogを切って公開することにした。

ドメインの管理はValueDomainで実施している。しかし、ネームサーバとしてはNetlifyの「dns1.p01.nsone.net」etc.を指定しており、実際のDNSレコードはNetlifyで実施している。

2020/09現在、Bloggerのヘルプページとしてはhttps://support.google.com/blogger/answer/58317?hl=jaがヒットするが、残念ながらちょっとおかしい。一旦ヘルプページを引用する。

CNAME の作成処理

まず、ghs.googlehosted.com に関連付けられたブログアドレスに対応する CNAME レコードが必要になるため、たとえば blog.mydomain.com を選択した場合は、そのブログを ghs.googlehosted.com に関連付けます。

次に、2 つ目のセキュリティ CNAME レコードが必要です。Blogger でドメインを登録しようとすると、エラーが発生して 2 つのセキュリティ トークンが表示されます。表示された短いトークン（例: hqzzzn56a3ri）と長いトークン（例: gv-oc7x5vzzzqxirt.dv.googlehosted.com）を関連付けるには、2 つ目の CNAME レコードを作成する必要があります。注: DNS レコードへの変更が適用されるまでには最大 48 時間かかります。

この第二段落にあたる部分、2つ目のセキュリティCNAMEレコード云々はどうやら古い。
実際のところ、下記のような設定画面で、「カスタムドメイン」から設定をいじっても、トークン等は表示されないので注意してほしい。

カスタムドメインをクリックすると、入力欄が表示される。
ここには、サブドメインまで含めたドメイン（今回の例でいうと"blog.watahari.com"）を入力する。この後、ヘルプページによればトークンがエラー表示されるはずだが、表示されない。そのまま設定が完了する。
そして注意してほしいのだが、そのままいきなりブログがカスタムドメインになってしまう上に、旧URL（XXXX.blogspot.com、今回の例でいうとnjmkktkg.blogspot.com）でアクセスしても、カスタムドメインに転送されるので、DNSレコードを設定していないと、ブラウザ表示時にエラーとなってしまう。

よって、現在のBloggerでスムーズに独自ドメイン化するためには、先に下記のようなDNSレコードを設定しておく必要がある。

NetlifyのDomains設定の画面例

要は予め、CNAMEレコードで「ghs.googlehosted.com」を予め設定しておく必要があり、そのレコードが"浸透"するまで待っておく。

そしてその上で、　Blogger設定＞公開しています＞カスタムドメイン　から独自ドメインを設定する。すると、スムーズに移行が完了するはずだ。

おそらく以前は、設定変更の正当性を確保するために、ブログごとに発行されるトークンをDNSレコードに設定する必要があったのだと思うのだが、そもそもDNSレコードをいじれる時点でそれなりに正当性はあるはずなので省略されたのだと思われる。

***

もしかしたら、既にBlogger内で設定済みの独自ドメインを使う場合は（乗っ取り防止の観点で）トークンが発行される、等があり得るかもしれない。
下記のヘルプページでは「ドメインを設定するときに、2 つの CNAME を入力する必要がない場合もあります。」と記載されている。https://support.google.com/blogger/answer/1233387?hl=ja&ref_topic=6321959

酒飲んでたらドメイン買ってたから15年ぶりに個人サイトを公開した

掲題のとおりです。

先日ひとりで自宅酒に浸っていたところ、HN「わたはり」を名乗り始めて10年くらい経つなと気づき、せっかくだからwatahari.comを取ってやろうと思ったらしく（酔っているので記憶はあやしい）、翌朝起きるとValueDomainから領収書メールが届いていました。

初めて「わたはりさん」と呼んできた学生時代の友人todoさん、お元気ですか。

せっかくなので、vue.jsに初挑戦してvuetifyに初挑戦してnetlifyに初挑戦したらあっけなく個人サイトができました。

https://watahari.com/

ダンボールとかトラック風のアイコン素材

ちょっと変わっててかわいいアイコン、ダンボール箱やトラックなど荷物のコンテナをモチーフにした「Container Icon」 | コリス

そのうち使おう。

iPhone5発売ついでにWebサイト屋用のメモ

めもめも。
アプリ屋さんとか本職Web屋さんには意味のないメモ。

解像度とか

iPhone3G/3GS（iPhone）

• 解像度：320x480[px]
• デバイスピクセル比：1
• CSSピクセル：320x480[px]

iPhone4/4S（iPhone Retina 3.5inch）

• 解像度：640x960[px]
• デバイスピクセル比：2
• CSSピクセル：320x480[px]

iPhone5（iPhone Retina 4inch）

• 解像度：640x1136[px]
• デバイスピクセル比：2
• CSSピクセル：320x568[px]

画面の向きがPortraitなら上記解像度だけど，Landscapeなら縦横逆です。

判別

UAではiOS(iPhoneOS)のバージョンしか分からない。

参考
（後半省略）（マイナーバージョンは適当にピックアップ）

• iPhoneOS：Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)(略)
• iPhoneOS2：Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; ja-jp)(略)
• iPhoneOS3：Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp)(略)
• iPhoneOS4：Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; ja-jp)(略)
• iOS5：Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) (略)
• iOS6：Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X)(略)

iPhone;の部分がiPod;とかiPad;とかなったりするよ。 （cf. userAgent一覧/ユーザーエージェント一覧等）

というわけで，解像度で判定が必要。JSなら

window.screen.height==568

で，CSSなら

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)

といったところ。（cf. iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH）

とりあえず

orientationがLandscapeとかPortraitとか関係なくて，AndroidやWindows Phoneの全機種対応とかどうでもよくて，単純にテキトーにPCとは別のCSSを適用させたいなら，

@import url(hogehoge.css) sreen and (max-width:568px)

とかになるのかな。多分いままでは480とかだったのを568にしちゃえ的な。max-widthは適宜max-device-widthとかにしてもいいと思う。orientation使って，がっつり別デザインも素敵かと。

それにしても

JavaScript実行20％向上は凄いですね。レンダリングも早いですね。JavaScriptで少々無茶をしてもいい気がしてきました。

その他気になったこと

• 画像がアップロードできるようになった（&ltinput type="file">）
• CSS3 -webkit-filterきた
• リモート Web インスペクタ

ネタ元：iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH，iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R