dnjiro’s 9VAe blog

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

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

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

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

 

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

 

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

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

 

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

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

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

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

 

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

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

 

誤解3:「アンプラグド」(コンピュータを使わない方法)を推奨しているわけではない

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

 

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

 

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

 

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

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

 

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

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

 

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

 

f:id:dnjiro:20180626065814g:plain

 

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

 

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

 

 

 

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

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

 

 

 

 

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

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

  1. YesNoアラートでは、とりあえず、1回目はキャンセルする。その時、もう一度実行するにはどこから実行すれば良いかを覚えておく。
  2. YesNoアラートを表示して結果を取得する。
  3. 最初に覚えておいた場所からもう一度実行する。到達したYesNoでは、その結果を与えて続きを実行する。
  4. プログラム中の全ての YesNoアラートにこの処理を入れる。

これで、かなりの処理は解決できたが、YesNo分岐を連続して行なっている箇所があった。その場合、途中から上手に実行できない。うむむ

 

とりあえず、うまくできたところもある。ファイルを閉じる時に、保存するかどうか尋ねる画面。この入力結果によって続きの処理を変える。

f:id:dnjiro:20171115091857p:plain

 

 

 

9VAeきゅうべえiPad版 SVGデータはiTunes経由。画面回転に対応した

9VAeきゅうべえiPad版開発中

 

iPhoneで作成したデータをどう取り出すかを調べた。

保存フォーマットはSVG。アニメGIFはアルバムに保存すればネットにアップできるが、SVGをアルバムに保存しても

 

SVGデータをiPhoneSafariではアップロードできない

みたいだ。SVGをカメラロールに保存しても、表示されないし、取り出すこともできない。他の方法を調べてみると

 

iTunesでパソコンとファイル共有する

これは使えるみたいだ。

iTunesを使ったファイル共有方法 - Qiita

この場合、iPhoneでは普通にドキュメントとしてSVGで保存すれば良いので何もしなくて良い。ネットにSVGをアップする場合は、パソコンのiTunes経由でいくことにする。

ただパソコンがあるなら、パソコン版9VAeを使えば良いのではという気もする。結局

  • アニメGIF作成ソフトとして使う場合は、iPhone/iPadだけで完結できる。
  • SVGを作りたい場合、iPhone内部ではSVGで保存されているが、データを取り出すにはパソコンが必要。となると、パソコン版9VAeで作った方が簡単。

 

画面回転への対応

QVAeLibは画面サイズ変更に対応しているので、画面回転とその時の画面サイズを取得できれば対応できる。その方法は次の記事を参照した。

EZ-NET: iPhone 回転時にオブジェクトをアニメーションで移動する : Objective-C プログラミング

画面回転にも対応できるようになった。横画面で起動すると。

f:id:dnjiro:20171108163332p:plain

縦にするとこうなる。

f:id:dnjiro:20171108163452p:plain

9VAeきゅうべえiPad版 アイコンボタンができた。

9VAeきゅうべえiPad版開発中。

完成した、iPad版はこちらです

アイコンボタンのデザインの作り方がわかった。

サンプルプログラムのどこにアイコンボタンが入っているのかわからなかったが、プロジェクト>general>App Icons and Launch Images>App Icons Sourceをクリックし、「AppIcon」に変更すると、プロジェクトに、「Images.xcassets」というフォルダが追加された。

これを選択すると、何種類かのアイコンが空の箱で出現し、そこに、png画像をドラッグするとそれがアイコンになるようだ。

 

サイズの違うpngアイコンを何種類か作るのに、9VAeきゅうべえの連番PNG出力を使った。つまり1秒の静止画を秒1コマで出力して作成した。透過PNGも作れるので、角丸アイコンも簡単に作れた。

「Launch Image Source」は「Use Asset Catalog...」のままにしておいて、「Launch Screen File」を「MainStoryboard」にするとアイコンをクリックすると、9VAe画面がすぐ表示されるようになった。

 

アプリ名の変更は簡単

今まで、「DrawPad」というサンプルアプリのままで、ここまできたが、アプリ名を「9VAe」に変更するにはどうしたらいいか、今まで、プロジェクトの名前を変更するのに苦労してきたが、Xcodeの場合、左ペインの一番上の「DrawPad」を「9VAe」に変更すると必要な変更箇所を全て「9VAe」に変更してくれたみたいだ。えらい。

先頭を数字にして良いのかという疑問があるが、当面、9VAeのサンプルプロジェクトを作るのが最初の目的なので、これで良いとして進める。割とそれらしいアイコンボタンができた。

f:id:dnjiro:20171107101020p:plain

 

次は画面回転に挑戦

iPhoneの場合は縦型でないとUndoボタンが押せなくなって使えなくなるのだが、まあ、回転させるとどうなるか、みておかないといけないだろう。

 

回転処理の記事を調査

【Objective-C】iOS8になり、動画の縦横回転の実装が難しくなった話 - ttr-hamasaki's blog

 

EZ-NET: iPhone デバイスの回転を検出する : Objective-C プログラミング

 

[iPhone 開発メモ] 本体の回転を検知する | Sun Limited Mt.

 

 

小学校のプログラム学習で教えてほしいこと

小学校でプログラミングを教えることが必修になります。

今までプログラムしたことがない小学校の先生がプログラムを教えるのは相当難しいでしょう。そこで

 

小学校ではコーディングは教えなくて良い

となっているようです。つまり、BASICやJavascriptなどのプログラム言語を教える必要はなく、考え方を教えるのが目的で、それなら、小学校の先生でも教えられるとしています。例えば料理の手順もプログラミングです。これなら教えられるでしょう、というわけです。

 

コンピュータを使わずにプログラミングを教える方法

これを「アンプラグド」と呼んでいます。例えば誰かがコンピュータの役割をします。人間の言葉で手順を伝え、コンピュータ役の人間が言葉を聞いてその通りに動作すると、コンピュータがなくてもプログラミングの考え方が教えられるわけです。

 

人間の言葉を使うので、プログラム言語を覚える必要がなく、実施は簡単です。

この理屈は一理ありますが、どうもしっくりきません。

 

右向け右、半歩前に進め、といってその通りに動く、というのは、昔からやっており、何も新しくないからです。

 

プログラミングのすごさとは何か

私はマイコンができた頃からプログラムを始め、今もプログラムを作っていますが、子供たちに何を伝えてほしいかというと、

  • プログラミングは、複製と修正が簡単で、それを繰り返せば、すごいことができる

ではないかと思っています。これをなぜ第一にあげるかというと、

  • 生物は身体を複製するために遺伝子を持っている。その修正を繰り返し、環境に適応する個体を生み出してきた。
  • 複製と修正は実は難しい。これが簡単にできるものは、プログラミング(ソフトウェア)しかない。

複製と修正が簡単という特長によって、世の中が大きく変化しました。

  • 手書き文書がワープロになった。
  • 印刷がDTP(デスクトップパブリッシング)になった。
  • インターネットがあっという間に普及した。
  • 人間が AI将棋に勝てなくなった。

ソフトウェアの進歩のスピードが人間の想像を超えるのは、複製のコストゼロ、修正が簡単という特長があるためです。

 

複製と修正が簡単で、それを繰り返せば、すごいことができる

こういう魔法のようなものが世の中に存在し、社会を変えていくのだ、ということを小学生に上手に伝えるのが、小学校のプログラミング学習の目的ではないでしょうか。

 

アンプラグドでプログラミングを教えると、これが全く伝わりません。どうなるかというと、

 

コンピュータ役の子供に手順を正確に伝えるのは大変な手間です。なかなか上手に伝わらず、思った結果が得られません。その作業を行うのに大変な時間がかかります。人間がやれば簡単にできることが、コンピュータでやると全然できない。コンピュータはなんてバカなんだ。という経験が残るでしょう。

 

「コンピュータはあなたたちの想像しているより相当ばかなのです」まあその通りなのですが、そんなことを伝えるために、プログラミング教育をやるは、それこそ馬鹿なのではと思ってしまいます。

 

なぜ、こうなるかというと、アンプラグドでやるからです。複製(同じことを繰り返す)が瞬時にできるのはコンピュータしかありません。それを人間がやるから手間がかかるので、全くすごさが感じられないのです。

 

私が言いたいのは、

コンピュータでやらないとプログラミングのすごさは伝わらない

ということです。

  • コンピュータで何かを入力する
  • 修正する
  • これを繰り返すと、最初はできそうになかったものができる

という体験が重要と思います。修正の繰り返しがプログラミング作業です。これは小さな修正の繰り返しなので、実はそう難しいことではない。これを積み重ねていくことで、大きな目標に到達する。これを体験させることが重要と思います。

 

その方法として、Scratchやビスケットや、IchigoJam がありますが、それ以外にもたくさんあるでしょう。もし、コーディングが難しければ、コーディングをしなくても同じ体験ができるアプリを探す、もしくは、作るべきではないでしょうか。

9VAeきゅうべえは、その目的で使えるように開発しています。

 

コーディングを教えるのが目的でなくて良いが、コンピュータでやるべきだ

と思います。

 

 

9VAeきゅうべえiPad版 iPhoneで、SVGイラストからGIFアニメを作ってみる

9VAeきゅうべえiPad版を開発中

iPhone実機でかなり動くようになってきたので、OpenclipartからSVGイラストを読み込んで、アニメGIFを作ってみよう。

 

iPhoneSafariからSVGをダウンロードできない

パソコンだとSVG画像を右クリックし、画像を保存すると取得できるが、iPhoneSafariだとそれができないみたいだ。

 

iPhoneでファイルをダウンロードする方法 | AppBank – iPhone, スマホのたのしみを見つけよう

ZIPならSafariでもダウンロードできるらしいが、SVGを長押ししてもダウンロードできない。そこで

SVGファイルのURLからSVGを取得して読み込む機能をつける

ことにする。OpenclipartのSVGのURLをコピーして入力すれば、ダウンロードして、9VAeきゅうべえに読み込みできれば嬉しい。読み込めたらダウンロードしたファイルは消してもいいか。URLを指定してダウンロード、保存するコードは、以下のようにすれば良いことがわかった。

 

そもそも、iPoneでSVGはどう扱われているのか調べてみると

 

ここでは否定的 

Should you use SVG files for images in an iOS app? - Quora

ここでも、SVGPNGでは、PNGの方が良くて、もしベクターを使いたかったら、PDFを使えと書いてある。

Which image format i should for ios development native ? SVG or PNG? - Stack Overflow

ということで、SVGを使う理由は、イラストを入手して、GIFアニメを作ることと、編集データを保存する目的しかないな。

 

Openclipartイラストからアニメを作成してみて、以下点を改良

  • 点を選択してから、選んだ点を含まない図形の点を表示しない機能(点選択ぼボタン)を「点追加ボタン」でも働くようにした。
  • 描画画面を広げた時に、線の太さボタンが右側に出てきて押せるようにした。
  • ストップボタンで選択の解除ができるようにした。

そうこうしているうちに

テンポラリファイルに書き込みできていないことを発見

シミュレータだと、/tmp フォルダにテンポラリファイルを作成して読み書きできていたが、実機ではできないみたいだ。アプリの領域以外には読み書きできないようにする安全措置。テンポラリファイルの作成場所を変更しないといけない。

  

フォルダの場所についての資料

iOSアプリのファイル保存について - Qiita

NSTemporaryDirectory()を使うと良いみたいだが、これを使っても保存できなかった。ファイルを作成してからパスを与えるといった方法を取らないといけないのかも。もしくは、同時に2つのファイルを fopenできないのかもしれん。

 

原因を発見。NSTemporaryDirectory にも書き込みはできていた。しかし、tmpnamを使っていたが、mkstempを使うべきと書いてあったので、そちらに変更したが、関数の動作が異なるので、動かなかったみたいだ。

 

  • tmpnamは名前だけ取得し、テンポラリファイルは作らない。
  • mkstempは0バイトのテンポラリファイルを作る。

ということで、かなりの部分が動作できるようになった。

 

iPhoneアプリ GIF Viewerを導入

iPhoneのカメラロールで、GIF再生ができないので、GIF Viewerという外部アプリを導入。このアプリは、

  • カメラロールの中のGIFアニメを検索して表示できるようにしてくれる。
  • Twitterにも投稿できる。GIF Viewerサーバーが mp4に変換して、Twitterに投稿してくれるようだ。

#GIFViewer hashtag on Twitter

 

ということで、9VAeきゅうべえ iPhone実機で作成した GIFアニメがこれ

f:id:dnjiro:20171104171525g:plain