アシアルブログ

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

阿部恵 — 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 Demotitle>
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/

【開催概要】

日程： 9月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回構成です。
今回の後編では、前編で学んだActionScript3.0の知識をベースに、簡単なアプリケーションを作成しながらFlexの魅力に触れていきます。
FlashやActionScriptを少しでも触ったことがある方のステップアップとなるセミナーですので、後編から参加しても充分理解できる内容となっております。
前編出られていない方もふるってご参加ください。

講演者：アシアル株式会社　橋本章史（ハシモト　アキフミ）アシアル株式会社の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 testtitle>
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アプリケーションの構築も担当している。