クッキーで自分のページビューを追跡しないようにする

急にBloggerの管理ページから「自分のページビューを追跡しない」が動かなくなったので対策をメモ。
結論からいうとこの問題そのものは解決できず。しかし別な方法で自分のBloggerブログでのPVをカウントしないようにして対応。

状況

Bloggerの管理ページのトップから「詳細な統計情報」をクリックすると「自分のページビューを追跡しない」のリンクがある。

前はこれをクリックで普通に使えていたのに、なぜか今は、

とエラーらしきダイアログが出てうまくいかない。

統計データの取得中にエラー・・・と言われてもデータはGoogle様の管理下ですよね・・・；。

ページのリロードしても状況変わらずで解決しない。(-ω-;)ウーン？

調査＆検討

結局この問題の原因はわからず、エラーダイアログが出てしまう件は解決せず。

最近やったことといえば、CSSのテスト用にBloggerでBlogを新たに作成。用が済んだので削除くらい・・・。
これが関係するのかは全く不明。




と、いうことでエラーダイアログが出る件は「またGoole側で何かしているのか・・・」程度に思って気にしないことに  ・⌒ヾ(*´_｀)ﾎﾟｲ


しかしいろいろ調べてみると「自分のページビューを追跡しない」はそもそもクッキーをブラウザに登録しているだけな単純なものらしい。

つまり自分でブラウザにクッキーを登録すれば、目的の「自分のページビューを追跡しない」はできるはず。

クッキーをブラウザに登録

普段FirefoxとChromeなど色々使い分けていますが、ここではFirefoxで登録してみます。
※Chromeは検索するとわりと記事が多いのですぐ見つかると思います。

いろいろな方法がある中でアドオンを使うのが比較的楽な感じ。
※FirefoxはSQLiteでクッキーを管理しているらしくソコを直接いじる手もありますがいろいろ面倒すぎでした。ブラウザ実行中はクッキーのDBをいじる作業もできないし。





つまり考え方としては（どのブラウザでも）

• クッキーを手動登録できるアドオンをインストールして、PVカウントさせないクッキーを手動登録すれば良い

という話ですね。

アドオンインストール

Firefoxのアドオンで Firebug というものを使ってみました。
（ちなみにChromeでは EditThisCookie というアドオンが良く使われているようです。登録するクッキー情報は結局同じなのでアドオンの使い方の差異ですね）


CTRL+SHIFT+Aを押してアドオン画面を開き、アドオン入手タブへ。
右上の検索欄で Firebugで検索＆インストール。

 インストールすると右上に虫のマークが追加されます。

 クッキー登録

PVカウントをさせたくない自分のBloggerサイトのトップページをFirefoxで開きます。

右上の虫マークをクリック。

画面下方に以下のようなウィンドウが出てきます。
右上の「Cookie」をクリックし、さらにプルダウンメニューから「Cookieを作成」クリック。

登録ダイアログがポップアップするのでここでクッキーの情報を入力。
（名前とホスト欄は特に間違えないように注意。他欄も全部入力します）

登録するクッキーの情報は、

• 名前：　_ns　　　※半角文字。nsの前のアンダーバーを忘れずに。
  ※このクッキーがあるとGoogle BloggerはPVカウントしない仕様なようです。
• ホスト：　example.blogspot.jp　　※半角文字
  ※PVをカウントしたくない、自分のブログURL。
• パス：　/　　※半角文字
  ※ブログを丸ごとPVカウントしたくないので / （ルート）
• 有効期限： 年月日時分秒
  ※クッキーの有効期間。１年以上先の日付など長めにしておくといいかも。有効期間を過ぎるとクッキーの再設定要。
• 値： 2　　※半角文字
  ※なぜ２なのかは不明。Googleの仕様？
• その他のチェックボックス類
  全てチェック無し。

入力後、OKを押して登録。

これでホストで登録したURL（自分のブログ）でPVカウントされなくなるはず。

とりあえずこれでしばらく様子を見ています。

追記：
上では主に自分が日本国内でアクセスする想定で example.blogspot.jp を登録しています、国別リダイレクトで .jp に飛ばされるので。
念を入れるならば同様の手順で example.blogspot.com のように .com のURLも登録しておくと良いかもしれません。
またURLは自分のブログに限らずどこでも設定できてしまうので入力ミスしないように注意です。

Googleにログインしてる時くらいは全自動でPV未カウントにする機能があるといいなぁ・・・。と、ふと思ったり（ボソ。

AdStirの広告配信

ちょっと AdStir の広告について、チラっと書いておきます。
結果的には AdStir の対応の早さが素晴らしいというコトですが。


当サイトでもAdStirの広告を貼っていますが、妙な広告が出ているのに気付きました。

こんなやつです。

よくあるちょっと悪質系な広告・・・ですね。

クリックして飛ぶと変なものをインストールさせられそうな・・・。

これが AdStir で配信されていたわけです。
※一応ブログがクラックされて表示している可能性も念の為確認。AdStirのタグ経由であることを確認。
※現在はAdStirで配信停止対応済みなので表示されません。タグ利用している方もだいじょうぶです。


AdStirの管理ページではこの広告のみを差し止めることはできないので、一時的にタグを外して対策。


そのまま外しておいても良かったわけですが・・・

ちょっと気になるのでAdStirの担当さんにメールしたわけです。
（深夜寝る前にメールしましたが、どのみち数日くらいか、ないしは返事はこないかな～と）



あくる朝、お詫びメールがきてましたっ、早っ∑(￣△￣;)
タイムスタンプをみると、始業20分後かくらいですね多分。
いい仕事してます、対応速いです(-_☆)ｷﾗｰﾝ。
※ちなみに忍者Admaxのプラグイン不備の問い合わせは３時間位で返信きて早っ！と思っていましたが、今回翌朝とはいえ始業時間を考えると激早です！単純ですが早いというだけでユーザーの心を半分はわしづかみできます、人間そういうもんです！タブン！



一応適切な処理をしたとの旨、きちんとした文面でお詫びメールが返送されてきてました。
（記載要素にぬかりがなく、とてもしっかりした文面内容でした、良い仕事していると思います）

「サービスなのでアタリマエだろう」とか「そもそも悪質広告を出してるのがおかしい」とかの意見もありえそうですが、実際迅速にきちんと対応するというのは言うほど簡単でもないと思います。
※特に昨今はADネットワークを介して複雑になっているので大変そうです
※迅速さと作業精度は相反するものです。短時間で結果を第三者に提示するのは少なからず対応ミスへのプレッシャーもあるものです。

私的に問題発生時の対応力としてはかなり高く評価できると思います。

さすが老舗 AdStirといったところでしょうか？。
（良い人材がいるようです、うらやましい）

サービスの信頼性とは？

そもそも問題が「起きないこと」が最も望ましいわけですが、人間が扱うものはミスは必ず発生する可能性があります。

なので問題発生時の対応は当然想定の範囲なわけです。
しかし起きてもいないことにコストはかけたくないのが多くの会社の現実でもあるわけです。

ここで「どうせ起きるかどうかわからないのだから」と何も考えずに無視していると、実際に問題発生時に酷い目に合いやすいわけです。


いざ問題が発生したときにアタフタして適切に処置できないのではサービスとして怖いですよね。さらに被害が悪化する可能性もありえます。場合によっては問題を放置されることも珍しくありません。（過去いろいろな会社でこんなケースはあったような気がします・・・）

問題が発生しにくい運営管理も大事ですが、サービスの信頼性の本当の真価が問われるのは問題が起きた時だと思います。

と、いうわけで

当サイトでしばらくの期間悪質広告を目にしてしまった方もいるかもしれませんが、対応していただいたので今は大丈夫だと思います。

また、件の広告のせいで AdStir の広告タグを外していた方がいれば、もう戻しても安心だと思われます。


私的にAdStirはちょっと地味な印象がありますが、裏を返せば堅実な印象でもありますね。

Google提供の日本語Webフォント

いまさらですが、Googleが日本語Webフォントを提供していた という記事をチラっと見かけたのでちょっとメモ。

■予備知識

同じ文章でも異なる文字の形で読んでいる

今ではパソコン、スマホ、タブレット等々と様々な機器でブログ/HPを閲覧しています。

閲覧時、普通は各機器に内蔵の「日本語フォント」を用いて表示しています。
MACとWindowsマシンではちょっと違う雰囲気の漢字（フォント）で読んでいたりするわけです。
Android、iPhoneでもちょっと違うかも？

フォントもサイトデザインの一環

しかしタイポグラフィ(?)的というか文字フォントも「サイトデザイン」の一部といえます。

できれば万人に同じフォントで同じ雰囲気で読んでもらいたい、という要望も一部ではあります。
※極論、明朝フォントでサイトは作ったつもりが、閲覧機器の内蔵フォントの都合でゴシックで表示された、など。
 

Webフォント

平たく言うと、Web上から日本語フォントデータを「もってくる」技術。

なので、どんな機器でも同じ日本語フォントで閲覧できるように。
フォントデータ自体はTTFやOTFなので別段特殊なものではない。

肝はスタイルシートで「オンライン上のフォントデータ」を指定できるという点。

ライセンス

ブログやHPはパブリックスペースなので、フォントの使用ライセンスに注意が必要。
商用サイトならばなおさらです。

この辺はなかなか面倒な話しですが「Web上でも自由に使える」という点で、Google提供のフォントは使いやすいライセンスである、ということが注目点です。

実質ほぼ自由に使用可能です。

■Google提供の日本語フォント

フォント名： Noto Fonts。

サンプル表示＆ダウンロード先： Beautiful and free fonts for all languages

ブログで使う場合はCSS指定で特にダウンロードせずとも使えます。
ダウンロードして自サーバに置いてもOK。

□ライセンス

「SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007」を適用とあります。

参考：Wiki SIL Open Font License

□つまりどういうこと？ヽ(｀Д´)ﾉ ？

端的に言うと、、

• 自由に使っていいよ Ｏ(≧▽≦)Ｏ ワーイ♪
  ブログやHPの表示に自由に使っても良い。
  ※パブリックスペースでの使用可。商用可。
  
  
• 「フォントだけ」を販売してはダメ (´･ｘ･`) 転売ダメ！
  ざっと見る限りダメだと思います。
  する人もまずいないとは思いますが・・・。
  
  
• でも、アプリに組み込んでアプリを売るのはいいよ♪＼(^o^)／ ヤッター
  Unity？Unityで利用可能なのか！？
  日本語フォントの入ってないAndroid機でも日本語だせるね！（ぇ
  

ざっくりこんな感じ。
※あくまでざっくりです。ライセンスの読み間違い等の可能性もありえます。
フォント利用＆ライセンス確認は自己責任にて。当ページに間違いがあっても一切責任持てませんので念の為。

■Bloggerでつかってみる

CSSに追加するだけです。


ログインしてBloggerの管理ページに行く。

左列メニューから「テンプレート」をクリック。
「カスタマイズ」をクリック。

上級者向けをクリック。

CSSを追加をクリック。

カスタムCSSの欄に次をコピペする。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
font-family:'Noto Sans Japanese';
}

まだ試験運用的な雰囲気もありそうなので、恒常的に安定利用可能かは若干注意かもしれません。

■Unityでつかってみる

結論からいうと使えます。動作確認済み。

Asset配下のResourceフォルダ以下にフォントデータを配置すればC#から読めます。

メッシュテキストならこんな感じでフォントをロード。

public TextMesh txtmesh;
txtmesh.font = Resources.Load("NotoSansCJKjp-Light");

■独り言

ここまで書いておいて、言うのもなんですが・・・。

特別綺麗なフォントというわけでも・・・ないよね？；（スイマセン；スイマセン；

いや、でも一頃のアレやコレなフォントで苦労したことを思えば・・・充分綺麗ですよネ！

ライセンス的にもクリアですし、安心感が違うっ！なんせGoogleだしねっ！


BloggerではCSSでメイリオ指定した方がWindowsだと綺麗だしなぁ（ボソ
Unity利用でも梅フォントとか結構好きだし（ボソ


でもWindowsのPゴシックよりは良い感じだし、選択肢が広がるのは良いと思います。

---

参考記事：グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？

リファラスパム対策 ～ Google Analytics & Blogger Blog

この概要は表示できません。投稿を閲覧するには ここをクリック してください。

Google+のタイムラインの画像で！マークが出る

何気なくGoogle+のタイムラインを見ていたら一部の記事の画像が表示されていない。
なぜ～？

■状況確認

Google+のタイムラインに画像が表示されなくなった記事があることに気づく。

もうすこし正確に言いますと

1. Bloggerに記事を書いて投稿。記事には画像も含む
2. 投稿時に共有する
3. Google+のタイムラインにもその記事のダイジェストと画像などが一緒に載る

このタイムライン表示の画像が「！」マークになって消えているということです。

投稿後しばらくは確実に表示されていたのは覚えています。
その後に「！」に変化したのは間違いありません。

■状況調査

なんでだろうと？ちょっと考えてみました。
タイムラインで画像が表示されなくなった記事は２つ。

この２つの記事の大きな共通点は佐藤秀峰氏の漫画 on webの「ブラックジャックによろしく」の画像コンテンツを利用させていただいてる点。
そして「！」で表示されていない画像はその画像コンテンツをGoogle+が表示しているものです。

他の記事ではきちんと画像表示しているし、この２つの記事だけというのは偶然ではない？。

念の為書いておきますが、当方は利用規約をきちんと読み規約通りの手続きを取っております。
二次利用コンテンツ画像にも規約通りの記載（タイトル、著作者名、サイト名）をしています。

２つのブログ記事は現在でも閲覧できますし、勿論含まれる二次利用コンテンツ画像もちゃんと表示されます（Googleからの警告なども過去きていませんし勿論コンテンツ所有元からも）。


つまりGoogle+の「タイムライン上の画像だけ」が何かオカシイ感じ？です。

■推察

うーん？としばらく思案しつつ１つ思い浮かびました。

タイムライン上の記事のダイジェストでは、記事中の画像は自動的にやや縮小されたものがタイムラインに表示されます。

勝手な推測でしかありませんが、この縮小がまずいのか・・・？と。


縮小するとコンテンツ画像下部に明記しているタイトル、著作者名、サイト名の視認がしにくい/できない可能性があることに気づきました。

そうなるとタイムライン上においてはコンテンツ利用者なのか、著作者なのかの区別を明確にする「タイトル、著作者名、サイト名」の表記がわからりずらい/わからないかもしれない。

万一そうなると規約違反になる恐れが・・・？。


Google+側で勝手に縮小してるとはいえ、Google+使用者はその辺にも気を配るべき・・・と考えるべきなのでしょうこれは。



さらに推測の域ですが、

• Bloggerの記事自体はきちんと規約を守っているので存続している。
• しかしGoogle+のタイムライン上の縮小画像はまずい。
• 縮小画像はGoogle+側のシステムによるもので、記事作成者に悪意は無い、と判断された可能性。
• よって、タイムライン上の画像のみが非表示になるように処理された。

 と、考えるとなんとなく納得できそうな気が？。

■対応策？（私的勝手推論）

タイムライン上においても視認可能なように「タイトル、著作者名、サイト名」をもっと大きく明記してはどうか？と一瞬思いました。
しかしさらに考えるとこれもあまり良策ではなさそう。


Google検索等においても画像は表示される可能性はありますし他のBingなどの検索エンジンでも同様です。
その際「タイトル、著作者名、サイト名」の視認性まで保証できますか？です。

ムズカシそうです・・・。

パブリックな公開をしている以上、どこでどういう風に表示されるかなんてわかりません・・・。
（しつこいですが、あくまで全て私的な推察、推論の域です）。

これはつまり動的に閲覧が可能なネットコンテンツにおいて、その見え方を把握、コントロールするのは非常に困難である・・・かもと。

場合によってはシステム側で自動トリミングされ、どこかに表示された際に二次利用表記部分が切り捨てられる可能性さえもあります。

このような媒体において（規約とその解釈によりますが）二次利用の難しさというのが垣間見える気がします。

ブラよろはこの辺きっちりチェックしているのかもしれませんね。



追記： 「ブラックジャックによろしく」のコンテンツ利用はちょっと気になることもあるので結局利用を辞めました（Picasa上からも全削除）。

追記２：ユニティちゃんコンテンツを利用した開発に関する記事にて、制作中のスクリーンショットをのせているので念の為こちらについても固定ページ「このブログについて」にてライセンス明記するようにしました。

Google検索エンジンからのアクセス激減

Google検索エンジンからのアクセス激減について。

激減後、復旧したので一応メモ。

巷ではこのような状況は有名なようで、検索するといろいろでてきますね。

正直うちみたいな弱小ブログは関係無いと思っていましたが・・・。

2014/9/6頃から10/25頃までスパっと落ちてますね。
落ちたところでPV数は元々大したことはないのですが、

「え？なんで落ちたんだろう？？？」


と、気にはなるわけです。

■状況調査

と、いってもだいたいのことは既に多くのサイトに書かれているので既出ですが。

まずはアクセスの流入元の変動を確認。
Google Analytics なら、集客＞すべてのトラフィック等で。
Googleウェブマスターツールなら、検索トラフィック＞検索クエリ のクエリ数、表示回数等。

うちの場合は従来に比べて極端にすべての数が落ち込んでいました。
自然なアクセス減少とは思いにくいのはほぼ明らか気味。

もしもAdSenseなどでペナルティを受けている場合は、ウェブマスターツールの、

検索トラフィック＞手動による対策

に何か表示されるらしいのですが、

「手動によるウェブスパム対策は見つかりませんでした。」

としか表示されていないので特に問題は起きてないようでした。

しかし何かが起こっている(?)のは間違いなさそうです。

■原因調査

はっきり言って特定できませんでした。
特にAdSenseやブログ規約に違反しているわけというわけではなさそうですし。
総合すると単にGoogle検索のアルゴリズムが微変更？か何かで影響を受けていたのかもしれませんが、わかりません。

■対策

原因もわからないまま対策とはおかしな話ではありますが。
とりあえず考えられそうなところに手を入れました。
いろいろやったので覚えてる限りを以下に列挙。

○AdSenseの規約を再確認。

ページを開いたときに、上部の広告で記事本文がが押し下げられてしまうとよろしくないとのこと。
PC画面では大丈夫でもタブレット、スマホ等の画面解像度が小さい場合にこれに該当してしまう場合有らしい。
多分大丈夫そうな気はしましたが念の為ページ最上部のブログ名のフォントサイズを少し小さめにして対応。

○記事のタイトル

同じ単語が複数の記事で多く含まれるのはよろしくないらしい。
10や20記事くらいでは問題ないらしいのですが、一応一部記事のタイトルを修正。

○広告のフィルタ

アダルト系、それに準ずる広告は結構厳しいようです。

元々AdSenseにおいては、宗教、性に関する内容、ギャンブルは当初よりフィルタ済み。
一応これに加えて、リプロダクティブ ヘルスも追加。

i-mobileなどは「強フィルタ」でもアダルト色のものがでる可能性はあるらしいので要注意。
管理ページのフィルタリングボックスで一部の電子書籍コミック系の広告ドメインを追記してフィルタ。

※2014/12現在では「強フィルタ＋」というのがあるようで、これでアダルト色を一切排除できる様子。前はコレなかった気がするのですが・・・。

○Google ウェブマスターツール

各項目でエラーがでていないか確認。

• 検索のデザイン
• 構造化データ
  参考記事：ウェブマスターツールの構造化データで hatom エラーの解消
• HTMLの改善
  「タイトルの重複」だけがいまだに消せません。どうも月ごとの「ブログ アーカイブ」パーツからのリンクでそう検知しているような気がします。放置中。
•  クロール
• クロールエラー
  ネット不調でクロールできていない場合が結構あるので（404レスポンスコード）その辺はゆるめに見る。
• Fetrch as Google
  念の為、「取得」している。
•  サイトマップ
• 未登録だったので、登録してみた。

もっといろいろやったような気もしますが、もはや覚えてないのと、どっちしても修正後は改善が見られなかったので・・・。

■結局は

いろいろ対策してみたものの１月以上変化無し。
２ヶ月弱経過で急に元に戻った感じです。

Google検索による表示数が激減していたのは間違いないので、Google先生のご気分次第・・・なんでしょうかねやはり。

結局まじめにコンテンツ＝記事を書いているならば、慌てず騒がずじっと地道に記事を増やしつつ待つのが得策なんでしょうかね。



 

ウェブマスターツールの構造化データで hatom エラーの解消

ウェブマスターツールの構造化データでのエラーを解消するメモ。

対象サイトはBlogger。

■問題点

ウェブマスターツール ＞ 構造化データ を見たときに、

などと、大量のエラーが出ていた。

この行をクリックすると大量の「update がありません」がでてくる。

■解決策

Bloggerの テンプレート ＞html編集で、以下のような行を探す。

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>

そのタグの少し後に以下を追加。

<abbr class='updated published' expr:title='data:post.timestampISO8601'></abbr>

追加後の例：

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
<abbr class='updated published' expr:title='data:post.timestampISO8601'></abbr>

複数箇所あるので全てに追加する（試したテーマでは２箇所だった）。

修正後はテンプレートの保存を忘れずに。

■さらにまだエラー

updateのエラーは解消。

しかしよくみるとまだエラーがあった。

エラー: Page contains property "image_url" which is not part of the schema.
エラー: Page contains property "blogid" which is not part of the schema.
エラー: Page contains property "postid" which is not part of the schema.

どうも古いテンプレートを使ってると起きるらしい（2010頃のとか）。
直す手立てを調査・・・；
※ちなみにGoogle Product Forumでもこの件は１年くらい前にも取り上げられている。

■対策：Page contains property "image_url" which is not part of the schema.

テンプレート ＞htmlの編集 を開く。



以下を探す

      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>

以下のように書き換える

      <meta expr:content='data:post.firstImageUrl' itemprop='image'/>

以下を探す

      <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>

以下のように書き換える

      <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>

■対策：エラー: Page contains property "blogid" which is not part of the schema.

Googleのフォーラムでは「削除して解決」となっている。


この blogid というスキーマは無いので消して良いということらしい。
※つまり無駄なものを出力しているということになる(?)。近年いろいろ移行してきているようで対応しきれていないのかなんなのか謎。


とにかくGoogleのフォーラムでは英語圏で「俺は削除して解決した」とか、ロシア人も「А это можно вообще удалить」 と言っているので削除で解決。




以下を探して、行を削除する。 

    <meta expr:content='data:blog.blogId' itemprop='blogId'/>

多分２箇所くらいあるので全て確認する。

■対策：エラー: Page contains property "postid" which is not part of the schema.

これも削除で解決。


以下を探して、行を削除する。

    <meta expr:content='data:post.id' itemprop='postId'/>

多分２箇所くらいあるので全て確認する。

ウェブマスターツールにBloggerのsitemapを設定する

ウェブマスターツールに Blogger の sitemap を登録するメモ。

■サイトマップの設定

他のブログでは sitemap.xml を自動生成しているところもあり、それをウェブマスターツールで指定するだけなのだが、Bloggerでは生成していない。

そこで解決策として atomのfeedを利用した手が使えるらしいのでやってみた。

あと、sitemapの仕様(?)で１ファイル最大５００軒までというのがあるらしい。
５００軒を超える場合は複数回にわけてウェブマスターツールで登録する。


例：登録するサイトURLが http://example.blogspot.com


記事が５００件以下の場合は以下をウェブマスターツールのsitemap登録欄に入力する。、
※実際にウェブマスターツールの入力欄に記入するのは、atom～以降のみ。

http://example.blogspot.com/atom.xml?redirect=false&max-results=500

記事が５００件以上の場合
※実際にウェブマスターツールの入力欄に記入するのは、atom～以降のみ。

http://example.blogspot.com/atom.xml?redirect=false&max-results=500&start-index=1
http://example.blogspot.com/atom.xml?redirect=false&max-results=500&start-index=501

502件目以降も似た感じで複数行を追加していく。

■注意点

注意した点として、～jp ではなく、～com で登録したという点。

どうもウェブマスターツール関連は、

 http://example.blogspot.jp

のように jp ドメインで登録するとうまく機能しない場合があるようなので（クエリなど）。

なので、ここでも、

http://example.blogspot.com

のように、comドメインで登録した。

一応、Blogger Blogの大元はcomドメインのものになっている様子。
国別リダイレクトで、jp ドメインのページに飛ばされた結果日本では jp ドメインで見えている。
なので、大元を登録したほうが良さそうという感じ。


他、robots.txt にもサイトマップを書くことができる。効果の程はかなり低いらしいが、クローラ巡回に１％くらいは貢献できるらしい。

ウェブマスターツールで「データがありません」の対処法

ウェブマスターツールで「検索クエリ」などが「データがありません」のままになってしまう状態の対応策がわかったのでメモ。

■事の発端

Googleのウェブマスターツールが便利らしいのでだいぶ前にこのサイトURLも登録。
直後は「データがありません」なのでそういうものらしいので気にせず放置。

しかし１ヶ月経過しても「データがありません」のまま。おかしいなぁ？と思いつつも面倒だったのでそのまま放置。

少なくとも3ヶ月以上は経過。状況変わらず。いくらなんでもおかしい・・・。
URLのwwwの有無なども確認、問題なし。

■状況

「クロール エラー」は無し。過去90日間エラーは検出されていない。
「クロールの統計情報」を見るとグラフは出ている。
つまりアクセスができていないというわけではない。

なのに「検索クエリ」などが「データがありません」。なぜ～。

■AWSのサイトは問題ない

そういえば少し前に AWS に Wordpress を設置＆ウェブマスターツールにも登録。
AWS のサイトは全てウェブマスターツールにて「検索クエリ」も表示されている。

Bloggerのブログは全て全滅。「検索クエリ」などで「データがありません」の状態。

つまりBloggerブログ「だけ」がダメなのではないか？という気がしてくる。

■そういえば・・・

ここでふと気が付いたことが。

昔BloggerブログのURLは

• http://example.blogspot.com

のように全てcomドメインだったと思う。

いつの頃からか、国別に自動判定されて各国ドメインにリダイレクトするような仕様に移行したと記憶。
（参考情報：ブログが国別の URL にリダイレクトされる理由（ccTLD））


例えば、日本から以下の comドメインでブログにアクセスすると。

• http://example.blogspot.com 

jp ドメインのブログにリダイレクトされる。ブラウザ上部のURL欄はこの～.jp で表示される。

• http://example.blogspot.jp

■解決・・・かもしれない

ウェブマスターツールへのURL登録は、

• http://example.blogspot.jp

のように jp ドメインで登録していた。


ここまでくればもう察しの通り。

ウェブマスターツールへのURL登録は com ドメインでやり直した。

ハイ、すぐデータ出ました。「検索クエリ」欄も即表示。

つまりクロールはできていたしデータ収集もできていた。
にも関わらず、jp ドメイン登録だと表示がされないというオチだった様子。

つまりこれ結局原本(?)のサイトは comドメインで、他の各国ドメインはバーチャルサイトで実装してリダイレクトしてるようなイメージ？。
で、バーチャルドメインではうまく処理できないサービスが・・・みたいな感じでしょうか。
(昔似たようなことで悩んだ記憶も）


なんにせよ表示されるようになったので良かった良かったヽ(´ｰ｀)ﾉ

ブログのページレンダリング改善

気温35度超えの最中、AdSense先生のご指摘を賜りサイトを軽くせよとのことでございます。

事の発端

Google AdSenseの管理画面には、「サイトの状況」というものがある。
これはサイトの健康状態を★マーク０～５個で表示してくれるもの。
（追記：正確にはAdSenseの機能ではなく、Web Master Tool の PageSpeed Insights というサービスで、AdSenseの管理画面にもリンクがある）

サイトが重かったりすると、その原因を分析、改善案を提示してくれる。
（直すのは自分です。勝手に直してくれたりはしません）

この★がいつの間にか5個から4個に減っていたので調査してみたのが発端。

ブロッキング リソース

AdSense先生： 「このページには、ブロッキング スクリプト リソース が n あり、ブロッキング CSS リソースが n あります。これが原因で、ページのレンダリングに遅延が発生しています。」

うん、わからん（暑いし。

と、思ったがすぐ下に原因のURLが書かれていたので、確認してみると syntaxhighlighter のCSS、Javascriptを配置しているURLだった。

syntaxhighlighter は有名なソースコードをブログ等できれいに表示させる為の css/javascript群。
このブログでも利用中。
（参考記事：Bloggerにソースコードを表示する、Bloggerにソースコードを表示する その２～Google Driveを使う）。


実は syntaxhighlighter のJavascript は GoogleDrive に今のところ配置してある。

Google Driveが重いのか？

仮に重いとしても代替え先に悩む。
一応Google Drive内コンテンツへのURLアクセスは重い傾向ではあるらしい。


代替え先候補も一応は検討をしようとは思った。

• AWS
  1年無料運用中なので、来年どうするか未定。
  このような案件でアマゾン様の手をわずらわすわけにはいかない（ぇ。
  （単に面倒そうだな～と思っただけです・・・来年また引越しとかありえるし）
  
  
• DropBox
  ここも重いらしい。Google Driveと似たりよったりか？
   
• Googleサイト
  これを利用する手があるらしいが、ここもなにやらありそうなのでパス。
  

暑くてベンチを取る気にもならないので、GoogleDriveで重いならしょうがない。

と、割り切ることにする。（暑くて投げやり気味

非同期バージョンを使用してください

AdSense先生の分析によるご指南である。言いたいことはわかる。

でもJavascriptは苦手なのでパスしたい（暑いし
（AdSenseの広告タグがまさに非同期なスクリプトだったような気はする。が、これも忘れることにする。暑いので）

読み込み位置を変更して対処

syntaxhighlighter のCSS（shCore.css）は、

テンプレート > カスタマイズ > 上級者向け > CSSを追加から

で、追加でなんとかなる。


問題は shCore.js、shBrushCSharp.js 等のJavascript。

Syntaxhighlighter のオートロード機能も実は素よりも重くなるらしいので使えそうにない。

Javascriptの外部読込みの位置は、以前に何も考えず追加したままだったので </head>の前くらいで読み込んでいた。

その為、外部読み出しで時間がかかる間はページのレンダリングが待たされてしまい（ブロック）、表示レスポンスに遅延がでている。

と、AdSense先生は言ってるような気がしたので、</body>の前で読み込むように記述位置を変更。


syntaxhighlighter の対象となる部分の表示整形は遅れて行われるので、根本解決ではないが、これでブロッキングによるページレンダリング遅延の改善はAdSense先生も納得してくれた模様。
（</body>の前ならば、他のレンダリングすべきソースコードは一応処理されてるはずなので）



なんとも非常に基本的なことが原因だった気がします・・・。Orz


もう少し涼しくなったらまじめに対策するかも・・・しれない；つД｀）

BloggerでTwitter連携

BloggerでTwitter連携するメモ


ブログの記事投稿した際にTwitterにも自動配信するというもの。
（昨今のブログだと標準で機能が備わっているものもあるらしい）


しかしBloggerにはこの機能がない。

と、おもったら Googleでそんなサービスをやっているのを発見。
（元は別会社運営だったものをGoogleが買収したらしい）



feedburner

Google運営なのでGoogleアカウントで利用可能。
RSS Feedを使っていろいろと集計できるらしく、付加機能でSNSとの連携もある。

しかしなぜか連携設定のTwitter認証のところで404エラーが出てしまう。
海外フォーラムでもこれは指摘されているが解決策がでていない。
古くは2012頃の記事にもあるので、放置・・・放置なのか・・？
（TwitterのAPI更新で、関連利用サービスが動かなくなるというのは以前みた覚えもある）



やむを得ず feedburner を用いたTwitter連携は諦め。

※追記：その後Twitter認証ページも直っていて、2015/5時点では利用できています。

ただ、いろいろ統計がでてくるのでこれはこれで面白そうなサービスだと思う。



と、いうことでさらに調べるとありました。


twitterfeed.com


これはそのものズバリTwitterと連携できるというもの。

RSS Feedを利用しているので、他のブログでも利用できそうです。



これを使って連携できたので、以降手順メモ。

登録

サイト twitterfeed.com を開く。
ページ内上部の sign up をクリック。

メアド、パスワード、Bot防止認証文字を入力、Create Accountをクリック。
認証メールが届くので、文章内の認証リンクをクリックして開く。

設定

認証リンク後、自動的に設定画面になるかもしれない。
「Step1: Name Feed & Add Source URL」等と表示されていれば次項へ。

なっていなければ、再度 twitterfeed.com を開きログイン、上部の dashboard をクリック。
右上の Create New Feed をクリック。

Step 1：Name Feed & Add Source URL

• Feed Name
  なんとなく海外ものは漢字は心配なので無難に半角にしときました。
  この部分はTwitter出力の文字には関係ないようなので。
  多分UTF-8とかなので漢字でも大丈夫かもしれない？。
  例： example-blog
  
  
• Blog URL or RSS Feed URL (help)
  ブログのURLが http://example-blog.blogspot.jp の場合は次のように入力。
  例： http://example-blog.blogspot.com/feeds/posts/default?alt=rss
  ※追記：.jpは.comに置き換えています。
  
• Active
  チェックを入れる。

さらに下部の Advanced Settings の三角マークをクリックして展開、設定します。

• Update Frequency
  ブログ新規投稿の監視間隔時間。Every 30mins がとりあえず無難。
  例： Every 30mins にすると、30分毎に監視。つまり最大でTwitterへの連携配信が30分遅延する可能性があります。Every 24hourなら最大24時間遅延の可能性。
  
  特に連動の即時性を気にしない＆１日に１記事程度しか投稿しないなら１２時間とかそういう単位で良いと思います。
  １日に多くの記事を投稿する場合は Every 30mins にしておく方が無難かもです。Twitter連携が追いつかなくなるかもしれないので。
  
  
• And post up to ～ new update(s) at a time.
  １回のTweetで送る投稿記事の数。１で良いと思います。
  
  
  • 仮に５にした場合：
    例えば、Update Frequencyで24hoursにした場合、Tweetするまで最長で24時間程度かかる可能性があります。その間に記事を２以上投稿したとすると、１回のTweetでそれら複数の記事（ただし５以下）を載せることができるという意味（だと思います）。
    
    Twitterは文字数制限がある為、タイトルのみを配信するとしても一度に５記事は少々きつくなる可能性がありそうです（特に日本語はマルチバイトなので）。
    
    ですので、１と設定しておくのが無難かもしれません。
     
• Post Content
  Tweetに載せる内容の指定
  
  • tittle & description
    記事タイトルと、記事内容のみ
  •  title only
    記事タイトルのみ
  • description only
    記事内容のみ
  記事内容はTwitterの文字数制限で自動的にカットされる。
  ※今のところ文字化けしていないので、ここらはきちんとマルチバイト対応してる様子。
  
  
• Post Link
  チェックを入れると、Tweet末尾に記事へのリンクを付加する。
  普通はチェックを入れたほうが良いでしょう。
   
• Shorten link through
  前項「Post Link」を使う場合、短縮URLサービスの選択。
  bit.ly の利用は良くみかけるのでこれにしてみました。
   
• LinkedIn options
  LinkedInというビジネス系SNSに関連した機能らしいが、使っていないので詳細不明。
  記事のタイトル、内容から自動で適切なサムネイルをLinkedInからもってくるような感じ？URLを記述すると固定イメージにできるとか、そんな雰囲気。
  
  
• Post Prefix (Twitter and App.net only)
  Tweet毎に冒頭に付け加える文を指定できる。
  例： ブログ名：
  等としておくと、Tweetで、
  ブログ名： 記事タイトル： 記事内容
  といった風に冒頭に指定文字列が付与される。
  
  
• Post Sufix (Twitter and App.net only)
  Tweet毎に末尾に付け加える文を指定できる。
  
  
• Keyword Filter
  Tweetする記事をフィルタできるようで、そのフィルタ条件となる文字列をスペース区切りで指定できるらしい。（使ってないので詳細不明）
  多分このフィルタでマッチしたものだけを、Tweet配信する機能ぽい。

ここまでできたら、Continue to Step 2 をクリックして進む。

Step 2：Name Feed & Add Source URL

連携するSNSを指定する。
一応Facebookなどもできるようだ。

今回はTwitterとの連携をするので、「Twitter」をクリックして認証を許可する。

• Authenticate Twitterをクリック
  Twitterの外部利用認証を許可する。
  （Twitterにログインしてなければ、ログインして認証を許可する）
  
• UTM Tagsの部分はよくわからないので、デフォルトのままとした。
  
• Create Serviceをクリック。

Step ２の画面に戻るので、All Done をクリック。

その他

当初３０分に設定して、投稿しても連携されず。

半日以上経過後、投稿が３０分以内に反映されるようになりました。

挙動が怪しいなと思った場合、初回は少し待ってみると良いかもしれません。

Bloggerにソースコードを表示する その２～Google Driveを使う

前回の設定で一応 C#のソースは読めるようにはなった。しかし実は少々気になることが。

Blogger管理画面の「HTMLの編集」で、

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

この追加した2行、実は人様のURLというかサーバを無断(?)で使っているわけです。
できれば自前のサーバか何かにおきたい。けど、そんなものはないわけです！。

そこで、Google Driveを使いますっ！

■Google Driveでの作業

どうもGoogle Driveは2013年頃から、html、js、css ファイルを外部から参照できるようになったらしい。表計算等ではたまに使っていたが、これはつい最近まで知らなかった。

さすがにPHPは無理かもしれないが、簡易的な外部サーバにもってこいかもしれない。

まずはGoogleにログイン。
上部ツールバーの「もっと見る」をプルダウンすると「ドライブ」とあるので、そこをクリックする。
※これはブラウザで異なる可能性があるので、適当にGoogle Driveに行き着いてくださいっ！。

 【Google Driveでフォルダを作る】

次の手順でドライブにフォルダを作り、共有を一般公開に設定します。

• 「ドライブ」の画面にて、左上の「作成」から「フォルダ」を選びフォルダを作成する。
• 出来たフォルダの左の四角にチェックを入れる。
• すぐ右上付近の「その他」から「共有」＞「共有」。
• ダイアログがでるので、中程の「変更」をクリック。
•  「ウェブ上で一般公開」にして保存する。

整理しやすい意味でもフォルダは作っておいたほうが良い。
重要な点として、このフォルダは必ず共有を一般公開にして下さい。それ以外だと外部からフォルダ以下にアクセスできないのでうまくいきません。
 

 【Google Driveへアップロード】

前回ダウンロードした syntaxhighlighter_3.0.83.zip を展開し、

syntaxhighlighter_3.0.83/scripts/

配下にあるファイル、

shCore.js
shBrushCSharp.js

この２つをドライブの画面にアップロードする。（画面にドラッグ＆ドロップでいける）

※フォルダ共有が一般公開になっていると自動的にその中にアップロードしたファイルも一般公開になるのでそのままで良い。一応念の為、アップロードした共通の設定は確認しておけば間違いない。

 【Google DriveへのアクセスURL】

アップロードしたファイルへアクセスする為のURLを作ります。

ドライブ画面内の　shCore.jsをクリック。
右下の「開く」のすぐ右にあるボタンをクリック（マウスオーバーで共有と表示されます）
表示されたダイアログ内の「共有するリンク」部分をコピー。
適当なテキストファイルをつくりペースト。
だいたいこんな感じだと思います。※赤字部分はファイルごとに異なる

https://drive.google.com/file/d/ABCDEFGHIJKLMNOPQRSTUVWXYZ/edit?usp=sharing


実はこのURLではドライブにアクセスできないのでURLを作ります。
下行の *************** の部分を、上の赤字文字列に置き換える。

https://googledrive.com/host/***************/


するとこんな風になる。

https://googledrive.com/host/ABCDEFGHIJKLMNOPQRSTUVWXYZ/

これがアップロードした shCore.js へのURLになる。

同様に shBrushCSharp.js もURLを作り、テキストファイル等にメモしておく。

■Bloggerに設定する

【HTMLの編集】

操作は前回同様。一応以下に手順を。

Bloggerの管理ページへいく。
左列の「テンプレート」をクリック。
画面内「HTMLの編集」をクリック。
開いたHTMLソースの中に以下の2行を追加して保存。
追加する場所は <head> ～ </head> の間に。だいたい </head> の前くらいへ。

<script src='https://googledrive.com/host/ABCDEFGHIJKLMNOPQRSTUVWXYZ/' type='text/javascript'/>
<script src='https://googledrive.com/host/#1234567890#1234567890WXYZ/' type='text/javascript'/>

■補足

Googleドライブに配置しておけば複数のブログ、HPでも２行追加するだけで利用できるので便利です。
また、この手法でcssファイルも配置できるので、複数サイトで共用することも。

その他いろいろ用途はありそうです。

ただし現状試したところでは、一般公開にしないと外部から参照できない。
見られると好ましくないファイル類はこの方法で自サイトにロードするのは注意です。


あと以前まではブログのプレビューではソースコード部分がプレーンテキストのままで反映されなかった。
今回GoogleDriveに配置したら、プレビューでも表示されるようにヽ(´ー｀)ノ
これはちょっと嬉しい～。

Bloggerにソースコードを表示する

C#のソースを見やすくする為、Bloggerの設定に少し手を入れた。

こんな風にきれいに！

//----- Begin:
using UnityEngine;
using System.Collections;
using System;//!< (Arrayクラス利用に必要) 
using System.Collections.ObjectModel;//!< ReadOnlyCollectionクラス利用に必要 

public class NewBehaviourScript : MonoBehaviour {
    public static readonly ReadOnlyCollection<string> OBJNAME_VOLBTN = Array.AsReadOnly(new string[] {
        "<>Brace Test"
    };

    // Use this for initialization
    void Start () {
    }
 
    // Update is called once per frame
    void Update () {
    }
}
//----- End: 

SyntaxHighlighter というものを利用する。

以下、GoogleのBloggerに設定していく手順。

■ダウンロード＆展開

SyntaxHighlighter3.0.83 の右列にある download に進み、ダウンロード。
（ syntaxhighlighter_3.0.83.zip ）
適当な場所にとりあえず展開する。

■CSSファイルを好みに修正する

いくつか修正した方が見栄えが良くなるので、展開したフォルダ内の以下のファイルを開いてカスタマイズしていく。

syntaxhighlighter_3.0.83/styles/shCoreDefault.css

【フォントを指定する】

ソースとは関係ないが、ついでなのでフォントを指定しておく。Windows環境ならメイリオフォントはやはり綺麗で見栄えも良いので。

一番冒頭付近を以下のように追加

body {
font-family: Osaka, "メイリオ","ＭＳ Ｐゴシック", Sans-Serif;
}
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html

※フォントの指定順は地味に重要だったりするのだがここでは詳細割愛。ブラウザは左から順にPCにそのフォントがあるかチェックしていき、合致したフォントで表示される。Windows、PC、Linuxその他モバイル系など考慮しだすとキリがないので、とりあえずこんな感じで。

【縦スクロールバーを消す】

これは好みだが、私的にはスクロールバー無しの方が見やすいので。

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important; /* (ADD) Vertical scroll bar OFF */
}

【横スクロールバーIE対策】

どうもIEだと最後の行がはみ出るというか見えにくい対策。

.syntaxhighlighter.ie {
  font-size: .9em !important;
/*  padding: 1px 0 1px 0 !important; (DEL)  */
  padding: 1px 0 20px 0 !important; /* (ADD) No overlap horizontal scroll bar */
}

【長い行の折り返し】

調べてみるとバージョン2.xではこれはできていたらしい。3.0系でできなくなったとのこと。
3.0系の実装方法の都合上、折り返し処理が難しくなっている様子。
結論としては強引にできるが、行番号がおかしくなる。
よって、折り返しを取るか、行番号表示をとるかの２択になるので、ここでは折り返しを取ることにする。（行番号もあると便利そうなので好みですホント）

折り返しを有効にする

.syntaxhighlighter .line {
/*  white-space: pre !important; (DEL) */
  white-space:pre-wrap !important; /* (ADD) Text line wrap */
  word-wrap: break-word !important; /* (ADD) Text line wrap */
} 

【行番号を消す】

.syntaxhighlighter .gutter {
/*  color: #afafaf !important; (DEL) */
  display: none; /* (ADD) No display line number */
}

【色の変更】

だいたいこんな風に。

.syntaxhighlighter {
  background-color: #eeeeee !important; /* (EDIT) background color */
}
.syntaxhighlighter .line.alt1 {
  background-color: #F1F1F1 !important; /* (EDIT) background color */
}
.syntaxhighlighter .line.alt2 {
  background-color: #eeeeee !important; /* (EDIT) background color */
}

■Bloggerに設定する

【shCoreDefault.cssの設定】

GoogleにログインしてBloggerの管理ページへいく。

左列の「テンプレート」をクリック。
画面内「カスタマイス」をクリック。
左上「上級者向け」をクリック。
左上のスクロールバーの下方の「CSSを追加」をクリック。
中央上部に「カスタム CSSを追加」という横長のウィンドウがある。
そこに先程修正した shCoreDefault.css の内容をコピペする。
すぐ右上の「プログに適用」をクリック。
これで shCoreDefault.css の内容の設定は完了。
一旦右上の「Bloggerに戻る」で管理画面の最初の方へ戻る。

【HTMLの編集】

shCoreDefault.css の内容は前項で設定できているがまだブログでは有効にならないのでHTMLを修正する。

Bloggerの管理ページへいく。
左列の「テンプレート」をクリック。
画面内「HTMLの編集」をクリック。
開いたHTMLソースの中に以下の2行を追加して保存。
追加する場所は <head> ～ </head> の間に。だいたい </head> の前くらいへ。

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>

ここでは C# のソース表示のみを登録している。（shBrushCSharp.js の部分）
最初に展開したZIPの中の syntaxhighlighter_3.0.83/scripts/ を見ると各言語に対応するファイル名がわかるので例えばxhtmlならば、

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

としてこの行を追加すればOK。

※最初の展開したZIPのディレクトリはもう必要ないので消してかまわない。念の為。

■利用方法

投稿編集の際に「作成」と「HTML」があるので。「HTML」に切り替える。

ソース表示したいところを、

<pre class="brush: csharp;">

ソース

</pre>

で囲えばおｋ。

ソースコードを貼り付けるときは「作成」モードの方が楽。大なり括弧等を自動的にエスケープしてくれるので。

Bloggerのラベルツリー化

以前、WordPressではツリー化したことがあるが、GoogleのBlogは面倒そうだったので放置してきた。

ちょっとUnityのラベルがごちゃごちゃしてきたので階層化できないかな～と。
ググったらでてきましたよ(｀・ω・´)b


こちらを参考にサクっと階層化。


Bloggerのラベルをカテゴリ別に整理する(ラベルの階層化)