マガジン
記事一覧
子供のプログラミング学習はこうサポートする！JavaScriptでやる『親子で1分間プログラミング』セッションノート パート❶：「サイレントリアル」で始めるテキストコーディング！
今年の夏もKids Code Clubで『親子で1分間プログラミング』オンラインセッションを開催。国内外あわせた多数の親子が、テキストコーディング体験をします。今回は、基本的なプログラミング作業を実体験したあと、２Dキャラクターが画面上を動く「アニメプログラミング」と、カメラを通して体の動きを自動検知するボディトラッキングを使ったAIゲームを作る仕組みについて学習していきます。 本記事では、子供と一緒にプログラミング体験をしつつ、子供の学習をサポートしていこうとされているお
たった500円程度で自分オリジナルの仮想通貨トークンを作って皆に配ろう！（Solana版） － 英語ビデオチュートリアルの解説
ビットコインなどの仮想通貨は実に3千種類以上もあるといわれ、コインを入手するにもあまりに高額なものが多く、価格の変動も激しいのが実情です。このため、子供のご褒美に仮想通貨をと思っても簡単には手が出せません。ところが、コインではなく、その仮想通貨と連携して作る「トークン」は実は簡単に作成することができます。今回はそのプロセスを詳細に解説した英語チュートリアルビデオを日本語で詳しく説明してみたいと思います。 英語に自信のある方は是非ビデオを見ながらトークン作りにチャレンジしてほし
子供と一緒に”プログラミングと英語”を楽しもう！ － Kids Code Club 『親子で1分間プログラミング』冬休みワークショップ
この冬休み期間中にKids Code Clubにてプログラミングの基礎を体験する『親子で1分間プログラミング』オンラインワークショップを開催します（詳細日程は未定: LINEでお問い合わせください）。今夏休みに開催したワークショップと同様、プログラミングの楽しいところ、大切なところを親子で一緒に体験・学習してもらいます。 今回のテーマは「プログラミング英語」！Scratchやビスケットなど、だれでも簡単にプログラミングを始めることができるビジュアルプログラミングツールが人気
背景が動いているように見せる「流し物体」ー 配列の中で要素をグルグル回す方法を解説 －JavaScriptでやる１分間プログラミング
今回から「バーチャルドライビング」のプログラミングを始めますが、まずはどんなものを作るのか、その概要は前回記事を見てください。 ボディートラッキングを利用したベースアプリ前回記事でも説明しましたが、今回はml5.jsのPose NetというボディートラッキングのAIライブラリを利用します。それを使って、ウェブカメラからの映像の中で鼻と両肩の位置をトラックするベースアプリを用意しました。まずはこれを開いてプログラムを実行してみてください 【バーチャルドライブ ベース版１】
ボディートラッキングAIを利用してドライビングゲームを作る － ml5.jsとPoseNetでハンドル操作を検知 － JavaScriptでやる1分間プログラミング
さて、「恐竜ゲーム」では基本的なモノの動きのコーディングをやってきました。図形や画像を継続的に動かしたり、跳ね返りやジャンプをプログラミングで表現できるようになったと思います。 今回からそれを応用してもう一つのゲームを作っていきます。それが、 バーチャルドライビングゲーム です。百聞は一見にしかず。どんなゲームかご覧ください。 もうどんなゲームかお分かりかと思います。青い車が左右に動き、向かってくる障害物（工事中の道路標識）を避けるという超単純なゲームです。ただ、大き
自分の好きな絵をキャラクターにしてみよう！－ p5エディタに画像ファイルをロードする － JavaScriptでやる1分間プログラミング
いよいよ最後の仕上げです。前回まででユニコーン（円形）をスペースバーでジャンプさせ、次から次へと出てくるトレイン（四角形）を避けるという「恐竜ゲーム」の基礎ができました。 ところが、背景もない上にユニコーンは円、トレインは四角と、なんとも素っ気ないデザインです。もちろんそれは意図したところです。つまり、プログラミングの根幹ができるまではこんなシンプルなデザインで十分なのです。ゲームのロジック（ジャンプや衝突など）がしっかりすることにまずは集中し、外観の部分はあとでやればよい
障害物との接触はたった1行で解決！－ クラッシュディテクションのライブラリを利用する － JavaScriptでやる1分間プログラミング
さて、これまでのコーディングで次のことができるようになりました。 ✅ ユニコーン（円形）がスペースバーでジャンプする ✅ 地面でもジャンプ中でもユニコーンを左右の矢印キーで移動させる ✅ トレイン（四角形）が右からランダムに登場し、左に流れていく ユニコーンのジャンプは当然、障害物を避けるためですが、今のところトレインの四角と接触しても何も起きません。そこで今回はこの「接触」を処理するコードを書いていきます Collision（=衝突）を検知するキャンバス上にある物体が
ゲームの”障害物”もクラスで作る！－ 次々と現れる物体は「配列」にまとめる － JavaScriptでやる1分間プログラミング
さて、ここまでで物体をジャンプさせることができました。おさらいですが、今回のプログラミングの目標はジャンプで障害物を避ける「恐竜ゲーム」を作ることでした。 そして以下が今現在のコードです。まずはユニコーンと称したクラスを作り（今のところ円の形になっています）、スペースバーを押すことで円がジャンプします。Coding Trainのビデオにはない左右の動きも追加しています（どうしてこの動きを入れたかはゲームが完成するとわかります）。 コードは以下の通りです。またコメントなどは
「〇〇キーが押されたら…」はとても簡単！－ パート❸：keyPressedでキー操作をすべて検知できる － JavaScriptでやる1分間プログラミング
前回パート❷ではジャンプの動きのロジックを考えてみました。ジャンプ量をvelocity（速度）という値で表現し、このvelocityを重力分だけ毎回小さくしていくと飛び上がった後に頂点に達し、その後落ちていくジャンプの動きが表現できました。 ゲームのようにキーを押したらジャンプさせたいところが、今のところプログラムを実行したらジャンプはするのですが、たったの一回のみ。それ以降は何も起こりません。もう一度ジャンプが見たい場合はプログラムを実行し直さないといけないわけです。これ
「ジャンプ移動 － 重力」でリアルなジャンプになる－ パート❷：クラスにジャンプのロジックを追加する － JavaScriptでやる1分間プログラミング
「ジャンプをプログラミングで表現する」のパート❶では２つの処理をやりました。 1⃣ ユニコーンのclassを作り、様々な動作を追加できるようにした 2⃣ ジャンプを表すmove関数を追加した。 ユニコーンはまだ単純な円ですが、とりあえずmoveを使って上の方に上昇していくところまではコーディングが完成しました。 ジャンプとは何なのか？こんなことはあまり考えたことはないでしょうが、ジャンプとは何でしょう？あなたがジャンプした時どうなるかを考えてみてください。まず思いっきり
「重力」はどうやってプログラミングする？－ パート❶：まずは「クラス」で物体を表現してみよう － JavaScriptでやる1分間プログラミング
これまでp5.jsエディタを使って、まずは円や四角など簡単な図形を描き、次に図形を一方向に動かし、そしてキャンバス内を動き回るロジックについて解説してきました。 ところが、モノが永遠に動き続けるというのはある意味コンピューターゲームの中だけの話です。現実には摩擦や抵抗、重力、加速などが存在しているため、モノの動きというのはもっと複雑です。 「ジャンプ」の動きをプログラミングするそこで、もうちょっとリアルなものの動きをプログラミングで表現してみます。今回のベースとなるCod
ボールがキャンバス内を跳ね回る仕組みを理解しよう－ ”ブロック崩しゲーム”の基本 － JavaScriptでやる1分間プログラミング
前回のp5.jsの基本解説では、簡単に四角や円などの図形をキャンバス内に描き、それを一方向に動かす仕組みについて説明しました。 簡単におさらいすると、まず図形を描く場合はXとYの値、そしてその大きさを指定するだけです。p5.jsエディタを立ち上げたら、draw関数のところに次の２行を加えるだけです。 //図形をピンク色で塗りつぶすfill(200, 0, 200);//円(circle)を、X：100、Y：100、大きさ80で指定circle(100, 100, 80);
p5.jsの超基本を理解しよう！ ー 2Dプログラミングは「パラパラ漫画」と同じ仕組みで絵を描く － JavaScriptでやる1分間プログラミング
プログラミングを始めようという方に是非おすすめなのがp5.jsというJavaScriptのライブラリです。p5.jsウェブエディタというツールを使えば、ブラウザでコーディングができるのでどのマシンでも気軽に、いつでもどこでもプログラミングができるのが特徴です。p5.jsエディタの詳しい使い方は次のnote記事で解説をしました。 p5.jsエディタを使ったことのない方は是非この記事を読んで基本的な使い方を理解してから読み進めてください。 p5.jsを理解する秀逸な英語ビデオ
「りんご」と言うと「ゴリラ」と言うのはどうやってプログラミングする？ ー 第2章❸ 配列の中からループで言葉を見つける ー 『JavaScriptでやる1分間プログラミング』
前回はボタンをクリックすると音声認識がスタートし、そこでユーザーが「りんご」のように何か言葉を言うとそれを取得するところまでプログラミングをしていきました。まさにしりとりの”第一歩”をコーディングしたわけです。 ここでコーディングを簡単に振り返ってみます。 HTMLのbuttonタグの中で、ボタンクリック（onclick）に関数（SayToShiri）をリンクさせ、ボタンがクリックされるとその関数が呼び出されます（つまり実行されるということ）。 そして、SayToShi