AppInventor ファイルの呼び出しについて

1,892 views
Skip to first unread message

OneHoney

unread,
Aug 23, 2011, 12:59:52 AM8/23/11
to 日本App Inventorユーザー会
はじめまして。最近、AppInventorをはじめたばかりのOneHoneyと申します。
実は今、AppInventorを使ってアプリを作っているのですが、どうしてもつまづいているところがございます。
どなたかお分かりになられる方がいらっしゃいましたらご教授いただけませんでしょうか。

[制作しているアプリ]
1、カメラ起動してcanvasに撮影した画像を背景表示
2、ListPickerで項目選択
3、選択したらcanvas上にハードのフォルダにあらかじめ入れてある画像を表示
4、canvas上にファイル画像を一枚ずつ表示して横スクロールし、選んだ画像と背景画像と合成したものを保存したい

[つまづいているところ]
3、の箇所です。
リスト選択した後→ハードから対応するフォルダ内画像を一覧で呼び出し→canvasに表示(撮影した背景画像は消さずにその上に表示させたい)(呼び
出した画像一覧は横スクロールで一枚ずつ見たい)
[ListPicker1.AfterPickng] に [if-then-do-test] にそれぞれリスト表示するまではできているのです
が、その下の項目にどのブロックを入れたらいいのか分かりません。

お分かりになられる方がいらっしゃいましたら是非ご教授お願い申し上げます。


K.K

unread,
Aug 23, 2011, 10:16:58 AM8/23/11
to app-inv...@googlegroups.com
OneHoneyさん

こんばんはk_tunedです、ようこそAppInventorの世界へ(笑

さておき、質問は撮影した写真をプリクラみたいに装飾して、画像ファイルで保存するアプリなイメージでよろしかったでしょうか?

それならば、合成させる写真(撮影したものではないほう)をImageSpriteを使って表示させれば解決できるかもできません。

サンプルを作成しましたので、ご参考いただければ幸いです。

サンプルアプリ(apkファイル。内容:撮影した画像を背景にして、リストから絵を選び、2つを合成したものを表示する。保存を押すと/sdcardにdemophoto.jpgとして合成画像を保存する)
http://www.rairaiken.org/andro/fileopenpaint.apk

ソースファイル(zipをprojects→moreaction→uploadから上げてください)
http://www.rairaiken.org/andro/fileopenpaint.zip


k_tuned
株式会社来々軒 http://www.rairaiken.org

OneHoney

unread,
Aug 24, 2011, 12:43:09 AM8/24/11
to 日本App Inventorユーザー会
k_tuned 様

わざわざお時間を割いて、お返事いただきありがとうございます。OneHoneyです。
先ほど投稿したのですがなぜか表示されませんでしたので、再度送信してみます。

サンプルファイル制作いただきありがとうございました。勉強になります。
サンプルをいただいたおかげで少し分かるようになってきました。

ところで質問があります。
ImageSpriteでは、表示できる画像が一枚だけに限られるのでしょうか?

例えば [ListPicker] から [りんご]を選択→[指定フォルダに保存してある画像(.png)を全て呼び出してcanvasに表
示]→[背景画像の上に呼び出した画像を表示させて手で横スクロールさせて画像を選択]→[合わせて気に入った画像をcanvasごと保存] させたい
のです。
呼び出す画像を重ねるイメージは、スマホのアルバムとか撮影した写真を一枚ずつ見る感覚です。
その感覚で背景画像は固定、呼び出した画像は横スクロールで重ねて見たい。という感じです。

説明が解りずらくて申し訳ございません・・・。
アプリ制作初心者で、k_tunedさんのページを参考に勉強させていただいております。
AppInventor教室があったら是非参加させていただきたいくらいです。

お時間ご都合の良い時がありましたらご教授お願いできればと思います。

OneHoney


K.K

unread,
Aug 24, 2011, 10:26:58 AM8/24/11
to app-inv...@googlegroups.com
OneHoneyさま

こんばんは、今日は早く帰宅できたので質問の件回答します。長文すみません。

> ところで質問があります。
> ImageSpriteでは、表示できる画像が一枚だけに限られるのでしょうか?

1つのImageSpriteで1枚のみ設定可能です。もし複数枚置きたいならば、複数のImageSprite Compomentsを置けばOKです。

> 例えば [ListPicker] から [りんご]を選択→[指定フォルダに保存してある画像(.png)を全て呼び出してcanvasに表
> 示]→[背景画像の上に呼び出した画像を表示させて手で横スクロールさせて画像を選択]→[合わせて気に入った画像をcanvasごと保存] させたい
> のです。
> 呼び出す画像を重ねるイメージは、スマホのアルバムとか撮影した写真を一枚ずつ見る感覚です。
> その感覚で背景画像は固定、呼び出した画像は横スクロールで重ねて見たい。という感じです。

ということは合成させる写真は端末のデータフォルダから参照させるような感じでしょうか。
それならばImagePicker(Mediaより) Compomentsを使用すれば良いです。
使用すると、データフォルダ内の写真一覧から選択するメニューが出てきます。

>となると、TinyDBのようなものを使った方が良いのでしょうか。TinyDBは画像の保存や呼び出しができるのか不明ですが・・・。
>そもそもTinyDBだってどう扱えば良いのか途方に暮れています。

もし、再度アプリを開いたときに合成させた写真の情報を読み込みたい時に有効かと思います、今回の希望されるアプリには不要かな??(imagePickerで選択したときに、TinyDBへ写真情報を保存。起動したときにTinyDBに記録した写真情報を読み込むような感じ…)

一応、ブログに簡単にやりかたがありますのでご参考ください。
http://www.rairaiken.org/?p=678
TinyDBが使えるようになりますと、自由度がかなりあがりますね(私も覚えるまで苦労しました…)

ソースファイルだけですが、ImagePickerをを追加しました。ご参考にしてください。
http://www.rairaiken.org/andro/fileopenpaint(2).zip

以上 わかりにくいかもしれませんが、お役に立てば幸いです^^

k_tuned

OneHoney

unread,
Aug 25, 2011, 1:47:51 AM8/25/11
to 日本App Inventorユーザー会
k_tuned 様

詳しくご説明いただきありがとうございます。
早速ソースファイルを参考にしましたら一歩前進しました!
ブロックの意味もいまいち解らない私ですが、ご教授いただきましたおかげで少しずつ作れるようになってきました。

ファイルを一覧で取得してフリックして選択する作業はちょっと難しくてブロックが積めませんでした・・・(汗

ところで、image(jpgとかpng)をcanvasに置いたときにピンチイン・ピンチアウトと画像を自由に動かすイベントは
AppInventorでは可能なのでしょうか?
もし可能なようでしたらご教授いただけますと幸いです。

毎度質問ばかりですみません。
お時間のある時に・・・よろしくお願い申し上げます。

OneHoney

K.K

unread,
Aug 26, 2011, 12:41:00 PM8/26/11
to app-inv...@googlegroups.com
OneHoneyさん

こんばんは、おっ!一歩前進ですか良かったです。

>ところで、image(jpgとかpng)をcanvasに置いたときにピンチイン・ピンチアウトと画像を自由に動かすイベントは
>AppInventorでは可能なのでしょうか?

ピンチイン・ピンチアウトは残念ながら使えないようです。
画像を自由に動かすのであれば、例としてImageSpriteの写真をドラッグした場所に動かすことが可能です。
動かしたいImageSpriteのBlocksから******.Draggedを選んで、その下に*****.moveto
のブロックを置けば動かせるようになります。
置き方はブロックの写真をみていただけるのが一番わかりやすいと思います。

以上 です。

k_tuned

desk.jpg

OneHoney

unread,
Aug 28, 2011, 12:16:58 AM8/28/11
to 日本App Inventorユーザー会
k_tuned 様


こんにちは。
やはりピンチイン・ピンチアウトはできないんですね・・・。
しかし、上に重ねた画像は動きました!
ありがとうございました。

結局、上に重ねる画像は一覧で呼び出して重ねながらフリックして選択するというのは無理そうなので、
画像をタップしたら次の画像に変わるという手法を取ってみようかと思っています。

Listpickerで選択→ImagePickerで画像一枚呼び出し→その画像をタップしたら次の画像に変わる→何枚か同じことを繰り返す

通常ならばimageブロックだったら可能だと思うのですが、ImageSpriteで呼び出した画像をタップしたら次の画像に変えられることはできる
のでしょうか?


OneHoney

K.K

unread,
Aug 28, 2011, 8:29:42 AM8/28/11
to app-inv...@googlegroups.com
OneHoneyさん

>通常ならばimageブロックだったら可能だと思うのですが、ImageSpriteで呼び出した画像をタップしたら次の画像に変えられることはできる
>のでしょうか?
>Listpickerで選択→ImagePickerで画像一枚呼び出し→その画像をタップしたら次の画像に変わる→何枚か同じことを繰り返す

次の画像ではなく、画像を押せば毎回ImagePickerを開く動作設定は可能です。

ImageSpritesのBlocksにTouched(押した時の反応)がありますので、Touchedの中にImagePicker1.Openを引っ張ってくれば、ImageSpritesの画像を押した時に、ImagePickerを読み出すことができます。

こんな感じでよろしかったでしょうか。

k_tuned

OneHoney

unread,
Aug 28, 2011, 8:47:11 PM8/28/11
to 日本App Inventorユーザー会
k_tuned 様

できました!今のところTouchedで写真が変わる動作ができました。
今後はもう少し多く画像が変わるように頑張って考えてみたいと思います。
やっとゴールが見えてきました。
k_tuned様のおかげで、何とか最後までアプリが作れそうです。
本当にありがとうございました。

OneHoney

zen amako

unread,
Aug 28, 2012, 12:01:08 AM8/28/12
to app-inv...@googlegroups.com

k_tuned 様
最近App Inventorを使い始めたましてプログラムは未経験のものです
話題とはずれますがここでご提示されているドラッグに関連して質問です
バイクのスプライトをドラッグしキャンバスの中をぐるぐる走らせたいのですが

この方法でドラッグ移動はできたのですが画像が進行方向に向けられません
Rotates にチェックを入れて有れば向くのかと思ったのですが Heading 0に向いたままです
別途 Heading の値を定義して回転させると回転できましたがそれではRotates な何なのかわかりませんし
角度をすべて定義するのはとても大変なのですが他に良い方法はないでしょうか?
ご教授いただければ幸いです

2011年8月27日土曜日 1時41分00秒 UTC+9 k_tuned:

K.K

unread,
Aug 28, 2012, 11:02:44 AM8/28/12
to app-inv...@googlegroups.com
Zenさん

こんばんは、私ご指名ですか(^^)
実は久しぶりにAppInventorを起動したため、これといった解決法はまだ確認できてません。
現時点で確認できたことをお伝えします。ご参考になれば幸いです。

>Rotates にチェックを入れて有れば向くのかと思ったのですが Heading 0に向いたままです
>別途 Heading の値を定義して回転させると回転できましたがそれではRotates な何なのかわかりませんし

まずRotateの定義は、回転させるかしないかを決めるところなので、ONにしても値が入っていないため何も起きません。
Headingから角度を設定して動かすしかないです。

詳細は添付画像をご覧いただければと思いまして、
ImageSprite.Draggedの中に、
ImageSprite.Headingを定義して、Dragged作成時にできた変数をHeading内に入れたらなんとなくそれっぽい動きをしました。

変数を色々選んでみたら、希望に近い動きが見つかるかもしれません。一度お試しください。


k_tuned


2012年8月28日 13:01 zen amako <hiro....@gmail.com>:

--
このメールは Google グループのグループ「日本App Inventorユーザー会」の登録者に送られています。
このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/app-inventor-jp/-/w_73crQAFRQJ にアクセスしてください。

このグループに投稿するには、app-inv...@googlegroups.com にメールを送信してください。
このグループから退会するには、app-inventor-...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/app-inventor-jp?hl=ja からこのグループにアクセスしてください。

sc.jpg

zen amako

unread,
Aug 28, 2012, 9:09:13 PM8/28/12
to app-inv...@googlegroups.com
k_tuned様

すみません
こういう場でお名前呼ぶべきではないですね
失礼いたしました。申し訳ございません。

にも関わらずご丁寧な回答ありがとうございます
取り急ぎお詫びとお礼をさせていただきます。

スクリーンショット参考にさせていただきまたトライしてみます
ありがとうございました。


2012年8月29日水曜日 0時02分46秒 UTC+9 k_tuned:

このグループに投稿するには、app-inv...@googlegroups.com にメールを送信してください。
このグループから退会するには、app-inventor-jp+unsubscribe@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/app-inventor-jp?hl=ja からこのグループにアクセスしてください。

zen amako

unread,
Aug 30, 2012, 9:19:15 AM8/30/12
to app-inv...@googlegroups.com
k_tuned 様
おかげさまでできました
ATAN2で角度を計算しています
ドラッグした方向にスプライトの向きを変えて動かせました
三角関数とか苦手なのでなんでこれで動くのか謎です、、、(;´・ω・`)


2012年8月29日水曜日 0時02分46秒 UTC+9 k_tuned:

このグループに投稿するには、app-inv...@googlegroups.com にメールを送信してください。
このグループから退会するには、app-inventor-jp+unsubscribe@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/app-inventor-jp?hl=ja からこのグループにアクセスしてください。

ドラッグ追随.jpg

K.K

unread,
Aug 30, 2012, 9:54:04 AM8/30/12
to app-inv...@googlegroups.com
無事動いてよかったです。
あとは色々値を変えながらチューニングですね。

2012年8月30日 22:19 zen amako <hiro....@gmail.com>:
このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/app-inventor-jp/-/zwQ-229poHsJ にアクセスしてください。

このグループに投稿するには、app-inv...@googlegroups.com にメールを送信してください。
このグループから退会するには、app-inventor-...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/app-inventor-jp?hl=ja からこのグループにアクセスしてください。

Reply all
Reply to author
Forward
0 new messages