ブログ高速化を狙って? Twitter Follow Badgeを自作した。

ちょっと前の話題だけど、「Googleがついに順位決定に表示速度を使い始めた」らしい。

ウェブマスターツールでも「サイトのパフォーマンス」でサイトの読込時間のグラフが出るようになったし、またアドバイスとしてDNSルックアップを削減しなさいとか、gzip圧縮を有効にしなさいとか教えてくれるようになった。
これはこれで便利だけど、僕自身はまだ、サイトの読込時間にそんなに神経尖らせる時期じゃないなぁと思ってる。漠然と。

まぁでも、色んなブログツール使ってるとブログ自体は一見華やかでいいけど、確かにDNSルックアップは増大するし、サイトのパフォーマンスは低下する。
今回はあまりにもDNSルックアップの回数が多かったので、ブログツールの見直しを行った。
実際にブログへの流入が望めないブログツールは一気に削除した。

また、今まではTwitterのFollowバッジとして、Twitter “Follow” Badgeを使ってたけど、ここのサーバーが頻繁に落ちるし、これもまたDNSルックアップを増やしている要因なので、自作することにした。

Twitter Follow Badge
Twitter Follow Badge

ただ、リンクする画像をサイドに表示するだけなので、なんてことのない処理だけど。。。
まぁ、Twitter以外にも、Flickrやmixi等も対象に出来るし、自分の好きな画像を使えるので使い勝手はいいはず。
htmlで直接書いてもよかったけど、JavaScriptで。
関数を公開するので使いたい人はコピーして使って下さい。

function showbadge(){
	var side = "l"; //"l":左寄せ "r":右寄せ
	var top = 130; //画像の上位置
	var width = 30; //画像の幅
	var height = 129; //画像の高さ
	var imgUrl = "http://daisuke-watanabe.com/img/twitter_logo.gif"; //画像のURL
	var divId = "TwitterBadge"; //生成するDIVのID(任意で)
	var tipTitle = "followしてね"; //ToolTipの文言
	var linkUrl = "http://twitter.com/dw5"; //リンク先URL
	
	if(!window.XMLHttpRequest)return;
	if(side!='l')
	{
		side='r';
	}
	tabStyleCode='position:fixed;'+'top:'+top+'px;'+'width:'+width+'px;'+'height:'+height+'px;'+'z-index:10000;'+'cursor:pointer;'+'background:url('+imgUrl+') no-repeat;';
	if(side=='l')
	{
		tabStyleCode+='left:0; background-position:right top;';
	}
	else
	{
		tabStyleCode+='right:0; background-position:left top;';
	}
	
	if(!document.getElementById(divId))
	{
		tfbMainDiv = document.createElement('div');
		tfbMainDiv.setAttribute('id',divId);
		document.body.appendChild(tfbMainDiv);
	}
	else
	{
		tfbMainDiv = document.getElementById(divId);
	}
	tfbMainDiv.innerHTML += '
'; }

上記関数を読み込んでるjsファイルに追加、もしくは新規jsファイルを使ってアップロード
そして</body>の直前で呼び出せばOK。


必ず</body>の直前じゃないとIEでうまく言うことを聞いてくれません。。。

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス

著者/訳者:Steve Souders

出版社:オライリージャパン( 2010-04-10 )

定価:

Amazon価格:¥ 3,024

大型本 ( 324 ページ )

ISBN-10 : 4873114462

ISBN-13 : 9784873114460


【Ajax】HTMLのtableを拡張(行ストライプ、ソート、リサイズ、セル編集)するTableKit(基本編日本語訳)

ASP.NETにはGridViewがあるので、Ajaxを使ったtableのソートや編集機能は簡単に実装出来る。
しかしhtml単体、php、perlなどの言語でtableを作成し、そのtableにAjaxでソートやセル編集を実装するのに、ちゃんとしたサンプルを持ってなかったので。。。
今回、TableKitというPrototypeを使ったtable拡張のツールを使って自分なりのサンプルを作っておこうと試してみたので、備忘録代わりにメモ。

TableKitサンプル

名称 値段 備考
りんご 100 青森産のおいしいりんご
バナナ 120 今が食べごろ
200 残りわずか
いちご 300 10個入り
みかん 150 甘くておいしい

サンプルをさわってもらうと分かるが、ヘッダをクリックするとソートする。
またヘッダセルの右ボーダーをドラッグアンドドロップして列のリサイズが出来る。
そして、編集したい項目をクリックするとそのセルだけを編集できる。

TableKitのインストール方法

まず本家TableKitのサイトから必要なファイルをダウンロードしサーバーにアップロード。
HTMLでスクリプトを読み込む。
prototype.jsとtablekit.jsは必須。
fastinit.jsは任意で。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="fastinit.js"></script>
<script type="text/javascript" src="tablekit.js"></script>

そして対象のテーブルにclassを与える。

<table class="sortable resizable editable">

ここでは3つのclassを指定したが、それぞれ、

‘sortable’
ソート機能 (行をストライプ状にする)
resizable’
リサイズ機能
‘editable’
セル編集機能

ただし、’editable’ (セル編集機能)を指定した場合は、次のようにセルを編集するためのAjaxURIを設定する。

TableKit.options.editAjaxURI = '/scripts/echo.php';

テーブルにID属性がない場合は、自動で、tablekit-table-nn(nnはオートナンバー)振られる。

TableKitのオプション変数

TableKitは基本的にオプション変数を変更するだけで、色々と設定が可能。
オプション変数の一覧は以下の通り。

Option : Default
autoLoad : true:  //スクリプトを自動的でロードしたくない場合、falseに設定)
stripe : true: //行のストライプ化
sortable : true: //ソート機能
resizable : true: //リサイズ機能
editable : true: //セル編集機能
rowEvenClass : 'roweven': //行のストライプ化に使用されるcssのクラス
rowOddClass : 'rowodd': //行のストライプ化に使用されるcssのクラス
sortableSelector : ['table.sortable']: //ソート機能を付与するテーブルを指定するセレクタ
columnClass : 'sortcol': //ソート機能を付与する行のヘッダセルのcssクラス
descendingClass : 'sortdesc': //DESC(降順)ソート行のヘッダセルのcssクラス
ascendingClass : 'sortasc': //ASC(昇順)ソート行のヘッダセルのcssクラス
noSortClass : 'nosort': //ソートを行わない行のヘッダセルのcssクラス
defaultSortDirection : 1: //全ての行のソート方向の初期状態 1:昇順, -1:降順
sortFirstAscendingClass : 'sortfirstasc': //初期状態で昇順ソートをかける行のヘッダセルのcssクラス
sortFirstDecendingClass : 'sortfirstdesc': //初期状態で降順ソートをかける行のヘッダセルのcssクラス
resizableSelector : ['table.resizable']: //リサイズ機能を付与するテーブルを指定するセレクタ
minWidth : 10: //リサイズするカラムの最小幅(px)
showHandle : true: //リサイズ用のポインタを表示する。falseにするとポインタ無しでリサイズ可
resizeOnHandleClass : 'resize-handle-active': //マウスポインタがリサイズ位置(セルの右のボーダー)にあるときのcssクラス
editableSelector : ['table.editable']: //セル編集機能を付与するテーブルを指定するセレクタ
formClassName : 'editable-cell-form': //セル編集機能時のformに付与するcssクラス
noEditClass : 'noedit': //セル編集不可を指定するcssクラス(個別に指定可能)
editAjaxURI : '/': //セル編集データを処理するファイルのURI)
editAjaxOptions : {}: //セル編集で使用するPrototype Ajax.Updaterのためのオプション

オプション変数は次のように直接変更することが可能。

TableKit.options.rowEvenClass = 'even';

テーブルのID属性を使用すれば、個々のテーブルにそれぞれのオプションを付与することも出来る。

TableKitの適用方法

TableKitを適用させる場合、上記で示したように、適用させるtableにclassを与えるか、もしくは以下の方法のいずれかが使用出来る。

セレクタを指定して適用させる場合

例えば class=”data-table”というテーブルに適用させる場合は、以下のようにしてセレクタを指定する。

TableKit.options.sortableSelector = ['table.data-table'];

手動で適用させる場合

TableKitのinit()関数で、以下のように特定のテーブル指定して適用させることが出来る。

TableKit.Sortable.init(table, {options});

TableKitオブジェクトをインスタンス化する方法

TableKitのオブジェクトは以下のようにインスタンス化することもできる。

var table = new TableKit(table, {options});

TableKitオブジェクトは、必要に応じてメソッド呼び出し各種設定をして指定する。
呼び出されない場合は自動的にデフォルト値で機能する。

table.sort(column, order) // ソートするカラム
table.resizeColumn(column, w) // リサイズするカラム
table.editCell(row, column) // 編集する特定のセル

とまぁ、ここまで、サンプルを作成するにあたって、本家英語サイトを自分なりにまとめてみた。
ので、解釈がちょっとおかしな所もあるかもしれないけど。。。
その時は、コメントなりで指摘して下さい。

折を見て、ソート編、リサイズ編、セル編集編もまとめてみようと思う。
まぁなんにせよ、こういうツールはホントに便利。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

著者/訳者:Douglas Crockford

出版社:オライリージャパン( 2008-12-22 )

定価:

Amazon価格:¥ 1,944

大型本 ( 198 ページ )

ISBN-10 : 4873113911

ISBN-13 : 9784873113913


【Ajax】JSライブラリはGoogleにおまかせ!!

PrototypeやjQuery、SwfobjectなどのAjaxのJSライブラリは、バージョンアップの度に、ダウンロードして最適化して、アップロードしないといけなかった。
複数のサイトとか管理してそれぞれにライブラリを保持してる場合はほんとにめんどくさく大変。
ライブラリ専用のドメインとって一括管理とかしてるけど、それでも面倒。
でも、そんなJSライブラリを一括してGoogleで管理して読み込んでしまおうという便利な話。
以下のようにgoogle.load()でライブラリ名とバージョンを指定するだけで、高速で安定した一般的なオープン ソース JavaScript ライブラリにグローバルにアクセスできる。

  google.load("jquery", "1.3.1");
  google.load("jqueryui", "1.5.3");
  google.load("prototype", "1.6.0.3");
  google.load("scriptaculous", "1.8.2");
  google.load("mootools", "1.2.1");
  google.load("dojo", "1.2.3");
  google.load("swfobject", "2.1");
  google.load("yui", "2.6.0");

または、Googleのサーバーにおいてあるファイルのパスを直接指定して読み込んで使えばよい。
Yahoo! User Interface Library(YUI)まで網羅してるあたりが、とてもありがたい。
Googleさんいつもどうもありがとう。
このあたりのライブラリっていつかはブラウザに組み込んでくれたらいいのに。
さらにはもっと簡素化してタグ化してくれたらいいのに。
まぁ便利なものはどんどん取り入れていこう。

デベロッパー ガイド – AJAX Libraries API – Google Code

【ASP.NET】Ajax非同期ポストバックの画像やメッセージの表示方法

ASP.NETでAjaxの非同期ポストバックの時の画像やメッセージを表示するためには、まず、ScriptManagerコントロールとUpdatePanelを配置する。
そして、メッセージや画像を表示するためのLabelを配置する。
そして以下のJavaScriptを読み込ませるだけで完成。

function pageLoad(){
    var mng = Sys.WebForms.PageRequestManager.getInstance();

    mng.add_initializeRequest(
        function(sender, args)
        {
            $get('LabelStatus').innerHTML = "
処理中です。。。"; } ); mng.add_endRequest( function(sender, args) { $get('LabelStatus').innerHTML = ""; } ); }

Ajaxで更新時やロード中のgifアニメ画像を生成してくれるサイト

Ajaxで更新時や、処理の重いページのロード中、グルグル回転したりするgifアニメ画像を見かけるが、あれって、自分で作ろうとするとちょっとメンドくさい。。。
そんなgifアニメ画像をを生成してくれる便利なサイトを見つけた。

Ajax loading gif generator

このサイトで気に入ったのは、画像の種類と2種類の色を選択するだけで画像を生成してくれるシンプルなところ。

こんな画像や
ajax-loader0

こんな画像
ajax-loader1

そしてこんな画像
ajax-loader
を簡単に作ってくれる。
便利ないいサイトだなぁ。

【JavaScript】ソースコードを綺麗に表示するdp.SyntaxHighlighter

ブログなどでよく、プログラムやCSSのソースコードを記述して公開することがある。
このブログでも、自分自身の備忘録のためにいろいろとソースコードを記述していることがおおい。
今までは<blockquote>で括ってしたの画像のように表示していた。

今までのソースコード表示
今までのソースコード表示

もっとすっきりとソースコードっぽく表示したいなぁ~という願望が出てきていろいろ調べてたらやっぱりある!
dp.SyntaxHighlighter
早速ダウンロードして設置してみた。
説明はリンク先のサイトを見てもらえばよく分かると思うが、個人的には<head>内が冗長になるがいやだったので、付属のjsファイルも、shCore.jsに追加記述し、cssファイルも自分のcssファイルの末尾に追加した。
すると次の画像のようなすっきりとハイセンスなソースコードが表示できるようになった。
新しい表示のソースコード
新しい表示のソースコード

うむ。いいね。

* XMLコードの場合、class=”xml”
* PHPコードの場合、class=”php”
* CSSコードの場合、class=”css”
* JavaScriptコードの場合、class=”js”
* Rubyコードの場合、class=”ruby”
* SQLコードの場合、class=”sql”
* Visual Basicコードの場合、class=”vb”
* Javaコードの場合、class=”java”
* pythonコードの場合、class=”python”
* C#コードの場合、class=”c#”
* C++コードの場合、class=”c”
* Delphiコードの場合、class=”delphi”

【Javascript】「金額表示等で使う3桁区切りのカンマ挿入関数」

忘れそうだから書いておく。

function addComma(str)
{
 var num = new String(str).replace(/,/g, '');
 while(num != (num = num.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
 return num;
}

【JavaScript】ヘッダを固定したままテーブルにスクロールをつける

テーブルが大きくなって来たときにテーブルにスクロールをつけたい時がある。

SuperTablesを使おうと思ったが。。。styleが自由に決められない。。。

そこで、なんとか簡単にスクロール出来ないものかとjavascriptで組んでみた。

スクロールをつけたいテーブルを<div>で括るだけで実装できる。

なかなかいいものができたな~

フッタも固定したいままの場合は<div class=”scrollFooterAri”>で括り、フッタは固定しない場合は<div class=”scrollFooterNashi”>で括るだけ。
なんとも簡単!!

まだまだバグも多いかもしれないけど、徐々に手直ししていこう。

※現在IE専用です。ASP.NETのGridView用に作りました。

サンプルはこちらです。要望などあればコメントください。

ヘッダを固定してテーブルにスクロールを付与

 

JavaScript 第5版

著者/訳者:David Flanagan

出版社:オライリー・ジャパン( 2007-08-14 )

定価:

Amazon価格:¥ 4,500

大型本 ( 704 ページ )

ISBN-10 : 4873113296

ISBN-13 : 9784873113296