キッズプラザ大阪では、2020年から、PEAS motch!をつかったひとコマアニメ制作を行っている。小学校低学年、幼稚園児でも簡単にアニメが作れる。 アニメを作る方法は、絵を描いた順番がアニメになるという、きわめて簡単な方式だ。PEAS motch! は図形エディタになっており、入力した線の形、色、入力した線の順番を変更することができるので、アニメーションを作るビジュアルプログラミングと考えられなくもない。9VALきゅうべえラーニングにも採用された。 では、この方式を使ってどんなアニメーションを作るとよいのだろうか、キッズプラザでのワークショップ、実際に子供たちが作ったアニメをみた観客の反応から、作るとおもしろいアイデアや重要な点を書き留めておく。 重要な点、「アニメをつくっているという意識を持つこと」 PEAS motch! や 9VAL のユーザーインタフェースは、お絵かきソフトにプ

キッズプラザ大阪でのワークショップ用に、PEAS motch!を開発した。 このソフトは、小学校低学年や幼稚園の子供たちでも、楽しくコンピュータを使って創作活動ができるように、キッズプラザの担当者といっしょに作り上げたソフトだ。 このソフトがプログラミング学習の役に立つとよいと思い、このジャンルでどういう位置づけになるのか、調べていると、どうも、ビジュアルプログラミングと関係ありそうなことがわかってきた。 ビジュアルプログラミングは、スクラッチのようなブロックを組み立てるもののことをいうと思いがちだが、スクラッチはテキストをブロックで置き換えただけなので、テキスト言語に近い。ビジュアルプログラミングはもっと広い概念で、テキストでは考えられない自由な発想でプログラムを考えてみようというものらしい。 その代表が「ビスケット」で、これがつくられたときは、結構、いろんな研究があったらしい。ところが

ラズベリーパイ版 PEAS motch! の開発を始めることにした。 PEAS motch! は、9VAeきゅうべえをベースに開発しているので、ラズベリーパイ版もすぐできそうだ。 特長は、ラズベリーパイ用、480x320 ペンタッチディスプレイに収まること。 ラズベリーパイ色のかっこいい画面デザインがあがってきたので、そこに、9VAeきゅうべえの各機能をわりあてていく作業を行う。

キッズプラザ大阪、コンピュータ工房で、1/25から3/31まで、「へ・ん・し・んアニメーション」というタイトルで、PEAS motch! を使った１コマアニメーションを作成するワークショップを行っている。土日祝日は、１回４０分の入れ替え制で、平日は自由入場となっている。ここでは、ワークショップが始まった１週間後の平日の様子をレポートする。 ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜 １コマアニメーションとは 米国では、ホワイトボードアニメーションと呼ばれ、動画の注目度を高める手法として注目されている。 アメリカで爆発的な人気！ホワイトボードアニメーション5つの動画実例 | MOBERCIAL １コマアニメーションでワークショップ機材を説明するとこんな感じ 大型ディスプレイ１台、WindowsPC（教師用１台、生徒用１０台）、ワコムペンタブレット（Intuous CTL

キッズプラザ大阪、コンピュータ工房で、1/25から3/31まで、「へ・ん・し・んアニメーション」というタイトルで、PEAS motch! を使った１コマアニメーションを作成するワークショップを行っている。土日祝日は、１回４０分の入れ替え制で、平日は自由入場となっている。ここでは、ワークショップが始まった日曜日の様子をレポートする。 ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜 １コマアニメーションとは 米国では、ホワイトボードアニメーションと呼ばれており、動画の注目度を高める手法として注目されている。 アメリカで爆発的な人気！ホワイトボードアニメーション5つの動画実例 | MOBERCIAL １コマアニメーションでワークショップの機材を説明すると 大型ディスプレイ１台、WindowsPC（教師用１台、生徒用１０台）、ワコムペンタブレット（Intuous CTL-490）

１月２５日から、キッズプラザ大阪のコンピュータ工房で、幼稚園から小学校低学年向けに「書き順アニメ（１コマアニメーション）」を作るワークショップを行なっている。 ようこそキッズプラザ大阪へ 〜遊んで学べるこどものための博物館〜 使っているソフトは、「PEAS motsh!」という 9VAEきゅうべえを改良したソフトだ。 http://peasmotch.jpn.org １週間たったので、その経過とプログラミング学習との関連について感想など紹介したい。 ワークショップの内容 対象：４歳以上 機材：Windowsパソコン＋ワコムペンタブレット　１０セット ソフト：「PEAS motch!」 内容：書き順アニメーションを作る 「PEAS motch!」は今回のワークショップ用に開発したソフトで、絵を描くだけで書き順アニメーションができる。 小学校低学年の子供達に教えることは相当難しい。 当初、アニ

2018/1/25 からキッズプラザ大阪でワークショップをやることになった。 今回は、ワークショップ用に画面デザインを大幅に変更し、きれいで、わかりやすくした。できたソフトは、PEAS motch! という名前になった。 ひとコマアニメーション「PEAS motch!」がすごい。 - dnjiro’s 9VAe blog PEAS motch! Android版ダウンロード ワークショップの内容は「書き順アニメ」なのだが、もっと適当な言葉がないか探してみたところ「ホワイトボードアニメーション」という言葉が近いようだ Whiteboard animation - Wikipedia ホワイトボードアニメーションとは ホワイトボードにイラストを書く様子を撮影し、早送り再生したもの アメリカで専門の制作会社もあるらしい。 アメリカで爆発的な人気！ホワイトボードアニメーション5つの動画実例 | M

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

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は、無料で、ビールを飲みながら、こんな質問がで

9VAeきゅうべえ Xamarin版の開発を始める。 9VAeきゅうべえはいろんなところに移植してきたが、だいたい以下の手順でやってきた。 新しい環境に移植するときのパターン 動作する開発環境をコピー（ダウンロード）する 動作するサンプルを入手する サンプルを改造し、必要な機能の実装方法を確認する 最初は悩むよりも知っている人に尋ねる方が早い 出来上がってきたら、入手した情報をまとめていく 自分が得た知識と知っておくべき知識を比較し、間違えている部分を修正していき、徐々に完成に近く 今まで、皆この手順だ。勉強せずに少しずつ作っていき、最後に勉強して間違えていた部分を後から修正するという感じだ。作りながら勉強するといった方が聞こえはいいかも。わからずに作り始めるので、時々、別のサンプルから作り直すことがある。iPad版の場合は３回作り直した。最後には、最初の作り方のどこが悪かったかわかるよう

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のサン

9VAeきゅうべえiPad版がだいたい動くようになったので、GitHubでプロジェクトを公開しました。誰でもこれを修正し、ストアアプリを作って販売しても構いません。今の状態でも、SVGイラストからアニメGIFを作るのに使えますが、UI部分がイマイチなところがあるので、皆さんの知恵を借りたいです。 GitHubアドレスはこちら g GitHubにプロジェクトをあげる際に以下の記事を参照した。 今さら聞けない！GitHubの使い方【超初心者向け】 | TechAcademyマガジン Macには最初から、gitコマンドが入っており、簡単に登録できた。手順は以下のとおり。 １．GitHubに新しいリポジトリを作成する GitHubにアカウントを作る（無料）(https://github.com) GitHubにログイン 「New repository」ボタンをクリック 「Repository na

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 De

先日、関西教育ITソリューションEXPOで、「教育改革を踏まえた教育情報化の重要性〜プログラミング教育の動向〜」文部科学省生涯学習政策局情報教育課　情報教育振興室長　安彦視学官のセミナーを聴講し、小学校のプログラミング学習について勉強しました。 いくつか誤解していた点が明らかになったので書きます。 これは小学校の学習指導要領の話であって、プログラミングをどう学習すれば良いかという話ではない点に注意。プログラムが好きな人は学習指導要領とは関係なく、どんどんプログラムの勉強を進めてほしいです。 誤解１：プログラミングという教科ができるわけではない。 プログラミングを教えるのは、算数や理科と言った、既存の教科の中です。今までの教科の中に、プログラミング学習を取り入れて、学び方を改革していきましょう。ということみたいだ。プログラミングを目的にした教科ができるわけではない。 誤解２：プログラミング言

9VAeきゅうべえiPad版がだいぶ出来上がってきた。 綺麗なiPhone/iPadアプリを作るのは、初心者の私には難しいので、iPhone/iPad用9VAeを作るプロジェクトを公開し、誰でも、9VAeきゅうべえアプリを自分で作れるようにしようと考えている。 そのため、9VAeライブラリの作り方を調べた。 iPhoneシミュレータ用と実機用のライブラリは違う 新規プロジェクトからライブラリを作るのは簡単だったが、ビルドした時のライブラリがどこにできるかが最初わからなかかった。これは、設定を変更すれば、プロジェクト内部に出力できるみたいだ。 次に、作成したライブラリを使うと、シミュレータでは動作するが、実機では動作しないという症状になった。これは、シミュレータMacはインテルでCPUが違うので当然か。このあたりを、もくもく会で、サンフランシスコ在住のプログラマーから教えてもらった。いろんな

9VAeきゅうべえiPad版を開発中。パソコンアプリからの移植がだいぶできてきたが、対応の難しい点がいくつか残っている。大きなのは次の２つだ YesNo入力待ちが使えない。 ファイル開く、保存するダイアログがない。 YesNo入力待ちができない問題 YesNo入力待ちというのは、アプリの途中でユーザーの確認を求めて、続きの処理を切り替える機能だ。例えば、「ファイルを上書きしても良いですか？はい、いいえ、キャンセル」で、後の処理を切り替える。 昔のパソコンアプリでは、こういう書き方をよくしていた。 iOS（最近のアプリの作り方）の場合、こういったアラートを表示することはできるが、その結果を受け取るまで、プログラムを止めておいて、結果を受け取ってから続きの処理を行う。ということができない。プログラムを独立性の高い小さなモジュールに分けて作りなさいということかな。 そうなので、ユーザー入力待ちが

9VAeきゅうべえiPad版開発中 iPhoneで作成したデータをどう取り出すかを調べた。 保存フォーマットはSVG。アニメGIFはアルバムに保存すればネットにアップできるが、SVGをアルバムに保存しても SVGデータをiPhoneのSafariではアップロードできない みたいだ。SVGをカメラロールに保存しても、表示されないし、取り出すこともできない。他の方法を調べてみると iTunesでパソコンとファイル共有する これは使えるみたいだ。 iTunesを使ったファイル共有方法 - Qiita この場合、iPhoneでは普通にドキュメントとしてSVGで保存すれば良いので何もしなくて良い。ネットにSVGをアップする場合は、パソコンのiTunes経由でいくことにする。 ただパソコンがあるなら、パソコン版9VAeを使えば良いのではという気もする。結局 アニメGIF作成ソフトとして使う場合は、iP

9VAeきゅうべえiPad版開発中。 完成した、iPad版はこちらです アイコンボタンのデザインの作り方がわかった。 サンプルプログラムのどこにアイコンボタンが入っているのかわからなかったが、プロジェクト＞general＞App Icons and Launch Images＞App Icons Sourceをクリックし、「AppIcon」に変更すると、プロジェクトに、「Images.xcassets」というフォルダが追加された。 これを選択すると、何種類かのアイコンが空の箱で出現し、そこに、png画像をドラッグするとそれがアイコンになるようだ。 サイズの違うpngアイコンを何種類か作るのに、9VAeきゅうべえの連番PNG出力を使った。つまり１秒の静止画を秒１コマで出力して作成した。透過PNGも作れるので、角丸アイコンも簡単に作れた。 「Launch Image Source」は「Use

小学校でプログラミングを教えることが必修になります。 今までプログラムしたことがない小学校の先生がプログラムを教えるのは相当難しいでしょう。そこで 小学校ではコーディングは教えなくて良い となっているようです。つまり、BASICやJavascriptなどのプログラム言語を教える必要はなく、考え方を教えるのが目的で、それなら、小学校の先生でも教えられるとしています。例えば料理の手順もプログラミングです。これなら教えられるでしょう、というわけです。 コンピュータを使わずにプログラミングを教える方法 これを「アンプラグド」と呼んでいます。例えば誰かがコンピュータの役割をします。人間の言葉で手順を伝え、コンピュータ役の人間が言葉を聞いてその通りに動作すると、コンピュータがなくてもプログラミングの考え方が教えられるわけです。 人間の言葉を使うので、プログラム言語を覚える必要がなく、実施は簡単です。

9VAeきゅうべえiPad版を開発中 iPhone実機でかなり動くようになってきたので、OpenclipartからSVGイラストを読み込んで、アニメGIFを作ってみよう。 iPhoneのSafariからSVGをダウンロードできない パソコンだとSVG画像を右クリックし、画像を保存すると取得できるが、iPhoneのSafariだとそれができないみたいだ。 iPhoneでファイルをダウンロードする方法 | AppBank – iPhone, スマホのたのしみを見つけよう ZIPならSafariでもダウンロードできるらしいが、SVGを長押ししてもダウンロードできない。そこで SVGファイルのURLからSVGを取得して読み込む機能をつける ことにする。OpenclipartのSVGのURLをコピーして入力すれば、ダウンロードして、9VAeきゅうべえに読み込みできれば嬉しい。読み込めたらダウンロード