エスキュービズム ラボ Blog

ご存知の方も多いと思いますが、
node.jsというのは、サーバ側で実行するjavascriptのフレームワークの一つです。

個人的には下記の理由によりサーバサイドjavascriptは熱いと思っています。

• javascriptはweb開発では必須の技術
  (ブラウザ側でjavascriptの使用量は増えていく傾向にあり、javascriptなしではwebの開発はありえない)
• イベント駆動との相性がよい
  ブラウザ側もonClickイベントなど、イベント単位で記述していている。その延長でサーバ側も記述できる

今回はnode.jsでmongoDBを使う方法を簡単に説明します。
Read more »

いきなり質問です。

Q1.
風邪を引いて体調が悪い時に、
良い気分で過ごすことはできますか？ 

Q2.
気持ちが落ち込んでいる時に、
いい仕事ができますか？

これらの質問に対して、ほとんどの人が「いいえ」という答えではないでしょうか。

感情、体、思考は密接につながっており、一つを切り離すことはできません。

これを体系的にまとめたものがNLP(神経言語プログラミング)です。

その中でも今回は、アイアクセシング・キューという技法をご紹介します。

アイアクセシング・キューとは、視線の動きで相手が何を考えているのかを

判断する技法です。

具体的には、下記のような傾向があります。

• 左上・・・視覚的記憶に思考がアクセスしており、過去の経験した場面などを考えています。
• 右上・・・視覚的想像に思考がアクセスしており、経験していない場面などを考えています。
• 左横・・・聴覚的記憶に思考がアクセスしており、過去の聞こえた音などを考えています。
• 右横・・・聴覚的想像に思考がアクセスしており、経験していない音などを考えています。
• 左下・・・内部の対話に思考がアクセスしており、自分との葛藤をしている傾向です。
• 右下・・・身体的な感覚に思考がアクセスしており、自分の体について考えている傾向にあります。

このように、視線の動きだけで判断できるのは、

思考と体が密接に連携しているため、

思考によって、視線が特定の方法に動くという行動を

自然にとってしまいます。

 

今回はNLPの一つの手法についてご紹介しましたが、

他にも、

• アンカリング
• VAKシステム
• リフレーミング

などなど、たくさんの有益な技法があるので、

ぜひ一度大変されてみてはいかがでしょうか。

それでは。

 

 

 

PHP5からインターフェースが使えるようになっていますね。
これでクラス間の関係を抽象化することができるようになりました。

そこでいまさら感は否めませんが、PHPでデザインパターンをやってみようと思います。

そもそもデザインパターンとは何かといいますと、
「クラス間設計における先人のノウハウ」と言えると思います。
クラス間の設計を行うにあたって、拡張性を高めたり問題を解決するためのノウハウですね。

そして、そこで大いに利用されるのがインターフェース・抽象クラスというわけです。

さて、GoFデザインパターンでは、23種類のパターンが提唱されていますが、それらは
3つの種類に分けられます。

Read more »

みなさん、 スマートフォン 使ってますか？
うちの会社では非常にスマートフォンユーザが多く見受けられます。
かなりの勢いで伸びているスマートフォン市場ですが、スマートフォンユーザの割合は携帯ユーザ全体の10％までいってないらしいです。
モバイルサイト構築での機種別対応は、これからもしばらくはなくならそうですね。

[参考　： アイシェア発表　携帯電話の利用状況に関する意識調査結果]　⇒　こちら

 

1．　モバイル対応を少しでも楽にしよう！

モバイルサイト構築を少しでも楽にする方法として、
株式会社ゆめみさんが配布してくださっている、Apache用モジュールを使う方法をご紹介します。

サーバにあれこれ設定できる環境が条件となります。
※ちなみに個人的に借りているVPSサービスでも問題なく動作させることができました。

配布元で掲載されている動作環境については以下の通りです。

OS：CentOS 5、RedHat Enterprise 5
ミドルウェア：Apache 2.2以上、Boost 1.33以上、ImageMagick(mod_ktai_imageを使用する場合)
CPU：i386版、x86_64版
※Apache、Boost、ImageMagickは、ソースからではなくパッケージからインストールしたものをご利用下さい。
※Apacheはpreforkモードでご利用ください。

上記の環境が整える方には是非オススメです。

 

2．　まずは、mod_ktai_info　というモジュール

ユーザエージェントを元にモバイルサイト開発に必要そうな情報をいろいろと環境変数にセットしてくれます。
⇒　詳しくはこちら

さらに独自に作成した機種情報リスト（ktai_model.tsv）を元に、機種を判別して環境変数に様々な値をセットしてくれます。
例えば、機種別に「Flashが使えるか」「GPSがつかえるか」などの情報を設定することも可能です。
⇒　詳しくはこちら

ちなみにPHPの phpinfo(); で環境変数を見てみるとしたのような感じです。

下から５つの「X_KTAI_INFO_EXT_＊＊＊」は 機種情報リスト（ktai_model.tsv）での設定値となります。
＊＊＊は、機種情報リスト（ktai_model.tsv）で設定したカラム名です。

これらの情報を元にモバイル対応処理をごにょごにょとやってく感じで使います。
設定をプログラム上に持たなくてよいので変更や追加の場合に楽ですね。
機種情報リストを更新した後のApache等のrebootが必要ないところが「へぇー」

 

3．　そして、mod_ktai_emoji　というモジュール

モバイルといえば、キャリア毎の絵文字処理がつきものです。

①方式
docomoの絵文字コードを、softbankのそれっぽい絵文字コードに変換。
softbankの絵文字コードをauのそれっぽい絵文字コードに変換。

なんて事や、

②方式
docomoの絵文字コードを絵文字画像のimgタグに変換。

 

既にライブラリ化されている方はいいでしょうけど、いまから作り上げるのは一苦労です。
mod_ktai_emoji　を使えばこれらの処理は意識せずに、
文字コードが埋めてあるページを作成すればいいだけになります。
上記の①②のいずれかで処理するかは設定（.htaccess）などで指定すればOKです。

⇒　詳しくはこちら

 

4．　最後に、mod_ktai_image　というモジュール

機種別に画像を最適表示する場合、機種毎のディスプレイ解像度にあわせた画像が必要となります。
大体の場合、使う画像をアップロードする時に数種類のサイズを複製するケースが多いのではないでしょうか。

mod_ktai_image を使うと画像の扱いが次のようにできます。

・アップロードの時は、複製を作らない。
・画像に対してリクエストがあった時に、指定されたサイズに複製する。（パラメタで[横幅:x]などを指定できるようになる）
・一度複製した画像データはキャッシュに残して、2回目以降はキャッシュデータを使用する。

例えばPHPの場合で mod_ktai_info に機種毎の画面横幅を「WIDTH」というカラム名で設定しておき、
表示させる画像のimgタグを

<img src=”画像ファイル?x=$_SERVER['X_KTAI_INFO_EXT_WIDTH']“>

としておけば、新たな解像度の機種が誕生しても、
機種情報リスト（ktai_model.tsv）に機種情報を設定するだけで終わります。

⇒ 詳しくはこちら

 

5．　まとめ

mod_ktai は、モバイルサイト構築の敷居を低くしてくれてます。
配布元に感謝しつつ、ぜひ使ってみましょう。

・・・「mod_chxj」も気になる。（ぼそッ）

皆様はFlexでの開発の経験はおありでしょうか？
私は一度だけ触る機会があり、その時には華麗で美麗で高機能なアプリが比較的簡単に作れるのでとても感動したのを憶えています。

というわけで今回はFlexの基本に触れてみたいと思います。

・そもそもFlexって何？

Flexとはadobeが開発したもので、Flash技術を用いて高機能なWebアプリケーション開発・Webサイト構築を行うためのフレームワークのことを言います。
バージョン1.0がリリースされたのが2004年のことなので左程新しい技術とは言えず、仕事で使用している方、または個人的にFlexを使って何か開発している方もいるかと思います。
ちなみに現在の最新バージョンは2010年3月にリリースされた4.0です。

・Flexを使用するメリット

前述したとおり、FlexはFlashの技術を流用しているため、htmlベースのものと比べ綺麗で高機能なＵＩをアプリに組み込むことができます。またマルチメディア制御にも長け、画像・音声・動画等の表現をより細かに制御することが可能です。

そして結構重要なのがクロスブラウザ対応が不要ということです。javascriptはJQueryの普及が進むにつれ意識する必要が無くなってきましたが完全に対応できるとは言いがたい状況だと思います。

最近話題になっており、当ブログでも取り上げたこともあるhtml5で登場した新機能に関してもブラウザによって挙動がことなる場合が多々あるみたいです。

(業務アプリならブラウザ固定でいいじゃんという声もありそうですが・・・）

・Flexを使用するデメリット

無い！！・・・

と言いたいところですが自分の経験・他の人の経験を踏まえて考えてみるといくつかあります。

まず学習コストがhtmlベースのWebアプリケーション・サイト開発時よりもかかってしまうということです。冒頭で比較的簡単にとは言いましたがFlexでの開発にはmxml(後述します）とActionScriptが必須となり、mxml、ActionScriptの仕様はhtmlより遥かに複雑であるため習得にはそれなりに時間がかかります。私は他言語の経験もそれなりにありますが基本PHP使いであるため、それなりの処理を書けるようになるまでに苦労したのを憶えています。私が使ったActionScriptのバージョンは4年程前ニリリースされた3.0ですが中・上級レベルと呼べる人はまだ稀少なのではないでしょうか。

・開発に必要なもの

開発には以下のものが必須となります。

• ＦｌｅｘSDK
• ブラウザ
• FlashPlayer(ブラウザのプラグインとして）
• IDE

FlexSDKはadobeが無償提供しているものでFlex開発に必須なコンパイラ等が含まれており、以下のリンクからダウンロードすることが可能です。

adobe open source

ブラウザに関してはお好きにどうぞ。但し、私がＦｌｅｘでの開発に使用していたのはIEとFireFoxです。サンプル用に作ったFlexアプリ(swfファイル)を他のChrome、windowsのsafariでも試しましたが問題なく動作していたので前述した２ブラウザ以外でも大丈夫でしょう。

(Ｆlexアプリをhtmlのobjectタグに埋め込んで使用するのではなく、ブラウザで直接開くことを前提としています。）

FlashPlayerですがIEとFirefoxに関してはプラグインがインストールされていない場合にはadobeの公式ホームページからダウンロードしてください。（ブラウザごとにインストール方法が違います。）

Chrome、safariに関してはインストール不要です。

ＩＤＥ(統合開発環境）に関しては有償・無償があります。有償はadobeが販売しているFlexBuilderというものがあります。詳細に関してはadobe公式ホームページを参照してください。

※FlexBuilderは現在FlashBuilderという名称で販売されているようです。

無償のIDEとしてはSpektIDEとFlashDevelopがあります。SpketIDEはEclipseプラグインとして動作するもの、単体で動作するものの２つがあります。正直Ｆｌｅｘ開発という観点から評価するとどちらも微妙です。SpketIDEはFlexSDKのパスを設定することはできるものの、mxml、ActionScriptのコンパイルができるわけではないためActionScript部分の開 発では役に立ちませんがmxmlの記述には・・・多少は役に立つでしょう。多少というのはmxmlのタグ入力の省力化ぐらいには使えるとは思いますがそれ 以外にはあまり役に立たないように私は感じました。

ＦｌａｓｈDevelopはFlex開発というよりもActionScriptでFlashコンテンツを開発するためのものですので完全なFlex開発用IDEではありませんが、FlexSDKへのパスを設定してあげるとFlashDevelopからmxml、ActionScriptをコンパイルできるようになります。またmxmlの記述に関してもコードアシスト機能等が有り、そこそこ使えるものとなっていますがさすがにVisualStudioのようなGUIベースでのボタン等のコントロールの配置は出来ないようです。(無償にそこまで期待するのは酷か・・・）

今回紹介するサンプル作成にはＩＤＥは使用してません（使用するまでも無いので）。ＳＤＫ、ＩＤＥのインストール手順、操作方法は割愛します。

・開発手順

Flexアプリの開発手順ですが、以下の流れに沿って開発をしていきます。ただ、あくまで自分の経験上の話であるため、別のフローで開発を進める場合もあるかと思いますがご了承ください。

• mxmlを作成
• 必要に応じてActionScriptで処理を実装
• ＦｌｅｘSDKに付属するFlexコンパイラ(mxmlc.exeがそれに該当します）でコンパイル

上記手順に従って簡単なアプリを実際に作ってみます。

仕様としてはアドレスバーに入力されたURL先の画像を読み込み、その画像に対して様々なエフェクトを適用できるようにするというものです。エフェクトの切り替えは別に配置するボタンによって切り替えるものとします。またリセットボタンも配置し、エフェクト後の画像プロパティをリセットできるようにします。

１．mxmlの作成

mxmlというのはFlexアプリの言わば「土台」となるものです。ボタン・画像・音声・ビデオ等は勿論、エフェクト等もmxmlのみで記述することが出来ます。名前の通り、XMLを用いて記述します。以下に私が作成したものを示します。名前はflex_sample.mxmlとします。

<?xml version=”1.0″ encoding=”utf-8″ ?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”  verticalScrollPolicy=”on” horizontalScrollPolicy=”off” layout=”vertical” >
<mx:Script>
import mx.events.*;
import mx.controls.*;
import mx.containers.*;
import mx.collections.*;
import mx.effects.*;

/**
* ズーム
*/
public function zoomImg():void
{
var eff:Zoom = new Zoom(gotimg);

eff.zoomWidthFrom = 1.0;
eff.zoomWidthTo = 0.3;
eff.zoomHeightFrom = 1.0;
eff.zoomHeightTo = 0.3;
eff.duration = 1000;

eff.end();
eff.play();
}

/**
* 移動
*/
public function moveImg():void
{
var eff:Move = new Move(gotimg);
eff.xTo = 300;
eff.yTo = 200;
eff.duration = 1000;

eff.end();
eff.play();
}

/**
* フェード
*/
public function fadeImg():void
{
var eff:Fade = new Fade(gotimg);

eff.alphaFrom = 1.0;
eff.alphaTo = 0.1;
eff.duration = 1000;

eff.end();
eff.play();
}

/**
* シーケンスエフェクト
*/
public function seqEffImg():void
{
var eff:Sequence = new Sequence();

var eff1:Zoom = new Zoom(gotimg);
var eff2:Move = new Move(gotimg);
var eff3:Fade = new Fade(gotimg);

eff1.zoomWidthFrom = 1.0;
eff1.zoomWidthTo = 0.3;
eff1.zoomHeightFrom = 1.0;
eff1.zoomHeightTo = 0.3;
eff1.duration = 1000;

eff2.xTo = 300;
eff2.yTo = 200;
eff2.duration = 1000;

eff3.alphaFrom = 1.0;
eff3.alphaTo = 0.1;

eff.addChild(eff1);
eff.addChild(eff2);
eff.addChild(eff3);

eff.end();
eff.play();
}

/**
* パラレルエフェクト
*/
public function palEffImg():void
{
var eff:Parallel = new Parallel();

var eff1:Zoom = new Zoom(gotimg);
var eff2:Move = new Move(gotimg);
var eff3:Fade = new Fade(gotimg);

eff1.zoomWidthFrom = 1.0;
eff1.zoomWidthTo = 0.3;
eff1.zoomHeightFrom = 1.0;
eff1.zoomHeightTo = 0.3;
eff1.duration = 1000;

eff2.xTo = 300;
eff2.yTo = 200;
eff2.duration = 1000;

eff3.alphaFrom = 1.0;
eff3.alphaTo = 0.1;

eff.addChild(eff1);
eff.addChild(eff2);
eff.addChild(eff3);

eff.end();
eff.play();
}

/**
* 画像プロパティーリセット
*/
public function imgPropReset():void
{
gotimg.alpha = 1.0;
gotimg.x = 0;
gotimg.y = 0;
gotimg.scaleX = 1.0;
gotimg.scaleY = 1.0;

}

/**
*　指定URL先の画像を取得
*/
public function getUrlImg():void
{
gotimg.source = imgurl.text;
imgUrl = imgurl.text;
}

</mx:Script>
<mx:HBox>
<mx:Label text=”画像URL:” /><mx:TextInput id=”imgurl” text=”" /><mx:Button label=”取得” click=”getUrlImg();” />
</mx:HBox>
<mx:Canvas width=”300″ height=”300″ backgroundColor=”#ffffff” autoLayout=”true”>
<mx:Image x=”0″ y=”0″ id=”gotimg” source=”" />
</mx:Canvas>
<mx:HBox>
<mx:Button label=”ズーム” click=”zoomImg();” /><mx:Button label=”移動” click=”moveImg();” /><mx:Button label=”フェード” click=”fadeImg();” /><mx:Button label=”シーケンスエフェクト” click=”seqEffImg();” /><mx:Button label=”パラレルエフェクト” click=”palEffImg();” />
</mx:HBox>
<mx:Button label=”リセット” click=”imgPropReset();” />
</mx:Application>

とりあえず使用しているタグの説明をします。

mx:Applicationタグはhtmlで言うbodyタグに相当し、必須のタグです。上記サンプルでは使用していませんがFlexアプリのロード完了直後に実行する関数(厳密には違いますが・・）を指定することも可能です。ロード完了時点でcreationCompleteというイベントが発生するのでcreationComplete=”(実行関数)”としておけば、指定された関数がFlexアプリのロード完了時点で実行されます。

mx:Scriptタグはhtmlでいうscriptタグに相当し、タグ内にはActionScriptを記述することが可能です。サンプルでは画像の取得・画像に対するエフェクトの適用のためのActionScriptが記述されています。ちなみに最初の方でimportされているパッケージmxはFlexSDK提供のパッケージを指します。

mx:HBoxはタグ内のコントロールを水平配置する機能を持ちます。

mx:Labelは編集不可能な文字列の表示に使用します。

mx:TextInputはhtmlでいうinput(type=text)に相当し、任意の文字列を入力可能なコントロールです。今回は画像URLの入力に使用しています。

mx:Buttonはボタンです。ボタンクリック時のイベントをclickイベントとしてキャプチャーし、任意の関数を実行させることが可能です。

mx:CanvasはCanvasタグ外部と隔離された領域を定義するためのものです。ここでは画像を絶対座標配置し、かつ他のコントロールと位置が重ならないようにするために使用しています。

mx:Imageはsourceプロパティに指定されたURLの画像を読み込み表示するためのものです。コンパイル時に内部に画像データを埋め込む方法もありますが今回は外部のイメージを読み込んで表示することを前提としているため、詳細は割愛します。

２．必要に応じてActionScriptで処理を実装

必要に応じてActionScriptで処理を実装と有りますが個人的にはほぼ必須のような気がします。とりあえずサンプル上に記述されているActionScriptの説明を簡単にします。Zoom、Move、Fadeクラスはコンストラクタの引数として渡したコントロールに対してそれぞれズームイン・ズームアウト、座標移動、フェードイン・フェードアウトエフェクトを適用するためのクラスです。使い方としてはエフェクト開始前・終了後のエフェクト適用対象コントロールのプロパティを設定し、end(),play()を実行するだけです。Sequence、Parallelクラスは複数エフェクトを逐次適用、並列適用させるためのクラスです。ここではActionScriptの基礎に関しては割愛します。

３．コンパイル

完成したmxmlをFlexアプリへとコンパイルします。Ｄｏｓ窓を開いてもらい、作成したmxmlの配置してあるディレクトリまで移動してください。移動したら以下のようにしてコンパイルを実行します。

mxmlc sample_flex.mxml

環境変数PATHにFlexSDKへの絶対パスが設定されていない場合には実行時にmxmlcの配置場所を絶対パスで指定する必要があります。上記実行後、同一ディレクトリにsample_flex.swfが作成されているはずです。コンパイル後のものを以下に掲載します。

画像URLに適当な画像のURLを入力して、「取得」ボタンを押すとmx:Canvasで定義された白の領域に取得画像が表示されます。その後、「ズーム」等の適用したいエフェクトのボタンを押すと表示されている画像に対してエフェクトが適用されます。

・最後に

どうでしょうか？今回紹介したサンプルではＦｌｅｘアプリを語るには微妙な部分もありますが、htmlベースのものよりは手間が多少かかるとは言え、比較的簡単に高機能なＷｅｂアプリケーション、Webサイトを開発できそうだということが分かっていただけたかと思います。これは良さげだなと思った方は是非一度試してはいかがでしょうか？

(※今回の記事は執筆者の経験を元にして書かれたものです。ですので間違えがあるかと思いますが、遠慮なく指摘していただければと思います。）

みなさん、Mercurialってものを御存知ですか？

少し前に結構話題に上ったりしていたので、知っている方も多いと思いますが、Mercurialとは分散バージョン管理システムのひとつです。似たようなとこで有名なものには、gitなんかがあります。

「分散」ってとこはひとまず置いておいて、とりあえずSubversionとかCVSとかの仲間だと思っていただければよいと思います。

ただ、仕組み的には、対局となるものとして紹介されることが多く、Mercurialの「分散バージョン管理」に対して、SubversionやCVSは「中央集権型バージョン管理」と呼ばれています。分散バージョン管理のことやその仕組みを知りたい方は、gihyoさんのほうにシリーズで記事が上がっているので、こちらをご一読されると幸せになれるかもしれません。

要はリポジトリ1つで管理するのか、複数のリポジトリで連携させながら管理していくのかの違いで、FTPとP2Pの違いのようなもんだと書籍(入門Mercurial)では説明されています。

それで、今回はこの、Mercurialを使って、個人でお手軽バージョン管理を堪能するようになれるとこまで最低限必要なことをまとめてみることにしました。

Subversionのように大げさな設定もいらないし、本当に簡単に始めることができると思います。

Read more »

すっかり秋めいてまいりましたが、皆様体調を崩されていませんか？

さて今日は「情報漏えい」という、少々物騒なお話をさせて頂きます。
時々ニュースで伝えられている、「●●の顧客情報が●万件流出した」事件も「情報漏えい」ですが、某巨大掲示板等で発売・発表される前の、関係者でしか知りえない情報が流出することも、「情報漏えい」として扱われます。
あってはいけないことですが、もし情報漏えいの事故が発生してしまったら、どのような対応をとるのかをご紹介します。
———————————————————————————————————————————————————————————————————————————————————-

1.　　発見および報告
情報漏えいは外部からの通報により発見することが多いようです。後々の調査の　ために通報者の連絡先を必ず確認ておきます。 またどのような情報が漏えいしているかについてなるべく詳しい情報を聞き、可能であれば取得した情報を提供してもらうようにします。

2.　　初動調査
漏えい情報の内容、範囲を確認し、予想される二次被害を確認します。また漏えいを特定し、調査に対する本人の協力を得ます。

3.　　調査
漏えい情報の内容、範囲、時期等について調査します。また本人がその情報を流出するに至った経緯についても調査します。調査のためにWinny/Share 等を使用することは被害の拡大につながりかねませんので、行なうべきではありません。
予想される二次被害を確認します。

4.　　通知・報告・公表
漏えい情報に個人情報が含まれる場合には本人に通知し謝罪します。必要に応じ監督省庁への報告を行います。Winny/Share のダウンロードを誘発する恐れがある場合は、しばらくの間公表を控えるという考え方もあります。被害防止の観点から最善と思われる措置をとります。

5.　抑制措置と復旧
Winny/Share の漏えい情報については、とにかく話題性を高めずネットワーク上のファイルが自然に消滅することを待つのが得策といえます。また、多くの場合自宅において業務データを漏えいするケースが多いので、社外へのデータ持ち出しの制限などを再徹底する必要があります。全従業員に対してファイル交換ソフトの利用の危険性を周知し、ファイル交換ソフトの利用状況調査及び対処を行います。

6.　事後対応
違反や管理上のミスがあった場合は必要な処分を行います。また、必要に応じて漏えい情報による被害の補償等救済処置を行います。（報告行為について評価し、隠ぺい工作が起こらないよう配慮します）

このように、「軽い気持ち」が起こした事故は、社会的に甚大な被害をもたらしてしまいます。
情報の管理は、特に慎重に行って行きたいと思います。

最近、世の中では仮想化だの、クラウドだのと騒がれていますが、
今日はエスキュービズムの開発環境について、ちょっとご紹介したいと思います。

Read more »

今日は、いつものエンジニア陣による技術情報発信ではなく、弊社にお客様が遊びに来てくれたのでご紹介です。

「遊び」にというか、翌日に東京大学で講演があるという忙しいタイミングに、わざわざお時間を割いてお越し頂きました。
ランゲート株式会社の代表、喜 洋洋さんです、どうもありがとうございます！京都から世界に発信している注目のベンチャー企業です。（写真⇒右が喜さんです）

ランゲートさんは同名の Lang-8 というサービスを運営されています。

◆語学学習サイト Lang-8
http://lang-8.com/

 

Read more »

Read more »