私がLife is Tech!で中高生にプログラミングを教えているのは，何回かブログ記事にしているのでご存知の方も多いと思います．
前回に引き続いて，今回も中高生にプログラミングを教えてきました．中高生って本当に飲み込みが早くて，教えているこっちが楽しくなります．
毎回初心者とは思えないすごいものをバンバン作ってくるので，いっつもブログに書いちゃいます．今回は，WebデザインコースとWebサービス開発コースの混合チームでした．
目次
Life is Tech!のキャンプって？
前回もブログ記事を書いていたのに今更って感じはありますが，Life is Tech!のキャンプについてご存じの方はブログ読者の方にも少ないはずなので少しだけ書いておきます．
Life is Tech!は，中高生のためのIT教育を行っている会社です．ゲームやデザイン，デジタルミュージックやイラスト，iPhoneやAndroid，IoTまで，ITに関することを幅広く教えています．
5日間のキャンプ形式で，開発やりながらゲームや出し物を楽しんだりして，思い出も友達も技術もつけられてしまうという，まさにIT界のディズニーランド．(詳しい内容はキャンプに参加してからのお楽しみです！)
そして今週，九州大学にてメンターをやってきました．
前回の様子に関してはこちらを御覧ください．
担当コース
前回はRubyを使ってWebサービスを開発する，Webサービス開発コースのメンターをやらせていただきましたが，今回は，HTML，CSS，JavaScriptを使って綺麗なWebページを作るWebデザインコースのメンターもさせていただきました．
やっぱり，自分だけのオリジナルサイトを作れるっていうのはとても楽しいのかなって思います．
キャンプではいつも自己紹介から始まるのですが，やっぱりWeb系のメンターとして他のメンターとは少し違った自己紹介したいなって思って，新幹線の中で復習も含めて自己紹介サイト作りました．
結構綺麗なものが出来ました．これ実はキャンプで使う素材を元にして作ったもので，「こんなのがキャンプ終了後には作れるようになるんだよ」っていう話したりしました．
Webデザインコース参加者作品
まずはWebデザインコースの参加者の作品を紹介します．パソコン自体そんなに触ったことがないって子もいて，でも最後にはめちゃくちゃ良いサイトが出来たと思っています．
1人目 生花部紹介サイト
1人目は，生花部に所属している子です．生花の良さとか，部活についてがよく分かるサイトになっているなって思いました．完全初心者スタートでしたが，綺麗なサイト出来てます．生花部の人数増加予報が立つほど．
学校名とか個人情報が入っているため，名前は伏せますが，ヘッダ部分の画像を固定して文字だけ動かしてみるなど，ちょっとした工夫が入っていてとても良かったです．
2人目 バドミントン部紹介サイト
2人目の子も，部活を紹介するサイトを作ってくれました．バドミントン部に所属しているとのことで，バドミントン部の紹介サイトです．
どうですかこのクオリティ．この子も完全初心者です．フォント，文字の色，背景画像など全てにおいて細かいところまでしっかりと考えられています．
画像を丸く切り取って，ちゃんと影までつけられているところとか本当に好きです．影の色もトップ画像の芝の色と合わせたりしてみやすくなってます．
3人目 バンド紹介サイト
3人目の子は，彼が所属しているバンドの紹介サイトを作りました．
彼は本当に理解が早くて，どんどん綺麗なWebページになっていくところを見るのがメンターのこっちもとても楽しかったです．
トップページはこんな感じになっています．一番上の画像がとてもかっこいい．
その後，メンバー紹介のページです．レイアウトも結構しっかり考えてからコーディングしたみたいで，初心者とは思えないスムーズさでした．
そして，彼のオススメバンドの紹介です．今後，自分が演奏した映像とかに差し替えていくつもりらしいです．
最後にライブの紹介が入っています．ライブ紹介だけ口調がめっちゃ丁寧になってる．
いや，本当に，HTMLってなに？って言う状態から始めた子が，基本的なHTMLタグを理解し，CSSの書き方を覚えてこれだけのサイトを数日で作っちゃうんですから，彼らの変化には驚きです．
Webサービス開発コース参加者作品
次に，Webサービス開発コースの参加者の作品です．データベースや各種APIを駆使していろいろユニークなサイトを作ってくれました．
1人目 作品紹介サイト
この子は，ものづくり自体が好きで，自分が作ったものとか描いた絵とかをアップするサイトを作りました．
前回，Webデザインコースに参加していたようで，その時に作ったサイトに投稿機能などをつけました．
サイトのトップページはこんな感じです．Twitterへのリンクも貼ってあります．
投稿機能はこんな感じになっています．
タイトル，本文，画像を入れると，それがサイトに表示されるようになっています．これで，作ったものを追加したいときはいちいちHTMLを書き換えなくても良くなりました．
更に，いいね機能や削除機能もついていて，他の人からの評価も受けられるようになっています．
そして，サイトを訪問した人に少しでも楽しんでもらえるように，iTunesのAPIを利用して，音楽の視聴などができるようになっています．
スクロールした時にヘッダもついてくるように工夫していて，使いやすい+綺麗なサイトができていると重います．
すっごい意欲も高くて，真面目な子なので，これからもどんどん技術高めていくんだろうなって思います．
2人目 人物管理システム
この子は，なんかすっごいいろいろな機能を持ったサイトを作ってくれました．
まず，彼のサイトにはログイン機能が存在します．セッションの使い方や暗号化のgemについて軽く教えただけでqiitaなどを参考に実装してくれて，自分で学ぶ力がすごく高いなって感じました．
新規登録時に入力したユーザ情報をサービス内で使います．
ログイン画面はこんな感じ．
この子，自分のサイトへのこだわりがすごくて，フリー素材とかは使いたくないって言って外まで取りに行ったんです．さわやかな背景画像取れてて，センスあるな～って思いました．
機能の1つ目としては，日記のように呟ける機能があります．
もちろん，写真もつけることが出来て，その日に何をしたかなどを記録することが出来ます．
そして，機能の2つ目!!
デザインは間に合わなかったようですが，いつ何を買ったかなどの情報を記録しておくことが出来ます．家計簿の機能ですね
カテゴリごとにグラフ化して表示してあげることができるので，とても便利!!
そして最後は，その人の感情を解析する機能!!
形態素解析と呼ばれる，自然言語処理のためのgemを利用し，つぶやきからを解析して，現在のその人の感情を推定する機能です．まだ途中までしか実装できていませんが，この向上心は本当にすごい．
画像のように，品詞ごとに入力された文章を分解しています．今後，名詞だけ取り出してその人がよくつぶやく単語を割り出してみたり，形容詞から様々なことを解析したりして見る機能とか追加されたりして…!!
この子，これだけすごいことしてるのにまだ中学2年生っていう．絶対将来すごいことになる．
3人目 ワンナイト人狼
ワンナイト人狼というゲームをご存知でしょうか？
カードゲームとして人気の人狼ゲームを簡略化されて作られたワンナイト人狼です．それを今回Rubyで実装した強者がいました．
ゲームを開始すると，自動で役割が振られ，プレーヤーは役割を確認していきます．
本人確認のため，「YES」を押すと，割り振られた役割を確認することが出来ます．
人狼になったプレーヤーたちは村人のふりをし，村人や占い師，怪盗の人間チームは協力して人狼を探し出します．
占い師などの少し複雑な処理もこの短期間でしっかり実装してきてくれました．
もちろん，人狼の醍醐味の投票機能もあります．
投票が終わると，自動的に集計して，勝利チームを判定してくれます．
勝利チームにはスコアなども保存できるようにしたら良いなって思いましたが，それはこれからの課題です．
教えるのとっても楽しかった
僕自身，プログラミングは大好きですが，教えるのもとっても楽しかった．
中高生が自分の思いをどんどん形にしていって，スキルを伸ばしていくところ．
そして最終日に，もっともっと勉強したいですっていって帰って行くところ．
決して楽ではないけど，やってよかったなっていつも思います．
中学生，高校生でここまでのものをこんな短期間で作れるなんて．
彼らのこれからに期待です．
それと同時に，僕ももっともっとスキルアップして，いろんなことを教えられるメンターにならなければ．
そして，技術的にも人間的にも尊敬されるようなメンターに．
ちょっとでも彼らの将来に影響を与えられていたらいいな．
5日間ありがとうございました．
▼期間限定で無料配布中▼
- 経済的自立を果たす10のステップ
- 時給10円から年商10億円に至る道のり
- 最短で0→1を立ち上げる起業術
- お金持ちになる5つのルール
- すぐに実行できる即金マニュアル
無料特典を受け取るか迷っている方は、こちらの記事「真面目」でも「頭がいい人」でもお金持ちになれないたった1つの理由」をお読みください。
