Mashiki's javascript note

array_merge()と演算子「+」

2012-01-22T23:08:00.000+09:00

phpで配列を結合する関数がある。「array_merge()」だ。

よく使うパターンはこんなシーン。

$a = array_merge($a, $b);

$aと$bが連想配列なら同じことを

$a = $b+$a;

と書ける。
足し算だが「+」演算子の左右の変数を入れ替えると結果が変わってしまう。
共通のキーがあった場合に、上書きをしないからだ。


$a=array(
 'x'=>'aX',
 'y'=>'aY',
);
$b=array(
 'y'=>'bY',
 'z'=>'bZ',
);

だった場合、

$a+$b

は


array(
 'x'=>'aX',
 'y'=>'aY',
 'z'=>'bZ',
);

となり、

$b+$a

は


array(
 'x'=>'aX',
 'y'=>'bY',
 'z'=>'bZ',
);

になる

$aと$bに共通のキーがないか、共通だった場合、$aを採用するならば

$a += $b;

と書くことができる。

連想配列の変数名は長めになることが多いのでこの書き方ができればありがたいが、
ここまで短く書けるシーンにあまりであったことがないのが残念。
でもこうして整理してみると、パラメータ$aをデフォルト値$bで補完する場合に使えそうだなあ。

$a, $bが通常の整数をキーに持つ普通の配列だった場合、「+」演算子の挙動はarray_mergeの挙動と著しく違うので知らないととまどう。

array('a1','a2','a3')+array('b1','b2','b3')

の結果はどうなるか？

array('a1','a2','a3')

となる

行をドラッグして並び替えるGridサンプル

2012-01-20T22:00:00.000+09:00

行をドラッグして並べ替えるGridサンプルに移転しました

Bloggerでコード整形を行う

2012-01-18T10:29:00.001+09:00

Bloggerに張っているソースコードやコマンドの実行結果等が見にくいので、下記のブログを参考にデザインを変更してみた

seiji's 十八番: [SyntaxHighlighter] bloggerに整形済みテキスト、プログラムソースコードなど...

SyntaxHighlitghterは以前、ExtJSでSVNビューワを作ったときに使ったことがあったので久しぶりに使ってみた。

やることは、上記のリンクに書いてある通り。ただ、使用するブラシの種類が違っていたのでそこだけ、選択を変えた。
現在使っていないプログラミング言語はばっさり捨て、テキスト用に「Plain」をdiff用に「Diff」を追加した。「Xml」は外しかけたが、htmlを整形するために必要だった。

差し込んだコードは以下の通り。


<!--ここからsyntaxHighlighterをコピペした-->
<link type='text/css' rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' />
<link type='text/css' rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' />
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' />
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

ついでにメインのカラムの横幅を少し広げて表示できる桁数を増やした


-      <b:variable default='960px' name='content.width' type='length' value='860px'/>
----
+      <b:variable default='960px' name='content.width' type='length' value='1000px'/>

JSBuilderでの圧縮作業の手順の改善

2012-01-17T10:30:00.001+09:00

UTF-8のソースを圧縮にコンテンツを移行しました。

JSBuilderでアプリケーションを配置する

2012-01-14T04:31:00.000+09:00

JSBuilderで配布ファイルを最適化にコンテンツを移行しました

strftimeで日付がずれる

2011-11-08T22:07:00.000+09:00

もしかしたら有名な話なのかもしれませんが、今日スケジュールの画面のデモをphpで作っていたときにちょっとはまった。クライアントにイメージをつかんでもらうための簡単なカレンダをphpでループさせて作っていたのだが、デモプログムの一部で、

date_default_timezone_set('Asia/Tokyo');
$base = strtotime('2011-11-01');
$days = explode(',', '日,月,火,水,木,金,土');
for ($i=0; $i<30; ++$i) {
 $date = $base+24*60*60*$i;
 $mmdd = strftime('%m/%d', $date);
 $day = $days[strftime('%w', $date)];
 echo "<br>$i: $mmdd($day)";
}

みたいに、今月の頭からループで２４時間づつ増やしながら日付を表示させて、カレンダの日付の部分を表示させようとしたら、想定外の出力に！

0: 11/01(火)
1: 11/02(水)
2: 11/03(木)
3: 11/04(金)
4: 11/05(土)
5: 11/06(日)
6: 11/06(日)
7: 11/07(月)
8: 11/08(火)
9: 11/09(水)
10: 11/10(木)
：

打ち合わせ開始まで３０分しかなかったので、軽いパニックに。
誤差が蓄積されたような動きであったので、とりあえず、その場は

$base = strtotime('2011-11-01 14:00');

変更したところ、想定の出力で動き、残りの部分のコーディングに戻ることができた。

気になったので、今、「夏時間」をwikipediaで調べたら、

アメリカ合衆国（一部除く。前述のとおり2007年から次のように変更され実行されている）、カナダ（一部除く）、メキシコ（一部除く） - 3月第2日曜日午前2時〜11月第1日曜日午前2時（現地時間基準。開始日には2時が3時になり（1時59分59秒の次が3時00分00秒）、終了日は2時が再度1時（1時59分59秒の次が1時00分00秒）になるため、開始日は1日が23時間、終了日は逆に25時間になる）

と、アメリカでは11/6は２５時間あることがわかった。ちなみに前のスクリプトに時間まで表示してみると、

0: 11/01 00:00(火)
1: 11/02 00:00(水)
2: 11/03 00:00(木)
3: 11/04 00:00(金)
4: 11/05 00:00(土)
5: 11/06 00:00(日)
6: 11/06 23:00(日)
7: 11/07 23:00(月)
8: 11/08 23:00(火)
9: 11/09 23:00(水)
10: 11/10 23:00(木)

11/6の00:00に24時間を足すと、11/6の23:00になっている。

ああ、すっきり！！、でもさ、夏時間のない'Asia/Tokyo'のロケールのはずじゃん。まいっか。いや、よくないな、よくない。
ここで、デジャヴが、どっかの環境で'Asia/Tokyo'が効かなくて、GMT-9って指定したことあったっけ。

 date_default_timezone_set('Etc/GMT-9');
 $base = strtotime('2011-11-01');
 $days = explode(',', '日,月,火,水,木,金,土');
 for ($i=0; $i<30; ++$i) {
  $date = $base+24*60*60*$i;
  $mmdd = strftime('%m/%d  %H:%M', $date);
  $day = $days[strftime('%w', $date)];
  echo "<br>$i: $mmdd($day)";
 }

結果は

0: 11/01 00:00(火)
1: 11/02 00:00(水)
2: 11/03 00:00(木)
3: 11/04 00:00(金)
4: 11/05 00:00(土)
5: 11/06 00:00(日)
6: 11/07 00:00(月)
7: 11/08 00:00(火)
8: 11/09 00:00(水)
9: 11/10 00:00(木)
10: 11/11 00:00(金)

と、よしっ！きれいだ。ってなんでAsia/Tokyoと結果が違うの？
あ、そっか。日本って震災の節電の関係で夏時間設定されたんだっけ。
なんか違う。眠いからに違いない。寝よう。

よし、リフレッシュ。

ソースを少し変えてタイムゾーンを変えて流せるようにした。

echo "<pre>\n";
printDays('UCT');
printDays('Etc/GMT-9');
printDays('Asia/Tokyo');
printDays('America/New_York');

function printDays($timezone) {
echo "timezone:$timezone\n";
date_default_timezone_set($timezone);
$base = strtotime('2011-11-01');
for ($i=4; $i<8; ++$i) {
$date = $base+24*60*60*$i;
$mmdd = strftime('%m/%d %H:%M', $date);
echo "$i: $mmdd\n";
}
echo "base:$base\n";
echo "now:".strftime('%Y-%m-%d %H:%M:%S')."\n\n";
}

結果はこんな感じ

timezone:UCT
4: 11/05 00:00
5: 11/06 00:00
6: 11/07 00:00
7: 11/08 00:00
base:1320105600
now:2011-11-08 23:50:43

timezone:Etc/GMT-9
4: 11/05 00:00
5: 11/06 00:00
6: 11/07 00:00
7: 11/08 00:00
base:1320073200
now:2011-11-09 08:50:43

timezone:Asia/Tokyo
4: 11/05 00:00
5: 11/06 00:00
6: 11/06 23:00
7: 11/07 23:00
base:1320120000
now:2011-11-08 18:50:43

timezone:America/New_York
4: 11/05 00:00
5: 11/06 00:00
6: 11/06 23:00
7: 11/07 23:00
base:1320120000 now:2011-11-08 18:50:43

そうそう、日本は震災でアメリカに..そんなわけない。
使っているサーバのタイムゾーンのデータが壊れているようだ。

ローカルのphp5.3.3の環境では、timezone:Asia/Tokyoの表示は
timezone:Etc/GMT-9と同じ結果になっている。

不思議な動作をするサーバはphp5.3.1。

業務で使うサーバもほぼ同じ環境だから確認しておかなくては。

mySQLの CASE WHENはSQLが長くなる

2011-09-08T13:19:00.002+09:00

mySQLの CASE WHENはSQLが長くなるので、短く書く方法を探ってみる。

mySQLのマニュアル比較演算子の冒頭に
「比較演算は、1（TRUE）、0（FALSE）、または NULL の値を返します。」
と書かれている。

なので、下記４つのSQLはすべて同じ結果になる。（はずw。ただし列Cは数値型だとする）


SELECT CASE WHEN `a`=`b` THEN `c` ELSE 0 END FROM `abc`;
SELECT CASE `a` WHEN `b` THEN `c` ELSE 0 END FROM `abc`;
SELECT IF(`a`=`b`,`c`,0) FROM `abc`;
SELECT (`a`=`b`)*`c` FROM `abc`

お好みはどれでしょう。

mySQLについてのメモ

2011-05-11T09:18:00.002+09:00

mySQLのINTのMAX値

Unsigned で、4G(40億)

mySQLでの正規表現の利用

正規表現は　where `name` REGEXP 'a*' のように使用する

mySQLのvarchar、textの比較について

インデックスを張る場合２５５文字以内のキー長を指定する必要がある

他のDBのテーブルを参照するには

同じmySQLサーバ内なら、select * from db_name.table_nameでOK

他のDBのテーブルとJOINできるか

下記のように普通にJOINできる
SELECT * FROM `mytable` join `dbname`.`atable` A on `mytable`.`id`=A.`id`

synonymはあるか

無い。
viewを使えば同様のことができる。オーバーヘッドが問題にならないか注意して使う

日付時刻を丸める関数(TRUNCなど)はあるか

日付丸め専用の関数はない。
文字列にフォーマットして丸める例はよく見かける
計算式で丸める例
　時間：DATE(`date`)+INTERVAL HOUR(`date`) HOUR
　日：　DATE(`date`)
　週：　DATE(`date`)-INTERVAL DAYOFWEEK(`date`)-1 DAY
　月：　DATE(`date`)-INTERVAL DAYOFMONTH(`date`)-1 DAY

PostgreSqlにある「関数(式)インデックス」はあるか

無い。→インデックスを使いたい式を展開した列が必要

タイムゾーンはDBもしくは接続毎に再指定可能か

可能
mysql> set time_zone = '-7:00';
Query OK, 0 rows affected (0.00 sec)

mysql> select now();
+---------------------+
| now() |
+---------------------+
| 2011-05-05 22:21:37 |
+---------------------+
1 row in set (0.00 sec)

mysql> set time_zone='+9:00' ;
Query OK, 0 rows affected (0.00 sec)

mysql> select now();
+---------------------+
| now() |
+---------------------+
| 2011-05-06 14:22:01 |
+---------------------+
1 row in set (0.00 sec)

Ext4.0ドキュメントの印刷

2011-04-21T13:46:00.006+09:00

Ext4.0のドキュメントページを印刷するブックマークレットを作ってみた。

今回は隠したインラインフレームに作成して、そのまま印刷するのではなく、
印刷可能なWindowを表示するようにした。ExtWikiでも試行錯誤したが、プレビュー代わりになりこれが一番便利だった。
また、ガイドがマニュアルに統合されたので、こちらも印刷しやすいようにしてみる。

例によってブックマークレット表示サイトで表示してみる。
ExtJS4.0　ドキュメント印刷(クラス)

ExtJS4.0　ドキュメント印刷(ガイド)

もともとβ３の時に作成したが、ファイナルで少し変わっていたので上記に修正した。β３の時のものはこんな感じ
ExtJS4.0β３ドキュメント印刷(クラス)

画像をphpスクリプトのみで表示する

2011-04-03T11:58:00.000+09:00

画像のパスが問題で、プラグインやライブラリの設計や導入方法が若干複雑になる事がある。
こんなとき、画像をプログラムに取り込んでしまうと設定自体不要になるケースがある。

そのやり方をメモしておく
１．画像をbase64文字列に変換する
２．変換したbase64文字列をプログラムに組み込む

１．画像をbase64文字列に変換する
　次のようなプログラムでbase64文字列を作成できる

img_encode.php

<?php
  //クォート内はターゲットのファイル名
  die(base64_encode(file_get_contents(''));
?>

出力は下記のようになる

R0lGODlhFQATAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/MM//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8zzP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xmzMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswAM8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZzJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkzM5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bMzGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZmM2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZMzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMAzDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDMMwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAzzAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAMwAAAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAFQATAAAI/AABCBzoaRQpUVSopFJFaqDDgXny/JH4B8+fUchUOVP1UOCTKhEjjho5KlUqUqpGPXxSoKVLPwmp+CnZ0s/AJypaOqmCJ48fPFScUBGVqmVKgSRaqkhosSWVmi4LOAPgpkTUlkBdPjXqzBmpEjkLqFAhNKFSoUZNkkoqduxSJy7H1iw5ShXbq1iVbi0gCtVXt0up4PnpByYVskz9kKIz1okKnnkGQy0Aw2wBZCUcF6iy2elMP1H9iPLzCcAczqEnF8ha4I/AEnudthTlEtVWTwOtuqS9enZUPQ9LzASacKloVKj8dOoIoESehGXLCgbOXCAmT53++JmYB/fDgAA7

２．変換した文字列をプログラムに組み込む
　上記で変換して得られたbase64文字列をbase64_decodeしヘッダーとともに出力する。
　１行が長い場合、適当な長さに切り、使うときに文字列として連結する。

img_decode.php

<?php
  $img = 'R0lGODlhFQATAPcAAP//////zP//mf//Zv//M///AP/M///MzP/Mmf/MZv/M'
 .'M//MAP+Z//+ZzP+Zmf+ZZv+ZM/+ZAP9m//9mzP9mmf9mZv9mM/9mAP8z//8z'
 .'zP8zmf8zZv8zM/8zAP8A//8AzP8Amf8AZv8AM/8AAMz//8z/zMz/mcz/Zsz/'
 .'M8z/AMzM/8zMzMzMmczMZszMM8zMAMyZ/8yZzMyZmcyZZsyZM8yZAMxm/8xm'
 .'zMxmmcxmZsxmM8xmAMwz/8wzzMwzmcwzZswzM8wzAMwA/8wAzMwAmcwAZswA'
 .'M8wAAJn//5n/zJn/mZn/Zpn/M5n/AJnM/5nMzJnMmZnMZpnMM5nMAJmZ/5mZ'
 .'zJmZmZmZZpmZM5mZAJlm/5lmzJlmmZlmZplmM5lmAJkz/5kzzJkzmZkzZpkz'
 .'M5kzAJkA/5kAzJkAmZkAZpkAM5kAAGb//2b/zGb/mWb/Zmb/M2b/AGbM/2bM'
 .'zGbMmWbMZmbMM2bMAGaZ/2aZzGaZmWaZZmaZM2aZAGZm/2ZmzGZmmWZmZmZm'
 .'M2ZmAGYz/2YzzGYzmWYzZmYzM2YzAGYA/2YAzGYAmWYAZmYAM2YAADP//zP/'
 .'zDP/mTP/ZjP/MzP/ADPM/zPMzDPMmTPMZjPMMzPMADOZ/zOZzDOZmTOZZjOZ'
 .'MzOZADNm/zNmzDNmmTNmZjNmMzNmADMz/zMzzDMzmTMzZjMzMzMzADMA/zMA'
 .'zDMAmTMAZjMAMzMAAAD//wD/zAD/mQD/ZgD/MwD/AADM/wDMzADMmQDMZgDM'
 .'MwDMAACZ/wCZzACZmQCZZgCZMwCZAABm/wBmzABmmQBmZgBmMwBmAAAz/wAz'
 .'zAAzmQAzZgAzMwAzAAAA/wAAzAAAmQAAZgAAMwAAAP///wAAAAAAAAAAAAAA'
 .'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
 .'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
 .'AAAAAAAAAAAAAAAAAAAAACwAAAAAFQATAAAI/AABCBzoaRQpUVSopFJFaqDD'
 .'gXny/JH4B8+fUchUOVP1UOCTKhEjjho5KlUqUqpGPXxSoKVLPwmp+CnZ0s/A'
 .'JypaOqmCJ48fPFScUBGVqmVKgSRaqkhosSWVmi4LOAPgpkTUlkBdPjXqzBmp'
 .'EjkLqFAhNKFSoUZNkkoqduxSJy7H1iw5ShXbq1iVbi0gCtVXt0up4PnpByYV'
 .'skz9kKIz1okKnnkGQy0Aw2wBZCUcF6iy2elMP1H9iPLzCcAczqEnF8ha4I/A'
 .'EnudthTlEtVWTwOtuqS9enZUPQ9LzASacKloVKj8dOoIoESehGXLCgbOXCAm'
 .'T53++JmYB/fDgAA7';
  header('Content-Type: image/gif');
  die(base64_decode($img));
?>

apacheのmod_rewriteで%2fを変換

2011-04-03T10:53:00.000+09:00

apacheは通常エンコードされたパス分離文字(%2F)が存在するURLを404(Not found)エラーで拒否する。

通常は問題にならないのだろうが、パラメータをURLに埋め込み、mod_rewiteでphpに処理させるとき、urlやpathのようなパラメータを扱おうとすると顕在化する。

apacheにこれを許可させるには、apacheのhttpd.confに「AllowEncodedSlashes On」を記述すればよい。

VartualHostディレクティブ内でもOKだが、.htaccessに記述するとエラーとなる。

参考
apacheマニュアル
PHPプロ！mod_rewriteでの%2F問題

ExtJSのStoreにデータダウンロードの機能を追加する PART2

2011-03-24T21:40:00.000+09:00

前回、時間の無い中作った「ExtJSのGridやChartにデータダウンロードの機能を追加する」を利用したアプリケーションで、追加要望が出たので拡張について少し考えてみた。

前回、拡張の方法としてはGridに特化して、Gridで表示されているカラムやrendererを利用して、見えているものが、タブ区切りでダウンロードできる事を検討した。が、見えているものとは別に列やフォーマットを指定できる方が汎用性が高いことが分かり、その方向で拡張を実施することとした。

拡張したdownloadメソッド

 /**
  * Download store data
  * @param {Object} opt (optional) Specifies download filename and columns.
  */
 Ext.data.Store.prototype.download = function(opt){
  opt = opt||{};
  var output=[],o=[],
   columns = opt.columns||(function(st){
    var cs=[], i=0;
    st.fields.eachKey(function(k) {cs.push(k);});
    return cs;
   })(this),
   fn = opt.filename||opt.fn||'download.txt';
  for (var i=0,col; col=columns[i]; ++i) {
   if (typeof col === 'string') {
    columns[i] = col = {field: col}
   }
   if (!col.header) col.header = col.field;
   if (!col.format) col.format = function(v,r){return v;};
   o.push(col.header);
  }
  output.push(o.join('\t'));
  this.each(function(rec) {
   var o=[];
   for (var i=0,col; col=columns[i]; ++i) {
    o.push(col.format(rec.get(col.field), rec));
   }
   output.push(o.join('\t'));
  });
  var form = Ext.DomHelper.append(document.body, {
   tag: 'form',
   style: 'display:none',
   action: 'download.php',
   method: 'post',
   cn:[{
    tag:'textarea',
    name:'body',
    html:output.join('\n')
   },{
    tag:'input',
    name:'Content-Disposition',
    value:'attachment;filename='+'"'+fn+'"'
   },{
    tag:'input',
    name:'Content-Type',
    value:'text/tab-separated-values'
   }]
  });
  form.submit();
  document.body.removeChild(form);
 }

呼出しサンプル１

http://www123.ddo.jp/grid/reload-chart.html

こちらではパラメータなしでdownloadメソッドを呼び出した例、storeの内容がそのままダウンロードされる

呼出しサンプル２

http://www123.ddo.jp/grid/array-grid.html

こちらはパラメータとして、ダウンロードファイル名や、列やフォーマットの指定を行ってダウンロードする例

使用に当たっては「ExtJSのGridやChartにデータダウンロードの機能を追加する」で使用したdownload.phpが必要となります。

phpの出力をブラウザやプロキシーにキャッシュさせない

2011-03-24T15:01:00.002+09:00

phpのヘッダーのマニュアル内にそのものが載っているが、下記を設定するとかなりキャッシュされにくくなるとのこと。

    header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // 過去の日付

ちなみに少し以前のマニュアルの例では、もう少しコテコテやっていた。

    // 日付が過去
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
    // 常に修正されている
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    // HTTP/1.1
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    // HTTP/1.0
    header("Pragma: no-cache");

phpで仮名を全角に、英数字と空白を半角に統一する(mb_convert_kana)

2011-03-11T11:28:00.006+09:00

何と1行でできる

mb_convert_kanaを使用する

/*「半角カタカナ」を「全角カタカナ」に変換し、
　「全角」英数字を「半角」に変換します。
　　オプションの意味
　　　K: かな半→全
　　　V: 濁点をマージ
　　　a: 英数字を半角にする
　　　s: スペースを半角にする（U+3000 -> U+0020）
 */

$str = mb_convert_kana($str, 'KVas', 'utf-8');

エンコードをEUCもしくはUTF-8とすれば、ついでに英数字の後に続く長音記号をハイフンに変換するのも簡単。

$str = mb_convert_kana($str, 'KVas', 'utf-8');
$str = preg_replace('/([a-z0-9])ー/i', '${1}-', $str);

Illuminations for Devellopers 1.1.5導入

2011-03-09T11:35:00.005+09:00

ExtJSでの開発やデバッグの効率を桁違いに高めてくれるかも知れないツールがFireFoxのアドオンとして提供されている。

名前は「Illuminations for Devellopers」で今日現在のバージョンは1.1.5となっている。Senchaのブログに載っていたのでインストールしてみた。

インストールは通常のFirefoxのアドオンと同じ。但し、アドオンFirebugが導入されていることは前提となります。
「ツール」→「アドオン」メニューから、「アドオンを入手」をクリックし、検索のテキストボックスに「Illuminations」と入力し検索すると

Illuminations for Developers for Firebug

作成者: Steven Roussey

が、見つかるのでこれを「Firefoxに追加」する。インストール完了後にFirefoxを再起動し、Firebugを開くと、一番右「接続」の隣に「Illuminations[Trial]」のタブが増えていることがわかる。赤い大きな「Buy or Login」のボタンが少々いやらしいが、まずは無視。

早速、ExtJSを使用しているページを見に行くと、ViewPort以下どのようにBorderLayoutがあり、その中にある入れ子のBorderLayoutがTabPanelでありどんなメニューとプロパティを持っているかなど、階層的に確認していくことができる。

今まで、FireFoxでこれを確認していくことはスクリプトのウォッチの機能でできないことはなかったが、いろいろな情報が頭に入っており、見たいデータを明確にして探さないと見つけることはできなかったし、探したオブジェクトがどんなクラスのオブジェクトかということですら、持っているプロパティやメソッドから推測することしかできなかった。

このアドオンの利用によりかなりデバッグの敷居が下がるかと思う。
まだ、全然見切れていないが、導入後気になったのはこのアドオンがトライアルで、製品版があるらしいということ。どんな機能の違いがあるのだろう。

ExtJSのGridやChartにデータダウンロードの機能を追加する

2011-03-01T10:43:00.008+09:00

ExtJSのGridやChartにデータダウンロードの機能を追加した際のメモ

ダウンロードといえば本来サーバ側に実装する機能だが、超短納期で片づけたかったため時間のかからなそうな、javascript側のStoreからダウンロードする方法を検討した。

作成したサンプルは以下の2つ。いずれもExtJSのサンプルに、ダウンロード機能を呼び出すためのボタンを追加したものとなる。

Chartのほうはサーバに無いデータを表示する例なので、よりStoreからのダウンロードに意味が出るかと思う。

http://www123.ddo.jp/grid/array-grid.html

http://www123.ddo.jp/grid/reload-chart.html

ダウンロードはクライアント側だけでは仕組み上実現できないので、ブラウザからPOSTされたデータをそのまま出力する鏡みたいなphpスクリプトを使用することにした。このあたり、javascriptだけでできる方法があるなら、是非コメントでアドバイスいただきたい。

用意したphpスクリプトdownload.phpは以下のようなものだ。
本来、3行で実装できるが、ヘッダの自由度を持たせるためと、最低限のセキュリティとして、リファラが同じサーバかだけのチェックを入れている。

<?php
 if (!isSet($_SERVER['HTTP_REFERER']) 
  || !preg_match('#^http://([^:/]+)#',$_SERVER['HTTP_REFERER'],$mch)
  || $mch[1]!==$_SERVER['SERVER_NAME']
 ) die('Security Error'); // simple security check
 foreach ($_POST as $header=>$val) {
  if ($header==='body') continue;
  header("$header: $val");
 }
 die($_POST['body']);
?>

ChartやGridPanelのスクリプトの変更方法は、ツールバーやツールボタンで、下記のStoreに追加したメソッドExt.data.Store::download(fn)を呼び出すというもの、StoreはGridやChartで使用しているものを、引数fnはダウンロードの際のファイル名を指定すればよい。

Ext.data.Store.prototype.download = function(fn){
    var output=[],o=[],
      fld = this.fields;
    fld.eachKey(function(key){o.push(key)});
    output.push(o.join('\t'));
    this.each(function(rec) {
      var o=[];
      fld.eachKey(function(key){o.push(rec.get(key))});
      output.push(o.join('\t'));
    });
    var form = Ext.DomHelper.append(document.body, {
      tag: 'form',
      style: 'display:none',
      action: 'download.php',
      method: 'post',
      cn:[{
        tag:'textarea',
        name:'body',
        html:output.join('\n')
      },{
        tag:'input',
        name:'Content-Disposition',
        value:'attachment;filename='+'"'+fn+'"'
      },{
        tag:'input',
        name:'Content-Type',
        value:'text/tab-separated-values'
      }]
    });
    form.submit();
    document.body.removeChild(form);
  }

今回の方式はStoreにfilterがかかっていれば、表示されているレコードのみDLされる。
Grid専用にするならば、これを一歩進め、ユーザが画面で操作した列の順番や列の表示/非表示を反映したり、列によってはrendererを指定できるようにすると、ユーザが見たままを手に入れるという意味で完成形になるのではと思う。

今回の例だと出力したLastUpdateの列のDateの出力形式は、欧米人がみればわかりやすいが、日本人向けでなく、Excelでそのまま処理できない等の不満はある。

英語版のフォーラムに投稿してみました
http://www.sencha.com/forum/showthread.php?125611-data-download-function-from-Grid-and-Chart

ExtJS Pivot Gridの拡張

2011-02-15T03:00:00.002+09:00

ExtJS3.3のPivotGridは、ヘッダのrendererは無く、セルのrendererのパラメータが値しか受け取れない仕様となっている。今回初めて使用したが、必要に迫られてHackしたのでメモしておく。

それぞれ下記に数行のコードを修正、追加すればよい
・ヘッダのrendererの実装： Ext.grid.PivotAxsisのbuildHeaders()メソッド
　　　行列のそれぞれ各ディメンジョンごとに指定可能
・セルのrendererの拡張： Ext.grid.GridViewのrenderRows()メソッド
　　　値以外に、行のカウンタ、列のカウンタ、行ヘッダの情報、列ヘッダの情報、
　　　グリッドの参照を受け取れるようにした

実装結果はこちら

http://www123.ddo.jp/extest3/pivot/modifiedpivotexample.html

ExtJS pivotのサンプル

2011-02-10T14:40:00.000+09:00

ExtJS pivotのサンプルは下記に紹介されているが、残念なことにリンクが切れている

Ext JS 3.3 Beta 2 がリリース

サンプルは別URLに残っているのでリンクをあげておく

サンプル１
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/simple.html
サンプル２
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/people.html
サンプル３
　http://dev.sencha.com/deploy/dev/examples/pivotgrid/countries.html

ExtJSで折れ線グラフを出したときの線のスタイル

2011-02-10T13:15:00.003+09:00

ExtJSのチャート(Ext.chart)は簡単にグラフを表示できるのだが、
マニュアルに何が指定できるのか説明がほとんどない。

デコンパイラでcharts.swfの内部を調べて何ができるのか少し調べてみた。
ほんとは動的にseriesを増減させるメソッドが無いか調べていたのだが
それらしいものは無かった。
代わりにseriesで指定できそうなstyleのプロパティを見つけたのでメモしておく
※visibilityでおおっと思ったがpi chart専用だった

{
 height:350,
 xtype: 'linechart',
 store: store,
 xField: 'date',
 series: [{
  type:'line',
  displayName: 'line1',
  yField: 'val1',
  style: {
   color: 0xFF9999,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 },{
  type:'line',
  displayName: 'line2',
  yField: 'val2',
  style: {
   color: 0x99FF99,
   lineSize:2,
   lineAlpha:0.6,
   alpha:0.6
  }
 }]
}

「color」はサンプルのコードにあり、意味も明らかだ
「lineSize」は線の太さでデフォルトの太めの線は「3」が設定してあるように思える
「lineAlpha」は線の不透明度でデフォルトは「1(おそらく不透明)」になっている
「alpha」はマーカの不透明度だと思う

他に
images 円グラフのみ
image 折れ線グラフのマーカのイメージ？
mode
colors
borderColor
borderAlpha
fillColor
fillAlPha
size
lineColor 折れ線グラムのみ
lineAlpha 折れ線グラムのみ
showAreaFill
areaFillAlpha
connectPoints 折れ線グラムのみ
connectDistinuousPoints
distinuousDashLength
showLabels
hideOverlappingLabels
font
visibility 円グラフのみ
skin 折れ線グラフのみ

とが、charts.swf > action(3) > Charts > setSeriesStyles() のswitchのcaseラベルにあったが、未調査。

ExtJS の Grid のヘッダーにスタイルを適用する

2011-02-08T10:36:00.002+09:00

ExtJS の Grid のヘッダーにスタイルを適用にまよったのでメモ

カラムの指定に

{header:'field1', css:'color: green;'},

のように指定すればセルにcssが適用されるが、
ヘッダに適用する為のコンフィグオプションは無くどうするか迷った。

　http://www.sencha.com/forum/showthread.php?94369-Grid-Header-Style&p=447180
をみるとidを指定しスタイルを書けばいいらしい。

スタイルの指定に迷ったが

{header:'field1', id:'field1'}

としたならば、

.x-grid3-hd-field1 {
  color: green;
}

セルも指定したいなら、

.x-grid3-hd-field1,.x-grid3-col-field1 {
  color: green;
}

とかけばいい。

json_encode()代替関数

2011-02-02T11:40:00.006+09:00

以前、php5.2未満のサーバのために、json_encode()の代替となる関数を書いた。
いくつかのプログラムで使用してきたが、3年以上たってバグを発見したので、メモしておく。

自作json_encode()は原形をほぼとどめていないが、
phpのマニュアルの中の02-May-2007 01:55のUser Contributed Notesで
Yi-Ren Chen at NCTU CSIEさんが書いたphp_json_encode()を改造して作ったものだ。

json作成のロジックで、数字だったらそのまま使い、文字ならばクォートして使用する
ような部分があるが、ここで数字の判定を

if (is_numeric($val)) return $val;

と記述していたが、これに

$data = array('id'=>'011')

のような入力を食わせると、

{"id":011}

が出力されてしまう。これはブラウザのjavascriptに8進数として処理され

{id:9}

と解釈される。

とりあえず

if (is_int($val)||is_float($val)) return $val;

のように記述し、

{id:"011"}

と受け取られるようになったことを確認したが、過去作ったシステムが、
異常動作しないかひやひやものだ。

Yi-Ren Chenさんのコードを元にjson_encode相当関数を作った世界中の人たちも
大丈夫だったのかなあと心配してみる。

修正済みコード
http://sourceforge.jp/projects/extwiki/svn/view/trunk/plugin/json_encode.php?view=markup&revision=107&root=extwiki

<?php // $Id: json_encode.php 3 2010-10-02 14:56:27Z mashiki $
/**
 * json_encode: use this  for early version(<5.2) of php
 *     which support "multibyte" but doesn't support "json_encode".
 * 
 * Modified by mashiki 2008,2009,2011
 * 
 * Original written by Yi-Ren Chen at NCTU CSIE as php_json_encode()
 *  User Contributed Notes 02-May-2007 01:55 in PHP online manual
 */
function json_encode($val) {
 if (is_int($val)||is_float($val)) return $val;
 if (is_bool($val)) return $val?'true':'false';
 if (is_array($val)) {
  $len = count($val);
  for($ii=0; $ii<$len && isset($val[$ii]); ++$ii) {}
  $temp = array();
  if($len==$ii) {
   for($i=0;$i<$len;$i++) {
    $temp[] = sprintf("%s", json_encode($val[$i]));
   }
   return '['. implode(",",$temp) .']';
  } else {
   foreach($val as $key => $item) {
    $temp[] = sprintf("%s:%s", json_encode($key), json_encode($item));
   }
   return '{'. implode(",", $temp) .'}';
  }
 }
 // else string
 static $from = array('\\',  "\n", "\r", '"');
 static $to   = array('\\\\','\\n','\\r','\\"');
 static $cmap = array(0x80, 0xFFFF, 0, 0xFFFF);
 return '"'. preg_replace_callback(
  '/&#([0-9]+);/',
  create_function('$match','return sprintf("\\u%04x", $match[1]);'),
  mb_encode_numericentity(str_replace($from, $to, $val), $cmap, 'UTF-8')
 ) . '"';
}
?>

window.printで１ページしか印刷できない問題

2011-01-23T10:40:00.005+09:00

ExtWikiでアクティブパネルの印刷をしようとし、タブの内容をiframeにコピーし、window.printを使って印刷するようにしたところ、最初の１ページしか印刷されないという現象に遭遇した。
同じ方法をExtJSのAPIドキュメントのタブパネルに試したところ、同じように１ページしか印刷されなかった。
　同様な現象が出たのでこれは一般的な問題かと思い、http://www.sencha.com/forum/showthread.php?121909-SOLVED-How-to-print-the-document-on-tabpanel&p=563722 の質問を投げてみた。その後、iframeを見えるようにして確認をしたところ、１瞬、スクロールバーが見えることに気がついた。ステップ実行で１つ１つスタイルシートを適用したところ原因が判明。

　結局この問題はdoc.cssにある「html,body {overflow:hidden}」の設定が問題だった。ExtWikiも初期にExtJSのAPIドキュメントの表示に似せようと、スタイルの設定を真似た為にこの設定が紛れ込んだようだ。
現在のExtJSはViewportを使用すると、上記のスタイルが設定されるので、この設定は不要であった。doc.cssに残っているのも歴史的な残骸かと思う。

作成した、ブックマークレット：ExtJS APIページの印刷
※上記は「Hide Inherited Members」と「Extend All Members」を反映しないので使い道はいまいちです

utf-8のjsファイルをextdocで処理する

2011-01-13T22:49:00.002+09:00

今まで、utf-8のjsファイルのext-docでの処理が文字化けしてしまうため、一旦、s-jisにしてから、処理を行っていた。
今日、ext-docのバージョンが上がっていないかと、
http://www.sencha.com/forum/showthread.php?55214-ext-doc-ExtJS-style-JavaScript-comments-processor/page26

にアクセスしたところ、javaのオプションで
java -Dfile.encoding=UTF8 -jar path_to\ext-doc.jar ...
とすればいいという情報を見つけた。
試してみると、文字化けもなくうまく動作する。

utf-8 → s-jis はサクラのマクロでやっていたので、手間としてはそれほど変わらないが、正解がわかったのですっきり。

ExtJSの問い合わせをするなら

2011-01-12T11:55:00.004+09:00

ExtJSの問い合わせをする場合、日本語のフォーラム「Ext International」に質問しても最近は誰もレスをつけていない。さびしい限りだ。

少々面倒だが、見ている人の数が圧倒的に多い英語のサイトに投稿するのが結局速そうだ。
手順はこんな感じ

　・問い合わせのテキストを作成し、翻訳サイト( http://www.excite.co.jp/world/english/ )等で翻訳する
　・ソースのコメントやリテラルの文字列を英語にし、コードタグ([code][/code])でくくる
　・http://www.sencha.com/forum/forumdisplay.php?40-Ext-Help でフォームにポストする

Ext-Helpにポストした投稿は

http://www.sencha.com/forum/search.php?do=finduser&userid=14691&contenttype=vBForum_Post&showposts=1&forumchoice%5B%5D=40

で調べられる。(14591は自分のユーザID)

winscpをバッチ処理で使用する

2011-01-07T09:34:00.006+09:00

こんなこともできるらしい。
サクラのマクロに取り込めば、いろいろなことが自動化できそう

下記を1行でコマンドラインに打つ

"C:\Program Files\WinSCP\winscp.com" /command
   "open ""mashiki@shell.sourceforge.jp"""
   "put ""C:\DLSoft\develop\ext-doc-1.0.131\extwikidoc.zip""
   ""/home/groups/e/ex/extwiki/htdocs/"""
   "exit"

参考
http://winscp.net/eng/docs/commandline
http://winscp.net/eng/docs/script_commands

実際に作って使っているのがこれ
・現在のファイルがextwiki-debug.jsか確認
・現在のファイルを保存する
・SJISにして名前を付けてextdoc用のフォルダに保存する
・ext-docに変換する
・生成されたファイル数が大量のためzipに固める
・zipをサーバのドキュメントルートにアップロードし解凍する


// ext-doc.js
var cmd, oe,
 TARGET = 'extwiki-debug.js',
 DOCDIR = 'C:\\DLSoft\\develop\\ext-doc-1.0.131',
 SAVEAS = 'DOCDIR\\source\\extwiki.js',
 MAKEDOC= 'java -jar DOCDIR\\ext-doc.jar'
   +' -p DOCDIR\\source/extwiki.xml'
   +' -o DOCDIR\\extwikidoc'
   +' -t DOCDIR\\template/ext/template.xml'
   +' -verbose',
 ZIPDOC = '"C:/Program Files/Lhaplus/Lhaplus.exe" /c:zip /o:DOCDIR DOCDIR\\extwikidoc',
 PUTFILE= '"C:/Program Files/WinSCP/winscp.com" /log=log.txt /command'
   +' "open ""mashiki@shell.sourceforge.jp"""'
   +' "cd ""/home/groups/e/ex/extwiki/htdocs/"""'
   +' "put ""DOCDIR\\extwikidoc.zip"""'
   +' "call unzip -o extwikidoc.zip"'
   +' "exit"'
 ws = new ActiveXObject("WScript.Shell"),
 fn = GetFilename().replace(/^.*\\/,'');
// 現在のファイルがextwiki-debug.jsか確認
if (fn!==TARGET) {
 ws.Popup('ファイル名"' + fn + '"は処理対象外です', 0, "ファイル名", 0);
} else {
 // 現在のファイルを保存する
 FileSave();

 // SJISにして名前を付けて保存する
 FileSaveAs(resolveVars(SAVEAS),0,1); // SJIS, CRLF

 // ext-docに変換する
 oe = ws.Run(
  resolveVars(MAKEDOC),
  1,   // ウィンドウをアクティブにして表示する。
  true // 終了するまでスクリプトの実行を停止
 );

 // zipに固める
 oe = ws.Run(
  resolveVars(ZIPDOC),
  1,   // ウィンドウをアクティブにして表示する。
  true // 終了するまでスクリプトの実行を停止
 );

 // zipをサーバにアップロードし解凍する
 oe = ws.Run(
  resolveVars(PUTFILE),
  1,   // ウィンドウをアクティブにして表示する。
  true // 終了するまでスクリプトの実行を停止
 );

}

function resolveVars(path) {
 return path.replace(/DOCDIR/g, DOCDIR);
}

SourceForgeのDiff画面でサイドバーを非表示にするブックマークレット

2011-01-03T12:22:00.002+09:00

SourceForgeのDiff画面は右側のサイドバーが大きく、せっかくソースを並べて表示できても、まったくもって見やすいとは言えない状態です。

下記で紹介しているブックマークレットはサイドバーを一時的に非表示にします。

SourceForgeの画面でサイドバーを一時的に非表示にする

ページ移動もしくはリロードすれば元に戻ります。
SourceForgeの収入源である広告の表示やクリックできるチャンスを損なうものではないと思っていますが、なにかお気づきの点があればご指摘いただければ。

Pukiwikiでブックマークレットを紹介できるようにする

2010-12-31T12:40:00.003+09:00

通常のPukiwikiのページに「javascript:スクリプト」と直接書いてもリンクにならないし、[[ブックマークレットタイトル>javascript:スクリプト]]と書いてもjavascriptを実行できるリンクにはならない。
　誰でも自由いページを編集できるpukiwikiでデフォルトでそんな設定になっていたら、XSS対策も何もあったものではないからだ。自分の管理するpukiwikiで「file://」をリンクとして扱のと同じよう設定を入れ、「javascript:スクリプト」や「[[ブックマークレットタイトル>javascript:スクリプト]]」をリンクとして扱うようにすることはできるが、インターネットに公開しているサイトではリスクが大きくてする気にもならないだろう。
　悪意のある訪問者が、既存のリンクをjavascriptに書き換え、
「一見通常通りページを開くが、10秒後にスパムサイトがポップアップしてくる」とか、
「リンクをクリックするとスパムURLがついたコメントがPOSTされる」
なんてことを全ページにされたら、気が滅入るどころの話ではない。

とはいえPukiwikiページでブックマークレットを紹介したいニーズもあるので、比較的安全な「ブックマークレット用のリンクを別サイトに表示する」という方法を考えてみた。

　ブックマークレットを紹介したい人は、上記サイトにタイトルと1行のスクリプトを入力し、「PukiWiki用リンクの作成」ボタンを押すと[[タイトル>上記サイトのURL?パラメータ]]のようなブランケット形式のリンクを作成し、それを自分のページに張ることで、読者にブックマークレットのリンクを示すことができる。
　読者が張られたリンクをクリックすると、紹介したいブックマークレットのリンクが上記サイトに表示されるというものだ。

読者がリンクをクリックすると下記のようなページが表示される。
このページで実際のブックマークレットのリンクと、確認用に整形されたスクリプトと、お気に入りに登録する方法を確認することができる。

ブックマークレットのリンクの下にはリンク中のjavascriptを見やすく整形したものが表示されるので、読者はその内容を確認したのちに登録することが可能となります。

javascriptを登録できて、このサイト自体のXSSのリスクはどうかという点を心配されるかも知れませんが、このサイトは上記の目的のみで使用されており、置かれているファイルもindex.htmlとjavascript整形用のbeautify.jsの2つだけとなっており、このサイトの改変などを行うことはできません。また、悪意のあるスクリプトを表示させることは可能ですが、このサイトでスクリプトを表示しても、ユーザがリンクをクリックしなければjavascriptは実行されないこと、ユーザは実行またはお気に入りに登録する前に、整形されたスクリプトの表示を確認できることで、リスクの低減になるかと考えています。

サイトの使い方

(1)事前にブックマークレットとするjavascriptを準備し、お気に入りのタイトルを決めておきます。
(2)サイト http://bookmarklet.dip.jp/ を開きます。
(3)「お気に入りタイトル」と「ブックマークレット用1行のjavascript」を入力し、「PukiWiki用リンク作成」を押す
※ここでjavascriptの簡単なチェックを行い、問題があればメッセージが表示されます。
(4)「確認用整形済みコード」で入力したjavascriptが意図したものか確認し、問題がなければ、「pukiwiki用リンク」に表示されたリンク文字列をコピーします。
(5)編集したいpukiwikiページを編集モードで開き、張り付けて使ってください。
(6)張り付けたリンクが正しく動くか確認する

Javascriptで、Javascriptが文法的に正しいか確認する

2010-12-30T16:30:00.006+09:00

以下のような関数で、引数の文字列がJavascriptとして正しいか確認できます。
正しい場合false、何か間違いがあれば簡単なエラーメッセージを返します。

// スクリプトに文法エラーがあるか
function checkScript(script) {
  var ret = false;
  try{
    eval('if(0){'+script+'}');
  } catch(e){
    ret = e.message;
  }
  return ret;
}

上記関数は、スクリプトを実行しないように「if(0){}」を付けて実行し、エラーがあるかチェックします。渡されたスクリプトは結局実行されないので、ランタイムエラーの確認はできません。

Textareaでデータとしてjavascriptを入力させたい時などに役に立つかと思います。

ブラウザをFireFoxに限れば、少しコードは複雑になりますが、エラーの発生した行番号も取得することが可能です。少々トリッキーですが、tryの前でエラーオブジェクトをnewしてその行番号を調べることにより、evalの行番号を求め、catch中でeのエラー行の行番号から、evalの行番号を引いた結果に１を足したものが、入力スクリプトのエラー行になります。残念ながらIEではエラーオブジェクトから行番号が取得できないようです。

// スクリプトに文法エラーがあるか(行番号付き)
function checkScript(scr) {
 var ret = false;
 if (!window._lineEval) _lineEval=(new Error()).lineNumber+2 || -1;
 try{
  eval('if(0){'+scr+'}');
 } catch(e){
  ret = {
   line:(e.lineNumber?e.lineNumber-_lineEval+1:-1),
   msg:e.message
  };
 }
 return ret;
}

Javascriptで、Javascriptを整形する

2010-12-30T11:49:00.002+09:00

下記のページでJavascriptを整形できる。

http://jsbeautifier.org/

Javascirptを整形してくれるサイトはよくあるが、このサイトはそれをjavascriptで行っている。
サイトに行くといろいろなjavascriptがscriptタグで読み込まれるが、

「http://jsbeautifier.org/beautify.js」が整形のエンジンのようだ。

ソースのコメントを見てみると、使いたければ自由に使っていいと書いてある

JS Beautifier
---------------

Written by Einar Lielmanis,
http://jsbeautifier.org/

Originally converted to javascript by Vital,

You are free to use this in any way you want, in case you find this useful or working for you.

これは役に立ちそうだ。ソースのコメントには続けて使い方が書いてある

Usage:
js_beautify(js_source_text);
js_beautify(js_source_text, options);

The options are:
indent_size (default 4) — indentation size,
indent_char (default space) — character to indent with,
preserve_newlines (default true) — whether existing line breaks should be preserved,
preserve_max_newlines (default unlimited) - maximum number of line breaks to be preserved in one chunk,
indent_level (default 0) — initial indentation level, you probably won't need this ever,

space_after_anon_function (default false) — if true, then space is added between "function ()"
(jslint is happy about this); if false, then the common "function()" output is used.
braces_on_own_line (default false) - ANSI / Allman brace style, each opening/closing brace gets its own line.

e.g

js_beautify(js_source_text, {indent_size: 1, indent_char: '\t'});

とりあえずは、そのまま呼んでみればいいのね。さっそく使ってみよう。

ブックマークレットでpukiwikiのtracker_listを並べ替え可能にする

2010-12-22T02:54:00.005+09:00

ブックマークレットでpukiwikiのtracker_listを並べ替え可能にする

ブックマークレットでpukiwkiの編集中のDiffをとるサンプルを先日示したが、同様に表題のようなサンプルを作成してみた。前回同様、EUC/utf-8、PukiWiki/PukiWikiPlusなどのターゲットの環境を選ばないようにしています。

このブックマークレットでできること

pukiwiki及びPlusなどの派生版で、tracker_list、bugtrack_listで表示される表を、ExtJSのGridPanelで置き換えます
置き換えられたGridPanelは、ヘッダ部をクリックすることにより、サーバと通信することなくソート可能です
同じくヘッダ部を操作することにより、列の表示/非表示切り替え、列幅の調整、列の表示位置変更等が可能です
「ページ名」というヘッダを持つ列は、単に文字列によるソートでなく、ページ名に現れる番号を意識して並べ替えられるので、「BugTrack1/100」は「BugTrack1/22」や「BugTrack1/9」よりも後に表示されます((並べ替えの際、スラッシュで区切られる文字列が数字のみである場合、5ケタになるよう前ゼロを付けたのちに比較されます。「BugTrack1/22」は「BugTrack1/00022」に、「ほげ/2/3」は「ほげ/00002/00003」に、比較時に内部的に変換されます))

サンプルの使い方

１．まず下記のURLをブックマーク(IEはお気に入り)に登録します。名前はなんでもいいです。(たとえば「pukiwiki Table」)

javascript:(function(){var%20e=document.createElement('script');e.charset='utf-8';e.src='http://www123.ddo.jp/tools/tracker00.js';document.body.appendChild(e);})()

２．いつも使っているpukiwikiのサイトのBugTrackの画面等を開き、登録したブックマーク(お気に入り)を選びます。
３．すると、上記のようにテーブルがExtJSのgridに変換され、ソートなどの操作ができるようになります

ブックマークレットとスクリプトの解説

上記のブックマークは改行とインデントを入れ読みやすくすると

javascript:(
     function(){
         var e=document.createElement('script');
         e.charset='utf-8';
         e.src='http://www123.ddo.jp/tools/tracker00.js';
         document.body.appendChild(e);
     }
)()

見ての通り、これでwww123.ddo.jpからtracker00.jsというスクリプトを読み込んで実行しているわけです。

読み込んだtracker00.jsは下記のような動作をします。

ExtJS 3.3.1を動かすために必要なライブラリやスタイルシートを読み込む
最初のtrの要素がtdでなくすべてthであるtableタグについて下記を行います
ヘッダー部の解析とデータストアの作成
データの読み込みとGridPanelの描画

下記ページにて確認をしています

extwiki(utf-8) BugTrack1
http://extwiki.sourceforge.jp/index.php?cmd=read&page=BugTrack1

PukiWiki本家(utf-8) 質問箱5
http://pukiwiki.sourceforge.jp/?%E8%B3%AA%E5%95%8F%E7%AE%B15

PukiWiki dev(EUC) BugTrack2
http://pukiwiki.sourceforge.jp/dev/?BugTrack2

PukiWIkiPlus(utf-8) BugTrack
http://pukiwiki.cafelounge.net/plus/?BugTrack

セキュリティについて

edit00.jsと同様なセキュリティのリスクがあります。理解したうえでお試しください。

tracker00.jsソースコード

    // tracker.js v 00 -- pukiwikiのTrackerの機能アップ
    // Bookmarklet example
    //   javascript:(function(){var%20e=document.createElement('script');e.charset='utf-8';e.src='http://www123.ddo.jp/tools/tracker00.js?';document.body.appendChild(e);})()
    // Copyright(c) 2010 mashiki
    // License: GPL version 3
    (function(){
        var cf='http://extjs.cachefly.net/ext-3.3.1/';
        addEl('style', {type:'text/css',innerHTML:'td {background-color:transparent}'});
        addEl('link',{rel:'stylesheet',type:'text/css',href:cf+'resources/css/ext-all.css'});
        addEl('script',{src:cf+'adapter/ext/ext-base.js'});
        addEl('script',{src:cf+'ext-all.js'});
        addEl('script',{src:cf+'examples/ux/TableGrid.js'});

        function addEl(tag, cfg) {
            var e=document.createElement(tag);
            for (var key in cfg) e[key]=cfg[key];
            document.body.appendChild(e);
        }
        var id=setInterval(function(){

            if(window.Ext && Ext.MessageBox){
                clearInterval(id);

                var ce = Ext.select('table');
                ce.each(function(tbl){
                    var tr0 = tbl.select('tr', true).first();
                    var hdrs = tr0.query('th');

                    if (hdrs.length>0 && tr0.query("td").length===0 ) {
                        convertToGrid(tbl, hdrs);
                    }
                },true);
            }
        },100);

        function convertToGrid(tbl, hdrs) {
            var ct = tbl.insertSibling(),
                flds = [{name:'no'}],
                cols = [];

            for (var i=0, h; h=hdrs[i]; ++i) {
                var text = h.innerHTML.replace(/]+>(.+?)<\/a>/gi,'$1')
                                    .replace(/\s*(:?↑|↓)$[\d]+$/,''),
                    name = 'tcol-' + i;
                var fld = {
                    name: name,
                    mapping: 'td:nth('+ (i+1) +')/@innerHTML'
                };
                if (text==='ページ名') {
                    fld.sortType = function(val) {
                        var parts = val.replace(/]+>(.+?)<\/a>/gi,'$1').split("/");
                        for (var i=0,p; p=parts[i];++i) {
                            if (p.match(/^[\d]+$/)) {
                                parts[i]=String.leftPad(p, 5, '0')
                            }
                        }
                        return parts.join('/');
                    }
                }
                flds.push(fld);

                cols.push({
                    header: text,
                    dataIndex: name,
                    width: h.offsetWidth,
                    tooltip: h.title,
                    align: 'left',
                    sortable: true
                });
            }

            var ds = new Ext.data.Store({
                reader: new Ext.data.XmlReader({
                    record: 'tbody tr'
                }, flds)
            });

            ds.loadData(tbl.dom);
            var r = ds.getAt(0);
            if (!(r.get(0))) ds.remove(r);
            i = 0;
            ds.each(function(r){r.set('no',++i)});
            ds.commitChanges();

            ct.setWidth(tbl.getWidth());

            tbl.remove();

            var grid = new Ext.grid.GridPanel({
                stripeRows: true,
                'ds': ds,
                'cm': new Ext.grid.ColumnModel(cols),
                'sm': new Ext.grid.RowSelectionModel(),
                autoHeight: true,
                autoWidth: false,
                renderTo:ct
            });
        }

    })();

ブックマークレットってすごい可能性を持っている　と思う

2010-12-20T23:44:00.011+09:00

ブックマークレット
Wikipedia
http://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88

ブックマークレットって実は最近まで注目していなかったのですが、フォームへの半自動入力で使えないかと、知り合いに頼まれて少し調べてみました。

ブックマークレットはブラウザのURL入力欄に書ける1行のjavascriptをブックマークしたものです。たった1行ですが、javascriptなのでDOM操作や、ajax通信などもできます。DOM操作ができるということは、ボタンを表示したり、scriptタグを生成してjavascriptのライブラリを読み込んだり、linkタグを生成してスタイルシートを読み込んだりもできるわけです。
「自分が管理していないが、よく利用しているちょっと不便なサイト」で、ブラウザ上にあるコンテンツを利用していろいろなことができます。

フォームの入力を自動で行う

入力のインターフェースを変えたり、入力のチェックを行う

自分の見やすいように表示を並べ替える

他のサイトの情報と合わせて加工して表示する

「javascriptを使えばそんなのできるの当たり前じゃん」と思われますが、自分の管理しているわけでないwebサイトのカスタマイズができちゃうわけです。

サンプルとして、pukiwikiのページの編集で、編集中文書の編集前との差分をExtJSのWindowで表示するブックマークレットを作成してみました。これは標準のpukiwikiにはない機能です。

サンプルの使い方

１．まず下記のURL?をブックマーク(IEはお気に入り)に登録します。名前はなんでもいいです。(たとえば「pukiwiki Diff」)

javascript:(function(){var%20e=document.createElement('script');e.charset='utf-8';e.src='http://www123.ddo.jp/tools/edit00.js';document.body.appendChild(e);})()

２．いつも使っているpukiwikiのサイトのページを編集中に、登録したブックマーク(お気に入り)を選びます。
３．すると、「ページの更新」ボタンの横に「Diff」ボタンが表示されます。
４．「Diff」ボタンを押すと、テキストエリアに何も変更を加えていない場合、「変更箇所はありません」とメッセージが表示され、変更があった場合、次のように変更点が表示されます

※このブックマークレットサンプルは、本家のPukiWikiや、派生版のPukiWikiPlus等で、使用可能です。utf-8、EUCのどちらで構築されていても動くと思います。

ブックマークレットとスクリプトの解説

見やすさのために改行とインデントを入れると以下のようになります

javascript:(
     function(){
         var e=document.createElement('script');
         e.charset='utf-8';
         e.src='http://www123.ddo.jp/tools/edit00.js';
         document.body.appendChild(e);
     }
)()

見た通り、これでwww123.ddo.jpからedit.jsというスクリプトを読み込んで実行しているわけです。

読み込んだedit00.jsは下記のような動作をします。

ExtJS 3.3.1を動かすために必要なライブラリやスタイルシートを読み込む

'write'という名前のサブミットボタン(ページの更新)があることを確認する

'wirte'ボタンの左に、押されたらdo_diffを実行するような「Diff」ボタンを生成する。

do_diffはフォーム中の'original'と'msg'という、フィールドの値を比べ結果を表示する

edit00.jsのソースは最後に添付します。まあ、http://www123.ddo.jp/tools/edit00.js をDLしソースを確認すればその通りなのですが。

セキュリティについて

http://www123.ddo.jp/tools/edit00.js を信じない方は賢明です。サイトが誰かに乗っ取られ、悪意のあるロジックを混入される恐れはいつでもあります。edit00.jsを信頼できるサイトにコピーして使用いただいて結構です。GPL ver3としますので、適当に改変してください。便利な機能を追加したなら公開していただくとありがたいです。

edit00.dsで、cacheflyのサイトからExtJSのライブラリを読み込んでいます。より安全に使いたければ、上記と同様に自分の制御下のサーバに入れることを検討してください。

edit00.js ソースコード

    // edit.js v 00 -- pukiwikiの編集を支援
   // Bookmarklet example
   //   javascript:(function(){var%20e=document.createElement('script');e.charset='utf-8';e.src='http://www123.ddo.jp/tools/edit00.js?';document.body.appendChild(e);})()
   // Copyright(c) 2010 mashiki
   // License: GPL version 3
   (function(){
       var cf='http://extjs.cachefly.net/ext-3.3.1/';
       addEl('style', {type:'text/css',innerHTML:'td {background-color:transparent}'});
       addEl('link',{rel:'stylesheet',type:'text/css',href:cf+'resources/css/ext-all.css'});
       addEl('script',{src:cf+'adapter/ext/ext-base.js'});
       addEl('script',{src:cf+'ext-all.js'});
       function addEl(tag, cfg) {
           var e=document.createElement(tag);
           for (var key in cfg) e[key]=cfg[key];
           document.body.appendChild(e);
       }
       var id=setInterval(function(){
           if(window.Ext && Ext.MessageBox){
               clearInterval(id);
               var pv = document.getElementsByName('write');
               if (pv[0]) {
                   pv = pv[0];
               } else {
                   Ext.Msg.alert(
                       'pukiwiki編集支援機能',
                       '「ページの更新」ボタンが見つかりません。
'
                       +'この機能はpukiwikiの編集画面でご使用ください'
                   );
                   return;
               }
               var df = document.createElement("input");
               Ext.apply(df, {type:"button",value:"Diff",onclick:diff_click});
               Ext.get(df).insertBefore(pv);
           }
       },100);

       function diff_click() {
           var msg = document.getElementsByName('msg');
           var org = document.getElementsByName('original');
           if (msg[0] && org[0]) {
               msg = msg[0].value;
               org = org[0].value;
           } else {
               Ext.Msg.alert(
                   'pukiwiki編集支援機能',
                   '"msg"または"original" フィールドが見つかりません。
'
                   +'この機能はpukiwikiの編集画面でご使用ください'
               );
               return;
           }
           if (msg===org) {
               Ext.Msg.alert('pukiwiki編集支援機能', '変更箇所はありません');
           } else {
               var res = diff(
                   org.replace(/^\n+|\n+$/g,'').split("\n"),
                   msg.replace(/^\n+|\n+$/g,'').split("\n")
               );
               // 結果加工
               var map = {
                   '-':{edit:'－',style:'background-color:#FFDDDD;'},
                   '+':{edit:'＋',style:'background-color:#DDDDFF;'},
                   '=':{edit:'　',style:'background-color:#FFFFFF;'}
               }
               var table = ['
'];                for (var i=0; d=res[i]; ++i) {                                       table.push(""                            + "");                }                table.push('

"+map[d.edit].edit+"

"
+ d.arr[d.line].replace(//g,">")
+ "

');
               var win = new Ext.Window({
                   title:'pukiwiki編集支援機能',
                   html: table.join(''),
                   width:400,
                   height:400,
                   autoScroll:true,
                   closeAction:'close',
                   plain: true,
                   buttons: [{
                       text: 'Close',
                       handler: function(){
                           win.close();
                       }
                   }]
               });
               win.show();
           }
       }

       function diff(arr1, arr2, rev) {
           var len1=arr1.length,
               len2=arr2.length;
           // len1 <= len2でなければひっくり返す
           if (!rev && len1>len2)
               return diff(arr2, arr1, true);
           // 変数宣言及び配列初期化
           var k, p,
               offset=len1+1,
               delta =len2-len1,
               fp=[], ed=[];
           for (p=0; p
               fp[p] = -1;
               ed[p] = [];
           }
           // メインの処理
           for (p=0; fp[delta + offset] != len2; p++) {
               for(k = -p       ; k < delta; ++k) snake(k);
               for(k = delta + p; k >= delta; --k) snake(k);
           }
           return ed[delta + offset];

           // snake
           function snake(k) {
               var x, y, e0, o,
                   y1=fp[k-1+offset],
                   y2=fp[k+1+offset];
               if (y1>=y2) { // 経路選択
                   y = y1+1;
                   x = y-k;
                   e0 = ed[k-1+offset];
                   o = {edit:rev?'-':'+',arr:arr2, line:y-1}
               } else {
                   y = y2;
                   x = y-k;
                   e0 = ed[k+1+offset];
                   o = {edit:rev?'+':'-',arr:arr1, line:x-1}
               }
               // 選択した経路を保存
               if (o.line>=0) ed[k+offset] = e0.concat(o);

               var max = len1-x>len2-y?len1-x:len2-y;
               for (var i=0; i
                   // 経路追加
                   ed[k+offset].push({edit:'=', arr:arr1, line:x+i});
               }
               fp[k + offset] = y+i;
           }
       }

   })();

javascriptでdiff実装

2010-12-19T23:39:00.008+09:00

高速とされるO(NP)のアルゴリズムをベースに、javascriptで実装してみた。
[1]E.W.Myers, "An O(ND) difference algorithm and its variations", Algorithmixa, 1 (1986), pp.251-266 に論文を日本語に訳したものが載っており、参考になりました。
http://hp.vector.co.jp/authors/VA007799/viviProg/doc5.htm
上記の論文中のコードは「ＳＥＤ Shotest Edit Distance」の値を求めるだけで、
Diffの結果をどう組み立て格納していくかについてと、fpという配列の初期値を
何で埋めればよいのかが分からず、かなり苦労しました。

アルゴリズムは上記のO(NP)そのままですが、javascriptで実装していく中で、
メイン処理とした親関数内でのループの部分はかなりすっきりさせ、
snakeへのパラメータは整数kを1つだけとする、snakeは値を返さない、等、
サンプルコードの原形はほとんどなくなってしまった感じです。

また、O(NP)はarr1.lengthがarr2.length以下であることが前提なのですが、
最初の段階でパラメータをチェックし、arr1.lengthがarr2.lengthより大きければ、
順番をひっくり返して、自分自身を呼ぶことにより、前提を満たすようにしました。

動くサンプルページ http://www123.ddo.jp/tools/diff.html



//@license http://www.opensource.org/licenses/mit-license.html MIT License
//@author Mashiki
//@see http://hp.vector.co.jp/authors/VA007799/viviProg/doc5.htm
function diff(arr1, arr2, rev) {
    var len1=arr1.length,
        len2=arr2.length;
    // len1 <= len2でなければひっくり返す
    if (!rev && len1>len2)
        return diff(arr2, arr1, true);
    // 変数宣言及び配列初期化
    var k, p,
        offset=len1+1,
        delta =len2-len1,
        fp=[], ed=[];
    for (p=0; p<len1+len2+3; ++p) {
        fp[p] = -1;
        ed[p] = [];
    }
    // メインの処理
    for (p=0; fp[delta + offset] != len2; p++) {
        for(k = -p       ; k <  delta; ++k) snake(k);
        for(k = delta + p; k >= delta; --k) snake(k);
    }
    return ed[delta + offset];

    // snake
    function snake(k) {
        var x, y, e0, o,
            y1=fp[k-1+offset],
            y2=fp[k+1+offset];
        if (y1>=y2) { // 経路選択
            y = y1+1;
            x = y-k;
            e0 = ed[k-1+offset];
            o = {edit:rev?'-':'+',arr:arr2, line:y-1}
        } else {
            y = y2;
            x = y-k;
            e0 = ed[k+1+offset];
            o = {edit:rev?'+':'-',arr:arr1, line:x-1}
        }
        // 選択した経路を保存
        if (o.line>=0) ed[k+offset] = e0.concat(o);

        var max = len1-x>len2-y?len1-x:len2-y;
        for (var i=0; i<max && arr1[x+i]===arr2[y+i]; ++i) {
            // 経路追加
            ed[k+offset].push({edit:'=', arr:arr1, line:x+i});
        }
        fp[k + offset] = y+i;
    }
}

javascriptで配列やオブジェクトの中身をまとめて確認する

2010-09-19T21:47:00.003+09:00

IEは８でも使えないが、FireFoxを使って開発/デバッグいる場合に、いちいちステップ実行を設定して変数の内容を確認しなくても、console.dir(変数)でサクッとFireBugである時点での変数の値を確認できる。
下記はExtJSのAPIドキュメント内のExt.Ajax.requestのサンプルだが、

    Ext.Ajax.request({
       url: 'aaa/bbb',
       success: function(response, opts) {
          var obj = Ext.decode(response.responseText);
          console.dir(obj);
       },
       failure: function(response, opts) {
          console.log('server-side failure with status code ' + response.status);
       }
    });
と、記述するだけでお手軽にFireBugのコンソールから確認できる。

また、 console.log(文字列)でコンソールに文字列を表示可能となる。alertの代わりに使えば、実行のタイミングを変えずにデバッグすることができるので、こっちも大いに利用したい。って何年か前に思ったけどあまり使っていないなあ。FireFoxでしか使えないこと(IEでしか発生しない問題なんてのもよくある)と、僕がすぐ忘れてしまうことが原因?!　と、ここにメモっておこう。

Blogger に Google Analytics でアクセス解析するするためのタグを埋め込む

2010-07-22T01:40:00.001+09:00

そのものズバリの下記のサイトがあった
「Blogger を Google Analytics でアクセス解析する」
http://customize-your-blogger.blogspot.com/2010/07/how-to-add-google-analytics-code.html

ExtJS3.2.1 のマニュアルを改造しサンプルコードを検索

2010-07-20T10:17:00.003+09:00

ExtJSのマニュアルをみていて、あるクラスの具体的なサンプルを見たくなることが多々ある。
マニュアルには最低限の情報しか載っていないことが多く、サンプルはたくさんの例が用意されて
いるのだが、見た目が派手なクラス以外、探しにくいこともおおい。

そこで、マニュアルからサンプルコードを検索できるような改造をマニュアルページに仕込んでみた。
http://www123.ddo.jp/ext-3.2.1/docs/

マニュアルで左側のツリーでクラスを選択したとき、下の画像のような

「SearchExample」というボタンが表示される。サンプルを見たいクラスでこのボタンを押すと、下の画像のような、ファイルパスと行数とヒットした行の内容からなるリストが表示される。

このリストを右クリックすると、「Open」と「Download」と選択するメニューが表示されるので、ブラウザ上で軽く見たい時は「Open」を、エディタなどでじっくり見たい場合は「Download」を選べばよい

ハングルを入力する

2010-07-07T00:20:00.014+09:00

ちょうど去年の今頃、DSiで「学研ハングル三昧DS」を通勤中に勉強していました。結局、韓国語を覚えるのには挫折してしまいましたが、その時、韓国語のIMEなど入っていないPCで、ブラウザだけでハングルを入力し、日本語に翻訳するためのjavascirptを作りました。最近、手を入れ使いやすくしましたので、リンクと使い方を簡単に説明します。

ハングル入力ツール表示

１．まず、上記のリンクをクリックし、ハングル入力ツールのウインドウをポップアップで開きます
２．①子音ボタン、②母音ボタン、③パッチムボタン(必要なら)の順にボタンを押していくと、④のテキストフィールドにハングル文字が入力できます
３．入力中に、スペースキー、数字、記号などキーボードから自由に入力することができます。
４．④「削除」ボタン(もしくはバックスペース)を押すことで、入力中の文字、もしくは最後の1文字を削除することができます
５．単語もしくは文章が入力できたら、テキストフィールドのハングル文字を切り取って、使用するか、⑥の「翻訳」ボタンを押し、Googleでの翻訳結果を表示することができます
※韓国語翻訳はまだGoogle翻訳よりExcite翻訳のほうが質が高い気がしますが、UTF-8で渡せるのでGoogleを翻訳のサイトとして指定しています

xrea+ と coreserver の仕様比較

2010-07-06T02:15:00.009+09:00

「core-mini」契約前に「XREA Plus」最終的な比較
　・初年度は合計600円高くなる
　・スペックは少しづつ高くなっている
「XREA Plus」でスクリプトの実行速度以外制限に不満があったわけではないが、core-miniに変えてみるか

プラン	XREA Free	XREA Plus	Mail & Backup	CORE MINI	CORE A	CORE B
初期費用	無料	無料	無料	500円	1,000円	2,000円
月額	無料	400円	200円	400円	500円	990円
年額	無料	2,400円	990円	2,500円	5,000円	9,900円
お試し期間	-	7日	7日	5日	5日	5日
容量・転送量
ディスク容量	50MB	3GB	2GB	6GB	15GB	60GB
転送量目安(月)※1	1GB	3GB	-	100GB	150GB	300GB
許容負荷率 ※		100%		125%	250%	1000%
基本機能
コントロールパネル	○	○	○	○	○	○
ファイルマネージャ	○	○	○	○	○	○
CRONジョブ	×	○	○	○	○	○
MySQL	1個	5個	×	10	無制限	無制限
PostgreSQL	1個	5個	×	10	無制限	無制限
SQLite2/3				○	○	○
ドメイン機能
マルチドメイン	10	20	×	50	無制限	無制限
サブドメイン	10	20	×	50	無制限	無制限
カスタムマッピング	○	○	×	○	○	○
URL転送	○	○	×	○	○	○
共有SSL	○	○	×	○	○	○
独自IP/SSL				×	1500円/月	1500 円/月
	あり	なし	×
提供サブドメイン	なし	3個	3個	10個	10個	10個
メール機能
メールアカウント数	100	100	無制限	200	無制限	無制限
マルチドメイン数	100	100	無制限
送受信メール数(通/日)	1,000 通	3,000 通	10,000通	5000	10000	40000
POP / POPS	○	○	○	○	○	○
SMTP / SMTPS	○	○	○	○	○	○
IMAP / IMAPS	○	○	○	○	○	○
APOP / Port 587	○	○	○	○	○	○
ウェブメール	○	○	○	○	○	○
携帯ウェブメール				○	○	○
スパムフィルター	×	○	○	○	○	○
メール転送	○	○	○	○	○	○
カスタムフィルター	×	○	○	○	○	○
メーリングリスト	×	×	○	○	○	○
ウィルスフィルター	○	○	○
メールマガジン	×	×	準備中です
添付ファイル容量	20MB	50MB	100MB
メールへの広告	あり	なし	なし
FTP機能
FTPアカウント	○	○	○	○	○	○
サブFTPアカウント	×	3	×	10	無制限	無制限
FTPS	○	○	○	○	○	○
サーバー間コピー	×	○	○	○	○	○
ログ
生ログ	○	○	×	○	○	○
アクセス解析	○	○	×	○	○	○
ソフトウェア仕様
CGI/SSI	○	○	×	○	○	○
Perl	○	○	×	○	○	○
PHP5(モジュール版)	○	○	×	○	○	○
PHP4/5/6(CGI版)	○	○	×	○	○	○
Ruby	○	○	×	○	○	○
SQLite	○	○	×	○	○	○
Python	○	○	×	○	○	○
C/C++	○	○	×	○	○	○
.htaccess	○	○	×	○	○	○
CGI自動設置				○	○	○
sendmail	○	○	○
SSH	○	○	○	○	○	○
ハードウェア仕様
CPU+ メモリー(※2)	2コアCPU 2GB	2コアCPU 2GB	2コアCPU 2GB	XEON 4GB	XEON 4GB	XEON4コア 8GB
バックアップ	RAID	RAID	RAID	RAID	RAID	RAID
最大アカウント数				300以下	128以下	64 以下
ネットワーク・回線	計2Gbps 以上	計2Gbps 以上	計2Gbps 以上	計4Gbps以上	計4Gbps以上	計4Gbps以上
サーバー管理	自社	自社	自社	自社	自社	自社
設置	国内	国内	国内	国内	国内	国内
サポート
24時間障害対応	○	○	○	○	○	○
メールサポート	△	○	○	○	○	○
その他
アダルトサイト	×	×	-	×(テキストは可)	×(テキストは可)	×(テキストは可)
広告メールの送信				×※3	×※3	×※3
広告メールの宣伝サイト				×※3	×※3	×※3
公開アップローダー				△※4	△※4	△※4
商用利用	△	○	○
再販	×	×	×	△※5	○	○

HTML直接記入テスト

2010-07-05T23:30:00.019+09:00

Bloggerではhtmlの直接記入をかなり自由にできるようだ

実態参照
「<」で「<」を、「>」で「>」を、「&」で「&」を表示可能

<pre>タグ

あああ
いいい

<table>タグ

<table border=1><tbody>
<tr><td>あああ</td><td>いいい</td><td>ううう</td></tr>
<tr><td>あああ</td><td>いいい</td><td>ううう</td></tr>
<tr><td>あああ</td><td>いいい</td><td>ううう</td></tr>
</tbody></table>

あああ	いいい	ううう
あああ	いいい	ううう
あああ	いいい	ううう

javascript

<a href='javascript:alert("javascript テスト")'>javascriptテスト</a>

javascriptテスト

サクラでajax?!

2010-07-04T10:46:00.005+09:00

サクラのマクロでブラウザなど使用せず、web上の情報にアクセスできる。

//httptest.js
var http = new ActiveXObject("WinHttp.WinHttpRequest.5.1");
var url="http://www.php.net/";
http.Open("GET", url);
http.Send();
var wsh = new ActiveXObject("WScript.Shell");
wsh.Popup("Status:" + http.status+" Result: "
+http.ResponseText.substr(0,50), 0, "RESULT", 1);

ajax的なことは普通にできそうなのだが、サクラのマクロにはメニューやドロップダウンリスト的なものをコントロールする機能がないので、応用が思いつかない

XREA+ から coreserver への移行

2010-07-04T10:22:00.007+09:00

XREA+の契約が7/6に切れるので、継続しようと思ったが、上位のcoreserverと金額を比較すると、年間の金額はほぼ変わらないで、性能や容量がアップする。
XREA+(年間2400円) の機能や容量の制限で不満な部分があるわけではないが、100円プラスの年額2500円でコアサーバ(mini)に切り替えられるので、切り替えを検討。かなりドロナワ的。

仕様比較
仕様比較
coreserer仕様 http://www.coreserver.jp/
xrea仕様 https://www.value-domain.com/xrea.php

同じことをやった人の情報
http://lab.urume.net/2009,0203,800.html
http://www.fxtechnical.net/2008/10/_xreacoreserver_movablety.html
http://gootara.jp/mt/2009/04/exreacoreserver.html

お試し版を登録
トップページには15日使用可能とあったが、実際には5日間。

ファイルのコピー
サーバー間コピー機能で全ディレクトリをコピー
これは便利かも。
構わずコピーしたら、.bash_historyまでコピーされてた

DNS登録変更
ddo.jp にて新サーバのIPアドレスに変更

ネームバーチャルサーバ設定
2つのサーバの「ドメインウェブ」の設定設定ページを開き内容を同じにする

必要なフォルダ/ファイルのパーミッション変更
他のサイトの情報ではパーミッションは自動的に同じになるような情報もあったが、groupとotherへのwrite権限はなくなるみたい

とりあえずはこれで試用してみる。といっても期限切れまで2日しかないが...。

サクラでphpのマニュアルを検索する

2010-07-03T16:48:00.006+09:00

エディターでphpのコードを編集する時、関数の正確なスペルや引数の仕様を調べるのに重宝します

スクリプト(phpfunc.js)

ほぼ、『英辞郎 on the WEB』と同じスクリプトですが、


// phpfunc.js
// カーソル位置の単語で phpの関数マニュアル を検索する
var word = Editor.ExpandParameter("$C");
var url = "http://jp.php.net/manual-lookup.php?pattern="+word;
(new ActiveXObject("Wscript.Shell")).run(url)

登録方法は「サクラエディタでマクロの登録」を参照

サクラエディタでマクロの登録

2010-07-03T10:44:00.009+09:00

１．サクラエディタ導入フォルダに「macro」フォルダを作成する

C:\Program Files\sakura\macro

２． Javascriptのファイルを作成する

マニュアルを見てもマクロファイルの文字コードの指定は見つからなかったのでとりあえずS-JISで保存


// alc.js
// カーソル位置の単語で 英辞郎on the Web を検索する
var word = Editor.ExpandParameter("$C");
var url = "http://eow.alc.co.jp/"+word+"/UTF-8/?ref=sa";
(new ActiveXObject("Wscript.Shell")).run(url)

今回はalc.jsで保存した

３．テスト実行する
エディタ上の検索したい単語にカーソルを当て
[ツール]→[名前を指定してマクロを実行...]
macroフォルダ内のalc.jsを指定すると無事ブラウザが開き、結果が表示された

４．マクロを登録する
[設定]→[共通設定...]の[マクロタブ]を開き
マクロ一覧で[参照]ボタンを押し、マクロを配置したフォルダを選択する
C:\Program Files\sakura\macro\

名前: 英辞郎on the Web
Id: 1
file: alc.js
■マクロを実行するたびにファイルを読み直す

５．キー割り当て
よく使うマクロの場合、簡単に呼び出したいもの。
[設定]→[共通設定...]の[キー設定]タブを開き、

種別: 外部マクロ
機能: 英辞郎on the Web
Ctrl：チェックを付ける
キー： Ctrl+1

を選択し[OK]ボタンを押す

参考
サクラエディタマクロのマニュアル
　http://sakura.qp.land.to/SakuraMacro/

Bloggerアカウント取得

2010-07-03T10:23:00.004+09:00

Googleのブログに登録してみました。

登録時、本人確認のため、確認コードを携帯電話に自動音声通話で知らせるようになっています。
悪戯防止には有効でしょうけど、携帯番号の入力は少々抵抗がありますね。