dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

キッズプラザ大阪「1コマアニメーションワークショップ」日曜日、レポート

キッズプラザ大阪、コンピュータ工房で、1/25から3/31まで、「へ・ん・し・んアニメーション」というタイトルで、PEAS motch! を使った1コマアニメーションを作成するワークショップを行っている。土日祝日は、1回40分の入れ替え制で、平日は自由入場となっている。ここでは、ワークショップが始まった日曜日の様子をレポートする。

ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜

 

1コマアニメーションとは

1コマアニメーションでワークショップの機材を説明すると

f:id:dnjiro:20180204131629g:plain

ワークショップ時間、人数

  • 1回40分、定員10名
    10:30~11:10/11:20~12:00/1:15~1:55/2:05~2:45/2:55~3:35
  • 指導員1名、ボランティアスタッフ1名
  • 参加者(1回目6名、2回目8名、3回目子供4名大人4名、4回目7名、5回目9名、幼稚園から小学校低学年)

ワークショップの内容

  1. 名前(ニックネーム  作品の区別に使用)、年齢、男女をソフトキーボードで入力。ペンタブレットの使い方の練習も兼ねている。ひらがな・英語キーボードが切り替えできる。英語キーボードに中国語の表記あり。(5分)
  2. ペンで自由に書く。色の替え方、太さの替え方を教える。(2分)

    f:id:dnjiro:20180205012257g:plain

    PEAS motch!の使い方
  3. 鉛筆ボタンを押せば、書いた順番にアニメになることを教える(3分)
  4. 練習制作(5分)
  5. みんなの作品を見てみよう(2分)。ペンタブレットのボタンに「上書き保存」が割り当ててあり、黄色いシールが張り付けられている。このボタンを押すとサーバー(教師用PC)にデータが保存される。保存されたフォルダを、プレーヤー「9View」にドラッグすれば、全員の作品が上映される。このアニメをみて、くすくすと笑いが起これば成功。
  6. 自由制作(15分)
  7. できた人から作品上映(残りの時間)

感想

  • 今回のワークショップでは、幼稚園児でも、絵を描く段階にすすむと、操作につまずく子供は一人もいなかった。昨年実施したアニメ制作ワークショップでは、図形選択や変形作業ができない子供たちが多く、ボランティアスタッフのサポートが必要だったが、今回はみな絵を描くのに熱中していた。
  • 自分の描いた絵が動くとなると、より楽しさが増す。完成したアニメーションを連続上映すると、静止画を順番に見るよりはるかに迫力がある。
  • 書き順アニメの線のスピードの自動生成について、単純な線はゆっくり動き、塗りつぶす線は高速に動くようになっており、テンポよいアニメーションができていた。ただ、点を打つ速さがはやすぎるように感じた。線の長さが0なので時間が0になっているようだ。

プログラミング学習との関係

  • プログラミング学習として利用するには、アニメーションの順番を考えて作成したストーリー性のある作品がでてくればよいと思ったが、実際にはどうだったか。1回目は絵を書いたら動いたのでおもしろかったといった程度でプログラミングとの関連はあまり見えなかった。2回目は、会場から大笑いがおこっていた。建物など、大きなものが順番にできあがっていき、最後におもしろい絵が描かれるというパターンが、笑いをさそうようであった。3回目は、みなストーリーのある作品を作っていた。年齢をたずねると小学校3年生とのこと。1コマの絵をつかって十分ストーリー性のあるアニメーションが作れることがわかった。4回目、5回目とも個性ある1コマアニメーションが作られていた。
  • 上の図面2枚「PEAS motch!」で作成した。Windowsペンタブレットで指入力した線を、あとからマウスで修正。おおまかな線入力は指でできるが、細かい修正はマウスが便利。この作業はプログラムのデバッグと同じでコンピュータを道具として使いこなす力を習得できる。アニメGIF出力して、レポートにはりつけたが、PowerPointの資料作成にも使えそうである。

 

データ保存と上映の仕組みがすばらしい

  • 今回、生徒全員のデータの保存、収集、上映の流れが非常にスムーズだった点は特筆に値する。データ保存は生徒がタブレットの黄色いボタンを押すだけである。このボタンに「Ctrl+S 上書き保存」が割り当てられており、それだけで生徒の作品が教師用PCのフォルダに振り分けられて自動的に保存されていた。従来こういった作業は、ファイル開くから、保存先フォルダを指定する操作が必要で、ボランティアスタッフのサポートが必要な場合が多いが、その操作が一切不要になっていた。
  • その仕組みを述べると、(1)生徒用PCの  PEAS motch! の設定ファイル setpath.ini に保存先(教師用PC共有サーバーのアドレス)が記入されている。
  • (2)setpath.ini ファイルには保存時刻によって、保存先フォルダ名が記入されており、この設定により、ワークショップごとに、別のフォルダにふりわけて保存される。
  • (3)最初に名前、年齢、男女の入力から初める。この段階でファイル名が作成される。そのため、あとは「上書き保存」だけでよい。
  • (4)生徒用PCの各プログラム「peasmotch.exe」は、「peasmotch-01.exe」「peasmotch-02.exe」...のようにリネームされている。このEXE名の後ろの番号が保存ファイル名の先頭につけられる。それによって、どのPCから保存されたものか、教師側でわかるようになっている。
  • 作業をはじめると、保存フォルダの中に「_とちゅう」という自動バックアップファイルができる。これは上書き保存すると削除されるので「_とちゅう」というファイルがある人は、まだ保存がすんでいないということがわかる。

再生プログラム「9view-full」

  • 「PEAS motch!」には、アニメを再生するプログラム「9view-full」が付属している。このプレーヤーに保存フォルダをドラッグするとその中のアニメをファイル名の順番に再生する。「_とちゅう」という自動バックアップファイルは読み飛ばす機能がついている。
  • 「9view-full」でアニメーションを再生中に、データを編集することができる。ペンタブレットの保存ボタンを適宜押すことによって、上映中の作品がどんどん更新されていく。

 

アプリ改善アイデア

  • コントロールパネルのボタンに「プレイ」「もどす」「アニメ」の説明があるとわかりやすいという意見があった。

キッズプラザ大阪の「書き順アニメ(1コマアニメーション)ワークショップ」

1月25日から、キッズプラザ大阪のコンピュータ工房で、幼稚園から小学校低学年向けに「書き順アニメ(1コマアニメーション)」を作るワークショップを行なっている。

ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜

 

 

使っているソフトは、「PEAS motsh!」という 9VAEきゅうべえを改良したソフトだ。

http://peasmotch.jpn.org

1週間たったので、その経過とプログラミング学習との関連について感想など紹介したい。

 

ワークショップの内容

  • 対象:4歳以上  
  • 機材:Windowsパソコン+ワコムペンタブレット 10セット
  • ソフト:「PEAS motch!」
  • 内容:書き順アニメーションを作る
  • f:id:dnjiro:20180129232140g:plain

  • 「PEAS motch!」は今回のワークショップ用に開発したソフトで、絵を描くだけで書き順アニメーションができる。

 

小学校低学年の子供達に教えることは相当難しい。

 

当初、アニメ作成方法を、1。絵を描く、2。アニメ作成ボタンを押す

の2ステップにした。アニメ作成ボタンだけで、誰でもできると考えた。ところが、複数ページ作成できるようにすると、各ページで、アニメ作成ボタンを押し忘れる子供達が続出した。

 

(対策)アニメ作成ボタンを押し忘れても、自動的にアニメになるようにした。

 

(教訓)

  • 小学校3年生ぐらいになると、最初の説明でちゃんと理解できるが、小学校1年生程度だと、ある作業に熱中すると、自分の知らなかったことは忘れてしまいがちである。
  • たった一つのボタンを覚えるのに時間がかかるという状態なら、ブロックを使ったプログラミング学習でも、相当手間がかかるのではと予想する。
  • 昨年9VAeを利用したワークショップでは、サンプルの顔を読み込むところから始めた。この場合、よくわからずに適当に操作していると、意識せずに顔の形を変形したり、移動したりすることになり、それが面白いので、繰り返しているうちに、仕組みがわかってくる、という手法を用いた。
  • 今回は、絵を描くことは問題ないが、「アニメ作成」ボタンは新しいことなので、何回も忘れてしまう。ソフト側で押し忘れに対処することにした。

 

絵の書き方と「書き順アニメ」の自動生成

  • 書き順アニメは、絵を描く順番が再生の順番になるという簡単なルールを子供達に与える。
  • このルールを利用すれば、ストーリーを持ったアニメを作ることができる。
  • 書いた順番に再生させるのは簡単に見えるが、どういうスピードで再生するかは結構調整が難しい。
  • 線の長さに対応した時間を割り当てるだけでは塗りつぶしを行なっている線に一番長い時間を割り当ててしまい、絵が止まったようになってしまう。

(対策)

  • 単なる線と、塗りつぶしの線は速度を変える必要がある。
  • このためには子供達描いたデータを集めて、速度調整ルールを開発する必要がある。今回キッズプラザ大阪の5日間の実施で、260個のデータが得られた。そのデータを元に時間割り当てプログラムを調整した。
  • f:id:dnjiro:20180129232542g:plain←調整前 

    f:id:dnjiro:20180129232750g:plain←調整後

(教訓)

  • 「書き順アニメ」は原理は単純だが、ノウハウが必要である。キッズプラザ大阪で実施しながら改良する手法は大変有意義である。

 

プログラミング学習との関係

  • 書き順アニメーションは、描く順番に物事が起こっていくので、言語もブロックも使わずに手順を記述することができる。
  • 描いた絵は後から自由に修正できる。絵がアニメを作成するプログラムであると考えれば、デバッグ作業を体験できる。「PEAS motch!」は、最も簡単なプログラミング開発環境と言える。
  • 「PEAS motch!」画面。白紙に絵を書き、鉛筆ボタンを押せば書き順アニメができる。左側の矢印をタッチすれば、選択モードになり、書いた線の属性(色、太さ、種類、形など・・)を変更できる(デバッグ作業)。

    f:id:dnjiro:20180203145418p:plain

 

 

 

 

9VAeは、ホワイトボードアニメーションが超簡単に作れるひとコマアニメ作成ツール

2018/1/25 からキッズプラザ大阪でワークショップをやることになった。

今回は、ワークショップ用に画面デザインを大幅に変更し、きれいで、わかりやすくした。できたソフトは、PEAS motch! という名前になった。

 

 

 

ワークショップの内容は「書き順アニメ」なのだが、もっと適当な言葉がないか探してみたところ「ホワイトボードアニメーション」という言葉が近いようだ

Whiteboard animation - Wikipedia

 

ホワイトボードアニメーションとは

  • ホワイトボードにイラストを書く様子を撮影し、早送り再生したもの

アメリカで専門の制作会社もあるらしい。

アメリカで爆発的な人気!ホワイトボードアニメーション5つの動画実例 | MOBERCIAL

 

 

日本ではまだ新しい言葉で、重要な点は、

  1. ホワイトボードアニメーションは、単純な動画よりも人を引き付ける効果が高い
  2. ホワイトボードアニメーションを使うと理解がより深まる

という効果が 心理学者によって確かめられている点だ。

  • 1つ1つの情報を順番に取り込める
  • イラストが小出しに現れるワクワク感がある
  • ストーリーがあって飽きない

といった要素が動画より人を引き付ける。

 

ホワイトボードアニメーションが簡単に作れるようになれば、急速に、広まっていくだろう。

 

 フリーソフトで簡単につくれるホワイトボードアニメーション=「ひとコマアニメーション」

f:id:dnjiro:20190821012305g:plain


 

PEAS motch! は、ホワイトボードアニメーションを簡単に作れる革命的なフリーソフトだ。2018年キッズプラザ大阪では、このアニメーションのことを「ひとコマアニメーション」と呼ぶことになった。

PEASmotch!

 

下のアニメは、夏休みに子供たちが 9VAeでつくったアニメーションだが、まさにホワイトボードアニメーションだ。この制作時間は1人5分以下で、リアルタイムで1本の動画に結合し、プロジェクタで上映した。

www.youtube.com

作り方はこちら

青少年のための科学の祭典で行った100名の連作アニメの作り方 - Qiita

 

キッズプラザ大阪では、PEAS motch! を使って、1/25から3/31までワークショップを行った。4歳から中学生、親の作品も含めて、合計3000本程度のひとコマアニメーションが制作された 

 

「ホワイトボードアニメーション」を作る4つの方法

1.ビデオ撮影し、動画編集する(今までの方法)

  • ホワイトボードにイラストを書いていき、ビデオで撮影
  • 動画ソフトで取り込み、早送り処理、不要な部分をカット
  • ナレーションを入れる。
  • 動画編集を行うので、性能の高いパソコンと大容量のハードディスクが必要。

 従来はこの方法で作っていた。動画編集を行うため、専門的な知識が必要で、制作時間もかかるが、質の高いアニメーションが作れる。

 

2.PEAS motch! で作る(新しい方法1)

 

 

f:id:dnjiro:20190326112925j:plain

PEAS motch!を使った1コマアニメーション制作コーナー:タブレット2台で作成したアニメをプロジェクタで上映

 

3.9VAeきゅうべえを使う(新しい方法2)

 

4.PicsArt を使う

  • PicsArt はスマホ用アプリ。絵を描く様子を記録する機能がある。
  • ペイントボタンから、上のカメラボタンをタッチしてから描画すると、書いた手順が記録される。iPhone/iPad用 PicsArt では、線がのびていく過程も記録される。
  • ペンの種類が豊富。
  • 一度記録すると、あとから修正することはできない。

 

 

キッズプラザ大阪に設置した「PEAS motch! one

f:id:dnjiro:20190821012907g:plain

9VAeきゅうべえ Xamarin版はやめて、DXライブラリで作ってみることに

9VAeきゅうべえ Xamarin版を調べていたが、Cから Xamarinの描画関数を呼ぶのが難しいことがわかった。いろいろ調査していると、DXライブラリというのを発見。

 

ゲーム開発用にかなり昔から開発されているライブラリで、そのアンドロイド版があるらしい。これだと、Cでプログラムができて、描画関数がCから呼べる。

 

アンドロイドアプリをCで作りたいのでは、OpenGLを使えば良いのではという意見もあったが、OpenGL ESは三角形しか描けない。9VAeきゅうべえの基本の多角形塗りつぶしを自分で用意しないといけない。DXライブラリは、DirectX用のライブラリを、OpenGLを使うように修正したのだろう。ゲームに必要な関数が皆入っているらしい。なんと一番欲しかったライブラリではないか。ということで、9VAeアンドロイド版は、DXライブラリを使って開発することに方針転換。

 

ところが、いろいろ、つまずくところがありました。

 

  • DXライブラリを使ったサンプルプロジェクトは、MacのVisualStudioでは実行できなかった。>>そこで開発マシンを Windows Visual Studio に変更。これでビルドはできるようになった。
  • ところが、Androidエミュレータが起動しない。どうも、64bit Windows, メモリ6GB ぐらい必要らしい。家にあるのはみんな中古パソコンで、そんな贅沢なマシンはない。>>エミュレータは遅いらしいので、アンドロイド実機を購入することに決定。
  • Nexusは高いので、Windows/Androidデュアルブート(Gecoo S1)というのを11000円で購入。これは安い。>>ところが実機デバッグできない。
  • Android 5.1 でAPIレベルは十分なのだが、CPUがX86 だとだめだった。AndroidはみなARMで動いていて、デュアルブートは、ARMでWindowsを動かしているのだと勘違いしてた。DXライブラリのサンプルプロジェクトはARM用みたいだ>>仕方がないので、ARMの(Gecoo A1G)を追加購入。2台買ったが、X86 androidのテストもできるようになったので、まあ、よしとするか。DXライブラリの x86 android版も作っているみたいだ。
  • ということで、ARM android をUSBケーブルで繋いで、DXライブラリのサンプルを動かすことができた。

 

まとめると、今、次のような問題を抱えているが、DXライブラリを使って、9VAeきゅうべえアンドロイド版を作ってみよう。

 

  • X86 androidでは動かない。>>開発中らしい、いずれ動く
  • DXライブラリは、三角形しか書けない。また、グラデーションをサポートしてない。>>多角形塗りつぶしのやり方はネットで見つかる。円形グラデーションはひとまず諦める

 

Xamatin 調査の記録

 

ProcessStartInfoクラス

を使って子プロセスを起動する場合、UseShellExecuteプロパティfalseを指定し、RedirectStandardOutputなどのプロパティをtrueにすることで子プロセスの標準ストリームをリダイレクトさせることができます。

 

 

 

DXライブラリ

 

DXライブラリを使うと C++androidアプリが開発できる。今でもメンテされており、フリーソフトで、学校の授業でも使われてるようだ。素晴らしい。

 

DXライブラリ置き場 HOME

 

ドキュメントも充実している。ただ、x86 android版がまだ開発中みたい。

 

Visual Studioのインストール手順

C++で androidを開発するには、Visual Studioが良い。DXライブラリを使うためには、Windowsでないといけない。

 

Visual Studio は、32bit Windowsにインストールできるが、Visual Studio エミュレータを使うためには、64bit 6GBメモリが必要らしい。エミュレータが起動しなかった。

Visual Studio Emulator for Android のシステム要件

 

Visutal Studioのインストール手順

  1. Visual Studio 2017 Community をダウンロード
  2. インストーラを実行
  3. そのあと、インストールするモジュールをいろんな種類を選べるので、「C++によるモバイル開発」をクリックする。

 

開発用アンドロイド実機の選び方

 

 

 

9VAeきゅうべえXamarin/iOS版、Ver.0.5.14で動く年賀状を作ろう

Mobile Act Osaka

昨日Mobile Act Osakaに参加して、Xamarinプログラマーに9VAe iPhone版を見せて質問した。

 

やはり、Androidアプリを Xamarinで作ろうとした場合、C#からCを呼び出すことはできるが、そのCプログラムの中から、Xamarin描画関数を呼び出すことはできないみたいだ。方法としては、Cプログラムでは描画コマンドをキューなどに入れて一旦終了。C#に戻って、そこでキューを読み出して、Xamarin描画関数を呼ぶという方法なら可能らしい。そういう使い方をする人は、今はいないのだろう。Xamarin描画関数は十分なものがありそうなので、キューの処理を新たに作れば良いわけだ。iOSは、Objective-CからCの描画関数を呼べたので、その必要がなかった。

 

MobileAct Osakaは、無料で、ビールを飲みながら、こんな質問ができたし、iOSアプリの作り方などいろんな情報が得られた。参加してとってもよかったです。

 

WMFイラスト読み込みで動く年賀状が作れる

パソコン用の 9VAe Ver0.5.14を公開しました。

無料ソフトでアニメを作ってみよう(9VAe きゅうべえ) - Qiita

今回のリリースの本音は、iOS版を作るために改造したソースを、パソコン版にも入れて、ソースを共通化するのが第一だったのですが(修正箇所はかなりあった)、それだけでは寂しいので、WMF読み込みを入れました。リリース過程で、図形選択とか、点の移動時にぴょんと跳ねる現象とか修正したので、微妙に使いやすくなってます。

  • WMF(Windows Meta File)ファイル読み込みを、「開く」「9VAeアニメを入れる」

WMFは、Windowsの初期からある図形フォーマットで、Wordのクリップアートで使われ、年賀状とか教材用の素材などがたくさんネットで見つかります。これらを読み込んで、動く年賀状GIFが作れます。

000.pngR

WMFイラストサイト

初期のPowerPointでは、図形イラストを選択して、Ctrl+Cを押すと、WMF形式でクリップボードに保存され、9VAe上でペーストすれば入力できたのですが、最近のPowerPointでは、WMF形式では保存されなくなったようです。その場合、WMF形式で保存すれば、それを 9VAeきゅうべえで読み出すことができます。

 

9VAeきゅうべえiPhone版の改良(0.5.14.1207) 

  • 横幅が狭い時に、プレイボタンとストップボタンが同じ位置にでるようにした。STOPボタンの場所に前のページに移動するボタンが出てくる。

    f:id:dnjiro:20171201185035p:plain

  • WMFファイル読み込みを追加。「Input」メニュー、「SVGダウンロード」のところで、WMFファイルのURLを入れると、読み込むことができる。ただし64bitOSだと、色が少しおかしい。WMF読み込みを32bit/64bit対応に修正しないといかん。
  • 新規作成した直後にSVGを読み込んだ時、画像サイズをSVGサイズに合わせるようにした。

 

9VAeきゅうべえ Xamarinについて勉強。Cからの描画はどうしたら良い?

9VAeきゅうべえ Xamarin版の開発を始める。

9VAeきゅうべえはいろんなところに移植してきたが、だいたい以下の手順でやってきた。

新しい環境に移植するときのパターン

  1. 動作する開発環境をコピー(ダウンロード)する
  2. 動作するサンプルを入手する
  3. サンプルを改造し、必要な機能の実装方法を確認する
  4. 最初は悩むよりも知っている人に尋ねる方が早い
  5. 出来上がってきたら、入手した情報をまとめていく
  6. 自分が得た知識と知っておくべき知識を比較し、間違えている部分を修正していき、徐々に完成に近く

今まで、皆この手順だ。勉強せずに少しずつ作っていき、最後に勉強して間違えていた部分を後から修正するという感じだ。作りながら勉強するといった方が聞こえはいいかも。わからずに作り始めるので、時々、別のサンプルから作り直すことがある。iPad版の場合は3回作り直した。最後には、最初の作り方のどこが悪かったかわかるようになる。(けど、すぐ忘れる)

 

Xamarinのサンプルはたくさんある

Samples - Xamarin

 

ということで、ここからXamarin のサンプルプロジェクトを探す。とりあえず役に立ちそうなプロジェクトをダウンロードする。たくさんあるが、ペイントブラシのようなサンプルはないのかな。

タイマー描画?

AnalogClock - Xamarin

Sound effects example - Xamarin

Working With Audio – Test Application - Xamarin

API色々

Android API Demo - Xamarin

画像

Loading Large Images - Xamarin

 

マルチタスク

MultiTasking - Xamarin

マルチタッチ

Multi-Touch Tracking in Android - Xamarin

画面回転

Rotation Demo - Xamarin

スクリーンキャプチャ

ScreenCapture - Xamarin

ファイルを開く、保存

Scoped Directory Access Sample - Xamarin

Storage Client - Xamarin

Storage Provider - Xamarin

SVG

svg-android binding - Xamarin

同期

SynchronizedNotifications - Xamarin

タッチ

Touch in Android (Completed Sample) - Xamarin

Touch in Android (Walkthrough) - Xamarin

Touch-Tracking Effect Demos - Xamarin

フォント

Working with Fonts - Xamarin

 

こちらにもある

Draw 2D Graphics - Xamarin

SkiaSharpというライブラリがあるようだ。

2D Drawing - Xamarin

 

サンプルプロジェクトを見て勉強

Touch-Tracking Effect Demos - Xamarin

の中に、指で絵をかくアプリを発見。SKPaintを使っている。SKPaintは C#のようなので、もっと低レベルの描画関数を探さないとあかんような気がする。

 

AnalogClock - Xamarin

アナログ時計の描画が Canvasを使っており、こちらは、Mono.Androidという関数を使っていて、これが使えそう。 

タイマーは、async / await という仕組みを使っているようだ。自分でタイマーループを作っているみたいだが、まず、これを真似してみるか。 

Xamarin の Alpha版で async/await を試す - Qiita

 

描画をどうするか検討

9VAeきゅうべえの場合、Cのライブラリ関数の中で画面に描画する。

まず、C#から、Cの関数をどう呼び出すか、これは簡単にできるみたい。

.NET TIPS:Win32 APIやDLL関数を呼び出すには? - @IT

 

C# + Native C による高速化〜その1:基礎知識と準備

これをみると、C++のプロジェクトを作って一旦 DLLを作って呼ぶようだ。

 

さて、描画は、Monoを使いたいので、C++から Mono.Androidの描画関数が呼べるかどうか。パッと探した感じだと見つからない。iosアプリを作る場合は、Objective-Cのコードが呼べて、その中で描画までできるようだが、Androidの場合は描画用の関数が Xamarinにしかない。となると、9VAeLibと同時に、Xamarinを動かしておいて、描画の指示があったときに横から描画するといった技を使うのだろうか。アラートを表示するときは、他でもそうやっているのだが、描画までそうするのかな。まあ、やってみるか。描画ができるまで少し時間がかかりそう。

 

これも関係ありそう。ライブラリについて

Using Native Libraries - Xamarin

 

9VAeきゅうべえ Xamarin版の開発開始

9VAeきゅうべえ iPad版を、とりあえずGitHubにあげた。UIの改良は、iPhoneアプリが得意な人に任せた方がいいものができると思うので、ちょっと、置いておくことにして、今度は、Xamarinに手を出してみようと思う。

Xamarinは、C#で、Javaを知らなくても、Android版アプリができるらしい。となると簡単に、Android版9VAeきゅうべえが作れるかもしれん。

 

Visual Studio を入れる

まずは、Visual Studio 無料を入れる。Xamarinは一緒に入っているらしい。

Visual Studio for Mac | Visual Studio

 

う、何とか入ったがディスクの空きがほとんどなくなった。もうアプリのアップデートができない。使わなそうなアプリを消して、空きが3GBだ。これでできるかどうかわからんが、とりあえず進む。

 

Xamarinのサンプルを入手し、本当にできるのかチェック

第1回 C#で自作Android アプリを作ろう:出帆準備編 | システムガーディアン株式会社

 

ひとまず、これを参考にしてみよう。

ここに載っていたサンプルプロジェクトを GitHubから入手。実行させてみるとAndroid開発環境がさらにインストールされる模様である。となると、3GBではおそらく足らない。HighSierraへのアップデートプログラムが5GBあったのでこいつを削除。いつの間にか入っていたのだが、削除するとまた入るのかな?何とかインストールできた模様。とりあえずシミュレータが起動し、サンプル実行できた。空きが4GBしかないが、シミュレータはちゃんと起動して動いた。素晴らしい。

 

Android実機との接続

次は実機との接続を試す。ネット記事では古い記事も多く、ドライバーを入れろとか、色々あったが、インストーラがちゃんとやってくれていそうな感じだったので、とりあえずUSBで接続。

 

これだけでは何も起こらなかったので、Android実機の設定パネルの「開発者設定」で「USBデバッグ」をONにしてみる。

 

すると何と、VisualStudioの実行環境にAndroid実機が追加された。これにチェックを入れてビルド実行すると・・・実機でサンプルプログラムが動いた!何と簡単。素晴らしい。本当に Visual StudioAndroid開発ができそうだ。

 

ということは、

  1. 描画のサンプルプロジェクトを入手して、タッチイベントの処理を調べる
  2. C#からCを呼ぶ方法を調べる
  3. 描画ルーチンを、.NET用に書き換える

という手順を踏めば、Android版 9VAeが作れそうだ。小さい画面でも使えるようにするのは、iPhone版で改良すみなので、割と簡単にできるかもしれん。進んでみよう。