C# & JavaScript

Blogger に オリジナルデザイン の "google pulus one(+1)" ボタンを設置する簡単な手順をまとめます。 Googleさんはカウント数を取得する方法を提供していないようなので、 Yahoo! の YQL (Yahoo Query Language) を利用させていただきます。

オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。

テンプレート の 編集手順

1. 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 font-awesome はアイコン表示だけなので、不要であれば含めなくても問題ありません。 jQuery は非同期にシェア数を取得するのに利用しているので必須です。

   <header>
     ...
     <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     ...
   </header>
   

2. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 シェア時に URL と タイトル を埋め込むように作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='plusone-share-button btn-social' expr:href='"https://plusone.google.com/_/+1/confirm?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
       <span id='plusonecount'></span>
       <i class='fa fa-google-plus' />
     </a>
     ...
   </b:widget>
   

3. bodyの閉じタグ直前に以下のスクリプトを挿入します。 シェア数を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

     ...
     <script type='text/javascript'>
     (function () {
       var url = '', query = '';
   
       url += window.encodeURI(window.location.href || '');
   
       query += 'SELECT content FROM data.headers WHERE url="https://plusone.google.com/_/+1/fastbutton?hl=ja&url=';
       query += url;
       query += '" and ua="#Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.89 Safari/537.36"';
   
       $.ajax({
         type: 'GET',
         url: 'http://query.yahooapis.com/v1/public/yql',
         dataType: 'xml',
         data: {
           q: query,
           format: 'xml',
           env: 'http://datatables.org/alltables.env',
         },
         success: function (data, textStatus, jqXHR) {
           var content = $(data).find("content").text();
           var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
           var count = (match != null) ? match[1] : 0;
           $(document.getElementById('plusonecount')).text(count);
         }
       });
     })();
     </script>
   </body>
   

参考記事

• たき備忘録 - Google+のシェア数をJavascriptで取得する方法

関連記事

• Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法
• Blogger に オリジナルデザイン の "tweet" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "share" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "はてぶ" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "pocket" ボタン を 設置 する 方法

Blogger に オリジナルデザイン の　Facebook "シェア(share)" ボタンを設置する簡単な手順をまとめます。 （残念ながら Facebook "いいね！(like!)" ボタンはうまくできていません。。）

オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。

テンプレート の 編集手順

1. 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 font-awesome はアイコン表示だけなので、不要であれば含めなくても問題ありません。 jQuery は非同期にシェア数（いいね含む数）を取得するのに利用しているので必須です。

   <header>
     ...
     <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     ...
   </header>
   

2. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 シェア時に URL と タイトル を埋め込むように作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='facebook-share-button' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank'>
       <span id='facebookcount'></span>
       <i class='fa fa-facebook' />
     </a>
     ...
   </b:widget>
   

3. bodyの閉じタグ直前に以下のスクリプトを挿入します。 シェア数（いいね含む数）を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

     ...
     <script type='text/javascript'>
     (function () {
       var url = '';
   
       url += 'http://graph.facebook.com/?id=';
       url += window.encodeURI(window.location.href || '');
   
       $.ajax({
         url: url,
         dataType: 'jsonp',
         success: function(data) {
           $(document.getElementById('facebookcount')).text(data.shares || 0);
         }
       });
     })();
     </script>
   </body>
   

参考記事

• Hello API - Facebookのいいねボタンのいいね数を取得するAPI

関連記事

• Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法
• Blogger に オリジナルデザイン の "tweet" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "+1" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "はてぶ" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "pocket" ボタン を 設置 する 方法

Blogger に オリジナルデザイン の "ツイート(tweet)" ボタンを設置する簡単な手順をまとめます。 オリジナルデザインにすれば、モバイル対応もできるはず… 具体的にはアイコンの大きさ、色、形、位置等が自由に作られるようになります。

オリジナルデザインのボタンを作成する場合、ブログテンプレートを直接編集することで作成します。 具体的には、Bloggerの管理ページへログイン後、[テンプレート]-[HTML の 編集]で編集できる ブログテンプレート に対して直接変更を加えます。 以下の手順では、ブログテンプレートのどの部分に対してどのように変更を加えるかを記載しています。

テンプレート の 編集手順

1. 前提として必要な外部ファイルは jQuery と font-awesome の2種類です。 headerの任意の場所へ以下のタグを挿入します。 font-awesome はアイコン表示だけなので、不要であれば含めなくても問題ありません。 jQuery は非同期にツイート数を取得するのに利用しているので必須です。

   <header>
     ...
     <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     ...
   </header>
   

2. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 ツイート時に URL と タイトル を埋め込むように作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='twitter-share-button' href='"https://twitter.com/share?url=" + data:post.url + "&amp;text=" + data:post.title' target='_blank'>
       <span id='tiwttercount'></span>
       <i class='fa fa-twitter' />
     </a>
     ...
   </b:widget>
   

3. bodyの閉じタグ直前に以下のスクリプトを挿入します。 ツイート数を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

   <script type='text/javascript'>
   // twitter の ツイート数 を取得、表示する
   (function() {
     var url = '', href = '', location = window.location;
   
     href = location.href.substr(0, location.href.length - location.search.length);
   
     url += 'http://urls.api.twitter.com/1/urls/count.json?url=';
     url += window.encodeURI(href);
   
     $.ajax({
       url: url,
       dataType: 'jsonp',
       success: function(data, textStatus, jqXHR) {
         $(document.getElementById('tiwttercount')).text(data.count || 0);
       }
     });
   })();
   </script>
   

関連記事

• Blooger に オリジナルデザイン の ソーシャルボタン を設置する方法
• Blogger に オリジナルデザイン の "share" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "+1" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "はてぶ" ボタン を 設置 する 方法
• Blogger に オリジナルデザイン の "pocket" ボタン を 設置 する 方法

現在、イベントログには大きく2種類あるようです。 「Windowsログ」と「アプリケーションとサービスログ」。 ここでは古くからある「Windowsログ」の出力方法をまとめます。

イベントログの種類

上述した通り、イベントログは「Windowsログ」と「アプリケーションとサービスログ」の2種類があります。 このうち Windowsログ はさらに、大きく3種類 ＋ カスタムログ に分類されます。

イベントログの種類

• Windows ログ
  • アプリケーションログ
  • セキュリティログ
  • システムログ
  • カスタムログ
• アプリケーション と サービス ログ
  • 各アプリケーション または サービス ごと

※セキュリティログは読み取り専用

ログレベルの種類

Windowsログのログレベルは EventLogEntryType に定義されます。 具体的には、以下の5種類が設定できます。

• Error
• Warning
• Information
• SuccessAudit
• FailureAudit

イベントログ出力のサンプルコード

イベントログを出力する場合、EventLog クラス を利用します。 …が、あらかじめ イベントソース が実行環境に登録されていないと正しく動作しません。 ここでは、イベントログが登録されていなかった場合でも自動で登録してしまうサンプルコードを記載しています。 あらかじめ登録しておく方法は こちら に記載しています。 ちなみに、イベントソースの登録には管理者権限が必要なので、以下のサンプルコードを管理者権限なしで実行すると10行目および12行目で例外が発生します。

using System.Diagnostics;

public class Program
{
    public static void Main(string[] args)
    {
        var source = "SampleApplication";
        var message = "Test App EventLog message sample.";

        if (!EventLog.SourceExists(source))
        {
            EventLog.CreateEventSource(source, string.Empty);
        }

        EventLog.WriteEntry(source, message, EventLogEntryType.Error);
    }
}

Windows の イベントログ を出力しようと思うと、あらかじめ "イベントソース" を登録しておかなくてはいけません。 ここでは、その "イベントソース" の登録場所と具体的な方法をまとめます。

目次

• レジストリ登録する場所と内容
• レジストリファイル（.regファイル）で追加、削除
  • イベントソース を レジストリファイル(.regファイル) で追加
  • イベントソースを レジストリファイル(.regファイル) で削除
• バッチファイル（.batファイル）で追加、削除
  • イベントソース を バッチファイル(.batファイル) で追加
  • イベントソース を バッチファイル(.batファイル) で削除

レジストリ登録する場所と内容

イベントソースに関する情報を保存する場所は、レジストリの以下の場所 (AppName) になります。

HKEY_LOCAL_MACHINE
  SYSTEM
    Services
      Eventlog
        Application
          AppName
        Security
        System

上述の場所に保存される、イベントソースに関する情報は以下の通りになります。 "必須"は、私がたぶんそうだと思う…というものなので参考にしていただければと思います。。

レジストリファイル（.regファイル）で追加、削除

イベントソース名「SampleApplication」を追加、削除するレジストリファイル（.regファイル）のサンプルコードを以下に載せます。

イベントソース を レジストリファイル(.regファイル) で追加

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\EventLog\Application\SampleApplication]
"EventMessageFile"="%SystemRoot%\\System32\\mscoree.dll"
"TypesSupported"=dword:00000007

イベントソースを レジストリファイル(.regファイル) で削除

Windows Registry Editor Version 5.00

[-HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\EventLog\Application\SampleApplication]

バッチファイル（.batファイル）で追加、削除

レジストリファイルと同様にイベントソース名「SampleApplication」を追加、削除するレジストリファイル（.regファイル）のサンプルコードを以下に載せます。 バッチを用いて追加または削除する場合、バッチを管理者で実行する必要がある点に注意してください。

イベントソース を バッチファイル(.batファイル) で追加

@echo off
cd /d "%~dp0"

rem イベントソース名
set APP_NAME=SampleApplication

rem 完全キー名
set ROOT_KEY=HKLM\SYSTEM\CurrentControlSet\Services\EventLog\Application\%APP_NAME%

rem キーおよびサブキーを追加
reg add "%ROOT_KEY%" /v EventMessageFile /t REG_EXPAND_SZ /d "%%SystemRoot%%\System32\mscoree.dll" /f
reg add "%ROOT_KEY%" /v TypesSupported /t REG_DWORD /d 7 /f

イベントソース を バッチファイル(.batファイル) で削除

@echo off
cd /d "%~dp0"

rem イベントソース名
set APP_NAME=SampleApplication

rem 完全キー名
set ROOT_KEY=HKLM\SYSTEM\CurrentControlSet\Services\EventLog\Application\%APP_NAME%

rem キーごと削除を実行
reg delete "%ROOT_KEY%" /f

参考記事

• MSDN - Event Sources
• @IT - コマンドプロンプトでレジストリを操作する

バックアップし忘れて痛い目にあったりすることがあるので、チェックリスト と バッチ を自分用にメモ書きとして残しておきます。

Windows で バックアップ といえば、 xcopy を使ったバッチ処理がお手軽で便利だと思います。 ですが…ここでは、xcopy に限らず robocopy コマンドでのバックアップも、そのサンプルコードを記載しています。

目次

• 全件 単純コピー
• 日付ごとにフォルダを作って指定フォルダをバックアップ
• 日付と連番を付与して指定ファイルをバックアップ
• ミラーリング

全件 単純コピー

おそらく一番想像しやすい、基本となる xcopy の サンプルコード です。 同じ場所にバックアップするのであれば、更新分（差分）のみ処理されます。 一応補足ですが、"更新ファイルのみ"とはいえ、初回はすべてバックアップされ、以降は差分のみバックアップ（上書き）されるコードになります。 注意点は、バックアップ元でファイル削除しても、バックアップ先は削除されない点です。 完全に同じ状況にしたい場合、ミラーリング を検討してください。

@echo off
cd /d "%~dp0"

rem ----------------------------------------------
rem バックアップ元ディレクトリ
set SOURCE_DIR=D:\data

rem バックアップ先ディレクトリ
set TARGET_DIR=\\SERVER\backup\data
rem ----------------------------------------------

rem バックアップ処理（xcopy）
rem   /D:月-日-年   指定された日付以降に変更されたファイルをコピーします。
rem                 日付が指定されなかったときは、コピー元の日付がコピー先の日付より
rem                 新しいファイルだけをコピーします。
rem   /E            ディレクトリまたはサブディレクトリが空であってもコピーします。
rem   /C            エラーが発生してもコピーを続けます。
rem   /I            指定されたコピー先が存在せず、コピーするファイルが複数の場合、
rem                 コピー先をディレクトリとしてコピーします。
rem   /H            隠しファイルやシステム ファイルもコピーします。
rem   /R            読み取り専用ファイルを上書きします。
rem   /K            属性をコピーします。指定しない場合、読み取り専用属性はリセット
rem                 されます。
rem   /Y            既存のファイルを上書きする前に確認のメッセージを表示しません。
xcopy "%SOURCE_DIR%" "%TARGET_DIR%" /d /e /c /i /h /r /k /y

exit

日付ごとにフォルダを作って指定フォルダをバックアップ

xcopy を使ったバックアップに少し手を加えて、日付ごとにフォルダを作ってバックアップします。 また、一定日数より古くなったフォルダは削除する処理も含まれています。

@echo off
cd /d "%~dp0"

rem ----------------------------------------------
rem バックアップ元ディレクトリ
set SOURCE_DIR=D:\data

rem バックアップ先ディレクトリ
set TARGET_DIR=\\SERVER\backup

rem 保存期間
set STORE_DATE=10
rem ----------------------------------------------

rem 日付を取得
set DATE_STR=%date:~-10,4%%date:~-5,2%%date:~-2,2%

rem バックアップ先
set TARGET_DIR=%TARGET_DIR%\%DATE_STR%

rem バックアップ処理（xcopy）
rem   /D:月-日-年   指定された日付以降に変更されたファイルをコピーします。
rem                 日付が指定されなかったときは、コピー元の日付がコピー先の日付より
rem                 新しいファイルだけをコピーします。
rem   /E            ディレクトリまたはサブディレクトリが空であってもコピーします。
rem   /C            エラーが発生してもコピーを続けます。
rem   /I            指定されたコピー先が存在せず、コピーするファイルが複数の場合、
rem                 コピー先をディレクトリとしてコピーします。
rem   /H            隠しファイルやシステム ファイルもコピーします。
rem   /R            読み取り専用ファイルを上書きします。
rem   /K            属性をコピーします。指定しない場合、読み取り専用属性はリセット
rem                 されます。
rem   /Y            既存のファイルを上書きする前に確認のメッセージを表示しません。
xcopy "%SOURCE_DIR%" "%TARGET_DIR%" /d /e /r /y /i /k

rem 古いファイルの削除処理
forfiles /P "%TARGET_BASE_DIR%" /D -%STORE_DATE% /C "cmd /c rmdir /s /q @path"

exit

日付と連番を付与して指定ファイルをバックアップ

指定したファイルに対して「ファイル名 + 日付 + 連番 (filename_YYYYMMDD_NN)」という名前を付けてバックアップを行うバッチです。 連番は被らないようにファイルの存在チェックを行って若い番号を振るようにしています。

@echo off
cd /d "%~dp0"
setlocal enabledelayedexpansion

rem ----------------------------------------------
rem バックアップ元ディレクトリ
set SOURCE_DIR=D:\data

rem バックアップ先ディレクトリ
set TARGET_DIR=\\SERVER\backup

rem バックアップするファイル一覧
call :BACKUP "ファイル１.txt"
call :BACKUP "ファイル２.txt"
rem ----------------------------------------------

goto :END


rem --------------------------------------------------------
rem SET_TARGET_FILENAME
rem バックアップ先ファイル名を生成、TARGET_FILENAME へパスを設定
rem   引数  なし
rem --------------------------------------------------------
:SET_TARGET_FILENAME
  rem 日付を取得
  set DATE_STR=%date:~-10,4%%date:~-5,2%%date:~-2,2%


  for /L %%i in (1, 1, 99) do (

    set NUM=%%i
    
    rem 連番の生成（= カウンター数値を0埋め）
    if %%i LSS 10 (
      set NUM=0!NUM!
    )

    rem バックアップファイル名の生成（= 元ファイル名 + 日付 + 連番）
    set FILENAME=%~n1_%DATE_STR%_!NUM!%~x1
    
    rem バックアップディレクトリ + バックアップファイル名
    set TARGET_FILENAME=%TARGET_DIR%\!FILENAME!


    if not exist "!TARGET_FILENAME!" goto :EOF
  )

goto :EOF


rem --------------------------------------------------------
rem BACKUP
rem 指定されたファイル名をバックアップ
rem   引数1  バックアップしたいファイル名
rem --------------------------------------------------------
:BACKUP
  rem バックアップ元ファイル名を設定
  set SOURCE_FILENAME=%SOURCE_DIR%\%~1

  rem バックアップ先ファイル名を設定
  call :SET_TARGET_FILENAME %1

  rem COPY [/D] [/V] [/N] [/Y | /-Y] [/Z] [/L] [/A | /B] 送り側 [/A | /B]
  rem      [+ 送り側 [/A | /B] [+ ...]] [受け側 [/A | /B]]
  rem 
  rem   送り側    コピーするファイル (複数可) を指定します。
  rem   /A        ASCII テキスト ファイルとして扱います。
  rem   /B        バイナリ ファイルとして扱います。
  rem   /D        受け側のファイルが暗号化が解除されて作成されるようにします。
  rem   受け側    新しいファイルのディレクトリまたはファイル名 (複数可) を指定し
  rem             ます。
  rem   /V        新しいファイルが正しく書き込まれたか検査します。
  rem   /N        MS-DOS 形式以外の名前のファイルをコピーするときに、利用可能な
  rem             らば、短いファイル名を使用します。
  rem   /Y        受け側の既存のファイルを上書きする前に確認のメッセージを表示し
  rem             ません。
  rem   /-Y       受け側の既存のファイルを上書きする前に確認のメッセージを表示し
  rem             ます。
  rem   /Z        ネットワーク ファイルを再起動可能モードでコピーします。
  rem   /L        送り側がシンボリック リンクの場合は、送り側リンクが指し示す
  rem             実際のファイルではなく、リンクをターゲットにコピーします。
  echo %~1 → %FILENAME%
  copy %SOURCE_FILENAME% %TARGET_FILENAME%

goto :EOF


:END
endlocal

ミラーリング

初回は全ファイルバックアップなので時間がかかります。 2回目以降は差分のみ処理されます。 また、バックアップ元でファイル削除するとバックアップ先も削除されます（ミラーリング）。

@echo off
cd /d "%~dp0"

rem ----------------------------------------------
rem バックアップ元ディレクトリ
set SOURCE_DIR=D:\data

rem バックアップ先ディレクトリ
set TARGET_DIR=\\SERVER\backup
rem ----------------------------------------------

rem ミラーリング（robocopy）
rem   /MIR :: ディレクトリ ツリーをミラー化します (/E および /PURGE と
rem           同等)。
robocopy "%SOURCE_DIR%" "%TARGET_DIR%" /mir

exit

JavaScript で 指定した数値を 0埋め (0パディング) したい時のサンプルコードを掲載します。 書き方、やり方はいろいろありますが…桁数固定はしたくなかったので、オーソドックスに実装してみました。

/**
* 指定した数値を、指定した長さに、0パディング した文字列を返します。
*
* @public
* @param    {number}    number      0パディングしたい数値。
* @param    {number}    length      最終的に出力する長さ。
* @return   {string}    与えられた数値を0パディングした文字列。
*/
paddingNumber = function (number, length) {
    var source = String(number);
    var count = length - source.length;

    if (count <= 0) {
        return source;
    }

    while (count--) {
        source = '0' + source;
    }

    return source;
};

多分、二分探索ちっくなのや、桁数固定であれば substr とか… いろいろコードの工夫の仕方はありそうな気がします。

参考記事

• ShanaBrian - 数値のゼロ埋め（桁を揃える）
• You Look Too Cool - JavaScriptでゼロ埋めする方法
• You Look Too Cool - JavaScriptでゼロ埋め
• JavaScriptプログラミング解説 - ゼロパディング (zero padding)
• ToDoDODO - JavaScriptで数値のゼロパディング（一定の桁数にゼロ埋めする）

JavaScript で 空白 を トリム（trim、削除） する方法は、何種類か考えられると思いますが… 結局、どの書き方が良いのかわかりませんでした。 そこで、この記事では、"処理速度" という観点で、その方法がよさそうか調査してみました。

まぁ、結論から言うと「ブラウザ毎に違った」という結果でした。。 メインとなるユーザー層が良く使うブラウザで最も速いコードを選ぶ必要があるかもしれません。

JavaScript で 空白 を トリム する コード (測定対象)

var trim1 = function (source) {
    return source.replace(/^\s+|\s+$/g, "");
};

var trim2 = function (source) {
    return source.replace(/(^\s+)|(\s+$)/g, "");
};

var trim3 = function (source) {
    return source.replace(/^[\s]+|[\s]+$/g, "");
};

var trim4 = function (source) {
    return source.replace(/^\s+/, '').replace/\s+$/, '');
};

処理速度 測定方法

テストデータは、アルファベットをランダムに並べ替え、0～26の文字数をランダムに先頭から選択し、前後に0～5文字の空白を付加して生成させる文字列を1000種類、準備、利用しました。 測定は、前述1000種類の文字列のトリム処理を、1000回実行する時間を測定しました。

測定環境は、手元にあったブラウザが Chrome と IE だけだったので、その2種類で計測しています。。

var testdata = ["pcwlqogmkyatbs ","  nkahkyifdsurcmweg    ","    ragkbtpjuqoimhysewfc   ","fkuiohblvrqmdtcpwzgnaksyj ","  qmpkgfcunevwlbtjkai    ","  gukcpsrtqhmf    ","   dneqylcfpzsr ","   lenktysc ","uwazqfokldhtkjpe   "," slmtecfdjkoazhpwvrnkgb ","  il","ikhofzluwnqaky  "," ajiweubkpk   "," z   ","   mcibrfogpklaezj    ","  nfmdhalbcjkuvzwoqespygt   ","wvqgylzjcmkrudnahtkosie ","    kzcjptu   ","  rdekzgbmohfajkycu ","  cfogymuvikhpbajzdknslqwte  ","    ktnjwmasqlkuhv   ","    gjqlrbhvdmfcapkuot","    bwomrqutdpglsvj  "," asiqwczyjtfogrpbnlhuekm  ","    djmopk    ","    hvcateslyjw   ","   sjkan   ","   ikwpfstubjraomdlg    "," i","   hqngdusbyltmfvziaeckk   ","gfisblywujrhkvqat   ","   qabwmekvcyfghp ","optsrnmgfhaykq  ","   olhvnifuywk  ","    nrtkbzywi   ","smqkdvi    ","   ulpbzjefdkyaqsgnc   ","  zsvwdlnkjuoc    ","   mesaginuhftkpcvjbdzo    ","   ","    urti  "," zhy ","    fyp ","    swdgnkzupjqerymt","    kdeq  ","rvnhimkedwlgzfskoatq   ","  zbwelvunriqjyhka  ","  ykhfersbctiwunmjqko ","dvpgwz","  wmilp  ","vaotehbzuqjikylmsprcn ","    hjqndgwlouzc  ","dkrkw    ","   jcpyrkihbdk    ","rvwzioacflmq","    bh    ","   vdnzac  "," ntewkzsqblpjyfiur ","   wqdbpna   ","   fzkmdtcnegobqhyas ","  gbdytjwpkq  ","  ejnhq  ","   ehkazigbtnsfmcvjylukop  "," khnvu    ","   kmiyd ","    bknwjahfgkirsey   ","   lrkyi ","    opjdkknfqzyiacstl","tgasyqwmufrcnebopjidlkkzv  ","  svwyuakomkfjdnhgli","   dngjpzyvkwqb    "," pfizomrwjsluknbevgt","vgjznodkcihesrwkmatu ","   wyteihupbjlrodsaz ","   gmfjnqacdlkhwpoitu","    sbwdpnlgqrao   ","    itrpw ","   fjz ","   lvrfiobhnpmgkzaktdeqwj "," plu    ","   lbiutqhm ","nsekhrvckjmabfiydqgzpt"," ojulgsiahmterqzvynbkkw"," dlrsitc ","   ke    "," cnjgkythiaw ","   iculvbnr  ","khpgckvlodwfnteabmrqji   ","   plcmjqwfdnztuibo    ","uh    ","azpty   ","  gsk"," qu   ","  gkkclepovrihqyfdnumzwsabj  ","  jpz   ","eqohipcurvzkyjsbwktga","   svdwjebycklpraqfgukoht   ","    wnbvkuico ","   msltpowki  ","    lqyjkasktrezf   ","  fclauhogeikynd","   b   ","fzstyaqhwulemid  ","zjsdbmftkwlk","    galvtpwezkmhsucdnrofki   ","  nphecawkkvzfl","  ywhzvfjuplcrdgonqmkbtask    ","    kobhdterkvacnsijuyglq   ","  ","    ","  bavfewgmjqhcknkopisyd","    jmurofwpasktvlzcnbehg   "," ehqjndtzvmpg    ","    wqcg ","   qkgzsurhjktencvd","    iewhg  ","  bmyijkcslgnphrq","    tfksnympchkuldzwar "," rykhvkdmbtoeszufiqa ","    woncjdkfamhkrusvpi   ","  ejbuzmnoyckftpagdwr   "," mlipvcjwhatgrdb ","  tnewvgfkauojclsiyzrm   "," aiohnscwkqprzj    ","    wmva ","    v","   emvzhrulkjdfkgsobwtaqi  ","l  ","  ajhitfm  ","   ilrf "," jpmshkkevfq ","  ih   ","   mwrlisnchapeg  ","  qkobzkangcmiwpetjdhvly   "," vedcngkskhyqrjazwm  ","  bgevloipj    ","  zwhd    ","   yawkpzcvfudklb   ","    hekmfjuqskvnwi"," fionhywukpdjqkczgaeltvrm "," uescfbawgrkvnidytmpho    ","  uelhqstvojpgdmk    ","    obkufvymwgiensjlzaprh ","   jkbtpqvzflwredsokghn   ","fpydneil","  gofycmrw "," netacsfqlubovkr    ","    kzavm ","grbejhuq ","   uiveyjnt    ","  cozwnekv    ","  cmspoklkuahqbgzwjfn   ","    seikczthvnamfdwlgboq   ","   rpvmiqugdlzyakbosnj  ","      "," zkvsaplfdmounrwycgjq ","   da    ","  eqav ","   lfnp   "," jktnge","    i ","jqyukvinblhwfdzoepgakcts   ","    skleydavpfonbquzktrgw    "," qsktlonvk","  ikuhdvkq  ","   hrmkl   ","  juh   ","  rlhjobkq","   mbkihotnseqcwlrupaz  ","  qwabngkpsvjlcftemhzkoy  ","   ojnq    ","kkj "," qaofdelryhckztmbjkugs   ","  wckualfspoqytbjigh ","pwljkvebdagrqzmfytcs ","   dvityakfkbslprcgmwjquhz","  zhwgkv   ","avtqugoydirclnbjspk   ","ihkpbqlnzwmkadfycvoestujr","    ksahfdlyutcqjzowgpiebmnv","  panzoigjhsvwdefmuyklt  ","hkvpjbsyudifl ","  y   ","   yvpuqdekzcnkjogmahisltrwf  "," ybkjirkhodguqsvep  ","avidkfbugnw ","  johgmkbtdina ","    l  ","   cvswkop","   ajchfyzoiknsptvk ","kfdheqgluvsbyzmtjapcwkr  "," fjgpquctzkhbnmorsa    ","    ypgekzvahfmocj    ","wkacikpgemlyvoqfbhzjr","gwtbi    ","obspdti  ","  fywzkkjusnbmridvtploqcg   ","   qakj   ","  pkhokjsbmrdyaitflu","    vomlafeujqsdpcibkyg ","    fjpql   ","    yvfwargceukntjlomksdbhp    ","zadrmvkchtwlspekbyj    "," qbyersdnia   ","  umenzjlcgbtvkrisaqydwfho    ","      ","   riboykplfqhuvdkwjnezcgas","   koblgfusyczhdnkqejtpvmriw","  iscgdvuqrjkat    ","   a ","    puwcrslmkafdhqzkoe   ","  srz    ","lthzfgvi  ","    ihndrvufbajz   ","  vgkfhurqjk","btwclfkqogui  ","   hmnitqzcdjylwpkrgobveska "," zvlgyufsknwjh ","    dgmc   ","ikvn "," ktyihcejalnwdpvkm   ","stlcbwjpmdv  ","  gwilteafbnmkhsropkqyjuzvd    "," efcrwlasdomkvgtkh","  kmlueiyr    ","  eq  ","   wnkvlrteybmjgfhkapiuzoc   "," zikhujwvkrqtsaopdfbyl    ","    nwkiglbzacfhome    "," snktdapyr","zlgjksaowyftdukncmbep ","   vrhjcfwnlzyqdbka    ","  ikwqhmplfotcnbygadzrv  ","    ph  "," uiakczvty    ","    soqhptvujibamcfkkynwrzel","mpqcdwz","zlhvitrkaokcbjeyf  ","    ou","    trqzfbcsgvopludwmkiekj ","  lncibmrozdgpuwtfykqj   ","ghzblojwvdrqemckayts   ","    ri    ","   hfqjaknury   ","      "," rtpqcheofk  ","    byzjpitohlmrkn    ","    ","    gkshwtvckomnpiujeqrd    ","   oakjwilehdk    ","eumljriv ","   bruahngzweoykjsfcm","   jpewqthrsglfuvkozdkm ","yimnpogvjwhqztkrfebcldu   ","    kzeoqudarbpmj","   ufbpaviqkkswljey   ","    kwarlpobchnedzfqjum   ","qszlhekywnajcifdvtk  "," rfejdzuqwhlpoi   ","gmdpozukvafetbchlwsqyrjni   ","   pydgbtkoclnsqjzamer  ","tvugnwzb "," dlfreqpiwkz ","  knsclvzeuyw","  flediabk   ","   cwnsliyjqkurtzgodv  ","    kmnafdoyzlqpbhk  ","  tjkosd  ","    sylqebunkrgw","mwczhjfqot","vpbescomkdtrhakynjgfiqz","    rokihn   ","   arysklhc ","klunjmqovfwgr    ","ruokiknjhapdszybwvmlfce   ","  qvkaenlo ","f ","   o   ","    sj    ","   leavibfqwymsn","jbiazlvmnchtfkeko   ","  f  ","     ","  mefk","qvleifhcymkagopkjnwubs    ","rbmqkondltsvgjhczuwi","  v  ","ifqb","    qnjkbpgehzo   ","    gzwfdcpmt  ","   icz","   rlckobyu    ","    gezlrtwfqyabksjdhonckpui   ","  ymujckpafbrstdlhievgk   ","  ydfbvcshqnrgakm  "," bsfzvhgckdjruitlqo   ","    maqrjzkgpcoftuvlhdsekwi  ","uygizdpovtj","  mfsvjryboiahckzqdunk    ","  damnzgck","    ghv ","kuitqbcgkweylfardom   ","ruzqgfsvilyc    ","   duqajwolkckyesvfm ","vghr  ","  vtughojpecnm   ","uvtojmnire","    hainy   "," matkusjlowczkdphrifnq    ","    pfqlkakuyswcmvi"," lnducvsygoprhk","uytakvjnroz ","uaijeyqt    ","gitw   ","  kqhrvmefijnladkcbwsgotzu ","    ifaz","ncyqfrkuvlmpjwaozikdtebs    ","blwamokrcqtziednvfjpkhug   ","erwkbdik  ","  mhgpbslfjdrkn","tepjsrmkcayzfnwogkv    ","  oaekwmisjrkbhfvc","   rjlcmbnqyksgwpvdoahfzet  ","     ","kvsmbzfenoigwlru    "," bglvfy   ","   yn "," tfjildzspecukmobvwnqgyakh  ","vkbcazpsfginho  ","rhuq    ","  kea   ","mtgyaoewhfdkjrnq   ","ukn    "," k    ","   kyhicudqlbjanpkgsotrzmwfv","   klfwmghojuci "," ftelpjrok  ","  rkawnpuj"," kgetkfjb   ","    myljcagozsdtnfuh    ","    a   ","    faletcnvmr","    emjqpuwvngatfdyblsh ","  ulofrykhikgc  ","  zmngwhpkcitladfeqysrb "," yqbucisozathgvpdekrk   ","  yeodwztfqk ","   huoigqjsmfrvbkpk    ","btkshwyfpjvulqnodzmgiea  "," enqylbokjikzsrtgucdvh","","   nebqawikouftmvgjzypldks ","   hatfozjrvspiuqkm"," hcgayotplwdrjfzvebkumkins   "," aplqkwmoucsfke  "," dhimla    ","  hamfnkpozleivuysk","  jkptmqokzbesucwfvdirnyha ","  kzqrj ","    zg  ","  alvputrqkmwbgfdcnkeyhjzs  ","   gjwuzvahqldepmsrkbnfokyc","  emqdknygfwr    ","    ehf","   bkuzfktiwvc    "," w  ","   eucjsqgfpywtzonkvmklaid  ","  niohsdzeujkalqkympt  ","knikzd ","  ms"," vhsrtqkpk    ","  zbsedoktilyngjura","    bfowzkchdrqveulgamiyjsptk ","    oepjnywbmqckg","  akeqhoulv   ","tjkqlcevhokfprgymudwzbian"," zltdswpmega"," uirdpgcqhnm ","  akrh   ","  ichsbnrmyzavwt   ","    talbndphcrkveq   ","   kjfoyilpdmrhb ","   jtezwpkybvdmgursql   "," vqukpytz  ","  ayrkegljwfhoknvpqdibtzcsm "," hkditbcukgnewqlazr    ","okduhakcgyrnpizjeblqt ","  mvjpfko ","  zpsfrjmakngohyw    ","   rbwkhzviecgqkjmoyflus    "," dwjfmrnezyhocvuslbka"," ogk    ","  sfegd   ","   bcntlydwkqefkvupjgoia ","  unjzwcdklkrahsqigepyobt   ","   hlacripbokfnyjevqkszwug    ","   kyqczmrslikvgjntpfwba  ","   faktrgmdqocwesvnpjiu "," tvyqcalfnib  ","engohzsiacflq ","   kmeqrbifjcuotld    ","  krtybmcpalfeokuvwnzhiq  "," lcyzrkkejmb    ","mlabgtrhko    "," "," kolyqkhrte   ","   fatosczermk  ","   tanfie    ","cmisp   ","   kiydsewqzjh    ","  ndzmvfrg    ","   jfrug   ","    hltozimuk ","    tfyakzsgou  ","  qnpr ","  kvlduhqey ","lcsjpknekyfiohvrgb ","kkaqdlmwynzfocrpiebstujh    ","  gkodfyiuzr   ","    khogklirv","    uojw   "," mqkndizrcphgyveuakl","    eorkpiydzqa"," vbpmwjknkoaglyisuecrtf ","lwkipfthvmnadr   "," nogaklvkrqwyiuztf    "," gqjdrwhzkblopnc","  tpnczskragbewmvf  ","    mrgqyjfzsuhic    ","  kktsicqgelnrdozmbwpyfhuaj  ","   yobpev  "," edkymcgspzfkwqajhuon  ","  lbgnwckathrqmfyzekuospi ","   hcu    ","       ","   hujcgimysaflkzrqtbdvwk ","kuf","    jvoyw "," grkavonlybmctze    ","    gczwnbvpfmeqkdrhjskail   ","   cphmtnyfkbqkjervla    "," yjelhkvtbqkzcnismfawpgrod  ","mfd ","  stcfd    ","   ey   "," nbjrksdhzqpmwctlkovgyefia    "," os   ","   wosctaebfqmuilyjv   ","    fgkhtbinywokc    ","    ekihmdua ","  bkpw ","lvse ","    dfe "," zcof    ","  rtdlkikswgonqevh ","   hjopunwsiftzyk","   tg    ","jfakmqlbvurzntswhygcpkiod ","  bvrhqgaeocwjzsfkdynikltu  ","  rj ","    epvmtjfcuhl   ","jbdqhefzlturkcgpyvsiakon ","    wmskgpftbvylzeiaoqjdnkcur","  liwtrea   "," zsvknqpghalwky    ","  zfequymdawibjcgnotvlkrshk","   vkyqrwuopkaiegbmt ","  ehzws  ","   ep    "," zvbfkqtgcj  ","  yjigmokbwtzcfsr ","bjuasltvdkkqwonef    ","  smuchyqdwnvi   ","  syikmjolvfhcenqbwgdra  ","  zmtusknqjayd   ","   jnvotqluwk"," iodqhfgnytkbvwzpculek   ","      "," pjwcl    ","  qolnmjkwuhfpvte ","jhtfbezsqdwaupgvkly  "," fspzdoqrye ","ruvhzdlgq","   bokmlvqkndsyihfzrtapge    ","zvmek ","dtc    ","hjvisyd    "," ","        ","zihyjbemkdpvufo"," ","     ","    ehltnikfboad  "," drgalmicjynzesvwoptquhfbk    ","  kfvetdniqcojlbusmparh  ","vmfqizjdo  ","   brqupvdekkfacwj ","    quwy  "," kpvakbimuyqwjtf   ","   svrjgtobzymqnf   ","   vetcjgkaydzlhk","ubphaqwi","  wodbygtvklnmfchsipa    ","   db   ","  qfjkkacnuriyetbldz   ","   nzueairpvdhbclmtkqfgkos","  kqocjinkrdpv  ","    o","   jswzkptncaqomy","  jhtdsizegpvlnmufkycqor    ","    kufbrzosdj ","kzhqevnt","   lrdfukjhegmvznyw "," okjrswf  ","    imltvqyoa","nezdmcvf   ","whtgcpznflsuoibmkyejd ","   ","vkicgruedmqs  "," ehldpwtvizjkmoauqbkfn"," av    ","   wvl   ","  pfrucemk   ","   umyjbzrkatlogcnwidkvq "," cmrybujlkkapz","  jpswl ","    bwpv  "," eqkhzprub   ","    hsekdpcazrboyimjnlgw","   tduynklhepcisfo","zukbkie","esynotkdbjvwfrg","  uclz","lam   ","  ewoqzlmkgjnp    ","   raqhpkvmtusnicegwzfy   ","dfgqkpzwrebcvy    ","  ","gdfmlibntjzopqaery   ","    huonm    ","    iagolqtwp  ","  jhlqktdzrpw","    izmkjbwhlykcr    ","    ckzmbtuhyvlrpiaoj","tmkcakpjv"," fdcqnwibprljzgykvakuhso   ","  fvoytupdrsknmilwza    ","   ikevtonrfaucmkdsqwyj","    "," iurcjkklvzmywdpoabnfetqgs","btywsrkdpfqhcemnkv ","   zlobjrshmnugwfyviptcqd    ","ptbzrdnofawjgeskkcyh  ","    ltgrikwnfyaupvjqcdsh","   wey  ","   cnjbzokqegmyvklsd ","  ","rlgvuiaeb","    yezibuqfo   ","     ","    rdhzglbnwuoksetqiyfajcpvm    ","    frc   ","   oziefcgwaybjdku  ","   gyocrbqshil   ","    pqytr   ","   mpwisveafnkyuoqclb  ","   qczmfdkiyneavtglwbhkjsour  ","   svmkjuribctypazqkdeoglnhf","   tezhskrcdiavfmkwyonbug  "," nudkwymolazpgikecbvqt","  hrknmwdezk  ","  svtkemgjhfdr"," lfpar  ","  toywakdsu    ","topbhnvfesrijym    ","  pdweqmkubilvjk","    kpncwgsuktoijbhdfy  ","  wqhjoailpvtebfrmznkygdcku"," dojlkmiczhr ","  eaiuf ","    ","zuwkmpvaegqhdynrbktji    ","  tkfwljardshuimgcqzp  ","   hgwbmidautljfn"," cstihdarbeyz "," cegbpwyrkokusmqlndiztv","    ejiwvhgn","   uvqieptlcbhjagkyfmdw    ","   oh   "," jgcoiqzbavfkuslknprwdty   ","  gekdwhoirv"," keunpqmbivsoyjzk","    rcqjtzfd    ","  okurkmdjlihbwz ","vjkcsktwgar ","  jhtrik    ","csafrkomlpdtuhveqynbg ","  hydqjzkbucntfargksvipel  "," bcmpowndiavrkfylqeusjh"," abmz    ","   pyzkeodcfbrutvn","   jgvolkpnzhekyqarbmuidsfw  ","cblpazyqkfgkrnmuwesthvoij    ","kdatgzoemuilnsqyv  ","   ouwtimclp "," qgvs","    piqeaof "," wqsmikflaovzepbkhunygdt   ","    ","hlkdkwremszayitvqf ","    dqstbrnygm    ","   dunwkjymtkq","    kjuyhisdtk  ","  b    ","  pisndocaqmz    ","    lfrgyaeoknpdbu"," nwgblmhyfuscievzkoqrkjpta","  plhmgozajc"," suirwegtjkhyoknl ","omftjqhrylps   ","   hzvbiefqatgku  ","   sjivrkadutpmewcnbfzkgl    ","  ypz ","    ","  gfudnkijkcp  ","    jnyzwstmhiqackr    ","       ","wvusqmyrbnfdaclzpgjhkkit    ","etibdfackujglqk   ","    bkwutkelmfiapyvzjsq  ","  kiahwcndqorbu","niqzcjtlgrwep    ","  feoutzsdbgjarkcyhi  ","ysozcltgvmihfukrpqenj    ","  swehzymparuin   ","  "," iankuesvpqlhtdzmbkwgroc","   gudqky   ","  nfwviyezctoglmusq","    kslfprtivhjumwnzeqbcdao ","    qzov ","    ktzkebhnglijcpqwyvf   ","    erkbshgtl   ","  ybtoajfw    ","  r    ","  ioygmtv","   pcwrtlvodezqfjnksakigy   "," huzrk  ","    ajzkgybidulf    ","  nkjqolgskebcfpyrai  ","  tiacml ","  qkoywclfnre","    whiaysg   ","  svpz   ","   jvrhwgycklzmtdoibps","  livoswjcndgekhzrtkb","   jtzapgsdwkcmkqre   ","   kugojtlhryqbiazn","  cilpamndrkqz  ","    brdfsymuwip   ","    afkbcjqmluv","    ","   prjofwsazbktgiykvhle    ","    yohzrgvdimjkflecstk  ","  fkigwolkqhjv "," cpgbvlyikesw  "," hkuk    ","kmcdkusthzgjly "," uezlkyhpo ","  aqbzumfygljdtpwsrnkhkev ","    emaj    ","    kiudayfvhecplbnw ","  zaegdcyvtpjhkmqnulfo ","    hrwimdpgv","   crhgaeilsypnfqtwdjbvozk ","   "," fkhtom "," eitokmfwpdkugnr","   uvicewrnhbagz   ","   palt "," dkkmlochtaiebgvjqnwsyzu  ","   jcyatswnudlhekgz ","  dinkzmcgkqvpwb   "," qlyimeowbjvshngkfzrct ","dyuzewntlifsrqkvkmb","      ","  s","jhtakdwlqfcnigvsmrzyebpu   ","mus  ","wdsiekrv  ","   dvkywbhiftnrm   ","  ypiet    "," m    "," shtdkivzanq  ","    qywgpbovjkt  "," kbcdalkotfyuh   ","kfewktjguazyqlrmoh ","    onyiecprzqgaft","   hieqscdbt","    gkvctiwezfnjklar   ","   ozlrdbcfgyhtna ","   arfcgmjytioekbzwlspkdqvhu    "," yofmptjwrevlgsakcbkziuqh ","   bdqmoeklahjfctwnpuvr  ","vsypknfcmuwjehgtbqkrilaoz  ","  mhurzywtnv ","    gkjfmatnbcl  ","   hizgbqkkyrlmenucdv  ","    gvstulpwijbr ","   "," famkgrcineolbdwpjqvu    ","   tkuiyzqrbnspfawvkmjgceoh  ","   cvnrqjyazwbiftukgklmhped   ","  ebfw ","    grokevtjbasclhwnfpkzymi    ","    kmnlvodftapbz    ","  aqnhzvwjyortgslbkfipmde    ","    lkbkdfzwcjiayhqvstoner    ","   nt","   idg   ","   pojqcwetaizyn ","  nvslfe  ","    mzkrehlfnd "," gvotecahuirqzmpkbnydks   ","  tdmlnigehs    "," pkjiswnomgfyvbak","    vgnrsoupajmdy   ","   oyeilapnkvwjcgqdhr    ","  hirckjylg    ","tvczkiredakwg","        ","  ephzrnbyitkdm "," vctknokbjp   "," zd ","    nksytgdpuowcqmrble "," hfugveajidlynts"," vkzlkjsumdeg    ","    nkzpmfjyiqecabdgwtlhvr","   wybgukqmnozlpt","    ujstkvzrihygwn    ","  ugknmpe ","   umzjrowldpcktbfg   "," zfkcpsbjyokq   ","   qakyrhptbvw  ","  wurcgjnkloemvdkzfhyqp    ","    gfaishyzewlnc  "," tnsklirz    ","   qawpmkfdgsilzecnbrotkuv  ","   hcbnepdkuvokmaqryfji   ","  hqtejfobapnvdkl   ","  gutslncjpzwor ","    cahtvkrbkfjlsyzmiwupg  "," piuhkzjgfcsmkeqtawvl    ","    tdfuwn   ","gzkfivjeulpqa","   yajhlqpwcn  ","    lmqbgwcdekpvas","  mqibksvapklfod    "," kqzjvafcodlpsmnihrut    ","    lkzemhrwsdfopcjyq    ","  jczyvnkthospad   ","ekhoiksu  ","   metsdof    ","    r ","  nsokudiyfmpeha  ","    kdyehza  "," wifk ","   qzgclbvykepdrkwojitufh   ","   fomsrkpagzitlujnyvchbkw","nwurpgtzsymlaedf"," tezipufqrohwgmadsjlcb    "," ejivfgpmsulrych  ","    qajpzgonuckesvtlybhi","    bhitnsuqmelgvjafyp   ","    n   ","      ","    vukkiwfobdjgnyq ","    jvkbzlsir"," kun ","  brmasdqykjifeukohvz    ","  wgrvpoulbmdetfqycank  ","  ilhjgntyawecr    ","   juqzm    ","   arcisy    ","   bhtdqrsifpouleyknc ","rhikcbygsw    ","    dpcntseiq  ","  oynltfkecphbugiqjwksrzad"," iszwnkmgopkatqur ","   tnkvwzjodasbei","   hja   ","    lmvtdcbpsh   ","  anbw  ","    geqobrickztjwdpvlfsam    ","   upwto   "," sqodrvb  ","  rimvbdpukkjeqfazo   ","      "," sbaglwfthezkqpuckynirojvm    ","    gpkutejzfbiyrkhwvsola "," bkfzdaktml   ","    jpqedguzvofmastkwkcnibylh   ","  kyunzdwirhojmpgstabevl  ","  wikljuzvtograkc   ","  sqkpuoldjitbnrkhvmwgzaye    ","   yrqzbgpuiaf "," epchazrqnswfimk  ","   ntkrzlpog  ","ehlytawqpvcdjigk  ","       ","    odi","doakvghpljwifrnstmeqbukc "," gfremhnvywdsqokbc  ","  bnzkrmcfqkuhj ","   lhms  ","a","  arzem   "," cohakmfrjszpyqln ","   qznwpurjskky  ","  kohjungq  "," reliskg"," fwlgsyomkqebzuchdvn"," ztnqcuekwyfmapgkhij ","dyuhkip","ocf ","      ","rjcbkm   ","  vmtgdpharow"," pngybkr    "," iordwez   ","glmnweyzptakcidhsobkvqjrf   "," lzcehp    ","   lkadnzocvumt "," nwgylpdiorhekqbuk","   bwqadokchunfl ","tgkrqzhjbs    ","oifwbhmtkrsgc","    mnewckkhaz","  cjphqsdwanoe ","waldjifusy  ","tmqukyokrvdwljah ","    asdvrtkulcm  ","noafyvkqwushtgzemk    ","sakredvlbfmtgk ","ilywkmnogtpjvuhzrdke   "," pnlaz  ","japftbhyivcwrdnzskmoqgul  ","  apckdyufbqtim ","   crwykpdzqineahb","bmjtgqficvul   ","    dcsqzrnhvalgbokftyjwiukep    ","   otikpd  ","      ","  dsbzthfrlingakveqcmwoup    "," kiljbzhfomskwprcd    ","eywrhojlacvskqm   ","ilfqvztjokhrbucnmskew    ","  grectzsmvnkludqbfyj   ","aputzrvidmwfkqybeckh","   s   ","   rwjdkokhf  ","   jbdaqskozkpecw   ","  metwkycgvoujrlhkbqa","    tywfn  ","   kakt    ","  kbhj    ","jmywohfpdtbecngks","lqn  ","sqjlhgzvcd","dyvhgunzoeq   ","  pcsijeguhortazyn ","gufqwhe    ","  avft  ","  kknj","    stpqmwykcofguvjzdkbn   ","   uwnvskmpqhz  "," mahirkyde   ","rfkuht    ","   dypgwlmrvtkisuczfb  ","    vetohmwfj  ","tozyqagrhdkmknwp    "," gtykqpmjknrlwbvzfehsuadc","   tnqzuye "," lqfv  ","    ysek   "," emdfp    ","  rhpkiuj   ","daocbevlguynfqtipjhkmzsk  ","    aiodmspjtcqgvrhulkkez ","    iuzklfrokesdw","   jwnlyvrtcqigmkzufbapkdesh  ","  pj    "," kqfmaveucrh "," uvt  ","    mqhp    ","  omtdpkejiyvhasfcnqk    ","     ","    zwbnldrkyip","ukkdnbhro   ","m  ","    evsidqakpmgyozkr ","   fuovrlkwqshpdcbjmeyatki    ","   hflwemagoyku","inlkrqmouhfdcyvejkgzbtp    "," s  ","   hmdfsjarvnc ","  sqczorakmlidygkevfuw","    okhzrngsfdvepkuqc   ","c   "," klyesrpakjnhqgdimuztwvof  "," jfngidlqsktovc    ","  zbtjenkl","mstzbejokkfrpailunwghqyv    ","   sarwknzdj","    ypwboj","   hovkd   "," ekutrplnzswamdbho","  lwajro","  gzu  ","    o    ","zqksevdn    ","   ocmrkfjezapsythl  ","   urmk"," dgk ","  ktqwfkjobzchepdsna","  caqrwdbsjguoknfpkm   ","    iug    "," cka","  igynouzwlet   ","  ewz   ","    vjwst   "," ie   ","dtnfevzwkumj ","    jaeokzlwtbvqrngmfk","   pardtsoeq","  pl ","    opmngdtulqcjvibfykh    ","   nkqd"," rafkiplmhyjd","  gcl","  r ","    t  ","    tbldqysjrcefhzouwgmk ","omcz ","   ezfhrkbtnpjucmvdi    ","   uejpmilbqgksnzdchwtfakv    ","  krzocpdfiqsevjybuag   ","    zovgejkknqfrimyd   ","   jpzodqewmlfkk","rnvlzcfmkueitahpgk "," zgfkihrdkbtwem  ","  kewzcp"," kkidltqcp  "," kmjewtiuqdor","   wcayskivfopzjr   "," kjo  ","sdtm    ","  buognvzpyiweqltjac    ","   tpoakufyqkimvsedgwhj   ","    besunhgotrzmpfilcyd   ","   hmgikzqypflbnwdva    ","rtqlchvbzdy  ","   bjwmosfvet   "," fmhvdjzytqipsrnok   ","   rzicpdkyqskbw","    iyskmnbegpjcwfukdr    ","    z "," jezbqnlpr    ","hesovcfrukwbjniaqtdlykg   ","nkg    "," gjtpekmovu    ","ilwafngvbuy    ","    rckkopuqnfheimjvlt ","z ","  ytovk    ","   sdclrfkzhtjbnipvwemqygkua ","    lfdarhostwvupikjcnbzmyeq","    rqygutkpaioekblmwvfzs  ","   qknoiryztbfguvpldjkwesahm  ","yrloabumncdskwgi"," cia   ","  n   ","    ug    ","zd","bketajpmodcvyhsrigzuflnq   ","   lmistbwfypnkvrazkcoqjghu   ","   csgbdtnzhuwyelrkqpivjafm  ","jnhkrleboavgwyqimfstp","  rkjfsg  ","ilvkmbesqapdt   "," akgpb  "," bvwslujfzncrtahkyqdeigkmo   "," rqdokpfvealbtkguyjsc    "," gaen ","  gdmlikfykuzcbqhtej  ","    sgbekzrqtouwvmpyidkjh  ","cwehbmpjvfrk  ","   jqm   ","    retukmlkqdyancgfh "," gavylzbwnkdsqmko"];

処理速度 測定結果

まとめ と 考察

冒頭にも書きましたが、結局、ブラウザによって結果は異なりました。 ただ…使うなら trim3 か trim4 が良さそうな気がします。 本当は Firefox、Safari あたりも調査したいところですが… また、時間ができたらということにしておきます ( ^ ^ ;

参考記事

• ににしふぁくとりー - 入力された文字列に含まれる空白文字を削除する
• Enjoy Blog - Javascript で trim するには
• MIURAN Buisiness System - JavaScriptでtrimする

配列を ランダム に シャッフル する アルゴリズム は Fisher-Yates法 というものが有名なようなので、それを JavaScript 向けに実装してみました。 元々の配列（Array）を拡張する方法、jQuery を拡張する方法もあわせて掲載しています。

Fisher-Yates法

Fisher-Yates シャッフル は Knuth シャッフル としても知られているものだそうです。 最初の考案は 1938年 にもさかのぼる古いもののようです。

基本コード

まずは純粋に基本となるコードを掲載します。 これを元にした、配列(Array) の拡張、jQuery の拡張は後に記載します。

/**
* 指定された配列を Fisher–Yates法 で シャッフルします。
* （注意：引数に渡した配列自体をシャッフルします。）
* @param    number[]    arr     シャッフルしたい配列
* @return   number[]    シャッフルされた配列
*/
var shuffle = function (arr) {
    var i, j, tmp, length;

    for (length = arr.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = arr[i];
        arr[i] = arr[j];
        arr[j] = tmp;
    }

    return arr;
};

配列(Array)の機能拡張として shuffle メソッド を追加する方法

配列自体を拡張したい場合、上記のメソッドを Array のプロトタイプへ設定すれば可能となります。 いわゆる prototype拡張 といったところです。 配列を引数として取らない代わりに、this を利用しているところがポイントです。

Array.prototype.shuffle = function () {
    var i, j, tmp, length;

    for (length = this.length, i = length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        tmp = this[i];
        this[i] = this[j];
        this[j] = tmp;
    }

    return this;
};

jQuery の プラグイン として shuffle メソッド を追加する方法

jQuery に shuffle メソッド を拡張する場合、プラグインとして機能追加します。 具体的には以下のようなコードになります。

jquery.shuffle.js

(function (window, document, $, undefined) {
    $.fn.shuffle = function () {
        var i, j, tmp, length;

        for (length = this.length, i = length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            tmp = this[i];
            this[i] = this[j];
            this[j] = tmp;
        }

        return this;
    };
})(window, document, jQuery);

ちなみに、上記の jQuery.shuffle を利用して、リスト（li）をシャッフルするコード(HTML と JavaScript)は以下のようになります。

<ul id='list'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

$('#list li').shuffle().appendTo('#list');

参考記事

• PandaNoir - Fisher–Yatesアルゴリズムがすごかったです。
• @IT - ランダム・シャッフルがランダムじゃない！

Blogger で 関連記事を表示する 方法がもう少し簡単にならないかと試行錯誤した結果…結局作ってしましました。 実装は JavaScript で Google Feed API を利用しています。

関連記事表示モジュールの設置手順

1. メニュー から [テンプレート] を選択し、 [HTML の編集] を開きます。
   

   

2. <b:widget type='blog'> の子要素で <b:includable /> の並びに以下のコードを追加します。
   

   

   <b:includable id='related-posts' var='post'>
     <div class='RelatedPosts'>
       <p><h2>関連記事</h2></p>
       <div id='blogger.relatedposts.label'>
         <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>
       </div>
       <div id='blogger.relatedposts.output'></div>
     </div>
     <script type='text/javascript'>
   var RELATEDPOSTS_SETTINGS = {
     BlogURL: 'garafu.blogspot.jp',
     MaxResults: 5,
     TitleVisible: true,
     ThumbnailVisible: true,
     SnippetVisible: true,
     NoThumbnailImageUrl: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmgOsf9Jh-vnNhFSlUR7rTZe2p93Va3Ne9Avj8RDs5EZG9eFXFnIAfh0ViFbNn7CevhHsD-3eXnl8eT4bwYbP1gRpIB5QmuoAFBC4gPwoEDn5-IhJMN11ejrmifQghsUSHa2S17NsT0Y/s1600/noimage.png',
     NoRelatedPostsMessage: 'No Related Posts...',
   };
     </script>
     <script type="text/javascript" src="//www.google.com/jsapi"></script>
     <script type="text/javascript" src="//garafu.github.io/blogger.relatedposts/release/0.0.1/blogger.relatedposts.min.js"></script>
   </b:includable>
   

3. 以下の設定を変更します。
   

   BlogUrl

   Bloggerのドメインを設定します。

   MaxResults

   表示する最大記事数を設定します。

   TitleVisible

   記事タイトルを表示するかどうかを設定します。

   ThumbnailVisible

   記事中最初の画像（サムネイル）を表示するかどうかを設定します。

   SnippetVisible

   記事の最初の本文120文字程度を表示するかどうかを設定します。

   NoThumbnailImageUrl

   ThumbnailVisible=true のとき、記事中最初の画像がない場合に表示する画像のURLを設定します。

   NoRelatedPostsMessage

   関連する記事が見つからなかった場合に表示する文字列を設定します。

4. 関連記事を表示したい位置に以下のコードを追加します。 ここでは、本文の直後に挿入することにします。
   

   

5. 保存して公開します。
   

   

ブログ記事を確かめてみると関連記事が表示されると思います。 CSSの設定がないので、任意に設定いただければ良いかなと思います^^

ちなみに、記事最初にあるようなスタイルで表示するには、以下のCSSを利用していただければ表示できます。

.RelatedPosts {
    margin: 5em 0;
}

.RelatedPosts h2 {
    padding: 10px;
    color: #222222;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2em;
    margin-bottom: 6px;
    text-transform: uppercase;
    border-bottom: 1px solid #D3D3D3;
    margin-top: 5px;
}

.RelatedPosts ul {
    list-style-type: none;
    margin: 0 !important;
}

.RelatedPosts .item-content {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
    -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
    box-shadow: 1px 1px 2px 0 #d0d0d0;
    border-radius: 4px;
}

.RelatedPosts .item-thumbnail {
    float: left;
    margin: 0 5px 5px 0;
}

.RelatedPosts img {
    border-radius: 10px;
    padding: 3px;
}

Blogger の テンプレート を変更したとたん、 LightBox(ライトボックス) が動かなくなってしまいました。。 解決策をいろいろと探し回ったりしたのですが、よく見かけたスクリプトを挿入する方法ではうまくいきませんでした… そこで、頑張ってテンプレートを解析してどうにか直したので、その方法をここへまとめて記載しておきます。

修正手順

1. ライトボックス 設定 の 確認 と 修正
2. テンプレート タグ構造 の 確認 と 修正

おまけ

• そもそもの原因って…

ライトボックス 設定 の 確認 と 修正

（おそらく、この設定は有効だと思いますが…） この手順は念のための確認です。 そもそものライトボックス設定が無効であっては表示ができないので、ここで確認しておきます。 この設定に問題ない場合、次のステップへ進んでください。

1. [ダッシュボード] から [設定] を選択
   
2. [投稿とコメント] を選択
   
3. [ライトボックスで画像をアピール] が "はい" になっていることを確認
   なっていなければ "はい" にして [変更を保存] します。
   

この部分は、他の方も記載されているので、詳細画像は割愛します。。

テンプレート タグ構造 の 確認 と 修正

LightBox(ライトボックス)が使えない原因はタグ構造がおかしくなっていることが原因です。 ここでは、その原因を直接的に解決します。

1. [ダッシュボード] から [テンプレート] を選択
   
2. [HTMLの編集] を選択
   
3. 念のため修正前のテンプレートをバックアップ
   
4. エディタエリアを選択し、[Ctrl] + [F] で "data:post.body" を検索
   
5. <data:post.body/> が <div class='post-body'/> で囲まれるよう修正
   （※CSSクラス名 post-body を含む要素にコンテンツが含まれていることが重要です。）
   

   <div class='post-body'>
     <data:post.body/>
   </div>
   

   
6. [テンプレートを保存] を選択
   
7. 動作確認
   

自分の場合、この修正で直すことができました。 おそらく、スクリプト挿入で直せない方もこの方法なら修正できると思います。

そもそもの原因って…

まず、Blogger が どのような動作をして LightBox(ライトボックス) を使えるようにしているのか、についてです。 関連する部分を抜粋して動作順序を以下に記載します。

1. クライアントからブログが呼び出されたとき、</body> 直前に以下のようなスクリプトを追加して返信する。

   <script type="text/javascript">
   if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5510997583563012636';BLOG_attachCsiOnload('item_'); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5510997583563012636','//garafu.blogspot.jp/2015/01/updated-author.html','5510997583563012636');
   _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5510997583563012636', 'bloggerUrl': 'https://www.blogger.com', 'title': 'galife', 'pageType': 'item', 'postId': '5682087462618366631', 'url': 'https://garafu.blogspot.jp/2015/01/updated-author.html', 'canonicalUrl': 'https://garafu.blogspot.com/2015/01/updated-author.html', 'canonicalHomepageUrl': 'https://garafu.blogspot.com/', 'homepageUrl': 'https://garafu.blogspot.jp/', 'blogspotFaviconUrl': 'https://garafu.blogspot.jp/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': 'UA-40440355-1', 'searchLabel': '', 'searchQuery': '', 'pageName': '\42updated がありません\42、\42author がありません\42 警告 の 修正方法', 'pageTitle': 'galife: \42updated がありません\42、\42author がありません\42 警告 の 修正方法', 'metaDescription': '', 'encoding': 'UTF-8', 'locale': 'ja', 'localeUnderscoreDelimited': 'ja', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42https://garafu.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42galife - RSS\42 href\75\42https://garafu.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42http://www.blogger.com/feeds/5510997583563012636/posts/default\42 /\76\n\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42galife - Atom\42 href\75\42https://garafu.blogspot.com/feeds/5682087462618366631/comments/default\42 /\76\n', 'meTag': '', 'openIdOpTag': '', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPImfn3JcaSTLUJe7M-Az8mVZlYE8c3JG3hmXwkWt3zWlNNpqf6smQAmjlYBa7uCsvw8A53ij9ebEkeZ2FALiCNTlPDWZInN4rMSJ5DesQOq5q_9_g2ApAaFk5tYjXq58am0xi-ioYjbI/s72-c/hentry%E3%82%A8%E3%83%A9%E3%83%BC.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPImfn3JcaSTLUJe7M-Az8mVZlYE8c3JG3hmXwkWt3zWlNNpqf6smQAmjlYBa7uCsvw8A53ij9ebEkeZ2FALiCNTlPDWZInN4rMSJ5DesQOq5q_9_g2ApAaFk5tYjXq58am0xi-ioYjbI/s320/hentry%E3%82%A8%E3%83%A9%E3%83%BC.png', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,f\75\42chrome\42,g\75\42tick\42,k\75\42jstiming\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){var e\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[e,d];if(void 0\75\75c)try{b.console.timeStamp(\42CSI/\42+a)}catch(h){}};this[g](\42start\42,null,a)}var a;b.performance\46\46(a\75b.performance.timing);var n\75a?new d(a.responseStart):new d;b.jstiming\75{Timer:d,load:n};if(a){var c\75a.navigationStart,h\75a.responseStart;0\74c\46\46h\76\75c\46\46(b[k].srt\75h-c)}if(a){var e\75b[k].load;0\74c\46\46h\76\75c\46\46(e[g](\42_wtsrt\42,void 0,c),e[g](\42wtsrt_\42,\42_wtsrt\42,h),e[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75null,\nb[f]\46\46b[f].csi\46\46(a\75Math.floor(b[f].csi().pageT),e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b[f].csi().startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),null\75\75a\46\46b.gtbExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b.external.pageT,e\46\0460\74c\46\46(e[g](\42_tbnd\42,void 0,b.external.startE),e[g](\42tbnd_\42,\42_tbnd\42,c))),a\46\46(b[k].pt\75a)}catch(p){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[k].load[g](\42aft\42)};var l\75!1;function m(){l||(l\75!0,b[k].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventListener(\42scroll\42,m,!1):b.attachEvent(\42onscroll\42,m);\n })();\74/script\076', 'mobileHeadScript': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/76f25a6f2e06af76', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n', 'tf': ''}}, {'name': 'skin', 'data': {'vars': {}, 'override': '*/'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\75timeslide'}}}]);
   _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'blog-title', null, document.getElementById('Header1'), {}, 'displayModeFull'));
   _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'}, 'displayModeFull'));
   </script>
   

2. クライアント側で読み込みが完了したら、上記コードの5行目が実行される

   _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css'}, 'displayModeFull'));
   

3. 動作結果として </body> の直前に以下のタグが挿入される

   <link type="text/css" rel="stylesheet" href="https://www.blogger.com/static/v1/v-css/2392111094-lightbox_bundle.css">
   <script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/2761285968-lbx__ja.js"></script>
   

4. スクリプトが実行されてLightBox(ライトボックス)が有効になる

実は、うまくLightBox(ライトボックス)が動作しない時、上記の3番目から動作していません。 どうもタグ構造が正しく読み取れず、次の動作へ移れていないのが原因のようです。 CSSクラス名 post-body 要素以下にある img 要素をライトボックスで表示する対象としているようで、 そもそも CSSクラス post-body を含む要素がなかった場合、その先に進まなくなるようです。

<div class='widget Blog' id='Blog1'>
  ...
  <div class='post-body'>
    <data:post.body/>
  </div>
  ...
</div>

というわけで、この記事のような修正方法にたどり着いた…といった感じです。

参考記事

• クリボウのBloggerTips - Blogger で写真をクリックしたときに LightBox が動かない不具合が発生中
• The Real Blogger Status - The LightBox Image Display Option Stopped Working, Recently
• 24log - bloggerの写真表示機能「Lightbox」が表示されないときの対処法

ウェブマスターツール で Blogger に対して "updated がありません" または "author がありません" といったエラーが出たときの修正方法をまとめます。 WordPress でのやり方は結構見かけたのですが… Blogger を対象にしたものがみあたらなかったので、ここでは Blogger を対象として記載します。 …といっても、ほとんど同じなんですが。。

目次

• エラー例
• 原因
• 修正 / 対策
• 確認

エラー例

今回の記事では、次のようなエラーが起こっている状況を対象にしています。 実際に発生するエラーの画面、エラー内容を以下に掲載します。

author がありません
updated がありません

原因

これらの エラー が出る原因は、Blogger の 各ページ が microformats.org スキーマ に対応した マークアップ になっていないことです。

修正 / 対策

基本的な対応方法は、該当するデータが記述された HTMLタグ の class に不足する クラス名 を追加する対応になります。 ただし、hentry が指定されているタグ配下でしか読み取ってくれない点に注意してください。 具体的な方法は、以下でそれぞれ見ていきます。

ちなみに… Blogger で利用可能なオブジェクトに関する情報は Blogger ヘルプ - レイアウト データ タグ に詳細が書かれています。

"updated がありません" の 修正

更新日付は取得できないので、投稿日付を更新日付として代用します。 更新日付は <data:post.timestampISO8601/> で取得します。 hentry を指定されたタグ配下に、おそらく既に published を指定されたタグがあるはずなので、同じ場所に updated を追加します。 修正サンプルコードを以下に掲載します。

修正前 サンプル

<span class="published"><data:post.timestampISO8601/></span>

修正後 サンプル

<span class="published updated"><data:post.timestampISO8601/></span>

"author がありません" の 修正

著者はそのまま取得できるので class を指定するだけです。 著者は <data:post.author/> で取得します。 author は既に指定されているかもしれません。 その場合、author 指定されているタグが hentry 指定されたタグの子孫タグになっているかどうか確認してください。

修正前 サンプル

<div class="post">
  <div class="post-header">
    <span class="author"><data:post.author/></span>
  </div>
  <div class="post-body hentry">...</div>
  <div class="post-footer">...</div>
</div>

修正後 サンプル

<div class="post hentry">
  <div class="post-header">
    <span class="author"><data:post.author/></span>
  </div>
  <div class="post-body">...</div>
  <div class="post-footer">...</div>
</div>

確認

修正が正しく行えたかどうか、実際に確認してみます。 確認する手順は以下の通りです。 ライブデータで確認すれば、現状で確認できるので、便利です。 （ポータルのグラフへの反映は数日かかるようですが…）

1. エラーが発生している URL をクリック
   

   

2. [ライブデータをテスト] をクリック
   

   

3. [プレビュー] をクリック
   

   

4. エラーがないことを確認
   

   

参考

• microformats.org
• Blogger ヘルプ - レイアウト データ タグ
• HALAWATA.NET - ブログのHTMLをmicrodata（schema.org）を使って構造化する
• 寝ログ - ウェブマスターツールで「hentry（マークアップ: microformats.org）」構造化データエラーが出たときの対策方法
• Peaceful Days - ウェブマスターツールの構造化データのエラー「updatedがありません・authorがありません」の対処法
• 田舎に住みたいエンジニアの日記 - 「entry-title がありません」「updated がありません」「author がありません」ウェブマスターツール　構造化データ（hentry）のエラーへの対応策

単純にファイル生成されたかどうかを監視するのであれば FileSystemWathcer を利用するとよいと思います。 ちまたのコードでもそのようなものが多いハズです。

ただ… FileSystemWatcher だけだと、ファイル生成された瞬間にイベントが発生するため、大きなファイルを生成中だとファイルオープンできない問題があります。 なので、ファイル生成された後、開けるようになったらイベント発生させるように少し拡張した 「ファイル生成の監視クラス」 を作ってみました。 …と言っても、イベント発生時に生成されたファイルを開けるかどうかチェックして、無理であれば Timer でもう一度チェックする、といった単純なものです。

目次

• 仕様
• 実装 サンプルコード
• 利用 サンプルコード

仕様

単純には以下のような仕様のものを作ります。

• 監視するディレクトリが指定できる
• 監視するディレクトリはサブディレクトリも監視対象にするかどうか指定できる
• 監視するファイルのフィルタ条件を指定できる
• ファイル生成されて開けるようになったとき Fireイベント が発生する

ただ、実装上の問題から、 Fireイベント は別スレッドで実行される場合がある、といった注意点があります。

ファイル生成を監視するクラス の サンプルコード

ファイル生成を監視するクラス本体 "FileCreationTrigger"と、イベント発生時に受け渡されるイベント変数 "FileCreationEventArgs" のサンプルコードを以下に掲載します。

FileCreationTrigger.cs

namespace garafu
{
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Timers;

    /// <summary>
    /// ファイル生成を監視
    /// </summary>
    public class FileCreationTrigger : IDisposable
    {
        #region ' フィールド
        // ---------------------------------------
        //  フィールド
        // ---------------------------------------

        /// <summary>
        /// 監視する対象のフィルタ条件
        /// </summary>
        private string filter = string.Empty;

        /// <summary>
        /// サブディレクトリを検索するかどうか
        /// </summary>
        private bool includeSubdirectories = true;

        /// <summary>
        /// 監視する間隔
        /// </summary>
        private double interval = 0;

        /// <summary>
        /// 監視する対象のフォルダパス
        /// </summary>
        private string path = string.Empty;

        /// <summary>
        /// Timerクラスのインスタンス
        /// </summary>
        private Timer timer;

        /// <summary>
        /// FileSystemWatcherクラスのインスタンス
        /// </summary>
        private FileSystemWatcher watcher;

        /// <summary>
        /// 生成されたファイルでまだイベントを発生させていないファイルのリスト
        /// </summary>
        private List<string> watches = new List<string>();

        #endregion
        #region ' コンストラクタ
        // ---------------------------------------
        //  フィールド
        // ---------------------------------------

        /// <summary>
        /// FileCreationTrigger クラスのインスタンスを生成、初期化します。
        /// </summary>
        public FileCreationTrigger()
        {
            this.InitializeInstance(null, null, null, null);
        }

        /// <summary>
        /// 監視ディレクトリ、監視ファイルのフィルタ条件、サブディレクトリを監視するかどうか を指定して
        /// FileCreationTrigger クラスのインスタンスを生成、初期化します。
        /// </summary>
        /// <param name="path">監視ディレクトリ</param>
        /// <param name="fileter">監視ファイルのフィルタ条件</param>
        /// <param name="includeSubdirectories">サブディレクトリを監視するかどうか</param>
        public FileCreationTrigger(string path, string fileter, bool includeSubdirectories)
        {
            this.InitializeInstance(path, fileter, includeSubdirectories, null);
        }

        #endregion
        #region ' イベント
        // ---------------------------------------
        //  イベント
        // ---------------------------------------

        /// <summary>
        /// 監視対象ディレクトリに指定されたフィルタに該当するファイルが生成されたとき発生します。
        /// メインスレッドとは別スレッドで動作する場合があります。
        /// </summary>
        public event EventHandler<FileCreationEventArgs> Fire;

        #endregion
        #region ' プロパティ
        // ---------------------------------------
        //  プロパティ
        // ---------------------------------------

        /// <summary>
        /// 監視対象ファイルのフィルタ条件を取得または設定します。
        /// </summary>
        public string Filter
        {
            get
            {
                return this.filter;
            }

            set
            {
                this.filter = value;
                this.watcher.Filter = value;
            }
        }

        /// <summary>
        /// サブディレクトリを監視するかどうかを取得または設定します。
        /// </summary>
        public bool IncludeSubdirectories
        {
            get
            {
                return this.includeSubdirectories;
            }

            set
            {
                this.includeSubdirectories = value;
                this.watcher.IncludeSubdirectories = value;
            }
        }

        /// <summary>
        /// 監視間隔(msec)を取得または設定します。
        /// </summary>
        public double Interval
        {
            get
            {
                return this.interval;
            }

            set
            {
                this.interval = value;
                this.timer.Interval = value;
            }
        }

        /// <summary>
        /// 監視対象ディレクトリのパスを取得または設定します。
        /// </summary>
        public string Path
        {
            get
            {
                return this.path;
            }

            set
            {
                this.path = value;
                this.watcher.Path = value;
            }
        }
        #endregion
        #region ' メソッド
        // ---------------------------------------
        //  メソッド
        // ---------------------------------------

        /// <summary>
        /// インスタンスを廃棄します。
        /// </summary>
        public void Dispose()
        {
            this.watcher.Dispose();
            this.timer.Dispose();
        }

        /// <summary>
        /// Fireイベントの発生を開始します。
        /// </summary>
        public void Start()
        {
            this.watcher.EnableRaisingEvents = true;
            this.timer.Start();
        }

        /// <summary>
        /// Fireイベントの発生を停止します。
        /// </summary>
        public void Stop()
        {
            this.watcher.EnableRaisingEvents = false;
            this.timer.Stop();
        }

        /// <summary>
        /// FileSystemWatcherでCreatedイベントが発生したとき実行されます。
        /// </summary>
        /// <param name="sender">呼び出し元インスタンス</param>
        /// <param name="e">イベント引数</param>
        private void FileSystemWatcher_Created(object sender, FileSystemEventArgs e)
        {
            if (this.IsFileLocked(e.FullPath) == false)
            {
                if (this.watches.Contains(e.FullPath))
                {
                    this.watches.Remove(e.FullPath);
                }

                this.OnFire(e.FullPath);
            }
            else
            {
                if (this.watches.Contains(e.FullPath) == false)
                {
                    this.watches.Add(e.FullPath);
                }
            }
        }

        /// <summary>
        /// インスタンスを初期化します。
        /// </summary>
        /// <param name="path">監視ディレクトリのパス。デフォルトはカレントディレクトリ。</param>
        /// <param name="filter">監視する対象のフィルタ条件。デフォルトはすべてのファイル「*」。</param>
        /// <param name="includeSubdirectories">サブディレクトリを検索するかどうかデフォルトは true。</param>
        /// <param name="interval">監視する間隔(msec)。デフォルトは 1000 ミリ秒。</param>
        private void InitializeInstance(string path, string filter, bool? includeSubdirectories, double? interval)
        {
            // インスタンス生成
            this.watcher = new FileSystemWatcher();
            this.timer = new Timer();

            // 初期設定
            this.Path = string.IsNullOrEmpty(path) ? Environment.CurrentDirectory : path;
            this.Filter = string.IsNullOrEmpty(filter) ? "*" : filter;
            this.IncludeSubdirectories = includeSubdirectories.GetValueOrDefault(true);
            this.Interval = interval.GetValueOrDefault(1000);

            // イベントのアタッチ
            this.watcher.Created += new FileSystemEventHandler(this.FileSystemWatcher_Created);
            this.timer.Elapsed += new ElapsedEventHandler(this.Timer_Elapsed);
        }

        /// <summary>
        /// 指定されたファイルがロックされているかどうかを返します。
        /// </summary>
        /// <param name="path">検証したいファイルへのフルパス</param>
        /// <returns>ロックされているかどうか</returns>
        private bool IsFileLocked(string path)
        {
            FileStream stream = null;

            try
            {
                stream = new FileStream(path, FileMode.Open, FileAccess.ReadWrite, FileShare.None);
            }
            catch
            {
                return true;
            }
            finally
            {
                if (stream != null)
                {
                    stream.Close();
                }
            }

            return false;
        }

        /// <summary>
        /// Fireイベントを発生させます。
        /// </summary>
        /// <param name="fullpath">イベント発生源となったファイルへのフルパス</param>
        private void OnFire(string fullpath)
        {
            if (this.Fire != null)
            {
                this.Fire(this, new FileCreationEventArgs(fullpath));
            }
        }

        /// <summary>
        /// TimerでElapsedイベントが発生したとき実行されます。
        /// </summary>
        /// <param name="sender">呼び出し元インスタンス</param>
        /// <param name="e">イベント引数</param>
        private void Timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            foreach (var fullpath in this.watches)
            {
                if (this.IsFileLocked(fullpath) == false)
                {
                    this.watches.Remove(fullpath);
                    this.OnFire(fullpath);
                }
            }
        }

        #endregion
    }
}

FileCreationEventArgs.cs

namespace garafu
{
    using System;

    /// <summary>
    /// ファイル生成
    /// </summary>
    public class FileCreationEventArgs : EventArgs
    {
        /// <summary>
        /// 生成されたファイルへのフルパスを取得します。
        /// </summary>
        public string FullPath { get; private set; }

        /// <summary>
        /// パス情報を指定して、FileCreationEventArgs クラスのインスタンスを生成、初期化します。
        /// </summary>
        /// <param name="fullpath">パス情報</param>
        public FileCreationEventArgs(string fullpath)
        {
            this.FullPath = fullpath;
        }
    }
}

ファイル生成を監視するクラス の 利用例

ファイル生成を監視するクラスの利用方法は、インスタンス生成して Fireイベント に イベントハンドラ を接続し、 Startメソッド を呼び出すだけです。 以下にサンプルコードを掲載します。

namespace WpfApplication1
{
    using System;
    using System.IO;
    using System.Windows;
    using garafu;
    
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        private FileCreationTrigger trigger;

        public MainWindow()
        {
            this.InitializeComponent();
            
            this.trigger = new FileCreationTrigger();
            this.trigger.Fire += new EventHandler<FileCreationEventArgs>(this.Trigger_Fire);
            this.trigger.Start();
        }

        private void Trigger_Fire(object sender, FileCreationEventArgs e)
        {
            // ファイル生成されたときの処理
        }
    }
}

指定されたファイルへのアクセス可否（ロック状態）を調べる方法を記載します。 ロックされている状態といえば、ファイルが開かれていたる状態──ただ開いているだけでなく、読み書きされている最中、ファイル自身が生成中も含む──のとき、ロックされています。 まぁ、結論から言って「試しに指定されたファイルを開いてみて開けるかどうか」をしているだけなのですが… サンプルコードを以下に掲載します。

サンプルコード

using System.IO;

/// <summary>
/// 指定されたファイルがロックされているかどうかを返します。
/// </summary>
/// <param name="path">検証したいファイルへのフルパス</param>
/// <returns>ロックされているかどうか</returns>
private bool IsFileLocked(string path)
{
    FileStream stream = null;

    try
    {
        stream = new FileStream(path, FileMode.Open, FileAccess.ReadWrite, FileShare.None);
    }
    catch
    {
        return true;
    }
    finally
    {
        if (stream != null)
        {
            stream.Close();
        }
    }

    return false;
}

参考記事

• Stack Overflow - Is there a way to check if a file is in use?
• Stack Overflow - Testing the accessibility of the file

C#、.NET Framework で提供されている Timer は、System.Windows.Forms.Timer、System.Threading.Timer、System.Timers.Timer の3種類があります。 それぞれの特徴を調べたので、以下の表にまとめてみました。 また、その下ではそれぞれのタイマーの詳しい特徴と利用方法をまとめました。

で、いきなり結論ですが、汎用的には System.Timers.Timer を利用するのがよさそうです。 精度が高く、UI のあるなしに関わらず利用できる (＝ASP.NET でも利用可能) といった点が メリット として大きいと思います。

以前の記事（IE の UserAgent まとめ）から時間が経ち、いろいろと変化してきたので、 IE8、IE9、IE10、IE11 の userAgent について、ブラウザモードによる違い、プラットフォームによる違いを追加調査してみました。 調査結果は前回同様、ダイジェスト（まとめ）と具体的な一覧にしてみました。

IE8 - IE10、IE11 まとめ

• ブラウザモード、ドキュメントモード
  • IE8 - IE10の場合、ドキュメントモードを変更しても userAgent は変わらない。
  • IE11の場合、ドキュメントモードの変更しかない。
• バージョンは、MSIE x.x または rv:x.0 で確認する。 （IE11 から MSIE x.x 表記は削除される）
  • rv:11.0 の場合、IE11
  • MSIE 10.0 の場合、IE10
  • MSIE 9.0 の場合、IE9
  • MSIE 8.0 の場合、IE8
• 互換表示の場合、MSIE 7.0 と Trident/x.0 が同時に存在する。
  • MSIE 7.0 と Trident/6.0 の場合、IE10
  • MSIE 7.0 と Trident/5.0 の場合、IE9
  • MSIE 7.0 と Trident/4.0 の場合、IE8
  • MSIE 7.0 のみで Trident がない場合、IE7
• ノートPCの場合、Tablet PC x.0 が存在する。
• タッチ対応の場合、Touch が存在する。
• 64bit OS の場合、WOW64 または Win64 が存在する。
  • 64bit OS で 32bit IE の場合、WOW64 が存在する。
  • 64bit OS で 64bit IE の場合、Win64 が存在する。
• Windows NT x.xでプラットフォームが分かる。
  • Windows NT 6.4 の場合、Windows 10 Techinical Preview
  • Windows NT 6.3 の場合、Windows 8.1
  • Windows NT 6.2 の場合、Windows 8
  • Windows NT 6.1 の場合、Windows 7
  • Windows NT 6.0 の場合、Windows Vista
  • Windows NT 5.1 の場合、Windows XP

調査結果 一覧

表は横にスクロールしてご確認ください。

調査環境は Windows 7 32bit ノートPC（IE8-10）、Windows 8.1 64bit ノートPC（IE11） です。 IE8 - IE10 は ブラウザモード を変更、IE11 は ドキュメントモード を変更して調査しました。

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; rv:11.0) like Gecko

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0)

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0)

関連記事

• Microsoft Edge (Project Spartan) の UserAgent
• UserAgent を 用いた IE11 の判別方法
• IE の UserAgent まとめ