EdTech Hackathonに行ってきた

久しぶりにHackathonに行ってきた気がする。

成果は・・・

「これからのIT業界を支える未来のエンジニアを育成できました!!」

これだけだと、「Hackathonなのにコードの成果がなくないか?」
ってことになりかねないし何の事かさっぱり分からないと思うので当日の詳細を以下に載っけます。

アイデア出し


通称、「Ideathon」なんだけども・・・
前日に人が集まらずだったので、チームとか作る内容もあんまりいい感じには決まらなかった。

例外は、自分を含めたチームぐらいでした。
一応、大雑把なアイデアを持っていたので、募集かけたらすんなりと決まりました。

チームメンバーというか役割は、以下の5人です。

  • プログラム 自分
  • プログラム 大学生
  • デザイン + ディレクター 本職の方
  • 素材、画像作成、プレゼン : 中学生

こんな構成でした。今回は中学生がいるんですよ。中学生!!
最年少参加でした。。。

所謂、学生チームですね。

# 自分がHackathonに初参加してた時よりもまだ若いのですよ。
# 時代は進むものです。

ディレクターとの合言葉は、「俺達、老害なんで彼らの成長を支えよう」ということでした(ぉぃ

# 因みに、後で知ったことなのですが・・・
# チーム内で自分が一番最年長でした(> <;)

プログラマー側の打ち合わせでは、以下のことを決めました。

  • 使用言語はJavaにする(大学生たっての希望)
  • フレームワークは、Seaser2(大学生が使用したことあるそうなので・・・)
  • サーバは、Tomcat7.x
  • DBはmysql 5.6.13
  • 上記、開発環境の準備をしてくること

SIer等でよくありがちな、Javaを使ったWebアプリ開発ですね。

# 僕もいい大人(?)なので、希望は叶えてあげたいものです
# 主催者が、学生に対して、自分をJavaエンジニアとして学生に推薦したのもありますが・・・

Hackathon当日の開始前


色々とドタバタしました。
手持ちで持ってきたモニターがディレクターさんのPCで使えないなどのハプニング。

元々のコンセプトのすり合わせを開始前のこの時点で話し合いました。

ハプニングの最中にディレクターさんと2人で本日のゴールを何処に落としこむかを話していました。

# 学生さん達には秘密会議的にやってて申し訳なかった
# 実はこの時点で、ある程度本日の着地点(現実的に出来そうな範囲)の見積もりを立ててました。

Hackathon当日の午前


開始と同時に、「こういう機能でこういう表示方法にしましょう」ということを
ディレクターさんとワイヤーフレームモデルを使って合意を取りました。

# ここは勝手に進めて学生さんに申し訳なかった・・・。

デザイナーとして活躍してくれる中学生は、ディレクターさんに任せ、プログラマー側はプログラマー同士で作業をすすめることにしました。

プログラマー側では、大学生側の開発環境が出来ていなかったので、開発環境を構築することにしました。

tomcatのインストールやmysqlのインストール&設定、eclipseの設定を教えながら進めました。

インストールの待ち時間の間、作成するものの以下の内容について説明してました。

  • アプリケーションの説明
  • 表示する画面の構成要素の説明&簡単な構成案
  • DB設計

この中で以下のついてどうやって見つければ良いかの説明を行いました。

  • どうやればDB設計ができるか
  • 画面の構成要素はどう決めればよいか
  • 暗黙的な要件の見つけ方(画面に現れない&前提としている内容等)

そうこう説明しているうちに午前中が終了でお弁当タイムになりました。
唐揚げ弁当うまかったなー

Hackathon当日の午後


午前中に開発環境の構築や設計周りの教示に費やしていたので、
当初のゴールまで難しいことが、この時点で判明。

ディレクターと話をして、「彼らのスキルアップというか育成に費やそう」ということにしました。

# EdTechということで教育がテーマだからいいかーということでお互いに合意しました。

はじめは、自分で進めてみようということで、お互いの機能を実装することに専念しました。
自分の担当した機能は実装と簡単な動作試験まで完了することができました。

# この間、1時間無いぐらい。

この後、終了時間30分前までは、大学生につきっきりになり、以下のことをマンツーマンで教示しました。
所々、ペアプロも含んでいます。

  • リーダブルコード的なこと(メソッド名の命名規則や付随すること諸々)
  • スコープの話と(自分の考える)ポリシー(publicにしたら何処からでも使われるので、javadoc書く等)
  • Seaser2の設計思想とMVC的な話
  • Seaser2の実装方法や設定の説明&解説
  • コードの書き始めはどうしたらよいのか(逐次的に処理概要をTODOで書いてみるなどのやり方の話)
  • コードのリファクタリング等
  • eclipseのショートカットキーや設定全般

ざっと覚えてるのは、この辺りだけどもっとなにか色々と偉そうに言ってたような気がする。。。

終了まで残り30分のところで、自分が作った部分の機能とデザインをマージ作業しました。
マージ作業中は、大学生放置しましたけど、許して下さいm( )m

久しぶりにwebapp/WEB-INF周りを弄ったので、jsp含んでた場合リソースの扱いに注意すること忘れてトラブりました。

# 今回の場合だと、「webapp」ディレクトリ直下に置かないと認識されませんでしたw

最後のプレゼンは、中学生が頑張ってくれました!!
自分には中々できないプレゼンや将来的にこういう機能もあればいいかもーみたいな案も考えてくれていました!!

感想


久しぶりにいい刺激を受けました。
社内にいてもいい刺激を受けることが多いですが、外部のエンジニアとの交流もいいものです。
何よりものを作り上げるのは楽しいです。

今回のHackathonに関してはものを作るよりも、教育していたほうが長かったです。
ですが、自分にも得るものがありましたし、復習の機会になりました。
大学生の彼が、自分の拙い説明で何かを得てくれれば自分も嬉しいと思います。

# 自分が初めてHackathonに出た時のようにですが・・・

Hackathonで構築した開発環境と簡単な設計メモ


以下に、説明に使用したメモを残します。
こいつを参考にするとTomcat7.x + Eclipse + Seaser2な開発環境は構築できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
★tomcatインストール
$brew install tomcat

1.ホームディレクトリの.bash_profileに以下を追加

export CATALINA_HOME='/usr/local/Cellar/tomcat/7.0.42/libexec'
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.7.0_25.jdk/Contents/Home
PATH=${JAVA_HOME}/bin:$PATH
PATH=$PATH:${CATALINA_HOME}

2.ターミナル上で$source .bash_profileを実行
3.tomcat起動「/usr/local/Cellar/tomcat/7.0.42/libexec/bin/startup.sh」
4.tomcat停止「/usr/local/Cellar/tomcat/7.0.42/libexec/bin/shutdown.sh」


Homebrewが無ければ、インストールして下さい
使用しているShell(bash以外)が違う場合は適宜読み替えて下さい

★eclipse
1.「http://www.eclipsetotale.com/tomcatPlugin.html」から最新のプラグインをダウンロード
2.ダウンロードしたzipを解答して、できたディレクトリごと
eclipseのディレクトリの下に移動
3.eclipseを再起動
4.設定→tomcat
5.tomcatのバージョンを7に変更
6.HOMEを/usr/local/Cellar/tomcat/7.0.42/libexec
7.適用を押す


これでeclipse上からtomcat操作ができる


★mysql
brew install mysql

DBの保存先とキャッシュの保存場所の設定
mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

rootパスワードの設定
mysql.server start
mysqladmin -u root password '好きなパスワード'
mysql -uroot -p

何でもできるユーザーの追加(本当はここはしっかりと考える必要あるけど今回はハッカソンなのでパス)
GRANT ALL PRIVILEGES ON *.* TO edtech@localhost IDENTIFIED BY 'edtechhackathon' WITH GRANT OPTION;
GRANT ALL PRIVILEGES ON *.* TO edtech@'%' IDENTIFIED BY 'edtechhackathon' WITH GRANT OPTION;
mysql -uedtech -pedtechhackathon

データベースの作成
create database edtechhackathon;


これで開発をします。
ユーザー名:edtech
パスワード:edtechhackathon

jdbcドライバはこんな感じかな
jdbc:mysql://localhost:3306/edtechhackathon
接続ユーザー:edtech
接続パスワード:edtechhackathon



★Doltengのインストール(一応)
したがって行う
http://dolteng.sandbox.seasar.org/
→DBからエンティティを自動生成するので使う

★eclipsemarket placeからインストール
プロパティエディタのインストール
maven integrationプラグイン

★Devloder
mkdir -p /usr/local/Cellar/tomcat/7.0.42/libexec/server/lib
$cp /Applications/eclipse/plugins/com.sysdeo.eclipse.tomcat_3.3.0/DevloaderTomcat7.jar /usr/local/Cellar/tomcat/7.0.42/libexec/lib/

★mysql追加
mysql.server stop
cp /usr/local/Cellar/mysql/5.6.13/my.cnf /usr/local/Cellar/mysql/5.6.13/my.cnf.20131026
「port = 3306」を記述
mysql.server start

★確認用データ投入
mysql -uedtech -p -hlocalhost edtechhackathon
CREATE TABLE sample(id int auto_increment primary key, data varchar(255) NOT NULL UNIQUE, created_at datetime NOT NULL) ENGINE=InnoDB; 
insert into sample(data, created_at) values('test', '2013-10-26');



★usersテーブル
入力項目は、以下のもの
・名前
・メール
・パスワード(アプリ側でBlowfish形式で暗号化しておくこと、暗号化の鍵はedtechとパスワード入力値とする。初期でinsertする内容は「test」にする)、
・Roleは1(教師)、0(親)、2(管理者)で表現(アプリ側で数値を見てRoleの判断する)

create table users( user_id int auto_increment primary key, name varchar(255) not null, mail varchar(255) not null, password varchar(255) not null, role int not null) ENGINE=InnoDB; 

★fixture
insert into users(name, mail, password, role) values('hoge', 'hogeATgmail.com', '0791e4e0ade0f161', '2');
insert into users(name, mail, password, role) values('fuga', 'fugaAtgmail.com', '0791e4e0ade0f161', '1');
insert into users(name, mail, password, role) values('hogehoge', 'hogehogeAtgmail.com', '0791e4e0ade0f161', '0');