PC & スマホアプリの使い方なら

できるネットインプレスグループ創設25周年

  • Twitter をフォロー
  • Facebook ページをいいね
  • Google+ ページをフォロー
  • RSS フィードで購読
  • このサイトについて
サイト内検索

急上昇ワードiOS 10 メルカリ 神保町ペロリ旅

  • PC & スマホアプリの使い方なら | できるネット
  • サービス/ソフト
  • プログラミング
  • 「アナと雪の女王」でプログラミングを学ぶ「Code with Anna and Elsa」(前編)
  • プログラミング
  • サービス/ソフト

「アナと雪の女王」でプログラミングを学ぶ「Code with Anna and Elsa」(前編)

06:00 2017年1月18日 公開

  • Hour of Code
  • アナと雪の女王
  • プログラミング
  • 教育
「アナと雪の女王」でプログラミングを学ぶ「Code with Anna and Elsa」(前編)

「Code with Anna and Elsa」は、映画「アナと雪の女王」のアナとエルサを氷の上で動せるプログラミング教材です。無料で、パソコンやタブレットのブラウザーさえあれば利用できます。

アナとエルサを動かして氷の上にきれいな図形を描く

「Minecraft Hour of Code」(マインクラフト アワー・オブ・コード)の記事でも紹介したHour of Codeのサイトで公開されているプログラミング教材の1つに、映画「アナと雪の女王」のアナとエルサが登場する「Code with Anna and Elsa」(コード ウィズ アナ アンド エルサ)があります(無料で利用できます)。

全20本の「パズル」があり、テーマは「図形を描く」こと。アナとエルサを動かして、氷のうえに課題どおりの図形を描くようにプログラミングしていきます。図形や角度の概念が要求されるので、すべてを理解できるのは小学校中学年以上が目安となるでしょう。

しかし、プログラム中に設定できる選択肢が限定され、やさしいヒントも出されるため、もっと低い年齢の子どもでもクリアは可能です。もちろん親子で楽しんでもいいでしょう。アナやエルサを自分のプログラムで動かして、思いどおりの図形が描けたときの感激は、なかなかのものです。

Code with Anna and Elsaを始める

Code with Anna and Elsaを始めるには、パソコンやタブレット、スマートフォンのブラウザーで以下のページを開きます。最初に表示される動画による説明が終了したら[×]をクリックして閉じましょう。

▼Code with Anna and Elsaのページ(パズル1)
Code.org - アナとエルサとコードを書く
1パズル1を開始する

パズル1が開始になりました。表示されたパズルの課題を確認し、ツールボックスのブロックをワークスペースに動かしてプログラムを作ります。できあがったらゲームスペースの[実行]をクリックしましょう。

2プログラムを作り、実行する

最初のパズルはブロックを1つ使うだけ。実行するとエルサが実際に動いて線を描きます。

3パズル1を完了した

課題どおりのプログラムを実行できると、完了のメッセージが表示されます。[次へ]をクリックして次のパズルに進みましょう。

パズル2~9の紹介

パズル2:曲がる

パズル2では途中で90度曲がった線を引きます。「90度の角度で」と課題が出ますが、右か左かだけ理解していれば大きな問題はありません。

パズル3:複数回曲がって四角形を描く

パズル2のプログラムにブロックを加えて、今度は四角形を描きます。同じブロックを何度も使うことになります。

パズル4:「繰り返し」を使って四角形を描く

パズル4ではアナが登場します。ここでは、パズル3と同じ四角形を描く動きを「繰り返し」ブロックを使ってシンプルに実現することを学びます。

パズル5:「繰り返し」を重ねて3つの四角形を描く

描く四角形が3つに増えます。しかし、「繰り返し」を使えば数が増えても処理は簡単。パズル4で行った四角形を作る動きを角度を変えて繰り返すだけです。最初から繰り返しを重ねるブロックは設置されているので、回数と角度を設定します。

パズル6:さらに多くの四角形で「雪の結晶」を描く

パズル5の応用で「雪の結晶」を描きます。繰り返しのブロックが重なっていないので自分で配置して、角度と回数を適正に入力します。

パズル7:十字を描く

再びエルサに戻り、「+の形」になる4本の線を描きます。やり方はここまでの応用で考えられます。

パズル8:10本の線を描く

パズル7の応用で、今度は10本の線を描きます。ブロックに最初から必要な角度が設定されているので、クリアーが難しいということはありません。親子で説いて、図形について理解を深める機会にしてもいいでしょう。

パズル9:90本の線を描く

今度は90本(!)の線を引く必要があります。ここでは角度の設定がキモですが、ヒントと用意された選択肢を見れば、答えはおのずとわかるでしょう。
このパズルの実行には大変な時間がかかります。ゲームスペースにあるウサギとカメのアイコンが描かれたバーを左右に操作することで、エルサの動くスピードを調整しましょう。

小刻みにステップアップして学べる

ここまでで前半は終了です。全20本ですが、パズル10からは少し趣が変わります。ここまで見てきたように、パズルとしての難度は高くありませんが、「なぜ、このような動きをするのか?」と考えるとけっこう複雑で、図形や角度について理解を深めるいい機会にもなっています。

▼パズル10からはこちら
「アナと雪の女王」でプログラミング。「雪の結晶」作りに挑戦!(後編)

HINTパズルを中断するには

Hour of Codeの教材(チュートリアル)では、パズルごとにURLが設定されています。中断したいパズルを「お気に入り」に追加しておけば、いつでもそのパズルから開始できます。

HINTパズルが不正解だったときは

[実行]したパズルが間違っていたときは、[不正解です]というメッセージが表示されます。[リセット]をクリックして、ブロックの配置をやり直しましょう。[最初からやり直す]をクリックするとブロックの配置を初期化できます。

[不正解です]と表示されたときは、[リセット]でゲームスペースを、[最初からやり直す]でワークスペースを初期化してやり直せます。

次の記事 「アナと雪の女王」でプログラミング。「雪の結晶」作りに挑戦!(後編)

前の記事マインクラフトの世界を動かす「Minecraft Hour of Code」でオリジナルゲームを作ろう!

  • Hour of Code
  • アナと雪の女王
  • プログラミング
  • 教育
  • サービス/ソフト
  • プログラミング
  • Twitterでシェア
  • Facebookでシェア
  • Lineで送る

この記事が気に入ったら
いいね!しよう

できるネットから最新の記事をお届けします。

オススメの記事一覧
同じカテゴリーの記事一覧
  • プログラミングで海賊と戦い、コミカルに踊る。ディズニー映画「モアナと伝説の海」を使った「Moana: Wayfinding with Code」
  • ディズニー映画「モアナと伝説の海」の世界でプログラミングを学ぶ「Moana: Wayfinding with Code」
  • ソニーのプログラミング学習キット「KOOV」でロボットを動かそう!
  • 「アナと雪の女王」でプログラミング。「雪の結晶」作りに挑戦!(後編)
  • マインクラフトの世界を動かす「Minecraft Hour of Code」でオリジナルゲームを作ろう!
カテゴリーで使い方を探す
カテゴリーで使い方を探す
  • トップページ
  • Apple/Mac/iOS
    • iPhone最近アップデートされたカテゴリー
    • Apple Music
    • Apple Watch
    • iPad
    • iPod touch
    • Apple TV
    • iMovie
    • iPhoto
    • Mac
    • iTunes
    • その他(Apple)
  • Windows/Office
    • Windows 10最近アップデートされたカテゴリー
    • Word
    • Excel最近アップデートされたカテゴリー
    • Excel関数最近アップデートされたカテゴリー
    • PowerPoint
    • Access最近アップデートされたカテゴリー
    • OneNote
    • OneDrive
    • Office
    • Windows 8.1/8
    • Windows 7
    • XPサポート終了
    • その他(Windows/Office)
  • サービス/ソフト
    • Minecraft(マインクラフト)最近新しい記事が追加されたカテゴリー
    • プログラミング
    • YouTube
    • Facebook
    • Instagram(インスタグラム)
    • Pokémon GO(ポケモンGO)
    • Amazon最近アップデートされたカテゴリー
    • LINE
    • giftel(ギフテル)
    • Spotify(スポティファイ)
    • Webサイト/Webサービス
    • 動画配信サービス
    • Dropbox
    • Evernote
    • ショートカットキー
    • note(note.mu)
    • PDF
    • GANREF
    • クラウド
    • Firefox
    • iKnow!
    • Rosetta Stone
    • RSSリーダー
    • Twitter
    • Ustream
    • 検索
    • サイボウズLive
    • セカンドライフ
    • 年賀状
    • はてなブックマーク
    • ブログパーツ
    • 今週の小ワザ
    • その他(サービス/ソフト)
  • Google
    • Android最近アップデートされたカテゴリー
    • Google Playミュージック
    • Googleフォト最近アップデートされたカテゴリー
    • Googleカレンダー
    • Chrome
    • Inbox by Gmail
    • Ingress(イングレス)
    • Gmail
    • Googleマップ最近アップデートされたカテゴリー
    • Googleドライブ
    • Google検索
    • その他(Google)
  • サイト制作・運営
    • Webマーケティング最近新しい記事が追加されたカテゴリー
    • ヒートマップツール
    • HTML
    • CSS
    • WordPress(ワードプレス)
    • Googleアナリティクス
    • Googleタグマネージャ
    • Google AdSense
  • デバイス
    • 子供GPS最近新しい記事が追加されたカテゴリー
    • まもるっく
    • 格安スマホ、格安SIM
    • GoPro
    • dynabook
    • Chromecast
    • USBメモリー
    • Touch Diamond
    • Pocket WiFi
    • BlackBerry
    • VAIO最近アップデートされたカテゴリー
    • ミニノートPC
    • その他(デバイス)
  • Android
    • GALAXY
    • LG(G2、Optimus)
    • MEDIAS
    • LifeTouch NOTE
    • Sony Tablet S
    • Androidアプリ・活用術
    • その他(Android)
  • 通信事業者
    • NTTドコモ
    • au
    • ソフトバンク
  • 読み物
    • マネー
    • マインドフルネス
    • 神保町ペロリ旅最近アップデートされたカテゴリー
    • 編集部からのお知らせ最近アップデートされたカテゴリー
    • できるもんの部屋
    • インタビュー
    • トピック
    • まとめ
    • その他(読み物)
人気記事
  1. Excel関数一覧 機能別
  2. 【iOS 11】新機能・新しい使い方のまとめ【iPhone/iPad】
  3. ググるだけ! iPhone&Androidスマホの通信速度をチェックする最速の方法(アプリ不要)
  4. 【神保町ペロリ旅】2017総決算! 大食い編集者が選ぶ「心に残るドカ盛りランチ」TOP 5
  5. 【Gmail新機能】AIが返信メールを自動作成「スマートリプライ」が、ついに日本語版Gmailで利用可能に!
Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
  • #年末年始本屋さんに行こう! Twitterキャンペーン
新着記事
  • Accessのマクロで外部データを自動で取り組む方法
  • Accessのマクロでデータを外部ファイルに自動で出力する方法
  • PowerPointで文字を縦書きに入力する方法
  • フォントの種類を一括で置き換える方法
  • 【NHK紅白】目当てのアーティストの出演時間を通知! 2017年の紅白歌合戦をスマホで便利に楽しもう

Twitterで @dekirunet をフォローする

ページ上部へ

Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
  • #年末年始本屋さんに行こう! Twitterキャンペーン
フォロー
  • RSSフィードで購読
  • Twitterでフォロー
  • Facebookでフォロー
できるシリーズ
  • できるシリーズについて
  • 読者限定PDFのダウンロード
  • サンプルファイルのダウンロード
できるネット
  • このサイトについて
  • 本サイトのご利用について
  • 全記事一覧
  • プライバシーについて
  • 会社概要
  • インプレスグループ
インプレスの本、雑誌と関連Webサービス
  • DOS/V POWER REPORT
  • GANREF
  • できるネット
  • 年賀状Web
  • Web徹底攻略
  • Reader's Forum
  • インプレス

Copyright ©2018 Impress Corporation. All rights reserved.