あーあーそのー

最近はshuyuheyと名乗ることが多いですが面倒なのでBLThunder1991のままにします。

PBL Summit2015に参加してきて、その時に感じたPBLのこと

PBL Summitとは

2015.pblsummit.jp

PBL Summitとは、全国のPBLを行っている学生を集めて、自分のプロジェクトや得た学びについて共有するイベントです。

基本的には学生主体で企画しているイベントです。なんと、今回で4回目の開催になりました。

参加者は学生の他、大学の先生方や、PBLを経験してきたOB、企業の方々や、人事の方々まで様々です。

PBLを経験してきた学生は、端的にいうとプチ社会人経験を積んできているので、即戦力として企業の方々から期待をされているようです。

そもそもPBLとは?

Project Based Learning の略です。Projectは、Problemになったりもします。

とある目的を解決するために、学生同士の少人数のチーム(1人の場合もあります)でプロジェクトを遂行する教育(学習)方法です。

所謂、座学のような教育とは異なり、目的を達成するために必要な知識を選びながら自学自習することで、より現実の問題に結びつけて技術や知識を吸収することができます。 また、教員や先生方も一方的に教えるだけでなく、一緒に考えながらチームのサポーターとしてプロジェクトに関わっていくので、より深く学生と関わることができます。

最近で言うと、ハッカソンなんかもPBLの一つの形態と言えるかもしれません。

一方で、問題解決に必要な、ジャストな技術や知識のみをピックアップしていくので、そのあたりに偏りが生じてしまったりするというデメリットもあるのではないかとおもいます。

しかしながら、そういうのはバランスが大事ですので、きっちり座学でベースとなる知識を得た上で、PBLで応用力や課題発見・解決力を鍛えるみたいなのがバランスが良いのではないでしょうか。

小難しいことを言いましたが、なにか企画があって、それを実現するためにチームなり1人なりで全力で取り組んで、その中でたくさんのことを学んだりしながら、最終的に色々な人から評価をもらえる素敵な学習方法です。

PBL Summitはどんなことをするのか

一日がかりのイベントですが、2015年は 以下の流れでした。

  1. PBL Summitとは
  2. PBLの事例共有
  3. OB・OGによるパネルディスカッション
  4. ブース発表
  5. 懇親会・表彰式

この中で、メインのイベントになるのが、ブース発表です。

ブース発表では、各大学から参加したチーム(もしくは個人)が、取り組んできたプロジェクトについてプレゼンテーションします。

私は、発表者でしたのであまり多くのプレゼンを聞くことが出来なかったのですが、プログラムをみるかぎりおもしろそうは発表がたくさんありました。全部聞くことが出来なかったのがほんとうに残念です。

あと、懇親会で先輩方とたくさんお会いできて楽しかったです。とある事情で、あまり話したことはなかったけどめちゃめちゃよく知っている先輩とお話出来たのはうれしかった。

そして、OB・OG賞頂けたのは驚きました。今まで、こういった発表会という場で賞を頂いたことはなかったので、全く予想していませんでした。ものすごく嬉しかったです。ありがとうございました。

PBL Summitを通して感じたPBLに対すること

PBLって本当に評価方法難しいんじゃないかと思います。

大学で開講するにせよ、こういったイベントで順位をつけるにせよ、ほとんどが人の主観で評価されているのではないかと思います。

人がやることですから、それに優劣がつくのは当然ですし、付けられたチームも、それに納得していると思います。

しかし、個人的にはもうちょっとフィードバックがあってもいいんじゃないかと思います。何が評価されたのか、何が足りなかったのか。

自分で気づけとかフィードバックするに値しないとか、もしかしたら色々思うところがあるのかもしれませんが、そういう教えが許されるのが、社会に出てプロジェクトを遂行するのとは異なる、PBLなのではないかと思います。

PBLのすごい所は、好きな様にチャレンジできて、いくらでも失敗できて、先生や先輩方の様々な視点からの知見を有効活用できるところにあるのではないかと思います。大学と企業のどちらからもサポートいただけるのって凄いことだと思います。

プロジェクトを進めながら、PDCAサイクルをたくさん回しているチームばかりだと思いますので、自分たちのプロジェクトで優れていたもの、足りなかったものを知ることが出来れば、次のステップに必ず生かせると思います。

ダメかどうかだけ教えてくれ!後は自分たちでカイゼンするぜ!って感じです。

まとめ

言いたいことを取り留めもなく書いてしまいましたが、この一年PBLを通してたくさんのことを学びました。

来年も、少し違う形でプロジェクトに取り組むので学びをしっかりと生かせたらと思います。

最後になりますが、PBLという学習形態を修士過程で学ぶことができる大学院がいくつかあります。

個人的には非常に刺激的で、学びの多いカリキュラムだと思いますので、とりわけチームでのシステム開発に興味のある大学生の皆さんは是非どうぞ!

詳しい話はいくらでもします。最後に意味ありげにURLだけ載せます!

以上です!

高度IT人材育成のための実践的ソフトウェア開発専修プログラム

4ヶ月前に作ったものをメンテしてみたら、いい感じの振り返りになった

事の発端

RoboCupSoccer SSL向けのnode.jsとWebブラウザを使ったグラフィカルクライアントssl_gclient_nodeを作りました. - あーあーそのー

確かこの頃は、Node.jsを初めて触り始めた辺りだった気がする。WebSocketが面白くて、何かいい利用方法はないか考えて、思いつきでこれを作った気がする。

それから4ヶ月位たって、メンテをしてみたら今とやり方が違うところがチラホラあったので、振り返りのついでに忘備録として残しておく。

パッケージの管理

一番最初においおいって思ったのが、パッケージの管理。READMEにはこれとこれのパッケージをnpm installしてねみたいな感じで書いてあった。

% npm install express ws websocket.io protobufjs

package.jsonに書いておいてあげれば

% npm install

一発で済む。それにREADME見なくても良い。npm install --save socket.ioとかはこの後に覚えたんだなあということを知った。

あとは、bootstrapやjQueryもそのままpublicディレクトリの下に突っ込んであっただけだったので、bower使うようにした。

conponentsディレクトリ以下にbowerでインストールされるように設定しておいて、app.jsに次のように書いておけば参照できる。

app.use(express.static(path.join(__dirname, 'components')));

module.exportsする

起動スクリプトに全ての処理が書かれていた。 まあこれはこれで、動くっちゃあ動くのだけれ土、メンテナンス性が悪そうだなと思ったので分割して、module.exportsした。

そのついでに、expressのgenerator使って大枠を生成して、そこに移し替えるという形にした。

起動時の処理を./bin/wwwに書いて、app.jsにはサーバの設定処理を書いた。それ以外の処理(ブロードキャストパケットを受け取って処理するロジック)は別のファイルに分けることで、処理のロジックと設定のロジックを分けたつもり。

WebsocketからSocket.ioへ

単純に最近良く使っているのがSocket.ioだったので、そちらに合わせた形に。書いていて思ったけれど、どのライブラリを使うかみたいな判断はこういう軽いものに対してもちゃんと考えた方がいいななんて。

まあでも、Socket.ioのほうが、動作対象が広めみたいなので、コンセプト的にはSocket.ioの方があってるかな。

まとめ

やってみて、色々考え方とかやり方が変わっていることに気づいた。

ここはもうちょっとこうしたいなみたいなところはもっとたくさんあるので、また気が向いたらいろいろいじるつもりです。

そうなったらまた、今回みたいな発見があるのかもなあ。

発表する順番とかを決めるツールを作った

事の発端

担当者とか発表者とか決めるためのルーレットみたいなものを作った - あーあーそのー

結構前に作ったこれが、チーム内とか大学のコースでなんか決めるときにそこそこ使われている。

一方で、順番決める機能が欲しいみたいな意見もあって、それはいつかやりたいなと思ってたので思い切って別のツールとして作ってみた。

どうせなにか作るなら、何かの勉強もついでにやろうということで、今まで使ったことのなかった、Yeomanとかgulpとかも使ってみようということで、使ってみた。

The web's scaffolding tool for modern webapps | Yeoman

gulp.js - the streaming build system

出来たもの

出来たものは、これです。

roulette_seq

YeomanがデフォルトでBootstrapとか入れてくれるし、HTMLのテンプレートも用意してくれるので、自分としてはBodyのなかをガリガリ書くだけって感じでめっちゃ楽だった。

ファイル書き換えた瞬間にページがリフレッシュされるから、エディタからカーソル話した瞬間に即動作テストできるのはめっちゃ良い。

まあ、一回色々な仕組みに気がつかないでHTMLの中身前消しして自分で一生懸命書いてて、gulp buildしたらScriptとかStyleとかなにも出なくてめっちゃ苦戦した。HTMLにコメントされてる文字列使って、distに書き込む内容決めてるんですね……。勉強になった。

ついでにやってみたこと

前回に引き続き今回も、gh-pagesでツールを公開している。けど、前回と違って今回はYeomanでディレクトリ構成とか自動生成しているので、前回みたいにそのままgh-pagesにブランチを切ればOKというわけにはいかなかった。

一番最初は、gh-pagesをまっさらにしてdistからまるっとコピーしようと思ったんだけど、なんかスマートじゃないなって思って探したら、以下の記事に辿り着いた。

Generate GitHub pages in a submodule — blindgaenger

この記事の場合は、WebSiteを生成するツールを使っていたけど、masterのとあるディレクトリをgh-pagesのsubmoduleにして更新を半自動にするっていうのはgulpにもマッチしそうだと思って、試してみた。

masterのdistディレクトリを、gh-pagesのsubmoduleにして、gulp buildしたら、上書きされるようにした。

上書きされたら、cd distして、git addしてgit commitしてgit push origin gh-pagesすれば、更新される。

その辺りもついでに自動化出来ればよかったんだけど、そこはまた今度の機会にやることにする。

mixi ScrapChallengeに参加してきました

事の発端

Scrap Challenge 2014 | 株式会社ミクシィ 学生向けエンジニアイベント

なにやら合法的にクラッキング的なことを実践しながら学べるイベントが有るということで、参加してきました。

イベントの内容

午前中は、脆弱性やその対策などに関するレクチャーでした。例えばXSSとかCSRFとかSQLインジェクションがどういう脆弱性で、どうしてそれが起こってしまって、どうすれば対策できるのかなどのお話をしていただきました。

この辺りは、普段の授業で(結構最近ですけど)ちらっと聞いたこともあったのですが、リアリティあふれる事例込みでお話して頂けたのでより「あ、やべえなこれ」感が出ました。

午後からは、mixiっぽいSNSにチーム対抗で攻撃を仕掛けます。幾つか問題が出されるので、それにそって自分で工夫しながら攻撃を仕掛けるといった形です。一番攻撃できたチームが優勝です。

難易度に関しては結構バランスが良くて、時間がたつのはあっという間でした。全問解けるチームは数年やってて1か2チームだとか。個人的な得意不得意もなんとなく見えてきて、「あ、僕こういう攻撃ならすらすら考えられそうだな」みたいな。

問題や回答については内緒です。1月にもあるそうなので、是非参加して確かめてみてください。

感想とか

なにより合法的に攻撃できるのが楽しい。いや、これ良くないんですけど(笑)実際セキュリティとか、脆弱性って「結局どうなったらヤバイの?」みたいなところを言葉で説明されてもなんとなくわかりにくいような気がしています。実際に攻撃受けるとか、あるいは自分が攻撃して、「嗚呼、なるほど確かにヤバイな」みたいなところを肌で感じることが出来たのは非常に貴重な経験でした。

ちなみに休憩時間に、自分がPBLで取り組んでいたプロダクト(ローカルサーバ)に対してもちょっと攻撃してみましたが意外とガード堅かったです。さすがRails(?)

担当者とか発表者とか決めるためのルーレットみたいなものを作った

事の発端

うちのチームで、進捗報告の担当とか議事録の担当とかデイリーミーティングファシリテータとか、そういうものを何でもかんでもくじ引きで決めるようになってきた。

毎回毎回くじ引きを作ったり、紙の感じで当たり外れが分かるのも嫌だなと思ったのでルーレット的なものを作ってみた。すでにあるかもな、って思ったけどノリと勢いで自分で実装した。

できたもの

http://blthunder1991.github.io/html_Roulette/

どこでも動くようにHTMLとJSで作った。デザインとかはものすごく雑。

ついでと言ってはなんだけど、JSでクラスみたいなものを実装したことがなかったので、それっぽいものにチャレンジした。

Thisが呼び出し元によって意味が変わるみたいで、ちょっと苦労した。苦し紛れに、Thisが必要なメソッドには自分自身のインスタンスを渡すようにしてみたけど、この辺りを綺麗に書く方法が知りたい。

やはり一度、Javascriptの本をしっかり読んでお作法的なことを抑える必要がありそう。

RoboCupSoccer SSL向けのnode.jsとWebブラウザを使ったグラフィカルクライアントssl_gclient_nodeを作りました.

f:id:BLThunder1991:20140730065151p:plain

BLThunder1991/ssl_gclient_node · GitHub

ひとまず最低限な機能を満たしたので,紹介したいと思います.

事の発端

最近,HTML5とかnode.jsを触る機会が多くて,これでなんか作りたいなと思ってました.幾つかアイディア出てきたんですが,一番イメージが湧きやすかった,RoboCupに関するプロダクトを作ってみたくて,やってみました.

なぜわざわざ,SSL-Visionに同梱されているグラフィカルクライアントを作ったのかと言えば,Macの上で動くクライアントが欲しかったのと,どうせ試合をクライアントから見るなら得点の状況とかステータスも知りたいなという要望が個人的にあったからです.試合直前にロボットのお世話しながら机の上で試合見るとかできます(笑)

さらに言えば,僕がRobocupに参加した時こういうものがあったらうれしかったなというのがなんとなくあります.

個人的にそう思っていたというか,こればっかりは僕のグイグイ力の問題なのかもしれませんが,初参加の時は時間とか人とかのリソース的にロボット作ってAIサーバ作るのが精一杯でこういう本筋とは関係ないけど会ったほうが良かったものってなかなか後回しになりがちです.

もし,今後Robocupに興味を持って,参加したいというチームに向けてちょっとでもハードルが下がるといいなという気持ちで作りました.

ssl_gclient_nodeができること

SSL-Vision,RefereeBoxからのパケットを受け取って,サーバにアクセスしているWebブラウザにリアルタイムで反映します.

なので,サーバをマルチキャストが届く範囲で起動させて,アクセスするWebブラウザは経路さえ空いていればどこからでも試合の状況を確認できます.

単純に,現状のグラフィカルクライアントを置き換えることも十分できるとは思いますが,パブリックビューイング的な?見に来てくれているお客さんが試合の状況を把握するとか,そういうケースにも使えるかと思います.(なんせブラウザがあれば見れるので!)

あとは,ちょっとインフラの整備が必要になるかもしれませんが,公式ページに埋め込んで,Webサイトから試合の状況リアルタイムで見れる,みたいなこともできると思います.

ssl_gclient_nodeがこれからできるようになるかもしれないこと

WebSocketは双方向の通信技術なので,サーバからブラウザへ更新をかけるだけではなく,もちろんブラウザから何かサーバ側に送る事もできます.

また,基本的にはWeb(HTML5)の技術を使用しているので,クリックイベントとかも結構簡単に取れます.

したがって,シミュレータみたいなものももしかしたら結構簡単に作れるかもしれません.(Javascriptの2D物理演算ライブラリとかもありますしね)

実装に関して幾つかのフォロー

サーバサイド

サーバサイドはnode.jsで実装されています.

% node gclient.js

コマンドを叩くと,Webサーバ,Websocketサーバ,マルチキャストレシーバ×2が起動します.

ポート番号とかホストとかはハードコーディングされているので,必要に応じて変更してください.

サーバ側では,Googleprotobufを使うためにprotobufjsというライブラリを使用しています.

dcodeIO/ProtoBuf.js · GitHub

これがまた素晴らしいライブラリで,かなり簡単にProtobufをいじれるようになりました.逆にパケット作るなんてときにもめっちゃ簡単そうです.

クライアントサイド

クライアントサイドはWebsocketでデコード済みのProtobuf(JSON形式)をサーバから受け取って,それを元にロボットとかボールとかを描画しています.

Canvasタグの2Dコンテキストを取得してゴリゴリ書いています.描画タイミングは,SSL-Visionからパケット受け取ったタイミングで書くようになっていて,安定して受け取れるなら大体60fpsぐらいで描画しています.

描画に関してはもしかしたら,WebGL使ったりしたほうが扱いやすくなるかもしれません,今後検討します.

RefereeBoxからのパケットも同様に,受け取ったらチーム名とか得点とかステータスとかを更新しています.

デザイン面に関しては,Twitter bootstrapを使用してレイアウトしています.しかしながら,なんかたまにおかしいことになります(笑)

あと,致命的なことにUIがださい(笑)改善案お待ちしています.

もしつかっていただけるなら……

所属チームを引退してからはや数ヶ月,実は僕の手元には色々テストするための環境がありません.ロボットとか,シミュレータとか,AIそのものとか…….なので,本プロダクト作成にあたっては,grSimとか使ってデバッグしておりました.

もし,このプロダクトが気に入って,使っていただけるようであれば,ぜひぜひ使い倒してバグ報告とか,改善提案とかいただければと思います.Pull Requestとかも大歓迎です!

本番に近い環境じゃないとわからないこともたくさんあると思うので.

おわりに

かなり簡単な説明になってしまいましたが,このぐらいにしておこうと思います.

バグの報告や改善案などはGitHub等にお願いします.

リーンスタートアップ勉強会に参加してきました

事の発端

前回参加した勉強会でお世話になったSEゼミさんの勉強会に参加してきました.

SEゼミ | プロフェッショナルを目指す学生のためのインターン | プログラミングが好きな学生のためのリーン・スタートアップ(Lean Startup)勉強会

前回の勉強会:リーダブルコード勉強会に参加してきました - あーあーそのー

リーンスタートアップ,言葉は知ってたんですが実のところよく知らなかったので飛び込んでみました.

前回と同様,リーンの本とアイディアのつくり方という本も頂いちゃいました.リーンの本はじっくり読もうと思います.

それでは,参加してきて思ったこととか内容とかについて書いていきます.

(なんかものすごく長くなりました.スッキリ文章をまとめられる能力も必要だ……)

続きを読む