tag:crieit.net,2005:https://crieit.net/tags/Grasshopper/feed 「Grasshopper」の記事 - Crieit Crieitでタグ「Grasshopper」に投稿された最近の記事 2019-10-29T22:37:39+09:00 https://crieit.net/tags/Grasshopper/feed tag:crieit.net,2005:PublicArticle/15517 2019-10-29T22:37:39+09:00 2019-10-29T22:37:39+09:00 https://crieit.net/posts/Google-Grasshopper-Web Googleのプログラミング学習アプリGrasshopperのWeb版を使ってみた <p>Googleが開発した無料でプログラミングが学習できるアプリであるGrasshopperのWeb版がリリースされたようです。元々2018年にスマホアプリがリリースされていたようですが、そのWeb版のようです。試しに使ってみました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://grasshopper.codes/">https://grasshopper.codes/</a></p> <h2 id="新規登録"><a href="#%E6%96%B0%E8%A6%8F%E7%99%BB%E9%8C%B2">新規登録</a></h2> <p>Googleアカウントでログインすれば利用できます。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e24ee6d89.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e24ee6d89.png?mw=700" alt="" /></a></p> <h2 id="コース選択"><a href="#%E3%82%B3%E3%83%BC%E3%82%B9%E9%81%B8%E6%8A%9E">コース選択</a></h2> <p>最初にコースの選択画面が表示されます。最初はFundamentalsしか選択できないようです。2は諸々クリアしたら開放されるみたいですね。ひとまずFundamentalsを選択します。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e29ddce78.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e29ddce78.png?mw=700" alt="" /></a></p> <h2 id="チュートリアル"><a href="#%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB">チュートリアル</a></h2> <p>最初の問題はチュートリアルも含まれているようで、説明が表示されます。このINSTRUCTIONSというところの指示をクリアしていくようですね。右にうっすら表示されているのがコードのようです。ここにプログラムを書いていくっぽいです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e2d306a0d.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e2d306a0d.png?mw=700" alt="" /></a></p> <h3 id="プログラムの入力方法"><a href="#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E5%85%A5%E5%8A%9B%E6%96%B9%E6%B3%95">プログラムの入力方法</a></h3> <p>プログラムは全部キーボードで書くのではなく、ボタンをクリックして入力できるみたいですね。元々スマホアプリというだけあってタップで簡単に利用できる感じのようです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e30b7cd38.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e30b7cd38.png?mw=700" alt="" /></a></p> <h3 id="実行結果"><a href="#%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C">実行結果</a></h3> <p>右側には回答すべきサンプルの結果が表示されています。この下に自分の結果も表示されていて、同じようにプログラムを作れれば成功のようです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e343ae867.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e343ae867.png?mw=700" alt="" /></a></p> <h3 id="コードを入力してみる"><a href="#%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">コードを入力してみる</a></h3> <p>下記の画像のように、コードの最終行を選択すると、そこにボタンでコードを追加できるようです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e39647ecb.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e39647ecb.png?mw=700" alt="" /></a></p> <p>ボタンを押すと入力されました。カッコの中が空なので、ここを選択した状態で色のボタンをクリックすると引数に色を選択できるようです。<code>drawBox('black')</code>とすると黒い箱が描画され、<code>newLine()</code>で改行される、という感じですね。</p> <p>また、既にある行をタップすると選択状態になり、コードを置き換えることも出来るようです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e3e5646d6.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e3e5646d6.png?mw=700" alt="" /></a></p> <p>プログラムを作ったら<code>Run Code</code>ボタンを押すと実行されます。EXAMPLE SOLUTIONと自分の実行結果が揃えば成功です。1問目はどのボタンをクリックすれば正解かも教えてくれるので簡単です。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e42913935.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e42913935.png?mw=700" alt="" /></a></p> <p>2問目は複数の指示がある問題でした。こちらも普通に解けばクリアです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e49754364.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e49754364.png?mw=700" alt="" /></a></p> <h2 id="クイズ形式"><a href="#%E3%82%AF%E3%82%A4%E3%82%BA%E5%BD%A2%E5%BC%8F">クイズ形式</a></h2> <p>クイズ形式の問題もありました。自分でコードを書くのではなく、書かれているコードを実行するとどうなるかを考え、答えを選択します。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e4d55e8ef.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e4d55e8ef.png?mw=700" alt="" /></a></p> <h2 id="通知メール設定"><a href="#%E9%80%9A%E7%9F%A5%E3%83%A1%E3%83%BC%E3%83%AB%E8%A8%AD%E5%AE%9A">通知メール設定</a></h2> <p>途中で通知メールの設定が表示されます。リマインダーなど、継続しやすくなる情報なども来るようです。もし必要であればYesを選択して購読してください。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e510238e1.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e510238e1.png?mw=700" alt="" /></a></p> <h2 id="文字を入力するパターン"><a href="#%E6%96%87%E5%AD%97%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3">文字を入力するパターン</a></h2> <p>文字を入力するパターンの問題も出てくるようですね。<code>str</code>というボタンを押すと文字入力状態になります。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e54d59035.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e54d59035.png?mw=700" alt="" /></a></p> <p>EXAMPLEから想像して文字を入力していく感じです。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e5838d998.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e5838d998.png?mw=700" alt="" /></a></p> <p>そろそろFundamentalの2つ目が開放かな~と思ったら、変数セクションに移っただけでまだまだ大量にありました……。先は長そうなのでここで終了しました。</p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e61fa9793.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5db6e61fa9793.png?mw=700" alt="" /></a></p> <p>まだまだコンテンツ不足らしいですが、それでもそこそこのボリュームっぽいですね。気になったらぜひやってみてください~。</p> だら@Crieit開発者