blogger: カスタムドメインでhttps対応する方法

bloggerでカスタムドメインを使っていてちょいと手間取ったのでメモをのこしておきます。

bloggerの設定に「HTTPS の使用」という項目があったのでONにしたのだけれど、ステータスが「不明」になってしまうので困っている状況でした。

手順

• DNS設定でCAAレコード追加
  • サブドメインなしのドメイン全体
  • フラグ: 0
  • tag: issue
  • value: letsencrypt.org

• blogger設定から「HTTPS の使用」をオンにする
  • ステータスが「使用可能」になる
  • ならないときはDNSが浸透していないので待つ

• Let’s Encryptの設定
  • なし！
  • ここポイント。過去にLet'sEncrypt利用して自分のサーバーに証明書いれたことがある、かつ、DNSのCAAレコードについて理解していないと、何か設定は？とか証明書ファイルは？とか疑問に思うところだが、何もしなくていい。
  • CAAレコードを適切に設定してあれば、googleとletsencryptの間でよろしくやってくれる。

• 注意点

  上記設定した後でもhttpsでブログに接続しようとすると

  chrome:  「切断されました」みたいなエラー
  firefox: PR_END_OF_FILE_ERROR エラー

  とエラーになるが、しばらく待ったら接続できるようになった。

  自分はこの間に、どこか間違ったか？とか、まだやること足りないのか？とかなり慌てたが、待てば解決した。

  もしかすると、Let’s Encryptが参照しているDNSまでCAAレコードの追加が浸透していなかっただけかもしれない。

参考にしたページ

• https://support.google.com/blogger/answer/6284029?hl=ja

• https://www.cybertrust.co.jp/sureserver/support/caa.html

• https://letsencrypt.org/getting-started/#without-shell-access
  • https://community.letsencrypt.org/t/web-hosting-who-support-lets-encrypt/6920#:~:text=Blogger

bloggerで特定ラベルの投稿一覧を出す

追記2：この記事の方法は、ひとつのラベルに記事が150本以上あるとそれ以上表示しません。それ以上にも対応したversion2を作成済みですので(新しい記事)、そちらをご使用ください。

・ Blogger ブログにサイトマップ - ラベル分類された投稿一覧を「ページ」に表示する方法
なんてのが紹介されていた。これはかなり便利。
でも、自分の場合は特定のラベルがついた記事だけの一覧を作りたい。で、Kuriboさんのページの2個目のscriptタグ(feed呼ぶとこ)のパラメータでラベル制限してみたんだけど、ラベルが複数付いている記事があるとラベルの見出しも増えてしまいうまくいかなかったので、元のjsを参考にして自分でjs書いてみた。

それを使ったサンプルページはここ
使い方は、Blogger の管理画面「ページ」から新しいページを作りhtml編集モードにして

<script src="https://sites.google.com/site/choniwaniwani/forBlog/bloggerFeeds.js"></script>
<script src="https://自分のブログアドレス/feeds/posts/summary/-/ラベル名称?redirect=false&max-results=500&alt=json-in-script&callback=onLoadFeeds&orderby=published"></script>

を貼り付けて２ヶ所書き換えるだけです。
自分のブログアドレスは、このページで言うと choni-waniwani.blogspot.com のところ。
ラベル名称は、そのまんまラベルの名前です。日本語でもＯＫでした。

追記：bloggerのデフォルトがhttpsになった(一昨年ですが)ので、上のコードをhttpsに対応しました。

で、このタグ貼付部分より前や後に普通に文章入れてもＯＫです。
タグ内部に入れてもいいので、レイアウトは多少カスタマイズできます。リンクのaタグには未使用のclassも入っているので、cssでカスタマイズも可。

これ以降は、技術的に興味のある人向けに軽くjavascriptの説明です。

まず、bloggerのfeedを取得する部分、上の２個目のタグのパラメータの説明はこちら。
テキスト検索のqオプションは使えないとのこと。
そこの説明にあるURL(www.blogger.comではじまってblogIDを数字で入れるやつ)は↑のurlとだいぶ違いますが、どっちの形でもパラメータと結果は同じです。
もっと詳しいパラメータの解説は、先程のページからもたどれるこちらにあります。

書いたjsはごく簡単で

function onLoadFeeds(root) {
 if("entry" in root.feed){
  var entryNum = root.feed.entry.length;
  for(var e=0; e<entryNum; e++) {
   var entry=root.feed.entry[e];
   var url;
   var linkNum=entry.link.length;
   for(var l=0; l<linkNum; l++) {
    var link=entry.link[l];
    if(link.rel=="alternate"){
     url=link.href;
     break;
    }
   }
   document.write("<a class='linkHref' href='"+url+"'>"+entry.title.$t+"</a><br/>");
  }
 }
}

だけです。

Bloggerのエントリに link タグを置く方法

Bloggerの記事を書くときに、特定の記事にだけ適用したいスタイルシートがあったので、投稿ページからHTMLを次のように入力したら

<link href="http://xxxx.jp/xxxx.css" media="screen" rel="stylesheet" type="text/css"/>

作成された HTML ファイルは承認できません: タグは使用できません: LINK

なんてエラーが出てしまい投稿できなかった。
仕方ないので、linkタグをjavascriptで動的に生成してみたらうまくいったので、メモっておきます。

とりあえず、リンクタグ登録用関数を別ファイルの中に作っておく。

function addLinkTag(href, media, rel, type) {
    var tagLink = document.createElement('link');
    tagLink.href = href;
    tagLink.media = media;
    tagLink.rel = rel;
    tagLink.type = type;
    document.getElementsByTagName('head')[0].appendChild(tagLink);
}

でもって、記事の上のほうで、

<script src="http://xxxx.jp/xxxx.js" type="text/javascript">
</script>
<script type="text/javascript">
  addLinkTag('http://xxxx.jp/xxxx.css', 'screen', 'stylesheet', 'text/css');
</script>

とやったら、あっさりうまくいきました。

mixi connectを使ってblogger(外部ブログ)のコメントをmixi内につけられるようにしてみた。

今年から、日記をmixiの外に出してみた。

しょうもない内容にもかかわらず、
１、アクセスが、mixi内部の時より何十倍も増えた。
２、たまに、知らない人がはてなブクマとかしてくれると少し嬉しい。
３、少しずつGoogle AdSenseの残高が増えていくのが楽しい。

等、収穫はあったのですが、最大のデメリットとして、いままでmixi内で付いていたコメントがなくなったことがあります。

以前に、コメントの書き方まで記事にして誘導したのに、
一向にコメントが付かない・・・

考えられる原因の主なものは
・ 記事がクソなので、コメントを書く気がしない。
・ 実は、マイミクからハブられていて、見に来ていない。
なのですが、他にも、
・ mixi外の世界に、mixiアカウントさらしてコメントを付けるのが怖い。
・ mixiのログイン情報で、bloggerにログインしてコメントするのが気持ち悪い。
が考えられます。

なので、bloggerの方に自分にだけ見えるmixiチェックボタンを設置して、自分のブログ更新時に自分でチェックし、チェックのコメント機能を利用して、mixi内に自分の記事へコメントを付けられるようにしてみました。

というわけで、私のマイミクの皆様は、更新mixiチェックにコメントしてあげてください。


以下、bloggerユーザーのtemplateのHTMLソースいじる人向けの解説

◇ 自分のブログにmixiチェックを置くには、mixiへのデベロッパー登録が必要。
◇ 自分にだけ見えるmixiチェックボタンの置き方。
・ blogger記事の下の編集ボタンが自分にしか見えないので、その近くにmixiのタグを置いてみる。
・ 具体的には、

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>

の下あたりに、

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='mixi-check-button' data-button='button-4' data-key='自分のmixi チェックキー' href='http://mixi.jp/share.pl'>Check</a>
<script src='http://static.mixi.jp/js/share.js' type='text/javascript'/>
</b:if>

を入れる。

・ mixi Pluginのmixiチェックの設定で、定型文を 「更新しました。」などに変える。


こんな感じでやりました。

やってみたかったんだよね。Amazonのあれ。

よくネットのあちこちで見かけるAmazon商品へのリンク。
あれをやってみたかったので登録してみた。

このリンクからAmazonに入ると全然関係ない商品を購入しても、紹介料が入るらしい。
ほんとすごい仕組みだなあ。これで世の中の人たくさんが、勝手に営業マンになって自分から喜んで働いてくれるんだもん、人件費としてはすっごい安いよね。

というわけで、せっかくだから貼り付けてみる。



グールドです。お気に入りのアルバムを数枚。
聞いたCD、読んだ本について書いたりするときは、こっからの購入を全然考えてなくても、こういうのが入ってると、わかりやすくっていいと思う。

bloggerユーザーのmixi外部リンク設定注意点

mixiでbloggerのブログを外部リンクに登録している場合、外部ブログのRSS登録で、
ブログソースの
&lt;link rel="alternate" type="application/rss+xml" ・・・
のhref値を登録している方が多いと思います。

しかし、このアドレスを登録した場合、ブログ記事を修正した場合に最初の投稿時刻ではなく修正時刻でmixiに表示されてしまいます。

古い記事の間違い等を修正するとその記事が先頭に来てしまい不便なことがあります。
bloggerのrss生成で<pubDate>を更新日時にしてしまうためでしょう。

その場合、atomを使用すると投稿日時でmixiに登録されます。
&lt;link rel="service.post" type="application/atom+xml" ・・・
の後にあるhrefの値をmixiにrssとして登録します。

このやり方ですと、修正を新しい日時で表示させたいときも、blogger編集画面で
「投稿オプション」から日時を変更すれば対応できます。atomの<published>は、修正により変更されていないのでＯＫのようです。

ただし、↑のタグの少し前に
&lt;link rel="alternate" type="application/atom+xml" ・・・
という似ているタグがありますが、2010/2現在、なぜかatomでなくrssが出力されてしまい使えません。
なので、こちらのhrefを使わないよう気をつけてください。

mixiから来た人のbloggerへのコメントの仕方(OpenID)

えーっとmixiから飛んできたそこのあなた。あなたですよ。

たまにはコメントしてってくださいよ。てことでコメントの仕方を伝授します。
めんどくさいのは最初の一回だけですよ。

１、本文の下のコメント欄にコメントを記入。
２、コメント欄直下の「コメントの記入者」でOpenIDを選ぶ。
３、「OpenID の URL」なんてわけわからんこと聞いてくるので、mixi.jp と打ち込む
４、で、「コメントの投稿」ボタンを押す。
５、突然mixiのログイン画面(微妙に違う)が出てくるので、普通にログインする。
６、小難しい画面が出てくるので、「常に同意」してみる。
    blogger側のシステムには、「あなたのOpenID」と「ニックネーム」と確かにログインしましたよって情報だけが飛んでいきます。
７、ブログ画面に帰り、SPAM防止の文字を入れたら完了です。

２回目以降は、多少楽になります。mixiにログイン状態ならパスワードはいらないし。
ただmixi.jpの打ち込みは必要です。

えーっ、長々と書いてつまり何が言いたいかというと、こっちに引っ越しても寂しいからたまにはコメントしてねってこと。

以上。

ココログ cocologのpingサーバー

ココログへのブログ更新Ping用URLとして、あちらこちらに
http://ping.cocolog-nifty.com/xmlrpc
のアドレスが紹介されてますが、Pingを送信するとエラーが帰ってくる。

こんな感じ
302 Found
The document has moved here.

で調べたところ、ココログはPingサーバーをなんと2006年に閉鎖していた。(参考)
ずんぶんと昔の話である。
しかも、この情報はgoogle検索で簡単に出てきたんじゃなくて、 cocologのサイトからサポートエリアの検索をしてやっと見つけたもの。
上記のアドレスはその後も、亡霊のごとくネット上に流通しているのだ。

でも、ネットで調べたお店に食べに行こうと思ったらもう無かったなんて よくある話だよね。
もちろん、ネット上の古い情報 を消すのは、大変だということはわかるが、今後何十年もどんどんネットに蓄積される情報はどうなるのだろうか。

蓄積が増えれば増えるほど、今通用する情報の割合は減っていくわけだけど、そのへんどうなっていくのだろうか・・

Ping送信テスト

ブログ更新Pingのテストです。

bloggerは、自動でPingを送るシステムが付いていないので、自分用に作ってみました。
ちゃんと動いているか、この投稿でテストしています。

内容があんまり短いとクロールされても登録されないようなので、無駄に文章を書いています。

とりあえず、一時的にNinja Toolsを入れたので、どのくらいクロールされるかチェックしてみます。

携帯から書き込みテスト

これで書き込めるのかい？
写真送れれば面白いんだけどパケット代で即死だよな

FC2からの引越し準備

FC2にあってBloggerに搭載されていない機能を、Bloggerでも実現できるようなら、引越ししたいのでいろいろ調べてみた。

１、FC2拍手機能
２、リアルタイムのアクセスログ
３、更新Ping
４、トラックバック機能

◎ FC2拍手機能
FC2の拍手タグをBloggerのテンプレートに埋め込もうとしたが、どうもうまくいかなかった。
が、Bloggerにリアクションという機能があるのを発見し、コンセプト的に同様なので解決とした。
しかし、リアクションが新しい機能なのに、使っているブログテンプレートがそれよりも古いので、テンプレート内にタグを埋め込む必要があった。
 このページを参考にした。 -> 「クリボウの Blogger Tips: Blogger に「リアクション」機能が追加」


◎ リアルタイムのアクセスログ
アクセスログサービスはいろいろあり、タグ埋め込むだけで好きなアクセスログサービスがつかえるので、問題なし。
ただ、GoogleAnalyticsが結構高機能で、AdSenseとの統合もしているので、リアルタイムの更新が必要なケースが出るまで、これを使用することにした。

◎ 更新Ping ＆ トラックバック機能
クリボウの Blogger 入門 - トラックバック を参考にして解決しようとしたが、記事中で使用しているサイトが買収されてサービスに変更があり、この方法が使用できなくなってしまったようです。
後継サービスは有料で３０日間のみ無料で体験可となっていました。
取り合えず保留。でもこれは何とかしてみたいなぁ。


ということで、更新Ping ＆ トラックバック機能の問題は残りましたが、他は快適なので、FC2からの引越し確定でいきます。

ブログにはいままで全く興味なかったので、本当に知らないことだらけです。

FC2か？Bloggerか？ どちらにしようかな。

Blogger設定画面の「収益化」タブからAdSenseの登録をしてみた。
簡単に設定が終了したが、広告の表示開始には最大４８時間かかるとのこと。
審査とかやっているのだろうか。

あっさりブログ内に広告が入るようなら、FC2から引越し考えるか。
で、私が使う範囲で思いついた両者のいいところを並べてみた。

FC2のいいところ
・ ブログパーツ、レイアウト等が日本語で配布されている。
・ アクセスログがリアルタイムに更新される。
・ 拍手機能がある。
・ ランキング機能、ジャンル指定などの、FC2コミュニティの利用。
・ その他日本語での使いやすさ。
・ 更新pingを多数送信できる。
・ トラックバック機能が付いている。

Bloggerのいいところ
・ コメントをOpenIDでログインして付けられる。(いまテストでmixiのOpenIDから付けてみた。これ凄いね。)
・ 会社がFC2より、潰れなさそうなので、突然サービス終了の可能性が低いような気がする。
・ 日本でのシェアが結構低いので、デザインがかぶりにくい。
・ 運営がGoogle先生ですから、今後の機能開発に期待できる。
・ 海外製の変なツールやパーツが豊富。

あれ、もしかして、拍手とかFC2アクセス解析ってBloggerにも埋め込めるかも。
そしたら、Blogger引越し決定だな。実験してみっか。

テスト

投稿テストです。
Bloggerの機能をいろいろ試してみます。

使い勝手がよければ、FC2から引っ越してみようかな。

タグのテスト googleへ
Reactionつけたのでテストでクリック

引用ってどう表示されるの？

トラックバック送信テスト用リンク

枠つけてみた