簡単プログラミング講座　丸や直線を描いてみよう

中島コーチ登場

鈴木顕照氏（以下、鈴木）：今回もあの方にお越しいただいておりますよ。皆さんタイムラインで中島コーチと、打ち込みましょうか。中島コーチと打ち込んで、呼びましょう！　タイムラインから呼びましょう！　中島コーチと打ち込みましたか？　じゃあいきますよ、せーの。

江川みどり氏（以下、江川）：中島コーチー！

中島俊治氏（以下、中島）：よっ！

江川：はい、来ました（笑）。

鈴木：今回もよっ、で始まりましたね（笑）。

中島：ちょっと間をおいて来ました。

鈴木：ためましたね（笑）。

中島：イワッチじゃないです。

鈴木：中島コーチでございます。HTML5プロフェッショナル認定資格レベル1・2取得。マイクロソフトMVP2014受賞。数々のね、さすがでございます。

中島：いやいやいや。ありがとうございます。

鈴木：中島コーチと、今日も楽しく。ちょっとだけかじっていきましょう。ということで、今日のタイムスケジュールを見ていきましょう。タイムスケジュール、ドン。はい、来ました。

鈴木：メインテーマがね、1、2、3、4と緑色のところです。緑色のところが、皆さん実習するところでございます。4つのテーマで進めていきます。間にオレンジの休憩コーナーがあります。3回休憩はさみますんでね。ミニコーナーが2箇所と、真ん中ここ、前半で頑張ったことの成果を発表する場でございます。素晴らしい作品にはなんと、プレゼントがあります。

江川：何が貰えるんですか？

鈴木：それ聞いちゃう？

江川：聞きたいー、聞きたいー（笑）。

鈴木：じゃーん！

中島：そんなとこから。

江川：かじりブラシが登場ですね！

鈴木：かじりブラシでございます。かじり部のロゴが入った歯ブラシでございます。かじるためには健康な歯が必要ということで、スクーがお金をかけてつくりました。

江川：皆さんぜひね、このかじりブラシを狙って、どんどん投稿してみてください。

1つ目のテーマは「○△□で何つくろう？」

鈴木：たくさん投稿お待ちしております。それでは、さっそく1つ目のテーマに参りましょう！

江川：何ですか？　1つ目のテーマは。

鈴木：今回も4つのテーマで進めていきます。1つ目のテーマはこちら！

江川：○△□で何つくろう！

鈴木：つくろうでございます。

江川：プログラミングのかじり部なのに、何かちょっとデザインぽくないですか？

鈴木：デザインぽいですね。中島コーチ、どういうことですかこれは？

中島：はい。プログラムは何でもできる、ということですね。プログラムは計算だけじゃなくて、入力もできる。いろんな入力ができる。これ前回やりましたね。HTML5それからプログラムは、いろんな出力の仕方があります。例えば文字で出す、数字で出す。それから今日やるように、絵で、描画で出しましょう。

ということで本当に偶然ですが、今日のお昼のデザイン学部のかじり部と、何か結構似てて。お昼見てましたら、ちょっとびっくりしましたけれども。プログラムでもできるんだぞ、というところを皆さんにお知らせしたいと思います。

鈴木：なるほど。分かりました、ありがとうございます。今回もまずは、中島コーチの実演を皆さん一生懸命メモとりながら、覚えてください。その後に、みどっちと皆さんが一緒に実習する時間があります。さっそく、中島コーチの実演を見ていきましょう。お願いします。

江川：コーチ、お願いします。

中島：頑張ります。今日も、JSくん使います。今画面にありますね。

中島：URLはよろしいですかね。教務課のほうからも連絡いってると思いますし。

江川：授業詳細ページからいけますね。

中島：そうですね、こちらのほうにアクセスをしてください。今日初めての人もいるかもしれません。大丈夫、JSくんでやっていきましょう。本来でしたらエディタとそれからブラウザでやっていくのが本当ですけれども、まあかじるということでね。あんまり違うことで負担かけたくないので、このJSくんは皆さんの……何にしましょうね。勉強机だと思ってもらったらいいです。

これ明日も明後日も来週もいつでも使えるようにしておきましたから、ぜひ自習とかね、やっていただけたらいいかなと思います。じゃあ大丈夫でしょうね、いきましょうかね。

鈴木：はい！

前回のプログラムのおさらい

中島：さっきアクセスした人いると思うんですが、そのときは下のほうがカウントダウンになってました。結構小技効かせてやってたんですが、今は規約に同意（部活に利用してください）っていうふうに変わってます。これプログラムで変えたんですよ。こういう小技も結構使っております。

鈴木：すごい。

中島：18時、丁度カウントが0になったときありました。19時でしたっけ、ごめんなさい（笑）。

江川：19時ですね、はい（笑）。

中島：すいません。じゃあ規約に同意して。まあイタズラしないでねってことですね。これ何か見覚えがある。前回、先週やってね、いろんな人たちがいろんなことやってらっしゃいました。

中島：おもしろいなって私見てました。その中で……あれ、何これ。あみこみとか。ちょっとこれいいかな。

中島：ポニーテールって書いてる。ちょっと1回リロードしていい？　あみこみ、もう1回。ポニーテール。ちょっと待ってね。あ、ツインテールだって！

江川：（笑）。

中島：何か、どっかの先生。お名前何でしたっけ。

江川：ジャスティス。

鈴木：ジャスティス。プログラミング学部にね、先生いらっしゃるんですね。

中島：多分そういうことを考えながらやったのかなと思いますが。こういう楽しいアプリケーションいっぱいあるので、ぜひ皆さんも。アイス占いなんていいですよね。今日の夜アイス食べましょうみたいなね、いいんじゃないですかね。

それで、私たちが見てるのはこれ一覧です。作品の一覧が見れてる。私たちは今からこのエディタをクリックします。そうすると、ここが皆さんの勉強机になります。前回やってる人たちは、例えばネームのところに自分の名前があったり、それから真ん中辺りに何か書いてあったりね。あと1番下のscriptって書いてるところに、何か書いてると思います。これは前回の人用です。1回消しちゃいます。消さなくてもいいですけどね、初めてアクセスした人はこういう形になってますよということです。

「JSくん」の使い方

中島：1番上にサンプル、見本ソース1、見本ソース2、3、4と書いておきました。こちらは今日のサンプルです。PDFにしておきましたから、後でご覧になってください。同じものを1から書くと2時間4時間かかってもう終わっちゃいますので、実はここに反映1と反映2。前半1と2、後半3と4。それがこの中に、自動的に入るようにしておきました。これもプログラムの力です。実は私たちは今日の描画をするだけじゃなくて、プログラムでいろんなことをやってる。そいういうところも感じながら、ぜひ受けてください。じゃあ反映1押しちゃいます。今日は1番上の反映1からいきますよ。ぽい。

鈴木：全部入っちゃうんですね。

中島：ピンク色の背景のところに全部入っちゃいました。何が大事か。全部大事です。が、その中でも1番大事なところをピンポイントでお話しますので、まあ楽しみにしておいてください。

1の反映終わりました。下側ね、青色です。2のネームに、ニックネームを入れてください。本名じゃなくて結構です。皆さんの日頃言われてるもの。私はナカシマーと言われてますから、nakashimmerにしときます。

いいですかね。ソース入力、3番目ももう入っております。本当は後でこれカスタマイズをするんだけども、とりあえずつくっちゃいましょう。やっていきますよ。

4番目プレビュ反映。こちらのほうを押していきます。今1、2、3とやって4番目いってます。プレビュ反映いきますよ。その前に1回やらないといけない。この上のほうの四角形、見ましたよ。見たら1回クリックしておいてください。ぽい。

中島：それから下も1回、見ましたよ。何か分からないけど、とりあえず入ってるの見ましたよ。ぽいと押しました。押した上で定着させて、プレビュ反映を押しちゃいます。せーの、ぽい。

中島：ほら。

プログラムで丸や直線を描いてみよう

鈴木：おお、団子が。

中島：丸と直線ができちゃいました。実は○△□で何つくろう全般は、直線と丸で何かをつくろうと思っています。何かに似てません？（笑）

鈴木：何でしょうねこれは。

江川：何でしょうかねえ。

中島：これだけじゃたぶん分かんないですね。実はお腹減っちゃいまして。

鈴木：あら。

江川：あれ。

中島：ちょっとここ見てください。お団子が食べられちゃいましたって書いてあります。

江川：本当だ。

中島：その上側。mylineって最初書いてあります。これ私がつくった仕組みなんですが。lineは分かりますよね。myは私、lineは直線。さっきの直線が左上から右下に流れてました。あれがそうなんだなあと思ってください。後ろの数字は後にしましょう。それからmyarkってあります。arkって何だろう。arkというのは、円弧といいます。例えば皆さんが目の検査で、Cの形見たりしますよね。あれが円弧といいます。

鈴木：ほうほう。

中島：本当は円のちょっと欠けたやつ。始まりの点と終わりの点が違うやつ、これが円弧なんですよ。でもでも、始まりの点と終わりの点を一緒にしたら？

江川：円になる。

中島：そうそう、円になります。JavaScriptのHTML5では、arkを使って開始点と終了点を同じにしてしまう。ちょっと後ろのほう見てもらえますか？　0と360って書いてあるの分かりますかね。

鈴木：はい。

中島：0度と360度、1回転してるぞということです。よろしいですか？

江川：はい。

中島：後ろの数字、これは後で申し上げますから。団子食べられちゃった、ちょっとかわいそうなので、ここを消して。いっちゃいますよ、いいですか？　これをコピっちゃいます。

中島：何か分かんないけどmyark、円つくるんだなあと思って。コピっちゃって、3つにしちゃいました。

中島：そうするとどうでしょうね。同じものが今3つできてますが、こっから大事。myarkの中の1番最初の数字、これは円の中心のx座標になります。

鈴木：あら、何か懐かしいですね。x座標って懐かしいですね。昔数学でやった気がしますね。

江川：懐かしい。

鈴木：x軸y軸みたいな。

中島：そうそう、いいですね。ということは、次はy座標になります。だから、100、100のところを中心にして丸描いてるよ。3つ目、50って書いてますね。これ。

中島：これは半径です。さっきお団子ありましたよね。あれの半径が50だよ。60、70にすると大きくなって、食べがいがあるよということになります。

鈴木：なるほど。

図形の色や場所を変えてみる

中島：1番後ろ見ましょうかね。skyblueって書いてますよね。空色だよ。今3つなってます。ちょっと色変えちゃいましょうか。スカイブルーじゃなくて、何がいいですかね。

江川：ピンク。

中島：pink、頂きました。3つ目の色も変えちゃいましょう。何がいいですかね。

江川：グリーンで。

中島：greenで。ちょっと発音が変になっちゃった（笑）。

鈴木：green。

中島：部長が今いい感じで。もう1回お願いします。

鈴木：green！

江川：さすが。

鈴木：（笑）。

中島：こうしちゃうと同じところに重なっちゃうので、座標をずらしちゃいましょう。中心ずらしちゃえばいいですよね。

鈴木：今のままだとね、同じ座標に3つの円がある状態ですもんね。

中島：だって1つ目も100と100、2つ目も100と100、3つ目も100と100。ずらしちゃうよ。幾らずらそうかな。大体50ずつずらしちゃうことにしましょう。150、3つ目は200にしようかな。2つ目も150の。

鈴木：y座標をね、50ずつちょっとずらして。

中島：そうそう。だから斜めにズリズリズリとなってるんだなと思ってください。できた。

鈴木：できた！

中島：でも、プログラム働いてるでしょ？　じゃあプレビュ反映してみましょう。上手くいくといいですね。せーの、ぽい。

鈴木：あ、出た！　これは美味しそう。

江川：できたー！

中島：これもプログラム。表示するときもプログラム使ってるのでね。知っといてください。よろしいですかね。

鈴木：なるほどなあ。

プログラムで音声もコントロールできる

中島：それで、完成したらどうするんでしたっけ？

鈴木：食べる、食べる。

中島：食べる？（笑）　それもありですけれども、やっぱり皆に知ってもらいたいじゃないですか。しかもオリジナルでつくってもらいたいので。今4番目でしたっけね、次5番目。ここ。

江川：コーチに提出。

中島：今皆さん、メモ書き一生懸命してるはずですよね。私やってみますよ、見ててください。押しますよ。あと、音量をちょっと大きめにね。

鈴木：そうですね。

中島：ちょっとおもしろいことおこるから。いきますよ、せーの。

中島（機械音声）：よいしょー。

江川：（笑）。

鈴木：これ分かりますかね（笑）。生中島コーチの声じゃないんです。皆さんも後でね、提出ボタンを押すことになると思うんですけど、あるおもしろいことがおこります。

中島：何かね、よいしょっていう音が聞こえる。

鈴木：これはおもしろいですよ。

中島：でもね、これはただおもしろいだけじゃなくて、プログラムは音声もコントロールができるということ。

鈴木：へー！

中島：おもしろいでしょ？　だからHTML5はマルチメディアの技術でもあるんですよ。とても豊かです。ぜひ体験してもらいたくて、こんなことをつくっております。でも、できましたよね。これを頑張って、美味しいのをつくってください！

さっそくみんなでやってみよう！

鈴木：今日初めてプログラミングかじる方は、いっぱいアルファベットがあってウッってなるかもしれないんですけれども。ひとまず今メモ書きしたことをですね、自分でやってみましょう。やってる内に多分、何となく理解ができるはずなのでね。その前に一旦ちょっと、ここまでで着いてこれてない方がいらっしゃるかもしれないのでね。

江川：そうですね。

鈴木：『まって』ボタンがありますので。そちらを使って、皆さんの『まって』をちょっと聞いてみようかなと。もしここまでで分からないという方は、『まって』ボタンを押してお知らせしてください。それではいきますよ。せーの。

江川：まって！

鈴木：分からない方がいたら、押してみてください。どうでしょうか、上がってきたらまた困るんですけどね。もし分からないことがあれば、誰か『教えて』タブで投稿しましょう。タイムラインにね。まっては大丈夫そうかな。

江川：そうですね、来ない感じですね。

鈴木：むむむ。

中島：8%。まあ皆試してるだけでしょうね。

江川：まあ大丈夫そうじゃないですか？

鈴木：具体的に分からないことがあったら、『教えて』タブで投稿してみてください。これからまた一緒に、みどちゃんとやりますんでね。復習がてら見てみてください。それでは、皆で実習スタート！

【実習タイム】

中島：皆さんの何か、ものすごいアイデアが溢れてますね。

鈴木：いいですね、どんどんカスタムしてやってもらえると。

中島：まずは位置をずらしてみてね。今はちょんちょんちょんってずらしてますけど、とりあえず何かずらしてみましょう。私は結構目分量でやります。この間田中先生が、中島先生はきっと目分量でつくるよねなんて仰ってましたけども（笑）。

江川：（笑）。

中島：私は目分量で。それでいいと思うんです。プレビュでいろいろやってみる。

線の描き方を解説

中島：それで、もう1つ皆さんに知っておいてもらいたいもので説明してないものがあります。myarkは説明しました。サークルなんですね、すぐできる。後ろの00とか360、これはもうちょっとおいといて。説明してないやつ、私の画面見ていただきたいんですけどね。

中島：何か言ってないのありましたよねmyline。

江川：確かに。

中島：何となく皆分かると思う。直線だよ、私の直線だよ。直線ということは、開始点と終了点。開始点のxy、終了点のxy。あと何がありますかね直線だったらば。色と、あと太さです。

実はこれ、私のつくった独自関数っていうんですけどね。その中で最初のmylineです。最初の10,10、これが開始点になります。290,290、これ座標。終了点のxy座標になります。これ分かれば、もう例えば290の10ってやったら、真横にできたりね。もう皆さん自由自在に描けるようになってくる。これからmyline2つでも3つでも、100でも200でもどうぞ（笑）。

それからbrownて書きましたけど、棒の色かなと思って茶色にしましたけど、好きな色にできます。これ、色です。気を付けてください、ダブルクオーテーションマークね。あと最後の10、残ったやつは、太さになります。

江川：あー。

中島：mylineは開始点のxy、それから終了点のxy。あと色、色はダブルクオーテーションマーク気を付けてください。あと最後10、太さです。ということで皆さん、それでもっていろんなものを。丸と直線だけでつくれると思うんですよ。皆さんのオリジナリティに期待したいと思います。

鈴木：そうですね。ということでmylineの説明でしたけれども、ありがとうございます。

江川：ありがとうございます。

みんなの投稿を見てみる

鈴木：皆さん大丈夫ですかね。もし分からないことがあれば、誰か『教えて』タブに切り替えて質問を投稿してください。どうしようかな、次いっちゃいます？　それとも何か作品見ましょうか。

中島：そう、これ。見れます？

江川：すごーい！　下の2個だけ食べてるのとか。

中島：これ何とか、木の実があるじゃないですか。

鈴木：ありますね。多分落ちないように止めてるんだろうね。

江川：ちょっとだけ食べられてる！

鈴木：これも完全に応用ですね。白い円を描いたんでしょうね、上からね。

中島：ちょっとすいません。これを開いて、ここのURLをグループのページに投稿するんでしたよね。

中島：そのときにね、コメント入れてアピールしてもらわないと（笑）。

鈴木：アピールしてもらわないと。皆さん投稿多いですから。そうですね、この後の間の休憩コーナーで、皆さんのこの作品1個ずつ見ていきます。おもしろい作品にはプレゼントをあげるので、ここでこのURLをコピペします。プログラミングかじり部のページですね。ちょっとプログラミングかじり部のグループページ見ていきましょうか。

江川：こちらですね。

鈴木：皆さん所属してるはずです。プログラミングかじり部のグループページにいっていただいて、URLを一言何か添えて、コピーアンドペーストしてですね、投稿ボタンを押しておいてください。おもしろい作品にはプレゼントをあげちゃいます。ということで、元に戻りましょう。1つ目のテーマは以上でしょうか？

中島：はい、大丈夫です。

ちょっと詳しく解説してみる

鈴木：ありがとうございます。Aさんから『教えて』が来ております。

中島：何でしょう？

鈴木：頭のCですね。プログラムの最初にCが来てる……。

江川：先生の画面で見てみましょうね。

中島：この中ですかね。

中島：詳しい説明はあまりしないようにしてるんですけど、でもご質問すごいいいと思います。実はプログラムの中にですね、1番上、こんなことを書いてあります。var canvas=document.getElementByID。これ、キャンバスというIDの要素を取得しましょうという1行目です。

詳しい説明はね、ちゃんと授業受けていただければいいんですが、簡単に言うとその次の2行目。そこにvar cと書いてあります。Cという箱をつくりましたよ。その中にcanvas.getContext（“2d”）。2dっていうのは2次元、平面のことです。

コンテクストっていうのは、ちょっと訳せないですね。普通皆コンテクストって言ってますが、無理やり訳すとするならば、道具のことです。2次元の道具持ってきて、Cという箱に入れました！

このCは私が決めたものです。他の人は違う、CTXとかいろんな言い方をしています。あとcontextって書いてらっしゃる方もいます。Cというのは道具箱、というふうに考えてください。そうすれば、私たちは道具箱を使って、プログラムをつくってんだなあ、っていうことがちょっと見えてくると思います。

江川：ありがとうございます。

鈴木：ありがとうございます。今回難しいことはやらないんですけれども、もしね、もっともっと難しいことが知りたいということであれば、中島コーチじゃなくて中島先生の授業がありますので。そちらをしっかり見て、勉強してください。

中島：（笑）。

鈴木：ということで、1つ目の○△□で何つくろう？　以上になります、皆さんお疲れ様でした！

中島：お疲れ様でした！