アシアルブログ

UMLを描こう - Vol.2 シーケンス図

Wed, 08 Sep 2010 22:30:00 +0900

シーケンス図とは？
シーケンス図とは，オブジェクトの動的な相互作用を表現するためのUML図です。
オブジェクト指向は，一言で言えば「役割分担」なので，オブジェクト同士のコミュニケーションが重要です。
シーケンス図では，オブジェクト同士のコミュニケーションによるインタラクション（相互作用）の様子を明確に表すことができます。
シーケンス図においてインタラクションは，メッセージ送受信のシーケンスとして図示されます。
クラス図がクラスの静的な定義とするなら，シーケンス図はオブジェクトの動的な振る舞いの定義と言えます。

3秒で分かるシーケンス図の描き方
まずは登場するオブジェクトを並べます。

長方形の中に「オブジェクト名：クラス名」と書いてオブジェクトを表します。
オブジェクト名とクラス名のどちらか一方を省略してもかまいません。
オブジェクトの下には「ライフライン」と呼ばれる線を引きます。
ライフラインは，オブジェクトがメモリ上に存在していることを表しています。

あるオブジェクトが別オブジェクトのメソッドを呼び出すときは，下図のように表します。

ここではcartControllerがcartのgetTotalPrice()メソッドを呼び出し，cartは戻り値を返しています。
メソッド呼び出しは，先端を黒く塗った矢印（callメッセージ）で表します。
returnは，点線矢印（replyメッセージ）で表します。replyメッセージは省略してもかまいません。
なお，ライフライン上に乗っている長方形は，活性区間バーと呼びます。
活性区間バーは，オブジェクトが処理を実行中であることを示します。

戻り値を受け取る変数名や，メソッドの引数は下図のように表します。

callメッセージのキャプションとして，
「戻り値を受け取る変数名 = メソッド名(引数1, 引数2, ...)」
と書くわけです。

クラスのインスタンスを生成するときは，
下図のように≪create≫ステレオタイプを付けて表します。

≪create≫ステレオタイプさえついていればよいので，
生成メッセージ名は「Java風にクラス名()」「PHP風に __construct()」「シンプルに new()」のどれでもかまいません。

メソッド呼び出し元のオブジェクトを明示しない場合は，矢印を黒丸から始めます。

上図においてcartControllerが自分のメソッドdialog()を呼び出したいとすると，
メッセージの矢印を自分に向ければOKです。

ちなみに，分岐や繰り返しを表記する記法も仕様としてあるのですが，
図が複雑になってしまうので，下図のようにコメントで表現することをお勧めします。

最後に，非同期callメッセージについて説明します。
非同期callメッセージの場合は，通常の（同期）callメッセージと違い，
メッセージを送るだけで返答を受け取らずそのまま次の処理に移ります。
非同期callメッセージは，矢印の先を黒くぬらずに表現します。

メソッド呼び出しは通常，同期callメッセージで表されるので，
非同期callメッセージは記憶の片隅に置いておく程度で問題ないです。

以上で，シーケンス図の描き方を説明しました。
シーケンス図を描くことで，処理全体のオブジェクト相互作用の様子をつかむことができます。
オブジェクトの振る舞いをコードではなくシーケンスとしてイメージできるようになれば，設計の視野を広げることができます。
また，プログラマ同士でクラスの実装について議論する場合，クラスファイル群に向き合うよりも，シーケンス図を見ながら議論すると効果的です。
皆さんもぜひ，シーケンス図を描いてみてください。

クラス図＋シーケンス図＝詳細設計
前回，クラスの静的な設計はクラス図で表せることを説明しました。
そして今回，オブジェクト同士の動的なインタラクションがシーケンス図で表せることを説明しました。
クラス図が静的な側面の設計であり，
シーケンス図が動的な側面の設計だという感覚がつかんでいただけたでしょうか？
クラス図とシーケンス図が揃えば，コードに極めて近い設計＝詳細設計を表すことができます。
よって前回，「詳細設計ドキュメントを読み書きする際に最低限知っておくべき図は，クラス図とシーケンス図」と述べたわけです。

シーケンス図上でプリファクタリングしよう
皆さんは，「なんじゃこのクラス，使いずら。機能つめこみすぎ！」と思ったことはありませんか？
私は毎日のようにあります。言語によらず。
では，なぜそのような使いづらいクラスができてしまったのでしょうか？
それは，実装者が設計プロセスをすっとばして思いつきでコーディングしてしまったためです。
使いやすくて喜ばれるクラス設計を行うには，シーケンス図を事前に描いてインタラクション全体を見直していくことが大切です。
これをプリファクタリングと呼びます。
コーディングの前にプリファクタリングしておけば，設計がすっきりして使いやすいクラスが実装できます。
「実装後にリファクタリングすればいいのでは？」と思う人がいるかもしれませんが，実装後ではあまりに遅く，修正による副作用やテストのやり直しを考えると，極めてリスクが高いと言えます。
したがって，良いクラス設計を得るには，プリファクタリングが重要であり，かつ安全というわけです。
システムの中で重要な処理は，必ず実装前にシーケンス図を描きましょう。

ではどうやって0から，クラス図とシーケンス図を導くのか？
あるシステムを実装したいという「要求」から，どうやって，クラス図とシーケンス図を導けばよいのでしょうか？やはり，センスに頼るしかないのでしょうか？
いいえ，実はクラス図とシーケンス図を導く手法がすでにあります。心配はいりません。
具体的には，OOA（Object-Oriented Analysis: オブジェクト指向分析）と，OOD（Object-Oriented Design: オブジェクト指向設計）という2つの手法を用います。
まず，OOAで，要求を定義・分析して，分析レベルの設計図やドキュメントを作ります。次に，その分析レベルの成果物を元に，OODを用いてクラス図とシーケンス図を徐々に導出していきます。あとはそれをOOP言語で実装すれば完成です。
ちなみに，「OOA，OOD，OOP，そしてテスト手法」を統合したフルセットの開発手法のことを，OODP（Object-Oriented Development Process: オブジェクト指向開発プロセス）と呼びます。
オブジェクト指向開発プロセスは私の最も興味のある分野の一つなので，またそのうちblogで触れる機会があるかもしれません。

sshでポートフォワード

Mon, 06 Sep 2010 20:39:23 +0900

sshには言わずと知れた「ポートフォワード」という機能があります。
読んで時の如しで、sshの暗号化されたトンネルを利用し、任意のポートに来た通信を転送できます。

何がうれしいかと言うと、リモートの 5432番をローカルの 5432 にマッピング出きる。
つまり、sshさえ繋がれば、そのサーバから見える範囲ならなんでも使える！と言うことです。

1・ローカルへリモートのポートをマッピング
例えば、二つのホスト（chiba, shiga）があるとします。
chibaに、shigaの5900ポートをフォワードする場合は以下のようになります。

chiba:~$ ssh shiga -L 5900:localhost:5900

上記のセッションを張っていれば、localhostの5900はshigaの5900です。

この状態で、下記のようにするとshigaのVNCにつながります。（もちろん、shigaが5900でVNC待ち受けしていれば）

chiba:~$ xvncviewer localhost:0

では、コマンドの意味を解説します。

・ ssh
　コマンドです。
・ shiga
　接続先ホストです。192.168.0.100とか www.asial.co.jp とか色々入ります。
・ -L 5900:localhost:5900
　今回の肝です。-Lは、「ローカルにリモートのボートをマッピング」という命令で、書式は

ローカルのポート:リモートから見たホスト:リモートから見たホストに対してマッピングしたいポート

　となります。
　この場合は、ローカルの5900に、リモートから見たlocalhostの5900番をマッピングと言う意味になります。

細かいことはmanpageで。

もちろん、localhost以外の場合は以下のようになります。

chiba:~$ ssh shiga -L 5900:hikone:5900

なお、hikoneからは、shigaが5900にアクセスしているように見えます。
この方法は、chibaからhikoneに直接アクセス出来ない場合に役立ちます。(chibaからのパケットをRejectしているとか、hikoneがnatの中など)

2・ローカルのポートをリモートにマッピング
先ほどとは逆です。オプションは、-Rを使用します。

chibaの5900番をshigaの5900番にマッピング

chiba:~$ ssh shiga -R 5900:localhost:5900

-R リモート(shiga)のボート:ローカル(chiba)から見たホスト:ローカル(ry)ポート

こんなこと出来て何がうれしいかというと、例えば、natの中にあるホストにnatの外から直接アクセス出来ます。

さっきのhikoneがプライベートアドレスしか持っていないが、shigaがnatしている場合、chibaからhikoneへは、chiba->saga->hikoneとフォワードする必要があるが、逆にhikoneからchibaは直接見えるため、以下のようにすれば一発でできる。

hikone~:$ ssh chiba -R 5900:localhost:5900

3・共有
通常 -L または -R でセッションを張った場合、ローカル(接続元)では、127.0.0.1:5900のように、loが使用されます。
-g をつけると、0.0.0.0:5900のように、どこからでも接続を受け付けるようになるので、他のマシンからもアクセスさせることが出来ます。

chiba:~$ ssh shiga -g -L 5900:hikone:5900

この状態で、ichikawa(chibaにアクセス出来るホスト)から、

ichikawa:~$ xvncviewer chiba:0

とすれば、ichikawaからhikoneの5900にアクセス出来ます。

データセンタのDBサーバに、オフィスの中からつなぎたいなどの場合に便利ですね。

2.5・少々複雑なフォワード
-Lでネスト

ichikawa:~$ ssh chiba -L 5900:localhost:5900
chiba:~$ ssh saga -L 5900:hikone:5900

-Lと-Rを組み合わせ

ichikawa:~$ ssh chiba -L 5900:localhost:5900
hikone:~$ ssh chiba -R 5900:localhost:5900

やっていることは同じですが、後者の方がトンネル内に通している本数が少ないため軽量です。

4・暗号化
もちろん、sshでつないでいる範囲しかされないので注意してください。
3の例の場合は

ichikawa -vnc-> chiba -ssh-> shiga -vnc-> hikone

vncの範囲は暗号化されないため気をつけてください。

5・最後に
長々と書いてきましたが、何といっても「百聞は一見に如かず」と言うことで、実際に動かしてみるのが一番です。
実際、複雑な条件なんて使おうと思う環境が無ければ使いません。

実際に使う機会がやってきたときは、
・sshにはポートをマッピングする機能がある
・ポートフォワードという
あたりを覚えていれば、ググれば何か出てきます。あとは使って覚えてください。

本文中のchibaとかshigaは特に意味はありません。
ホスト名になにかないかと思ったら突然チバ！シガ！サガ！と思ったのでそのまま使いました。

もうすぐ健康診断があるんだ・・・

Thu, 02 Sep 2010 20:58:17 +0900

こんにちは。阿部です。

皆様、健康的な生活を送っていらっしゃいますでしょうか。

アシアルではもうじき定期健康診断にいかなければいけません。。。
もう。。自分の体重が会社に保管されると思うと憂鬱です。

体重おとさないと！と思いつつも運動はしたくないし、お菓子はやめたくないというこの気持ち。
世の中のぽっちゃりさんには理解していただけると思います。

ダイエット時のおやつは100kcalまで、といわれますが、100kcalなんて一瞬ですよね。
飴を何粒か食べたら終了です。おっそろしい。

しかもそれを消費するためには、ウォーキングなら30分くらい、ジョギングなら15分くらい（体格によります）運動しなければいけません。おっそろしい。

しかしながら、運動しないダイエットをすると筋肉がつかないので、リバウンドしやすい・・・らしいですね。

ずっと楽して痩せる方法を探してきましたが、リバウンドしたくないなら、そして健康的に痩せたいなら、やっぱり適度な食事制限と運動するのが一番のようです。
あとは、カロリーだけでなく、糖質とか脂質にも気をつけないといけないそうです。
めんどい。

私にとっては、すんごい難題ですが、、まずは柔軟体操から頑張ります＞＜
お菓子は我慢できないからどこかで調整しつつ頑張ります＞＜
とブログに書いてしまって頑張らないといけない状況にしてみます＞＜

アシアルの肥満予備軍の方々も一緒に頑張りましょうね（- -

Photoshopで壁紙を作りながら、基本的な使い方を覚える

Wed, 01 Sep 2010 19:27:10 +0900

こんにちは、鴨田です。

もう９月だというのに、相変わらずうだるような暑さが続いていますね。
席が窓際にあるので、陽が傾くと、微妙に太陽が当たって、灼熱地獄です。

さて、今日はPhotoshopを使って、写真を元に壁紙を作りながら、
基本的なPhothshopの使い方の説明をしたいと思います。

デザイナーの方々には、特になんのTIPSにもなりませんが、
業務でちょっとしたことをデザイナーにオペレートしてもらうのも、
ちょっと気が引けるというような方や、
会社でPhotoshopが使えるけど、持て余してるという方には、
まずここから覚えるといいかもしれません。

○実作業

1.Photoshopを立ち上げて、壁紙にしたい写真を開く

メニュー：ファイル→開く
ショートカット：Ctrl+O
ファイルを直接Photoshopにドラッグアンドドロップ

で開くことができます。

ここでは、自分で撮ったベルリンの戦勝記念塔(ジーゲスゾイレ)の写真を使います。
大きさは1600px*1200pxなので、そのままの大きさで使用したいと思います。
もし画像サイズを変える場合でも、まずは大きいまま加工して、
最後に画像サイズを換えることをオススメします。

2.念のため、16bit画像にする

メニュー：イメージ→モード→16bit/チャンネル
を選択します。

画像を加工すると、細かな部分のグラデーションなどが飛んでしまうことがあるので、
マシンパワーに余裕がある場合、設定を一時的に16bitにした方がよろしいと思います。
作業が終わったら、逆に8bitに戻しから、出力します。

3.写真の明るさを調整する

メニュー：イメージ→色調補正→トーンカーブ
ショートカット：Ctrl+M

この写真はちょっと暗いので明るくするために、カーブを山なりにします。
メリハリを出したいときは、左側が下がるようになだらかな波を描くようにします。

同じような機能として、レベル補正があります。

メニュー：イメージ→色調補正→レベル補正
ショートカット：Ctrl+L

左の黒い三角と右の白い三角をそれぞれ山の始まりと終わりに持って行きます。
すると、画像にメリハリが出て、ぐっと引き締まります。

この作業はどんな画像に対しても適応できるので、
画像加工における必須の作業になります。

4.看板の文字を読みやすく(強調)する

まずは看板の周りをなげなわツールで囲います。

メニュー：イメージ→色調補正→色の置き換え

元画像の左の看板の白い文字のところをクリックして、色を置き換える選択範囲に指定します。
そのままだと右側の看板の一番右の文字が指定範囲に含まれづらいので、

スポイトにプラスマークの付いたアイコンをクリックして、
元画像の右側の看板の文字部分をクリックして、指定範囲を広げます。

許容量と明度の調整をして、ＯＫを押します。

5.画像を鮮やかにする

メニュー：イメージ→色調補正→色相・彩度
ショートカット：Ctrl+L

像の金色、看板の青みを見ながら、
最適と思えるところに数値を合わせます。

あまりやりすぎると、ノイズが混じってくるので、
ほどほどにしておきます。

6.背景の透明化

先程の彩度の調整などで、空にノイズが混じってしまったので、
いっそのこと、背景を透明にしてしまいたいと思います。

念のため、元のレイヤーをコピーして取っておき、非表示にします。

背景レイヤーを右クリック→「レイヤーを複製」
背景レイヤーをつかんだまま、新規レイヤー作成アイコンにドラッグ＆ドロップ

のどちらかで、レイヤーを複製して、
レイヤー名の左にある目玉アイコンをクリックします。

コピーした方のレイヤーに対して、自動選択ツールで範囲を選択します。
許容値：20 アンチエイリアス：オン　隣接：オン

の設定で、Shiftを押しながら、ひとつひとつ丁寧にやります。
面倒くさかったら、許容値を増やして(32程度)、隣接のチェックを外してください。
精度は低くなりますが、クリック数は減ると思います。

選択し終わったら、選択部分をマスクに追加します。
レイヤーパレットの下側にある左から３番目のマスクアイコンを
クリックするだけです。

そのままだと、像が逆に切り取られている状態なので、

レイヤーのマスク部分を選択して、

メニュー：イメージ→色調補正→階調の反転
ショートカット：Ctrl+I

で、マスクを反転しましょう。

画像のマスク部分が逆転します。

7.空を新しく作る

「背景のコピー」レイヤーの下に、新しくレイヤーを作ります。

グラデーションツールで、空を作ります。

左端はスポイトツールを使って、像の足元に残った空の色を使い、
真ん中と右端はお好みの色でＯＫです。

グラデーションツールの塗り方を、
通常の線形グラデーションから円形グラデーションに変えます。
像の足元から、左上に向かって、ドラッグします。

比較すると、こんな感じです。

以上で、基本的な部分は出来上がりましたが、
これだけだと物足りない気がするので、
次回、装飾を施していきたいと思います。

こんな感じになる予定です。

はじめての共同作業 Canvas編 (node.js + websocket)

Wed, 01 Sep 2010 13:15:54 +0900

こんにちは、中川です。
先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。
ということで、結婚といえば共同作業ですよね。

今までは、一人で作業していて大変なことが色々あったと思いますが、
二人（複数）でやれば、乗り越えられることもあることでしょう。
Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。

そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、
一緒にお絵描きができるサンプルアプリを作ってみました。

■■■概要■■■
・アプリ概要
・・Canvas + WebSocket

・対応ブラウザ
・・Chrome or Safari (他、WebSocketが使えるブラウザ）

・サーバ側プログラム
・・node.js 0.2.0
・・express@1.0.0rc2
・・websocket-server@1.3.50

※express, websocket-server は node.js のパッケージ管理システムの npm ( http://github.com/isaacs/npm ) でインストールしました。

node.js用のwebsocketサーバは何個かあるみたいですが
( 参照： http://github.com/ry/node/wiki/modules )、
今回は、比較的更新もされていて、手軽に利用できそうな node-websocket-server を使ってみました。

■■■アプリ構成■■■

.
`-- canvas-share
|-- public
| |-- index.html
| `-- js
| `-- client.js
`-- server.js

プログラム一式ダウンロード：canvas-share.tar.gz

■■■プログラム内容■■■

・index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Share Demo</title>
</head>
<body>
<canvas id="layer0" class="canvas" style="position: absolute; top: 0; left: 0; border: 10px solid #dddddd;" width="900px" height="600px"></canvas>
<input type="button" id="clear" value="Clear" style="position:absolute;" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/js/client.js?t=1149"></script>
<script type="text/javascript">
$(function(){
var painter = new Painter('layer0');
// WebScoket対応の場合は、コネクションを設定
if (window["WebSocket"]) {
var conn = new WebSocket("ws://" + document.location.host + "/");
painter.setConnection(conn);
} else {
alert('This browser is not supported.');
}
$('#clear').click(function() {
painter.clear();
});
});
</script>
</body>
</html>

・js/client.js
※通信部分関連のみ抜粋(全体はこちら)

/**
* マウス移動時の処理
*/
Painter.prototype.move = function(event) {
if (!this.isDrawing) {
return;
}
var points = {
bx: this.beforeX,
by: this.beforeY,
ax: event.clientX - 10,
ay: event.clientY - 10,
c: this.strokeStyle
};
if (this.conn) {
// 各座標をjson形式でサーバに通知
this.conn.send(JSON.stringify(points));
} else {
this.drawLine(points);
}
this.beforeX = points.ax;
this.beforeY = points.ay;
};
/**
* キャンバスのクリア処理
*/
Painter.prototype.clear = function(conn) {
if (this.conn) {
// CLEAR処理をサーバに通知
this.conn.send('@CLEAR');
} else {
this.clearCanvas();
}
};
/**
* WebSocketのコネクション設定
*/
Painter.prototype.setConnection = function(conn) {
this.conn = conn;
this.conn.onclose = function() {console.log('Close');};
this.conn.onopen = function(){console.log('Connected');}
var self = this;
//メッセージ受信時の処理(クリアと描画)
this.conn.onmessage = function(event) {
if (event.data.indexOf('@') > -1) {
if (event.data.indexOf('@CLEAR') > -1) {
self.clearCanvas();
}
} else {
var d = JSON.parse(event.data);
self.drawLine(d);
}
};
};

WebSocketが有効な場合は、マウスの移動座標と色をサーバに通知するようにし、また、受信したJSONデータからCanvasへの描画処理を行います。

・server.js

var sys = require("sys"),
ws = require('websocket-server');
/**
* web-server
*/
var express = require('express');
var app = express.createServer();
app.configure(function(){
// ファイルをそのまま出力するディレクトリの設定
app.use(express.staticProvider(__dirname + '/public'));
});
/**
* websocket-server
*/
//var json = JSON.stringify;
var server = ws.createServer({server: app});
var points = [];
server.addListener("listening", function(){
sys.log("Listening for connections.");
});
server.addListener("connection", function(conn){
sys.log('Hello');
//server.broadcast("@HELLO");
// 全てのログを初回接続時に送信
if (points.length > 0) {
for(var i in points) {
conn.send(points[i]);
}
}
// メッセージ受信処理
conn.addListener("message", function(message){
if (message.indexOf('@') > -1) {
points = [];
server.broadcast(message);
} else {
points.push(message);
server.broadcast(message);
}
});
});
server.addListener("close", function(conn){
//server.broadcast("@BYE");
});
server.listen(3333);

expressは、単純に静的ファイル(html,js)を出力しているだけですので、今回は特に必要性はありませんが、プログラム記述の楽がしたかっただけです。

WebSocketサーバ側の処理では、投げられたjson文字列データをログ配列に保持し、そのまま broadcast で接続中のクライアントに返すようにしています。

■■■動作確認■■■

サーバを起動します。

$ cd canvas-share/
$ node server.js

あとは、対応ブラウザを複数ウィンドウ立ち上げて、それぞれ
http: //example.com:3333/ にアクセスすれば動作します。

■■■最後に■■■

今回の実装はかなりやっつけな部分もありますがご容赦いただければと思います。

現行のIEやFirefoxなど主要ブラウザがまだWebScoketに対応していませんが、socket.io などのライブラリもあるようですので、対応させることもできそうです。

node.jsを利用すれば、phpでは難しい大量の同時接続をさばくこともできますので、このようなリアルタイムコラボレーション系のWebアプリも簡単につくることができそうですね。
今後も色々と試していきたいと思います。

「PHP×Flex（後編）」PHPテクニカルセミナー（無料）第４弾の募集を開始しました！！

Thu, 26 Aug 2010 12:40:43 +0900

皆さま。こんにちは。
和田でございます。

みなさま、もうご存知かとは思いますが、現在アシアルでは、全5回にわけて「開発者向け、一歩先を行くためのテクニカルセミナー（無料）」を開催しております。
おかげさまで、昨日開催いたしました第３回「PHP×Flex（前編）」も定員の100名を超える方々からのご参加をいただき、大盛況のうちに幕となりました。
お忙しい中、セミナーに参加して下さった皆さま、誠にありがとうございました。

さて今回は、そんな大盛況だった「PHP×Flex」の後編「第４回　PHP×Flex（後編）:Flexを用いたWebシステム開発」のご紹介です。

開催日は9月29日（水）。申し込みも開始しております。
今回も第１線で活躍している弊社のエンジニアが講演いたしますので、皆さまふるってご応募ください！！！

FlexとPHPの連携の基礎を学びながら簡単なFlexアプリケーションを作成していきますので、ご興味のある皆さま、そして前編に参加されていない皆さまもチェックしていただけたらと思います。

お申し込みは、以下URLよりお願い致します。
今回は、「第４回　PHP×Flex（後編）」のみの応募となりますのでご注意ください。
http://www.asial.co.jp/seminar/

【開催概要】

日程： 8月29日(水） 10:00 ～ 12:00（※ 開始30分前より入室可能）
会場：山王健保会館2F 多目的ホール
交通：地下鉄銀座線・南北線：溜池山王駅 7出口　徒歩3分
　　　地下鉄千代田線：赤坂駅 1出口　徒歩5分
　　　地下鉄銀座線・丸ノ内線：赤坂見附駅出口　下車徒歩7分
主催：アシアル株式会社
受講対象者： Webシステムにおいて1～3年の開発経験のある方
定員： 100名（※ 定員となり次第、受付を終了させていただきます。）
参加費：無料（事前登録制）

【第４回　PHP×Flex（後編）】Flexを用いたWebシステム開発

近年、システム開発の現場では、従来型のWebアプリケーションに加え、FlexやSilverlightといったRIAの技術を用いた、インタラクティブなアプリケーション開発のニーズが高まってきています。

この講演では、RIAの中で最も普及しているFlexを取り上げ、サーバ側のPHPと連携させる簡単なアプリケーションを作成していきながら、Flex4の基本的な機能について解説していきます。

※ PHP×Flex編は前後編の2回構成です。
今回の後編ではFlexとPHPの連携の基礎を学びながら簡単なFlexアプリケーションの作成方法を解説します。
さあ、楽しいFlexの世界を触れてみましょう。

講演者：アシアル株式会社　橋本章史（ハシモト　アキフミ）アシアル株式会社のPHPプログラマー兼Flexプログラマー
以前は大手SIerでSEとして開発に携わっていたが、その中で「もっとプログラミングに深く携わりたい」という気持ちを持ち、アシアル株式会社に入社。
Flex、Javascriptを用いたインタラクティブなWebシステムの開発を得意とする。
現在は最も得意とするFlexを用いたシステム開発に従事し、充実した日々を送っている。

【第３回「PHP×Flex（前編）」セミナーを受講された皆さまの声】

------------------------------------------------------
・Flexでの開発の流れを知れたのが良かった
・業務用に使えそう
・Flexを使ってみようとおもった
・Flexは想像していたよりははじめ易いと思った
・自分で開発を行ううえでのイメージが出来た
・「何で?!」と思うような点のTipsも含まれていたので実践に役立ちそう
・Flexを使った動的コンテンツの作成について詳しく知れた
・内容が濃くて良かった。スピード感も良い
・プログラム作成者の観点で資料がまとまっていた
・PHPとActionScriptの書き方の比較がありイメージしやすかった
・Flex、ActionScriptnitについて詳しく知りたくなりました
・基本的な部分を丁寧に説明してくれていたため、とても分かりやすかった
------------------------------------------------------

【HTML5】Canvasでお絵かきしてみた（前編）

Wed, 25 Aug 2010 14:27:28 +0900

こんにちは、橋本です。

今回はHTML5シリーズ第二弾ということで、canvasを使ってお絵かきしてみました。
今回は前編で、基本的な機能について触れてみたいと思います。

さっそくサンプルコードを以下に。

canvas_sample.html

<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="js/canvas.js" type="text/javascript"></script>
<link media="all" rel="stylesheet" href="css/main.css" type="text/css" />
<title>canvas test</title>
</head>
<body>
<div id="container">
<div id="leftContainer" class="clearfix">
<canvas id="layer0" class="canvas" style="position: absolute; top: 0; left: 0; border: 10px solid #dddddd;" width="900px" height="600px"></canvas>
</div>
<div id="rightContainer">
<div id="controler">
<section id="color">
<ul>
<li>
<label for="red">R:</label>
<input id="red" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="green">G:</label>
<input id="green" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="blue">B:</label>
<input id="blue" class="colorBar" type="range" min="0" max="255">
</li>
<li>
<label for="alpha">A:</label>
<input id="alpha" class="colorBar" type="range" min="0" max="100">
</li>
<li>
<canvas id="colorSample" height="30px" width="30px"></canvas>
<input id="colorText" type="text" value="" readonly="true">
</li>
</ul>
</section>
<section id="line">
<ul>
<li>
<label for="lineWidthRange">line width:</label>
<input id="lineWidthRange" type="range" min="0" max="50">
</li>
<li>
<canvas id="lineSample" width="50" height="50"></canvas>
</li>
</ul>
</section>
<section id="other">
<ul>
<li>
<label for="erase">erase mode:</label>
<input id="erase" type="checkbox" />
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>

canvas.js

(function(){
var canvas,context = null;
var beforeX, beforeY = null;
var isDrawing = false;
var selectedColor;
var colorVars;
var colorText;
var colorSample;
var erase;
var restore;
var lineWidthRange;
var lineWidth;
var lineSample;
var isErase;
window.addEventListener("load", function (event){
canvas = document.getElementById("layer0");
context = canvas.getContext("2d");
erase = document.getElementById("erase");
restore = document.getElementById("restore");
lineWidthRange = document.getElementById("lineWidthRange");
// イベントリスナーの設定
canvas.addEventListener("mousemove", canvas_mouseMoveHandler, false);
canvas.addEventListener("mouseup", canvas_mouseUpHandler, false);
canvas.addEventListener("mousedown", canvas_mouseDownHandler, false);
canvas.addEventListener("mouseout", canvas_mouseOutHandler, false);
erase.addEventListener("click", erase_clickHandler, false);
lineWidthRange.addEventListener("change", lineWidthRange_changeHandler, false);
//controlerの設定
colorBars = document.getElementsByClassName("colorBar");
var obj = {};
length = colorBars.length;
for (var i = 0; i < length; i++)
{
var bar = colorBars[i];
bar.value = bar.id == "alpha" ? 100 : 0;
bar.addEventListener("change", colorBar_changeHandler, false);
obj[bar.id] = bar.value;
}
colorSample = document.getElementById("colorSample");
colorText = document.getElementById("colorText");
var colorStr = convertColorObjToStr(obj);
setColorText(colorStr);
setSelectedColor(colorStr);
setColorSample();
lineWidthRange.value = 10;
lineWidth = 10;
lineSample = document.getElementById("lineSample");
setLineSample();
}, false);
function convertColorObjToStr(obj)
{
return obj["red"] + ", " + obj["green"] + ", " + obj["blue"] + ", " + (obj["alpha"] / 100);
}
function setColorSample()
{
var context = colorSample.getContext("2d");
context.beginPath();
context.strokeStyle = selectedColor;
context.fillStyle = selectedColor;
context.fillRect(0, 0, colorSample.width, colorSample.height);
}
function setLineSample()
{
var context = lineSample.getContext("2d");
// 今の状態をリセット
context.clearRect(0, 0, lineSample.width, lineSample.height);
context.beginPath();
context.arc(lineSample.width / 2, lineSample.height / 2, lineWidth / 2, 0, Math.PI*2, false);
if (isErase)
{
context.strokeStyle = "rgba(0, 0, 0, 1)";
context.stroke();
}
else
{
context.strokeStyle = selectedColor;
context.fillStyle = selectedColor;
context.fill();
}
}
function setColorText(colorStr)
{
colorText.value = colorStr;
}
function setSelectedColor(colorStr)
{
selectedColor = "rgba(" + colorStr + ")";
}
function colorBar_changeHandler(event)
{
var obj = {};
length = colorBars.length;
for (var i = 0; i < length; i++)
{
var bar = colorBars[i];
obj[bar.id] = bar.value;
};
var colorStr = convertColorObjToStr(obj);
setColorText(colorStr);
setSelectedColor(colorStr);
setColorSample();
setLineSample();
}
function canvas_mouseOutHandler(event)
{
isDrawing = false;
}
function canvas_mouseDownHandler(event)
{
isDrawing = true;
beforeX = event.clientX - 10;
beforeY = event.clientY - 10;
}
function canvas_mouseUpHandler(event)
{
isDrawing = false;
}
function canvas_mouseMoveHandler(event)
{
if (!isDrawing)
{
return;
}
isErase ? eraseLine(event) : drawLine(event);
}
function drawLine(event)
{
var fixedX = event.clientX - 10;
var fixedY = event.clientY - 10;
context.beginPath();
context.strokeStyle = selectedColor;
context.lineWidth = lineWidth;
context.lineCap = 'round';
context.lineJoin = 'round';
context.moveTo(beforeX, beforeY);
context.lineTo(fixedX, fixedY);
context.stroke();
context.closePath();
beforeX = fixedX;
beforeY = fixedY;
}
function eraseLine(event)
{
var x = event.clientX - 10 - lineWidth / 2;
var y = event.clientY - 10 - lineWidth / 2;
context.clearRect(x, y, lineWidth, lineWidth);
}
function erase_clickHandler(event)
{
isErase = event.target.value;
setLineSample();
}
function lineWidthRange_changeHandler(event)
{
lineWidth = event.target.value;
setLineSample();
}
})();

*cssは略

JSのコードが結構汚いんですが、サンプルってことで華麗にスルーしていただけると幸いです。（次回までに綺麗にしておきます;）

実際のサンプルはこちら

まず、canvasで画像を描画する際には、対象のcanvasのcontextを取得します。

canvas = document.getElementById("layer0");
context = canvas.getContext("2d");

contextに対して処理を行うことで、画像を描画することが出来ます。

次に基本的な線を引く処理。
線を引くためには、以下の手順を踏みます。

// 1. 線を描きますよーと宣言
context.beginPath();
// 2. 線の設定（しなくてもOK）
context.strokeStyle = selectedColor; // 線の色
context.lineWidth = lineWidth; // 線の太さ
context.lineCap = 'round'; // 線の始点、終点の形
context.lineJoin = 'round'; // 線のつなぎ目の形
// 3. 線の始点を設定
context.moveTo(beforeX, beforeY);
// 4. 線の終点を設定
context.lineTo(fixedX, fixedY);
// 5. 線を描く
context.stroke();
// 6. 線が書き終わりましたよーという宣言
context.closePath();

線の各種設定については、以下のページに詳しく載ってるので参照してください。
HTML5.jp-Canvasリファレンス

今回のサンプルでは、連続した線を引くために、線を引き終わった座標を、beforeX, beforeYに格納し、次の線を描き始めるときの始点として指定しています。

次に四角形を描く処理。
四角形を描くためには、以下の手順を踏みます。

// 1.線を描きますよーの宣言
context.beginPath();
// 2. 設定
context.strokeStyle = selectedColor; // 線の色
context.fillStyle = selectedColor; // 塗りつぶしの色
// 3. 四角形を描く
context.fillRect(0, 0, colorSample.width, colorSample.height);

上記サンプルのfillRectは、塗りつぶした四角形を描くメソッドです。
引数は、書き始めるx座標、書き始めるy座標、四角形の幅、四角形の高さとなっています。
座標は、左上が(0, 0)です。これは、canvas全体共通です。

ちなみに、枠だけの四角形を描きたいときは、strokeRect()、四角形を消したいときは、clearRect()メソッドを使います。今回のサンプルでは、消しゴムを実装するために、clearRect()メソッドを使っています。

次は円を描く処理です。
円を描くためには以下の手順。

// 1. 例のやつ
context.beginPath();
// 2. 円の形を指定
context.arc(lineSample.width / 2, lineSample.height / 2, lineWidth / 2, 0, Math.PI*2, false);
// 3. オプションを指定
context.strokeStyle = selectedColor;
context.fillStyle = selectedColor;
// 4. 描く
context.fill();

まず、arc()メソッドを使って円の設定をします。
引数は、円の中心のx座標、円の中心のy座標、円の半径、円を書き始める角度、円を書き終える角度、円を描く向きとなっています。最後の引数の円を描く向きは、trueを指定すると、反時計回り、falseを指定すると、時計回りになります。

今回は普通の円なので、最後の指定はあまり意味がないのですが、一部が欠けている円を描きたい時には、向きが重要になってくると思います。

ちなみに、枠だけの円を描きたいときは、最後のfill()をstroke()に変更すればOKです。

今回はとりあえず、ここまで。

次回後編では、グラデーション、画像の取り込みなどについて触れていきたいと思います。

MacにgroongaのMySQL用ストレージエンジン

Mon, 23 Aug 2010 22:35:27 +0900

こんばんは。笹亀です。

2年間お世話になった神楽坂からお引越しをすることになりました。
名前がカッコいいからと言う単純な理由から選んだ割には、
だいぶいい街で快適に過ごさせていただきました。
ということで現在は家探し中です。

さて今日はgroonga（ぐるんが）のMySQL用ストレージエンジンを実際に使ってみたくなり、
インストールをしてみようと思います。

そもそもgroongaは今もまだ広く利用されている全文検索システムSennaの後継と言われています。groongaストレージエンジンはMySQLでSennaを利用するTritonnの後継プロジェクトとなります。MySQLではver5.1からPluggable Storage Engineインタフェースが採用されたことで、
以前よりも柔軟に独自のストレージエンジンを利用できるようになりました。

上記のことからMySQL経由でもgroongaを利用できるようになるということです。groongaのMySQLストレージエンジンを経由するとgroongaをSQLコマンドでも利用することができるようになります。

それでは早速インストールしていこうと思います。当然ですが、MySQLの5.1とgroongaが既にインストールされている必要があります。
　※自分の環境はMacなので若干パス情報などが違いますので、ご注意くださいませ。
　※なお、MySQLのインストールは省略します。

まずはgroongaをソースをダウンロードしてインストールする。
http://groonga.org/download/からダウンロードし、適当な箇所に解凍します。
コンパイルをしてインストールします。

./configure --prefix=/opt
make
sudo make install
※正常にソースからインストール完了

groongaストレージエンジンのビルドしてみた。
http://github.com/mroonga/mroonga/downloadsからダウンロードし、適当な箇所に解凍します。

「http://mroonga.github.com/tutorial.html#id3」のページを元にインストールを進めているときにここで意味深な説明分を発見した。
「with-mysqlでMySQLソースコードディレクトリ」ということはソースをダウンロードしないといけないのか・・？と思い、MacPortsなので「/opt/local/var/macports/distfiles/mysql5/mysql-5.1.43.tar.gz」からコピーして展開し、展開先を設定しました。
"libdir"でMySQLバイナリのプラグイン用ディレクトリ、
"with-groonga"でgroongaのインストール先を指定してconfigureを実行します。

最終的にこんな感じ

./configure --with-mysql= /Users/sasa/Public/src/mysql-5.1.43 --libdir=/opt/local/lib/mysql5/mysql/plugin --with-groonga=/opt

むむ。。。エラーが出るぞ。。
checking whether we are using the GNU C++ compiler... yes
checking whether g++ accepts -g... yes
checking dependency style of g++... gcc3
checking how to run the C preprocessor... gcc -E
checking build system type... Invalid configuration `/Users/sasa/Public/src/mysql-5.1.43': machine `/Users/sasa/Public/src/mysql' not recognized

いろいろ調べてみる。。
どうやらソースからインストールされているMySQLのビルドしたソースが必要みたいだ。
MacPortsでインストールしたbuild先を探して確認してみる。

portdbpath
MacPorts がダウンロードしたソース、インストールされた ports のレシート、主要なレジストリといった作業データを保存するディレクトリ。'${prefix}' におけるパス名の制約と同じ制約があります。

ということは「opt/local/var/macports」内でbuildしていることがわかった。
上記箇所に移動してみるとbuildフォルダを発見。
過去にインストールしたアプリごとにbuildファイルがあることを期待して確認をしていましたが、見事に空っぽでした。インストールするごとに維持的な展開場所として利用するんだとうと勝手に解釈しました。

どうしても自分の環境にインストールしたかったのですが、見事にうまくインストールできませんでした。MySQLをソースからインストールしてMySQLのbuildソースがある状態でインストールしないといけないということがよくわかりましたが、ソースからインストールしか使えないというのはいかがなものかと思います。

yumなどでインストールした場合はgroongaのMySQL用ストレージエンジンはインストールできるんでしょうか？
　※buildソースって保持しているのでしょうか？なんかうまく出来ない気がしています。

もし、この辺りの情報に詳しい方々、
知識不足の自分にご教授いただけますと幸いでございます。

Appleのサイトで見たiPhone4をFireworksで描いてみました-1/2

Thu, 19 Aug 2010 22:17:18 +0900

皆さまこんにちは。アシアルの和田です。

今日は、前々回に引き続き、FireworksでiPhone4を作成してみました。
今回はAppleのサイトにあったiPhone4（斜めから見た）をお手本にしています。

ただ、今回はちょっと長くなりそうなので、ボタン部分は次回に作りたいと思います。
なので、今日はボタンなしのiPhone4の斜め版です。
（ちょっと変ですかね!?）

では、まずはじめに
700×700pxのキャンバスを作ります。

ステップ-1　iPhone4をトレース
正面から見たiPhoneをトレースします。
その際、トレースしたオブジェクトの線を赤や青など、目立つ色で描くと分かりやすくなります。（下のイメージです）

ステップ-2　斜めから見たイメージに変形
Appleのサイトに掲載されていた斜めからのアングルにするために、ステップ－１で作成したオブジェクト全てを一括して「変形ツール」で変形します。
また、奥行き間が出るように、変形したオブジェクトを数ピクセル動かしたりして微調整します。

ステップ-3-1　ステンレスバンドを作成
トレースした一番外側のオブジェクトを下図のように下側にコピーします。
そして、遠近感がでるようにコピーしたオブジェクトの左右のコーナーを微調整します。

そして、こんな感じに、2つのオブジェクトを結合します。
ちなみに、バンドの切れ目の線（ペンツールで作ったオブジェクト）も描いておきます。
実際に、黒いオブジェクトをのせるだけでステンレスバンドの切れ目を表現できます。
（結合方法は、ナイフツールでオブジェクトをカットして、ペンツールで結合です。）

ステップ-4　ステンレスバンドを着色
出来上がったステンレスバンドを下記のようにグラデーションを設定します。
・線形グラデーション：#000000→#AFAFAF→#AFAFAF→#000000

次に、真ん中のコーナー部分の鉄っぽいハイライト（グラデーション）をつけます。
３つのオブジェクトを矩形ツールで作成し「エッジをぼかす」を適用します。

・ベタ塗り：#000000　エッジをぼかす（10px）　透明度100%
・ベタ塗り：#FFFFFF　エッジをぼかす（15px）　透明度80%
・ベタ塗り：#000000　エッジをぼかす（15px）　透明度100%

ステップ-3-2　ステンレスバンドの角を表現
ここで、ステンレスバンドの角を表現します。
方法は、ステンレスバンドと隣接したオブジェクトを白でベタ塗り、エッジをぼかすを1pxに設定します。
・ベタ塗り：#FFFFFF　エッジをぼかす（1px）

ステップ-3-3　ステンレスバンドの側面を表現
次に、ステンレスバンドの側面（iPhoneを正面から見たときに見える面）を演出するために、先ほど作ったオブジェクトをコピーして、左と上に数ピクセルずらし、グレーのグラデーションをかけます。
・線形グラデーション：#474747→#666666→#474747　エッジをぼかす（2px）

ステップ-3-4　ステンレスバンドとプラスチック部分との境界を表現
先ほど作ったグレーのグラデーションをコピー＆ペースト。若干縮小（数ピクセル程度）して、手前の下図のように配置します。
こうすることで、ステンレスバンドと黒い部分との境界を表現します。
・ベタ塗り：#0000003　エッジをぼかす（1px）

ステップ-4　iPhoneのプラスチック部分（黒い部分）の作成
これは、iPhoneの上面（画面などがある部分）の作成です。
先ほど作った黒いオブジェクトを更にコピー＆ペースト
縮小して下記のように配置してください。（さっきと同じように手前側の隙間を大きく取ります）

そしてこのオブジェクトに、
フィルタ／Photoshopライブ効果／べべルとエンボスを下記の設定で適用します。

そうするとこんな感じです。
大分、それっぽくなってきました。

ステップ-5　iPhoneのパーツ（スピーカー、カメラ、マイク）の作成
こちらについては、前回のブログとほぼ同じ方法で描いていますので、今回は省略します。
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。

ステップ-6　ハイライトの作成
iPhoneのハイライト部分を作成するために、下記のように赤い線のオブジェクトを作成。そしてステップ-5で作成した黒いオブジェクトをコピーして、赤い線のオブジェクトと
変更／パスを結合／交差をして作成します。
こんな感じです。

そして、白の不透明から透明へのグラデーションを設定します。
こちらも、以前のブログにて紹介しておりますので、今回は省略します。
例によって（スパイ大作戦みたいですね…古い？）
ご興味のある方は「iPhone4をFireworksで作ってみました」を参照して下さい。

ハイライトを上と左方向に数ピクセル移動します。(
Appleのサイトの画像はこんな感じになっていたので）

そして、背景を黒にしたら出来上がりです…。

といいつつ、ボタン類は次回に持越しです。

それではまたでございます。

iPad版の会社紹介を作ってみました

Thu, 19 Aug 2010 19:17:30 +0900

こんにちは。小林です。

iPadの発売から、さまざまなお客様のアプリケーションをiPad上で構築してきましたが、「アシアルでもiPadを活用してみよう！」ということで、「iPad版の会社紹介」を作ってみました。

ベータ版として、本当にシンプルなビューアー仕様になっていますが、将来的には、もっとデザインとか、動きを入れていきたいな・・・と考えています。

今後の改良にご期待ください！

次回は、御社にこちらのアプリを持参の上、アシアルをご紹介にあがらせていただきます m(__)m

iPhoneアプリ開発開始時に気をつけるべきファイルの取り扱い (2)

Thu, 19 Aug 2010 01:07:55 +0900

こんにちは、亀本です。

今回も、1回目に続いて、iPhoneアプリ申請まわりの、各種ファイルの取り扱いについての話の続きを書いていきたいと思います。

必要なファイル群

まず、前回も紹介したファイル群を改めて列挙しておきます。

・秘密鍵
--> hoge.p12
・秘密鍵に対応したCSR(証明書要求)
--> CertificateSigningRequest.certSigningRequest
・ CSRに対応した証明書(開発用)
--> development_identity.cer
・ CSRに対応した証明書(申請用)
--> distribution_identity.cer
・中間証明書
--> AppleWWDRCA.cer
・デバイスID
--> iPhone実機から取得
・ AppID
--> 任意に設定
・ development用Provisioning Profile
--> hoge.mobileprovisioning
・ destribution用Provisioning Profile
--> hoge.mobileprovisioning

前回は、このうち秘密鍵とCSRの取り扱いについて紹介しました。
今回は、各種証明書と、デバイスID、App IDの運用時、作成時などのポイントを紹介して行きます。

証明書の有効期限に気をつけよう

iPhoneの開発・申請の際には、3種類の証明書が絡んできます。

・ CSRに対応した証明書(開発用)
・ CSRに対応した証明書(申請用)
・中間証明書

の3種類です。
開発用の証明書と申請用の証明書は、その名の通りです。
また、中間証明書は、AppleのProvisioning Portalで発行されている物になります。

これらについては、あまり運用の際に深く注意すべき事はありません。
証明書の有効期間中は、何度でもダウンロードしてこれるので、きちんと対応する秘密鍵やCSRが保持されていれば、
特に証明書側をペアで保存しておく、などの配慮はいりません。

ただし、開発用と申請用の証明書には有効期限があり、期間が切れたら再度CSRを使った証明書要求が必要になることだけ、
気をつけておく必要があります。
証明書の有効期限は、Provisioning Portalでも、ローカルのキーチェーンアクセスでも、どちらでも閲覧可能なので、
これは、きちんとチェックしておきましょう。

しかも、証明書の有効期限が若干のはまりどころになることもあります。

一度自分がひっかっかったのが、ちょうど期限切れ当日に証明書の期限が切れている事に気づきいて証明書を
再度発行しようとしたところ、アメリカとの時差により、Appleのサイト側ではまだ期限切れ扱いになっておらず、
しばらくの間ローカルでのみ期限切れ扱い、というおかしな齟齬が生まれた事がありました。

証明書が期限切れになると、当然のことながら、アプリの申請ができなくなってしまいます。
アプリのリリースの時期などとかぶってしまわないように、気をつけましょう。

デバイスID につける名前は、分類しやすい区切りをつけよう

分類しやすい区切りって意味わかんない日本語ですね。

デバイスIDとは各実機ごとの端末識別子のことで、これをProvisioning Portalから登録することによって、
実機でのテストが可能になります。

表題の話は、つまるところ、デバイスIDをProvisioning Portal登録する際につける名前に、会社名とか部署名とか、
そういう類の接頭辞をつけておくと管理しやすいよ、と言う話です。

iPhoneの開発を会社単位でやっていると、実開発者以外にとてもいろいろな人に実機テストやアプリの確認を
おこなってもらう事になります。
開発者自身から始まって、テスター、マネージャ、顧客などなど。もっと複雑なプロジェクトチームになっている場合も
あります。

そういった作業を行っていると、どのデバイスIDが誰の物か、という事がきちんと視認できるように名前をつけておかないと、
本来そのプロジェクトに関わりのない人の端末にもインストールできるようにしてしまったり、同じような名前をつけてしまって
どれがインストールしたいデバイスだかわからない、などの事態に陥ります。

そのため、ある程度管理する数が増えてくるようなら、明確にどこの誰の物かがわかりやすいように、
所属する会社名、部署名などを接頭辞につけて、適切なグループ分けを行うようにすると、運用が楽になります。

また、iPhone3Gなのか4なのか、iPod Touchなのか、iPadなのか、など、端末の種類も一緒にわかるようにしておくと、一層便利です。

たとえば、「Asial Yudoufu iPhone4」とかです。(実際はちょっと違う名前つけてますけど。)

このあたりに心を配っておくと、後々わかりやすく、管理しやすくなると思います。

App ID は、アスタリスク(*)を忘れずに。

Provisioning Portalでの申請時に、「何これ？」となりやすいのがApp IDです。
App IDは複数作る事は可能ですが、削除が不可能なので失敗してゴミを残すと後々気分が悪いので、ちょっと気を配って作ってあげましょう。

iPhoneのアプリケーションは、バンドルと呼ばれるまとまりごとに分類して管理されるのですが、そのバンドルの
識別子となるのが、App IDです。
このApp ID で指定した値を、iPhoneアプリの申請用ビルドを行う際に、アプリのinfo.plist内で識別子(Bundle Identifier)に
指定する必要があります。

この識別子には、URLドメインを逆さまにした記述を利用することが推奨されており、たとえばアシアルで
Fooというアプリケーションをリリースする場合であれば、「jp.co.asial.foo」という値を使うような感じになります。

なので、アプリの申請時には1度はお世話になるIDなのです。

ただし、このApp ID、一度値を指定してしまうと、変更がききませんし、識別子なので同じ値を2度使うこともできません。
となると、アプリを申請するごとに１つApp IDを作って。。。という手間が発生してしまいます。

App IDが分かれると、ビルド時に使うProvisioning Profileも別に用意せねばならず、同一の会社から複数の
アプリをリリースする場合には、とても管理が煩雑になります。

しかし、その手間を簡素化するために、App IDにはワイルドカードとして" * " (アスタリスク)を利用できるようになっています。
たとえば、アシアルであれば「jp.co.asial.*」といった具合でしょうか。

これを使うことで、「jp.co.asial.xxxx」という識別子のついたアプリケーションは、すべて1つのApp IDを使うことができ、
それはすなわち、すべてのアプリケーションを1つのProvisioning Profileで管理できることを意味します。

もちろん、アプリケーション個別にはきちんと一意なIDをつけてやる必要はありますが、
FooというアプリとBarというアプリ、それぞれに「jp.co.asial.foo」「jp.co.asial.bar」識別子を指定したとしても、
これらに個別にApp ID作る必要はなく、上記のアスタリスク付きのApp IDを使い回すことができます。

そのため、ある程度いろいろなアプリをリリースしていこうと考えている場合には、上記のようにアスタリスクを
つけたApp ID に、会社名などの汎用的な名前(「Asial App ID」など)をつけて管理してやると、運用がすっきりすると思います。

おわりに

今回は、各種証明書と、デバイスID、App IDの作成時、運用時のちょっとした心配りや注意点を紹介しました。

次回以降も引き続き、各種申請用ファイル群の注意点などについて、紹介していく予定です。

symfonyセミナー動画無料公開！

Fri, 13 Aug 2010 21:29:53 +0900

こんにちはアシアル・アピール担当の岡本雄樹です

最近、弊社の優秀なアルバイトが
私の席の後ろでsymfonyと格闘しているようです。

クラスの概念から勉強中なので苦労しているようですが、
親切な先輩社員が１から１０まで教え込んでいるので、
将来が楽しみです。

symfonyと言えば、
先月開催した弊社テクニカルセミナー
「PHP×symfony」編の動画を、
今回特別に公開する運びとなりました。

しかも、テクニカルセミナーにご参加いただいた
「ロジックデザイン」様からの御厚意により、
ただの動画ではなく、スライドと講師を同時に閲覧できる
Ｅラーニング形式で動画を公開することができました。

この場を借りて、お礼申し上げます。

動画は下記リンクを辿り、
「特別公開中」ボタンをクリックして下さい。
アシアル・テクニカルセミナー

尚、アシアルでは、現在、全5回にわけて
「開発者向け、一歩先を行くためのテクニカルセミナー」
を開催しています。

８月２５日には「PHP×Flex（前編）」と銘打ちまして、
ActionScript3.0でインタラクティブなWeb開発を行う、
ノウハウをセミナーでご提供致します。
皆様お誘い合わせのうえ、ご参加下さいませ。

お申し込みページへは、以下のバナーよりお進み下さい。

また、講演者の松田　惇のブログでも、
Flexネタで記事を書かせて頂いております。
宜しければご参照ください。

【開催概要】

日程： 8月25日(水） 10:00 ～ 12:00（※ 開始30分前より入室可能）
会場：山王健保会館2F 多目的ホール
交通：地下鉄銀座線・南北線：溜池山王駅 7出口　徒歩3分
　　　地下鉄千代田線：赤坂駅 1出口　徒歩5分
　　　地下鉄銀座線・丸ノ内線：赤坂見附駅出口　下車徒歩7分
主催：アシアル株式会社
受講対象者： Webシステムにおいて1～3年の開発経験のある方
定員： 100名（※ 定員となり次第、受付を終了させていただきます。）
参加費：無料（事前登録制）

【第3回　PHP×Flex（前編）】ActionScript3.0でインタラクティブなWeb開発

ActionScript3.0でインタラクティブなWeb開発

近年、様々なFlashコンテンツがWebサイトの要となっています。これらのFlashコンテンツの元となるのがActionScriptであります。最近ではFlexやAIRなどのRIAアプリケーションにも使用され、ActionScriptの重要性はますます高まってきています。

この講演では、Flexアプリケーションの基礎となるActionScript3.0の基本構文から簡単なFlashの作成まで実際のスクリプトを追いながら解説していきます。

※ PHP×Flex編は前後編の2回構成です。
前編ではActionScript3.0の基礎を学び、後編ではFlexとPHPを連携したFlexアプリケーションの作成方法を解説します。まずはこの前編でActionScript3.0の基礎をしっかりと学びましょう。

講演者：アシアル株式会社　松田　惇（マツダ　アツシ）: アシアル株式会社のPHPプログラマー兼Flexプログラマー

JavaScriptやAjaxを生かした、動的にインターフェースが変化するシステムが好きなことからFlashアプリケーションに興味を持ちはじめ、趣味でFlexを勉強するようになる。そのことがきっかけで、現在ではFlexアプリケーションの構築も担当している。

アシアルでtwitter始めます(前編)

Thu, 12 Aug 2010 16:32:32 +0900

こんにちは、岡本雄樹です。

突然ですが、アシアルでtwitterを始めようという話が持ち上がっております。
今までも、何回かそんな話があったのですが、
今回はホンキのようです。

と、ここまでは他人事だったのですが、
つい一昨日、アシアルのアピール担当に任命されてしまい、
他人事ではなくなってしまいました！

「じゃぁ、試しにやりましょう！」

とは言ったものの、お盆休みも取れない忙しい身で、
本当にやれるのだろうか・・・

「そうだ！ボットを作って更新させよう。」

ボットを作れば、ブログのネタにもできるし一石二鳥。
そんなわけで、ボット作成一人プロジェクトが発足しました。
ちょっとした夏休みの宿題感覚でお付き合いいただければと思います。

「夏休みなんて無いけど！」

■ボットの仕様
・アシアルブログ等の更新情報を元に、ツィートを行う。
更新情報はRSS（RSS2.0）を利用する。
・ネタに使うRSSは複数登録可能とする
・更新の確認頻度は１分で検討（負荷を見て調整）
・管理画面は設けない

■詳細設計
・設置のしやすさをを考慮し、
twitterAPI用のライブラリ以外は極力使わない
・フレームワークも使わない。
・データベースはSQLiteを検討

■設計図

■ＤＢスキーマ

CREATE TABLE rss
(
title TEXT NOT NULL ,
link TEXT NOT NULL PRIMARY KEY,
tweeted_flag INTEGER NOT NULL DEFAULT 0
);

■プログラムのプロトタイプ
プロトタイプなのでエラー処理等は付属していません。
コピペされる方は自己責任でお願いいたします。

RSSを取得してSQLiteデータベースに格納する
（プログラムＡ）

<?php
// RSSフィードの一覧テキストファイルかDBに持たせたい。
$rss_paths[] = "http://blog.asial.co.jp/rss/rss2.0.php";
$rss_paths[] = "http://www.asial.co.jp/oshirase_feed.php";
$rss_paths[] = "http://www.asial.co.jp/pressrelease/feed.php";
$link = sqlite_open('rss.db');
// RSSフィードの本数だけループ回す
foreach ($rss_paths as $rss_path) {
// simplexml_load_file関数は外部サーバのコンテンツも取得できる。
$feed = simplexml_load_file($rss_path);
// 生成したfeedオブジェクトを元にさらにループ処理して記事の概要取得
foreach ($feed->channel->item as $item) {
// とりあえず、タイトルとURLをDBに格納
$escaped_title = sqlite_escape_string($item->title);
$escaped_link = sqlite_escape_string($item->link);
$query = "INSERT INTO rss (title, link, tweeted_flag) VALUES ('$title', '$link', 0)" ;
$result = sqlite_query($link, $query);
}
}

データベースから未投稿の情報を取得する
（プログラムＢ）

<?php
$link = sqlite_open('rss.db');
// twitterに投稿していない記事のみ取得
$query = "SELECT * FROM rss WHERE tweeted_flag = 0 ";
$result = sqlite_unbuffered_query($link, $query);
$rss = sqlite_fetch_all($result);
// とりあえずDBから値を取得できることを確認
var_dump($rss);

とりあえず、RSSを取得して
データベースに格納するところまではできました。
次回はプログラムのりファクタリングと、
twitterへの投稿を行いたいと思います。

また、twitterのアカウントも仮で取得しました。

http://twitter.com/asialnews
「アシアルニュース」

お気軽にフォローくださいませ。
（ただし、フォロー返しやコメント返しは行わない方向で検討中）

尚、弊社のＰＨＰスクールでも、
WebAPI講座でtwitterへの投稿演習を行っております。

ご興味のある方は、是非お申込み下さいませ。

アシアル・アピール担当兼スクール担当兼エンジニアの、
岡本からのお願いでした。

お弁当

Sat, 07 Aug 2010 00:28:53 +0900

こんにちは。笹亀です。

毎日、暑くて寝苦しい生活が続いてますね。
北海道でも35度を超える猛暑日になるとは、
日本が悲鳴をあげているのを感じます。

今日はいつも日頃お世話になっている、お気に入りお弁当をご紹介します。
アシアルは本郷三丁目から出たことがありません！
本郷で長いことお世話になっているお弁当屋さんがあります。
そのお弁当屋さんは「はらどけい」というお弁当屋さんです。

とても美味しく、安さとボリューム満点なお弁当をいただいております。

何でも美味しいのですが、最近とてもお気に入りのお弁当がこれです。

その名も「海苔唐揚げ明太子弁当」これがうまい！うますぎてハマッてますｗ

スパイシーチキンにも負けませんよ〜
http://blog.asial.co.jp/161

別のお店ですが、この前ビックリなことがありました。

確かにツナマヨと記載されているのですが、
勢いよくがぶりついたら中身が梅干でしたｗ
しかも自分は梅干が苦手というのでダブルパンチでした。
　※あとでお店でいつもより大きいので作り変えてもらいましたｗ

おいしいごはんはエンジニアの活力ですね！

なつやすみ

Fri, 06 Aug 2010 20:33:33 +0900

こんにちは。阿部です。

夏ですね。猛暑ですね。
テラスのおじぎそうが枯れた今、未練はありません。実家に帰ります。

アシアルは、お盆に帰省する人は少数派なのですが、私は毎年お盆に帰省しています。
毎年、家族で海に行くのが恒例行事です。

今年も、今日夜行バスで帰省して、明日は朝から海だーー！！！と思っていたのに、、母が熱中症でぴーぽーぴーぽー運ばれたそうで。。
一晩泊まって帰るそうですが、もちろん海は延期になりました。。今年はいけないかも（;_;）

今年は各地で猛暑日が続いていますし、みなさんもお気をつけくださいね。

熱中症かも･･･と思ったら、まず涼しい場所への移動（体を冷やす）と水分補給が大切だそうです。少量の塩分も必要なんだとか。

実家に帰ってもやることなくなりましたが、とりあえずチケットはとってしまったので帰ります＞＜
お土産買ってない＞＜

手軽に出来るApacheモジュール開発②

Wed, 04 Aug 2010 23:49:35 +0900

こんにちは、井川です。

前回、Apacheモジュールの手軽な作り方をご紹介しました。Webページに先頭に"hello world"を追加するモジュール（mod_hello_world）は意外と簡単に作成できたことと思います。今回は、モジュール開発を一歩進め、モジュールのOn/Offをディレクトリ毎に設定する方法をご紹介します。

いささか複雑にはなりますが、モジュール起動の切り替えを使えるようになると開発の幅が大きく広がります。ぜひ試してみて下さい。

今回は、前回の記事（手軽に出来るApacheモジュール開発）で作成したソースコードを基に次のように開発を進めます。

① コード（mod_hello_world.c）の修正・追記
② コンパイルしてインストール
③ httpd.confの再設定と再起動

① コードの修正・追記

前回作成したコード（mod_hello_world.c）を次のように修正・追記します。

/**
 *  mod_hello_world.c -- Apache sample hello_world module
 */
 
#include "httpd.h"
#include "http_config.h"
#include "http_protocol.h"
#include "ap_config.h"
 
#define DEFAULT_AVAILABLE 0
 
/**
 * モジュールの設定に関する部分
 */
/* モジュールを定義する構造体 */
typedef struct {
  int is_available;
} hello_world_cfg;
 
module AP_MODULE_DECLARE_DATA hello_world_module;
 
/* ディレクトリ設定データを初期化する */
static void *create_dir_config(apr_pool_t *p, char *dir)
{
  hello_world_cfg *conf =
    (hello_world_cfg *)apr_palloc(p, sizeof(hello_world_cfg));
 
  conf->is_available = DEFAULT_AVAILABLE;
 
  return conf;
}
/* ディレクティブに値を設定する */
static const char *set_available(cmd_parms *cmd, void *cfg, int flag)
{
  hello_world_cfg *conf = (hello_world_cfg *)cfg;
  conf->is_available = flag;
  return NULL;
}
/* ディレクティブを定義する */
static const command_rec hello_world_cmds[] =
{
  AP_INIT_FLAG("HelloWorld", set_available, NULL, OR_ALL, "Use or not"),
  {NULL}
};
/**
 * モジュールの機能・登録に関する部分
 */
/* ハンドラを作成する */
static int hello_world_handler(request_rec *r)
{
  hello_world_cfg *conf =
    (hello_world_cfg *)
      ap_get_module_config(r->per_dir_config, &hello_world_module);
 
  if (conf->is_available && !r->header_only) {
    ap_rputs("hello world<br />", r);
  }
 
  return DECLINED;
}
/* ハンドラを登録する */
static void hello_world_register_hooks(apr_pool_t *p)
{
  ap_hook_handler(hello_world_handler, NULL, NULL, APR_HOOK_MIDDLE);
}
/* モジュールに登録する */
module AP_MODULE_DECLARE_DATA hello_world_module = {
  STANDARD20_MODULE_STUFF, 
  create_dir_config,     /* create per-dir    config structures */
  NULL,                  /* merge  per-dir    config structures */
  NULL,                  /* create per-server config structures */
  NULL,                  /* merge  per-server config structures */
  hello_world_cmds,      /* table of config file commands       */
  hello_world_register_hooks  /* register hooks                 */
};

このコードでは、Apacheのディレクティブ（HelloWorld）を定義・設定し、その設定をモジュールに渡すことで、ディレクトリ毎にモジュールの起動を切り替えます。そこで、このコードを次のように大きく２つに分けると理解しやすいと思います。

a)モジュールの設定に関する部分
・モジュールの設定を表す構造体を定義する（16行目）
　→ この構造体にモジュールのOn/Offの設定を格納する

・ディレクトリ毎に構造体を初期化する関数を定義する（23行目）

・ディレクティブを定義する（40行目）
　 → HelloWorldディレクティブを定義（httpd.confに記述可能）
　 → AP_INIT_FLAGはOn/Offのみの設定を行うマクロ

・ディレクティブを受け取って構造体に設定する関数を定義する（33行目）
　 → ディレクトリ毎の設定を読み込む
　 → この関数はAP_INIT_FLAGにより登録される

b)モジュールの機能・登録に関する部分
・モジュールの機能を実装したハンドラを修正する（49行目）
　 → 構造体からモジュールのOn/Offを受け取って挙動を決める

・ハンドラを登録する（62行目）

・各設定・機能をモジュールに設定する（67行目）

ここでは"HelloWorld"というディレクティブを定義し、httpd.confで"HelloWorld"が"On"に設定されているディレクトリやLocationのみmod_hello_worldが有効になります。

②コンパイルとインストール

前回と同様に、コンパイルしてインストールします。

[コンパイルとインストールを同時に実行]
> /usr/sbin/apxs -i -a -c mod_hello_world.c

③httpdの再設定と再起動

ドキュメントルート以下にtestディレクトリを作成し、httpd.confでディレクティブを次のように設定します。

<Location "/test">
HelloWorld on
</Location>

VirtualHostを使っているなら、この設定をVirtualHost内に記述して下さい。最後に、Apacheを再起動して下さい。

/sbin/service httpd restart

これで準備は終わりました。

/testディレクトリにアクセスしてみて下さい。ページの先頭に"hello world"が付いているでしょうか？一方で、testディレクトリ以外の部分にアクセスすると、通常のページがきちんと表示されていれば成功です（先頭に"hello world"がなければＯＫ）。

ディレクトリ毎の設定を行えるようになると、特定のディレクトリへのアクセスに関しては特別な処理を行うことなどが出来るようになります。実用上も必要不可欠な技術ですので、ぜひ実際に試してみて下さい。

iPhoneアプリ開発開始時に気をつけるべきファイルの取り扱い (1)

Wed, 04 Aug 2010 04:23:01 +0900

こんにちは、亀本です。

今回から何回かに分けて、iPhoneの申請まわりの事に関するファイルの取り扱いノウハウを書いてみたいと思います。

ここでのファイルの取り扱い方の紹介方法は、ファイル一つ一つについて個別に言及するようなまとめ方はしません。
代わりに、そのファイルを作成・利用するタイミングを切り口として紹介し、その際にファイルをどう取り扱うべきかを、その理由とともに説明していきます。

(※なお、あくまでも個人的に感じたノウハウであって、必須事項ではありません。)

１回目は、まず触れるべきファイルの説明と、一番最初のCSR発行時に気をつけておくことを紹介します。

はじめに

iPhoneの開発を始めようとすると、最初にCSRやらProvisioning Profileやら、いまいちパッとつかみづらい概念が出てきます。
このあたりのよくわからない事、けっこう悩まされてしまいますよね。

とはいえ、最初始めるときはまだいいのです。
何しろ、Appleのサイト側にあれをやれ、これをやれ、という手順が載っているし、検索するといろんなところに開始手順についての解説が出てきます。
そういう意味で、ある程度頑張れば、「手順通り」でちゃんと整います。

しかし、それだけで事が済めば、苦労はしません。
だいたいが、そうやってよくわからないまま、「とりあえず」で整えてしまった環境が、ごちゃごちゃになってしまって、管理がとてもやりづらくなってしまうのです。

特に問題になるのは

・一定期間以上たって、証明書の有効期限が切れた場合
・チーム開発を行うために、新しいマシンで開発を行う場合
-> 同じく、新しい環境に移行する場合

これらについて、自分がしばらくチーム開発や申請などを繰り返してきて、申請や開発に必要なファイル群をどう扱うべきか、ある程度ベストプラクティスが見えてきたので、書き残しておくことにしました。

開発開始時、どのファイルをどう扱っておけばいいか、などが全く分からない、という状態になってしまうようなら、以下のポリシーにしたがってファイルを扱っておけば、まずまず困ることはないと思います。

なお、話が冗長になるので、ここではファイルの個別の作成方法には触れません。
作成するときに必要な注意点のみを述べることにします。
ファイルの作成方法については、AppleのProvisioning Portalにある解説などを参考にしてください。

必要なファイル群

まず、開発、申請に使うファイルや情報を列挙しておきます。

・秘密鍵
--> hoge.p12
・秘密鍵に対応したCSR(証明書要求)
--> CertificateSigningRequest.certSigningRequest
・ CSRに対応した証明書(開発用)
--> development_identity.cer
・ CSRに対応した証明書(申請用)
--> distribution_identity.cer
・中間証明書
--> AppleWWDRCA.cer
・デバイスID
--> iPhone実機から取得
・ AppID
--> 任意に設定
・ development用Provisioning Profile
--> hoge.mobileprovisioning
・ destribution用Provisioning Profile
--> hoge.mobileprovisioning

最初から最後まで、必要になるファイル/情報は、とにかくこれだけです。
開発のみ、申請のみ、など、立場によって関わるファイルは異なってきますが、すべてを一貫して扱う場合には、この９概念しか出てきません。

もちろん、「いやいや、これは開発と申請で別にした方が。。。」といったものもありますが、それらは適宜説明していきます。

最初にCSRを作る際に気をつけるべき事

さて、それでは本題に移りましょう。
まず、実機テスト・並びに申請時に一番最初に手をつけることになるであろう作業「証明書要求(CSR)の作成」の際に気をつけるべき点を紹介しておきます。

1. 証明書情報の「通称」には、グループ単位の名前をつけよう

CSRを作成しようとすると、そのフローの途中で「証明書情報」を入力する画面に差し掛かるでしょう。
ここで必要な情報として
・メールアドレス
・通称
という項目を入力し終えれば、CSRと秘密鍵(＋公開鍵)ができあがります。

と、ここでつい、通称として自分の名前を入れてしまう人などは、是非そこで注意して、「申請するグループ単位の名前」をつけるようにしましょう。
(※もちろん、個人で活動されている方は問題ありません。)

ここでつけた名前は、その際に生成される秘密鍵などの名前になってきます。
では、なぜそれが個人名ではまずいのか？個人のものではないのか？なぜ「グループ単位の名前」がいいのか？

それは、その後の実機開発などの際に関わってきます。
何台かのMacで同一のアカウントで実機テストを行おうと思った場合には、この秘密鍵と、それに対応する証明書、Profileなどがワンセットで必要になります。

しかし、秘密鍵/証明書は、１つのアカウントごとに１つしか指定できないため、実質上、この鍵は他のマシンから移植するなど、徐々にプロジェクト全体、場合によっては会社全体で使われる事になっていくオチがあります。
そんな風に使われることになるので、ここに個人名がついていると、何の鍵だかよくわからない状態になってしまい、あまりよろしくありません。
(※各マシンごとに違うアカウントを発行して、それをすべて同じDeveloper Programに所属。。。とかやれないこともないですが、無駄に煩雑です)

なので、あとで鍵が何のための物かすぐわかるように、適切な集団の名前をつけておくと、運用しやすくてよいでしょう。
(※なお、鍵の名前自体は、あとから変えることも出来なくはないです。)

2. CSRと秘密鍵は、必ずペアして保存しておこう

秘密鍵とともに、証明書要求用のCSRのファイルが生成されると思います。
このCSR、中間ファイルっぽいので、よく捨てられてしまう事があります。
が、実はこのファイル、安易に捨ててはいけません。

というのも、最初の証明書を発行してから一定期間が経過すると証明書が有効期限切れになってしまい、再度証明書の要求をする必要がでてきます。
その際に、同じ秘密鍵を使い続ける＝環境を特にいじらずに済ますには、再び現行の秘密鍵と対応するCSRで証明書の要求をすることで、そのまま同じ環境を、大していじらずに使い続けることが可能になります。

と、長期間続けて使い続けるには、このCSRが割と重要であるにもかかわらず、一度失ってしまうとあとから容易に復元でないため、このファイルは必ず、対応する秘密鍵とともにペアで保存しておくようにするとよいでしょう。

おわり

さて、ひとまず今回は、全容の紹介と、CSR生成時に考えておくとよいことを紹介しました。

次回以降でも、各ステップごとにとるべき対応やファイルの取り扱い方法について、紹介していきます。

中田英寿氏が監修するスポーツコミュニティサイト「365すぽーつでぃ」を株式会社次空と共同開発

Mon, 02 Aug 2010 11:45:00 +0900

この度、アシアルと株式会社次空は、サッカー元日本代表の中田英寿氏が監修する、スポーツを中心としたトータル・ライフ・コミュニティサイトである『365すぽーつでぃ』(http://www.365spo.com)を共同で開発し、7月7日に正式オープンいたしました。

今回開発した「365すぽーつでぃ」は、スポーツを楽しむ個人と個人、個人とチーム、プロアスリートとアマチュアユーザのコミュニケーションの場を設けることで、スポーツ活動への参加機会を増やすとともに、スポーツとライフスタイルの活性化を目指す、トータル・ライフ・コミュニティサイトです。

個人の趣味・嗜好・スポーツ歴等のプロフィールを登録し、個人間の情報のやりとりができる「ソーシャルマネジメントシステム」で、一緒にスポーツを楽しめる人を探したり、「チーム・ユーザマネジメントシステム」で自分のやりたいスポーツへの参加メンバーや対戦相手を募集することができます。

また、『365すぽーつでぃ』のサイト内では、プロアスリートが実践するトレーニングやテクニックの解説を映像で配信。それらの映像をきっかけに、SNS 上やコミュニティで一緒にスポーツする仲間が集う場を提供したり、映像配信されたアスリートやコーチが開催するイベントやスクールと連動することで、実際のスポーツ体験を創出し、青少年の育成、地域の活性化、スポーツ人口の増進に貢献しようというものです。参加アスリートとして、サッカーの中田英寿氏のほか、野球の古田敦也氏、テニスの杉山愛氏、マラソンの有森裕子氏など、各スポーツ分野のトップアスリートの方々を招聘しており、今後も様々な分野のスペシャリストにご参加戴く予定です。

『365すぽーつでぃ』は、7,400万人といわれるスポーツ人口のうち、月間80万人の利用者数を目指した大規模なコミュニティサイトで、いつでも気軽に利用できるように、携帯サイトでの運営も行われています。また、人気アスリートの参加が予定されており、大規模なスポーツイベントが開催される年や、アスリートとのイベント連動時期など、アクセス数の急増と共に、必要なシステムリソースが一気に増加するなど、時期により激しくシステムリソースの利用量が変動することが考えられます。『365すぽーつでぃ』では、リソース使用量に応じたコスト最適化を実現するために、企業向けのクラウドサービス（PaaS／IaaS）であるTIS株式会社提供の『TIS Enterprise Ondemand Service』（※1）を採用しています。

アシアルでは、サイト開発の中でこれらのニーズに応えるために、幅広い技術ノウハウを適用しています。
具体的には、高負荷に耐えうるシステム構成を構築するために、サーバの台数・構成変更に即時対応可能なアプリケーション設計を行い、データの種類と要求される速度・信頼度などに応じて、様々な特性のデータストレージを組み合わせて利用するなど、クラウド・プラットフォームやその他最新の技術を活用したシステムを構築しました。

■ 主なアプリケーションの特徴

・個人がプロフィールを登録し、コミュニケーションを行えるソーシャル機能
個人の趣味・嗜好・スポーツ歴等のプロフィールを登録し、個人間でのメッセージのやりとりや、コミュニティを作成することで情報交換を行えるコミュニティ機能。個人からチームへの参加申込、チームからの個人へのスカウトが行えるマッチング機能など。

・スポーツ・チーム管理機能
チームメンバーの情報や出欠確認などを管理するメンバー管理機能、試合スケジュールや対戦情報の管理などのスケジュール管理機能、対戦相手の情報やよくコンタクトをとるチームを管理する対戦相手管理機能、対戦応募やオファー情報を管理する、対戦募集管理機能、チーム内の掲示板の設置など、チームの運営を補助するための管理するための機能。

・スペシャリストが実践するトレーニングやテクニックの解説を映像で配信
各ジャンルのスペシャリストが実践するトレーニングやテクニックの解説を映像で配信。現在、参加アスリートとして、サッカーの中田英寿氏のほか、野球の古田敦也氏、テニスの杉山愛氏、マラソンの有森裕子氏など、各スポーツ分野のトップアスリートの方々を招聘しており、今後も様々な分野のスペシャリストにご参加戴く予定。さらにトレーナーなどの専門家や、食・ビューティに至るまで、ライフスタイルを豊かにする情報を提供予定。

※1TIS Enterprise Cloud Service（http://www.tis.co.jp/service/paas/overview）
TIS株式会社が提供するクラウドサービス。企業ITシステムでのクラウド利用のメリットを最大限に活用する為に、従来型の個別システムとクラウド環境を併用した形のハイブリッドなシステムの実現を支援するPaaS/IaaSです。TISがこれまで培ってきた大規模システムのシステム・インテグレーション（SI）と運用の実績やノウハウに基づいたSI技術とクラウド技術を組み合わせて、企業システムの最適化されたITインフラ構築を支援します。

TOPページ
本サービスの機能一覧をわかりやすくご説明いたします

コミュニティページ
スポーツに関する話題でコミュニケーションができます

動画ページ
各分野のスペシャリストの動画を見ることができます

ユーザ検索ページ
登録されているユーザを検索することができます

チーム検索ページ
登録されているチームを検索することができます

開発でよく使うTool纏めMac偏

Fri, 30 Jul 2010 19:16:20 +0900

Smulrton

いちごのエディターです。アイコンがイチゴ
Smulrtonはスエーデン語で野いちごの意味らしいです。
日本語ローカライズされていて機能的にもそこそこ備えたエディターです。
残念な事に開発は終わってるみたいですが。。
http://smultron.sourceforge.net/

Mac Vim

言わずと知れたViのクローンです。
Gvimとは違いヴィジュアルモードも使えます。
Macには標準でコンソールから呼び出せるViもあるのですが、気分で使いわけてます。
インストールはPortsからできます。

eclipse
eclipseは便利ですね。
Viしか使えない環境ではViを使うのですが、Sumba環境だと動きが遅いので出来るだけローカルに開発環境がある時はeclipseを使って開発してます。

ちょいネタでeclipseの日本語化について

日本語化してeclipseを使っているのですが、私はMerge Doc Projectを使って日本語化しました。

Merge Doc ProjectのページからPleiades All in one Eclipse 3.6.0 Helios Windows 32bit ベース / Pleiades All in One 3.6.0.20100623をDL
します。
私はPHPのFull All in One をDLしました。
http://mergedoc.sourceforge.jp/

Mac版のEclipse（Eclipse Classic 3.6.0）をDlします。
http://www.eclipse.org/downloads/

解凍するとeclipseディレクトリーが出てくるので、eclipseディレクトリー配下のdoropinsディレクトリーの中に先程落としてきたPleiades All in one Eclipseの中にあるdorpinsディレクトリーの中身をコピーします。同名のファイルがある場合は上書きします。

eclipse.iniの中身を編集します。
eclipse.iniはEclipseアイコンの上で右クリック「パッケージの内容を表示」→Contents→MacOSの順に辿って行くとあります。
Windows版はexeファイルと同じディレクトリーに同名であります。

編集方法は感でマージします。（すいません、ここんとこよくわかんないです。）
私の環境では以下の内容で動きました。

-startup
../../../plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
--launcher.library
../../../plugins/org.eclipse.equinox.launcher.cocoa.macosx_1.1.0.v20100503
-product
org.eclipse.epp.package.php.product
--launcher.defaultAction
openFile
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.library
/Applications/eclipse_cocoa/plugins/org.eclipse.equinox.launcher.cocoa.macosx_1.1.0.v20100503
-startup
/Applications/eclipse_cocoa/plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
-vmargs
-Dosgi.requiredJavaVersion=1.5
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts
-XX:MaxPermSize=256m
-Xms128m
-Xmx512m
-Xdock:icon=../Resources/Eclipse.icns
-XstartOnFirstThread
-Dorg.eclipse.swt.internal.carbon.smallFonts
-javaagent:../../../dropins/MergeDoc/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

DB Tool
コンソールでsqlを操作してもいいのですが、GUIで操作したほうがテーブル名やカラム名を見ながらデータの中身を見たり
直感的に操作できて作業効率も上がるので私は基本的にGUIのToolを使ってます。
普段MySqlを使っているのでMySqlに特化してますが、Sequel Proが使いやすいと思います。
UTF-8環境では日本語も表示されました。
スクリーンショットは本家のサイトでみてみてください。（スクリーンショット撮るとお客さんの環境が見えてしまうので・・・）
http://www.sequelpro.com/

とりあえず、エディターとDBの中身が見えればコードは書けるかなって事でエディターとDBToolの紹介でした。

おまけ
MacPorts使うならPorticusを使うのが便利ですよ。
MacPorts
http://www.macports.org/

Porticus
http://porticus.alittledrop.com/

あ、あとブラウザーも必要ですねｗ
私はFirefox＋FireBug使ってます。

AJAX内でのリダイレクト処理の罠

Wed, 28 Jul 2010 23:03:35 +0900

こんばんは。笹亀です。

iPhoneの白をず〜〜っと待っているのですが、
今年末ということになってとても残念でなりません。
ここまで待ったので気長に待つことにします。

さて今日はAJAX内でのリダイレクト処理をした際に、
起こったことをご紹介させていただきます。

結論から言うと、
「AJAX内でリダイレクトするときはセッションは使うな！」

まずは遷移として下記のように試しました。
AJAXでSymfonyをfile_get_contentsで呼び出すスクリプトを指定します。

info.php
↓AJAXで呼び出し
get.php(外部のSymfonyで作成されたページの呼び出し)
↓file_get_contents関数で呼び出し
http://sasa.local/top/sessionTest
↓(Symfony内でリダイレクト
http://sasa.local/top/sessionTest1
※Symfonyのリダイレクト(redirect)を使用してセッションのデータを書き込んで値を引き継ぐことができるのかを試しました。

まずは表示する側のページを作成します。

-- info.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>symfony&ajax session Test</title>
<script language="JavaScript" type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
<!--
function ajax_test() {
$.ajax( {
type : "POST",
url : "get.php",
data : {param : "sasagame hiroshi"},
success : function(txt) {
$('#view_area').html(txt);
},
error : function() {
alert('error');
}
});
}
// -->
</script>
</head>
<body>
symfonyとセッションのテスト中<br />
<input type="button" name="test" onClick="ajax_test();return false;" value="テスト開始">
<div id="view_area">
</div>
</body>
</html>

次にAJAXの呼び出し側のPHPスクリプトを作成します。
-- get.php

<?php
$html = file_get_contents('http://sasa.local/top/sessionTest?param=sasagame+hiroshi');
echo $html;
?>

※ここではSymfonyで作成されたページを指定しております

get.phpで呼び出しているSymfony側の処理を実装します。

・・・省略
public function executeSessionTest(sfWebRequest $request)
{
$param = $request->getParameter('param');
$this->getUser()->setAttribute('session_test', $param);
$this->redirect('top/sessionTest1');
}
public function executeSessionTest1(sfWebRequest $request)
{
$param = $request->getParameter('param');
$session_data = $this->getUser()->getAttribute('session_test', '取得できない');
echo 'session_test_data:' . $session_data . "<br />";
echo print_r($_SESSION, true);
exit;
}
・・・省略

上記のように実装完了後に実際に動かしてみます。

テスト開始ボタンをクリック・・

うあ、やっぱり取得できません。

普通にSymfony側を実行すれば、セッションデータの取得はおこなえます。

普通にAJAXで処理するときには、ご紹介させていただいたようなリダレクトして処理を遷移させて使うみたいなことはそうそうないことだとおもいます。
今回はイレギュラー的にどうしてもセッションを使ってリダイレクトすることになってしまいました。なぜだといろいろと試行したため時間を使いました。先入観で出来るだろうと思って使うと痛い目にあいますというか痛い目にあいました。

教訓としてはこんな遠まわしな使い方をするなということと先入観で使用するなでした＾＾；

皆さんもAJAX使うときには気をつけてくださいませ。