四則演算だけじゃない プログラミングで簡単お絵かき

直線を描くプログラムの中身を見てみよう

鈴木顕照氏（以下、鈴木）：続いては、こちらのコーナーに参りましょう。もっともっと！　かじり部！

鈴木：いやあ、今日1番でテンション上がってますよ。こちらもっともっと！　かじり部のコーナーはですね、まだまだちょっと本編ではかじり足りないという方のためにですね、中島コーチにちょっとだけ難しいことを教わろうというコーナーでございます。それでは中島コーチ、お願いします。

江川みどり氏（以下、江川）：お願いします。

中島俊治氏（以下、中島）：はい。今日やるのはですね、小技というか、おもしろいネタです。ネタ。寝ちゃだめですよ。ネタ。違うか（笑）。では、私の画面見ててください。

中島：ここにお団子が食べられちゃったってありますよね。その下で、直線についてお話をします。ちょっと要らないものを消しちゃいますよ。さっきいい質問いただいた。Cが何ですかって言っていただきましたが、それにちょっと関係してくるかもしれない。

要らないのを消しちゃう。ぽい。独自関数も消しちゃう。それからこれも消しちゃう。丸裸にしている状況です。はい、このプログラムをちょっと見てみてください。

中島：何かというとですね、これ実は、直線を書くプログラムです。実は1つ直線書くにも、結構面倒くさい、6行くらいいろんなことをやってるんですよ。それに追加していろいろある。実際にこれだけで、ちょっとプログラムを書いてみたいと思います。独自関数じゃなくてね。

じゃあ見ててください。beginPathというのは、パスを始めましょう。今日のお昼、授業を受けた方。デザイン学部の授業受けた方は、パスって何ですかって、スライドで出てました。私も見てました（笑）。線と点の集合だそうです。うん、そうだと思います。私の場合は、今から図形描く建設予定地です。

moveToというのは、開始点になります。何でmoveToだろうね。startFromのほうがいいんだけどね。まあそういうもんだと決まりなんですよ。moveToに数字入れちゃいます、直接。100、それからy値は120。これ座標です。

線の頂点、色、太さなども変えられる

lineTo、何となく分かりますね。直線でそこにいく。頂点です。2つ目の頂点。moveToが最初の頂点、2つ目がlineToになります。ここをちょっと変えます。150の、どうしよっかな。結構思いつきでやってますからね。150の170にしてみた。

中島：strokeStyleでcolorって書いてますけど、何となく分かりますね。色なんですよ。これ、ピンク。ダブルクオーテーションマーク入れてますよね。lineWidth、線の太さ。これ例えばですが、10くらいにしときますかね。

stroke、これがね、線を引くという意味なんですよ。こう言ったら分かりますよね、英語なんですよ全部。Path始めますよ。moveToで始まって、lineToで頂点つくりますよ。直線ができた。strokeStyle、ピンク色の線を引きますよ。lineWidth、線の太さは10だよ。stroke、Cを使ってstroke。これで線が引けますよ、というふうになるはずなんですね。やってみます。見ててください。ぽい。

中島：ほら、できた。

鈴木：おお、ピンクの線が引けましたね。

中島：引けました。でもね、これおもしろいのが、折れ線ができるんですよ。折れ線やっちゃいます。でも、折れ線って何となく分かりません？　lineToが1つmoveToが1つで直線。ならば、llineToをもう1個増やしてやれ。増やしちゃいます。

鈴木：moveToが開始点だから。

中島：そうそうそう。lineToを増やしてあげた。そうするとね、三角形みたいな感じなんだけども。折れ線で。200と120ぐらいにしてみます。何となく完成のイメージできるかな。それじゃあ、プレビュ反映いきますよ。せーの、ぽい。

中島：ほら、できた。

鈴木：Vみたいな。

中島：でも、これだけできてもおもしろくない。こっからが小技ポイント。

江川：あれ、あれ？（笑）

鈴木：どっかで聞いたことあるぞ（笑）。

江川：中島コーチ、今日よいしょよりもぽいのほうが多い気がする（笑）。

中島：よいしょはね、もうパソコンに任せたから。

江川：そっかそっか！

鈴木：自動化してますからね。

線の応用で図形もつくれる！

中島：lineWidth太くしちゃいます。まあ直線だからあんまり太くするもんじゃないんだけど。

中島：太くなった、いいですね。もっと太くします。80ぐらい？

中島：もっと太くなりますよね。何かもう直線じゃなくなってきたんだけども。

鈴木：でも、一応こういう直線ですよね。折れ線、太い折れ線。

中島：太い？　私のお腹見てないよね？（笑）

江川：またまた（笑）。

中島：ここでちょっと、このままやっちゃいます。c.lineCap、先端。これを、さっき四角形になってましたよね。あれをroundと書きます。そしてセミコロン。それでもってc.strokeと書きました。

中島：綴り間違えてないかな。大丈夫だよね。それじゃあ、これで見てみます。

鈴木：roundって何ですか？

中島：丸める。私のお腹じゃないよ？

江川：（笑）。

鈴木：lineCapは？

中島：先端。lineのCapね。

鈴木：線の先端を丸めるっていう。

中島：そうそうそう。そういう指示を出したんですよ。いきますよ、せーの、ぽい！

鈴木：おお！

中島：ちょっと細いかな。もうちょっとふくよかなほうがいいね。じゃあ120くらいにしてみようか。結構太いから、もう直線とは言えないけどね（笑）。せーの、ぽい。

中島：ほら。

鈴木：おおー！

江川：わー！

中島：皆さんへのプレゼントです。

鈴木：あら！

江川：コーチからの愛が、プログラミングでプレゼントされてます（笑）。

中島：このまま投稿しておきますので、皆さん参考になさってください。コーチに提出を押します。皆さん静かに。いきますよ、せーの。

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

鈴木：何回聞いてもおもしろい（笑）。

江川：（笑）。

鈴木：投稿するたびに皆さんのPCからこれが聞こえるわけですからね。おもしろいですね。折れ線を描いてから、その先端を丸くする。するとハートができるということですね。

中島：あんまりこういうことする人、いないと思うんですよ。

プログラムは足し算引き算だけじゃない

鈴木：こういう書き方は通常しないですよね、多分ね。

中島：あのね、普通はもうちょっと細い線でやることはあるんですね。線と線の切れ目をなだらかにするということで、lineCap=roundって付けるんですけど。ハートつくる人ってあんまりいないかな。普通やるとしたら、フォトショとかIllustratorだったら四角をつくって、同じ直径で丸をつくって、それを45度回転させるとかって、よく教科書とかにありがちですけどね。プログラムで全部できるということ。

鈴木：ということで、ハートをつくっていただきました。

中島：ちなみにこれ、これだけじゃなくてね。これにもっともっとプログラムを引っ付けると、例えば。あのハートマークを押したら、何かアクションを起こすことができるんですよ。例えば、何か思い浮かびません？　例えば彼女に、これ見てよって送って、押してご覧ってぽいっと押したら？

鈴木：こう、真っ二つに割れちゃう。

中島：ちょっとちょっと！

江川：（笑）。

中島：じゃあちょっと違うほうに。

鈴木：みどちゃんのほうに、ミドリーヌのほうに。そういうの得意だから。

江川：ハートがありますよね。ハートがあって、送ったら……？

中島：ハートがあって、押したら？

江川：ふわふわ（飛んでいく）！

中島：いいですね。

鈴木：さすが、最近大喜利勉強してるだけある。

江川：そう、大喜利大好き最近！　でも、関係ないですから（笑）。

中島：音が出ますから、メッセージ入れてあげるとかね。

江川：さっきのよいしょも（笑）。

中島：そう、全く同じ仕組みです。なので、プログラムは無限大なんです。いろんなことができる。ただ足し算引き算だけじゃない、っていうことをぜひ、知ってください。

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

鈴木：ありがとうございます。ちょこっとだけ難しいことをやりました。ということで、以上！　もっともっと！　かじり部でした！　これは実習パートじゃないんでね、ちょっとだけ難しいことやったんでね。それでは本編に戻りましょう。

三角と四角もつかってみる

鈴木：今1個目終わりました。次は2個目ですね。見ていきましょう、2つ目はこちらです！

江川：あれ？　続・○△□で何つくろう？　まだ続くんですね！　何か「続」が付いただけですね、1つ目のテーマに（笑）。

鈴木：まだまだ○△□地獄からは逃れられないということですね。ということでですね、進めていきます。またですね、中島コーチの実演をしっかり見た後に、皆さんみどちゃんと実習を進めて参ります。それでは、中島コーチお願いします。

江川：お願いします。

中島：さっき私たちは丸をつくりました。直線もつくりました。ちょっとハートもつくりましたけども。あと、何が抜けてましたっけ？

江川：三角、四角。

中島：三角と四角ですよね。なぜ私が○△□にしたかというと、これ図形の基本なんですよ。だからこれが全部できるようになれば、皆さんもう描画、何でもできるようになる。っていうことなんですね。今日のお昼の時間も似たような感じでやってましたけども、とても似てます。本当に同じだから。

なので私たちは、これから三角と四角をつくります。三角と四角です。何ができますかね。ぜひそれを思い浮かべながら。

鈴木：さっきからタイムラインでは、三角とか四角はつくれないのかとか、そしたらおでんがつくれるのに、とか仰ってる方いらっしゃいますね。

江川：確かに。

中島：ちょっとちょっと、皆やる？　やってもいいよ（笑）。じゃあ、やっていきましょう。では画面見ててください、いきますよ。さっきの続きからいきます。だから人によっては違う形になってたり、それはカスタマイズして違う形になってたりするかもしれませんが。今からやるのは見本ソースの2になります。これはお帰りになって……お帰りになってじゃないや、皆さん自宅ですよね。

江川：（笑）。

中島：後ほど見てもらったら結構。ポチポチポチポチ、エディタで打ってもらっても結構です。サンプルが入っています。PDFです。反映の2のほう。これが全般のテーマ2のメインソースになります。

中島：この青色のボタンを押せば、下にもうソース入るようにつくっておきました。これもプログラムの威力ですね。

鈴木：すごいですねえ。

中島：便利ですよね。というわけで、押しますよ。何て言えばいいのかな。ぽいじゃなくてよいしょ？

鈴木：よいしょじゃないですか？　生よいしょいきますよ。せーの。

中島：よいしょ。

三角と四角と描く関数の名前は？

中島：上のボックスは変わってません。下ですね。上2行は準備のプログラムです。今は気にしないことにしましょう。document.getElementByTdってね、良くドムという、いわっち先生の授業とかで良く出てきてるはずなんで。「あ、あれだ！」っていう人もいらっしゃるかもしれません。それで、canvasの前のCってやつが道具箱だよっていうことは言いました。この下側。mytri。

江川：mytri？

中島：マイトライアングル。三角形です。それを、なるべく簡単につくれるように私がプログラムをつくりました。普通はこうやってつくるんですよね。関数にしてなるべく簡単にして、なるべく見渡し良くします。myrect、ちょっとすいません。私はやっぱり英語が下手なんで、部長お願いします！

鈴木：何で僕が……。じゃあ僕がね、正しい発音をお聞かせしましょう！

中島：カメラ目線で。

鈴木：えーっと、myrectでしたっけ？

中島：myrect。

鈴木：レ、レが大事なんで。いきますよ、myrect、myrect。はい。

中島：リピートアフターミー。レクトだと、分かんないですよね実は。これレクタングル。

江川：レクタングル。

中島：トライアングル、レクタングル。トライアングルは三角形、レクタングルは四角形になります。なので私たちは、rectは四角形だなと、これは覚えておかないといけないですね。プログラムの中でも出てきます。私の三角形と私の四角形つくったよ、っていうことにもうなってるんですよ。

こっから下、独自関数の定義って書いてますが、mytriっていうのはこういうもんですよ、それからmyrectっていうのはこういうもんですよ。そして何と、その下にmyLineもmyarkも入れときました。

おでんがつくれるようになった

中島：なので皆さん、さっきの中でもmyLine、myark使えます。このプログラムは三角と四角だけじゃない、丸も直線も使えます。ということは？

鈴木：三角、丸、四角、直線。もしかして、おでんじゃないですか？

中島：おでんくんがつくれます！

鈴木：おでんくんはもっと複雑ですよ（笑）。餅巾着みたいな。

江川：（笑）。

中島：そっか、おでんがつくれます。

鈴木：おでんくんはね。

中島：見てるんですね。そこはでも、皆さんのオリジナリティに任せますんで。とりあえずは1番上のmytri、myrectをできるようにしてみましょう。とりあえず動くようにしたい。なので、これをそのまんまプレビュ画面のところで反映させてみます。大丈夫かな、1回コンと押さないといけない。

鈴木：scriptの中で1回叩かないといけないんですね。

中島：叩いたほうが、定着してくれる。俺はこれだぞ、俺はこれだぞ。

鈴木：認識してくれるんですね。

中島：そういうことです。プレビュボタン押します、ぽい。

中島：ほらできた。かわいいですよね。ちょっとこれ、クリスマスツリーっぽくいけるかなと思ってつくりましたが、これ改造してみてください。皆さんもできると思う。myark、myline付け加えると、おでんくんできます。

鈴木：おでんくん複雑ですけどね（笑）。

中島：後はもう提出ボタン押してくださいね。それはいいでしょう。中身はとりあえず、後で説明します。まず三角と四角ができるようにしてみましょう。はい、よろしくお願いします。

鈴木：はい、それではここからは皆さんの実習の時間です。みどちゃんと一緒に進めていきましょう。

オリジナルのおでんをつくろう

鈴木：その前に、ここまで分かんない方、聞いてみましょうかね。もし着いてこれてない方は、『まって』ボタンで教えてください。分かんない方は、今からせーので『まって』ボタン押しましょうね。いきますよ、せーの。

全員：まって！

鈴木：ちょっと難しかったかも知れない。あの量のアルファベット見たら「うっ！」ってなっちゃいますよね。ただまあ、反映にはとりあえず押して、あとはmytriっていうところとか、myrectっていうとろ、myarcとか、いじっていくと好きなやつをつくれるようになるんでね。多分、大丈夫だとは思うんですけどね。

さっきやりましたよね。X座標、Y座標。位置を変えられます。それからクォーテーション。ダブルクォーテーションで囲んで色の名前を書くと色がつきます。

中島俊治氏（以下、中島）：三角と四角はこのあと説明しますからね。まずは表示試作でやってもらってます。

鈴木：3％くらいですね。もし分からないことがあったら誰か『教えて』タブに投稿してください。はい！じゃあ、みどりちゃんやってみましょうか？

江川みどり氏（以下、江川）：やってみたいと思います。

鈴木：みどりちゃんの画面で見ていきましょう。

江川：こちらですね。先ほどのは終わったんで、反映2ですね。ここら辺は変わらないんでしたね。下にいきますと……。あっ、ありました！見つけましたよ。mytri、myrect……。mytriありましたね。

中島：まだこれ、カスタマイズできないんですね。説明してない……。

江川：こちらの確認を、今しました。そして……。コンコンって一回押しましょうね。反映を押してみたいと思います。反映！

江川：あ〜、出ました〜！（拍手）

詳しいことが知りたくなったら、中島先生の授業へ

鈴木：はい皆さん、「できたボタン」の存在忘れてるんじゃないですかね？

江川：まずい！このままだと目標にいかない（笑）。まずいまずい。

中島：今日、目標3000でしたっけ？

鈴木：3000です。今、190しかきてない。はい、できたボタン押してくださいね。続きいきましょうか？

中島：今191で、ちょっと今へこんじゃいました。

鈴木：へこみましたね。でも、できたボタン忘れてるだけだと思うんですよ。

江川：本当は皆できてるんですよ。あの、おだんごの量すごかった。

中島：ああそうか。そっちにいっちゃったからね。

鈴木：「よいしょ！」を聞きたかったんでしょうね。

中島：皆、おだんごの数だけ是非お願いします。

江川：おだんごの数って多くないですか？3つですよ、1人。あっ！上がってきました。

鈴木：じゃあ、続きいきましょうか？

中島：そうですね。説明に、いよいよ入りたいと思います。

鈴木：説明してくれますよ〜！

中島：その前にですね、前回も申し上げたプログラムの勉強の仕方にはいろいろあります。人それぞれだしフィットするフィットしないもあると思います。「取り敢えず知りたいので」っていう場合は、できあいのプログラムをカスタマイズするという方法でやっていくのが一番いいのかな？ということでやっております。

「いやいやそうじゃなくて、1からちゃんと全部勉強して、全部揃ってそれからつくっていく。」そういう人もいらっしゃいます。それはそれでもいい。取り敢えず試してみたい、こんなことができるんだ！っていうことを知って貰いたい。そのために「かじり部」で、こういう形で私はお教えしているという状況になっております。

もし本当に知りたい、もっともっと知りたいんであれば……。

鈴木：schoo WEB-campusのプログラミング学に所属している中島コーチじゃなくて、中島先生の授業を受けましょう！

中島：お願いします！

鈴木：お願いします。

普通のグラフとは座標の考え方が違う！

中島：という風に話をしたところで入っていきます。ではデスクトップのほうに移動しましょう。

中島：「JSくん」です。さっきのところからですね。もういいですね、説明はね。皆さんなってますからね。この中で変えてほしいところ、mytriとmyrectになります。ここをちょっと出しましょう。あ、言ってなかった！ここ、ここね。

びよ〜んと伸びるよ！ということです。素晴らしいです。

鈴木：これもプログラムですもんね。

中島：どっちかと言うとhtmlファイルのタグの機能なんですけど。でも素晴らしいですよ。大きくできるというのはね。この中で「独自関数の実行」というところになります。

あの、mytriな三角形です。実は、何角形でもできるんですよ。四角形、六角形、スターマークもできます。シフトキー押しながらとか、ありましたけどね。

鈴木：ありましたね。

中島：お昼の時間、面白かったですよね。こちらも全部プログラミングになりますので、直感ではなく数字になってしまいます。さすがに星形マークはね、ちょっと辛いので三角形でやっていきますが「何角形でもできるんだよ」ということは知っておいてくださいね。

mytriの中で数字がいくつあるか、ちょっと見えにくいかな？　150と50、50と150、250と150。全部で6つあります。ということは三角形というのは頂点は……。

江川：3つ！

中島：そう！　練習も何もしていないのに（笑）。素晴らしいですね。3つです！3つの座標にはそれぞれXとYが1つずつありますよね。合計であと6つある。そう、そういうことです。150と50が最初の座標。いいですよね。2つめの50と150が2つめの座標となる。1つめのXY、2つめのXY、今、2つめのXYです。3つめの座標が250と150．これが3つめの座標。で、最後がgreen。すいません、私やっぱり（greenの発音）下手だな。部長お願いします。

鈴木：これ何回やらせるんですか（笑）。これもね、アールが大事ですよ。いきますよ。「green」もう一回いきますよ「green」（笑）。何回やらせるんすか、これ！　僕英語、一切できないですからね（笑）

中島：いやいや、それが一番いいんですよ。mytriを増やしてあげればいくらでもできる。ちょっと実は話をしてなかったんですけど座標の話がとても大事なんだという話をしていきます。ここ、これです。

実はこれ、縦横300ピクセルにしています。グラフ用紙です。普通グラフ用紙というのは原点（0,0）の点は左の下側になるのが普通ですよね。ところがhtmlファイルそれからWebの世界では、ここ（左上）が（0,0）になります。

鈴木、江川：へぇ〜

中島：左から右に、これがX方向。それから、左端から下向きがY軸。下向きになります。ブラウザー、HPというのは上から下にだんだん流れていきますから、上が一番少ない。だんだん大きくなる。そう考えてください。「Y軸が逆なんだ」っていうことを知っておいてください。

四角形のサイズや位置を調整するには

中島：ということでいいですか？それが終わったら次の話もしときましょう！いきますよ。myrectの話にいきます。

これは四角形になります。ちょっと難しいかも知れない。いきますよ。四角形というのはこういう形ですよね。（人差し指と親指で四角形を表現している。）これの円だったら、円の中心だったりします。多角形は各頂点ですよね。四角形の場合は、左の上！　左の上、これが基準になります。

この部分が動けば四角形がそのまま動いてくことになりますね。左の上、この座標が大事。それが、ここ。画面のほうを見てください。

100,150です。それから次の100、次の50。これ、数字が並んでばっかりで大変かも知れない。メモ書きお願いしますね。これは何かというと、横幅と縦幅になります。

鈴木：横幅と縦幅。

中島：そうです。50が縦幅。（サンプルを見ながら）これが100、これが50。ここ（四角形の左上）がさっきの座標になりますよと。

鈴木：左上ですね。

中島：そうですね。brownは色にしてあります。

鈴木：なるほど。

中島：皆さんは左上を基準にして、横幅縦幅の四角形、いくらでもつくれるようになりました。で、それ本当はですね、この下側mytri、myrectを見て欲しいんですが、myrectは比較的簡単なんです。

とても便利な「ライブラリー」とは

中島：色スタイル、塗り色なんですね。fillStyle色は何にする。あと、fillRectこれがさっき言ったX、Y、それから横幅、縦幅になるんですが、もうあまり変わらないんですけど、上側なんて結構大変でしょ。

三角形をつくるのに……。あれ、見たことないですか？　moveTo見たことないですか？

鈴木：moveToさっきやりましたね。

江川：開始点。

中島：lineToって見たことありますよね。

鈴木：さっきもやりました。

中島：そうそう。頂点が2つ、それからmoveToが1つ、三角形ができ上がった。fillStyleってのは塗りつぶしです。あと、c.fillこれが「最後に塗りましょうね」ということになります。

鈴木：なるほど。

中島：これ、いちいち書くの大変でしょ。もし三角形3つ描くとしたら……。

これだけで描こうとしたら、これ1個で6行ありますから3個だったら？

鈴木：18行？

中島：そうですよね。空白入れたらもっと多くなるしね。隙間あけないといけないし。これがもし100個つくるとしたら大変ですよね。

（3人爆笑）

鈴木：また余裕がなくなってきますね（笑）。

中島：難しいことはパソコンに任せればいい。考え方だけわかればいいっていうことで、独自関数を是非、活用なさってください。世の中にはですね、こういった独自につくった、こういった関数は便利だから「他の人にも使ってください！」っていうことで配布されたりしています。描画とか計算とか、それからページのデザインの簡単にする。よくあるのはjQueryとか。

鈴木：聞いたことありますよ！

中島：あとJavaScriptライブラリーとか、jQueryライブラリーとかってありますよね。要はこれを簡単にして「皆使っていいよ。だからいちいちBeginPass、moveToとか使わなくても適当にちゃんとルール決めてmyrectとかmyなんとか、っていうものを使ってあげれば簡単にできますよ。なるべく楽しましょうよ」っていう風なライブラリーの仕組みになっています。

これもプログラムとしてはとても便利なものなので覚えてください。ただ私はライブラリーはね、あまり使わずに「中身どうなってんの？」って考えるのが好きなので……。でもとても便利です。ライブラリーです。

鈴木：ライブラリーね。是非是非チェックしてみてくださいね。

休憩をはさんで後半戦へ

中島：これはもうお話で済ましとけばいいと思うんですね。皆さん是非！多分もう今頃見ると、すごいもの見つけてるかも知れない。

鈴木：できる方もね、中にはいらっしゃいますから。

中島：しかも、もうちょっとしたらプレゼントコーナーになりますから。

鈴木：そうなんですよ。

中島：一番最初の丸と直線、あと今のやつも、多分皆さん……。

鈴木：そうですね。最初はね「どうなるか？」って想像がつかないと思うんですけど。まずはね、どうなるか!?　楽しみに挑戦してみるといいかなと思いますんでね。是非是非それを作品として投稿してみてください。

ということで、ここまでで前半のテーマ2つ、「〇△□で何つくろう？」終わりました。皆さんお疲れ様でした。

江川：お疲れ様でした。（拍手！）

鈴木：それでは続いては、こちらのコーナーです。ということで、ここから皆さん、休憩の時間でございます。

中島：油断してました（笑）。

【休憩タイム】