無料のプログラミング学習プラットフォーム「LINE entry」の公式サイトには、直感的に操作できるビジュアルプログラミングを使って、LINEキャラクターを自由に動かしたり、オリジナルのゲームを作ったりできる「ワークスペース」があります。
※LINE entryに関するプレスリリースはこちら
今回はワークスペースでLINEキャラクターのブラウンを歩かせてみましょう！会員登録不要で誰でも気軽にプログラミングを体験できますので、ぜひチャレンジしてみてください。
まずは、LINE entryの公式サイトにアクセスし、「ワークスペース」をクリックします。
※PC推奨です
こちらがワークスペースの画面です。
最初からブロックがいくつか組み合わさっていますが、無視してとりあえずスタートボタン「▶」をクリックしてみましょう。
ブラウンが三歩、右に歩きました。この動きは以下の5つのブロックが組み合わさることでできています。
今回は、このブロックをゼロから組み立てて、この「ブラウンが歩く動き」を完成させてみます。
ということでまずは、もともとあったブロックをすべて削除しましょう。「スタートボタンをクリックした時」というブロックを左クリックで長押ししたまま、すべてのブロックをまとめてゴミ箱に持っていきます。
まっさらになった状態から、一つずつブロックを組み立てていきましょう。まず最初に、「開始」タブの「スタートボタンをクリックした時」というブロックを右のスペースに持ってきます。
このブロックの下にブラウンを動きを作るブロックを繋げていくことで、スタートボタンをクリックした時にブラウンが動くようになります。
（この段階でスタートボタンをクリックしても何も起きません）
次に、「動作」タブから「進む方向に10移動する」というブロックを持ってきて、「スタートボタンをクリックした時」というブロックの下に繋げます。
このブロックは、ブラウンから出ている矢印の方向に、10という距離だけ移動するというブロックです。
この状態でスタートボタンをクリックしてみましょう。
ブラウンが少しだけ右に移動しました。
「進む方向に10移動する」ブロックの「10」という数字部分は自由に編集することができます。例えば「100」にしてからスタートボタンをクリックしてみると…
ブラウンの移動距離が先ほどの10倍になりました。しかし、この状態ではブラウンが歩いているというより、ワープしているようになってしまっています。
そこで、少しでも滑らかな動きにするために、「制御」タブの「10回繰り返す」というブロックを持ってきて、以下のように組み合わせます。「進む方向に100移動する」のブロックは「進む方向に10移動する」に戻しておきましょう。
これでブラウンは「10移動するのを10回繰り返す（最終的に100移動する）」ようになります。この状態でスタートボタンをクリックしてみましょう。
先ほどの動きよりは少しだけ滑らかになり、右にスライドするような動き方に変わりました。しかしまだ歩いているようには見えませんし、移動スピードも速すぎます。
そこで次は、「制御」タブの「2秒待つ」というブロックを持ってきて、以下のように組み合わせ、ブロックの中の数字を「0.1」に変更します。
こうすることで、「10移動して、0.1秒ストップして、10移動して、0.1秒ストップして…」という動き方に変わります。この状態でスタートボタンをクリックすると、
移動スピードがちょうどいい感じになりました。つづいて、ブラウンのイラストに歩行の動きをつけていきます。
ブラウンを選択した状態で、「イラスト」というタブをクリックしてみましょう。
すると、以下のようにブラウンのイラストが実は3種類用意されていることが分かります。この3つのイラストをブラウンの動作中に切り替えていくことで、パラパラマンガのように歩行の動きを表現することができます。
イラストの切り替えを行うために、「表示」タブの「次のイラストに変える」というブロックを持ってきて、以下のように組み合わせます。
こうすることで、「10移動して、次のイラストに変わって、0.1秒ストップして…」という動きを10回繰り返すようになります。この状態でスタートボタンをクリックしてみると、
ブラウンが三歩、右に歩きました！これで最初の動きを再現することができました。
ブロックの数字を変更したり、ブラウンの位置や進行方向（矢印）を編集したりすることで、様々な動き方をさせることができます。また、作ったプログラムは会員登録をすることで、保存・管理できるようになります。（詳しくはこちら）
もちろんブラウン以外のキャラクターを使うこともできますが、これについてはまた別の記事でお伝えします。
いかがでしたでしょうか？このようにブロック（視覚的なオブジェクト）を組み立ててプログラムを作っていくプログラミングのことを「ビジュアルプログラミング」などと呼びます。ぜひいろいろ試しながら、プログラミングを体験してみてください！
※LINE entryに関するプレスリリースはこちら
今回はワークスペースでLINEキャラクターのブラウンを歩かせてみましょう！会員登録不要で誰でも気軽にプログラミングを体験できますので、ぜひチャレンジしてみてください。
まずは、LINE entryの公式サイトにアクセスし、「ワークスペース」をクリックします。
※PC推奨です
こちらがワークスペースの画面です。
最初からブロックがいくつか組み合わさっていますが、無視してとりあえずスタートボタン「▶」をクリックしてみましょう。
ブラウンが三歩、右に歩きました。この動きは以下の5つのブロックが組み合わさることでできています。
今回は、このブロックをゼロから組み立てて、この「ブラウンが歩く動き」を完成させてみます。
ということでまずは、もともとあったブロックをすべて削除しましょう。「スタートボタンをクリックした時」というブロックを左クリックで長押ししたまま、すべてのブロックをまとめてゴミ箱に持っていきます。
まっさらになった状態から、一つずつブロックを組み立てていきましょう。まず最初に、「開始」タブの「スタートボタンをクリックした時」というブロックを右のスペースに持ってきます。
このブロックの下にブラウンを動きを作るブロックを繋げていくことで、スタートボタンをクリックした時にブラウンが動くようになります。
（この段階でスタートボタンをクリックしても何も起きません）
次に、「動作」タブから「進む方向に10移動する」というブロックを持ってきて、「スタートボタンをクリックした時」というブロックの下に繋げます。
このブロックは、ブラウンから出ている矢印の方向に、10という距離だけ移動するというブロックです。
この状態でスタートボタンをクリックしてみましょう。
ブラウンが少しだけ右に移動しました。
「進む方向に10移動する」ブロックの「10」という数字部分は自由に編集することができます。例えば「100」にしてからスタートボタンをクリックしてみると…
ブラウンの移動距離が先ほどの10倍になりました。しかし、この状態ではブラウンが歩いているというより、ワープしているようになってしまっています。
そこで、少しでも滑らかな動きにするために、「制御」タブの「10回繰り返す」というブロックを持ってきて、以下のように組み合わせます。「進む方向に100移動する」のブロックは「進む方向に10移動する」に戻しておきましょう。
これでブラウンは「10移動するのを10回繰り返す（最終的に100移動する）」ようになります。この状態でスタートボタンをクリックしてみましょう。
先ほどの動きよりは少しだけ滑らかになり、右にスライドするような動き方に変わりました。しかしまだ歩いているようには見えませんし、移動スピードも速すぎます。
そこで次は、「制御」タブの「2秒待つ」というブロックを持ってきて、以下のように組み合わせ、ブロックの中の数字を「0.1」に変更します。
こうすることで、「10移動して、0.1秒ストップして、10移動して、0.1秒ストップして…」という動き方に変わります。この状態でスタートボタンをクリックすると、
移動スピードがちょうどいい感じになりました。つづいて、ブラウンのイラストに歩行の動きをつけていきます。
ブラウンを選択した状態で、「イラスト」というタブをクリックしてみましょう。
すると、以下のようにブラウンのイラストが実は3種類用意されていることが分かります。この3つのイラストをブラウンの動作中に切り替えていくことで、パラパラマンガのように歩行の動きを表現することができます。
イラストの切り替えを行うために、「表示」タブの「次のイラストに変える」というブロックを持ってきて、以下のように組み合わせます。
こうすることで、「10移動して、次のイラストに変わって、0.1秒ストップして…」という動きを10回繰り返すようになります。この状態でスタートボタンをクリックしてみると、
ブラウンが三歩、右に歩きました！これで最初の動きを再現することができました。
ブロックの数字を変更したり、ブラウンの位置や進行方向（矢印）を編集したりすることで、様々な動き方をさせることができます。また、作ったプログラムは会員登録をすることで、保存・管理できるようになります。（詳しくはこちら）
もちろんブラウン以外のキャラクターを使うこともできますが、これについてはまた別の記事でお伝えします。
いかがでしたでしょうか？このようにブロック（視覚的なオブジェクト）を組み立ててプログラムを作っていくプログラミングのことを「ビジュアルプログラミング」などと呼びます。ぜひいろいろ試しながら、プログラミングを体験してみてください！
