以前にも紹介したことがあるTCPDFですが、先月にメジャーバージョンがあがったので早速試してみることにしました。

半年ほど前にVer.4.8で作成したプログラムが問題なく動作していたので、バージョンアップによる影響はないと思っていたのですが・・・思いがけない部分で仕様変更を発見しました。

Ver.4系からVer.5系へのバージョンアップ時に権限設定の仕様が真逆になっているようなので、注意が必要です。
対象になっているのは、PDFにセキュリティ設定を行う時に使用する関数で SetProtection() です。

続きを読む...

業務効率化を図ろうと、Excel2007で作った書類のデータをうまく取り出し、加工して使うことを模索しております。
弊社でWebシステム開発をするときのメイン言語であるPHPには、Excelファイルの読み込み・書き込みを行うことができるPHPExcelというものが存在します。
今回は、PHPExcelにまつわるお話です。

PHPExcelでは、Excel2007形式のファイルの読み書きができる優れものです。
大昔、Excel2007が出たときには、xlsxファイルをzip展開してファイルの構造をひもとき、Web側で書き込んだデータをExcel2007形式のファイルで出力するようなシステムを作った物です。
それが、近々リリースする

の原型だったりするのですが。

今回は、CentOS 5にRPMで導入したPHPを使った場合の想定で、遭遇する問題を書き留めておきます。
なお、最新のPHP5.3系を使えばこの情報は不要です。だって、普通に動くから…。
サーバ保守を考えたりすると、RPM版のパッケージを使う方がいろいろとよいと考えていますので（賛否両論でしょうが、私はそう考えます）。

続きを読む...

さまざまなシステムで頻出する生年月日から年齢の計算。
計算が苦手な私にとっては結果があっているかの判断が難しく、特に閏年関連は厄介です。

今回も年齢計算が必要な機能があったので、閏年が正しく処理できるかテストしてみました。

[目標]
・1980/02/29(閏日)生まれの人の年齢計算が正しく行えること
・もちろん、閏日以外の人も。。。

[想定結果]
・閏年の場合は、2/29に年齢が増える
・閏年以外は、3/1に年齢が増える

続きを読む...

PostgreSQLのユーザー定義型を利用して、
内部で暗号化されたカラムを作成したので、その過程でハマったことを
覚書も兼ねて投稿しておきます。

１． 可変長データのサイズ設定

可変長データは、内部的に

/************************/
typedef struct
{
int4 sz; // 構造体の総サイズ
char val[1]; // データ格納位置(ダミー)
} EncryptedText
/************************/

のように表現されているのですが、

/************************/
EncryptedText a;
a.sz = 100;
/************************/

のように書くとNG。
この場合、専用のマクロを使って

/************************/
SET_VARSIZE(a, 100);
/************************/

としなければいけません。
また、ここで設定した値を取り出す場合も

/************************/
VARSIZE(a);
/************************/
とする必要があり、実際のデータ(val部分)にアクセスする場合も

/************************/
VARDATA(a);
/************************/

とします。全てマクロ経由でアクセスしないとダメということです。

２． 他で定義されている関数の呼び出し

今回は暗号化するということで、pg_cryptoモジュールで定義されている pgp_sym_encrypt/decryptを使用しましたが、これらのプロトタイプ宣言は

/************************/
Datum pgp_sym_encrypt(PG_FUNCTION_ARGS)
/************************/

となっています。pgp_sym_encryptの内部では

/************************/
bytea* pgp_sym_encrypt(const char *str, const char *pass, const char *cipher_algo);
/************************/

と同等なのですが、この形式で呼び出すことはできません。
なんとかして暗号化対象文字列をPG_FUNCTION_ARGS形式に変換する必要があるのですが、、
仕方なく、PostgreSQLのソースコードに潜ると・・・
こんなものがありました。

/************************/
Datum DirectFunctionCall3(関数ポインタ, Datum, Datum, Datum);
/************************/

Call3の部分は、渡す引数の数に応じて1～5まであります。
これを使えば、引数がPG_FUNCTION_ARGSで定義されている関数を呼び出すことができます。

３．メモリリーク対策

PostgreSQLのメモリ確保は、pallocを使用します。 これを使うと、１回のクエリ(トランザクション)終了時に使用していたメモリを解放してくれるので 基本的にメモリリークはありません。 ただし、戻り値以外の変数領域確保にpallocを使った場合は、ちゃんとpfreeで解放する必要があり ます。

次回は、作成したC言語関数を登録する際にハマったことを書く予定です。

Trac管理者(!?)のjasです。

興味本位でいろいろと設定をいじってみたり、プラグインの調査をしているうちに、
いつの間にか管理者に指名されていました。

設定を変えているうちに認証ファイルを破損し、周りから苦情がきたりしているので、
本当に管理者の仕事をしているのかどうかは若干不明ですが。。。

とはいえ、新しいもの大好きなので、苦情にめげずに機能やプラグインの調査＆テストを強行しますよっ♪

続きを読む...

jQuery 1.4がリリースされました。
今日から14日間は"14 Days of jQuery"というサイトも別で用意されていて、楽しめます。

新たな関数群も増え、ますます使いやすくなったようです。
特筆すべきは、さらなる高速化と言った点でしょうか。
さっそくですが、いくつかの新機能を試してみました。

続きを読む...

例えば、目が霞んでいる時。
例えば、急いでいる時。
例えば、文字のサイズを小さくしている時。

彼らは突然、私達の前に姿を現すのです。

以下はそんな彼らの切ない例。

1. アドレスバーに以下を入力してEnter
　　http://shain.blog.conextivo.com/inedx.html

2. PHPスクリプトで以下を入力
　　ehco "This is test page.";

3. PHPスクリプトで以下を入力
　　for ($i=0; i<5; $i++) {　‥‥

続きを読む...

だいぶ前ですが、「【Ext JS】行をドラッグ＆ドロップ可能な表を作る」の紹介した記事の続編です。

この記事の通りにグリッドのドラッグ＆ドロップを実行すると、ドラッグ時は以下のようにアイコンとddTextで指定した文字列がProxy要素として表示されると思います。

このままでも困りはしないのですが、どの行をドラッグしているのかがわかりにくいですので、ドラッグ時の処理をカスタマイズして、Proxy要素にドラッグしている行を表示してみたいと思います。
なお、今回の実験を行ったExt JSのバージョンは3.0.0で、DOMの操作にはjQueryを使用しています。

続きを読む...

さきほどの新ネタです。
どちらかと言えば、こちらのネタの方が有用かと

要は、iTunesの至るところをクリックしてみたんですね。
すると、、、

続きを読む...

iPhone 3GSを購入してから、もうすぐ半年が経とうとしています。
私の影響かどうかは知りませんが、周りでも多くの人がiPhoneを購入し、私に「買いましたよー」と言ってくれると、とてもうれしくなりますね。

さて、そんなiPhoneを利用する上でなくてはならないのがあPCとiTunes。ご存じの人もいるかとは思いますが、普通気づかないと思うのでちょっとお知らせ。

続きを読む...

jQueryでグラフ表示 jQueryのライブラリでグラフを簡単に生成できるものがありましたので紹介します。
「jqPlot」というライブラリです。
折れ線グラフ、円グラフ、棒グラフなどの表示ができます。見た目も結構キレイにでます。

今回は、棒グラフの日本語情報があまりなかったので、棒グラフについて紹介します。

続きを読む...

こんにちは。技術ネタ投稿でおなじみのJasmineです。

先日、ある複雑な処理で、SQLは読み辛くなり、速度もイマイチで困っておりました。
「PostgreSQLの8.4が使えれば、新機能の分析関数が使えるのに・・・」
っとブツブツ文句を言っていると、周りから「8.4使えるよ」との声が。

なんですと！
早速、PostgreSQL 8.4の新機能、分析関数を使ってみることになりました。

続きを読む...

最近はまったこと。
タイトルのとおりですが…。

続きを読む...

ご無沙汰しております。
植物ネタ禁止！と言われたわけではありませんが、今回は普通に技術ネタです。

と言っても、既に知っている人は当たり前に知っている内容かもしれません。
Ext.jsのCSSに関するお話です。

続きを読む...

PHPからPDFを生成するライブラリはFPDF、PDFLibなどいくつかあります。
以前はFPDFを使用していたのですが、UTF-8で開発を行うと文字化けなどいろいろ厄介な問題があるので、UTF-8に対応したTCPDFを使ってみることにしました。

TCPDFについては、こちらのサイトがわかりやすいので詳細は省きますが、今回はTCPDFの機能を使って角丸図形（四角）を描く方法を紹介したいと思います。

続きを読む...

PHPマニュアルによると、mb_convert_kana() のオプションは以下のようになっています。

r	「全角」英字を「半角」に変換します。
R	「半角」英字を「全角」に変換します。
n	「全角」数字を「半角」に変換します。
N	「全角」英数字を「半角」に変換します。
a	「全角」英数字を「半角」に変換します。
A	「半角」英数字を「全角」に変換します （"a", "A" オプションに含まれる文字は、U+0022, U+0027, U+005C, U+007Eを除く U+0021 - U+007E の範囲です）。

（以下省略）

一見、オプションの'rn' = 'a'、'RN' = 'A'のように見えますが、実はそうではありません。

続きを読む...

じめじめした名古屋からこんにちは。先日の「【Ext JS】DataStoreの謎」のエントリーが気になって土日に調べてみました。 Extを触るのは初めてなので、まずはファイル全体の構成から確認・・・素人の私には難しすぎます。 なんとかalertを仕掛けまくったりしてExtのソースを追いかけてみました。
やはり、データ構築のタイミングの問題だとわかりました。 

どういうことかと言うと、下記ソースの
dsCategory.each(function(rec){
  rec.set('is_select' , testArray[index]);
  index++;
});
rec.setメソッドを呼び出すと、dsCategoryオブジェクトが保持している、グリッドの内容と更新後の値を比較し、同じ内容ならば何もせず、異なっていれば新しいHTMLを生成してテーブルに流し込むという動作をしている様ですが、この時グリッド自体はまだ構成されていない為、流し込んだHTMLがテーブルの最初の行に生成されてしまう為、dsCategoryが持っているデータの順番と、実際のHTMLの順番がずれてしまうというわけです。
javascriptエラーの"this.getRow(c) is undefined"ですが、getRowメソッドは該当のテーブルのc行目のRowをgetする(そのまんま・・・)メソッドです。このメソッドが呼ばれる場所はrefreshRowメソッドの内部で
this.getRow(index).rowIndex = index ;
と言う処理をする箇所ですが、前述の様にHTML流し込み時に行がずれてしまい、存在しない順番のRowを返し(=未定義値が返る)ます。すると、未定義値に対し".rowIndex"の参照をしてしまうため、エラーになる・・・と言うわけですね。

さて、このエラーを回避する方法ですが、

 

続きを読む...

会社では、資格取得を奨励しています。
奨励するのはいいですが、奨励する側が取得しないのではお話にならないので、しばらくサボっていた資格取得のための様々な勉強を初めました。

勉強するにしても、人それぞれいろいろな方法があると思います。
いざ、社会人になると平日の勉強時間ってほとんど取れなくて、土日に集中して…という感じになるかと思いますが、土日こそ忙しいんですよ。実は。
そのため、平日の行き帰りの電車やら、ちょっとした時間にいかに勉強時間を稼ぐかが、ポイントとなってきます。
ま、時間があったところで、効率よく勉強しなければ後の祭りで、時間ばかり過ぎるだけでもったいないですよね。

続きを読む...

会社では、資格取得を奨励しています。
奨励するのはいいですが、奨励する側が取得しないのではお話にならないので、しばらくサボっていた資格取得のための様々な勉強を初めました。

勉強するにしても、人それぞれいろいろな方法があると思います。
いざ、社会人になると平日の勉強時間ってほとんど取れなくて、土日に集中して…という感じになるかと思いますが、土日こそ忙しいんですよ。実は。
そのため、平日の行き帰りの電車やら、ちょっとした時間にいかに勉強時間を稼ぐかが、ポイントとなってきます。
ま、時間があったところで、効率よく勉強しなければ後の祭りで、時間ばかり過ぎるだけでもったいないですよね。

続きを読む...

今日はExt JSを使用中に遭遇した不可解な現象について紹介します。
先に断わっておきますが、現象の説明だけで解決方法はわかりません。
(※原因と回避方法がひとつわかったので追記しました。)

まずは、下のようなシンプルな表を用意します。

category = [
  [1, 'category 1', false],
  [2, 'category 2', false],
  [3, 'category 3', false],
  [4, 'category 4', false],
  [5, 'category 5', false]
];

var cmCategory = [

  {

    header: ' ',

    dataIndex: 'is_select',

    width: 30,

    renderer: function(val, x, rec) {

      return (val == true)

        ? '<input type="checkbox" checked>'

        : '<input type="checkbox">';

    }

  },{

    header: 'カテゴリ',

    dataIndex: 'category_name',

    id: 'category_name'

  }

];

dsCategory = new Ext.data.SimpleStore({

  fields: [

    {name: 'category_id', type: 'int'},

    {name: 'category_name', type: 'string'},

    {name: 'is_select', type: 'boolean'}

  ]

});

dsCategory.loadData(category);

gridCategory = new Ext.grid.GridPanel({

  store: dsCategory,

  columns: cmCategory,

  renderTo: 'category_table',

  height: 210,

  width: 198

});

そして、each関数を用いて、データの更新処理を行うと・・・？

続きを読む...

続いて、LightWindowの細かい使い方を紹介します。

続きを読む...

今回はLightWindowを紹介します。

LightWindowは画像、動画、div要素、外部ページなどをオーバーレイで表示してくれるライブラリです。

ダウンロードはこちらからどうぞ。

一般的なaタグにクラス指定し、使用する方法については、他の多くのサイトで紹介されていますので、割愛し

今回は、JavaScriptでLightWindowを表示する方法を紹介します。

続きを読む...

At the beginning of this month I had the chance to build a simple web application for Cisco IP Phone.

The reason why it became necessary to build the application is that a Cisco IP Phone can store only up to 99 phone numbers in its directory. It is a very small amount of data for a medium or large sized company.

In developing the web system I have used Java, MySQL, JSP, CiscoIPPhone API, and Tomcat.

In this system, data are stored in the Database server. The Cisco IP Phone simply submits an HTTP request to the web server which then connects to the Database server and receives the data in response. Thus, a large amount of data could be stored.

This system was mainly developed for text based Cisco IP Phones thus I have used mainly the following CiscoIPPhone tags.

Dial:#

Later, while supporting in the development of a graphic based application I have learned the following, which might be useful for future developers. I am going to mention here a few of them.

There could be at most 32 MenuItems in a CiscoIPPhoneGraphicFileMenu

Cisco IP Phones allow a maximum of 100 MenuItems. Each MenuItem includes a Name and an Associated URL.

Users might prefer to have their choices presented in a non-ASCII character set such as Kanji or Arabic. When using non-ASCII character sets, the system presents the information as a bitmap graphic. To select a menu, the user enters a number from 1 to 12 using the numeric keypad (* and # are not active).

It is NOT possible to bring together the graphics and text tags on the same screen.

In a Cisco Unified IP Phone 7975G, it is best to set the Display Area to 280 x 160
and the color depth to 24 bit.

Hope the article will help someone someday, if not at present.

Bests,

Islam

今回はデータストア(DataStore)のレコードの中から条件にあったレコードだけを取り出すフィルタリングについて紹介します。

フィルタリングで何が嬉しいかというと・・・？
例えばデータをExt.gridで出力している場合にララジオボタンやチェックボックスで条件を選択させ、条件にあった行だけをグリッド上に表示させるというようなことが可能となるのです。

それでは、下記の表を使ってフィルタリングの説明をしたいと思います。

item_id	category	name	display_flg
1	A	みかん	0
2	A	りんご	0
3	B	うどん	0
4	B	そば	1
5	B	ラーメン	0
6	C	コーラ	0
7	C	オレンジジュース	1

続きを読む...

JavaScriptを使って座標を指定し、画像の表示位置を自由に変化させるサイトは結構あると思います。

ところが、XHTML形式でhtmlを記述している場合だと、overflow:hiddenを指定したボックス内にposition:relativeやposition:absoluteで座標を指定した画像などを配置しても、ボックスからはみ出した部分が隠れずにすべて表示されてしまいました。

これはどうやらIEの仕様らしく、overflow:hiddenを有効にするためには、中に表示するものをpoosition:staticにしなければいけないようです。
でも、position:staticにすると座標を指定して表示することができません。

今回は、このような場合にどうやって対処すればいいか紹介します。

続きを読む...

Windows 7ですが、いろいろと試用しています。端的に言えば、非常に使いやすいかなと。
機能紹介はいろいろなサイトに譲るとして、どうしても譲れないのがtdx.sysのBSOD(Blue Screen of Death/ブルースクリーンで死亡)の問題ですね。
いろいろなサイトを見ると、アンチウイルスの問題であったりといろいろと書いてありますが、エンジン変えられないよということで、人柱になりつついろいろと試してみました。

続きを読む...

社員増加に伴い、PCを新規で用意しました。
今度のPCはCore i7プロセッサで、メモリもトリプルチャネルDDR3の6GB搭載なのに、そんなに高くないという…。すごい時代になったものです。1TBのHDDも7,500円程度で売ってましたし…。

とさておき、今まではVMWare上でしかテストしていなかったWindows 7を、このマシンに入れて人柱状態で各種テストを行おうと、Windows 7の64bit版を導入しました。
当然、マシンスペックはかなり高いので、インストール後もさくさく動作します。
せっかくなので、導入レポートをしておきます。

・NOD32
　会社で使っているアンチウイルスソフトですが、64ビット対応しているとのことで、問題なく動作しています。今のところ順調です。

・Office 2007(Word/Excel/PowerPoint/Visio/Project)
　ま、当然のごとく普通に動きます。

続きを読む...

IE8のRC1にしてからというもの、Beta2から仕様をいろいろと変更されたようで、ちょっと困ってます。
特に困ったのが、ソースの表示を行った時に、内蔵のエディタ(Sleipnirを使っているとなぜかメモ帳)で開いてしまうこと。開発時には、当然のごとく別のエディタを使っていますが、
　インターネットオプション → プログラム → HTMLの編集
でHTMLエディターを指定しても、全く無効というのがポイントです。

これも仕様変更の賜なのでしょうか…。と、IE8の開発者向け目玉機能の「開発者ツール(F12を押してみよう)」を何気に開いてみたら…

続きを読む...

JavaScriptには標準でtrim関数が用意されていません。
そのため、下記の様に独自にStrimgクラスを拡張する必要があります。

String.prototype.trim = function() {
  return this.replace(/^[ \n\r\t]+|[ \n\r\t]+$/g, '');
}

が、Ext JSを使用すると、デフォルトでStringクラス拡張済みのようです。

続きを読む...

ユーザの入力内容や属性情報によって、動的に変化するFlashサイトを作れたら・・・便利ですよね？
PHPには、SWFを作成するためのMingと呼ばれるライブラリが用意されており、それを利用すると動的なムービーを生成することが可能です。

今回は、PHPとMingを利用して、swfを生成する方法を簡単にご紹介します。
（ただし、Mingを利用するには別途インストール作業が必要ですので、マニュアルを参考に環境を準備してください。）

続きを読む...

以前紹介した、Editable Gridを含め、Ext JSで作成した表では、各セルの値と別に画面上の出力を制御することが可能です。

「ユーザの入力内容を加工して表示」や「値によってフォントの色を変更」など、柔軟なインタフェースを提供できます。

続きを読む...

Ext JSのサンプル紹介講座第二弾です。

今回のテーマは「入力可能なコンボボックス」、選択肢から選択もでき、任意の値も入力可能なフォーム部品の作成です。
難しそうに聞こえるかもしれませんが、Ext JSを使えばとても簡単に作成可能です。

htmlには、前回と同様にExt JSのライブラリとCSSのパスの指定の他、formタグの中に以下の一行を追加するだけです。

<input type="text" name="color" id="combo_text">

そう、普通のテキストフィールドのinputタグを用意するだけなんです。

続きを読む...

携帯Javaアプリと言っても、まずキャリア毎にプロファイルが異なります。
SoftBankのS!アプリはMIDP＋MEXA、auのEZアプリ、オープンアプリはMIDP、DoCoMoのiアプリはDojaです。そのため、基本的に同じプログラムを全キャリアで使用することはかなり難しいです。
（SoftBank・auに関しては、独自APIを使用しなければ同一プログラムの使用も可能）

今回はMIDPベースアプリの開発環境構築から簡単なアプリ作成までを取り上げます。

続きを読む...

今回はネタが見つからないので趣向を変えて、お気に入り書籍をご紹介したいと思います。


羽田野太巳著の「標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎」です。

続きを読む...

前回は値の取得、トランザクションの使用方法などを記述しましたので、今回は
「SQL文で取得したカラムを変数にバインドする方法」、「SQL文内のパラメータに値をバインドする方法」を紹介します。

続きを読む...

今回は、本屋さんを徘徊中に発見して、非常に興味を持った本をご紹介します。

サイモン・シン著の暗号解読という本です。

続きを読む...

以前にこのブログでも紹介されていたExt.jsですが、なかなか続編が執筆されていないようなので、連載企画を乗っ取ってみました。

ということで、早速、Ext JS(バージョン：2.1)を使った簡単な例を紹介します。
今回のテーマは、「行をドラッグ＆ドロップ可能な表」です。

今回利用したものは、Ext JSで紹介されているサンプルの中の"Editable Grid"というものです。

このサンプルでは、列をドラッグ＆ドロップで移動することは可能ですが、行単位で移動を行うことはできません。
そこで、このサンプルをもとにして、行単位のドラッグ＆ドロップが可能な表を作成します。

続きを読む...

数ヶ月ほど投稿が途切れていましたが、Zend Framework入門の続きを投稿したいと思います。
更新が止まっている間に Zend Frameworkの最新バージョンが1.5になりました。

今回の記事からは開発環境が以下のようになります。
開発環境： Zend Framework 1.5.1 / PHP 5.1.6

そこで、今日はZned Framework 1.5からUTF-8に対応するようになったZend_Pdfの紹介をします。
UTF-8に対応したということは・・・？
そう、日本語のPDFを作成できるようになったんです。

続きを読む...

Zend Framework Reference Guideの「9.5.3. 配列からの日付の作成」に以下のように書いてありました。

通常は、新しい日付インスタンスを作成する際には完全な形式の日付配列を渡します。 しかし、指定されていない項目があった場合は、 その項目の値はゼロとして処理されます。 つまり、たとえば hour を指定しなかった場合は 0 時として扱われるということです。

要するに、mkdate(0, 0, 0, 12, 14, 2007);のように、インスタンス生成時に「'hour' => 0, 'minute' => 0, 'second' => 0」と記述しなくてもいいというわけです。これは便利ですね。

ただ、ここでふと疑問がわいてきました。
「年月日を指定しなかったらどうなるんだろう？」

ということで、今回はその検証と、その他Zend_Dateの問題点を紹介します。

続きを読む...

システムを構築するときには必ずといってよいほど使われるのが日付関連関数。
今回はZend Frameworkの日付関数について紹介します。

まずは、現在の日時を表示させてみましょう。

require_once 'Zend/Date.php';

// デフォルトタイムゾーン(サマータイムがある地域はそれも適応される)

date_default_timezone_set('Asia/Tokyo');

$date = new Zend_Date();

print $date;

これだけで「2007/11/26 18:04:47」のように、'Y/m/d H:i:s'の形式で現在の日時を表示することができます。フォーマットを指定しなくてもデフォルトで決まった形式で日付データが出力できるのが良いですね。

でも、Zend Frameworkの日付関数はこれだけではありません。
他にも便利な機能が用意されているので見てみましょう。

続きを読む...

最近、JavaScriptのフレームワークを使って業務系アプリを構築することを一つの楽しみにしています。そんな中、Ext JS 2.0 に非常に興味が惹かれたので、じっくりと触ってみることにしました。というわけで、これから数回に分けて機能の説明などを行っていこうと思います。

Ext JS自体は、yui-extから派生してできたものらしいです。大きな特徴として、

続きを読む...

Zend FrameworkのAPIは大量にあるので、入門講座はまだまだ続きます。
今日のお題はZend_Sessionということで、セッション管理関連のお話です。

ただ、このライブラリーはまだ開発途上らしく、マニュアル上に「案を出したり実際に作成したりした場合は、メーリングリスト fw-auth@lists.zend.com にお知らせください。 」と記載があります。
セッション管理方法について、良い案があれば、ぜひメールをしてみてください。

今回紹介するSZend_Sessionですが、基本的な機能はPHPのSESSION関数と同じです。
ただ、下記に示すような追加機能があり、セッション管理がより安全になっています。

【追加機能】
１．「名前空間」機能
２．同じ名前のセッションを作成できなくできる
３．セッションをlockをし、読み取り専用にできる
４．セッション毎に有効時間を設定可能

では、実際にこれらの機能の使い方を見てみましょう。

続きを読む...

今回は珍しく PHP のお話です。

PHP4のサポートが年内で終了するということで、
PHP4からPHP5への民族大移動が始まっている季節？なわけですが、
PHP4からPHP5に移行する際、注意点の一つとして、
オブジェクトのコピー方法が変わる、という話が取り上げられています。

続きを読む...

引き続きPDO関数について説明します。
今回は、SQL実行後のデータ取得を中心に簡単に紹介します。

続きを読む...

先月から紹介を始めたZend Frameworkですが、大事な部分を紹介し忘れていました。
Zend Framework のMVC(Model - Controller - View)モデルで基本となる、コントローラのお話です。
Zend Frameworkwを紹介するには、この記事を一番に書くべきでしたね。

前回、前々回紹介したZend_HttpやZend_Mailは、システム全体からみると小さなモジュールの一部ですが、今回紹介するコントローラは、アプリケーションの全体的な制御を行っている重要なプログラムです。

コントローラはシステム全体に影響してくるので、ディレクトリ構成やシステムの設置方法も簡単に紹介したいと思います。

続きを読む...

PHPのPDO関数を使ってみました。
PHPマニュアルにも記載されていますが、サンプルと簡単にまとめたものを掲載します。

データベースにはSQLiteを使用しました。

続きを読む...

久々のアドエス（ Advanced/W-ZERO3[es] ）上での JavaScript ネタです。
今回は簡単な Ajax アプリの実験をしてみます。
ということで、ガリガリとサンプルを作ってみました。
今回は prototype.js と scriptaculous.js の2つをモジュールで使用しました。
(これ使えば簡単だから)

続きを読む...

正式版がリリースされたばかりの「Zend Framework」、今回はメール機能の紹介です。
Zend_Mailはテキストメール、HTMLメール、添付ファイル付メールに対応しており、複数の宛先へのメール送信も簡単に行うことができます。また、送信・受信共に複数のプロトコルに対応しており、SMTP認証やTLS/SSLによるメール送信も可能です。

ただし、Zend_Mailで日本語のメールを取り扱う場合には、少し注意が必要です。
そこで、今回はZend_Mailを使った日本語のメールの送信方法を紹介します。

開発環境： Zend Framework 1.0.1 / PHP 5.1.6　(スクリプトの文字コード: UTF-8)

続きを読む...

2007年7月2日に正式版がリリースされた「Zend Framework 1.0.0」ですが、まだ本家サイトのマニュアルも、日本語サイトの情報量も少ない状況です。そんな中、このフレームワークの検証係を任命されたので、ソースコードを追いながら使い方を調査しています。

オブジェクト指向型プログラミングに慣れていないので、ソースコードを追うだけでも一苦労なのですが、マニュアルやソースを読んでわかったこと、実際にスクリプトを試し書きしてみてわかったことなどをちょっとだけ紹介したいと思います。

まずは、数ある Zend Framework API 群のなかでも、わかりやすく使いやすいと思ったAPIのひとつ、HTTP Clientの入門編です。

開発環境： Zend Framework 1.0.1 / PHP 5.1.6

続きを読む...

前回に引き続き、MooTools のお話です。
今回は、Json.Remote オブジェクトを使ってみます。

JSON とは、JavaScript Object Notation の略称で、 データ交換フォーマットの一つです。
名前からして、JavaScript専用であるかのように感じますが、
あくまでデータフォーマットなので、当然、他の言語でも使用できます。

データの簡単な例は↓です。

(例)
{"名前":"たわばがに", "職業":"へっぽこエンジニア", "好きな動物":"ネコ"}

当然ですが、階層構造にすることも可能です。

(例)
{
　"たわばがに" : {
　　"職業" : "へっぽこエンジニア",
　　"好きな動物" : "ネコ"
　},
　"あべしえび" : {
　　"職業" : "へたれデザイナー",
　　"好きな動物" : "イヌ"
　}
}

Json.Remote オブジェクトを用いると、サーバサイドのスクリプトと JSON 形式のデータを
簡単にやりとりすることができます。

いつものごとく、簡単なサンプルを作成してみました。

続きを読む...

PHPでSWFの生成を行うには、Mingというライブラリを使用します。
MingはPHPの拡張モジュールなので、サーバに別途インストールをしないと使えませんが、このモジュールを使えば、ユーザが投稿したデータからSWFを動的生成することを可能にします。

今回、マリエール様のキャンペーンサイトでは、この技術を応用したシステム開発を行いました。

今回は MooTools のAjaxオブジェクトに絞ったお話をしたいと思います。

MooTools は、軽量・高速がウリのJavaScriptライブラリです。
確かに、フルセットでダウンロードしても、180kbyte程度(V.1.11)しかないので、
用途限定で機能を絞り込めば、かなりスリム化できそうです。

さて、それでは簡単なサンプルを作成してみましょう。

続きを読む...

今日はPHPのマルチバイト対応正規表現ライブラリの検証レポート(UTF-8)です。

文字列の先頭と末尾の空文字を取り除く関数として、trim()がありますが、この関数はマルチバイトに対応していないため、全角スペースにも対応したmb_trim()を作成しようとしていました。

全角スペースについては、mb_ereg_replace()を使い、正規表現で除去しようとしていたのですが、スクリプトを書いてテストしてみるとなぜかうまくいきません。文字コードの指定もしてみたのですが、それでもうまくいきません。

いろいろ試したり、調べたりしていると、これはPHP4のマルチバイト対応正規表現ライブラリにバグがあるのではないかという疑いが出てきたので検証してみました。

続きを読む...

前回に引き続き、アドエス（ Advanced/W-ZERO3[es] ）上での JavaScript ネタです。
今回も前回に引き続き、イベントハンドラ系の実験です。
ということで、さくっとサンプルを作ってみました。

続きを読む...

今日は珍しく、JavaScriptの話です。
JavaScriptを使用すると、クライアント(ブラウザ)側で処理を行うことができるので便利ですが、ブラウザによって動作が違うことがあるので厄介です。
ある案件で入力制御のJavaScriptを作成することになったのですが、InternetExplorerとFirefoxのonKeyに対する動作の違いで悩まされました。

onKeyupを使い、何か文字が入力されるたびにJavaScriptで処理をして、フォームの値に反映させようとしていたのですが、Ｆｉｒefoxではうまく作動するのにＩｎｔernetExplorerだと何度テストしてもうまくいきません。
何が起こっているのかわからないので、フォームから受け取った値と処理途中の値、処理後の値などをすべて表示できるようにしてみました。

すると、こんなことがわかりました。

続きを読む...

久しぶりの投稿です。

今回は、xdebug2でglobal変数内の値を表示する設定を紹介させていただきます。

続きを読む...

前回からかなり間が空いてしまいましたが、今回も JavaScript ネタです。
しばらく間が空いてしまったから、というわけではありませんが、今回から何回分かは、
先日発売された WILLCOM の Advanced/W-ZERO3[es] (型番WS011SH) (以降、アドエス) で
JavaScript がどのように動くかを検証してみたいと思います。

まず、アドエス上で使用するブラウザですが、
現状、InternetExplorer Mobile、Opera Mobile、LunaScape Mobile の3つがインストールされている状態です。
とりあえず実験はこの3つのブラウザを使って行います。

アドエス編の第1回ということで、まずは簡単なものから試してみようと思います。
ということで、いつものごとく、サンプルを作ってみました。

続きを読む...

phpでは mb_convert_encoding を使うことで、文字のエンコーディングを変更することができる。SJISを使う場合などで、5C文字(エスケープ誤認識)の絡みもあって、一時的にエンコーディングを別の文字コード体系に変換し、再度変換をかけて元の文字コード体系に戻す処理もよく行う。

このような処理を行う場合で、気をつけなくてはいけないのが UTF-8 絡みの問題である。

続きを読む...

今日は社内ゼミの担当でSmartyについての発表をするので、ここに内容を少し紹介しておきます。

[今日のメニュー]

• Smartyのメリット
• 設置方法
• Smartyの使い方
• Smarty Tip

入門なので、導入から簡単な使い方までを説明します。

続きを読む...

研修期間も終わりに近づき、簡単な実案件を任されるようになってきました。
簡単な実案件＝メールフォーム・・・最近はひたすらメールフォームばかり作っているような気がします。

案件ごとに項目数や項目内容、入力チェック項目などの仕様が変わるとはいえ、基本的には同じものを作っているので、毎回同じようなバグを出すわけにはいきません。回数を重ねるごとにバグの少ないメールフォームを作成し、最後にはバグのない状態でデバッグ屋さんに提出したいものです。

そこで、今回は「エンジニア泣かせのデバッグ」に対抗し、開発側の立場から今までの失敗点や注意点を振り返って、フォーム作成時のバグ撲滅対策を考えてみようと思います。

続きを読む...

PHPでいくつかの課題を終わらせ、先月よりSmartyというテンプレートエンジンを使い始めました。
最近は、やっと慣れてきて簡単なテンプレートの作成もできるようになってきたところです。
そこで、今日はSmartyを使って作ったテンプレートをひとつ紹介したいと思います。

ニュース一覧や掲示板、予定表などで多数のデータがあるときに、１ページに全部表示させると見難くなってしまいます。そこで、５件ごとや１０件ごとなどのように指定の件数ごとにページを分け、リンクによって前のページや次のページに移動させるページ送りの機能があるのですが、それをSmartyで作ると下のようになります。

続きを読む...

ということで、今回はJavaScriptの例外処理(エラー補足)に関して書いてみます。

うんちくは後にとっておくとして、まずは毎度おなじみ、サンプルから。

続きを読む...

今日は便利なサイトを見つけたのでその紹介をします。
紹介するのはタイトルの通り「PHP Cheat Sheet」です。

Cheat Sheet(チートシート)は日本語に訳すとカンニングペーパーですが、別にこのサイトは不正行為をするためのものではありません。今回紹介するチートシートとは、プログラミングをしていて、「あれ、これはどうなるんだったかな？」と思ったときに便利な情報が載っている、早見表のことですよ。

普通はプログラミングのCheet Sheetというと、使用できる関数の一覧だとか、オプションの一覧などが多いのですが、今日はちょっと違ったCheat Sheatを一つ紹介したいと思います。

ここで、突然ですが問題です。

if ($str) {
    echo "true";
} else {
    echo "false";
}

下の４つの値を上に書いた条件式に当てはめると、それぞれ何が表示されるでしょう？
また、条件を($str)から(isset($str))に変えたら、どうなるでしょう？

１． $str = 0;
２． $str = "0";
３． $str = "";
４． $str = null;

続きを読む...

ということで、三度、JavaScriptのDOMスクリプティングネタです。

今回はイベントハンドラの操作に使う addEventListener、removeEventListener、attachEvent、detachEvent の「たとえばこんな使い方？」みたいなものを書いてみました。

まずは毎度おなじみ、サンプル。

続きを読む...

ということで、前回に引き続き、JavaScriptのDOMスクリプティングネタです。

前回は cloneNode に関して取り上げましたが、
今回は属性要素の削除に使う removeAttribute について書いてみました。

まずは毎度おなじみ、サンプルから。

続きを読む...

今週の課題はソケット接続であるサイトのHTMLを取り込み、そのなかから指定された部分の文字列を抜き出してくるというものでした。そこで、今日は初心者向けに正規表現の入門と豆知識を紹介したいと思います。

まず、正規表現を使って何ができるのかというと、ある決まったルールに当てはまる文字列を見つけることができます。例えば、「aで始まってeで終わる」というルールを決めると、"ae"とか、"apple"とか、"absolute"とか、ルールに当てはまるものは全部見つけることができます。このルールをさらに細かく決めていけば、自分が探している文字列を間違いなく探してもらえるというわけです。

次に、正規表現のルールを決めるときに使う記号について。
正規表現ではルールを決めるときに使う特殊な意味をもった記号のことをメタ文字と言います。

メタ文字	意味
^	行頭に一致する
$	行末に一致する
.	任意の一文字
*	直前文字の0回以上の繰り返し
+	直前文字の1回以上の繰り返し
?	直前文字の0回または1回の繰り返し
{n}	直前文字のn 回の繰り返し
{n,}	直前文字のn 回以上の繰り返し
{n,m}	直前文字n 回以上、m 回以下の繰り返し

このぐらいは正規表現で検索すると、大体どこのページにも書いてあることですね。
でも、これだけの情報ではPHPのpreg_match()やpreg_replace()を使うときに困ったことになります。

例えば・・・

続きを読む...

ということで、今回はJavaScriptのDOMスクリプティングネタです。

以前、さらりと appendChild や removeChild に関しては取り上げた気がするので、
今回は要素の複製に使う cloneNode について書いてみました。

まずは毎度おなじみということで、以下のようなサンプルを作ってみました。

続きを読む...

script.aculo.us(Ajaxライブラリ）のSortable.createでonUpdateを使った際に、うまく動作しませんでした。
Sotable.createは、リストなどの要素をドラッグ&ドロップで並び替えできます。

調べた結果、Sotable.createを使う際、並び替えたい要素にidをふりますが、idのつけ方によってonUpdateが反応しない場合があるようです。

続きを読む...

「六曜付カレンダーを作る」の最終回です。

前回の記事では、「任意の日の旧暦は、その日の直前にある二分二至とそこから三回分の中気、及び五回分の朔を計算することで決定することができる。」ことを紹介しました。この方法を用いれば、閏月の挿入場所を比較的簡単に算出することができます。

しかし、この方法をそのままカレンダーに組み込むのには問題があります。
というのは、二分二至や中気、朔の計算方法が複雑なため、計算に時間がかかるからです。
任意の日の旧暦を求める場合には処理速度0.085秒程度なのであまり気になりませんが、これを一ヶ月分(２８～３１日分)繰り返すと2.5秒もかかってしまいます。カレンダーを開いたり、月を移動するたびに２，３秒もかかっていたのではストレスを感じてしまいます。

そこで今回は、前回紹介した旧暦計算スクリプトをカレンダーに応用する方法について紹介します。

続きを読む...

ということで、今回はJavaScriptのパターンマッチネタです。

比較するメソッドとしてmatch、search、test、exec、の4つを取り上げます。
それぞれ性質が異なるので、使う場合は注意が必要です。

比較のために、以下のようなサンプルを作ってみました。

続きを読む...

私の課題紹介「六曜付カレンダーを作る」の第二弾です。
まずは簡単に前回の復習を。

【前回のあらすじ】
六曜付カレンダーを作るためには旧暦の計算をしなくてはいけない。
旧暦計算をするためには新月と二十四節気の日付のデータが必要である。
旧暦を計算する問題点は・・・

１：閏月挿入箇所が変則的なので挿入箇所を決めるのが難しい

２：新月と二十四節気の計算方法が複雑なので計算に時間がかかる

以上、前回は六曜付カレンダー作成時の難関＝「旧暦計算の問題点」を説明しました。

ということで、今回は上に示した旧暦計算の2つの問題点のうち、１番の閏月の挿入箇所の決め方を紹介していきたいと思います。

続きを読む...

ということで、今回はJavaScriptの小ネタです。
普段あまり意識していない部分に着目してみました。

【その1．戻り値指定なしのreturnは何も返していないのか？】

通常、関数でreturnを書く場合は何らかの戻り値を指定する場合が多いと思いますが、
もし戻り値を指定しなかった場合は、本当に何も返らないのだろうか？
ということで、実験してみました。

<script type="text/javascript">
<!--
// returnあり
function hoge() {
    return;
}
// returnなし
function hogehoge() {
}
// 表示
function test() {
    if (hoge()) {
        alert("test1");
    }
    if (hoge() != "") {
        alert("test2");
    }
    if (hoge() == undefined) {
        alert("test3");
    }
    alert(hoge());
    alert(hogehoge());
}
//-->
</script>
<input type="button" name="button" value="テスト" onClick="test()">

以下、結論。

実際にはundefined(未定義値)が返る。
returnを書かない場合も同じく、undefinedが返る。

なので、alertで表示されるのは、test2とtest3、そして最後の2つのundefinedとなります。
戻り値を指定しない場合は気に留めておいた方がよいかもしれません。

【その2．関数に不定の引数を渡した場合の扱いは？】

これに関しては、実験から結果を述べるのみとなります。

<script type="text/javascript">
<!--
function hoge() {
    alert(arguments[0]);
    alert(arguments[1]);
}
//-->
</script>
<input type="button" name="button" value="テスト" 
onClick="hoge('おっす','オラ、たわばがに')">

以下、結論。

関数に渡した引数は、関数内のローカル変数(配列)argumentsに格納され、
arguments[0]やarguments[1]といった指定で引き出すことが可能。

なので、alertで表示されるのは、
arguments[0]とarguments[1]に格納された「おっす」と「オラ、たわばがに」となります。

以上、痒いところに手が届きそうなネタでした。

４月初めに入社し、開発部の新入社員として研修を始めたわけですが、基本構文を勉強した後にいくつかの課題をやりながらPHPの勉強を進めていっています。

先週の課題はカレンダー作成でした。
土日祝日までうまく表示できるようになり、完成！と思ったのもつかの間・・・
「じゃぁ、今度は六曜も表示させてね」という部長さんの一言で私のカレンダー製作は難関に。

続きを読む...

Ajaxのロード中に表示する画像を探していたら、アニメーションgifを生成してくれるサイトを
見つけましたので紹介します。

続きを読む...

Office 2007から、ファイル保存形式が変更になりました。
Excel 2007を例にとると、ファイルの拡張子が以下のように4文字に変更されました。

• xlsx: Excelブック
• xltx: Excelテンプレート

また、データ形式自体も変更になり、xlsxファイル自体はzipで圧縮されたファイルになっています。そのため、Windows付属のzipファイル等でファイルの展開を行うことも可能です。

zipで展開すると、

\docProps
\xl
\_rels
[Content_Types].xml

といったディレクトリ・ファイルがあることが分かります。
ちなみに、この中にあるファイルは、ほとんどがxml形式のファイルで、画像等のデータは\xl\media以下に実体のファイルとして保存されるようになっています。

このうち、docPropsディレクトリには、

\app.xml
\core.xml

の2つのファイルがあることが分かります(初期状態で)。
今回は、core.xml について解説します。

core.xmlは、ファイルの属性情報が保存されるファイルです。このファイルを編集することによって、さまざまな属性を設定することが可能です。具体的には、

dc:creator	作成者
dc:lastModifiedBy	前回保存者
dc:title	タイトル
dc:subject	表題
cp:keywords	キーワード(Vistaではタグ検索に利用)
dcterms:created	コンテンツの作成日時
dcterms:modified	前回保存日時
cp:lastPrinted	前回印刷日

のような要素をいじれば、上記属性を変更することが可能です。

PHPでBasic認証を行うことができますが
PHP 5.1.0 以降であれば、PHPでDigest認証を行うことができます。

続きを読む...

ということで、相も変わらず、JavaScriptネタです。
今回は最近非常に気になっていた、ブラウザ毎に異なるキーイベントに関してです。

何らかの処理でキーボード入力を取りたい場合、
onKeyDown、onKeyPress、onKeyUP
のいずれかを使うと思いますが、普通に押した押してないを判別する程度だったら、
上記のどれを使っても特に影響はないと思います。

しかし、キーをずっと押し続けた状態を取る場合、
ブラウザ毎にかなり挙動が変わってくるので、要注意です。

以下、サンプルスクリプト(JavaScript + HTML)。

<html>
<head>
<script type="text/javascript">
<!--
var down  = 0;
var press = 0;
var up    = 0;
document.onkeydown = 
    function () {
        document.getElementById("down").innerHTML = ++down;
    }
document.onkeypress = 
    function () {
        document.getElementById("press").innerHTML = ++press;
    }
document.onkeyup = 
    function () {
        document.getElementById("up").innerHTML = ++up;
    }
//-->
</script>
</head>
<body>
down: <span id="down"></span>回;<br>
press: <span id="press"></span>回;<br>
up: <span id="up"></span>回;<br>
</body>
</html>

これを実行すると、以下のような結果になりました。

【Win IE】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

【Win Firefox】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

【Win Opera】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

【Mac Safari】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

【Mac Firefox】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

【Mac IE】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。

というように、なかなか複雑です。
Firefoxに関しては、Win版とMac版で動作が異なっています。
OSもちゃんと見ろ、ってことですね。

以上から、キーを押し続けた状態で変化が出てるのは onKeyDown と onKeyPress なので、
OS、ブラウザを判別して処理を適切に切り替えてやれば、動作の差異はなくせます。

以上、微妙にマニアックなJavaScriptネタでした。

ということで、JavaScriptネタです。
とりあえず簡単なネタとして、今回はcreateElementについて取り上げてみようと思います。

名前から推測できると思いますが、その名前の通り、エレメント(オブジェクト)を生成します。
ここでのエレメントというのは、HTMLのタグのことです。
spanやらdivやらimgやら、色々作れます。
createElementで作ったエレメント(オブジェクト)に 対しては、
setAttributeで要素を追加したり、style.cssTextでスタイルの設定をしたりすることができます。
これらの追加要素はappendChildで適用(表示を反映)することができます。
逆にremoveChildで消すことも可能です。

これを用いることで、HTMLとJavaScriptで操作する要素を完全に切り分けることができます。
WEBデザイナさんからシステム用に加えておいたタグに関して、
「え～、このタグいるんですか？　表示に関係ないので、いらないと思って消しちゃいました～」
とか言われて顔を青くする、というようなことが減るかもしれません(笑)

で、サンプルとしてはこんなの↓。

この文字列をクリックすると、下に文字列が出るよ
この文字列をクリックすると、下に画像が出るよ
この文字列をクリックすると、文字列or画像が消えるよ



以下、ソース。

/**
 * spanエレメント(オブジェクト)追加
 */
function displayString_createElement() {
    var o = document.createElement("span");
    o.setAttribute("id", "js_koneta_01-01");
    o.innerHTML     = "JavaScript万歳！";
    o.style.cssText = "font-weight: bold;"
                          + "font-size: 12pt"
                          + "color: #00ff00";
    document.getElementById("js_koneta_01").appendChild(o);
}

/**
 * imgエレメント(オブジェクト)追加
 */
function displayImage_createElement() {
    var o = document.createElement("img");
    o.setAttribute("id", "js_koneta_01-01");
    o.setAttribute("src", "images/js/analysis_back.jpg");
    document.getElementById("js_koneta_01").appendChild(o);
}

/**
 * エレメント(オブジェクト)消去
 */
function deleteElement_createElement() {
    o = document.getElementById("js_koneta_01-01");
    document.getElementById("js_koneta_01").removeChild(o);
}

サンプルでは書いていませんが、

document.body.appendChild(object);

というような、body自体を指定することも可能です。
ブラウザ内に絶対座標でオブジェクトを表示する場合などは、
こちらの方が使い勝手がいいかもしれません。

簡単ですが、こんなところで。

しゃいんブログ右下にある
「社長ブログとしゃいんブログの閲覧比率バトルJS（長っ）」
に関して、です。
まぁ、タイトルだけ見ると、普通は「この表示内容について怒られたのだろう」と考えるのが
自然ですが、実際は別の内容でお叱りを受けました。
サーバ管理人の「ぴ」氏から。

このJS、画像を無駄に使ってる上に、通常の画像ディレクトリと別のディレクトリに
画像を置いたため、ログが肥大化＆カオス化して、解析ツール等で微妙に見にくくなって
しまっているようで‥‥。
(ファイル数の増加と共にログが増えてるから当たり前ですが‥‥)
ということで、とりあえずJSで使う画像は通常の画像ディレクトリに移しました。
といっても画像が多いのは変わらないままなので、
ログの肥大化は免れないと思いますが‥‥(汗)
そのうち撤去命令が出されそうな気のする、今日この頃。

JSといっても、今回はホントにネタのみでした。
といったところで、御粗末様です。

今回は、Yahoo! User Interface Library（YUI）を使ってカレンダーを作成する方法を紹介します。

続きを読む...

タイトル名を見て、ピンときた人はJavaScriptの通‥‥かもしれません。

で、何の話かと言いますと、社員ブログトップの上側でちまちま動いている謎の5人組(JavaScript)で動いてますのことです。
ただのアニメーションGIFでいいんじゃない？という気が激しくしますが、
無駄に、JavaScriptで実装してあります。
以下、無駄？な機能。

・HTML内でscriptタグでソースファイルを指定するだけで動く
・画面サイズを変更した場合、自動で配置調整
・人数追加が容易(追加してどうする？ってツッコミはなしで)

で、どう実装してるんだ？と思ったら、animation.jsを見てください。
非常に単純な構造ですので、イベントハンドラと関数が何なのか知ってる人なら、
すぐ理解できると思います。
window.onload = ～でメイン処理を呼び出し、あとはアニメーション処理用の関数をループさせてるだけですね。
難しいことは一切やってません(笑)

ということで、今後は、JavaScript専門で記事を書いていくつもりです。
徐々に難しい内容にステップアップしていく予定ですので、JavaScript好きな人は見てるとハッピーなことがある‥‥かもしれません。

(追記) とりあえず、これだけでは何なので、右下の方に社長ブログと社員ブログの閲覧状況が見れるようにJavaScript＆PHPで実装予定です。
ブログ公開までには実装できてるかな‥‥？(現状のお仕事状況次第(笑))

通常、ファイルダウンロード時にファイル名を指定するには、httpのヘッダ部で
Content-Disposition: attachment; filename="ファイル名"
とすることで、指定した「ファイル名」で出力することが可能である。

ただし、ファイル名を日本語で出力する場合は、SJISで出力してあげないと文字化けしてしまう。また、一般的にファイル名部分をURLEncodeしてあげることでも、文字化けせずに出力が可能である。

IE7(Internet Explorer 7)で日本語ファイル名でダウンロードする際に問題がある。ファイル名に「構築」や「予約」等の文字が含まれている場合、直接SJISで出力してあげると不可解な文字化けを起こしてしまう。たとえば、「構築」の場合は「構」の字が「浩」になり、「予約」の場合は「予」の字が「誉」になってしまう。

調査してみるとIE7のバグらしく、SJISで2バイト文字の2バイト目が「5C」「7C」になっている場合、IEが「5E」として認識してしまうらしい。まぁ、SJIS自体が制御コードと文字コード体系がかぶっており、特に「5C」で終わる文字は「5C文字」と呼ばれ、SJISで文字を扱う場合は非常に厄介なものです。
※ なので、ソースコードはUTF-8やEUCで記述するといいですよ。

IE7のSP1あたりで解消されるとの情報は得たが、それまで待ってもいられないので、当面ファイルのダウンロードにFirefoxを使えば文字化けはしないで済むことは分かった。がー。それでは負け組になってしまうので、なんとかしようと思っていろいろ試してみた。

1. SJIS出力をやめ、全部URLEncodeしてしまう。
この方法で解決するには解決するのだが、ファイル名が長い場合はIEが勝手にファイル文字列の先頭を無視してしまう。まぁ、URLEncodeすれば、通常2バイトで済んでいたデータが6バイト分も消費されてしまうので、当たり前と言えばそうなのだが…。

2. それなら…
文字化けする「5C」「7C」で終わる文字だけをURLEncodeしてしまえばよいのでは？という考えに立ち、実際に実装してみたところ…

うまく動きました。これにて一見落着！

総括:
奇妙なバグはやめてほしい(バグだからそういうものといえば、ねぇ…)