2009年07月21日

リポマップバージョンアップのお知らせ

6月のデモサイトオープンからいくつかの箇所の変更、修正を行いましたので
お知らせいたします。

更新内容はアプリ、携帯電話専用ページ、PC専用ページの3つです。

■アプリ

・これからは「タイトル」「コメント」に加え、投稿物に「ジャンル」を登録することができます。
現在は9カテゴリ設定していますが、これからも皆様のご要望に沿ってカテゴリの追加、変更を随時行っていきます。

・動画、写真のサイズも機種に関係なく、画像投稿の場合は3〜4、
動画の場合は2〜3のサイズからから選べます。

・写真複数撮影時、写真クリックで個別に削除ができるようになりました。

・そのほかロゴの表示、各画面のレイアウト、アイコンなど見た目も向上し、
さらに使いやすくなりました。

■携帯電話専用ページ

・携帯電話専用ページからもジャンル検索が可能になりました。

・投稿された動画も携帯ページでご覧いただけます。

・検索結果表示時にGPSを使って位置が近い順に表示できるようになりました。

・そのほか各画面のレイアウトを大幅に変更し、使い易さも向上しました。

■PC専用ページ

・投稿されたデータのジャンルを元にデータをカテゴリで分けて表示するようになりました。

・携帯電話からのアカウント登録をされていない方も、ログイン画面から
デモユーザーとして編集画面を見れるようになりました。

・これからは投稿された動画がPCページでもご覧いただけます。

・マップ上のマーカーには、画像の場合1枚目の写真を縮尺画像を、
動画の場合は簡易gifアニメーションを使用しています。

・マーカーの吹き出し内の画像をクリックすると、その画像が登録された
実際のサイズでご覧いただけます。

・編集画面でも、画像をクリックすると実際のサイズでご覧いただけます。

・以前は新着5件のタイトル、投稿日時、コメントを表示していましたが、
今回は新たに画像のサムネイルを表示しました。

・ページ下部にあるメニューの「ご意見・ご要望」からご意見フォームのページがご覧になれます。
リポマップに関するご意見、ご要望はこちらのフォームからお送りください。

・ウェブページのレイアウトを始め、リポマップのロゴや、新着5件やニュースの
見出しを変更しました。レイアウトに関しましては、これからも皆様のご要望に
合わせて随時変更していく予定です。



リポマップ[RepoMap]は、携帯電話からリポートされた写真、動画をマップ上に表示する新感覚のコミュニケーションサイトです。
http://repomap.raxus.jp/

タグ:G raxus
posted by ラクサス at 21:34| Comment(0) | TrackBack(0) | お知らせ | このブログの読者になる | 更新情報をチェックする

2009年07月16日

第0x06回 お手軽ウィンドウ〜ダイアログ〜

Windowsでは、全てウィンドウによって成り立っていることは、
これまでにお話したとおりです。
しかし、各アプリケーションでウィンドウを出し、
中に色々描画をし、処理をするということを毎回書くのは大変です。

ほとんどのアプリケーションは、
ボタンを出し、ユーザにテキストなどを入力させ、処理をする。
こんな流れになっていると思います。
Windowsでは、これら定型のインターフェースをコモンコントロールとして
用意されています。
これらコモンコントロールが集合したウィンドウのことを、ダイアログと呼びます。

それでは早速、ダイアログを作成していきましょう。


(サンプル)
sample006.zip


まず、前回同様、プロジェクトにリソースを追加します。
今回作成するのはダイアログなので、「Dialog」を選択します。

win006_001.png

すると下のようにダイアログのフォームが出てきます。
初期状態では、「OK」ボタンと「キャンセル」ボタンのみが配置されています。

win006_002.png

ここで、ダイアログのプロパティをいくつか変更します。
Center   : ダイアログを中央に配置するか(ここでは「True」を指定)
Visible : 初期状態でダイアログを表示するか(ここでは「True」を指定)
Caption : タイトルバー文字列 (ここでは「オプション」を指定)

次にコントロールを追加します。
まず下のように「Static Text」を選択し、ダイアログの適当な場所に配置してください。
スタティックとは、文字列や画像などをダイアログに配置するコントロールです。
表示する文字列は「Caption」で変更することができます。

ちなみに、「Caption」とはウィンドウのタイトルのことなのですが、
コントロールでは、表示する文字列などに置き換わります。

win006_003.png

同様に、下のようにコントロールをいくつか配置します。
今回は、「Check Box」「Edit Control」「Group Box」を使用します。
見てわかるように、その他にも様々なコントロールが用意されているので、
アプリケーションの動作に応じて、適宜配置していきます。

win006_004.png

配置が終了したら、左上のボタンを押し、ダイアログの概観を確認します。
これで、インターフェースの実装が終わりました。
このリソースを元に、実際にプログラムに組み込んでいきます。


ところで、ダイアログにはモーダルダイアログモードレスダイアログ
2種類が存在します。
モーダルダイアログとは、ダイアログが表示されている間、他の操作ができなくなる
ダイアログのことです。
例えば、ファイルを選択するダイアログなどが、これにあたります。
モードレスダイアログでは、その反対で、ダイアログが表示されている間でも、
他の操作ができます。

今回は、オプションの設定ダイアログという想定で作るので、
設定中に、他の操作をされるのは困るので、モーダルダイアログで表示します。
モーダルダイアログを表示するには、次のようにします。
DialogBox( g_hInstance , (LPCWSTR)IDD_DIALOG1 , hWnd , DialogProc );
関数の引数は次のようになります。
第1引数:アプリケーションのインスタンスを指定
第2引数:表示するダイアログのリソース名を指定
第3引数:表示するダイアログの親ウィンドウを指定
第4引数:コールバック関数を指定

コールバック関数は次のように宣言します。
BOOL CALLBACK DialogProc( HWND hWnd , UINT uMsg , WPARAM wParam , LPARAM lParam );
基本的には、ウィンドウのコールバック関数と同様ですが、
戻り値がBOOLなことに注意してください。

DialogBox()関数でダイアログを呼び出し、
コールバック関数にダイアログに対するメッセージを処理するのが
基本的な流れになります。

今回は次のメッセージを処理します。
WM_INITDIALOG:ダイアログの初期化時に呼ばれるメッセージ
WM_COMMAND :メニュー(ボタン)が選択されたときのメッセージ
WM_INITDIALOGは、DialogBox()関数を呼び出したときに即時に呼ばれるメッセージです。
このメッセージに応答して、ダイアログの初期化を行います。
ここで、ダイアログの各アイテムの状態を設定したりします。

ダイアログに配置されているコントロールを操作するためには、
ハンドルを取得しなければなりません。
// ダイアログアイテムのハンドルを取得する
HWND hEdit = GetDlgItem( hWnd , IDC_EDIT1 );
HWND hCheck = GetDlgItem( hWnd , IDC_CHECK1 );
GetDlgItem関数を呼び出すことにより、コントロールのハンドルが取得できます。
コントロールの所有権はダイアログが持っているので、
このハンドルをReleaseする必要はありません。

エディットボックスの中に初期文字列を指定するには、
Captionの内容を変更する必要があります。
// エディットボックスにテキストを設定する
SetWindowText( hEdit , g_szName );
SetWindowText()関数は、ウィンドウのタイトルを変更する関数です。
この関数は、エディットボックスに限らず
「Static Text」や通常のウィンドウのタイトルを変更するのに使用します。

逆にエディットボックスの中の文字列を取得するには、
Captionの内容を取得する形になります。
// エディットボックスからテキストを取得する
GetWindowText( hEdit , g_szName , sizeof( g_szName ) );

同様にチェックボックスもハンドルを使い、
操作をするわけですが、実はチェックボックスに対する操作は、
Win32APIの関数としては用意されていません。
ほとんどのダイアログのコントロールに対する処理は、
関数を用いず、直接メッセージをコントロールに対して送ることによって対話します。

// チェックボックスを設定する
if( g_bCheckSound )
SendMessage( hCheck , BM_SETCHECK , (WPARAM)BST_CHECKED , 0 );
else
SendMessage( hCheck , BM_SETCHECK , (WPARAM)BST_UNCHECKED , 0 );
// チェックボックスを取得する
if( BST_CHECKED == SendMessage( hCheck , BM_GETCHECK , 0 , 0 ) )
g_bCheckSound = true;
else
g_bCheckSound = false;
SendMessage()関数は、メッセージを送る関数です。
第1引数:メッセージを送るウィンドウのハンドル
第2引数:送るメッセージ
第3引数:メッセージに関連するWPARAM
第4引数:メッセージに関連するLPARAM

チェックボックスには、次の2つのメッセージが用意されています。
BM_SETCHECK  チェックボックスを設定するメッセージ
 WPARAM:設定する値(BST_CHECKEDならチェック、BST_UNCHECKEDならチェック解除)
 LPARAM:特に使用しない

BM_GETCHECK  チェックボックスの状態を取得するメッセージ
 WPARAM:特に使用しない
 LPARAM:特に使用しない
 戻り値として、現在の状態が返ってくる

さて、通常のダイアログでは、「OK」ボタンが押されると状態が保存され、
「キャンセル」ボタンが押されると、状態が保存されないという作りになっています。
WM_COMMANDの中で、その処理を追加し、「OK」ボタンが押された場合のみ、
状態を保存するという作りにします。

そして、ダイアログを終了させるためには、次の関数を呼びます。(モーダルダイアログの場合)
// ダイアログを終了する
EndDialog( hWnd , 1 );
第2引数で指定した値は、そのままDialogBox()関数の戻り値となります。
ダイアログボックスの呼び出し元で、状態によって処理を分岐させる場合に
用いることになります。


今回は、ダイアログで設定した内容をグローバル変数に保存しました。
次回では、この設定の内容をファイルに保存するように改造してみます。
タグ:ふわ猫

2009年07月13日

リポマップ開発日記: マーカーに動きを出してみよう


     今ウェブにはGooglemapsを使ったサービスが多くあり、一般的にはそのサイトの

地図上に表示されたマーカーをクリックすると吹き出しが出てそのマーカーに含まれる

情報が表示されます。GooglemapsAPIに用意された関数を使えば簡単に地図上の

指定した場所にマーカーを表示する事ができ、デフォルトではよく見られるピン型の赤い

マーカーが表示されます。大抵の場合このデフォルトのマーカーでも十分なのですが、

指定すれば自分の好きな画像が使用できます。


     リポマップ開発初期の頃は3つの携帯アイコン画像を使い、携帯アプリで取得した

GPS位置情報を元に、その位置情報がどのくらい正確かを3段階で表現して、

3種類の画像を使い分けていました。この機能も実装するのにかなり苦労されたと

思うのですが、見て使われる方達には伝わりづらく扱いづらいのではないかという

声があったため、何か別の形、例えば鮮度で表現しようということになりました。


     鮮度別でマーカーを表示してほしいとの要望を受け、まず自分が考えたのが

絵的にどう表現するかでした。プログラムの方はただjavascriptで今日の日付と

投稿時間を比べているだけなのでそれほど難しくはありませんでしたが、

要望として見た目だけで新しい物が一目でわかるようにといわれたので

まず自分が考えたのが単純に色で表現する方法でした。

 

                                     keitai2.gif  newkeitai4.gif  newkeitai5.gif  newkeitai6.gif



2009年7月8日現在公開されているリポマップのマーカーは写真になっていますが、

6月のデモサイトオープン初期の頃はこれらのマーカーを使って鮮度で表していました。

基本的な部分ができてきたらボタン等でアイコン表示も切り替えられるようにする予定です。



     画像の見栄えは一旦さておき、これでも鮮度で表現していることは一応

わからないことはないかもしれませんが、今一つわかりにくいという指摘をもらい、

どうにかしようと考えた結果、新しい投稿物のマーカーに動きをつけて

表現しようと考えました。

 

     今googlemapsを使用しているサイトではほとんど静止画を使用していますが、

調べてみた所gifアニメーションも使用可能らしいです(ほかにも動きを表現する方法は

あるかもしれませんが)。本来googlemapsのマーカーには.png形式の画像ファイルが

推奨されているらしいですが、今回はgifアニメを作成するということで一枚一枚

パラパラ漫画の要領でドット絵を書いてみました。



                       keitai2.gif  glarekeitai3.gif  glarekeitai4.gif  glarekeitai5.gif  glarekeitai6.gif  glarekeitai7.gif  glarekeitai8.gif  glarekeitai9.gif  glarekeitai10.gif  glarekeitai11.gif  glarekeitai12.gif  glarekeitai13.gif  



絵が全て完成したら絵を繋げるgifアニメーション作成ソフトが必要です。

特別な仕様がなければフリーソフトでも十分ですので今回の場合適当なものを選びました。


Giam ダウンロードページ

http://homepage3.nifty.com/furumizo/giamd.htm


基本的な使い方としては、一枚ずつ絵を指定しながら、1コマにかける時間や、

ループの回数などのオプションを指定して、完成したら書き出していきます。

今回のように単純なアニメの場合それほど苦労もなく操作できました。



                                                         glarekeitaianimation4.gif



筆者はドット絵はほとんど打ったことがないのでこのように雑な動きに

なってしまいました。7月時点で公開されているサイトではこのアイコンは

没になってしまいましたが返ってよかったのかもしれませんね。


筆者とは違って画像編集の技術があれば見た目的にも目を引くマーカーができると

思います。ただリポマップは地図の方ではなくアプリの方がメインなのでマーカーの方

に注目しすぎてもらっても困るかもしれませんね。

タグ:G
posted by ラクサス at 10:03| Comment(0) | TrackBack(0) | システム開発 | このブログの読者になる | 更新情報をチェックする

2009年07月09日

閑話休題その2 64ビットCPU対応プログラミング

現在主流になっているCPUは、32/64bit両方に対応しているものが
多いと思います。
今後OSで、64bitCPU対応のものが主流になれば、自ずと32bitCPUは
廃れていくことになるでしょう。
Windowsのコンシューマ版でも、XPより64bit版が登場し、
WindowsVistaやWindows7でも32bit版、64bit版両方のバージョンが
発売されています。
今後、64bitCPUへの対応が避けては通れないものになるでしょう。
ここでは、64bitCPUに対応する上での注意点を挙げていきたいと思います。

そもそも32bitや64bitとは何を指しているのでしょうか?
これを説明するためには、CPUがどういった構造になっているのか
理解する必要があります。

CPUとは、Central Processing Unit(中央演算処理装置)の略で、
PCで発生する演算の一手を担います。

cpu_image.jpg

PCは、全てバイナリの命令群によって制御されています。
バイナリの命令は全てメモリに配置され、逐次的に実行しています。
バイナリにはそれぞれ番号に意味があり、インテルCPUでは
例えば加算を意味するADDは、0x04と定義され、
その後に加算する値が続きます。
上の図の例では、メモリの最初のアドレスで、0x04ときているので、
CPUは加算命令と判断します。
次の0x54をみて、実際に0x54を加算します。

このとき、CPUはレジスタという一時領域に計算結果を保存し
次の計算へとつなげます。
32bitCPUは、このレジスタのサイズが32bitで、
64bitCPUは、レジスタのサイズが64bitになります。

また、現在実行している命令の場所もレジスタに保存されます。
32bitCPUの時に、メモリが3GBちょいしか積めないという
問題の発端はここからきています。

これは、一度に(1命令で)計算できる幅が32bitに
限定されているということです。
仮に32bitのCPUで64bit同士の値の計算を行う場合、
まず、下位桁を計算し、次に上位桁を計算するといった
ことを行い、結果を出します。
64bitの方が高速と言われる理由は、この部分で、
64bit同士の計算が1命令で済んでしまうわけです。

ここまでは、アセンブラや機械語の話で、
C言語などの高級言語に置き換えると次のような影響をうけます。
32bitから64bitに移行した場合の、影響です。
@int型やlong型が32bitから64bitに拡張される(場合がある)
Aポインタが64bitに拡張される(場合がある)
B0xFFFFFFFFが[-1]にならない
Cアライメントが4バイトから8バイトに拡張される
DWin32APIなどの関数の一部で32bit対応のものと64bit対応のものを変更する
Eアセンブラのレジスタ、命令を書き換える

厳密にC言語の仕様を踏襲している人なら、
@などは問題にならないかと思いますが、
案外軽視しがちなのが、A〜Cあたりだと思います。
Aなどは、ポインタをintに代入するプログラムなどが
動かなくなる可能性があります。

ちなみにDは具体的には次の関数に影響がでます。
@SetWindowLong() → SetWindowLongPtr()
AGetWindowLong() → GetWindowLongPtr()


以上のことを考慮にいれてプログラムする必要があります。
タグ:ふわ猫

2009年07月07日

phpで画像ページを生成する方法

先日弊社がデモ・オープンしたwebサービス『リポマップ』では、
データベースに登録した写真や動画の出力をphpで生成しています。
今回はそのようなページの作り方について簡単に解説しようと思います。


html文書の中に画像を表示したいときは<img>タグのsrc=の後に
画像のアドレスを入れてもってくるわけですが、
その点はphpで出力する時も変わりません。例えば

<img src = "/gazou/seisei.php?num=53" />

のように書けば、/gazou/seisei.phpというphpファイルに
53という数字を渡して画像データを生成することになります。


seisei.phpの中身は

1 <?php

2 $num = $_GET['num'];
3 $image = getImageFromDb($num);

4 header("Content-Type: image/jpeg");
5 print $image;

6 ?>


のような構造になっています。2行目でnumに入っている数字を取り、
3行目でそれをgetImageFromDbという関数に渡してデータベースから
画像データを取ってくるという具合です。


この関数は元から用意されているものではなく、自前で作ることになりますが、
中身の実装は使っているデータベースやライブラリーによって色々なので、
ここでは説明を省略します。


取ってきたデータを画像として出力するポイントは、4行目のheader関数です。
これによって5行目で出力したデータが、
ブラウザにjpeg形式の画像ファイルとして解釈してもらえることになります。
このような、ヘッダーで指定するContent-TypeのことをMIMEタイプと言います。



ここで注意ですが、上のseisei.phpのデバッグ等をしていて、

print $num;
 

のような行があったとすると、
もうそれだけで何も出力されなくなってしまうことがあります。
これは、ヘッダーで jpeg と指定しているために、
文字列まで画像と解釈して壊れた画像を出力してしまうことが原因です。
テキストの出力なら問題がないので、単純な割に見つけにくいバグだと
思いますので注意してください(私は二度ハマりました)。



リポマップではムービーの投稿もできるのですが、
動画の出力では<img>タグは使えません。
代わりに以下のようなタグを使って張り付けます。

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
	<param name="src" value='/douga/seisei.php?num=78'>
	<EMBED src='/douga/seisei.php?num=78' autoplay="true"
controller="false" pluginspage="http://www.apple.com/quicktime/download/">
	</EMBED>
</object>


何かとおまじない的な部分が多いのですが、
読み込み先のアドレスは3、4行目の2カ所で、
あとは必要な宣言とオプションです。
オプションの種類はgoogle等で検索すると色々出てきます。
<EMBED>というタグはHTMLの規約には取り入れられていませんが、
IEなどで表示するときに必要になります。


seisei.phpの中身は基本的に画像の時と同様ですが、ヘッダーは


header('Content-Type: video/3gpp');


のように出力する形式に合わせて変わります(3gppはdocomo携帯対応の動画ファイル形式です)。

タグ:leopard
posted by ラクサス at 18:40| Comment(0) | TrackBack(0) | 【プログラミング】PHP編 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。