html5slidesが削除されたので、Movable Typeのテンプレートで作ったスライドが動かなくなった。チョコっと修正して動くようになったので覚書。

以下よりhtml5slidesをダウンロードする

slides.js・prettify.js・styles.cssを使用する

slides.jsを開き、13行めのパスを書き換える

var PERMANENT_URL_PREFIX = 'http://html5slides.googlecode.com/svn/trunk/';

例えば、スライド直下であれば以下の通り。

var PERMANENT_URL_PREFIX = '';

slides.js・prettify.js・styles.cssをインデックステンプレートに作成する。

インデックステンプレートの「メインページ」23行め、slides.jsへのパスを修正する。

<script src="http://html5slides.googlecode.com/svn/trunk/slides.js"></script>

<script src="slides.js"></script>

Google アカウントでコメントサインインしようするとMovable Type 6.1.1でエラーが発生します。

Google アカウントでは現在 OpenID Connect が使用され、OpenID 2.0 は 2015 年 4 月 20 日以降、ご利用いただけなくなりました。

とりあえずFogbugzにあげています。

Googleアカウントでのコメントサインインエラー

これまでアクセス解析には個人アカウントのGoogle AnalyticsとResearch Artisan Liteを使ってきた。

Movable Type 6からはダッシュボードやloupeでアクセス解析表示できるので、Google Analytics の連携 : Movable Type 6 ドキュメントを参考にGoogle Appsのドメインアカウントで設定した。

はじめの「ページ上部のナビゲージョンから [システム]、ウェブサイトあるいはブログ を選択する」をGoogle API Consoleで探しMovable Typeのダッシュボードと気づくまでに時間がかかったり、GoogleのUIが変わっているので少々迷う

サイトで利用しているMovable Typeの設定は簡単に終了したが、デモ用のテーマなど385個ものブログのトラッキングコード張替えは大変。2日がかりで完了。データは正しく取れている模様

Google Analytics のユーザープロファイルを設定すると、ダッシュボードの [サイト情報] にウェブサイト / ブログのアクセス統計グラフを表示する事ができます。

Google Analytics の連携

Google AnalyticsのUIが変わっていたので少し迷ったけれども、Google側で設定。Movable TypeでClient IDとClient secret を入力してみるとエラーが出たので「Authorized Redirect URIs」を正しく設定するとエラーが消えて設定完了。

バナーフッターモジュールに<$mt:StatsSnippet$>を追加。意外と簡単でした

当サイトで販売しているMT6テーマのバナーフッターモジュールには<$mt:StatsSnippet$>を記述していますので、上記設定を行い再構築すればすぐにデーターを取ることが出来ます。

後回しにしていたこのサイトとブログをMovable Type 6 にアップグレードしました。

折角なのでGoogle Apps のドメインメールアカウントで Analystを設定しようかと思い作ってみましたが、表示が遅くなりそうで思案中...

Gmail（Google Appsのドメインメール）をMacのMailで使用している。iPhoneのGmailアプリと同様にプッシュを受信する設定を行なった。

環境設定の「アカウント」「詳細」タブで「サーバーが対応している場合は IDLE コマンドを使用」にチェックを入れる

Mountain Lionでは「一般」の「新しいメッセージを確認」を「手動」

Mavericksの場合は「自動」にします

modern.IEのサイトに参考になる情報が掲載されてました。

Web 標準に準拠したコーディング | Internet Explorer の検証がより簡単に | modern.IE

20番目の「重要ではないスクリプト (Facebook のいいね!、Google +1、Twitter など) 遅延読み込みする」

自分のページがソーシャル ネットワークで人気を集めることはだれもが望みますが、ソーシャル ネットワーク用スクリプトは、サイズが大きくなりがちで、ユーザーへの応答に時間がかかる原因になります。ページが読み込まれるまで待機してからこれらのスクリプトを要求すると、ページの応答時間を短縮できます。

「これらのスクリプトを要求」をそのまま利用してみました。

Why loading third party scripts async is not good enough

Loading third party scripts async is key for having high performance web pages, but those scripts still block onload. Take the time to analyze your web performance data and understand if and how those not-so-important content/widgets/ads/tracking codes impact page load times. Maybe you should do what we did on CDN Planet: defer their loading until after onload.

Facebook のいいね!、Google +1、Twitter のボタン用コードを削除して、以下のコードを</body>直前に追加。（アプリケーションIDはFacebookのアプリケーションID）

<div id="fb-root"></div>
<script>
(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.src = url; js.id = id;
      fjs.parentNode.insertBefore(js, fjs);
    };
    load('//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリケーションID&xfbml=1', 'fbjssdk');
    load('https://apis.google.com/js/plusone.js', 'gplus1js');
    load('//platform.twitter.com/widgets.js', 'tweetjs');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>

WebPagetest - Website Performance and Optimization Testでの結果は以下のとおり。

Facebook・Twitter・Google+のスクリプトは1.596秒のDocument Complete以降に読み込まれています。

結構いい感じになってきたようです...

12月4日追記：js.async = true;とPocket・Pinterestを追加したので以下のようになっています。

<div id="fb-root"></div>
<script>
(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.src = url; js.id = id; js.async = true;
      fjs.parentNode.insertBefore(js, fjs);
    };
    load('//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリケーションID&xfbml=1', 'fbjssdk');
    load('https://apis.google.com/js/plusone.js', 'gplus1js');
    load('//platform.twitter.com/widgets.js', 'tweetjs');
    load('//widgets.getpocket.com/v1/j/btn.js?v=1', 'pocket-btn-js');
    load('//assets.pinterest.com/js/pinit.js');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>

9月30日に以下のURLよりGoogle アナリティクス リアルタイムの早期申込を行った。

https://services.google.com/fb/forms/realtimeanalytics/

本日利用できるようになった。

ただ、現在Google AppsのアカウントではなくGoogle+で使っている個人アカウントなのでChromeだけでログインすることになる。

Webページ高速化サービス「Page Speed Service」が発表されました

Page Speed Service is an online service to automatically speed up loading of your web pages. Page Speed Service fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google's servers across the globe.

Page Speed Service Home

訳すると以下のような感じでしょうか。

さっそくテストで使ってみました。

CSS spritesやgzipなどには対応させていたのでかなり「イイセンイク」のではないかと思っていましたが、Page Speed Serviceを利用した場合には、トップページの表示完了までの時間を0.78秒短縮ができるらしいです。

表示速度を全く考慮していない状態だったら、かなりの効果があるかもしれませんね。

結局、Google +1ボタンを実装しました。

昨日の記事に少々カスタマイズ オプションを追加してあります。

<div class="g-plusone" data-size="small" data-count="false">Google +1</div>

Googleのサービスは8月以降、バージョン7以前のIEはサポートされなくなります。Google +1は既にサポートされていないようですのでGoogle +1をご利用される時は、IE8以降やその他のブラウザをオススメします。