C# & JavaScript

よく利用されるであろう 正規表現 の サンプル を集めてみました。

目次

• URL
• メールアドレス
• 電話番号
• 郵便番号
• 日付 (W3C-DTF)
• ファイルパス / フォルダパス

URL

簡易

実質的によく利用される文字列のみで構成されるような URL のみを許可する正規表現です。

https?://[\w\-\.~#\$&\+\/:=\?%]+

自由なスキーマ

スキーマを特定せず、利用できる文字も RFC 3986 に従った正規表現です。 URL の構成は考慮していないので、文字が配置される場所が不適切でも一致します。

[\w\+\-\.]+://[\w\-\.~!#\$&'\(\)\*\+,\/:;=\?@\[\]%]+

メールアドレス

一般的なメールアドレスとして成り立っているかどうか簡易的なチェック

[\w\-\.]+@[\w\-\.]+

gTLDを含む

[\w\-\.]+@[\w\-\.]+(\.com|\.net|\.org|\.edu|\.gov|\.mil|\.int)

電話番号

0\d{1,5}\-\d{0,4}\-\d{4}

郵便番号

\d{3}\-\d{4}

日付（W3C-DTF）

W3C - Date and Time Formats

すべてのフォーマット

\d{4}(-\d{2}(-\d{2}(T\d{2}:\d{2}(:\d{2}(.\d+)?)?([\+-]\d{2}:\d{2}|Z))?)?)?

年月日 ( YYYY-MM-DD )

\d{4}-\d{2}-\d{2}

年月日時分秒 ( YYYY-MM-DDThh:mm:ssTZD )

\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}([\+-]\d{2}:\d{2}|Z)

ファイルパス / フォルダパス

ローカルパスのみ

空白があるとそこまでをパスと認識する正規表現

[a-zA-Z]:\\[\w\\\.]*

空白までまたはダブルクォートで括られた範囲をパスと認識する正規表現

([a-zA-Z]:\\[\w\\\.]*|"[a-zA-Z]:\\[\w\.].*")
"?[a-zA-Z]:\\

ネットワークパスのみ

(\\\\[\w\\\.]*|"\\\\[\w\.].*")

参考記事

• すぐ使える! 正規表現サンプル集 - 正規表現サンプル(エスケープが必要な文字)
• IPA - 9 URI のエスケープ
• Wiki - メールアドレス
• JPNIC - ドメイン名の種類
• W3C - Date and Time Formats

Windows 10 Insider Preview が公開されました。 Windows 10 Insider Preview では、かねてからウワサだった Microsoft Edge (Project Spartan) が利用できます。 Internet Explorer は刷新され、 Microsoft Edge という名前に変わるようです。 さて、新しいブラウザが出たので、そのブラウザを判定するために User-Agent を確認したいので、調べてみました。

以下の User Agent 文字列 は実際に Windows 10 Insider Preview x64 を仮想マシンとして動かし、ブラウザを動作させて確認した文字列になります。

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0"

従来の Internet Explorer との違いは以下のような感じになっているようです。

• 以下の項目が更新
  • Windows NT が Windows 10 なので 10.0 に更新
• 以下の項目が削除
  • .NET 関連
  • TabletPC
  • Touch
  • Infopath
  • Trident
• 以下の項目が追加
  • Chrome
  • Sarafi

これらを反映した jQuery プラグイン (jquery.depend) について書いた記事は こちら をご確認ください！ そんなの面倒だからさっさと ダウンロード させろ、という人は github: garafu/jquery.depend - release へどうぞ。

関連記事

• Internet Explorer 8.0 ～ 11.0 までのまとめ
• Internet Explorer 8.0 ～ 10.0 までのまとめ
• jQuery で ブラウザ、バージョン、プラットフォーム を判別する プラグイン

参考記事

• Microsoft Windows - Windows 10 Insider Preview ISO のダウンロード
• MSDN - User-agent string changes

ASP.NET MVC 5 の 入門ともいえる、もっとも簡単な チュートリアル を作ってみました。 空のプロジェクト からだと単純にはいかなかったので、そのメモも兼ねています。

よくみるサンプルコードやチュートリアル、入門などでは ViewBag や ViewDagta を使ってますが、実際はモデルを渡して利用した方が都合が良いと思うので、ここではちょっと実践よりにチュートリアルを構成してみました。

サンプルコード

サンプルコード の ダウンロード

目次

• 目標
• 前提条件
• チュートリアル
  • ソリューション、プロジェクトの準備
  • モデルの作成
  • コントロールの作成
  • ビューの作成
  • 実行、確認

目標

よくある "Hello World !" を表示する Webアプリ を作ってみます。 出来上がったら、以下のような画面が表示される予定です。

前提条件

念のため、前提となる環境を以下に記載します。

• Windows 8.1
• Visual Studio 2013

チュートリアル

以下に "Hello World !" を表示する Webアプリ を作成する、具体的な チュートリアル 、手順を記載します。

ソリューション、プロジェクトの準備

1. [ファイル]-[新規作成]-[プロジェクト] を選択

   

2. 「新しいプロジェクト」ウィンドウにて、「ASP.NET WEb アプリケーション」を選択し、 名前、場所、ソリューション名を設定して、「OK」ボタンを押下

   

3. 「新規 ASP.NET プロジェクト」ウィンドウにて、テンプレート「Empty」、コア参照「MVC」を選択し、「OK」ボタンを押下

   

4. 続いて、[ツール]-[NuGet パッケージ マネージャー]-[ソリューションの NuGet パッケージの管理] を選択します

   

5. 「NuGet パッケージの管理」ウィンドウにて、"Microsoft ASP.NET MVC" を検索し、選択、「インストール」ボタンを押下

   

以上で ASP.NET MVC 5 で開発する基本的な環境準備が整いました。 次からは実際にコードとして、モデル、コントロール、ビューを記述していきます。

モデルの作成

1. ソリューション エクスプローラー にて、 "Models" ディレクトリを選択

   

2. "Models"ディレクトリ上で右クリック、[追加]-[新しい項目] を選択

   

3. 「新しい項目の追加」にて、「クラス」を選択し、名前に「Greeting」を記載して、「追加」ボタンを押下

   

4. 出来上がった Greeting.cs を以下のように記載します

   namespace WebApplication.Models
   {
       public class Greeting
       {
           public string Message { get; set; }
       }
   }
   

コントロールの作成

1. ソリューション エクスプローラー にて、 "Controllers" ディレクトリ を選択

   

2. "Controllers"　ディレクトリ上で右クリック、 [追加]-[コントローラー] を選択

   

3. 「スキャフォールディングの追加」にて、「MVC 5 コントローラー - 空」を選択し、「追加」ボタンを押下

   

4. 「コントローラーの追加」にて、コントローラー名 "HomeController" を入力し、「追加」ボタンを押下

   

5. 出来上がった HomeController.cs に、先ほど作成した Greeting クラスを生成、初期化して、 View メソッド へ渡す処理を追加

namespace WebApplication.Controllers
{
    using System.Web.Mvc;
    using WebApplication.Models;

    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            var model = new Greeting();
            
            model.Message = "Hello World !";

            return this.View(model);
        }
    }
}

ビューの作成

1. 上記、"コントローラーの作成" で作った HomeController.cs の Index メソッド が記載されている任意の位置で右クリック、 [ビューの追加] を選択

   

2. 「ビューの追加」にて、ビュー名 "Index" を入力して、「追加」ボタンを押下

   

3. 出来上がった Index.cshtml に、モデルクラスの定義、メッセージ表示処理を追加

   @model WebApplication.Models.Greeting
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   @* View()メソッド に渡されたオブジェクトの Message プロパティ を表示する *@
   @Model.Message
   

以上でチュートリアルは終わりになります。

実行、確認

1. ツールバー の 「デバッグ開始」ボタン を押下

   

2. Internet Explorer が立ち上がり、動作していることを確認

   

Visual Studio 2013 で ASP.NET アプリ を 作成していて、次のようなエラーに遭遇したときの対処方法です。

エラーメッセージ 例

CS0234: 型または名前空間名 'Ajax' は名前空間 'System.Web.Mvc' に存在しません。アセンブリ参照が不足しています。

原因

dll参照 がおかしい状態になっています。 具体的には ASP.NET 5.0 が プロジェクト に インストール されていない状態で実行しようとしています。

対策

単純に以下の手順で ASP.NET 5.0 を プロジェクト に追加します。

1. [ツール]-[NuGet パッケージ マネージャー]-[ソリューションの NuGet パッケージの管理...] を選択

   

2. 「NuGet パッケージの管理」において、[オンライン]-[すべて] を選択

   

3. "ASP.NET MVC" を検索

   

4. 「Microsoft ASP.NET MVC」を選択

   

5. 「インストール」ボタンをクリック

   

6. インストール先プロジェクトを確認して、「OK」ボタンをクリック

   

7. ライセンスに同意

   

8. …インストール中…

   

9. 「閉じる」ボタンをクリックして完了

   

参考記事

• stackoverflow - 'Ajax' does not exist in the namespace 'System.Web.Mvc'

あまり利用用途が思いつきませんが… 一応、メモ書きとして残しておきます。

タイトルは "ASP.NET" とありますが、実際は デスクトップアプリケーション (WPF, Windows Form アプリケーション) でも同じコードで app.config を取得できます。

アプリケーション構成ファイル (web.config や app.config) に独自の設定を追加したい場合、独自に実装する必要があります。 詳しくは こちら をご参照ください。

サンプルコード

System.AppDomain.CurrentDomain.SetupInformation.ConfigurationFile

アプリケーション構成ファイル (web.config や app.config) に 独自設定 を追加した際、そこに指定された値に対して 独自の検証 (カスタム検証) を行う方法をまとめます。

目次

• 概要
• カスタム検証 の 作成
• カスタム検証属性 の 作成
• カスタムエレメント属性 へ 適用

web.config や app.config に カスタム設定 を追加した際、その設定値 (config中に設定された値) が意図した通りの値に設定されているかどうか検証する仕組みがあります。 ここでは、デフォルトで存在する検証の仕組みを利用する例をまとめます。 ちなみに、ここで取り上げている各種 Validator は System.Configuration 名前空間 に存在しています。

目次

• StringValidator 属性
• RegexStringValidator 属性
• IntegerValidator 属性, LongValidator 属性
• TimeSpanValidator 属性

アプリケーション構成ファイル（アプリケーション設定ファイル） に対して 独自の構成（カスタム構成） を実装する際、単純な要素と属性以外の設定方法を 3種類 取り上げます。 "高度な"と言っても、ここで取り上げるトピックは 基本(単純な要素) と 配列 、 型変換 になります。 カスタム設定 に対する 検証 も行えるようですが…少しボリュームが大きくなったので別記事「ASP.NET で web.config の カスタム設定 を 検証 する 方法」にしました。

目次

• カスタムエレメント
  • カスタムエレメント の 作成
  • 上位要素 への 追加
  • config ファイル への 記述
• カスタムコレクション
  • カスタムコレクション の 作成
  • 上位要素 への 追加
  • config ファイル への 記述
• 型変換
  • 型変換 (TypeConverter) の 作成
  • カスタムエレメント へ 属性 として追加
  • config ファイル への 記述

ASP.NET だと web.config 、通常のアプリだと app.config に独自の設定 (カスタムセクション、カスタム要素) を記述、利用する方法についてまとめます。 ここでは流れを理解できるよう、基本的な部分に絞ってまとめます。

目次

• カスタム設定の作成
  • カスタムセクション の 作成
  • カスタムエレメント の 作成
• カスタム設定の利用
  • web.config へ 記述
  • コード で 読み取り

カスタム設定 の 作成

"カスタム設定" と記載していますが、実際に作成するのは "カスタムセクション" と "カスタムエレメント"、 "カスタムコレクション" になります。 ここではあまり詳しいことは避け、基本だけ (カスタムセクション と カスタムエレメント のみ) 実装してみます。 "カスタムセクション" は config における カスタム設定 の ルート要素 になり、 "カスタムエレメント" は 子要素 になります。

カスタムセクション の作成

"カスタムセクション" は web.config または app.config に独自設定を記述するときの ルート要素 になります。 カスタムセクション は .NET 2.0 以上の場合は ConfigurationSection クラス を継承して作成し、.NET 1.0 または 1.1 の場合は IConfigurationSectionHandler インターフェース を実装します。 まだ .NET 1.0, 1.1 の環境で作らなきゃ…は考えづらいので、今回は .NET 2.0 以上を前提として進めていきます。 カスタムセクションに プリミティブ型 の プロパティ を記述すると config 上では 属性 に、カスタムエレメント を プロパティ として記述すると config 上では 子要素 になります。 ここでは 子要素 になるよう コーディング しています (config 中において カスタムセクション / app となるような実装) 。

SampleConfigurationSection.cs

namespace WebApplication.Config
{
    using System.Configuration;

    public class SampleConfigurationSection : ConfigurationSection
    {
        [ConfigurationProperty("app")]
        public ApplicationConfigElement App
        {
            get
            {
                return (ApplicationConfigElement)base["app"];
            }

            set
            {
                base["app"] = value;
            }
        }
    }
}

カスタムエレメント の作成

"カスタムエレメント" は 実際に設定を保持する要素で、 ConfigurationElement クラス を継承して作成します。 config 中において、設定は 要素の属性 として設定します (<要素名 属性="値" /> のような記述で設定する) 。 要素の値 として設定は保持できなそうでした (<要素名>値</要素名> のような記述はできない) 。

以下では 属性 を 1つ 保持するよう実装しています (app / @message となる実装) 。

ApplicationConfigElement.cs

namespace WebApplication.Config
{
    using System.Configuration;

    public class ApplicationConfigElement : ConfigurationElement
    {
        [ConfigurationProperty("message")]
        public string Message
        {
            get
            {
                return (string)base["message"];
            }

            set
            {
                base["message"] = value;
            }
        }
    }
}

カスタム設定 の 利用

上で準備した カスタムセクション と カスタムエレメント は、 web.config または app.config へ記載し、 コード で 読み取ることで利用します。 以下では web.config への 記述 と コード で 読み取る 方法について記載します。

web.config へ 記述

上述した カスタムセクション および カスタムエレメント を実際に web.config に記載して利用しようとすると、以下のようになります。

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <section name="sampleSettings" type="WebApplication.Config.SampleConfigurationSection"/>
  </configSections>

  <!-- いろいろ省略... -->

  <sampleSettings>
    <app message="Hello, world !" />
  </sampleSettings>
</configuration>

カスタムセクション を利用できるようにするため、 configSections および section 要素 を記述します。 section 要素 は、どちらかと言うと カスタム設定 を利用する際の決まり文句に近いものだと思います。 sampleSettings 要素以下に カスタム設定 を記述することで利用できます。

section / @name

記載する名前は カスタムセクション を実際に web.config 中の要素として利用する名前になり、9行目 および 11行目 に記載されている 要素名 に一致します。

section / @type

記載する型名は カスタムセクション クラス の 完全名 および アセンブリが異なればアセンブリ名になります。

sampleSettings

section / @name で指定した名前を要素名として使います。この要素は カスタムセクション で作成した ルート要素 に一致します。

app

カスタムセクション の カスタムエレメント プロパティ に設定した ConfigurationProperty が 要素名 になります。 入れ子にした際は適宜読み替えてください。

app / @message

プリミティブ型 に 設定した ConfigurationProperty は 属性名 になります。

コード で 読み取り

ConfigurationManager.GetSection() を利用して カスタムセクション 要素 を取得します。 取得した後は通常のオブジェクト操作と同じように設定値へアクセスできます。 残念なのは、 GetSection( string ) で指定する セクション名 が、 config ファイルの section / @name で指定した値になるところでしょうか。 この部分は固定になってしまうので要注意です。

SampleController.cs

namespace WebApplication.Controllers
{
    using System;
    using System.Configuration;
    using System.Web.Http;
    using WebApplication.Config;

    public class SampleController : ApiController
    {
        public void Get()
        {
            var config = ConfigurationManager.GetSection("sampleSettings") as SampleConfigurationSection;
            Console.WriteLine(config.App.Message);
        }
    }
}

関連記事

• ASP.NET で web.config に アプリケーション設定 を 追加 する方法
• ASP.NET で web.config に 高度な カスタム設定 を 定義する方法
• ASP.NET で web.config の カスタム設定 を 検証 する 方法
• ASP.NET で web.config の カスタム設定 を 独自検証 する 方法

参考記事

• 宇宙仮面のC# Programming - Web.Configにカスタムセクションを追加する
• MSDN - 方法 : ConfigurationSection を使用してカスタム構成セクションを作成する

カスタム設定まではいきませんが、単純なキーバリュー設定を web.config に追加、 および、追加した値をコード上で読み取る方法をまとめます。

目次

• 設定の追加
• 設定の読み取り

以前、クライアントサイドからリソースを利用するためにどうしたら良いか程度は、少し調べはしていたのですが、 今回は、サーバーサイドも含めて W3C の "Cross-Origin Resource Sharing" に記載されている内容を改めて読み直し & まとめておこうと思いました。 …が、結局、ほとんど仕様の日本語化になってしまいました。。 面倒で端折っている部分もありますが、ほぼ訳されています。

※ここに記載される内容は 2014年1月16日 の Cross-Origin Resource Sharing (Recommendation) 仕様になります。

目次

• 用語
  • 単純なメソッド
  • 単純なヘッダー
  • 単純なレスポンスヘッダー
• リクエスト / レスポンス ヘッダー
  • Access-Control-Allow-Origin レスポンスヘッダー
  • Access-Control-Allow-Credentials レスポンスヘッダー
  • Access-Control-Expose-Headers レスポンスヘッダー
  • Access-Control-Max-Age レスポンスヘッダー
  • Access-Control-Allow-Methods レスポンスヘッダー
  • Access-Control-Allow-Headers レスポンスヘッダー
  • Origin リクエストヘッダー
  • Access-Control-Request-Method リクエストヘッダー
  • Access-Control-Request-Headers リクエストヘッダー
• リソースサーバー 処理
  • シンプル リクエスト
  • プリフライト リクエスト
• クライアント 処理
  • シンプル リクエスト
  • プリフライト リクエスト
  • リソース共有が可能かどうかの判定
  • プリフライト 結果 キャッシュ

Webアプリケーションを開発するとよく見かける脆弱性に CSRF (Cross-Site Request Forgery、クロスサイトリクエストフォージェリ) があります。 簡単には「ユーザーが予期しない処理を実行させようとする攻撃」といったところでしょうか。 その対策の１つに「正規の操作が行われていることを示すトークンを記述、検証する方法」があります。 ここでは、CSRFの詳細は記載せず、 ASP.NET MVC において、トークンを用いた CSRF対策 を実装する実例をまとめてみました。

目次

• 注意すべき処理
• CSRF対策 で利用する クラス、メソッド
• CSRF対策 の 実装例
• CSRF対策 ができているか テスト

注意すべき処理

基本的に読み取り、表示以外は CSRF の危険性がないか注意すべき処理だと思います。

注意すべき処理

• データ作成/登録 (Create)
• データ更新 (Update)
• データ削除 (Delete)

"データ" の 具体例

• アカウント
• カート
• 記事
• 帳票
• 伝票

これらは組み合わせで考えられるので、例えば「アカウント作成/登録」、「帳票更新」、「伝票削除」といった感じの処理において注意します。 ここで挙げている "データ" 例 は世の中で考えられる一部の事象なので、各開発においてあてはめてみてください。

CSRF対策 で利用する クラス、メソッド

CSRF対策で利用するクラス、メソッドは以下の2種類です。

• HtmlHelper.AntiForgeryToken
• ValidateAntiForgeryTokenAttribute

cshtml 上に HtmlHelper.AntiForgeryToken でトークンを埋め込み、 cs 上の ValidateAntiForgeryTokenAttribute でトークンを確認するように実装します。 これにより、予期しない経路から処理が割り込まれた時、トークンが存在しないので拒否できるようになります。

CSRF対策 の 実装例

今回は、アカウントの新規作成処理において、CSRF対策を施す例を載せます。 アカウント新規作成は /Account/Create で実行できるようにしたいと思います。

作成するファイルは以下に示す 4ファイル です。

• AccountController.cs はビューの表示と登録処理(CSRF対策用のトークンを検証)を行います。
• AccountModel.cs は新規アカウント作成で登録するデータモデルです。
• Complete.cshtml は登録完了画面です。
• Create.cshtml は登録画面(CSRF対策用のトークンを埋め込み)です。

CSRF対策 として重要な実装は Create.cshtml （トークンの埋め込み） と AccountController.cs （トークンの検証） になります。

AccountController.cs

namespace WebApplication.Controllers
{
    using System.Web.Mvc;
    using WebApplication.Models;

    /// <summary>
    /// アカウントに関する処理を行います
    /// </summary>
    public class AccountController : Controller
    {
        /// <summary>
        /// アカウント新規作成画面を表示します
        /// </summary>
        /// <returns></returns>
        public ActionResult Create()
        {
            return this.View();
        }

        /// <summary>
        /// アカウント新規作成処理を実行します
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        [HttpPost()]
        [ValidateAntiForgeryToken()]
        public ActionResult Create(AccountModel model)
        {
            // ...登録しようとしているアカウント情報が登録可能かどうか判定する処理...

            // ...DBへ登録等の処理...

            // 登録完了画面を表示
            return this.View("Complete");
        }

        /// <summary>
        /// 処理完了画面を表示します
        /// </summary>
        /// <returns></returns>
        public ActionResult Complete()
        {
            return this.View();
        }
    }
}

AccountController.cs では CSRF対策 用 のトークンを検証する仕組みを実装します。 具体的には 26行目にある [ValidateAntiForgeryToken()] を記載することで、トークンが正しいものかどうかが検証されます。 正しいトークンが含まれていなければ、不正な処理として例外を発生させます。 例外処理がされてなければ、500 Internal Server Error としてレスポンスが返ってきます。

AccountController.cs

namespace WebApplication.Models
{
    public class AccountModel
    {
        /// <summary>
        /// アカウントIDを取得または設定します。
        /// </summary>
        public string Id { get; set; }

        /// <summary>
        /// アカウントパスワード取得または設定します。
        /// </summary>
        public string Password { get; set; }
    }
}

今回はシンプルに Id と パスワード のみ登録するようなモデルを実装しています。

Create.cshtml

@model WebApplication.Models.AccountModel

@{
    ViewBag.Title = "Create Account";
}

<h2>Create Account</h2>

@using (Html.BeginForm("Create", "Account", FormMethod.Post, new { @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()

    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">ID</label>
        <span>@Html.TextBoxFor(m => m.Id, new { @class = "form-control" })</span>
    </div>    
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">Password</label>
        <span>@Html.PasswordFor(m => m.Password, new { @class = "form-control" })</span>
    </div>
    <div class="form-group">
        <span class="col-sm-offset-2"><input type="submit" class="btn btn-default" value="登録" /></span>
    </div>
}

Create.chstml では CSRF対策用の トークン を埋め込みます。 具体的には 11行目 にある @Html.AntiForgeryToken() を記載することで、トークンを埋め込むことができます。

Create.cshtml

@{
    ViewBag.Title = "Complete";
}

<h2>Complete</h2>

結果表示だけなので、特に何も実装はありません。。

CSRF対策 ができているか テスト

正常な経路のテスト

まずは正常な経路で動作することを確認します。

1. /Account/Create へアクセスし、入力欄を埋めて、「登録」ボタンを押下します
   

   

2. /Account/Complete へ遷移します
   

   

不正な経路のテスト

次に画面を介さず、いきなりアカウント作成を実行するような経路（不正な経路）をテストします。 具体的には Fiddler を利用して、直接アカウント作成するような経路をテストしてみます。

1. Fidler の Composer タブ で遷移先のURLである POST: /Account/Create を入力します
   

   

2. 「Execute」ボタンを押下します
   

   

3. レスポンスをみると、エラーが返ってきていることが確認できます
   

   

参考記事

• IPA - 第4章 セッション対策 リクエスト強要（CSRF）対策

Browser link を無効にする方法をメモ。

起こっている現象

Visual Studio で Webアプリ 開発を行っていて、デバッグ実行すると以下のようなタグが埋め込まれている現象…。

<!-- Visual Studio Browser Link -->
<script id="__browserLink_initializationData" type="application/json">
    {"appName":"Internet Explorer","requestId":"4fd1a29a21824d7ab098adfd5c2ebb0c"}
</script>
<script src="http://localhost:53351/5d25e5658b16437188a3fbfe704d3b2b/browserLink" type="text/javascript" async="async"></script>
<!-- End Browser Link -->

Browser link の 無効化 手順

手順というほどでもなく、下図にある「Browser link を有効にする」のチェックを外せば無効化されます。 場所が分かりにくいのが難点です。。

最近、ウェブマスターツールから「モバイル対応していないと検索ランク下げるよ」的なメールが来て、直後から検索ランクがみるみる下がって困っていました…（気のせいかもしれませんが。。） ちなみに、検索ランクを下げた理由は「モバイルユーザビリティが悪いから」だそうで、具体的には「タップ ターゲット が近すぎるから」だそうです。 致し方ないので重い腰をあげて ソーシャルボタン（facebook の「いいね」、twitter の 「ツイート」等） を押しやすいよう オリジナルデザイン に変更してみました。 ここでは、そのまとめを掲載します。

ちなみに、Google が推奨するボタンサイズ、ボタン間隔は 「タップ ターゲットのサイズを適切に調整する」 に記載されており、まとめると以下のようです。 どちらかを満たしていれば良いようなので、両方を満たして広げすぎる必要はないようです。

推奨される タップサイズ

• ボタンサイズ（高さ、幅）： 最少7mm(46px)
• ボタン間隔： 最少5mm(32px)

対象 とする ソーシャルボタン

今回、対象とする ソーシャルボタン は以下のものを行います。 他にも ソーシャルボタン がいろいろ増えていましたが…とりあえずは以下のものだけです。

対象とするソーシャルボタン

• Facebook 【シェア】
• Twitter 【ツイート】
• Google Plus 【+1】
• はてなブックマーク 【はてぶ】
• pocket 【pocket】

完成イメージ

ソーシャルボタン の 設置手順

Blogger に 以下のソーシャルボタンをオリジナルデザインで表示させる手順をまとめます。

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

   

2. headerタグ の 子要素に以下の styleタグ をコピペします。 style は 後から好みに変えてもらって構いません。 とりあえず、このスタイルをあてれば フラットデザイン ぽい、完成イメージにあるようなボタンを作ることができます。

   挿入場所

   

   挿入するコード

   <style type='text/css'>
   .socialbutton {
       display: inline-block;
       height: 48px;
       width: 100px;
       margin: 5px;
       text-align: center;
       border-radius: 4px;
       text-decoration: none !important;
   }
   
   .socialbutton-count {
       display: block;
       height: 20px;
       margin: 4px 4px 0 4px;
       line-height: 20px;
       background-color: #ffffff;
       color: #000000;
       border-radius: 4px;
   }
   
   .socialbutton-button {
       display: block;
       height: 24px;
       line-height: 24px;
       color: #ffffff;
   }
   
   .socialbutton-name {
       vertical-align: top;
   }
   
   .twitter-share-button {
       background-color: #55acee;
   }
   
   .twitter-share-button:hover {
       background-color: #4387ba;
   }
   
   .facebook-share-button {
       background-color: #3c568b;
   }
   
   .facebook-share-button:hover {
       background-color: #2a3c61;
   }
   
   .plusone-share-button {
       background-color: #dc4b39;
   }
   
   .plusone-share-button:hover {
       background-color: #c24332;
   }
   
   .hatena-share-button {
       background-color: #00a4de;
   }
   
   .hatena-share-button:hover {
       background-color: #007dab;
   }
   
   .pocket-share-button {
       background-color: #ee4056;
   }
   
   .pocket-share-button:hover {
       background-color: #ba3244;
   }
   </style>
   

3. <b:widget id='Blog1' type='Blog'> の子要素で id が shareButtons の b:includable タグ の 兄弟 に、以下の タグ を コピペ します。

   挿入場所

   

   挿入するコード

   <b:includable id='shareButtons3' var='post'>
     <!-- twitter -->
     <span class='goog-inline-block sharebutton_twitter'>
       <a class='twitter-share-button socialbutton' expr:href='"https://twitter.com/share?url=" + data:post.url + "&amp;text=" + data:post.title' target='_blank'>
         <span id='tweetcount' class='socialbutton-count'/>
         <span class='socialbutton-button'>tweet</span>
       </a>
     </span>
     <!-- facebook -->
     <span class='goog-inline-block sharebutton_facebook'>
       <a class='facebook-share-button socialbutton' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url + "&amp;t=" + data:post.title' target='_blank'>
         <span id='facebookcount' class='socialbutton-count'/>
         <span class='socialbutton-button'>share</span>
       </a>
     </span>
     <!-- google +1 -->
     <span class='goog-inline-block sharebutton_plusone'>
       <a class='plusone-share-button socialbutton' expr:href='"https://plusone.google.com/_/+1/confirm?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'>
         <span id='plusonecount' class='socialbutton-count'/>
         <span class='socialbutton-button'>+1</span>
       </a>
     </span>
     <!-- hatena blog -->
     <span class='goog-inline-block sharebutton_hatebu'>
       <a class='hatena-share-button socialbutton' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'>
         <span id='hatenacount' class='socialbutton-count'></span>
         <span class='socialbutton-button'>はてぶ</span>
       </a>
     </span>
     <!-- pocket -->
     <span class='goog-inline-block sharebutton_pocket'>
       <a class='pocket-share-button socialbutton' expr:href='"https://getpocket.com/edit?url=" + data:post.url' target='_blank'>
         <span id='pocketcount' class='socialbutton-count'></span>
         <span class='socialbutton-button'>pocket</span>
       </a>
     </span>
   </b:includable>
   

4. bodyタグ の 末尾ギリギリ に、以下の scriptタグ（コード） を コピペ します。 非同期通信に jQuery を利用しているので、最初に jQuery を読み込むよう記載していますが、すでに別の場所で読み込んでいれば必要はありません。 "末尾ギリギリ"…と記載はしましたが、本当に最後に記載する必要はなく、末尾にあるスクリプトの塊の中に混じっていれば OK です。

   挿入場所

   

   挿入するコード

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   $(document).ready(function () {
       var url = '', href = '', query = '', location = null;
   
       // 現在のクエリパラメータを含まないURLを取得
       location = window.location;
       href = location.href.substr(0, location.href.length - location.search.length - location.hash.length);
   
       // ツイート数を取得
       url = '';
       url += 'http://urls.api.twitter.com/1/urls/count.json?url=';
       url += window.encodeURI(href);
       $.ajax({
           url: url,
           dataType: 'jsonp',
           success: function (data) {
               $(document.getElementById('tweetcount')).text(data.count || 0);
           }
       });
   
       // Facebookいいね数を取得
       url = '';
       url += 'http://graph.facebook.com/?id=';
       url += window.encodeURI(href);
       $.ajax({
           url: url,
           dataType: 'jsonp',
           success: function (data) {
               $(document.getElementById('facebookcount')).text(data.shares || 0);
           }
       });
   
       // google +1 数を取得
       url = '';
       url += window.encodeURI(href);
       query = '';
       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.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 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);
           }
       });
   
       // はてぶ数を取得
       url = '';
       url += 'http://api.b.st-hatena.com/entry.count?url=';
       url += window.encodeURI(href);
       $.ajax({
           url: url,
           dataType: 'jsonp',
           success: function (data, textStatus, jqXHR) {
               $(document.getElementById('hatenacount')).text(data || 0);
           }
       });
   
       // pocket数を取得
       url = '';
       url += window.encodeURI(href);
       query = '';
       query += 'SELECT content FROM data.headers WHERE url="https://widgets.getpocket.com/v1/button?label=pocket&count=vertical&v=1&url=';
       query += url;
       query += '" and ua="#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 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 = jQuery(data).find("content").text();
               var match = content.match(/<em id="cnt">(\d+)<\/em>/i);
               var count = (match != null) ? match[1] : 0;
               $(document.getElementById('pocketcount')).text(count);
           }
       });
   
       // クリックイベント登録
       $('.socialbutton').on('click', function (event) {
           event.preventDefault();
           window.open($(this).attr('href'), 'socialwindow', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes');
       });
   });
   </script>
   

5. ソーシャルボタン を 表示したい位置 に、以下の コード を コピペ します。

   挿入場所(例)

   

   挿入するコード

   <b:include data='post' name='shareButtons3'/>
   

以上で設置作業は完了です。 いよいよ、保存してプレビュー！！ きっとうまくいっている…ハズです。 正常に動作確認が終われば、後は好みなようにスタイルを変更していけばよいかと思います。

おまけ

今回、上記サンプルではアイコンがありません。 というより、「はてぶ」と「pocket」に関しては font-awesome にアイコンがないため、手軽に実装できませんでした。。 仕方がないので、画像を作成して CSSスプライト を実装してみました。 以下に CSSスプライト用 の 画像 と スタイルシート を掲載します。 ご自由にお使いください。

CSSスプライト用 画像

CSSスプライト用 スタイルシート

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-facebook {
    width: 14px;
    height: 14px;
    background-position: -5px -5px;
}

.sprite-google-plus {
    width: 13px;
    height: 14px;
    background-position: -5px -29px;
}

.sprite-hatebu {
    width: 17px;
    height: 14px;
    background-position: -5px -53px;
}

.sprite-pocket {
    width: 16px;
    height: 14px;
    background-position: -5px -77px;
}

.sprite-twitter {
    width: 17px;
    height: 14px;
    background-position: -5px -101px;
}

関連記事

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

Blogger に オリジナルデザイン の "pocket" ボタンを設置する簡単な手順をまとめます。

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

テンプレート の 編集手順

1. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 リンクは pocket に登録する URL を埋め込むように作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='pocket-share-button btn-social' expr:href='"https://getpocket.com/edit?url=" + data:post.url' target='_blank'>
       <span id='pocketcount'></span>
       <span>pocket</span>
     </a>
     ...
   </b:widget>
   

2. bodyの閉じタグ直前に以下のスクリプトを挿入します。 pocket に登録された数を取得する処理を行います。 非同期で取得するのに jQuery を利用しているので、jQuery をあらかじめ読み込んでおきます。 なお、ポストページの URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

     ...
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     <script type='text/javascript'>
     (function () {
       var url = '', query = '';
   
       url += window.encodeURI(window.location.href || '');
   
       query += 'SELECT content FROM data.headers WHERE url="https://widgets.getpocket.com/v1/button?label=pocket&amp;count=vertical&amp;v=1&url=';
       query += url;
       query += '" and ua="#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 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 = jQuery(data).find("content").text();
           var match = content.match(/&lt;em id="cnt"&gt;(\d+)&lt;\/em&gt;/i);
           var count = (match != null) ? match[1] : 0;
           $(document.getElementById('pocketcount')).text(count);
         }
       });
     })();
     </script>
   </body>
   

関連記事

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

Blogger に オリジナルデザイン の "はてぶ(はてなブックマーク)" ボタンを設置する簡単な手順をまとめます。

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

テンプレート の 編集手順

1. ポストデータを表示するタグ内で、表示したい位置に以下のタグを挿入します。 ブックマーク時のに URL を指定するよう作成しています。

   <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog'>
     ...
     <a class='hatebu-share-button btn-social' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'>
       <span id='hatenacount'></span>
       はてな
     </a>
     ...
   </b:widget>
   

2. bodyの閉じタグ直前に以下のスクリプトを挿入します。 前提として必要な外部ファイルは jQuery のみです。 jQueryを利用してブックマーク数を取得する処理を行います。 URL は JavaScript で自動取得するので、コードはそのままコピペで動作するはずです。

     ...
     <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
     <script type='text/javascript'>
     (function (id) {
       var url = '';
   
       url += 'http://api.b.st-hatena.com/entry.count?url=';
       url += window.encodeURI(window.location.href || '');
   
       $.ajax({
         url: url,
         dataType: 'jsonp',
         success: function(data, textStatus, jqXHR) {
           $(document.getElementById('hatenacount')).text(data|| 0);
         }
       });
     })();
     </script>
   </body>
   

関連記事

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

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

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

キー	必須	型	値
(規定)	○		なし。
CategoryCount		REG_DWORD	サポートしているイベントカテゴリ数。
CategoryMessageFile		REG_SZ / REG_EXPAND_SZ	カテゴリメッセージファイルへのパス。
EventMessageFile	○	REG_SZ / REG_EXPAND_SZ	1つ以上のメッセージファイルへのパス。 セミコロン区切りで複数指定可能。
ParameterMessageFile		REG_SZ / REG_EXPAND_SZ	パラメータメッセージファイルへのパス。
TypeSupported	○	REG_DWORD	サポートするイベントログタイプのビットマスク。 EVENTLOG_ERROR_TYPE (0x0001) EVENTLOG_WARNING_TYPE (0x0002) EVENTLOG_INFORMATION_TYPE (0x0004) EVENTLOG_AUDIT_SUCCESS (0x0008) EVENTLOG_AUDIT_FAILURE (0x0010)

レジストリファイル（.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"];

処理速度 測定結果

Chrome 40.0.2214.111 m 単位：[msec]

	平均	1	2	3	4	5
trim1	982.8	529	334	1338	1337	1376
trim2	1181.2	429	1326	1401	1370	1380
trim3	1068.0	420	1378	1064	1194	1284
trim4	484.4	335	1118	305	318	346

 

Internet Explorer 11 単位：[msec]

	平均	1	2	3	4	5
trim1	1633.0	1578	1333	1961	2223	1070
trim2	1112.4	1080	1040	1091	1291	1060
trim3	755.4	585	560	612	1415	605
trim4	917.4	453	446	450	1658	1580

まとめ と 考察

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

参考記事

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