福野泰介の一日一創 - create every day

PWAでエッジ化するウェブ、JSこどもプログラミング「progrun」iOS11.3でオフライン対応!

2018/04/10
#web #js #progrun #opendata 

IchigoJam開発きっかけのひとつ、タブレット用こどもプログラミング環境、progrun

石川高専のインターンOB生と一緒に開発し、2012年の一日一創にてリニューアル。 親子体験会、2013年おもしろフェスタで子供100人体験、鯖江のシニア向け講座、鯖江市役所JK課向け、デザイナー向けにも活躍!福井県、鯖江市の写真オープンデータを使えるようにして、オープンデータ推進にも一躍担ってもらいました。
親子プログラミング教室子供100人体験シニアプログラミング教室JKxプログラミング

ネットワーク不要で使えて便利だった Application Cache API(廃止)が、PWA(Progressive Web Apps)となって還ってきました!(iPhone/iPadがiOS11.3から部分対応)

久しぶりに、progrunのメンテナンス(ServiceWorkerでのキャッシュと、manifest.jsonでアプリ設定対応)。ホームに追加して起動すると、以後、オフライン環境でも遊べます。(ネットワークへのアップロード、ダウンロードはまだできません。ローカル保存機能とかあるといいかも)

スマホ、タブレット、PC対応こどもプログラミング環境「progrun」PWA版 - src on GitHub

当時使っていた説明資料、アップしておきます。手軽なJavaScriptプログラミングはじめとして遊んでみてください。

progrunを作って試して分かったこと
- 文字を書くだけで、絵が出るテキストコーディング体験は新鮮で楽しい!
- 簡単に何度も作り直せるコンピューターものづくりの本質に触れてもらえた
- 小学生にとってアルファベットの小文字は馴染みが薄い(→ IchigoJam BASIC は大文字基本)
- プログラミングにハマル子は一定割合いる!
- 簡易環境では次のステップを示しづらい(複雑にすると入り口のハードルが上がる)
- タブレットを買ってあげちゃうと余計なことに使いそうで嫌という親の声(→ ネット不要のIchigoJam)

子供が何か創りたいと言ったらチャンス!(そもそも、子供はデフォルト、クリエイター)

links
- KidsIT - 子供とプログラミングが遠いという危機感
- なぜ今デザイナーにプログラミングなのか? P4D in FUKUI 開催レポート
- かんたんプログラミング環境「progrun」を使った福井県児童科学館での教室開催中(動画付き)
- 一見分かりやすいビジュアル言語 vs 想像かき立てるテキスト言語

一見分かりやすいビジュアル言語 vs 想像かき立てるテキスト言語

2016/05/15
#IchigoJam #maker #progrun 

首相官邸、政策会議にて、タブレットでコーディング体験環境「progrun」と1500円こどもパソコン「IchigoJam」が現状調査資料内に登場しています。 共に、ビジュアルプログラミング言語と分類されてしまっていますが、どちらも前線で使われるJavaやSwiftなどと同様のテキストプログラミング言語へのステップアップを意識して作ったものです。


「プログラミング教育」の実施状況に関する現状調査 調査報告書(概要版)
教材(使用プログラミング言語・機材)(1)の図より

こども向けプログラミング言語として、Scratchなどビジュアル言語がよく登場しますが、レポートによると約半分。IchigoJam、progrunがビジュアル言語カウントだとすると、もしかしたらテキスト言語の方が多いかもしれません。

商業的にも大きく、子供の興味関心とも一致するスマホアプリ、特にiPhoneアプリが自在に作れるようになることをひとつの目標と置き、Swift、Scratch、IchigoJam BASICを比較してみます。


Swift、Xcodeの開発画面の代表的画面、左にプログラムが並び、中央にテキスト、右側に補足情報が出せます。


Scratchの開発画面、Xcode同様、昔ながらのパソコン風メニューがならび右側にはプログラムをビジュアル言語として表現する形となっています。

進む、回る、繰り返すなどのコマンドがブロック上になっているので、メニューから選んでマウスでおいていく手続き型プログラミング。
「緑の旗がクリックされたとき」など、あるイベントが発生した時にその後の手続きが実行される、イベントドリブン。
左下には懐かしのスプライトの文字!キャラクターをオブジェクトとしてとらえ、それぞれにプログラムを置いていく、オブジェクト指向。

Word/Excelと同様、こうした従来のパソコン型メニューは選択肢が多く、とっつきにくいのが難点です。
Swift(Xcode)と同様のイベントドリブン、オブジェクト指向の考え方も同時に登場するので、背景を含めて解説しはじめると大変。
メニューはほぼ日本語化されていますが、漢字が多いのも気になるところ。


IchigoJam BASIC は、マウスを使わないのでキーボード操作のみ。
キーを押すと、文字がでます。
エンターキーで、その行のコマンドがコンピューターへ伝わり、実行されます。
この例では・・・

- LEDコマンドに1を指定して、LEDを付ける → コンピューターからOKと返事がくる
- Scratchのサンプルと同様、キャラ(@くん)を右へ10、動かす

現存するほぼすべてのプログラミングの基本である、手続き型プログラミングのみに絞ることで、シンプルにしっかり基礎が学べます。

この実にあっさりしたモノクロ画面が子供に受けるかが最大の懸案でしたが、実際に体感してもらったところ地味ゲー好き!と言ってくれた子供に後押しされました。 モノクロテキストのみの小説が、時にCGフル活用のハリウッド映画以上の感動や臨場感を人に与えるのと同じく、足りないほどに人の想像力がかき立てられるようです。


更に表示を絞った IchigoJam pocket の新基板の試作が到着。
IchigoJam ミニゲームズで人気のかわくだりゲームを小画面に移植。

#IchigoJam pocket でかわくだりゲーム
プログラミングの楽しさをいかにコンパクトに伝えるか!?挑戦はまだまだ続きます!

関連リンク
- 嫌いな人に教えてほしくない プログラミングは義務教育化できるか? PCNキックオフ講演会 / 福野泰介の一日一創
- 2020年「次世代の学校」 小学校でもプログラミング教育スタート! / 福野泰介の一日一創
- 人材育成におけるプログラミング教育の位置付け等に係る調査報告書

オープンデータと子どもプログラミングの橋渡し - 霞ヶ関子どもデー 内閣官房IT室

2015/07/29
#opendata #IchigoJam #maker #progrun 

日本のオープンデータを推進する組織「VLED」の仲間でもある内閣官房IT室のお誘いあって、 日本政府のオープンキャンパス的なイベント(オープンガバメント?)「霞ヶ関子どもデー 内閣官房・情報技術通信総合戦略室」にて、IchigoJamとprogrunを出展させてもらうことになりました! 「子ども霞が関見学デー」とは、文部科学省の呼びかけで2009年からスタートした、日本政府26府省庁等が同時開催するスゴイイベントです。

教えているのは、助っ人にきてくれた、PCN代表&ナチュラルスタイル代表の松田さん!


オープンデータの写真を使って背景をカスタマイズできるiPad・PC・スマホで動く、プログラミング体験環境「progrun(プログラン)」で、文字がアプリになるプログラミングを感覚を掴んでもらいます。


タブレットでの体験を本格的なプログラミングへの入門にすべく開発した「こどもパソコンIchigoJam」。半世紀の歴史を持ち、30年前に大流行した「BASIC」を使ったプログラミング挑戦。 今回コンテンツは、IchigoJamはじめのいっぽ、IchigoJamミニゲームズに加え、ナチュラルスタイル製人気ゲーム「縄跳びさっちゃん」の改造! 楽しんでくれたようで何よりです!


(「縄跳びさっちゃん CC BY ナチュラルスタイル」を少し短く改造)


IchigoJam Tシャツでお迎えしました!(松田&福野は本日のみ参加)
世界最先端IT国家創造宣言と共に推進するオープンデータによって、ますますITが近くなる近未来、データシティ鯖江同様、プログラミングも使いこなす子どもがどんどん増やしていきたいと思います!


別会議室にはSONYの無線でつながる電子工作おもちゃ「MESH」も!


霞ヶ関子どもデー 内閣官房・情報技術通信総合戦略室
東京都千代田区霞が関3-1-1 中央合同庁舎4号館1階123会議室にて、明日も10:30〜16:00開催です!

平成27年度子ども霞が関見学デー プログラム | ナレッジコネクター + Idea.LinkData
こちらイベント、オープンデータに掲載されているものだけで341!珍しいイベント揃いです!


(追記、2日目にはIT政策も担当する、山口俊一内閣府特命担当大臣の視察もありました!)

こどもプログラムと福井県オープンデータのマッシュアップ - progrun 恐竜ダイブゲーム

2015/05/27
#fukui #opendata #odp #progrun #KidsIT #kosen 

2012年に発表した「progrun(プログラン)」で、こどもがプログラミングに熱中する姿に感動して生まれた、こどもパソコンIchigoJam(イチゴジャム)。PCやタブレットをお持ちの方は、progrunもプログラミングの体験もオススメです。舞鶴高専では、progrunをプログラミングの授業や、子供向けの体験イベントで使ってくれています!

「タブレット用プログラミング体験環境 - progrun(プログラン)」 - スマホでもPCでもプログラミングできます!


恐竜ダイブゲーム - 福井県オープンデータライブラリ使用)

こども用プログラミング環境Scratchと同様、創ったゲームはクラウドに保存でき、誰でもそれを改造できます。写真オープンデータ(odp)に対応しているので、だれかこどもが創ったゲームに、恐竜博物館写真を背景にしてみました。

ゲームタイトルは20文字まで、今回検索窓を新たに設置しました!
おじいちゃんプログラマーの可能性を感じさせてくれたprogrun、プログラミングは世界をつなぎます!

こどもプログラミング x オープンデータ、はじまりの「progrun」odp対応

2014/12/30
#opendata #IchigoJam #progrun 

2014年、こども向けのプログラミング、有志で設立したPCN(プログラミングクラブネットワーク)IchigoJamの発表と大きく進展した年でした。2011年に鯖江市内で要望受けて開催した「親子プログラミング教室」に向けてリニューアルした、iPad向け簡単プログラミング体験環境「progrun」プログラミングすると同時に動く(ラン=BASIC言語でプログラムを実行するコマンド)のでプログラン。

iOS8のアップデートでの不具合修正と合わせて、オープンデータプラットフォームの画像を使うようバージョンアップ。今後鯖江以外からも出てくることが期待される、観光オープンデータを下敷きに、プログラミングの体験ができます。


「めがね 2ボタンではねる」

鯖江市の観光オープンデータから画像を背景に、めがねが動くプログラムを動作。

iPadや、iPhonePS4Raspberry Pi安価なAndroidタブレットなど、Webブラウザで動作するので、簡単に始められて、すぐに共有できるのが特徴です。

progrunで作った作品は、こどもプロコンで受賞するなど、多くの子供に使ってもらっています。また、デザイナーや、おじいちゃんおばあちゃんからJKまで、幅広く初めてのプログラミング体験ツールとして活躍してます。(16進数を使った高度な技も!)

参考リンク
- PCNこどもプロコン
- おもしろフェスタ2014
- 義務教育にすべきか?
- PCN始動!
- 福井県企画で採用、progrun
- JKプログラミング体験
- おばあちゃん要望でiPhone対応
- PS4でも動きます
- 16進数でスタンプづくり
- デザイナーもプログラミング
- MashupAward9でCodeIQ賞
- Raspberry Piでも動きます
- シニアもプログラミング
- 100人体験、おもしろフェスタ2013
- 安いAndroidタブレットでも動く
- 鯖江で親子プログラミング教室

実装力がスゴイ!こどもプロコン最優秀賞「☆スペーストラベル☆ by 永宮正陽」

2014/10/26
#KidsIT #IchigoJam #progrun 

オープンデータやIoTなど、ITを使った豊かな社会の創り手を増やそうと PCN (プログラミング クラブ ネットワーク) によって企画した「こどもプロコン2014夏」。小学生による力作が届いた、公開審査会&表彰式。デモと、プログラムのプレゼンテーション審査を行い、初代チャンピオンに輝いたのは、小学5年生の永宮正陽くん。宇宙船に乗って惑星を避けながら地球まで帰るオリジナルゲーム「☆スペーストラベル☆」。


乱数による惑星出現、キー入力による宇宙船の移動と移動範囲の制限、衝突判定、クリア判定、スコア計算。ゲームのロジックをプログラミングで表現する力、しっかり自分の物にしています。


ゲーム画面、地球までの距離が表示され、上から来る惑星をカーソルキーで避けます。


最優秀賞の副賞として、スポンサーいただいたマルツさんより「子供の科学部品セット」、PCNより「ダンブンとゲーム作り ゲーム6本セット」「こどもパソコン IchigoJam」をプレゼント。


激戦の小学生高学年の部、タブレットのプログラミング体験環境「progrun」を使った作品「インベーダーギャラクシー4 by 山岸達也(小5)」は、プログラムでかっこよくデザインされたキャラと宇宙の背景が美しい。


同じくprogrunを使った小学生高学年の部「ジャンプ!ジャンプ!!ジャンプ!!! by 北川拓人(小5)」。種類の変わるブロックを避けながらゴールを目指す。


小学校低学年部門、最優秀賞「むげんにおわらないゲーム by 松田康然」。絶対拾えないパンを求めてさまよい続ける哲学的なゲームとなっている。ベースとなるゲームを改造して、自分なりの世界観を表現できるプログラミングの自由さが表れる。


こどもプロコンPCNデジタル金メダルをかけて、記念撮影。


IchigoJam周辺機器としても使えるメダル化にした「マトリックスLEDバッジ」」。IchigoJamとつないで、オリジナルバッジをプログラミングでつくるワークショップを実施(16進数を使うテスト / progrun)。正陽くんの要望を受けて、LOCATE命令の省略形LOCに対応するバージョンアップを施した、IchigoJam 0.8.8 をその場で書き込んでプレゼント。こども達の成長、楽しみです!


「PCNこどもプロコン2014夏 結果発表」
受賞作品の動画も紹介!

ハンダ付けしてマイコンづくり プログラミング&ミニ四駆体験 おもしろフェスタ2014

2014/08/09
#KidsIT #IchigoJam #mini4 #progrun 

サンドーム福井にて、恒例子供向けのイベント「おもしろフェスタ2014」が開催されました。今年は3社有志でつくるPCN(プログラミングクラブネットワーク)としての出展。こどもBASICパソコン"IchigoJam" のハンダ付け組み立て体験と、ロボット相撲プログラミング体験を提供。


IchigoJamハンダ付け組み立ての最速記録を持つ福井高専学生と保護者の方が見守る中、ハンダ付け体験。小学3年生の子でハンダ付けは初めてとのこと。中には、もうハンダ付けは4回目という小学5年生の子も!


福井高専IchigoJamハンダ付けマスターによる組み立て動画をGoogle Glassで撮ってもらいました。組立方法はいろいろ工夫してやってみるのがおもしろいです。LEDは足の長いほうが右側に来るように挿し込みましょう。抵抗は4種類あるので、写真を参考に!
- プリント基板キット版 IchigoJam
- プリント基板完成版 IchigoJam


自分でつくったコンピューター、マイ・コンピューター、マイコン!
早速プログラミングも体験してもらいました。


IchigoJamにモーター制御を加えて昆虫ロボットによる相撲対決。
人間操縦 vs コンピューター制御、どっちが強い!?


ナチュラルスタイル社製のIchigoJam用ゲームをその場で打ち込んで、遊んで、改造するコーナー。縄跳びゲーム「なわとびさっちゃん」のスコアをチートして50倍や10000倍にして遊んでいる子供!


ict4e社による、iPadを使ったプログラミング体験、progrunは女の子に人気な様子。見た目のかわいさ、大事ですね。IchigoJam、電飾キットも考えよう。


ナチュラルスタイル提供ミニ四駆コーナー。速そうなミニ四駆を選んでレースする無料体験レースが楽しそう。


その場で買って組み立てるコーナーも人気でした。ミニ四駆で分かる摩擦力、数学とリアルをつなぐ物理の楽しさ知ってもらうきっかけに!


今年は台風のため、2日目は中止となってしまいましたが、今後のPCN活動をお楽しみに!


子供の科学部品セットが当たる! 福井こどもプロコン2014夏 開催中!
協賛:株式会社マルツ電波
主催:プログラミングクラブネットワーク(PCN)
連絡:hello@pcn.club

かんたんプログラミング環境「progrun」を使った福井県児童科学館での教室開催中(動画付き)

2014/03/21
#KidsIT #progrun 

子供向けに石川高専生と開発したかんたんプログラミング環境「progrun(プログラン)」、コンピューターおじいちゃんを生み、MA9にてCodeIQ賞を受賞デザイナー女子高生など幅広くプログラミングを知ってもらうきかっけとして活躍しています。

この連休、福井県児童科学館「エンゼルランドふくい」にて開催中のじどうかんフェスタ2014のひとつのコーナーとして、株式会社ict4e協力の元、こどもプログラミング教室(午前中のみ2回)が開催されています。一人でも多くの子供達が今の時代、切っても切り離せない、またこれからの時代の要となるコンピュータに興味をもってもらうきかっけになればうれしいです。


progrunは、プログラミングとランの造語。キーボードからJavaScript言語を使ってプログラムを入力すると同時に動く、ラン(run、古くからあるBASIC言語でプログラミングでプログラムを実行する命令)されます。その特徴が分かる15秒の動画です。


ict4e作成の教材を紙で配布し、まずは真似て打ち込んでもらいます。こちらは走る車プログラミング中。完成したものはこちら


真剣な表情がうれしい。エンゼルランドふくいで用意してくれた、iPad Air、かわいい衝撃緩衝と台、取っ手を兼ねたカラフルケースがいい!(MYCARRYINGCASEキッズArmorBoxキックスタンドカバーケース on Amazon


プログラミング教室は、21日〜23日、10時からと11時から2回開催!お近くの方、ぜひどうぞ!

福井県児童科学館「エンゼルランドふくいじどうかんフェスタ2014

もしJKが「インパクトマッピング」を読んだら

2014/03/02
#opendata #KidsIT #progrun 

鯖江市役所JK課に内定している女子高生のみなさんよりアプリをつくりたいというリクエスト。アプリのつくりかた超入門編。毎年受け入れる高専生インターンと違って、プログラミングを専門としていない人もいるので、鯖江中学校での職業講座を踏まえ、できるだけやわらかい言葉を心がけます。

今回は使用したのは、かんたんプログラミング環境"progrun"と、福井在住チェンジビジョンの平鍋健児さんが「ソフトウェアで世界を変えたい!と思っている人に読んでもらいたくて訳しました。」と翻訳出版した「IMPACT MAPPING / インパクトマッピング」のエッセンス。まだ、高校生に全文読んでもらったわけではありません。

アプリ超入門の流れ
- アプリ/コンピューターは人類が生んだすごい道具
- アプリ=アイデアxデザインxプログラミング
- 一番難しそうに見えるけど、実は小学生でもできる簡単なもの(プログラミング)
- なぜ?だれが?どのように?を考えて、最後にできるのがアプリ(アイデア)
- 使い続けるアプリだから、かわいいの大事(デザイン)

こちらがアウトプットのひとつ「待ち時間わかっちゃう君!!」。学校に通う道のりがおくうという学生、大きな越前和紙に、学校に楽しく通えるようになることをゴールに、アクターと、そのアクターに与えるインパクトをマインドマップで描いてもらいました。最もインパクトあるものを選んで、「簡単に時刻表みれるように」を実現するアプリのイメージを描いてもらい、発表してもらったアプリの原石です。

「バス、電車に楽しく乗る」福井では社会人になるとほとんど車を使ってしまうので、その重要性を忘れてしまいますが、毎年繰り返される大きな課題です。鯖江市営つつじバスAPIや、公共交通オープンデータを、学生視点で学生自身が楽しく使えるようなアプリが作ることができれば、日本中、世界中で使われるようになるかもしれません。


(progrunで、プログラミング体験中のJKら)

- Impact Mapping - Slide Share(デブサミ2014、平鍋健児さん講演資料)
- 楽しくプログラミングを学ぶ機会を広げよう「progrun」スマホ対応 #KidsIT #app #opendata / 福野泰介の一日一創
- 魔法、使ってみたくない?鯖江中学校で職業講座、プログラマーというお仕事 #KidsIT #sabae / 福野泰介の一日一創


2014/3/11「進化する、やわらかい公共」 - 鯖江市文化の館(図書館) 多目的ホールにて

鯖江市役所JK課が与えるインパクトとは!?

楽しくプログラミングを学ぶ機会を広げよう「progrun」スマホ対応

2014/02/28
#KidsIT #app #opendata #progrun 

2012年一日一創で発表した、プログラミングしたと同時に動く(ラン)するので、「progrun(プログラン)」。MA9でCodeIQ賞をいただき、コンピューターおじいちゃんを生んだオープンデータ対応版を経て、今回おばあちゃん待望のスマホ対応、デザインリニューアルです。(背景写真として、福井県オープンデータライブラリや、データシティ鯖江の写真が使えます)

鯖江出身のサイバーエージェント藤田さん「キッズプログラマー奨学金 第一期奨学生募集 | 株式会社サイバーエージェント」の発表にて「優秀なプログラミング人材のほうが社会的に重用される時代になってきていると感じています」とコメント。DeNA創業者南場さん、楽天三木谷さん他、海外でもスティーブ・ジョブス氏オバマ大統領など、プログラミングの重要性を話すコメントが紹介されることが多くなってきました。

先日、鯖江中学校でプログラマーという仕事について話してきても感じたのは、機会の少なさ。かつてはMSXのように、子供向けにプログラミングへの入り口が開かれていたのが、コンピューターが社会に浸透したために、逆に遠ざけてしまっている現状はまずい。スマホ対応で、お父さんお母さんからちょっと見せてあげることができるはず。

プログラミングを学ぶ方法はいくつもありますが、子供自信が自らプログラミングを学び続けたいというところにいかにもっていくかが重要です(学び方を学ぶ)。教室ではなく、クラブ活動としてこども達が自主的に取り組めるような場作りに、福井の有志で挑戦しようと企んでいます。

iPad/PC用レイアウトもデザインリニューアル!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像