窓際BLOG

プログラミングの学習メモや書籍の感想等を公開していきます。

SIerのSEが自信無いけど初めてハッカソンに参加してみた

f:id:madogiwa0124:20170924074516p:plain

9/27に下記イベントに参加し、初めてハッカソンを体験してきました!
良いイベントで色々と学びがあったので、メモしておきますφ(..)
みなさんにもハッカソンの様子を感じて貰えれば幸いです。

hackathon.connpass.com

私について

まず前提として、私の仕事とスキルセットを記載しておきます。

今の仕事

SIerでSEをしています。今は異動しましたが、基幹業務パッケージシステムの導入をずっとやってました。
小規模チームのマネジメントや設計、顧客折衝、データ移行等が作業として多かったので、業務ではあまりプログラミングをしませんが、個人でWebサービスを公開したり、プログラミングスクールに通ったりしてますφ(..)

環境

3年くらい前に買った低スペックなMac Book Air 13インチを使っています(._.)

要素 スペック
CPU 1.4 GHz Intel Core i5
メモリ 4 GB 1600 MHz DDR3
グラフィック Intel HD Graphics 5000 1536 MB
HDD フラッシュストレージ 126GB

ハッカソンMACユーザーが非常に多いので、やはりMACを持っていると環境が揃えられるので、良いかも知れません。。。

スキルセット

技術的なスキルセットは下記のような感じだと思います・・・。

分野 スキル ランク 説明
フロント HTML & CSS Bootstrap、ノンフレームワークでシンプルなデザインのWebサイトを作成出来る
フロント JavaScript 生JS、jQueryを使って簡単なDOM操作が行える
バック Ruby ★★ Ruby on Railsを使って基礎的な機能(ログイン、登録、編集、削除)を持つWebサービスを作成出来る。Nokogiri、open-uriを使用した簡単なスクレイピングツールが作成出来る。
インフラ Heroku 作成したWebサービスをフリープランで何個かデプロイ、バックアップの取得等をした程度
インフラ postgresql SQLを実行して結果を取得する程度
インフラ SqlServer ★★ 業務で使用、運用保守でデータを見たり、利用状況モニターでパフォーマンスをチェックする程度
ツール Git ★★ 基本的なコマンドが使える。GithubFlowを使った開発が行える。

今まで作ってきたもの等は、下記を参照ください。 https://madogiwa0124.github.io/MyHP/

ハッカソンについて

参加する方法

当日の流れを書く前にハッカソンに参加する方法を記載しておきます。

connpass.com

www.doorkeeper.jp

上記のようなIT系のイベント検索サービスを使えば比較的簡単に見つけられると思います(/・ω・)/

当日の流れ

今回参加したハッカソンの簡単な流れは下記のような感じでした。

フェーズ 時間
イントロダクション 10:45 - 11:00
自己紹介 11:00 - 11:20
イデア出し 11:00 - 12:30
サービス検討 13:30 - 15:00
サービス開発 15:00 - 17:20
発表 17:20 - 17:45

自己紹介

アイスブレイクがてら、自分の普段の業務とスキルを説明しながら自己紹介をしました。

↓こんな感じ f:id:madogiwa0124:20170924003738p:plain

私のチームは、下記のような5人チームでした!
やはり普段Webサービスを作っているエンジニアが多かったですが、他のチームではITコンサルをやってる人等もいました(´・ω・`)

業界 人数
Web系のエンジニア 2人
スマートデバイス系のエンジニア 1人
ソーシャルゲーム系のエンジニア 1人
SIerのエンジニア 1人(私)

すごそうな人ばかりでガクブルでしたが、みんな優しくていい人で良かったです(´;ω;`)

イデア出し

グローバルというテーマで、単純なブレストではなくイノベーションカードを使ったアイデア出しを行いました。

イノベーションカードは、会議や話し合い、自分との対話など「思考」に使うツールとして開発しました。 6つのカテゴリに分かれたカードを組み合わせてあなたの新しい思考をデザインします。

www.dekir.co.jp

イデア出しの結果、言語を学ばなくても各国のユーザーとコミュニケーションするために「絵文字だけのコミュニケーションサービス」を作ることになりました(๑•̀ㅁ•́๑)✧

↓こんな感じ f:id:madogiwa0124:20170924003423j:plain

サービス検討

サービス検討では大きく分けて「機能一覧作成」と「技術検討」をおこないました。

機能一覧作成

機能一覧作成では、サービスの主要な機能の一覧を簡単なデザインと合わせて検討します。

今回は下記のような感じになりました。※実際はみんなで検討しその場で紙にメモ

  • アプリ名:Hello World
  • 概要:絵文字で世界とコミュニケーションするWebサービス
  • 機能一覧
    • 入室機能
      • 世界地図上の任意の場所をクリックし、自身の地域を選択する。
    • メッセージ送信機能(全体)
      • 全ユーザーに向けてメッセージを送信する。
      • メッセージは吹き出しで表示する。
      • 入力出来るのはユニコードの絵文字のみ
    • メッセージ送信機能(個別)
      • 個別のユーザーに向けてメッセージを送信する。
      • 送信する際は、対象のユーザーに向けて送信されていることがわかるようにアニメーションをつける。
      • メッセージをクリックすることによって、返信が行える。
    • アクティビティ機能
      • ユーザーからの返信や投稿、入室のような情報を表示

技術検討

技術検討では、先程考えた機能一覧を踏まえた言語選定、インフラ、要素技術と実装担当を検討します。

今回は下記のような形になりました。

要素 技術 内容 担当
フロント HTML、CSS、Bootstrap、JavaScript(ノンフレームワーク) 画面デザイン、イベント取得、WebSocket接続・パラメーター送信・結果取得、画面反映 Web系エンジニア、スマートデバイス系エンジニア、私
バック Go WebSocketの通信処理、パラメーター取得、返り値の作成 ソーシャルゲーム系エンジニア、Web系エンジニア
インフラ Heroku デプロイ先及びWebSocket用のサーバー構築 ソーシャルゲーム系エンジニア、Web系エンジニア
要素技術 WebSocket ブラウザで双方向通信をするための仕組み(URL) 全体

役割決めは、WebSocketの実装をネットで検索してみたところ結構出来そうという感じでバックエンドがGoに決まりGoを使ったことある2人がバックエンドを担当することになり、それ以外の人がフロントエンドを担当する形になりました。  

私はその中でも、画面デザイン、イベント取得、WebSocket接続を担当することになりましたφ(..)
「WebSocket・・・?」という感じだったので、正直ガクブルでした(´;ω;`)

サービス開発

サービス開発は役割毎にGoogleで調べながら実装していく感じです。
最終的な実装の完成具合は下記の通りです。
時間が無く最後までは実装出来ませんでしたが、WebSocketを使って通信した結果を表示するところまでは作ることが出来ましたφ(..)

  • 機能一覧
    • 入室機能:実装完了
      • 世界地図上の任意の場所をクリックし、自身の地域を選択する。
    • メッセージ送信機能(全体):実装完了
      • 全ユーザーに向けてメッセージを送信する。
      • メッセージは吹き出しで表示する。
      • 入力出来るのはユニコードの絵文字のみ
    • メッセージ送信機能(個別):未実装
      • 個別のユーザーに向けてメッセージを送信する。
      • 送信する際は、対象のユーザーに向けて送信されていることがわかるようにアニメーションをつける。
      • メッセージをクリックすることによって、返信が行える。
    • アクティビティ機能:未実装
      • ユーザーからの返信や投稿、入室のような情報を表示

私は画面デザイン・イベント取得とWebSocketの呼び出し側を担当したので、画面のID名、他の人が作ったJSのファイル名、WebSocket側の呼び出し仕様等を認識を合わせながら進めていきました。
少ない時間の中で、必要な情報を得ながら進めていく必要があるため、なかなか難しかったです。。。

それと開発作業と平行してプレゼン資料の作成も行います。

技術に自信が無い人は、プレゼン資料の作成を積極的に取り組むと良いかと思いました! 今回も最終的にあまり時間が取れなくてなぁなぁになってしまった部分があったので、時間を見て プレゼン資料(keynote,ptt,Googleスライド等)の準備を進めておくとチームメンバに喜ばれるのかなぁと思いましたφ(..)

特にGoogleスライドは共同編集も出来て便利だと思いました(/・ω・)/

ちなみに作ったサービスはこんな感じです。
f:id:madogiwa0124:20170924003452p:plain

発表

今回参加したハッカソンでは順位付けやビジネス的にどうなのかといったことは求められないゆるい感じだったので、和気あいあいな感じで良い雰囲気でした・ω・
発表内容は下記の通りでした。

  • チーム名
  • 役割分担
  • 作成したサービスの概要
  • デモ
  • 今後の展望
  • 質疑応答

おわりに

今回、ハッカソンに参加してみてすごく楽しかったし、学びとモチベーションになりました!
でももっと出来れば、もっと楽しかったのかなぁと感じました。。。

Railsは自分でサービスを作ったりしていたので、少しですが分かるつもりでしたが、実際にハッカソンで作成するサービスが自分の使っている言語やフレームワークで作られるという保証はありません。

下記のようなエンジニアとしての基礎力がもっと必要だなと感じました。

  • 普段から技術情報を拾って手を動かして身につけるような習慣
  • その場で調べながら実装していけるような、汎用的な基礎知識や考え方
  • などなど、、、

しかし、ハッカソンで必要なのは技術だけではなく、下記のような技術以外の面のスキルも大事だと感じました。

  • 光るアイデアを出す発想力
  • 少ない時間のなかでチームとして成果を出すためのマネジメントやチームワーク
  • 成果を伝えるためのプレゼンテーション

技術では、なかなかエンジニアの人たちには敵わないかも知れませんが発想力、マネジメントやチームワーク、プレゼンといったスキルは私みたいな普段実装を行わないSIerのSEが貢献できる部分だと感じましたφ(..)

また参加してみようと思います!(`・ω・´)シャキーン

勉強して、次はチームに貢献出来るようになりたい…φ(..)!

以上です。 長文にも関わらず、最後まで読んで頂きありがとうございましたm( )m