初心者向けプログラミング講座グラデーションを描いてみる

初心者向けプログラミング講座・後半戦のスタート

鈴木顕照氏（以下、鈴木）：はい、後半始まりま〜す。ということで引き続きよろしくします。かじり部、部長の鈴木でございます。

新井りか氏（以下、新井）：はい、皆さんの部員代表の、新井りかです。

鈴木：はい、みどっちよろしくお願いします。

新井：部長、みどっちじゃないです。りかっちです。

鈴木：「みどっち」よろしくお願いします！

新井：「りかっち」です！ということで、後半戦よろしくお願い致します。

鈴木：皆さんにアピールしたほうがいいんじゃない？

新井：すごい今、縮こまっちゃって。裏で皆さんの作品を見させて頂いたんですけども……。ちょっと、完全初心者の私には、ハードルが高い！

鈴木：ハードルが高い。難しかったかな？

新井：できれば私と同じように「初心者です！」という方や、「かじり部自体初めて！」だったり、「すっごい初めてです！」という方がいらっしゃいましたら何でもいいですので……。多分、使い方自体わかってないと思うんですけども……。

鈴木：そうだね〜。

新井：一言でもいいのでコメント投稿ください。

鈴木：タイムラインに投稿してください。

新井：お願いします。

鈴木：お願いします。お待ちしております。そして後半もですね、この方と一緒に学んでいきます。中島コーチでございます。

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

鈴木：はい、きました。ためましたね、今日も（笑）。では進めてまいります。それじゃあタイムスケジュールをちょっと見ていきましょうかね。タイムスケジュール、どん！

今がここ（テーマ3）。ここの始まりですね。テーマ3のとこですね。あとテーマ2つありますんでね、ここで皆さん実習していきますよ。実習していきましょう！　間にミニコーナーあります。はい、ということで進めていきたいんですけど、コメント来ました？

新井：来ました！　Bさん。「初めまして」ということで。

鈴木：初めましてですね〜。

新井：大丈夫です。私も今、裏で「どうしよう？」と思って。最初はまだコメントしてたんですけども途中からコメントできなくなってしまったんで（笑）。今日、一緒にやっていきましょう！

3つ目のテーマは「色をひと工夫しよう！」

鈴木：一緒に頑張りましょう。よろしくお願いします。はい、ということで3つめのテーマに参りましょうか？　そうそう、後ですねもう一度、一応アナウンスしときます。今回使う「JSくん」でございます。JSくん。今からでも、まだまだ間に合いますのでね、是非是非、挑戦してみてください。それから「かじり部」は生放送限定でございます。録画ありませんので、しっかり見て覚えて帰ってください。ということで、3つめ見ていきましょう。本日3つめのテーマはこちら！

新井：「色をひと工夫しよう！」これってもしかして先ほどやっていたテーマの続きですか？

中島：そうです。

新井：おっと（笑）。

鈴木：大丈夫ですよ。

新井：大丈夫ですかね？　あっでも「初めてです」（コメントが入る）

鈴木：どなた、どなた？

新井：Cさん！　「りかっち、私も初心者だよぉ〜。頑張るよん」頑張りましょう！

鈴木：ベンチであっためて来いよ（笑）。

新井：かんじゃいました。ちょっと。今、ハイになり過ぎて。でも同じ境遇の人がいらっしゃるとやっぱ嬉しいですよね。

鈴木：皆まだまだ初心者ということで。

新井：「ステッカーでも何でもいいから欲しい」

鈴木：あげてないからね、確かに。

新井：本当に頂いてないんですよ。私たち部員代表も貰ってないので。

鈴木：お金かかってるから……。

中島：さっき私、皆さんにハートをプレゼントしました（笑）。

鈴木：お金かかんないプレゼントいいですね。Dさん「りかっちガンバレ」って言ってますよ。

新井：頑張りま〜す！　Dさん初心者なんですかね？

鈴木：ということで、3つめのテーマに進んでいきましょう。3つめのテーマも中島コーチの実演を、まずはメモをとりながら、しっかり見て覚えましょう。その後に、りかっちと一緒に今度は皆さん実習進めていきますよ。それじゃあまずは中島コーチ、よろしくお願いします！

中島：では実演するのですが、皆さん何か1つ忘れているような気がして……。

鈴木、新井：んんっ!?

中島：多分、おふたりも忘れているかも。

新井：何？

中島：『できた』ボタン（笑）。

鈴木：全然覚えてない（笑）。

新井：あ〜（笑）。

鈴木：今日の目標3000ですよ。

中島：そうなんですよ。

新井：ちょっと待ってください。これ……。

中島：多分皆さん、つくるのに忙しくなって。

新井：なるほどね。

中島：あと、タイムラインで忙しいからだと思うんですが、是非押してやって下さ〜い。お願いします。さっき言いましたね。団子の数だけお願いします。

鈴木：よろしくお願い致します。

「JSくん」の使い方

中島：ということを感じながら、でも頑張っていきましょう。さっきの3色団子とかね、あと、お家をつくったりしました。実際プログラムだと動かすこともできるんです。さっきの実際もう、団子動かしてる人いましたけれども、まぁ、そこはちょっと次に置いておいて。まずは「いろんな描画ができるんだ！」ということをやってますが、どうしてもさっきの若干、平面的な感じしません？

鈴木：ちょっと平面ぽかったですね。

中島：あとタイトルが「色をひと工夫しよう！」。ひと工夫、ちょっと工夫しましょう。なので平面の、全部同じ色じゃなくて、グラデーションをかけてみよう。グラデーションをかける方法をお話したいと思います。それができると本当、いろんなことができるので、そういったグラデーションの仕方、この前半それだけです。だからとてもシンプル！

新井：グラデーションがシンプル！　シンプルにできるかな？

中島：できると思う。まずは「JSくん」でやってみましょう。JSくんに移ります。これも皆さんお馴染みになりました。もし今日初めての人はよく見ていただいて。使い方、一応書いてますからね。URLはいいですね。多分連絡いってると思います。

新井：授業詳細ページからもとれますので。

中島：そうですよね。規約に同意をしていただいて、部活に利用してください。規約は「悪いことしちゃいけませんよ」って書いてるだけです。はい、では入りました。おおっ！　皆すごいな。もう次のやつ、やってる人いるし。こっち見たほうがおもしろい気がしますけど（笑）。

新井：おもしろい！

中島：でも皆さん、グループページにも投稿してくださいね。アピールしてください。ということをしながら、やっていきましょう！　エディタのページ、ここに移動します。一覧楽しいけどね。エディタ、こちらに移動しますよ。

ほい！　そうしたら、さっきまでの人たちはね、いろいろ書いてあるかも。何にもない人もいるかも知れない。今初めての人もいるかも知れないので、取りあえず何もない状態にしてしまいます。

初めてアクセスした状態。1回でもアクセスした人はわかりますよね。で、今3回目になりますので「基本ソース3」「反映3」このボタンに注目をしといてください。もし前半聞き逃した方は「ソース1」「ソース2」ありますからね。見ていただいても結構です。

間違えたって大丈夫！

中島：で、「見本ソース3」。今日グラデーションやります。グラデーションのやり方なんですが、1からやってもいいんですよね。まぁ、折角ですからできたもの、それをカスタマイズするということで、すぐに楽しんでもらおうと思って、あらかじめ準備をしておきました。

なので「反映3」というボタンをポチします。せーの、ポチ！するとね、プログラムがもう入っちゃうんですね。3番目のサンプルもう入れました。で、これを皆さんカスタマイズできるようになります。

ちょっとこれ置いといて、その前に皆さんはネームを入れましょう。名前です。実名でなくて全然構いません。ニックネーム、思い浮かんだもので結構です。なるべく人とバッティングしないようにしてくださいね。間違えると大変ですからね。

私はナカシマアと言われてますから「nakashimmer」と打ち込んでしまいます。もう打ち込んでる人もいますからね。それはそれで結構。日本語でもいいんですが、できればアルファベットでお願いできるといいかな、という気はしています。

丸1（サンプル）、丸2（ネーム入力）ということで今やっています。じゃあ丸3「ソース入力」ということですが、これ後でカスタマイズをします。ソースの入力、もう入れてますけどね。これをカスタマイズしていく。上半分は今、気にしない。

鈴木：はい、もう気にしない。わかんなくても、いいんです。

中島：そうそうそう。間違えてつくってもね、壊れること、まずないから。パソコンはね。壊れることないよね？　普通はね……。

鈴木：そんなアニメみたいなことあります？（笑）。

中島：たまにプログラムでね、延々と続くようなプログラムつくるとハングアップすることはあります。でもその前に多分、ブラウザは「ごめん。もう駄目だ」ってなりますので、まず大丈夫でしょう！

独自関数でグラデーションをつくる

中島：で、独自関数の定義というところを見てください。ちょっとこれね、狭いんですね。で、ちょっと「ナカシマ」を消してもらって……。消えますかね？　　消えないかな？　難しいかな？

鈴木：あっ！　右下の中島先生のワイプを……。あっ、消えました。

中島：さすがだ。ここ、右の下側、引き出せるようになってますね。ここ、ずらすと、ほらほら、こんな感じで横に伸びるようになってますので、適当に伸ばしてやって、見えやすくしてください。

大事なところは一番上の、ここ「独自関数の実行」というところになります。

mygraって書いてありますね。グラデーションです。JavaScriptではどっちかと言うと「グラディエント」っていう言い方をすることが多いのでグラディエント……。「グラデーション書くぞ！」っていうのが、この一文です。

ところがグラデーション書くとしたら、すごい何行も書かないといけないです。何書けばいいか？　実はこの下にすぐ見えてます。

「独自関数の定義」というところ。

ここに「var g=c.createLinearGradient」。リニアってわかりますかね？　線形といいましてね、直線と思ってもらったらいいです。直線のグラディエントをつくりましょう。

それからその下側、「addColorStop（0, color1）」と書いてありますね。色なんですよ。グラデーションの色をそこで指定してあげる。

0は最初、1は最後。そういうもんなんですね。「グラデーションの最初と最後の色を決めて塗りましょう」っていうことを今、やろうとしています。

で、「fillStyle=g」って書いてありますが、これグラデーションの「g」です。fillStyle色を塗りましょう。グラデーションで色塗るよ。

その後、「fillRect」Rectってさっきやりましたね。部長！

鈴木：鈴木部長の発音講座のお時間がやって参りました。「R」が重要なんですね。「Rect」リピートアフタミー、「Rect」。

中島：「アングル」も入れちゃってください。rectangleで。

鈴木：はい、いきますよ。rectangle

鈴木、中島、新井：rectangle！

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

プログラムだけじゃなくて、仲間も大事

中島：やっぱりねプログラムだけじゃなくて、いろんなものを……。例えばなんですが、タイムラインで皆さん盛り上がったりしてるじゃないですか、これもとても大事な勉強だと思うんですよね。その中でいろんな人たちの意見も吸収できるし友達にもなれる。必要と思うんですよ。

新井：確かに。

中島：例えば私がいなくなったらどうします？　私いなくなっても友達いれば、教えあうことができるわけです。

鈴木：確かに。

中島：さよなら（笑）。

新井：ちょっと待ってください、コーチ。はやいです（笑）。

中島：そりゃ冗談ですけど、「やっぱ人脈って大事だな」って私、毎回いろんなセミナーで言ったりしてますんで是非、仲間つくってやってください。仲良くなりましょうね。ということで、本題を……。これでもう説明終わっちゃってる。

ただ、こちら長いですから、これらを全部ナミカッコの中に入れてしまってますよね。入ったらば、ここfunction mygraって書いてあるの、わかりますか？　functionってよく、数学で「関数」って習ったと思います。function mygra、「mygraという関数だよ」。ナミカッコの中のことを、ひとまとめにして、一つの言葉にしてしまいましょう。

プログラムは細かい作業を楽に実行するのに使える

中島：例えば部長、ちょっと時間があるからお話しましょう。車を運転する時って、一番最初なになさってます？

鈴木：え〜っと交通ルール、警察官の方が見てると怖いんですけど……。まず僕はシートベルトをするかな？　ドアを開けて座ってシートベルトかな？

中島：その次。

鈴木：その次に……。ブレーキを右足で踏みながらサイドブレーキを下ろしますね。

中島：かなり細かいですね。でもそれをプログラムが実はやってるんですよ。プログラムが今はね、まだエンジンと代えられませんが将来、無人の車ができるとかって……。検索ネット、大手のGoogleさんとか研究していらっしゃいますけれども。要はプログラムというのは、ちまちましたいろんな処理をひとまとめに一生懸命やってらっしゃる。

で、それを例えば「部長、今からシートベルトつけて、それからキーを差し込んで、ブーンと動かして、それからエンジンを動かして……」みたいなことをすると、大変でしょ。だから「車運転してよ」で、済みますよね。プログラムもそういう言い方。

だからfunctionというもの、ちょっとデスクトップに戻って貰いますが……。function mygraというのは「mygraというふうに指定したらばその下のやつ6行くらい5行くらいありますか。それを全部実行しなさい」っていうものなんですよ。しかもその時にmygra()の中にxとかyとかwとかhが入ってますね。あれ実は受け皿です。

関数の中でxとかyとかwとかhこれは受け皿になって、関数の中で処理する時の……。本当、受け皿です。いろんな値の受け皿。例えば車を運転する時に誰といきます？

鈴木：家族とか……。

中島：そうですね。家族だったらその中に「家族といくよ」とか。1人でいくかも知れない。ひょっとしたら、言えない人といくかも知れない。

鈴木：もしかしたらね。

中島：そういった細かいリクエストをするのが、丸括弧だと思っておいてください。

グラデーションの色を変えてみる

中島：であるならば、ちょっと上に戻りましょう。

mygraという中にリクエストしてるんですよ。50と100、200と100、skyblue、darkblueっていうのが入ってるよ、ということです。ちょっとこれ、実行してみましょう。いきますよ。話が長くなっちゃいましたね。でも大事な話だから……。

鈴木：そうですね。大事な話ですよね。

中島：この先がつかめないというのが。マウスがあまりにもデカ過ぎるから。あっそっか、これでやればいいのか。いきます。プレビュー反映でいきます。一回、コンしてくださいね。ほら来た！

鈴木：出た！

中島：さっきの見てください。これ、焼き付けといてくださいね。焼き付けといたうえで、上いきますよ。さっきのプログラムです。ここのまだ上、mygraというところです。色がskyblueとdarkblueになってたの……。

鈴木：なってますね。

中島：もう1回いきますよ。skyblueとdarkblue。ちょっとわかりにくいですよね。しかもこれ、どっかの銀行の色にそっくりなんで変えちゃいましょう。今、気がついちゃいました。どことは言いません。skyblueをwhiteにしてみようか？　（部長に向かって）どうぞ！

部長：（英語の発音を意識して）white！

中島：whiteにしました。ほら！変わりましたよね。

鈴木：本当だ！

下がdarkblue。海を想像したんですけども……。「ちょっとそれじゃあね」って思う人のこともあるので、じゃあ……。りかっち、何色がいい？

新井：黄色で！　yellow！

中島：イエローサブマリンとか、いいですよね。

鈴木：いいじゃないですか〜。

中島：じゃあプレビューしてみましょう。

鈴木：あ〜、可愛いですね。

まずはグラデーションでできることがわかればOK

中島：こんな感じで簡単にできる。グラデーションつくろうと思ったら結構大変なんですよ。だけれどもmygraっていう名前にまとめちゃいました。これ独自関数の実行といいます。この中で50、100というのは何か。mygraの最初の数字50、100は、あの四角形の左の上。

鈴木：左の上。

中島：さっきmyrectありましたね。50、100というのは左の上です。それからその下、200と100これは横幅、高さになります。それ考えたら楽ですよね。あと最初の色はwhite、次がyellowだ！　であるならば皆さんは自由にグラデーションが書けちゃうんですよ。おもしろいでしょ。実はこれだけなんですよ。皆さんにやってもらいたいこと。もちろんこの下の、難しいとこありますよ。

鈴木：難しかったな〜。

中島：LinearGradientとかありますが、これは授業で学べばいい。取りあえず皆さんは「グラデーションこんなことができる！」しかも、これちょっと伸ばします。実は、サンプルにあったmytriそれからmyrect。サンプル1にあったmyarc、myline。使えるようにしときました。