Vol de Nuit ~夜間飛行~

App Inventor2でアプリを作る中年オヤジの無謀な挑戦日記

Windows10への移行 ダウンロードに時間がかかる!!

Windows10への無料アップグレードが本日までですね。

アップデート後1か月間はWindows7へ戻せるらしいので、試しにアップグレードすることにしました。

しかし、田アイコンからのアップデートはダウンロードがなかなか始まらない・・・・・

2時間ほど待ってみたけど状況が変わらないので諦め、代わりに手動でダウンロードすることにしました。

Microsoftの公式ページへ行く

https://www.microsoft.com/ja-jp/software-download/windows10

で今すぐアップデートをクリック

●ダウンロードされた実行ファイルでWindows10をダウンロード開始!

1時間ほどで60%ダウンロードできてますが、回線が重いなぁ・・・・

今日中にアップデート終わるのか??

 

 

App Inventor2 でAndroidのアプリを作ってみる 9. Gifアニメを動かしたい(2)

懸案のGIFアニメを動かす件で、やってみたのがこちら。

f:id:spice_jp:20160523195847j:plain

GIFアニメを1枚づつに分解して(分解にはオンラインサイトツールを使用した)、それをクロックでぱらぱら漫画のようにAI2上で動作させているだけ。

最初に、ファイル番号をあらわす変数Bakuhatsuを初期化で0にセット。クロックが動くと、ImageSpriteのセットブロックset Expl Picture to にファイル名.gifを作ってセットし表示します。上図例では、”r33Mt4Yv-0.gif"になる訳ですね。

次に変数Bakuhatsuの値を1つ足して次のフレームのファイル名を作成する準備をします。この操作で、

r33Mt4Yv-0.gifからr33Mt4Yv-8.gifを表示させます。

次のifブロックは、もしファイルがr33Mt4Yv-8.gifまで表示されたら、変数Bakuhatsuを0にして、クロックをとめます。

これで爆発時の表示ができるようになりました。

ついでに今までボタンで、戦闘機の左右移動を行っていたのを、スマホらしくドラッグで移動できるようにし、射撃はタップでするように改造しました。

AI2のGalleryにShootingGameTestの名前でアップしてみました。

App Inventor2 でAndroidのアプリを作ってみる 9. Gifアニメを動かしたい

先日から試作しているシューティングゲームで、敵機に弾が当たったら爆発させてるんだけど、もっと派手に爆発エフェクトを使いたいと考えちゅう。

f:id:spice_jp:20160520020251g:plain ←こんなやつ

どうもアニメGIFをイメージとしてそのまま使用することはできない模様・・・・

さてどうすれば良いのか??

GIFを分解してClockで回せば良いのかなぁ・・

ブログのデザインをレスポンシブル設定にしてみた

PCとスマホでこのブログの表示が変わってしまうのが違和感があったので、やり方を調べてみた。

レスポンシブル設定にすると良いとのことだったので、はてな

管理画面→デザイン→スマホ設定→詳細設定→レスポンシブルデザインにチェック

を入れてから、

管理画面→デザイン→カスタマイズ→{デザインCSS}に

/* Responsive: yes */

 を追加した。

設定を保存したら、無事スマホでもPCと同じ画面に!!

でもちょっと見にくいかなぁ・・w

App Inventor2 でAndroidのアプリを作ってみる 8. ゲームを作ってみた

簡単なシューティングゲームを作ってみた。

まだ敵機からは何の攻撃も無いので面白くないけど、まぁ練習ということでw

f:id:spice_jp:20160518004150j:plain

AI2のGalleryに"Shooting Game Test"でアップしてみました。

AI2にはゲーム作るのに便利なブロックがあるのね!

これにスコア記録や効果音や爆発エフェクトなんかも追加していきたいなぁ

 

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる (8) 広告の追加方法

ここでは作成したアプリに広告を掲載する方法を記述します。

他のエキスパートの方のブログを見るといくつか広告を載せる方法を見つけることができますが、いずれも何故か私の場合うまくいきませんでした。

で、最終的に行き着いた方法は非常に単純な方法です。

広告は、忍者Admaxから配信されるようにあらかじめ無料のXdomainサーバー上に単純なhtmlを作成しておきます。

忍者AdmaxやXdomainサーバーの利用方法についてはググって設定しておいてください。

私が利用しているhtmlは以下のとおり。

------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" >
<title>Example 1</title>
</head>
<body>
<!-- admax -->
<script src="http://adm.shinobi.jp/s/fda9384ff3d6f65c6e49ea849c036a89"></script>
<!-- admax -->
</body>
</html>

--------------

 

利用するサーバーにindex.htmlでアップロードして、そのWebページのURLをAppInventor2のWebViewer

とSensorsの中にあるClockを使用することで広告を表示させることができます。

例えば広告用のURLが、

http://spice.html.xdomain.jp 

(サイズが320X50のスマホ用ですPCだと何も表示されません。)

だとすると下図のように、

f:id:spice_jp:20160517173947j:plain

WebViewerをアプリ下段に表示させるように配置して、HomeUrlに広告用のURLを設定します。

次にある一定の時間が経ったら新しい広告を表示させるために、Sensorの中にあるClockをドラッグ&ドロップしましょう。ClockのTimerIntervalを12000に設定すると12秒ごとに広告内容が切り替わるはずです。

f:id:spice_jp:20160517174528j:plain

次にBlocks画面へ行き、Clock1とWebViewerから下図ブロックを組みましょう。

f:id:spice_jp:20160517174653j:plain

これはClock1のTimerで指定時間が来れば(例では先ほど設定した12秒後)WebViewerで指定したURLを表示しなさいという意味です。

 

エミュレータでさっそく動作確認しましょう。

正常に動作しましたか?

表示テスト用に、AI2のGalleryにDentaku Simple Calculator with AD. をアップしてみました。

 

 

App Inventor2 でAndroidのアプリを作ってみる 7. 電卓を作ってみる (7) UI動作

では試作したDentakuの動作記述の各部分について記述します。

この例は、うちの中3の娘にプログラミングさせるための例ですし、私自身プログラマーでもなんでもないので、もっとよい構成方法があると思います。あしからず。

 ここはこういう風にしたほうが良いなどのコメントを頂ければ非常にうれしいです。

 

以下に従ってブロックを組み上げてみましょう。

1.変数の初期化

f:id:spice_jp:20160517152339j:plain

用意した変数は7個で、Initialize globalで初期化します。

各変数の意味

・Ope_P 以前押されたされた演算子

・Ope_C 現在の演算子

・NUM 押されたのは演算子? 演算子なら0、数値なら1

Answer 計算結果

・Keta  複数桁を作成する場合に使用する変数

・Value_P 以前の数値

・Value_C 現在の数値

 

2. 数値ボタンの設定

f:id:spice_jp:20160517153237j:plain

先にCarryというプロシージャブロックを作成してください。その後、各ボタンのブロックを作ります。 

各数値ボタン(0~9)のブロックが押されると、Carryというプロシージャブロックを呼び出し、Digit変数の値を引き渡して実行します。

Carryプロシージャは桁を上げるためのブロックで、連続して数値(変数NUM=1の時)が入力されると、変数Keta

の値の後ろに変数Digitの値をくっつけて表示ラベルのHyouji に渡します。

Carryプロシージャの最後の部分では変数Value_Cに変数Ketaの値を移しています。Value_Cは計算対象になる値です。

 

3.小数点の扱い

f:id:spice_jp:20160517154934j:plain

ここでは小数点のコンマを表示させることを目的にしたブロックです。

B_Comボタンが押されたら、

変数Ketaの中にすでに”・”があるかどうか調べます。

0..12とかになるのを防ぐためです。

・が存在せず、現在表示されているのが数値であれば、変数Ketaの内容に・をくっつけて表示します。

現在表示されている値が数値で無ければ(空白であれば)

変数Ketaの内容を”0.”にして表示します。

これにより、電卓の起動時やオールクリアされた場合の表示が空白になっている状態で、・が押されたときに0.を表示させることができます。

 

4.計算させるプロシージャ

f:id:spice_jp:20160517160026j:plain

計算させるためのCalcという名前のプロシージャを作成します。

まず最後に押されたボタンが数値が数値ボタン(0~9)かどうか確かめています。

もしそうであれば、四則演算処理を行います。

例えば、23+57というようにボタンが押されていたとします。最後に押されたのが、7のボタンでNUM=1です。

23は変数Valu_Pに、+は変数Ope_Pに57は変数Value_Cに入っています。

ここで、次に四則演算か=のボタンが押された場合、足し算結果の80が表示されなければいけません。

ここで、+ボタンが押された場合、

Ope_Pが+なので、Calcプロシージャの下図の部分にて計算を行います。

f:id:spice_jp:20160517161009j:plain

最後に押されたボタンは+で数値では無いのでNUM=0に設定されます。このNUM変数を0に設定することで、

もし、+を押したあとにーが押されたとき(押し間違えたとき)、後から押した-を優先するようにします。

他の演算子も同様な処理を行っています。

計算結果は変数Answerに格納され、表示ラベルHyoujiに渡されて表示されます。

Answerは次の計算にも使用されるので、Value_Pに移されます。

Ope_CもOpe_Pに移され、次の計算に備えます。

計算が終了したら、とりあえずいらない変数の中身をクリアするため、Clearプロシージャで処理させます。

f:id:spice_jp:20160517162018j:plain

5. 演算ボタン

f:id:spice_jp:20160517162337j:plain

演算用のボタンは単純に何が押されたのかをOpe_Cに格納して、先ほどのCalcプロシージャを呼び出しているだけです。

6.その他のボタン

f:id:spice_jp:20160517162707j:plain

その他には、AC(オールクリア)ボタン、+-変換ボタン、ルートボタンを用意しました。

ACボタンは単純に初期状態に戻します。

+-変換ボタンは、現在表示されている値の+-サインを入替えます。例)-2→2 5→ -5

ルートボタンはValue_Cの値をルート値に変換します。

エミュレータで動作確認してください。

正常に動きましたか?