ちょっとしたカスタマイズの楽しさも体験　初心者向けプログラミング講座の1時限目・完結編

入力ボックスの作り方

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

新井利佳氏（以下、新井）：いえい！

鈴木：前半に続いてですね、メインテーマとはちょっと違うところでですね。プログラミングのちょっとした知識とかですね、裏ワザみたいなものを中島コーチに教えてもらうコーナーです。後半のちょっとだけ！　かじり部では何をかじるんでしょうか？　中島コーチ。

中島俊治氏（以下、中島）：文字や数字だけではない入力のいろいろ、っていうものをお話したいと思います。先ほど私たちは数字で入力したりね、何かしてましたよね。あ、この後にやるやつかな。

鈴木：うん。

中島：あ、計算機でやったんだ。私たちは数字でやりましたけれども、数字じゃない入れ方がありますよっていうこと。それから数字じゃないものの入力の仕方っていうものをお話したいと思います。これね、ちょっと作らないといけないんだよね。頑張ります。

鈴木：おお。ちょっと頑張りましょう。

中島：JSくんで、入力を作ります。

鈴木：これはレベル高いかもしれませんけれどね、皆さん見ていきましょうね。

中島：うん。でも今は日本語です。msgというところは、このままにしておきますね。そしてこの間に1つ入れちゃいます。何を入れるかというと、input。入力というもの。

HTMLのタグを知っている人、それから私の前の授業のほうを受けてくださった方は知ってるインプットです。そしてこれが、type="text"とか書いてあげると。これも値取得するとかすれば良いんですがちょっと時間の関係で置いときますが、このままにしておきます。

中島：そうするとですね、何が起こるかというと。スクリプトが空で上手くいくのかというのがありますけれども、ポイ。できましたね。

鈴木：おー！

中島：入力ボックスです。これ今までやってたタブは3とか5とか億とかありましたよね。そんなものを入れることができる、その入力のパーツがこれ。input type="text"というものになります。

鈴木：この1行を書くと、今のができるんですか？

中島：うん。四角の箱、入力ボックスができあがります。

鈴木：これがプログラミングなんですか？

中島：これね、プログラミングじゃないんですけれども。

鈴木：これはプログラミングじゃない。

音量を調節するボリュームにも使えるスライダーの作り方

中島：でもやっぱり、値をプログラムに伝える大事な入り口になるので、お話をしています。ところが、テキスト以外でいろんなものがあるよっていうのを今からお話しますね。何があるかというと、こういったものがあります。range。

鈴木：range。

新井：range！

中島：これね、こんなものができますよ。ぜひびっくりしてください。ただ、私の授業受けてる人は知ってるものです。いきますよ。ポイ。

鈴木：あ！　何だこれは？

中島：ボリュームになりました。

新井：へえー！

中島：スライダーとも言いますよね。いろんな言い方あります。私はレンジって言ったほうが良いんじゃないかと思うんですが。一般的にはスライダーって言われています。

私達は数字を入れることはできるんだけど、でも例えばこれがね、0それから100、間が50。例えばなんですが、今日の気分はどうですかとか、こちらは1番気分が良い、こちらは今すこし、真ん中は普通なんてあったとします。

そうすると、今日の気分ちょっと良いかな、ちょっと悪いかな、全然ダメかな、めちゃくちゃ良いかな、みたいな感じに、入力の値じゃなくて雰囲気で選ぶことができるんですね。アンケートとかに良くないですか？

鈴木：いや、良いですね。

中島：こういった人間の直感的な入力にも良いだろうし、それからHTML5とかのプログラムだと、例えば音量を調節するボリュームに使うこともできたりする。

いろんなことに使えますので、ぜひこういった入力の仕組み、レンジっていうことがあるということを知っておいてください。これの扱い方がどういうふうなのがあるかっていうのは、また授業のほうでね。ぜひ。

鈴木：中島コーチじゃなくて、中島先生の授業をやっております。ぜひぜひ見てみてください。

中島：もう1つだけいっていいですかね。

新井：もう1つあるんですか？

鈴木：良いですね、いっちゃいましょう。

中島：textやったrangeやった、もう1つだけやります。これ、ちょっとのコーナーですよね。

鈴木：ちょっとのコーナーです。

中島：じゃあちょっとだけね。

JavaScriptのカラーピッカーで色の処理ができる

中島：color、色です。好きな色、部長何ですか？

鈴木：僕は水色です。

中島：うん。好きな色、りかっち何ですか？

新井：えっと、赤色です。

中島：良いですよね。であるならば、色として伝えることはできますが、ちょっと微妙な色ってあるでしょう。ウグイス色であるとかね。それから紫といってもいろんな紫がある。

赤紫、青紫、黄紫。あ、ないか（笑）。そんなことがある。そんなときにこれがあれば。本当はJavaScriptで扱えれば良いんですけどね。ポイ。

中島：黒い四角が出てきました。これ押しちゃいます。ポイ！

中島：何か出て来ました。真っ黒けですよね。スライダーを押しちゃいます。

新井：わー、きれい！

中島：きれいですよね。この中で、赤色が好きって言いましたよね。この辺かな。

新井：もうちょっと……その色ですね！　何ていうのかな、ピンクと中間ですね。

中島：良いですね。これ、カラーピッカーといいます。これを、相手に伝えることができる。色コードっていうのを知ってる人は、#ff0000とかっていう、16進数の色のコードで送ることができます。ちなみに部長、水色好きだって。

鈴木：その辺も好きですけどね、もうちょっと青に近いほうが良いですね。

中島：なるほど、言ってください。

鈴木：この辺良いですね！

中島：良いですねえ。なので、この値を伝える。JavaScriptで処理ができるようになります。部長の色はこの色、りかっちの色はこの色、こんな感じで捉えられるようになると、もっとおもしろくなるでしょう。そういった入り口の話も、プログラムにはとても大事です。

プログラムというのはね、「もし～だったら～する」というものだけじゃなくって。例えば計算もできるし、入り口もいろいろあるんだよっていうことを、ぜひ知っておいてください。

この先にはセンサーであるとか、重力の加速度であるとか、いろんなものを取得することが可能になっています。そういったいろんなものを全部入力して、それで作っていただけたら、もっと楽しいと思います。

鈴木：ありがとうございます。

新井：すごい感動しました私。だってこのチョンチョンの間を変えるだけでこんなに変わっちゃうんですよ。

鈴木：このチョンチョンの間ね、colorに変えたりとか、rangeとか。

新井：変えただけで、あんなバーが出てきちゃったりとか。びっくりしました、こんなに変わるものなんですね。

中島：あとスマートフォン専用の入口、入れ方なんてものもありますからね。それはまあ、授業のほうで。今日はかじり部ですからね。

鈴木：部活ですよ。

中島：歯茎から血が出たら困りますからね。そのちょっと手前で終了しておきたいと思います。

鈴木：はい、分かりました。中島コーチ、ありがとうございました。ということで、以上ちょっとかじりたいのコーナーでした。それでは、部活ももう大詰めですね。何と4つのテーマで今回進めておりますけれども、最後4つ目まで来ました。皆さん、長い帳場お疲れ様です。

中島：お疲れ様でした。

BMI計算機を完成させよう

鈴木：最後も、頑張っていきましょう。いきます。4つ目のテーマはこちら！

鈴木：BMI計算機を完成させよう！

中島：完成させよう！

鈴木：あれ、BMI計算機って完成してなかったんですね。

新井：そうなんですね、私もう終わった気でいたんですけど。

中島：あ、終わって良いんですか？

鈴木：いや、ダメですね！

中島：部活ですから、とことんやらないと。目指せ県大会だもんね。

鈴木：県大会あるんですもんね。

中島：県大会いつあるんだっけ？

新井：うーんと、来週？

鈴木：結構早いね。

中島：ちょっと待って、来週はまだ部活あるでしょう？　来月な感じかな。皆、部活頑張りましょう。県大会目指せ、それから地方大会、全国大会いきます。それから全世界大会。

新井：世界まで行っちゃいますか。

鈴木：すごいことですよね。

中島：プログラムの大会ありますからね。

鈴木：これをきっかけにね、プログラミング勉強しようってなってどんどんやっていったら。本当にね、世界ってありますからね。

新井：さっきも私と同じように感動して、もっと学びたーいって方がいたんですけど。

中島：良いですね。

鈴木：中島先生の授業いっぱいありますから、ぜひぜひ。

中島：ライブはないんですよね。

鈴木：ライブはないですね。

中島：この前さよならしちゃいましたもんね。悲しいんだけど終わりですって言って（笑）。

鈴木：こっちではコーチですから。

中島：そっかそっか。

JSくんエディタは一晩で作った

鈴木：それでは進めていきましょう。最後のパートもですね、まずは中島コーチの実演をみます。しっかりメモをとりましょう。そしてコーチの実演の後に、りかっちと一緒に皆さんの実習のお時間があります。それでは中島コーチ、よろしくお願いします。

新井：お願いします。

中島：はい。JSくんエディタ使います。今日これ、もうメインで使ってますよね。これあの、一晩で作りました（笑）。

鈴木：すごいですね。

中島：元々ソースがあってね、それをカスタマイズしながらやった。でもね、結構いろんなところが苦労しながらやりました。じゃあやっていきましょう。

見本のソース4番目、これが今日の最後に作るものになります。ソースのプログラム見てみます。ちょっとね、薄目で見てくださいね、薄い目で。いきます。ポイ。

中島：全部で37行あります。

鈴木：こういうのにもね、段々慣れていかないといけないですもんね。

中島：でも、何となく見えてきてません？

鈴木：そうですよね、見るところ決まってますよね。

中島：特に計算のところとかね、BMIそのまま出てますし。それとif、bmiが18.5よりちっちゃければ。

中島：さっきはif、bmiが何々だったらですが、18.5よりBMIがちっちゃければ、低体重かも。薄目で見てくださいね。else、それ以外でもしBMIが25より大きければ。

あえてね、数直線上でBMIが18.5よりちっちゃい場合とか25よりでっかい場合、なんて書いておきました。薄目で見てください。18.5よりちっちゃければ低体重かも、もうちょっと体重いるかも。25より大きければ、ちょっと重いかもね。かも、です。重いとか、そんなこと私は絶対に言いません。

鈴木：（笑）。

中島：そんなこと言ったら、私ちょっと辛いです（笑）。elseっていうのは、それ以外の場合っていう意味です。ver msg、ちょうどいいかも。何かどこかで聞いたことありますが。

ちょうどいいかもってことになります。だから、18.5よりちっちゃければ低体重かも、25よりおっきければ、薄目で見てね、重いかも、それ以外はちょうどいいかも。そういったとこだけ見てください。それ見てもらえれば、他のことに応用できません？

鈴木：そうですね。

中島：いろんなことできると思います。さっきちょこっと言いましたけれどもね。何でしたっけ。

鈴木：割り勘。

中島：割り勘（笑）。それもできるだろうし、いろんなこともできる。判断もできるようになるんですよ。なのでこれをちょっと、今からやってみましょう。

ただこれね、ちょっとお聞きしますけれども。いろいろ書いてありますよね、document.getElementByldとか何だよって、今はそんなこと気にしない。それ気にしてると、歯茎から血が出ます。

鈴木：これね、1からちゃんとやろうと思ったら、大変なことになっちゃいますからね。

中島：1からやりたければ、方法は？

鈴木：schoo WEB-campusの中島先生の授業を見てください。

中島：いやいや私だけじゃなくてね、いろんな先生いらっしゃるから。

鈴木：プログラミング学部というのがね、スクーキャンパスにはありますからね。学部登録してね。

中島：ちょっと他の先生からお金もらわないといけない。

新井：（笑）。

鈴木：プロモーションしてますからね、今ね。

中島：プロモーション、一生懸命してます。

鈴木：いろんな先生いらっしゃいますからね、いろんな授業あります。

中島：ということなので。他の先生の授業受けるとして、とりあえず私たちはプログラムおもしろいんだ！　今かじってるんだよと。あんまり詳しいこと気にしない。細目でね。これを広げると、HTML5！

鈴木：授業のほうではこれ、よくやってますからね（笑）。

BMI計算機をカスタマイズする

中島：今日はちょっと控えてます。でもやっぱりやってます。あ、これでちゃんとなる。HTML5ね。

鈴木：出ました、Tシャツね。

中島：このシャツさっき、良いねって誰か言ってましたよね。

新井：欲しいって仰ってる方もいましたね。

中島：実は、売ってます（笑）。

鈴木：え、売ってるんですか!?

中島：ググってみてください（笑）。ちょっとこれは、URLも何も教えてないから。また、要望あったら教えてください。スクーのオリジナルになるかもしれない。

新井：あ、欲しい！

鈴木：いやこれがねえ、分からないですね。これから。

新井：部長に期待。

中島：次回皆一緒になってるかも、色違いで。

新井：これ皆で合わせてやるときに着ると良いですね。

中島：ちょっと値段高くしとこ。

新井：（笑）。

中島：ということで冗談は置いておいて戻りますが、でも大事なことです。楽しみながらやるってことがね。ソースはこんな感じです。

中島：薄目で見ればいいからちっちゃくしちゃいました。elseとif、あそこが大事。それでは、エディタに戻ります。本当これね、苦労しながら作ったんですよね。

新井：（笑）。

中島：これHTMLと、それからPHPというサーバーのプログラムとの組み合わせで作っています。なるべくサーバーに負荷をかけないで、なおかつ動的に動いて、サーバーに保存するということをやっています。1晩ですけどね、結構苦労しました。

鈴木：ありがとうございますねえ、本当に。

中島：バグいっぱいありましたからね。ということで、反映の4番目押しちゃいます。いきますよ、ポイ。

中島：もうできちゃいました。上側見てください。ここ何かありません？　。これがさっきやった入力フォーム、あの四角い箱です。さっき見たことありますよね、何となく覚えてます？

鈴木：インプットタイプってやりましたね。

中島：だから、みなさんはそこをrangeに変えると？　スライドで選べるようになってきます。身長体重は数字じゃないとちょっと都合悪いですが（笑）。でも応用きかせるときにね、参考にすれば良いかなと思っています。とりあえずこのままいきましょう。

これで入力ボックス2つできてるはず。それと、button onclick、ボタンができてるんだなあって、何となく思っておいてください。それだけにしておきましょうかね。そして大事なのはこの下側。ここです。

中島：「if～だったら～しましょう」。これさっきもう説明しちゃいましたからね。薄目でもう理解できたでしょう。18.5だったら軽いよ、25だったらでかいよ。

いやでかいよって言っちゃいけないな。それと、それ以外は調度良いよってことですね。ここのコメント変えてみましょうか。これだったら皆さんいけるんじゃないですか？

鈴木：カスタマイズできそうですね。

中島：これも立派なカスタマイズです。ぜひぜひやってみてください。ということで、どうしようかな。低体重かもを、頑張って食べようねとか。

鈴木：なるほど。BMIの計算結果が表示されるときに、合わせてこれが表示されるんですもんね。

中島：そっかそっか、それを先に見せないといけなかったですね。やってみます。せーの、ポイ。ほら、出てきた。

例えば185センチ、私の体重。じゃない身長です。体重は65キロですからね。これでいきますよ、ポイ。

中島：ほら、あなたのBMIは19、ちょうどいいかも。ちょっと痩せてるかもしれないけれども、丁度良い感じですよね。

鈴木：結果が文章で出てくるってことですよね。

中島：こちらはデータがたまりませんからね、提出しても良いですけれど。どうせやるんだったら、低体重とか重いかもとか、ここを変えてみてください。例えば、低体重かもはいっしょに食べようね。仲間だもんね。重いかもってところは、いっしょに我慢しようね。

鈴木：優しいなあ！

中島：ちょうどいいかものところは、何にしようかな。良かったね。

新井：冷たいですね、ここで急に！

鈴木：急に！（笑）

中島：ちょっとアイデアが持たず切れちゃいました。でも、そういうのも大事だと思います。プログラムだけやるんじゃなくて、そこに乗っかるコンテンツ。これを考えることもとても大事ですので、やってみてください。実演は以上にしたいと思います。

鈴木：はい、コーチありがとうございます。この後はりかっちと皆さんがこれをカスタマイズする番でございます。分からないことがあった場合は、誰か教えてタブで質問を投稿してください。追いつけないなという方は、まってボタンを押してください。まってボタンは、せーの！

一同：まって！

鈴木：はい、こういうことですね。

中島：ちょっとフライングしませんでした？　いま。

新井：ん？

鈴木：あ、服部が（笑）。じゃあ、皆で実習スタートです！

BMI計算機を使ってみよう

（実習タイム終了）

鈴木：それで、計算してみよう。

新井：それじゃあ、先ほどの171センチ。私の予想です。

中島：半角にしてあげて。

新井：半角に、はーい。そして体重が、66。いきます！

中島：そんな感じでね、皆さんもやってもらえると嬉しいなと思います。BMIじゃなくてもね、違うことにも応用ききますよね。

鈴木：そういうことですよね。

中島：そういったネタを、種ですね。種を皆さんにかじってもらってますので、ぜひぜひやってみてください。

鈴木：はい、ありがとうございました。こういうのを使えばね、皆さん脳内メーカーみたいなやつもどんどん作れるわけですよね。

新井：ああ、そういうことか！

鈴木：自分で占いとかも作れちゃうわけですよね。

中島：それこの前のミーティングのときに言っていただければ！　作ったんですけれどね。脳内メーカーみたいなのが作れる。

鈴木：作れるし、URLを友達に渡せば、それを使って友達も遊べると。

新井：なるほど。

鈴木：今回ね、ちょっとかじりましたけど、自分のプログラミングになったわけですから。カスタマイズは。

新井：これって、作ったURLを例えばTwitterでつぶやけば、クリックした人はそのまま遊べるんですか？

中島：使えますよ。

新井：おー！　つぶやきたい。

鈴木：ぜひね、かじったことを皆に自慢してみてください。

中島：あと、部室に投稿してもらって。

鈴木：そうですね！　グループがありますから。

中島：だって次1週間先ですもん。

鈴木：そうなんですよ、次回が8月16日の日曜日ですから。ちょっとまだ先ですから。あ、質問が来てますね。Nさん、計算を押しても何も起こらない……。大丈夫かなこれは。スクリプトのところをコンってしてないとか。そういうことじゃないかな。

新井：私がさっきやり忘れたことですよね。

中島：そうそそう。1回コンと押してあげてください。

鈴木：それをやらないと、プレビュ反映されないんですよね。

中島：すいませんね、そこまで作る時間がちょっとなかったんでね。入力してってことだったんでね。

鈴木：Oさんも、割り勘やってみようと。

中島：おお、良いですね。割り勘やるときに、人数を1引くと良いですよ。

鈴木：なるほど、幹事の分は入れないってことですね（笑）。

新井：うまーい（笑）。

中島：だってアプリの中は分かりませんからね。合計金額、人数入れた、1引いとく。結果は、幹事さん除いた割り勘。

鈴木：なるほど。

中島：私そんなことしませんよ。何か部長がさっきやってって言ったから。

鈴木：ちょっと待ってくださいよ（笑）。

新井：確かに、部長ってそういう人かもしれない。やりましたね、コーチ（笑）。

中島：そうそうそう（笑）。

鈴木：ということで、今回4つのテーマでやっていきましたけれども、全て終了しました。皆さん、お疲れ様でした！

中島：良かったあ。

鈴木：皆さんどうでしたでしょうか。感想なんかをつぶやいていただけるとありがたいですね。