エスキュービズム ラボ Blog

弊社サービス「会社なび/就職活動」のPR用に、JavaScriptゲームアプリを作成しました。

面接ウォーズ ＜就活生の逆襲＞

良かったらプレイして見て下さいね！

mw-top posted by (C)kjirou
　
(more…)

html5boilerplate(日本語サイト)は、HTML、CSS、JSのベストプラクティスを詰め込んだテンプレートを提供するサイトです。ここでは、そこで使用されているプラクティスの幾つかを紹介します。

(more…)

by H

皆様は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のように大げさな設定もいらないし、本当に簡単に始めることができると思います。

(more…)

(more…)

今回は、Google App Engine (GAE) でTwitter上のデータを集約するRSSリーダーのようなアプリを作りたいと思います。

解説する内容は以下になります。

1. Google App Engine (GAE) の利用方法
2. Twitter API の利用方法
3. ツイートの集積と簡単な未読・既読処理

 
(more…)

今年の4月に最新版がリリースされたVisualBasic

.NET Frameworkを利用したアプリケーションを今回は紹介したいと思います。

• VBの歴史

.NET になる前までのVBのバージョンは6まで。そのバージョン6.0がリリースされたのが1998年。このバージョンからVBはVBアプリだけでは無くASPアプリケーションを作成する事が可能になりました。

その後、.NETFramework を利用したオブジェクト指向型言語として装いを新たに VB.NET2002(VB7.0)がリリースされたのが2002年、その後2003年、2005年、2008年とバージョンを上げていき、今年の春に2010がリリースされました。これにより、.NET Frameworkも3.5から4.0へとアップグレードが行われます。

ちなみに、WindowsVistaには標準で.NET Framework3.5が導入されていますが他のOSは任意でインストールを行わねばなりません。

• .NET Frameworkを利用する利点は？

VB.NET以前でアプリケーションを利用する為には、「アプリケーションを利用する為」の環境が必要となりました。言い換えてみれば、使いたいアプリケーションに必須なアプリケーションはファイル等を別途用意しないといけない事が有りました。またPCのスペックやOSがまだ大きくまちまちだった時代ですので、必須条件を満たしているか否かと言う事も大きな問題になっていました。

（例：OSで言えばWindow98,98SE,ME,NT4,2000など）

.NET Framework には以前のバージョンでは自らインストールしなければいけないコンポーネントや特殊なランタイム等を一括で保持している為にある程度の整合性を保つことが出来ます。要は.NET Framework はソフトウェアを運用するにあたり必要なパーツ群だと考えて貰えればと思います。

• 宣言・変数について

PHPを利用していると、何の意識もせずに$hogeと言う形で変数を作成し、その中に数値やオブジェクトを入れる事が多々有りますが、VBの大きな考え方の違いと言えばここになります。変数を利用する際には、その変数に合致した変数を用意してあげなければならない。言葉で書くと少し小難しくなりますが、実際に変数として見てみると簡単だと思います。

Dim hoge as integer

これで整数数値型のhogeと言う器を利用する事が可能になりました。ですから

hoge = “文字列ですよ”

と言う書き方はエラーになる。

訳では無いのです。ここは開発環境の設定にもよりけりなのですが、デフォルトの設定である場合はVB.NET側が暗示的な理解を示しhogeを整数数値型から文字列型に変換してくれるのです。また、変数宣言を省く事も可能です。

Dim Ocha

一見シンプルで見やすい。と感じてしまうのですが、これはVB側が何を入れる器か判らない為にObject型と言う何でも入る便利な型の中にデータを格納する準備を行います。ただし、何でも入る便利な物だからこそリスクはついてくる物で、それだけメモリ消費が高くなり実行速度に問題が発生してしまいます。

また問題点として、暗示的な変数を多様すると偶然動作していた。と言う問題が発生した際に何がどうエラーであるかの追跡が難しくなってきます。上記の宣言の省略や暗示的な変数の変換等、一見便利ではありますが、これを利用する事無くプログラム作成の運用を行う事こそがVBとPHPの大きな違いとなってくる部分です。

• VB6から.NETに変わって大きく変わった点は

もともとC#やJavaでは標準であった例外処理が.NETFrameworkを通して利用出来る事になりました。

Try

Catch Exception

Finally

End Try

元々VB6まではon error goto～～と言う物は有ったが開発者が”意図的”に理解したエラーが発生した時のみの使い方が主流であった。その過去の遺物なのか、ラベルの概念が残っている。

例外処理：例外は基本的に“エラー”として利用する事が多いが事によっては、わざと例外を起こさせる事も多々見かけられる。

共通最終処理：データベースの切断や、他に影響を及ぼすアプリケーションクラスの開放等を意識的にコーディングする事が出来る。
（代表的な処理としては、不意のエラー等でSQLサーバとのトランザクションセッションが開いたままアプリケーションが終了してしまう事を防ぐ）

今回紹介しましたVBは、Webアプリケーションと違って明示的にデータを示す。と言う事が重要になってきます。これは、プロジェクトの規模が大きければ大きいほど他人に自分の意図が伝わる一つの手立てとして利用出来る物です。たかが変数名。されど変数名。そこからどういう意図を汲み取れるのか。と言う意識をするだけでも、変数一つに考える事は変ってくるのではないでしょうか。

Dojo Toolkitはjavascriptのフレームワークです。

趣味でzend frameworkの勉強をしているときに、Dojoに出会いました。

zend frameworkをFull Packageでインストールすると一緒に入っています。

最近はjavascriptのフレームワークといえば、jQueryが多く使われていますが、あえてDojoを使ってみたいと思います。。。

Dojo Toolkitの中身

Dojo Toolkitのフルパッケージには大きく分けて以下の3が入っています。

SDKの場合、大きく分けて以下の3つが入っています。

1. Dojo (Dojo Core)    Dojoの基本部分。イベント処理やajaxなどのライブラリ。   xmlやjsonを扱うライブラリ。
2. Dijit    ウィジェットをまとめたライブラリ。    （ウィジェットとはボタンなどのユーザーフォームを拡張したもの)
3. Dojox    グラフやグリッドなどの拡張ライブラリ。

以下からDojoの使い方について説明していきたいと思います。

(more…)

年末、ブログを更新が少し滞ったのでご心配をかけたかもしれませんが…
元気すぎてお仕事が山積みになり、社員一丸となって取り組んでおりました。

おかげさまで新しいメンバーも多数加わり、キモチも新たに2010年もゲンキ良くスタートを切っております。
本年もよろしくお願いいたします。

＜このブログは、エスキュービズムのエンジニア陣が担当制で更新しています＞

さて、では、僕はセキュリティ対策の話を…と考えていたのだけど、ウイルス対策の次にセキュリティの話だと盛り上がらないなぁと思い、全く別の話題を。

最近よく「あの、新しいグーグルの携帯買わないの？」と聞かれる。
グーグルの携帯といってもドコモから出ているAndroid携帯ではなく、アメリカで発売された Nexus One のことだ。

(more…)