タグ「Google」が付けられているもの

動かなくなったhtml5slidesを修正する【覚書】

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

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

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 AnalyticsをMovable Typeと連携

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

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

Google Analytics の連携

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

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

Movable Type 6のGoogle Analytics連携を行ってみた

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

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 にアップグレードしました

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

Movable Type 6 のダッシュボード
Movable Type 6 にアップグレード

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

MacのMailでGmailをプッシュ受信する設定(覚書)

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

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

サーバーが対応している場合は IDLE コマンドを使用

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

手動

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

Mavericksの場合の設定

Facebook のいいね!・Google +1・Twitterを遅延読み込みする

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での結果は以下のとおり。

WebPagetestの結果

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>

Page Speed Serviceでテストしてみた

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

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

ページスピードサービスは、自動的にWebページの読み込みを高速化するオンラインサービスです。ページスピードサービスは、サーバーからコンテンツをフェッチし、Webパフォーマンスのベストプラクティスを適用することによって、ページが書き換えられ、世界中のGoogleのサーバーを経由してエンドユーザに提供しています。

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

Page Speed Serviceでテストしてみた

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

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

Google +1ボタンを実装した

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

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

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

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

Google +1ボタンをいじってみた

Google +1ボタンを付けてみようかと検討中。(まだ実装はしていません)

以下のページよりコードを取得して

プラスワン ボタン

カスタマイズをしなければ以下のようなコードとなる。

<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>

ボタンを表示する部分の記述を以下のように書き換えてみた。

<div class="g-plusone">Google +1</div>

サンプルで作ったページがこれ。Untitled

実際にクリックしていただいたのですが、動いているようです。ただし、本当に正常な動作なのかよくわかりません...

メールをGoogle Appsに移行しました

以前から「ドキュメント」「カレンダー」「サイト」は準備は出来ていた。しかしDNSの設定変更・MX レコードの確認で時間がかかるために繁忙期にメールをGoogle Appsに移行することがでなかった。

月初より少し空いたので思い切って、メールもGoogle Appsに移行。

ブラウザからGmailにアクセするのではなくメールクライアントでIMAP受信。iPhoneとiPadの設定も簡単。しかもプッシュで配信してくる。(iPadは11月リリースのiOS4.2でMicrosoft Exchangeの設定が複数できるらしい?)

Page Speedを利用してページのパフォーマンスを改善

最近サイトの構造を変更したので検索エンジン用のsitemap.xmlも登録し直した。インデックスの具合を知るためにGoogle ウェブマスターツールをよく確認するのだが、面白いツールがあったので試してみた。

Page Speed はオープンソースの Firefox/Firebug アドオンです。ウェブマスターと Web デベロッパーは Page Speed を使用して Web ページのパフォーマンスを評価し、改善方法のヒントを得ることができます。

Page Speed

使い方は簡単。FirefoxのアドオンにインストールするとFirebugに機能が追加される。

CSS・JS・画像など最適化し、アドバイスも表示される。最適化されたものはダウンロードして実際に利用出来る。

Page Speed

早速、トップページを最適化してみた。予めCSSとJSはYUI Compressorで圧縮していたので、画像だけPage Speedで最適化。htmlファイルは手作業で空行と改行を削除した。

トップページの合計ファイルサイズ61.7KBとかなり容量が減らすことができた。

お試しあれ...

Webmaster

Blogのタイトルを変更しました。

以前から気になっていまして、Googleで検索すると、「もしかして:Webmaster」と聞き返してくるんです。
神様が言うことは間違いない(?)。英語じゃ「Web Master」とは言わないので、「Web Master」自体が間違っていたんですが…

【Web Master @Style】から【Webmaster@Style】です。よろしくお願いいたします。

Sitemaps 0.90

昨日、クライアントさんとの打ち合わせ中に「YahooでもSitemapsが使えるそうですよ」との話を聞いた。家に帰って調べてみると、インデックスページから通常のサイトマップへlink要素を使ってリンクすると言う事だった。

Yahoo! ヘルプ - サイト管理者向け

すべてのページを検索エンジン用ロボットが巡回できるようにトップページにサイトマップのリンクを設置することをお勧めします。

Yahoo! ヘルプ - サイト管理者向け

ところが

Googleなど3社、Sitemapsをサポート - サイト管理者は要注目

検索エンジン大手3社であるGoogle、Yahoo!、Microsoftは16日(米国時間)、Sitemaps 0.90のサポートを発表した。Web管理者はSitemapsを使うことで検索エンジンに対して包括的でかつ効率のよい自サイトの情報を提供できる。

Googleなど3社、Sitemapsをサポート - サイト管理者は要注目

Validating your Sitemap

<?xml version='1.0' encoding='UTF-8'?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemaps/0.9
         http://www.sitemaps.org/schemas/sitemaps/sitemap.xsd"
         xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      ...
   </url>
</urlset>

<url>...</url>の部分はご自由に...

楽天ビジネス

出展はしていないのですが、一度問い合わせたことがあるのでいつもメールや資料が送ってきて、面倒だと感じながらごみ箱(資料の場合はリアルなゴミ箱)へ直行するのですが、今日はGmailに残っていたので読んでみた。
楽天ビジネスブログと言うものがあるらしい。RSSは1.0なので概要だけで、RSSリーダーだとなんだか良くわからない。

本日楽天ビジネスに登録された見積もり依頼の中から、注目の案件を随時ご紹介します。

ここまでが長すぎてこれ以降の案件の内容が31文字。

何の為のサイトなんでしょうか?RSSリーダーでは意味がまったく通じないブログは必要ない…直接、楽天ビジネスを見るほうが早い。

そういえば、7月にこんな案件があった。

MT(ver3.2)用のSEOテンプレートの作成依頼
【希望イメージに近いサイト】 機能的には↓
http://www.ec-blog.com/adsense/
デザイン的には↓
/mttemp/050/

一件の応募があったきりで締め切られています。

希望イメージに近いサイトはどちらもテンプレート販売サイトなんだから、直接聞いたら?

PageRank

昨日GoogoleのPageRankが更新された様でトップページとこのブログがPageRank 3からPageRank 4に上がっていた。PageRankについては特に意識していませんが、少しうれしいもんですね。

最近、2つのリンク集から相互リンク申し込みのメールをいただき、そのうち一つには以下のような記述があった。

最近Googleページランクも5になり、SEO対策にも非常に有効かと存じます。

PageRankって?

Google の人気の秘密

PageRankは、Webの膨大なリンク構造を用いて、その特性を生かします。ページAからページBへのリンクをページAによるページBへの支持投票とみなし、 Googleはこの投票数によりそのページの重要性を判断します。しかしGoogleは単に票数、つまりリンク数を見るだけではなく、票を投じたページについても分析します。「重要度」の高いページによって投じられた票はより高く評価されて、それを受け取ったページを「重要なもの」にしていくのです。

Google の人気の秘密

しかしPageRankが高いからと検索結果の順位が高いともいえない。

もちろん、重要度が高いページでも検索語句に関連がなければ意味がありません。そのためにGoogleは洗練されたテキストマッチ技術を使って、検索に対し重要でなおかつ、的確なページを探し出します。

Google の人気の秘密

私からの返答メールの冒頭部分はリンクページがWeb標準・アクセシビリティ関連に限られていることをご説明して丁重にお断りする文章を書いていたのですが、書いているうちにだんだんと腹が立ってきたので以下の一文を記述しました。

「リンク集とはレガシーですね!」と...

参考になるリソース:Google の秘密 - PageRank 徹底解説

SageでGmail

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

Gmailには新着メールをAtomフィードで出力する機能がある。これを使えば、Gmailの新着メールをRSSリーダーで高速にチェックできるようになる。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

ただし、GmailのAtomフィードを読むためには、RSSリーダーがAtom 0.3、SSL、HTTP 認証に対応している必要がある。Googleでは推奨のRSSリーダーをサイト上で公開しているが、その中には国産の著名なRSSリーダーは含まれていない。実際にいくつかのRSSリーダーを試したところ、登録が可能だったのは上記のHeadline-Readerなど一部のRSSリーダーのみだった。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

早速、Firefoxの拡張機能【Sage】で試してみることにした。

https://ユーザー名:パスワード@mail.google.com/mail/feed/atom
とSageに登録。テストメールを送信した後にSageの更新チェックを行えば見事に新着メールを取得することが出来た。

Gmail Manager入れてるし、空いた時間しかSageの更新チェックはしないしね...

SageでGmail

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

Gmailには新着メールをAtomフィードで出力する機能がある。これを使えば、Gmailの新着メールをRSSリーダーで高速にチェックできるようになる。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

ただし、GmailのAtomフィードを読むためには、RSSリーダーがAtom 0.3、SSL、HTTP 認証に対応している必要がある。Googleでは推奨のRSSリーダーをサイト上で公開しているが、その中には国産の著名なRSSリーダーは含まれていない。実際にいくつかのRSSリーダーを試したところ、登録が可能だったのは上記のHeadline-Readerなど一部のRSSリーダーのみだった。

ITmedia Biz.ID:Gmailの新着メールをRSSリーダーでチェックする

早速、Firefoxの拡張機能【Sage】で試してみることにした。

https://ユーザー名:パスワード@mail.google.com/mail/feed/atom
とSageに登録。テストメールを送信した後にSageの更新チェックを行えば見事に新着メールを取得することが出来た。

Gmail Manager入れてるし、空いた時間しかSageの更新チェックはしないしね...