Windows10、Windows Server EssentialsやPowerShell、Azure、Office 365など小規模企業で活用できるMicrosoft製品やトラブルシューティングに関する情報ブログです。
http://www.microsoft.com/ja-jp/download/details.aspx?id=10550
今頃になってGoogle 2段階認証プロセスを行いましたが、予想どおりWindows Live Writer 2012からBloggerへ記事を投稿する事が出来ませんでした。
今回は、Google 2段階認証プロセス後、Live WriterからBloggerへ記事を投稿する方法をメモ。
なお、Surface 2のWord 2013 RTからも同様の手順で投稿出来るようになります。
Surface 2のWord 2013 RTでの設定になります。
画面左上の[アカウントの管理]からパスワードを変更すると投稿できるようになります。
Google Apps ステータスダッシュボード上記Webサイトに掲載されているサービスは今日現在では下記の通りになります。
2011年の記事「bloggerの記事とTwitterを連携させてPV数を向上させよう！」を投稿後、FeedBurnerを一度離れ他社サービスへ移行しましたが、最近になり移行先サービスの不安定さが目に見えるようになったため同様のサービスがないものか調べてみました。
さて、どれをチョイスするかな・・・
普通に考えればFeedBurnerのSocialize機能を使う方がいいんでしょうね。BloggerもFeedBurnerもGoogleの1サービスですから。
とはいえ他社も使ってみないと良さが分からないので、今回はBloggerやTwitterだけでなく、DropboxやEvernoteなどを含む60チャネルで相互連携可能なIFTTTをチョイスしてみました。
サービス名IFTTTはIf This Then Thatの頭文字をとっており、ThisとThatは各サービスになります。
各サービスのアクションをしているすることで、ブログ記事を投稿→Twitterへ自動投稿を実現してくれます。
上記スクリーンショットを見ていただければ分かりますが、Feedのチェックは15分毎。
Twitterfeedは30分だったので、どっちにしてもこちらの方がよさそうです。
以前「Blogger 今まで書いた全記事をサイトマップとして設置してみた」という記事を書きBlogger記事をサイトマップ化できるJavaScriptをご紹介しましたが、当ブログを閲覧されたユーザさんから特定の環境でサイトマップページを閲覧するとセキュリティソフトが警告を発する！とのコメントをいただきましたので、仮想環境で再現性があるのか試してみました。
結果、再現性ありましたので内容と対処法をメモしておきます。
いただいたコメントは下記の通りです。
上記環境でBloggerのサイトマップページを表示すると下記のようなURLマルウェアをブロックした内容の警告画面が表示されました。
開発者のデモサイトでも同様です。
検証した結果、原因は
Avastの誤判定
もしくは
外部サイトにあるJavaScriptのファイルURLをマルウェアと検出
の2つが考えられます。
下記は対処前のサイトマップを表示する流れですが、2のファイルURLを変更した事でAvastの警告メッセージが表示されなくなりました。
<script src="http://nasunoblog.blogspot.jp/feeds/posts/summary?redirect=false&max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
上記で対処法を書いてしまいましたが、もう少し詳しく対処法を書くと
JavaScriptのファイルURLをsites.google.comに変更
します。
<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
↓
<script src=”http://https://sites.google.com/site/nasunoblog/contents/sitemap.js”></script>
ただ、この対処法は一つのやり方であって、推奨できるかどうかは判断できません。
自分が開発したJavaScriptファイルではありませんから・・・
なお、上記以外の対処法？として
Avastのアラートを無視する（こういう事があるよとブログ内に書いておく）
という考え方もありますが、閲覧しているユーザにストレスを与えますので私ならこのやり方は選択しません。
長々書きましたが、Bloggerでサイトマップを表示する手段としてJavaScriptを使っているユーザさんは少なくないと思います。
対処する一手段として参考にしてもらえれば幸いです。
海外サイトで提供されているBloggerテンプレートを解析して時に「これは賢いな！」と思ったヘッダー部におすすめ記事を動的表示する手法をメモ。
本当は、おすすめ記事の動的表示をBloggerの標準機能として提供してくれれば嬉しいんですけどね・・・
説明ベタなので、画像を使って今回の概要を説明します。
上記画像は私が管理しているBloggerサイトです。
ページ一覧ガジェットの下に「Top Stories」欄があり、おすすめ記事が4個並べていますが、おすすめ記事の静的表示はXHTMLとCSSの知識があれば可能です。
しかし、静的表示のため修正作業は[テンプレートを開く]→[タイトル・リンクを書き換え]・・・と、頻繁に修正する場合はちょっと大変です！
正直、やりたくありません！！
そこで、動的におすすめ記事を表示させるか？をテンプレートを紐解いて説明したいと思います。
Hồng Hòa Viさんが作成されたBloggerテンプレート「MetroBTK - The Metro UI Blogger Templates」を簡単にですが解析してみました。
なんちゃってエンジニアの私がいうのもなんですが、テンプレートを解析するのは非常に勉強になりますよ。
今回の内容をご自身ブログに適用するには
の知識が必要です。
Bloggerのサポートページでも説明されていますが、特定ラベルのフィードを取得するURLは下記のように記述します。
上記URLはhotラベルにしていますが、登録済みのラベルに変更してください。
下記画像は実際に特定ラベルの全記事を取得します。
記事はsummaryのため取得データはそこまで大きくありません。
実際におすすめ記事として表示させるわけですが、下記画像のようにstart-indexパラメータを切り替えることで記事の取得位置を制御します。
例えば、3番目の記事を取得したい場合は
http://xxxx.blogspot.jp/feeds/posts/default/-/hot?start-index=3
とします。
ちなみに、私の環境ではxxx.blogspot.comだとフィードが取得できなかったのでxxx.blogspot.jpに変更しました。
Hồng Hòa Viさんのテンプレートを解析してがすごいな！と思ったは、Bloggerの標準機能のみでおすすめ記事を動的に表示している点です。
初期設定は[レイアウト]画面から行えますし、新規記事におすすめ記事ラベルの貼れば動的にヘッダー部が変化します。
勉強がてらに導入してみてはどうでしょうか。
あけましておめでとうございます！
本年も宜しくお願い致しますm(_ _)m
新年1発目のブログ記事は、当ブログ記事を翻訳するためのウィジェットを配置したので、手順をメモ。
直近1か月のGoogle Analyticsを閲覧した時の話。
[ユーザーの分布]→[地域]を見ていたところ、全訪問数の1~2%は海外からのアクセスでした。
私自身、海外サイトを閲覧する時に「翻訳が簡単にできればいいな・・・」と思っていたので、「自分のサイトくらいは翻訳ツールを載せておこうかな」と思ったのが動機です。
1~2%のアクセスは無視！という考え方もありますが、何となくですが無視してはいけない層ではないか？と思っています。
Googleの翻訳サービスをよく使用していますが、今回はマイクロソフトの翻訳サービス「Microsoft Translator」を使ってみました。
↓
翻訳語、文章にカーソルを当てると原文が表示されます。
ここらへんはGoogleの翻訳サービスと同じですね。
翻訳結果を見て思ったのが、[管理人の茄子です]→[janitor eggplant]はうけますねｗ
やはりAuthor名はもう少し考えないと不味いですね。
海外の人がみたら「何で茄子やねん！」という話になる訳でして・・・
IE 10 での閲覧時に Blogger ブログが応答なしになるのを防ぐ方法-クリボウのBlogger Tips
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
↓
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
edge モード : 使用可能な最高のモードでコンテンツを表示するよう、Internet Explorer に指示します。 Internet Explorer 8 の場合、これは IE8 モードに相当します。 Internet Explorer の今後のリリース (仮定) でより高度な互換モードがサポートされる場合、edge モードに設定されたページは、そのバージョンでサポートされる最高のモードで表示されます。 これらのページを Internet Explorer 8 で表示した場合には、依然として IE8 モードで表示されます。
久しぶりにBloggerのテンプレートをカスタムしました。
スマートフォンなどモバイル機器は「いつでも」「どこでも」必要な情報が得られますが、ディスプレイサイズが小さいため記事が見にくい・読みにくいデメリットがあったりします。
Webデザイナーの方は美しさと一緒に可読性の高いサイト作りを行っていると思いますが・・・
今回はBlogger記事の可読性を向上させるカスタマイズ方法をご紹介。
簡単ですので、是非やってみてください。
最初にカスタマイズ前後の結果を見てください。
| カスタム前 | 行間 大 | 行間＋文字 大 | ||
 | → |  | → |  |
行間を開けるだけで可読性は上がりますが、文字が小さいと自然とディスプレイに顔を近づけ、目が疲れます。
そこで、文字サイズも大きくするとさらに可読性が向上します。
Webサイトはコンテンツ内容で勝負ですが、見にくいサイトはユーザに敬遠されますのでユーザ目線でスタイルを変更されることをオススメします。
スタイルシートのmobileクラスを探して、赤字のスタイルを記述します。
/* Mobile
----------------------------------------------- */
/*↓記事本文の行間および文字サイズを大きくします。*/
.mobile .entry-content{
line-height:2em;
font-size:1.4em;
}
/*Hタグなども上で追記したスタイルに引きずられてしますので、font-sizeおよびline-heightを編集します*/
.mobile h4{
background-repeat:no-repeat;
background-position:8px 50%;
background-color:#2288bb;
margin:1.3em 0 1em 0;
padding:.5em;
color:#fff;
font-size:1.3em;
line-height:normal;
}
パソコンでBloggerのモバイルサイトをチェックするときは
http://ご自分のURL/?m=1
と赤字の部分をURLに追記しましょう。
幅が広すぎですが、下記のように表示されます。
