2017-11-28

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

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

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

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

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

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

Android実機との接続

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

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

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

ということは、

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

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

2017-11-23

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

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

GitHubアドレスはこちら

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

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

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

１．GitHubに新しいリポジトリを作成する

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

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

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

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

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

３．GitHub修正用フォルダの中身を修正、追加

README.md　をエディタで修正
新しいファイル(LICENSE.txt, 9vae.svg iosフォルダ)を追加
git add LICENSE.txt
git add 9vae.svg
git add ios
git commit -m “英語コメント”
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の情報が書き込まれており、ここで作業を行う。

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

必要なもの

Macintosh パソコン
Xcode　Appストアから入手（無料）AppleIDが必要
iPhone または iPad
USB接続ケーブル
9VAeiPad版（https://github.com/dnjiro/9VAeLib）

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

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

手順２．実機（iPhoneまたはiPad）で9VAeを実行

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

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

9VAeアプリ修正のヒント

9VAeは、画面デザインやサンプルデータが簡単に修正できます。以下を参照。例えば　ios/QvaeLib/data/afa9va.png を修正すれば画面デザインを簡単に変更できます。かっこいい9VAeを作ってみてください。
アニメソフト 9VAe をカスタマイズする方法 - Qiita

f:id:dnjiro:20171123165409p:plain

2017-11-22

9VAeきゅうべえiPad版　スタティックライブラリのサイズを小さくする

9VAeきゅうべえiPad版の GitHub公開を目指して作業中。

ライブラリのサイズが２０MBあったのだが、デバッグ情報を外すと９MBに削減できた。

ライブラリからデバッグ用情報を外す方法

objective c - Hide code in static library (iOS Obj-C) - Stack Overflow

に書いてあった以下の設定をすれば、サイズが小さくなった。

Select your Target and go to Build Settings. Set

' Strip Debug Symbols During Copy ' to YES

' Debug Information Format ' to 'DWARF with dSYM File'

' Generate Debug Symbols ' to 'NO'

' Symbols Hidden by Default ' to 'YES'

1.は Deployment

2.は BuildOptions

3.4.は Apple LLVM 8.1-Code Generation の中にあった。

色々細かい作業

点線、矢印を追加
選択枠の上にメニューが表示された時、メニューを消去して跡が残る問題を改善。まだ完全ではない。XOR演算で表示しているのが問題と思われる。他のソフトを見ると、XOR演算は使ってないようだ。今後の課題。
ポップアップメニューの項目の幅を広げる。それに伴いグラデーション、筆線のポップアップメニューの表示を修正
ポップアップメニュー表示時の画面回転
YesNoダイアログの日本語、英語切り替えを追加

ライブラリ作成

iOSにおける静的ライブラリ作成技法 - 渋谷ラーメン男道

を参考にして、ライブラリ作成について最終確認。実機、シミュレータ用、32bit, 64bit用の４つのライブラリが入っている。

$ file libqvaeLib.a

libqvaeLib.a: Mach-O universal binary with 4 architectures: [arm_v7:current ar archive random library] [arm64]

libqvaeLib.a (for architecture armv7): current ar archive random library

libqvaeLib.a (for architecture i386): current ar archive random library

libqvaeLib.a (for architecture x86_64): current ar archive random library

libqvaeLib.a (for architecture arm64): current ar archive random library

$

2017-11-20

プログラミング学習について小学校学習指導要領の３つの誤解

教育

先日、関西教育ITソリューションEXPOで、「教育改革を踏まえた教育情報化の重要性〜プログラミング教育の動向〜」文部科学省生涯学習政策局情報教育課　情報教育振興室長　安彦視学官のセミナーを聴講し、小学校のプログラミング学習について勉強しました。

いくつか誤解していた点が明らかになったので書きます。

これは小学校の学習指導要領の話であって、プログラミングをどう学習すれば良いかという話ではない点に注意。プログラムが好きな人は学習指導要領とは関係なく、どんどんプログラムの勉強を進めてほしいです。

誤解１：プログラミングという教科ができるわけではない。

プログラミングを教えるのは、算数や理科と言った、既存の教科の中です。今までの教科の中に、プログラミング学習を取り入れて、学び方を改革していきましょう。ということみたいだ。プログラミングを目的にした教科ができるわけではない。

誤解２：プログラミング言語を覚えることがねらいではない

新学習指導要領解説が公開されました～小学校段階でのプログラミング教育の部分をご紹介します～ | 未来の学びコンソーシアム

にこう書かれている。（小学校学習指導要領解説総則編　平成29年6月文部科学省８５ページ）

また，子供たちが将来どのような職業に就くとしても時代を越えて普遍的に求められる「プログラミング的思考」(自分が意図する一連の活動を実現するために，どのような動きの組合せが必要であり，一つ一つの動きに対応した記号を，どのように組み合わせたらいいのか，記号の組合せをどのように改善していけば，より意図した活動に近づくのか，といったことを論理的に考えていく力)を育むため，小学校においては，児童がプログラミングを体験しながら，コンピュータに意図した処理を行わせるために必要な論理的思考力を身に付けるための学習活動を計画的に実施することとしている。

その際，小学校段階において学習活動としてプログラミングに取り組むねらいは，プログラミング言語を覚えたり，プログラミングの技能を習得したりといったことではなく，論理的思考力を育むとともに，プログラムの働きやよさ，情報社会がコンピュータをはじめとする情報技術によって支えられていることなどに気付き，身近な問題の解決に主体的に取り組む態度やコンピュータ等を上手に活用してよりよい社会を築いていこうとする態度などを育むこと，さらに，教科等で学ぶ知識及び技能等をより確実に身に付けさせることにある。

プログラミング学習の狙いは、プログラミング言語を覚える、技能を習得するのが目的ではない。プログラムのよさを知り、コンピュータを活用する態度を育むのが目的である。またプログラムを言語に限定せずに記号の組み合わせと表現している。

誤解３：「アンプラグド」（コンピュータを使わない方法）を推奨しているわけではない

学プロ研#3（プログラミング教育関連の研究会）で、小学校のプログラミング学習授業例の紹介の中で「アンプラグド」という言葉を何回も耳にした。初めてきいた言葉だったが、コンピュータを使わないプログラミング学習方法らしい。

特集：小学生の「プログラミング教育」その前に（1）：コンピュータを使わないアンプラグドな体験と容易にできるプログラミング環境があれば、小学生も教師も楽しく学べる (1/2) - ＠IT

この方法が注目されるのは、小学校でコーディングから始めるのは難しいからと思うが、コンピュータを使わなくてもできるという発想が気になった。学習指導要領には「コンピュータを活用する態度を育む」のが目的とある。アンプラグドは、簡単に言えば、コンピュータの動きを人間が真似をすることでコンピュータの動作を学ぶ方法だが、コンピュータをさわらずに、コンピュータへの指示がどれだけ細かいかを教えるのは本来の目的にあっているのか。少なくともコンピュータを使った学習方法を進めてほしいと感じる。

プログラミング言語なしで使える「プラグド」アプリの充実が必要では？

結局、「アンプラグド」を使わなくても、コンピュータのすごさを体験できる「プラグド」なアプリを各教科向けに充実させる必要があるのだと思う。今、小学校向けプログラミングとして、Scratchのようなブロックを並べる方式は充実してきたが、その前段階になるもっと簡単なブロックを覚えなくてもできる方法を充実させていくことが必要ではないか。

例えば、教育エクスポで、ヤマハが展示していた「ボーカロイド教育版」は、タブレット上で楽譜の上に指で線を描いていくと、初音ミクのように歌ってくれる。ここでは楽譜がプログラムであり、タブレットで編集できる。学習指導要領に適したアプリと言える。

ボーカロイド教育版 | 製品案内 | Smart Education System by Yamaha - 「学び」に関わるすべての人にワクワクを -

2018年1月から4月まで、大阪の子供向け博物館「キッズプラザ大阪」で行われた「１コマアニメーション」のワークショップでは、PEAS motch!というフリーソフトが使われているが、ブロック言語を使わずに手書きするだけでアニメーションが作成できる。

f:id:dnjiro:20180626065814g:plain

キッズプラザ大阪「１コマアニメーション」カリキュラム - dnjiro’s 9VAe blog

学習指導要領に従ったプログラミング学習を進めるにはプログラミング言語をマスターしなくても使える「プラグド」な方法を増やしていくことが必要ではないかと思う。

2017-11-20

9VAeきゅうべえiPad版　シミュレータ実機兼用スタティックライブラリの作り方

9VAeきゅうべえiPad版がだいぶ出来上がってきた。

綺麗なiPhone/iPadアプリを作るのは、初心者の私には難しいので、iPhone/iPad用9VAeを作るプロジェクトを公開し、誰でも、9VAeきゅうべえアプリを自分で作れるようにしようと考えている。

そのため、9VAeライブラリの作り方を調べた。

iPhoneシミュレータ用と実機用のライブラリは違う

新規プロジェクトからライブラリを作るのは簡単だったが、ビルドした時のライブラリがどこにできるかが最初わからなかかった。これは、設定を変更すれば、プロジェクト内部に出力できるみたいだ。

次に、作成したライブラリを使うと、シミュレータでは動作するが、実機では動作しないという症状になった。これは、シミュレータMacはインテルでCPUが違うので当然か。このあたりを、もくもく会で、サンフランシスコ在住のプログラマーから教えてもらった。いろんな人の知恵を借りてiPad版を作っている。

これにどう対応するか調べてみると、lipo というコマンドを使ってライブラリをまとめることができるみたいだ。以下の記事を参照

iOSにおける静的ライブラリ作成技法 - 渋谷ラーメン男道

ただ、アプリストアに申請する時に、シミュレータ用のコードが含まれていると拒否されるとの情報もある。

とはいえ、ダウンロードしたプロジェクトを実行した時にリンクエラーが出るのは避けたいので、１本の実機、シミュレータ兼用ライブラリを作ることにした。

Run Script を使って lipo を実行し複数のライブラリを一本化

XCodeのRun Scriptを試しに触ってみる - woshidan's loose leaf

を参考にする。

ライブラリプロジェクト＞ Build Phases ＞＋　＞New Run Script Phases

Run Script行が追加されるので、以下の行を追加すると、シミュレータ用デバッグと、実機用の両方が入ったライブラリができた。

lipo -output libqvaeLib.a -create $BUILD_DIR/Release-iphoneos/libqvaeLib.a $BUILD_DIR/Release-iphonesimulator/libqvaeLib.a

この兼用ライブラリ以外に、デバッグ、実機単独のライブラリもプロジェクトに入れておくことにする。下は xcodeの設定画面

f:id:dnjiro:20171120091613p:plain

2017-11-15

9VAeきゅうべえiPad版　YesNo入力待ちができない問題

9VAeきゅうべえiPad版を開発中。パソコンアプリからの移植がだいぶできてきたが、対応の難しい点がいくつか残っている。大きなのは次の２つだ

YesNo入力待ちが使えない。
ファイル開く、保存するダイアログがない。

YesNo入力待ちができない問題

YesNo入力待ちというのは、アプリの途中でユーザーの確認を求めて、続きの処理を切り替える機能だ。例えば、「ファイルを上書きしても良いですか？はい、いいえ、キャンセル」で、後の処理を切り替える。

昔のパソコンアプリでは、こういう書き方をよくしていた。

iOS（最近のアプリの作り方）の場合、こういったアラートを表示することはできるが、その結果を受け取るまで、プログラムを止めておいて、結果を受け取ってから続きの処理を行う。ということができない。プログラムを独立性の高い小さなモジュールに分けて作りなさいということかな。

そうなので、ユーザー入力待ちが発生すると、その直前までの処理と、入力した後の処理を分離し、ユーザー入力のあと、新たに続きの処理を開始ということにしないといけない。ところが、最初からそういう設計にしておかないと、入力待ちが発生した時の途中の状態がわからなくなり、「とにかく、この続きをやりたい」ということになってしまう。また、最初は入力待ちがなかった場所に、後から入力待ちを入れて処理を分けるということもある。パソコンアプリである 9VAeには、そんなYesNoがあちこちに入っていて、今更処理を分けるのは大変である。

そこで、YesNoアラートの結果が出るまで、じっと待っていて、結果を受け取ってから元の場所に戻るというプログラムを作ろうとしたが、失敗した。別のスレッドで、アラートだけ表示し、その結果を受け取るまで、ループ待ちする、といった裏道を試してみたが、うまく動作しなかった。

それで、結局、次のようにした。