dnjiro’s 9VAe blog

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

キッズプラザ大阪の「書き順アニメ(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版で改良すみなので、割と簡単にできるかもしれん。進んでみよう。

 

 

9VAeきゅうべえiPad版 GitHubにプロジェクトを公開した

9VAeきゅうべえiPad版がだいたい動くようになったので、GitHubでプロジェクトを公開しました。誰でもこれを修正し、ストアアプリを作って販売しても構いません。今の状態でも、SVGイラストからアニメGIFを作るのに使えますが、UI部分がイマイチなところがあるので、皆さんの知恵を借りたいです。

 

GitHubアドレスはこちら

g

 

 

GitHubにプロジェクトをあげる際に以下の記事を参照した。

今さら聞けない!GitHubの使い方【超初心者向け】 | TechAcademyマガジン

 

Macには最初から、gitコマンドが入っており、簡単に登録できた。手順は以下のとおり。

 

1.GitHubに新しいリポジトリを作成する

  1. GitHubにアカウントを作る(無料)(https://github.com)
  2. GitHubにログイン
  3. 「New repository」ボタンをクリック
  4. 「Repository name:」に名前 9VAeLib を入力
  5. 「Public」, 「Initialize this repository with a README」にチェック
  6. 「Create repository」ボタンをクリック > 9VAeLibのページができた。

リポジトリアドレスは、「Clone or download」ボタンを押すとわかる。 https://github.com/dnjiro/9VAeLib.git

 

2.Macにローカルリポジトリ(修正用フォルダ)を作成する

  1. GitHub修正用フォルダを適当な場所、名前で作成
  2. ターミナルを開く(アプリケーション>ユーテリティ>ターミナル)
  3. cd GitHub修正用フォルダのパス(ターミナルにcdを入力してからフォルダをドラッグ&ドロップすると入力できる。cd は場所を移動するコマンド)
  4. git init  
  5. git remote add origin https://github.com/dnjiro/9VAeLib.git
  6. git checkout master
  7. git pull

これで作成したフォルダに、GitHubで作成した README.mdがチェックアウトされた。このフォルダを修正してコミットすれば、GitHubに反映されるようだ。

 

3.GitHub修正用フォルダの中身を修正、追加

  1. README.md をエディタで修正
  2. 新しいファイル(LICENSE.txt, 9vae.svg iosフォルダ)を追加
  3. git add  LICENSE.txt
  4. git add 9vae.svg
  5. git add ios
  6. git commit -m “英語コメント”
  7. git push origin master

これでGitHub取得修正用フォルダの中身が、GitHubに反映された。

 

今後の修正はブランチを作ってからGitHubに反映

git checkout -b ver01

git fetch

修正(ファイルを追加した場合は、git add)

git commit -a -m "コメント"

git push origin ver01

 のようにすれば良いみたいだ。commitに -a がないと反映されない。

  • git push が成功すると、GitHubプロジェクトに、「Pull request」というボタンができる。このボタンをクリックし、コメントを入力し、マスターに修正を反映させる。
  • ブランチは、git branch で表示、git branch -d ブランチ名 で削除できる。
  • GitHubから新しいフォルダに9VAeプロジェクトをコピーする場合は次のようにする。

cd 新しいプロジェクトフォルダ

git clone https://github.com/dnjiro/9VAeLib.git

cd 9VAeLib

 この場合は、git initをしてはいけない。9VAeLibフォルダの中に、gitの情報が書き込まれており、ここで作業を行う。

 

4.GitHubプロジェクトから9VAeiPad版を作るには

必要なもの

手順1.Xcodeでプロジェクトを開き、シミュレータで実行

  1. Appストアから、最新の Xcodeを入手する。古い Macだと動かない場合あり
  2. ブラウザで、9VAeiPad版(https://github.com/dnjiro/9VAeLib)を開く。
  3. 「Clone or download」ボタン「Download ZIP」を順番にクリックする。プロジェクトがダウンロードされる
  4. ダウンロードフォルダを開くと、ZIPを解凍した「9VAeLib-master」ができる。
  5. 中の「ios」フォルダの中の「9VAe.xcodeproj」をダブルクリック。Openボタンをクリックすると、Xcodeが起動し、9VAeの設定画面が開く。
  6. Xcode の左上にある「右向き三角▶︎」をクリック。プロジェクトがビルドされ、しばらく待つとシミュレータで9VAeが起動する。

手順2.実機(iPhoneまたはiPad)で9VAeを実行

  • もし今まで、iTunesを使ったことがない場合、iTunes > 環境設定 >「デバイス」を開き、「iPhone,iPodを自動的に同期しない」にチェックを入れておくと良い。同期によって実機のデータが修正されるのを防ぐため。

 

  1. 実機(iPhone/iPad)とMacをUSBケーブルで接続する。
  2. 実機に「このコンピュータを信頼しますか」が表示されたら「信頼」をタッチする。
  3. ダウンロードしたプロジェクトのiosフォルダの中の「9VAe.xcodeproj」をダブルクリックしてプロジェクトを開く。
  4. 設定画面(もし表示されていない場合、左上の切り替えボタンをクリックしてフォルダ構成を表示し、プロジェクト「9VAe」をクリック)「General」画面の「Signing」の「Team」が赤字(未設定)になっているので、ここをクリックし「Add account...」で 自分のAppleIDを登録する。
  5. デバッグ環境をシミュレータから実機に切り替えるには、Xcodeのメニュー「Product」から「Destination」、「Device欄のiPhoneまたはiPad」を順番にクリックする。
  6. Xcodeの左上の「右向き三角▶︎」ボタンをクリックすればプロジェクトがビルドされ、実機に9VAeアイコンが転送される。ただし最初は実行できないとのエラーが出る。
  7. 実機(iPhone/iPad)のトップ画面にある「設定」アイコンをタッチし、「一般」「デバイス管理」を順番にタッチ。上で入力した自分のAppleIDが見えるはずなので、タッチ「信頼する」に設定。これで実機でデバッグできるようになります。
  8. もう一度、Xcode上の「右向き三角▶︎」をクリックすれば、9VAeきゅうべえが起動するはずです。

 

 9VAeアプリ修正のヒント

f:id:dnjiro:20171123165409p:plain