GoogleスプレッドシートでグラフをWEBに公開する方法

Googleスプレッドシートで作成したグラフは、画像としてダウンロードしなくても、そのままブログやサイトに掲載できるということに最近気が付きました。

Googleスプレッドシートのグラフ公開手順

手順はとても簡単です。

1. 作成したグラフをクリック
2. グラフ右上に表示される「︙」（縦三点リーダー）をクリック
3. グラフを公開 を選択

「グラフの公開」を選択すると「ウェブに公開」というページに遷移しますので「公開」をクリックします。

埋め込むタブを選択するとhtmlコード（iframe）が表示されます。

グラフは、インタラクティブか画像を選択ができます。インタラクティブを選ぶとグラフにマウスポインタを合わせるとポイントしたグラフの値が表示されます。

下記はバーチャートの表示例です。

Googleスプレッドシートのグラフを直接参照しているので、スプレッドシートでグラフが参照しているデータやグラフを変更すると公開しているグラフも連動して変更されます。またスプレッドシートを削除してしまうと表示されなくなってしまいます。

スマホの表示が崩れる

取得した埋め込みコードのままだと、グラフのサイズによってはスマホの表示が崩れてしまいます。

スタイルシートで調整しようとしましたが挫折しました。コード上のwidth（横幅） と height（高さ）を適宜調整してください。

無知は罪なりでした、、、、。

Open Live Writer で Blogger に投稿できない（Error 400 Bad Request）

Open Live Writer でブログを書いていますが、今年になってから「Can't publish files The remote server returned an error: (400) Bad Request.」とエラーが表示され、Google Blogger に投稿できなくなってしまいました。

色々とググってみると、Error 400 - The Remote server returned an error · Issue #786 に、2019年1月16日から写真があると Google Blogger に投稿できなくなったとあります。

何か解決方法はないかと探して見つけたのが、下記のTweetでした。

If you're having trouble posting photos to Google Blogger with @OpenLiveWriter, we have a test build with a fix. We'd appreciate it if you can test and let us know if it's working for you. https://t.co/oVOz9h3UmF

— Open Live Writer (@OpenLiveWriter) January 20, 2019

リンクにあるテスト版を試してみましたが、問題なく OpenLiveWriter で Google Blogger にブログを投稿することができました。 感謝、陳謝です。

Open Live Writer 0.6.3 のインストール

最新版の Open Live Writer のバージョンは、0.6.2 ですが、OpenLiveWriter 0.6.2.314 - AppVeyor から Releases\OpenLiveWriterSetup.exe をダウンロードして、実行します。

C:\Users\[ユーザ名]\AppData\Local\OpenLiveWriter に0.6.3 がインストールされます。

バージョンを確認すると 0.6.3 になっています。

OpenLiveWriter0.6.3 の不具合

OpenLiveWriter 0.6.3 を実行すると、10秒毎にゾンビのごとくOpenLiveWriter が次々と起動し続けます。

この対処方法についても、上記のTweetのスレッドにリンクがあり、Update.exe を削除するとすればよいとありました。

Update.exe を削除

Update.exe は、OpenLiveWriter 0.6.3 がインストールされた C:\Users\[ユーザ名]\AppData\Local\OpenLiveWriter にあります。

Update.exeを削除すればゾンビが生まれなくなります。ただ、起動時に最新版をのアップデートチェックがされなくなるかもしれませんので、最新版は自身でチェックする必要があるかもしれません。

Googleが提供するツールでモバイルのエクスペリエンスを向上させる

約半数がモバイルからのアクセス

スマホの普及によりモバイルからのアクセスは増加しています。このブログへのアクセス（UUベース）も2013年1月には10％に満たなかったモバイルユーザーが、2014年下期には45％と、半数近くがモバイルからのアクセスとなっています。

ブログのモバイル対応について考えてみた | 象と散歩 でモバイル（スマホ）でYoutubeと表を見やすくするための方法について記載しましたが、今やスマホで見やすいサイトであることは必須条件となってきています。

Googleではモバイルに対するユーザビリティに関してのレポートやツールを提供していますので、これらを有効活用してモバイル・ユーザーフレンドなサイトにしましょう。

モバイル対応を求めるGoogle

Googleはモバイルに対応したサイトを望んでいます。 下記はモバイル・ファーストインデックスの動画です。日本語字幕で見られます。

Google にとっては、モバイル フレンドリーなサイトが増えることが、結果、モバイルでの検索の増加、広告収入の増加に繋がるので当然ですが、利用者にとってもモバイル ユーザフレンドなサイトが望まれているのは利用者の立場からみて間違いありません。

[スマホ対応] ラベルって何？

2014年11月14日付のGoogleウェブマスター向け公式ブログの 検索ユーザーがモバイル フレンドリー ページを見つけやすくするために の中でモバイル版の検索結果に［スマホ対応］ラベルが表示されるという発表がありました。［スマホ対応］ラベルは下記の条件に合致する場合に適用されるとあります。

• 携帯端末では一般的でないソフトウェア（Flash など）を使用していないこと
• ズームしなくても判読できるテキストを使用していること
• ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
• 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

【引用】検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

日本語（左図）では[スマホ対応]、英語（右図）は[Mobile-friendly]と表示されます。

そして、「Googleではモバイル・フレンドリーの条件をランキング要素として使用することも実験中です。」という記載がありますので、近い将来には、”見やすさ” だけではなく、検索結果のランキングに影響しそうです。

モバイル対応を始めよう

Googleでは、サイトやブログのモバイル対応のガイダンスとして、 ウェブマスター向けモバイルガイド を提供してくれています。

モバイル フレンドリー テスト

この中にサイトやブログがモバイルに最適化されているかを確認するために モバイル フレンドリー テスト が用意されています。自分のサイトやブログをGoogleがモバイルに最適化されていると判断しているかを確認しましょう。

確認は簡単で、下記画面でURLを入力して「分析実行」ボタンをクリックするだけです。

問題がなければ下記のように「問題ありません。このページはモバイル フレンドリーです。」と表示されます。またGoogleがこのサイトを実際にどのように見ているのかがイメージとして表示されます。

このモバイル フレンドリー テストでお墨付きがもらえれば、前述したGoogleモバイル検索の結果で、[スマホ対応]ラベルが付加されます。

PageSpeed Insights でモバイルの操作性を向上させる

モバイル フレンドリー テスト で問題がなかったとしても、まだ改善できることは見つけられます。そのひとつが、PageSpeed Insights です。

PageSpeed Insights は、ページのパフォーマンス（表示速度）を測定し、改善点を指摘してくれるツールですが、PCとモバイルと両方の表示で測定を行ってくれます。（Google ウェブマスター向け公式ブログ: PageSpeed Insights を使ってサイトのモバイル操作性を向上させましょう）

1) PageSpeed Insights の実行

「ウェブページのURLを入力」欄にURLを入力して「分析」をクリックします。

2）PageSpeed Insights の実行結果

ブログのモバイル対応について考えてみた | 象と散歩 でチェックしてみましたが、58/100 点と思ったより点数が高くなりません。

改善できる点はないかと詳細を確認すると、「次のスクリプトの非同期バージョンを使用してください」という中に Google +1 のスクリプトが含まれていましたのでこちらを改善します。

Google +1のJavaScripitを非同期にする

Google +１のJavaScripitを非同期にする方法については、+1 ボタン - Google+ Platform の JavaScript の非同期読み込みに記載がありますので こちら を参考にしてください。

ヒント: パフォーマンスを最高にするには、このコードを最後の +1 タグの直後に配置します。

とありますが、</Body>タグの直前に記載すれば大丈夫です。

3) 修正後の再チェック

Google +1のJavaScriptを変更して再度、PageSpeed Insights で確認すると、58/100 → 60/100 へと2ポイント改善されました。

PageSpeed Insights のルール に日本語での解説もありますが、Bloggerを利用している場合には、これ以上の改善はできなそうです。

４）ユーザーエクスペリエンス

PageSpeed Insightsでは「速度」以外にも「ユーザーエクスペリエンス」についても評価してくれます。こちらは 96/100 で修正が必要な項目はありませんでした。

ウェブマスターツール

Googleウェブマスターツールでもモバイル ユーザビリティのチェックができます。チェックできる内容は以下の６点です。

• Flash が使用されています
• ビューポートが設定されていません
• 固定幅のビューポート
• コンテンツのサイズがビューポートに対応していません
• フォントサイズが小です
• タップ要素同士が近すぎます

詳細は、モバイル ユーザビリティ - ウェブマスター ツール ヘルプ で確認できます。

まとめ

Googleが強く推奨するだけではなく、モバイルからのアクセスは増え続けていますので、モバイル ユーザ体験の向上は今や必須です。

スマホで検索して、開いた途端に見る気が失せるサイトもまだ少なくありません。折角、Googleが無償でモバイル ユーザビリティ、表示速度など各種チェックツールと変更方法まで教えてくれているので、是非、修正可能な範囲で対応しましょう。

【おまけ】モバイル・ユーザの実態調査（Our Mobile Planet)

Googleが提供するモバイル向けのレポートとして、各国のモバイルユーザの実態をまとめた Our Mobile Planet があります。2013年のレポートなので鮮度は落ちてしまいましたが、モバイルユーザーの動向としては参考になります。

自分でグラフも作れる Our Mobile Planet

また Our Mobile Planet では、2011～2013年のデータを使って自分で簡単なグラフを作成することができます。

例えば、下記はスマホでどのくらいの頻度でウェブにアクセスをしているかを示したグラフで、83％のスマホ・ユーザーが毎日ウェブサイトにアクセスしていることがわかります。

各国との違いも比較できるので、2014年のデータも追加されることを願います。

ブログのモバイル対応について考えてみた

ここ数年でモバイルのアクセス数も随分と増えたと思い、Googleアナリティクスで確認をしてみると、1年の間でもモバイルは増加し、デスクトップとタブレットのカテゴリが減少しています。直近1ヶ月では4割がモバイルからのアクセスになっています。



自分がブログで使っているBloggerは、モバイルテンプレートを選択すればある程度は整形して表示してくれます。しかし、直近でエントリーした「検索エンジンでブログを検索対象とする方法」をiPhoneで閲覧すると画像は自動的にリサイズされていますが、Youtubeと表は、はみ出して、かなりカッコ悪い状態です。モバイルユーザーの経験価値を高めねば。

  

と、いうことで ”Youtube” と ”表（table）” のレスポンシブル対応について調べてみました。

Youtubeのレスポンシブル対応

参考にしたのは、下記のサイトです。タイトルはまさに「Youtube（その他iframeを使った動画）をレスポンシブにする方法」です。

How to make a YouTube (or other iframe) video responsive

スタイルシートの設定で簡単にYoutubeをレスポンシブルにできるとありますので早速試してみました。

Step1

サンプルではクラス名が ”video-container” でしたが、Youtube以外の動画も使わないので ”youtube” にしました。コツは56.25％です。56.25％は、5625/10000 となりますが、この比率は5で割っていくと 1125/2000 → 225/400 → 45/80 → 9/16となります。そうです、HD動画の16:9の比率なんですね。と、How do you convert a percentage (56.25%) into a fraction? にて説明されていました。

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bloggerの場合

上記のスタイルシートがそのまま使えます。どこに記述すればよいかは、引用（blockquote）を格好よく表示する | 象と散歩 を参考にしてください。

Step2

Youtubeから取得した埋め込みコードを上記で作成したクラス名で囲むだけです。



これがサンプルのコードです。

<div class="youtube">
<iframe width="560" height="315" src="//www.youtube.com/embed/R_PWp3dEsmI" frameborder="0" allowfullscreen></iframe>
</div>

スマホでのYoutubeの表示確認

「検索エンジンでブログを検索対象とする方法」を修正して確認します。下図左がiPhone（Safari）で右がSurface（IE11） で表示しています。



素晴らしい、レスポンシブになった。

表のレスポンシブ対応

表（table タグ）は配置を変えられないのでレスポンシブにはならないと分かりつつも、世の中には賢い人がいるに違いにない、と、見つけたのが、「10+ Solutions for Responsive Data Tables 」という中にあった方法です。

The Basics

ベーシックで紹介されているのは、すごく簡単な方法でtableタグで表の幅（width）を設定せずにブラウザの表示にまかせるという方法です。

Before

<table border="1" cellpadding="2" cellspacing="0" width="720"><tbody>
<tr>
<td width="360">テスト１行目テスト１行目テスト１行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
<td width="120">テスト２行目</td>
</tr>

After

<table border="1" cellpadding="2" cellspacing="0"><tbody>
<tr>
<td>テスト１行目テスト１行目テスト１行目</td>
<td>テスト２行目</td>
<td>テスト３行目</td>
<td>テスト４行目</td>
</tr>

しかし、幅を指定しないと、列が多い場合や文字が多い場合などは、フォーマットが崩れて反って読みづらくなってしまいます。

Mobile-Frendly Table

レスポンシブルではないけど表のフォーマット崩さない方法が、”Mobile-Friendly Table（モバイルにやさしい表）” で紹介されています。モバイルの場合に表を横にスクロールさせる方法です。

しかし、無知な自分にはサンプルコードの使い方がわかりません。

@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
}

そこで似たようなことを試めされている方はいないかと探し、「tableをレスポンシブでも破綻しないようにする簡易的な手法 | webutubutu」 を参考にさせていただきました。

しかし、上記で紹介されているサンプルのスタイルシートではうまくいきませんでした。確かにスマホで、表の横スクロールが可能になりましたが、PCでもスクロールバーが表示されてしまいます。またメディアスクリーンで指定した「表は左右にスクロールできます」が表示されてしまいます。

下記がtableをレスポンシブでも破たんしないようにする簡易的な手法から引用したCSSの記載例です。

.table-wrap{overflow: scroll; position:relative;}
@media screen and (max-width: 1410px) {
.table-wrap:before{
content: "\008868\00306f\005de6\0053f3\00306b\0030b9\0030af\0030ed\0030fc\0030eb\003067\00304d\00307e\003059"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}
}

スマホで表がはみ出してしまう場合の対応【完成形】

と、いうことで、先人たちの知恵を融合してtableのレスポンシブル対応の完成です。tableのスタイルでoverflowをautoにして、display block を追加することで、スマホだけで表をスクロールできるようになりました。

またメディアクエリの max-widthを640pxにすることでスマホだけで表上にメッセージを表示させることができました。640pxにする理由がわかりません。iPhoneでは350pxの表までははみ出さずに表示できたので max-width の値を350px前後にも変更してみましたがうまくいきませんでした。

スクロールを示唆する文言は、スマホ対応なのでスクロールではなく、「表は左右にスワイプ可」としました。

下記がサンプルのスタイルシートになります。

.table {
overflow: auto; display: block; position:relative;
}
@media screen and (max-width: 640px) {
.table:before{
content: "\08868\0306f\05de6\053f3\0306b\030b9\030ef\030a4\030d7\053ef"; /* 文字化け対策のためUnicode変換 */
color:#fff;
font-size:12px;
background-color:#e07903;
position: absolute;
top:0px;
border-radius: 5px;
padding: 0.05em 0.5em;
}

iPhoneでの表示は下記のようになります。

まとめ

今回は、ちょうど気になったYoutubeと表のレスポンシブル対応でしたが、スマホからのアクセスは、これからも増え続けていくと思います。適宜ユーザビリティ強化は図っていきたいと思います。

先ずは、モバイルでのアクセスが多いコンテンツから少しずつ修正していきたいと思います。

検索エンジンでブログを検索対象とする方法

久しくGoogleウェブマスターツールを覗いてみていなかったのですが、いつのまにか自分が使っている Blogger もサイトマップに対応していたので、Googleウェブマスターツールで登録を変更しました。

ウェブマスターツールでGoogleに検索をしてもらうようにするための方法は、BloggerでなくてもどのWEBサイトでもブログでも同じです。

Google検索の仕組み

Googleでは、スパイダー（クローラー）というソフトウェア（ロボット）が定期的にWEBページをクローリングして情報を収集してインデックスを作成しています。Googlebot がこのクローリングを行うためのロボットで、ボットとはロボットの略称です。

英語のクロール（CRAWL）という意味には、虫が這い回るという意味もあるので、まさにリンクをたどって這い回る蜘蛛（スパイダー）がクローリングなのです。



そして、誰かがGoogleで検索したときに、索引として参照されるのがこのインデックスです。逆に言えばインデックスに登録されていないWEBページは検索の対象になりません。

Goolgeの検索の仕組みついては、Googleが提供している「How Search Works」（日本語字幕あり）が、わかりすく説明をしているので参考にしてください。

クローラーの挙動を決める robot.txt

robots.txt ファイルについて - ウェブマスター ツール ヘルプ に説明がありますが、robots.txt には、クローラーが、サイトやブログにアクセスしたときにどのように振る舞ってもらいたいかが記載されています。最もシンプルなのは、クローリングを許可するか否かと、サイト構成（地図）が記載されているサイトマップの設置場所についての記載です。

robots.txtの表記例

項目名	説明
User-agent:	対象となるロボット名です。 * はすべてのロボットを対象にしているという意味になります。
Disallow:	クローリング対象外とするURLを記載します。
Allow:	クローリングの対象とするURLを記載します。 / はディレクトリ配下すべてを対象とするという意味になります。
Sitemap:	サイトマップが設置されているURLを指定します。

Blogger の robots.txt

Blogger の場合、何も設定しなくても下記の robots.txt がルートディレクトリに作成されています。自分のブログであれば、http://walking-elephant.blogspot.com/robots.txt です。独自に編集することもできます。

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://walking-elephant.blogspot.com/sitemap.xml

User-agent: が Mediapartners-Google となっているのは Google AdSense です。Disallow: の指定がないので、すべてのディレクトリが対象となります。一方、通常の検索エンジンに対しては、/search をクローリング対象外としているので検索結果やラベル検索によるページについてはインデックスされませんが、広告は表示されるという設定になっています。

サイトマップとは

Googleなどの検索エンジンのクローラーは、リンクをたどってコンテンツの情報を取得していきます。サイトマップはその道しるべ（索引）です。サイトマップには、コンテンツの場所（URL）や最終更新日などが書かれています。

Blogger は、サイトマップに対応していなかったので、サイトマップ代わりにRSS/ATOMフィードを使わなければなりませんでしたが、いつのまにかサイトマップに対応して自動的に作成されるようになっていました。

下記は、自分のブログのサイトマップの例ですが、<URL>タグで1コンテンツを囲み、<loc>タグで場所（URL）と<lastmod>タグで最終更新日が記述されています。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://walking-elephant.blogspot.com/2014/12/2kg.html</loc>
    <lastmod>2014-12-23T16:30:27Z</lastmod>
  </url>
</urlset> 

sitemap.xmlの表記例

項目名	説明
<url>	<url>タグで1コンテンツを囲みます。 <url>~</url>の間に以下のタグでコンテンツの詳細を記載します
<loc>	【必須】 ページの場所（URL）を記載します
<lastmod	【オプション】 ページの最終更新日を記載します
<changefreq>	【オプション】 ページの更新頻度ですが参考値です（always,hourly,daily,weekly,monthly,yearly,never）
<priority>	【オプション】 サイト内の重要なページを知らせるための優先度（0.0-1.0） デフォルトの優先度は0.5です

ウェブマスターツールに登録しよう

Googleなどの検索エンジンは、下記の順番でサイトやブログのリンクをたどってインデックスに登録していきます。



しかし、世界中には数多のサイトやブログがありますので、自分のサイトやブログをクローリングしてもらうために、ウェブマスターツールに登録しておきましょう。Yahoo! の検索エンジンはGoogleなので、現在、WEBマスターツールを提供しているのは、GoogleとBingです。

・Goolge	ウェブマスターツール
・Bing	Webmaster Tools

Googleウェブマスターツールにサイトマップを登録しよう

Googleウェブマスターツールでのサイトマップの登録方法は下記の通りです。

① メニューからクロールの下にあるサイトマップを選択

② 「サイトマップの追加テスト」をクリック

③ ボックスにsitemap.xmlをタイプ

④ 「サイトマップをテスト」をクリック



⑤ テスト完了でエラーがないことを確認



⑥ ①-③と同じ手順で「サイトマップを送信」をクリック

新しく登録されたサイトマップでインデックスに登録されるまでステータスは保留となっています。



⑦ インデックスに登録されたら、以前に登録したRSS/ATOMフィードを削除

RSS/ATOMフィードでインデックスを登録していたときは、214登録／215送信でしたがXMLサイトマップに変更したら213登録／213送信と正しい213ページになりました。

Bing Webマスターにサイトマップを登録しよう

続いてBingのWebマスターツールへのサイトマップの登録です。サイトマップの送信ボックスにXMLサイトマップのURLを入力して送信ボタンをクリックすれば完了です。



以上でサイトマップの登録は完了です。

Word2013でブログを書く

やっとBloggerユーザーもWord2013でブログを投稿できるようになりました。Word2007からブログ投稿ができるようになっていたのですが、Word2013では、Bloggerのアカウントを選択すると「アカウントを登録することができません。」と悲しくも拒絶されていたのです。


もちろんWindowsマシンであればMicrosoftが提供する Windows Essentials に含まれている優れたブログライターである Windows Live Writer を利用することできるので、敢えてWordでブログを投稿する必要はないのですが、Surface/Surface 2 に搭載されている Windows RTではWindows Live Writerが利用できません。またWindowsストアにブログ・ライティング・ソフトはないので、Surface使いにはWordでブログの投稿できないというのは致命的？でした。

Surface2 32GBモデル (シルバー)

Word2013でBloggeの投稿が可能に

12月に修正プログラムがリリースされてやっとWord2013からBloggerに投稿できるようになりました。

Description of the Word 2013 update 2850060: December 10, 2013

  Issue that this update fixes （このアップデートで修正される問題）

You cannot register your Blogger account in Word 2013.
（Word2013でBloggerアカウントを登録できない）

さっそく試してみると、通常のWord2013でも Office RT のWord2013 でも Blogger アカウントの登録ができました。
 

Wordでブログに投稿する

Word2013でブログに投稿するの簡単です。Wordを起動して「ブログの投稿」を選択します。

 
後は前述のアカウント登録をすれば準備完了です。Wordと同じように文章を作成できるので難しいことがわからなくてもブログに投稿することができます。WordPress.com にも対応しています。

Wordでブログのメリット

• ワープロ感覚でブログを作成
• 図形、クリップアートなどの利用が可能
• 表、グラフも簡単に作成

基本的な操作はワードと同じなので気軽にブログを作成することができます。表の作成、図の作成、グラフの作成なども容易です。例えば下記のようなブログを簡単に作成することができます。

 

Wordでブログのデメリット

• プレビューができない
• ビデオ、地図などが挿入できない
• htmlが直接編集できない
• 余分なHTMLタグ <span xlmns=’’’’></span>

プレビュー機能がないのでブログ上でどのように表示されるのかを確認するためにはブログに下書き保存をして確認するしかありません。またWordではYoutubeの動画を差し込むことができるのですが、ブログテンプレートからは動画の挿入ができません。あと地図の挿入もできません。何よりもhtmlを直接編集できません。またフォントを指定していなくても余分なhtmlタグが挿入されてしまいます。

Wordでブログ投稿をするコツ

前述したようにWindowsマシンであれば、Windows Live Writerを利用した方が無難です。しかし普段はSurface2を持ち歩いているのでブログの下書きとしてwordを利用しています。ブログに直接投稿する以外にも下書きとして保存できるので修正が必要であれば、ブラウザや別な環境で修正を行うことができます。 下書きとしてだけではなく、図形やグラフを挿入するような場合にもwordで作成すると便利です。

残念なことに...

2014年1月の初旬にはまた Word 2013 から Blogger にアクセスできなくなりました。僅か１ヵ月足らずの命とは...。マイクロソフトのコミュニティには、「ログインのシーケンスが Googleによって変更されたのでは？」とありますが、そもそも Windows Live Writer では Blogger に接続して使えるのですからそんなに難しい問題ではないのではと思ってしまいます。

早いバグフィックスを望みます。

そして再び...

2014年4月8日のWord2013のアップデートに下記の更新内容が含まれていました。

Word 2013 で、Blogger のブログのアカウントを登録しようとすると、次のエラー メッセージが表示されます。

アカウントを登録することはできません。

お帰りなさい。（2014年4月30日 追記）

ブログとSNSを連携する - Tumblrで共有

「Tumblrで共有」ボタン、ウェブサイト運営者向けに提供開始という記事を見かけたので早速ブログにTumblrの共有ボタン（Share on Tumblr）を設置してみました。

Tumblr共有ボタンの設置方法にあるコードを貼り付けるだけです。

Advancedを選択するとTumblrに共有される形式をリンク、引用、写真、ビデオの中から選択することができるようです。

先ずは基本のBasicを選択します。

BloggerにTumblrで共有ボタンを設置する

Tumblr共有ボタンのステップ１にあるJavaScriptを/headの前にコピーします。

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック
2. テンプレートから /head を検索
3. /headの下にコードを張付ける

続いてShare button codeにあるコードを貼り付けてみましたが、Tumblrで共有ボタンが表示されません。

ボタン画像のURLが正しく解釈されていないのではと思い、コードをみると画像のURLがアポストロフィで囲まれていましたので、これをクォートに変更してみると『Tumblr共有ボタン』は表示されましたが、表示位置が変です。

再びコードを眺めると<a>タグで「Share on Tumblr」という文字列にリンクをさせているのですが、表示上にこの文字列はありません。text-indent:-9999px という記載があるので、おそらくこれがあり得ない場所に文字列を飛ばしているのではないかと考え、「Share on Tumblr」とtext-indent:-9999pxを外してみました。

するとTumblr共有ボタンが正しく表示されました。（自分の感に万歳！）

下記の【After】がBlogger用に変更した『Tumblrで共有ボタン』のコードです。

【Before】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

【After】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:81px; height:20px; background:url("http://platform.tumblr.com/v1/share_1.png") top left no-repeat transparent;"></a>

このコードをテンプレートに埋め込みます。

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック
2. テンプレートから <div class="post-header-line-1">を検索。
3. <div class="post-header-line-1">の下にコードを張付ける。

Tumblr共有ボタンを試す

Tumblr共有ボタンを押すとShare on Tumblrの画面が表示されます。Basicを選択しているとLinkがデフォルトになるようです。左下の『Create post』でTumblrに投稿されます。

BloggerへのTumblr共有ボタンの設置はこれで終了です。

今日の一曲（２曲セットで）

ザ・ベスト・オブ・セックス・ピストルズ

charaのMy Wayを紹介したときにセックス・ピストルズに触れましたが、パンクというジャンルを知らなかった自分が、初めて Anarchy in the U.K. を聴いたときは、頭の回路がショートし、My Wayが脳内で反芻していました。そしてその後のニナ・ハーゲン、戸川純という、自分の趣向に新しいパターンを生み出すきっかけとなったのです。ザ・ベスト・オブ・セックス・ピストルズには、勿論この２曲も収録されています。音量を上げて空気の振動を感じながら聴いてください。

Anarchy in the U.K. - The Sex Pistols
My Way - The Sex Pistols

Bloggerの表示を最も簡単にiPhoneに最適化する方法

Blogger Touchを使ってスマートフォンに最適化

私自身もBloggerでブログを書いていますが、Bloggerを使ったブログをiPhoneで閲覧していると下記のようにiPhone用の表示に最適化されているサイトが見受けられます。

Blogger Touch オフィシャルブログ

これは、Blogger Touchというサービスを利用して、bloggertouch.appspot.com/xxx（xxxは指定）にリダイレクトさせることによってiPhone用の表示に最適化しています。

Blogger Touchのサービス設定

Blogger Touchのサイトで『Mobile Edition Maker』をクリックすると




Only Three stepsと記載されているように、僅か3ステップで設定することができるとあります。

BloggerのURLを入力

これは３ステップには含まれていないようです。まず自分のブログのURLを入力します。

Step1：リダイレクトさせるURLを決める

Step2：『Add Code』をタップ

Bloggerのページ要素を追加で『ウィジェットを追加』をタップし、ブロガーに組み込みます。

Step3：『Verification』で設定を確認

Bloggerの設定でスマートフォンに最適化

Blogger Touchは、Bloggerを簡単にiPhone用の表示に最適化する方法ではありますが、現時点で最も簡単にiPhoneに最適化するには、Bloggerの 設定>メールとモバイル>モバイルテンプレート（ベータ版）で『モバイルテンプレートを表示する』を『はい』にするだけで、Bloggerをスマートフォン（iPhone, android携帯）に最適化することができます。




実際にスマートフォンでアクセスされた場合にどのように表示されるかは、スマートフォンを保有していなくても『モバイルプレビュー』から確認することができます。下記は、このブログのトップページをiPhoneで表示したものです。




各記事はこんな風に表示されます。




本文中心だけの表示でサイドバーがなくなります。しかし、Blogger Tochでスマートフォンの表示に最適化するとAdSenceが表示されませんが、Bloggerの設定でスマートフォンの表示に最適化した場合には、AdSenceが表示されます。

今日の一曲

My Wayといえば、英国訛りで♪マ～イ、ワイ！とシャウトするセックス・ピストルズ（Sex Pistols）が有名です。このMy Wayが収録されているピストルズのアルバム『Kiss This』は一聴の価値ありですが、iPhoneでインターネットラジオのスォーノ・ドルチェ（Sono Dolce）を聴いていたら、流れてきたのがYen town bandことCharaのMy Wayでした。

iTunesで購入してからCharaのボーカルであることを知りました。彼女の独特の声で切なくMy Wayを歌い上げてくれています。

My Way - Yet Town Band