">

キッズプレート、パスタおかわり

プログラミングやデジモノについてあれこれ
--.--.-- --:--|カテゴリ:スポンサー広告| コメント(-)

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2013.09.03 22:51|カテゴリ:Real Studio / REALbasicコメント(2)

[Xojo] たった4行! あっという間に作れる画像ビューワー


XojoDojo

※Windows版はこちらの内容では画像が表示されませんでした。動画をアップロードしましたのでそちらを参考にしてやってみてください。

 みなさまこんにちは。ニッチな道をひた走る XojoDojo の記念すべき第一回をお届けします。栄えある第一回のテーマは、

「たった4行! あっという間に作れる画像ビューワー」

 です。まあ4行で作るくらいなので過度な期待は禁物です。目指すのは、

「ウィンドウにファイルをドロップしたら画像が表示される」

 というシンプルなものです。Xojo を使えば労力的に Hello World くらいの負荷で出来ちゃいます。

 いろいろと文章で手順を書こうかと思ったのですがあまりにも面倒になったのでスクリーンキャストを作成しました。動画内でやっていることの手順は以下です。

1:Xojo を起動
2:プロジェクトファイルの作成(名前決めてOKクリック)
3:Window1にImageWellを配置
4:ImageWell1にOpenイベントを追加
5:ImageWell1のOpenイベントにコードを記入
  me.AcceptFileDrop("picture/*")
6:ImageWell1にDropObjectイベントを追加
7:ImageWell1のDropObjectイベントにコードを記入
  if obj.FolderItemAvailable then
    me.Image = Picture.Open(obj.FolderItem)
  end if
8:デバッグラン(実行ボタンをクリック)
9:表示されたアプリに画像ファイルをドロップ
10:画像が表示されることを確認

 記入するコードは手順5と7にある4行だけ。それでは皆様レッツトライ。

Windows版は上記手順でうまくいかなかったので、手順を動画でアップしておきます。まあ内容は簡単なので理解していただけるかと


XojoDojo ここがポイント!
「GUIは初めてなんだよね。そんなあなたに」
 スクリプトプログラミングを行ってきた人が初めて GUI アプリケーションを作る際に感じる違和感が、

「プログラムのスタートはどこなの?」

 というものです。DOS のバッチファイルや perl などに代表されるスクリプトプログラミングは先頭から順番に記述した命令が実行されていきます。まあ最近はそうでもないようですが基本的にはそんなもんです。書いた順番に実行されるシンプルな動きなので大変わかりやすいです。一方、Visual Studio や Eclips などでアプリケーション開発をしようとするとここでつまずきがちです。そう、

「処理のスタートがどこかイメージできずに気持ち悪い」

 ですです。起動して上手く動いてるけどなんだか気持ち悪いんですよね。ここはしっかりアプリケーションの起動イメージを頭に入れておくことにしましょう。

 GUIアプリを作る際に使われる IDE(総合開発環境)を使った開発ではソリューションやプロジェクトと呼ばれる単位でアプリケーションを開発します。しかしながら、これがまたひな形を作っただけでもファイルが沢山あって、

「一体、どこから何をすればいいの?」

 という状態になります。アプリケーションの動きがイメージできていないのでどこで何の処理をすればいいのかが掴めず、なんだかわかんない? となってしまうわけです。ただ動きさえ解ってしまえばこの違和感が払拭されて楽しく開発を進めることができます。

 今回紹介した動画では Xojo のプロジェクトにある「Appが一番最初に処理されますよ」と紹介させていただきました。Appとは言うなればアプリケーション本体です。アプリケーションを起動するとAppが生成されその中から他の処理が呼び出されます。デフォルトウィンドウを表示するというのもAppが生成されてから処理される一連の流れに含まれているわけです。今回のアプリケーションの流れとしては、

アプリケーションを実行
 →Appが生成される
  →AppからWindow1が生成される
   →Window1が表示されることでImageWell1のOpenイベントが発生
    →ImageWell1がOpenイベントでファイルドロップ可能であることを宣言(手順5のコード)

 となります。処理はいったんここで止まります。この止まった状態はアイドル状態と言われます。いわゆる「イベント待ち」という状態です。動画のなかでもイベント駆動型という言葉を使いましたがアプリケーションは一連の動きが終わるとイベント待ち状態になり、次に自分が動くべきイベントが発生するのをおとなしく待っている訳です。この状態でWindow1の中にあるImageWell1にファイルをドロップするとImageWell1の「DropObject」のイベントが発生します。

ImageWell1にファイルをドロップ
 →DropObject イベントが発生が発生
  →手順7のコードが実行されます
   ・objにFolderItem(ファイルやフォルダ)が入っているか?
   ・ドロップされたFolderItemを画像として開きImageWell1のイメージとして設定

 このイベントの処理でImageWell1に画像が表示され、再度アイドル状態へと移行します。ファイルをドロップする度にイベントが発生し、その都度処理が行われるわけです。

 このようにイベントをきっかけに「処理が動く=駆動」するので「イベント駆動型」と呼ばれるわけです。これは他の IDE で GUI アプリケーションを開発する際にもほぼ共通する考え方なのでしっかりと頭でイメージできるようにしましょう。
No title
私もwindows版を使って試してみましたが表示されませんでした。windows版の方法を投稿されるのを楽しみに待っています。
[ 2014/03/12 16:05 ] [ 編集 ]
Re: No title
>OKIさん
すみません! 何やらブログの設定が知らない間に変わっててコメントに気がついてませんでした。
せっかくコメントいただいたいのに申し訳ないです。
とりいそぎWindows版ではファイルタイムグループというのを追加する必要があります。
プロジェクトに挿入メニューからファイルタイプグループを追加してファイルタイプを追加し
表示名を「all」にします。そのごimagewellのopenイベントに追加するコードを、
me.AcceptFileDrop("all")
としてください。これで画像が表示されるはずです。
[ 2014/04/16 00:41 ] [ 編集 ]
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

ひらくん Author:ひらくん
どもども、ひらんくんどす。
日々まったり過ごしております。
仕事はDTP関連のスプリクト&アプリケーション開発。
Follow happyscript on Twitter

ブログ内検索



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。