Web システムのツボ

Adobe Edge のプレビュー版 を使ってみました

edge_title.jpg FlashからJavaScriptへ移行する動きが盛んになってきています。
そんな中2011年08月01日、AdobeからHTML5 デザインツール Adobe Edge の
プレビュー版が公開されました。

今回インストールする環境はWindowsです。
インストールするには、Windows Vista以上が最低限必要になります。
僕自身Flash案件を担当することが多かったのですが、
Adobe Edgeを使用してどのようなものが作れるのかを試してみました。

ダウンロード

Adobe Edge Preview版
※Adobe Edge Preview版をダウンロードするには、アカウント登録をする必要があります。

サンプル

まず始めに、「Adobe Labs」にサンプルがありますので、どのようなものが出来るかご覧ください。

1.Getting Jumpy
20110821_sample1.jpg

2.Sunshine and Sailing
20110821_sample2.jpg

3.Ferris Wheel and Roller Coaster
20110821_sample3.jpg

4.Solar System
20110821_sample4.jpg

5.Planet Earth
20110821_sample5.jpg

6.Time Clock
20110821_sample6.jpg

どれもパッと見た限りではFlashかJavascriptか見分けがつかない程の出来栄えです。
サンプル版とソースは下記からダウンロードできます。
Adobe Edge Preview Sample Files


Adobe Edge を使ってみた

早速プレビュー版をダウンロードして簡単なものを作ってみました。
今回作るものは、よくあるサイトトップの画像が切り替わるフラッシュと同じものです。

1.起動画面
起動するとこのような画面が立ち上がります。
edge_sample1.jpg

2.新しくプロジェクトを作成します
普段FlashはFlash CS4で制作を行っていますが、各操作方法は違和感なく使うことが出来ました。
現在はプレビュー版なので触れるプロパティに限りがありますが、それでも十分いいものが作れそうです。

・プロパティ
edge_sample3.jpg

・エレメント
edge_sample4.jpg

・タイムライン
edge_sample5.jpg


3.画像追加
今回は画像を切り替えるものを作るので、 [File]=>[Import]から画像をステージに追加します。
edge_sample6.jpg

4.イベント追加
一通り画像を配置し終わると、プロパティとタイムラインを操作してイベントを追加していきます。
イージングも一通り用意されており、細かく設定することが出来ます。
edge_sample7.jpg


5.完成

デモを見てみる
edge_201108221427.jpg

Flashを作るような感覚で、すごく楽に作ることが出来ました。
書き出したJSファイルも割りと整理されている印象を受けました。
これらのファイルを直接編集することも十分出来そうです。
Adobe Edgeの今後の動向に注目です。

ちなみに、HTML5なのでIEをどうするかは悩みどころですね。

(tsubasa)

システムニュース

Androidの指リストの強度を調べてみた

日本でもAndroidがiPhoneのシェアを抜いたらしいですが、確かに最近、Androidのスマートフォンをもってる人が増えてきましたね。
僕もケータイをAndroidに変更したのですが、「指リスト」というフリックで入力するタイプのパスワード方式が気になったので、すこし調べてみました。

chart.jpg

左がよくある従来の暗証番号方式で「ロックNo」といいます。右がフリックで入力する「指リスト」です。
◎の部分のポイントをつなげてできる一筆書きのような軌跡パターンがパスワードになります。

「お、かっこいい」と思って、使っているのですが、よく考えるとちょっと気になる点がでてきました。

まず、重複したポイントが選べません。
最初に選べる選択肢は9種ですが、次に選べる選択肢は8種、その次は7種というふうにどんどん減ります。

さらに、場所によっては次に選択できないポイントがあります。
例えば中心ポイントから始めた場合は、次に全ポイントを選ぶことができますが、左上ポイントから始めた場合は、次に右上・左下・右下のポイントは途中のポイントが邪魔になり選べません。
※途中のポイントがすでに選択されている場合は選べます。

「これって結構、選択肢がすくないんじゃないの?」と思って調べてみました。
とり合えず、書き出すとこんな感じです。(2手目まで)

pass.png


予想以上に数があったので、自力計算は断念してあとはプログラムに任せようと思います。
プログラムはPHPで書いてみました。→ パスワード数をカウントするプログラム

うまく動けば、389,112 という数字が表示されると思います。
これが指リストで使えるパスワードの総数です(4桁未満のものはパスワードとして使えないため省いています)。

これをグラフにしたものが下です。
比較のために従来の暗証番号方式を並べてみました。
※横軸はパスワードの桁数、縦軸は対数になっています

WS000062.JPG

グラフから指リスト5桁と番号方式4桁はほぼ同じレベル、ここからどんどん差が広がって、指リスト9桁にしても番号方式6桁より弱いことが分かります。
パスワードの強度を気にするのなら暗証番号方式が安心です。

(teruhisa)





続きを読む: Androidの指リストの強度を調べてみた
開発日誌

【AS3】物理エンジン「APE」と「Box2D」の比較

ActionScript3で使える2D物理エンジンについて紹介します。
物理エンジンとは、物体の動きをシミュレーションするためのソフトウェアで、ASでは主にライブラリとして提供されています。

中でも有名な2つの物理エンジンライブラリ、「APE」と「Box2D」について同様のサンプルを作成し、
簡単に比較をしてみたいと思います。

サンプルの仕様は、四角の図形と円をジョイントでつなぎ、円の部分でドラッグができる
というものにします。

サンプルflaファイルはこちら
■APE

■Box2D



ライブラリはそれぞれ以下のリンク先からダウンロードできます。
<APE>
http://www.cove.org/ape/

<Box2D>
http://sourceforge.net/projects/box2dflash/
※AS3用のライブラリは、正しくは「Box2DFlashAS3」なので、注意してください。


では、いくつかの項目に基づいて、比較をしていきます。
ぜひサンプルコードと照らし合わせながら、読んでいただければと思います。

続きを読む: 【AS3】物理エンジン「APE」と「Box2D」の比較
オープンソース紹介 Web システムのツボ

郵便番号APIを使った住所自動入力フォーム

今回は実際に郵便番号検索APIを使ったサンプルソースをご紹介します。使用する言語はPHPです。
メールフォーム等でよく使う、郵便番号から住所を自動入力してくれるように組んでいきます。
今回作成したソースはダウンロードできます。

ダウンロード:sample.zip

下記に、メイン関数の処理を記述します。
function main(){

	// 初期処理
	$inputData = getData();

	// 検索ボタン押された場合
	if(isset($inputData['search'])){

		//入力情報GET
		$inputData = getData();

		//入力内容チェック
		$error = check ($inputData);

		if ($error['flg']){
			//エラー表示
			disp($inputData,$error);
			return;
		}

		//郵便番号APIのURLを設定
	  	$url = 'http://zip.cgis.biz/xml/zip.php?zn='.$inputData['zipnum1'].$inputData['zipnum2'];

	    //郵便番号APIから入力された郵便番号の情報を取得
	    $xmlData  =file_get_contents($url);
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);

	    //取得データをセット
	    $setData = setData($addressData,$inputData);

	    //セットされたデータをチェック
	    $error = check($setData);

		if ($error['flg']){
			//エラー表示
			disp($setData,$error);
			return;
		}

		disp($setData);
	}else{
		disp($inputData);
	}

}
【ブラウザ表示】
API2.jpg

使用方法を説明させて頂きます。
入力項目の住所検索ボタンを押すと郵便番号APIを呼び出し、
取得したxmlファイルのデータを各入力項目に代入させています。
ブラウザ表示の処理はdisp関数で行っております。
disp関数の引数は郵便番号APIから取得したデータの配列で、htmlを生成させて表示しています。
また、郵便番号APIを使用する際の規約について、
画面のどこかにリンクを貼り付けることになっていますので、
今回は画面の下方に「利用しているAPI 郵便番号API」と表示させています。

郵便番号APIを呼び出す時は以下のようにしています。

//郵便番号APIのURLを設定
$url = "http://zip.cgis.biz/xml/zip.php?zn=".$inputData["zipnum1"].$inputData["zipnum2"];
//郵便番号APIから入力された郵便番号の情報を取得
$xmlData  =file_get_contents($url);

変数の「$inputData["zipnum1"]」や「$inputData["zipnum2"]」においては、getData関数で指定していります。
getData関数ではサーバーにpostで送信した郵便番号と各入力項目を配列で設定しています。
getData関数の配列のキーは以下の通りです。

設定フラグ:flg
郵便番号1:zipnum1
郵便番号2:zipnum2
都道府県:state
都道府県カナ:state_kana
市区町村:city
市区町村カナ:city_kana
住所:address
住所カナ:address_kana
番地:company
番地カナ:company_kana

取得したxmlファイルのデータを配列に置き換えている処理は以下のソースで処理しています。
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);
	    //取得データをセット
	    $setData = setData($addressData);
上記のsetData関数で取得したxmlファイルを各データに配列でセットしています。
入力された郵便番号のデータがない場合、setData関数で設定フラグを「false」にし、check関数でエラーを表示するように設定しています。
郵便番号setData関数の内訳は以下の通りになります。

設定フラグ:flg
郵便番号1:zipnum1
郵便番号2:zipnum2
都道府県:state
都道府県カナ:state_kana
市区町村:city
市区町村カナ:city_kana
住所:address
住所カナ:address_kana
番地:company
番地カナ:company_kana

check関数では、以下のチェック処理をしております。

データの有無:入力された郵便番号のデータチェック
郵便番号1:郵便番号桁数チェック(3桁)+数字チェック
郵便番号2:郵便番号桁数チェック(4桁)+数字チェック

上記チェック処理に当てはまった場合はエラーメッセージを表示するようにしております。
ダウンロードして頂いて、試しに使っていただいたら非常に嬉しい限りです。

参照URL
郵便番号API:郵便番号APIのページへ
XML処理:WEBシステム開発の情報サイト


(kozo)
開発日誌

PHPでmt_randを使用して乱数を作ってみる

PHPで乱数を生成するときに、mt_rand()関数で乱数を作る場面があると思いますが、

連続で同じ数字が出てきて何か嫌だ!

でも綺麗に乱数が生成されてるから、まっいっか!

って事はないでしょうか?

筆者はたまに思ったりします!

しかし、乱数生成時に同じ数字の重複は避けたい!っていう場面が出てくると思います。

そこで、かんたんに同じ数字が重複しない乱数の生成方法を紹介したいと思います。


まず単純に0から9の数字で10桁の乱数を作るスクリプトです。

for($i = 0; $i < 10; ++$i){
	$num = mt_rand(0,9);
	$ransu .= $num;	
}

結果:9838260512

 

8と2が重複してしまいました。


下記の様にすると、同じ数字が重複しない乱数の生成ができます。


$suji = '0123456789';
for ($i = 0; $i < 10; ++$i) {
	$len = mb_strlen($suji);
	$j = mt_rand(0,$len-1);
	$num = $suji[$j];
	$ransu .= $num;
	//1度で出た数字は対象外にする
	$suji = str_replace($num,"",$suji);
}

結果:5673108942

 

 1つも同じ重複する数字がでてこないですね(b^-゜)


ポイントは1度出た数字は次のループでは使わない。
という所です。

この考えを元に上手く利用すれば、精度の高いランダム処理が実現できると思います。


例えば複数のバナー画像をランダム表示させる仕組みで、
偏りなく全ての画像を平均的になるように表示したい場合、


1度表示した画像は、他の画像が表示されるまで表示させない!

という方法をとれば実現できると思います。


ちなみに、同じ数字を使用しない乱数を生成したい場合は、 「shuffle」関数でも実現が可能です。
$array = range(0,9);
shuffle($array);

結果:4093752186

こちらの方がお手軽ですね。

この記事がみなさんの制作するプログラミングのヒントにでもなれば幸いです。



(hirohito)
Web システムのツボ

Flash CS4でフォントを変更してコードを見やすくする方法

Flash CS4 でデフォルトのスクリプトフォントは、「MS UI Gothic」となっています(Windows)。
このフォントは等幅ではないので、コードが見づらくなります。


例えば、エディタで綺麗に記述していたコードをCS4に貼り付けた場合、
整列がばらばらになったりします。

そこで、環境設定でフォントを変えるとこのような問題はなくなります。


1.メニューバーの「編集」=>「環境設定」を選択
20110322_01.jpg


2.カテゴリ「ActionScript」のフォントを「_等幅」に変更
20110322_02.jpg


これで、整列されたコードを記述できます。


デフォルトの「MS UI Gothic」フォントの場合
20110322_03.jpg

「_等幅」に変更した場合
20110322_04.jpg


デフォルトのままだと、カンマやドットといった文字を見落としてしまう場合があるので、

変更しておくことをオススメします。


(tsubasa)

開発日誌

JavaScriptを使ってサイトにQRコードを貼ってみる

PCサイトからモバイル向けサイトへ誘導したい事がよくありますが、そんな時はやはりQRコードが利便性が高いですね。
(※QRコードは(株)デンソーウェーブの登録商標です)


今回はQRコードのAPIをJavaScriptを使って使用する方法を紹介します。
今回作ったものはこちらからダウンロードできます。

サンプルダウンロード:sample5.zip


普通QRコードをサイトに貼りたい時、「QRコード作成サイト」などでQRコード画像を作成してサイトに貼りますが、ページ数が多いととても面倒です。
そんな面倒なことはJavaScriptにやらせてしまいましょう!!


QRコードのAPIは Google Chart Tools を使用します。(Google Chart Toolsの詳しい使い方
このAPIはgoogleのAPIサーバーにリクエストをおこなうとQRコード画像を作成してくれる仕組みになっています。
動的にQRコードを生成するには タグのsrcにAPIリクエストをを設置して使います。


それでは試しに「WebシステムのツボURL」のQRコードを生成してみましょう。
APIリクエストの変数chl に"Webシステムのツボ"のURL(http://lab.gpol.co.jp/tsubo/)を設定してみます。

<img src="https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://lab.gpol.co.jp/tsubo/" width="150" height="150" />

 ↓ このHTMLは下のように表示されます



ケータイのQRリーダー機能で確認してみましょう。

うまく表示されました!


それではこのchl の部分をJavaScriptを使って、自動で現在のURL になるように変更します。

<script type="text/javascript">
//<![CDATA[
(function(text, width, height)
	{
		document.write('<img src="https://chart.googleapis.com/chart?cht=qr&amp;chs=' + width + 'x' + height + '&amp;chl=' + text.split('&').join('%26') + '" width="' + width + '" height="' + height + '" alt="QR" />');
	})(document.URL, 150, 150);
//]]>
</script>


実際にこのコードを使用してみました。 ↓

これでモバイル向けサイトへのリンクが簡単におこなえますね。

(teruhisa)

開発日誌

AS3 ランダムに配置したSpriteオブジェクトを整列させる

ActionScript3.0で、ステージ上にランダムに矩形を生成し、その後均一に整列させるコードを紹介したいと思います。
なお、Tweenライブラリの「Tweener」を利用しているため、Tweenerについても簡単に紹介します。
今回使用するソースコード(flaファイル)はこちらからダウンロードできます。→sample_sprite.zip

【サンプル】

【ソースコード】
import caurina.transitions.Tweener;

//画面に表示する矩形の数
var N:int = 300;

//矩形にTween処理を割当て
for (var i = 0 ; i < N ; i++ ){
 Tweener.addTween(
  createSprite(),
   {
    x: (i + 1) * 25 - (500 * int(i/20)),
    y: ( int(i/20) + 1 ) * 25,
    rotation: 180,
    time: 5,
    transition: 'easeInOutQuint'
   }
 );
}

//矩形を生成して画面に配置 
function createSprite():Sprite{
 var size:int = 25; //矩形の1辺の長さ
 var mySprite:Sprite = new Sprite();
 mySprite.graphics.beginFill( Math.floor( Math.random() * 0xFFFFFF ) + 1 );
 mySprite.graphics.drawRect(-size/2, -size/2, size, size);
 addChild(mySprite);

 //ステージサイズ 550x400
 mySprite.x = Math.floor( Math.random() * 1100 ) + 1 -275;
 mySprite.y = Math.floor( Math.random() * 800 ) + 1 -200;
 return mySprite;
}

【解説】
1.Tweenerについて
Tweenerとは、ムービークリップなどに簡単にトゥイーン処理を割り当てられる、
オープンソースのライブラリです。

以下のサイトでライブラリが配布されていますので、そちらからダウンロードします。
http://code.google.com/p/tweener/
※「Downloads」から、使用するASのバージョンに合ったものをダウンロードして下さい。
 AS2版とAS3版があります。

ダウンロードしたzipフォルダを解凍して出てきたcaurinaフォルダを
そのままflaファイルと同じディレクトリに配置します。

これで、Tweenerを使用する準備は完了です。
スクリプトに、
import caurina.transitions.Tweener;
を記載すれば使うことが出来ます。

なお、TweenerはMITライセンスなので、無償で使用できます。
MITライセンスについては、以下をご参照ください。
http://code.google.com/p/tweener/wiki/License(Tweenerのライセンスについての記述)
http://www.opensource.org/licenses/mit-license.php(MITライセンスの原文)
http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license(日本語参考訳)

2.ソースコードの解説
矩形を生成する関数を作り、Spriteを返すようにしています。
この関数をTweener.addTweenの第一引数で呼び出すことで、 生成した矩形にTween処理を割り当てることができます。
addTweenメソッドで、トゥイーン後の座標を指定することで、 ランダムに配置した矩形を、指定の位置に整列させています。

※通常、Spriteオブジェクトを動的に生成する場合、以下のようなコードになると思います。
//オブジェクトを生成
var mySprite:Sprite = new Sprite();
//矩形の色
mySprite.graphics.beginFill( Math.floor( Math.random() * 0xFFFFFF ) + 1 );	
//矩形の範囲
mySprite.graphics.drawRect(-25/2, -25/2, 25, 25);	
//矩形の座標(ランダムに配置)
mySprite.x = Math.floor( Math.random() * 1100 ) + 1 -275;	
mySprite.y = Math.floor( Math.random() * 800 ) + 1 -200;
//ステージに配置
addChild(mySprite);

ただし大量にSpriteを生成したい場合、上記のコードをSpriteの数だけ書いてしまうと
とても長いスクリプトになってしまいます。
そのため、関数としてまとめて記述しています。

関数内でaddChildしただけでは、インスタンス名が無い状態なので、
Tweener.addTweenメソッドで指定することができません。
そのため、インスタンス名をつけなくてもSpriteオブジェクトを指定できるよう、
関数の戻り値をSpriteオブジェクトにしています。

(kenta)
オープンソース紹介

郵便番号検索APIの紹介

郵便番号を基にした住所は全国に何千件・何万件とあり、全国の郵便番号を検索するとなると非常に膨大な量の住所や都道府県を登録しないといけなくなります。この膨大な量を登録しないで、使えるAPIがあります。それが郵便番号検索APIです。

郵便番号検索API:http://zip.cgis.biz/

APIの機能について

・日本郵政社に登録されている住所情報を検索。
・検索方法は郵便番号をGET方式でサーバーに送信し、当てはまった情報をCSVファイルかXMLファイルで出力。
・データベースの情報は、毎月10日のAM3:00に日本郵政社からダウンロード出来るデータを基に更新されています。

使い方

下記のように「zn=」の後に検索したい郵便番号を入力してアクセスするとXMLデータ・CSVデータで扱えます。

URL(XML)
http://zip.cgis.biz/xml/zip.php?zn=○○

URL(CSV)
http://zip.cgis.biz/csv/zip.php?zn=○○

但し、このAPIは無料ですがリンクウェアである為、必ず利用規約を守ってご使用ください。
利用規約につきましては、このページの最後にございますリンクをクリックして参照してください。

例として、大阪駅の郵便番号「5300001」を入力してみます。
入力方法は以下のとおりです。

・XMLデータ

http://zip.cgis.biz/xml/zip.php?zn=5300001

・CSVデータ

http://zip.cgis.biz/csv/zip.php?zn=5300001

取り扱えるXMLデータは下記になります。

・state_kana(都道府県カナ)
・city_kana(市区町村カナ)
・address_kana(住所カナ)
・company_kana(事業所名カナ)
・state(都道府県)
・city(市区町村)
・address(住所)
・company(事業所名)

次回には実際に郵便番号検索APIを使ったサンプルソースを紹介します。

利用規約についてはこちら:利用規約ページへ


(kozo)
続きを読む: 郵便番号検索APIの紹介
Web システムのツボ

PHPの画像リサイズを、配布されているクラスで実現してみよう(PHP5+GDライブラリ必須)

ブログ等でよく紹介されているクラスですが、
細かい解説サイトなどがなかったので、こちらで紹介してみようと思います。
(誤りや訂正等ございましたら情報をお寄せ下さい)


今回使用してみるクラスはこちらです。

【PHP Image Resezer Class】
http://www.milaju.com/post/php-image-resizer-class

PHP+GDライブラリを使用し、画像変換の処理をかんたんに行ってくれるクラスです。


上記サイトから圧縮ファイルをダウンロードし、
解凍をすると下記のようなディレクトリ構成になっています。

 

ディレクトリ構成.gif


index.phpを開いてみましょう。


下記のPHPスクリプトに注目です。

 

index_php.gif


上から順に見てみますと、
最初にクラスファイルを読み込み、
その後に「$imgSizer->」で画像リサイズの詳細設定をしています。


各項目設定の内容を下記に簡単にご紹介します。


$imgSizer->type = "width";
画像をリサイズする縦横の基本設定を行います。
設定できるタイプは、「width」と「height」です。


$imgSizer->max = 100;
リサイズするピクセルサイズを指定します。
$imgSizer->type = "width"の場合、幅が100ピクセル
"height"の場合は高さが100ピクセルになります。


$imgSizer->quality = 8;
画質の調整が行えます。
1〜10までの設定が可能です。
数字が高ければ画質が高くなります。


$imgSizer->square    = true;
画像のリサイズ方法に関する設定です。
設定できる値は、「true」と「false」です。
true:画像の中心を基本とし、正方形で画像をリサイズする。
false:縦横の比率を維持してリサイズする。


$imgSizer->prefix    = "sml_";
リサイズした画像名の先頭に付加する名称を指定できます。
例:元画像が「test.jpg」→リサイズ後「sml_test.jpg」


$imgSizer->folder    = "_sized/";
リサイズした画像を保存するディレクトリを指定します。
デフォルトでは、リサイズ元の画像と同階層のディレクトリにフォルダが作成されます。


以上が基本の設定になります。


そして、最後にリサイズ元の画像を設定します。
$imgSizer->image     = "/PHP_ImageSizer/images/test.jpg";
デフォルトの状態では画像のパス指定は、ルートパス指定になります。


各設定が完了しましたら、
$imgSizer->resize()」を実行します。


実行後は、リサイズされた画像のパスが返ってきます。
この値を、「<img>」タグに設定すると画像が表示できます。


PHPの記述最後の部分は、画像を配列変数に登録し、
それぞれ画像のリサイズ処理をして出力している。
というスクリプトになります。


次にclassファイルの方も少し見てみましょう。

下記の部分ですが、


resize実行.gif


この記述により「index.php」で設定した項目を、
分解・結合等を行い、最後に画像リサイズ処理を行っています。


$_SERVER['DOCUMENT_ROOT']で、パス指定を行っていますので、
ドキュメントルートの指定を外したい場合は、
この部分を修正し、カスタマイズ等を行うと、
自分の仕様で画像処理スクリプトを作成する事が可能です。


簡単な説明になりましたが以上になります。


今回紹介させて頂きましたクラス以外にも、
画像リサイズ処理は数多く配布されていると思いますので、
いろいろ試してみて、自分にあったスクリプトを見つけるのもいいかもしれないです。

その他のライブラリ
Image Resizing Made Easy with PHP 
target="_blank"Icebeat | class.image

 

 (hirohito)

New Entries
1  2  3  4  5

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive