はじめに

ハンズラボの新Macbook Proを手にした新卒の村上です。新卒研修のメインである1人仮想プロジェクトが12/9に完了したので忘れないうちに書いておきます。

えっ!?この時期に新卒研修？

と思うのが当然ですが、実は私が大学院を中退し10月中旬に入社して1人で仮想プロジェクトを行ったというわけです（さみしっ）。私も入社前に今年度の新卒の研修記事を参考にして入社したので特にハンズラボに入社を考えている方々の参考になれば嬉しいです。

仮想プロジェクトの概要

仮想プロジェクトといっても、今年度の新卒４人で行った仮想プロジェクトもそうかもしれませんが、作るものに関して具体的な要件があったわけではないです。
「何か世の中のためになりそうなものをつくって。利益出しても良いからw」
といった感じだったので、自分が欲しいサービスを作れるというわけです!（もちろん、みんなにも使ってもらいたい）。

うーん、何を作ろうか…　技術的に簡単すぎても研修にならないし、難しすぎても終わらないし。何より1人だし…

ちなみにスケジュール見積もりは以下のようになりました。

• 企画：７日
• プロトタイピンング：３日
• 設計：２日
• 実装：１６日
• テスト：３日
• リリース：２日

何をつくったのか

企画発表スライド

企画の段階で社員の方々に発表した際の資料です↓（アニメーションは動かない）

貸し借りサービスの難しさ

スライドにもありますが当初5つの案があり、Slackで社員の方々に投票を呼びかけ、その結果を踏まえて工具共有アプリを作ることにしました。既存競合サービスを考えると、「メルカリ アッテ」や「Anytimes」になると思います。それらのサービスと違う点は、アイテム領域を工具のみに絞っているところと、売買でなく貸し借りをサポートするサービスであるという点です。

特に考える必要があったのは、貸し借りサービスはメルカリ アッテのような売買サービスとは違い、売って終わりではないという所です。スライド中で二つの壁という表記がありますが、

1. レンタル中のレンタル品の劣化
2. 借主がレンタル品を返さない

ということを考慮する必要がありました。1つ目については工具の劣化のしずらさでカバーできると思い、２つ目については質代制度というものを考えました。
これは貸主が借主がレンタル品を返さない場合または大きく劣化した場合に備えて、あらかじめ貸主が借主からレンタル代に加えて質代としてお金を預かっておくという制度です。

とテキトーなことを言いましたが、この制度がうまくいくかどうかはわかりません。結局開発に入ってからはサービスが上手くいくかどうかを考える余裕はなく、開発に専念していたため今でもベストな解は導けてません。運用側で保障することを考えればもっと他に手はあるかもしれません。この辺の難しさが貸し借りサービスが（私の知る限り）ほとんど存在しない理由ではないかと1人考えていました。

具体的なサービスの流れは上記スライドにもありますが、プロトタイピングの時点でAdobe XDを使ってモックを作りましたのでよければ見てください（サイドナビゲートバーの項目を選択する際に面倒があります）。

どのようにつくったのか

私の技術レベルなのですが、情報系の学科出身なので基本情報技術者試験程度の知識はありました。Web開発については入社前にDjangoの参考書を一読していたという程度で自分で企画してサービスを構築するというのは初めてでした。

開発環境

• Python 3.4
• Django 1.8, Django Channels
• Bootstrap3
• sqlite

DjangoとはPython用のWebフレームワークです。RubyでいうRuby on railsのようなものです。他にもPython用フレームワークはFlaskやPyramidなどがありますが、最も多くのユーザに使われているものがDjangoです。フレームワークを語るときによくMVCモデルと耳にしますが、DjangoだとMTV（Model, Template, View）モデルがそれに対応します（厳密な定義はないですが）。Djangoはユーザ管理機能（ユーザ登録、ログインから、パスワード変更など）の多くの部分のロジックを用意してくれているのでテンプレート(html)を書くだけでそれらを実現できたりします。また、モデル定義からフォームを作成することができるので、html内でformタグやinputタグなどを使わずにフォームを作成することもできます。他のWebフレームワークをほとんど使ったことがないので比較ができませんが、とても使いやすくお気に入りです。
ちなみに社内には業務でDjangoを使っている人はおらず、もしDjangoエンジニアで弊社に興味がある方がいれば、私と共にDjango（Python）勢力を拡大していきましょう！！　現状は謎テクノロジー、ユニケージ(Bash)とPHPで書いている方が多いです。

機能一覧

• ユーザ登録、ログイン（facebookログイン含む）、ログアウト、パスワード変更とリセット
• アイテム（工具）のCRUD機能
• アイテムへの応募
• チャット
• 評価

特に苦労した点は、UIとチャットです。UIはBootstrapがなければとても間に合いませんでしたし、チャットはDjango Channels(Websocketを実装するためのライブラリ)のおかげでなんとか実現できました。
当初評価機能まで考えていたのですが、時間的に間に合わず断念しました。

つくったアプリの画面

ログイン画面

ホーム画面

チャット画面

今後はチャットのUIの改良　また、評価機能、検索機能を付け足して社内だけでも公開して意見をもらいたいなと思っています。

おわりに

上記ではサービス概要や開発環境について書きました。もう一度一人で仮想プロジェクトをやるとすれば、今回は実装量として一人でやるには多かったのでもう少しコンパクトですぐにみんなに使ってもらえるようなアプリを作りたいです。
研修の1ヶ月半ほどの間、ほとんど毎日先輩社員のTさんと人事担当のAさんに進捗を報告する時間とプロジェクトが遅延した場合の対処法を教えていただいたりして、プロジェクトを円滑に進められるよう助けていただきました。また、仮想プロジェクト以外にも社会人マナー、東急グループ内のハンズラボの位置付け、プロジェクト管理、ソフトウェアテストについても教えていただきました。この場を借りてお礼を言いたいと思います。ありがとうございました。現在、私は既にチームに配属され日々、PHP、bash、AWSの勉強をしながら業務にあたっています。

大石です。
最近、弊社では専らPokemonGOが流行っています。
23区外にある自宅で何時間もアプリを起動しておくよりも、オフィスで昼休みにササッとプレイする方が捗ります。
うっ、ドードーが捕まえてほしそうな目でこちらを見ている……。

さて、先日、新卒新入社員だけで仮想プロジェクトやってますの中で、研修で行っていた仮想プロジェクトについて書きました。
6月末、仮想プロジェクトを終えましたので、今回はその話を書いていこうと思います。

前回のおさらい

時間と技術面のみの制限だけで自由にシステムを作ることになった新人4名。
自社のオフィスで使える蔵書管理システムをサーバレスで作って、先輩たちをぎゃふん(死語)と言わせてやるんだ……！
バックエンドでAWSを活用してサーバレスに、フロントエンドはPC画面の作成と同時にmonacaを使ってスマートフォンのハイブリッドアプリに挑戦。
果たして、無事に蔵書管理システムは出来上がるのか!?(謎の予告風

蔵書管理システム

誰がどの本を借りたのかを記録し、貸し出し状況を社内で共有できるような「オフィス特化型蔵書管理システム」。
最終的に以下のような機能をリリースしました。

機能

• 借りる
• 返す
• 予約
• 蔵書の検索・結果の表示
• 蔵書の新規登録・削除
• 予約の通知（予約が入るとその本を借りているユーザーへSlackで通知）
• 人気の本ランキング(1週間に借りられた回数がより多い本を5位まで表示)
• 本が借りられた履歴
• ユーザが本を借りた履歴

フロントエンド

構成

• HTML5：マークアップ
• CSS3/Bootstrap v3.3.6：レイアウトのコーディング
• jQuery v2.2.4(モバイルはv2.0.3)：バックエンドとの通信、DOM処理
• JavaScript：jQueryでできない処理を行う
• Monaca：モバイルアプリ(ハイブリッド)の開発プラットフォーム

デザイン

PCの画面↓

スマホアプリの画面↓

UI・UXに考慮し、操作性に違和感が無いようにボタンなどを既存のアプリと同じような配置にしました。
また、同時に同じ本を借りられないようにするなど、ユーザが通常は行わないような動作をしないようにし心がけました。

バックエンド

AWSの構成

• API Gateway：APIの管理
• Lambda (Python)：DBアクセス、ランキングを定期的に作成
• DynamoDB：永続データの保存
• Cognito：ユーザ管理

開発方法について

スケジュール

• 企画立案・決定：4日
• プロトタイピング・設計：4日
• α版実装：5日
• 基本機能実装：8日
• 付加機能実装：3日
• テスト：5日
• リリース・運用：2日

実際に作業できる日数は31日でした。
やはり実装に手惑い、テストが押せ押せな感じに……。
とはいえ、じっくり実装したおかげか致命的なバグはあまり無く、なんとかなったように感じます。

開発での技術的課題 フロントエンド

• HTML, CSS, JavaScript (jQuery)：研修で一切やらなかったため、慣れるまでに時間がかかった
• OS依存のバグが、iOS、Androidそれぞれ1件ずつ発生した。どちらも実装方法を変えることで対処できた(重大なものは無かった)
• 時間的制約でユニットテストができなかった

開発での技術的課題 バックエンド

• 当初はAWS SNSも用いたプッシュ通知を予定していたが、時間の制約のため断念

チーム開発する上での課題

• 共有不足：API仕様書の更新時の周知などができなかった。その解決策として朝礼、夕礼、昼休憩後など、細かに共有の時間を設けた
• レビュー不足：UI設計やAPI設計など、設計者の一存で決まってしまったところが多かった

先輩社員の反応

6月末、先輩たちに向けてこの仮想プロジェクトの最終発表を行いました。
無事出来上がった蔵書管理システムを見た先輩たちから、褒め言葉をもらうことができました！1ヶ月半の短い中でこんなすごいものが作れるとは思わなかった！と。
さすがに死語であるぎゃふん！とは言わせることはできませんでしたが……(笑)

研修を終えて

研修を終えた今、私たちはそれぞれチームに配属が決まりました。
情報系卒の2名は既に業務に入っていますが、非情報系2名(うち一人は私)は実際の業務に近いことを演習のようなスタンスで勉強しています。
PythonでLambdaを書く日々が、黒い画面でシェルスクリプトを書く日々に変わりましたが、勉強が大切であることには変わりません。
日々の業務に追われる前に、様々なことを身につけていけたらなーと思います。

こんにちは。田名網（たなあみ）です。

以前の投稿「新人研修(技術以外のところ)を考えて、やってみた話」
を踏まえ、デザイン研修をした話です。

ハンズラボはエンジニアメインの会社ですが、
実はグラフィックデザイナ1人とUXデザイナ1人（私）もひっそりと生息しております。

わたしについて

デザイン、飾りじゃないよ

– 1日目：「デザインてなに？」（UXデザイナ田名網担当）
– 2日目：「いろとかたち」（グラフィックデザイナ北田担当）
– 3回目：「UX / UI について」（UXデザイナ田名網担当）

今回は1回目の「デザインてなに？」のお話です。

本題、研修内容

– 3回分のうちの1回目
– 座学2時間（講義:質問 = 8:2）
– 達成できること：デザインは何のためにあってどういうことなのか、自分なりに説明できる

早速ですが、用意したスライドはこちらです。

講義のあらすじ

スライドは以下のような内容で話を進めました。

デザインを取り巻く言葉の整理

デザインは
– 目的（課題解決）のための計画と工夫のこと
– 美感を起こさせる見た目と機能が必要

デザインはデコレーションじゃない
– でもデコレーションは表現方法の一つ

デザイン領域について

デザイン思考になろう
– どうしてこうなっているのか 、どうしたかったのか、どうさせたかったのか
– 形状・色・配置の意図を探る

感覚の体験
– グラフィックやピクトグラムの例
– 有名プロダクトの例

デザインはいろいろな領域を横断して考える→なんのため
– 東急プラザ銀座の例

このデザインをしたら、どんな世の中になるのか考えよう

まとめ
– すべてのデザインに理由を持とう
– 本質的な目線になろう
– 人間、社会について知ろう
– 何が美しいと感じているのか五感で捉えよう
– 本はいっぱい読もう

詳しい内容は、スライドを見ていただくとして、この記事内では割愛します。

図や写真が多いと伝わりやすいので、例やサンプルを数多く見てもらうよう心がけました。
デザインは感覚的・情緒的な部分も大切な要素ですし、言葉で説明できない部分を感じてもらうことができたと思います。

デザインの重要性

デザインするということのなかで、情報設計のパートが大事な要素でもあるので、表面上の体裁を整えること以前に、「なにを」「だれに」「どのように」作用させるのか、本質的な視点と考え方を持つことが重要です。

デザインの「目的」を明確にするために、理論的な視点を得、
デザインを「手段」として利用するために、実践的なノウハウを仕入れる。
まずはそのデザインすることの立ち位置や、必要性について、この回でしっかり解説できました。

みんなの反応は？

実際に新卒エンジニア4人のみなさんの中でも、もともとデザインに興味があったり、重要性を理解してくれていた方もいたようで、
早速仮想プロジェクト（ 新卒新入社員だけで仮想プロジェクトやってます ）のなかでもユーザビリティについて考えてくれたりしておりました。
感心感心です！

わたしの反省や感想

私の話をさせてもらえば、もともとは自身が手をかけるよりかは、考え方を考えて、その考え方を伝えていきたい、という思いがありました。
実際に私が普段から取り組み、考えていることを、ひとに伝わるように言葉にし、資料にまとめるということが、自分自身の考えをブラッシュアップさせるためにもとてもいい勉強になりました。
自分が理解できていない部分も明確になって、いい機会です。
発表するって大事だなと！

よいサービスやプロダクトをつくっていく手段として、デザインが受け入れられ、利用していってもらえれば嬉しいです。

田部井です。

ハンズラボには今年4月から、初の新卒が4人入社しました。

新卒は初めてということで、研修を組み立てるところから検討する必要があり、研修担当者で色々頭を悩ませました。
親会社の東急ハンズの研修に一部混ぜてもらったり、社外研修に行ったりというのはあるんですが、いわゆるビジネスマナーや社会人としての心構えとかを教わるくらいでしょうか。

ハンズラボのように、規模の大きくないIT企業として知っておくべき知識としては、ちょっと物足りないところもあるのでは・・・
というところから、ハンズラボオリジナルで追加の新人研修を考えることにしました。

こういうのをエンジニアが考えて構築するという機会はなかなかないと思うので、やってみたことをメモ的に書いてみたいと思います。
エンジニアリング観点からの研修については（https://www.hands-lab.com/tech/entry/1531.html）にあります。
この記事では、それ以外の部分についての記録です。

一般的な研修・講義

ハンズラボの話

まずは自分の会社について、また会社が置かれている状況についての話をしました。

• ハンズラボは東急ハンズの子会社で、東急ハンズは東急不動産ホールディングスの子会社であって、ハンズラボはそのグループ内でどういった役割なのか？
• ハンズラボの設立経緯や東急ハンズ情シスとしての仕事
• これから求められる外販としての仕事、今後の目標
• そして現状のプロジェクトチーム構成

等々、基礎的な情報、バックグラウンドの説明です。

会社の歴史には興味が無いとか、会社の目標はよくわからないけどチームは頑張る、なんてこともあると思うのですが、
そこは少人数の会社ですから、全員に目的意識を持って欲しかったので、1ワク設けて説明をしました。

プロジェクトの話

仕事をするときは、プロジェクトって組織・チーム単位でやることが多いよ、ということでプロジェクトの話。

ここでは分かりやすく、ウォーターフォールな受託案件を例にして、営業・提案から開発、テスト、運用までの流れを説明。
また、プロジェクトごとにPMやPL等、役割（≠役職）が割り当てられるよ、という話をしました。

制度の話

弊社の場合、設立4年目ということもあり、まだまだ入社時の説明が確立していない点があります。
特に入社時点での総務系の説明はあるのですが、以下の点について補足的に話をしました。

• エンジニアとして身につけて欲しいスキル
• もしくは組織のメンバーとしての心構え(情報発信等）
• それにともなう役職と評価方法
• 評価による給与・賞与への影響

IT業界のお話

プロジェクトの話と関連して、IT業界にはどういう企業があり、どういうエンジニアがいるのか、という話。
主にはIT企業をエンタープライズ系、オープンWeb系に分けて、ステレオタイプに説明しました。
（例えば、エンタープライズといえばスーツで保守的、Web系といえばTシャツで新しもの好き、みたいなｗ）

ハンズラボはエンタープライズな親会社のシステムをやる一方、Webな考え方で最新技術に突っ走ることもできる、とても楽しい会社だよ、という結論を伝えるのも狙いでした。

会社とお金の話

自社の話は上記でしたのですが、そもそも会社ってなんだっけ？というお話です。

• 株式会社？
  • 株って？
  • 子会社？グループ会社？
  • 株主？会社は誰のもの？持ち分って？
  • じゃあ何のためにお金を稼ぐ？
• 会社のお金
  • どういう見方があるか
  • どうなっていたらOKなのか

入社時点で「会社とお金」の話はしておきたいっていうのは、以前から考えていたことでした。（前に元弊社エンジニアの臼井氏が新卒のときに経験したらしく）
特に、会社に入ると「お金お金」と上司や先輩が言っているのを聞いて、違和感を覚えたりしないように・・・（お金は汚くないよ！）

また、会社は株主のものということが頭でわかっている人は多いですが、

• そうは言っても様々な構成員がいて成り立っている
• ただし株主の意向に沿わなくてはならない

という観点を忘れてはいけない（戒め）ということも知っておいて欲しかった。

マナー研修

弊社が誇る人材会社出身の元女帝青木から、振り返りを兼ねてマナー研修をしました。

追加的な研修・講義

さて、上記は比較的必須に近い知識の講義でしたが、以下のようなちょっと面白い研修も取り入れました。

企画PJ

弊社は完全シフト制勤務で、新人はゴールデンウィークの中3連休が休みではなかったため、息抜きがてら「企画を作る」仮想PJをやってもらいました。
4人を2チームに分けて、それぞれ外出してもらい、目についた世の中の課題を解決するシステムを企画する、という趣旨。
システム的な制約は考えずに、自由な発想で企画し、最後にプレゼンをすること！という制約にしました。

ここでは、以下のポイントを知ってもらい、今後の仮想プロジェクト研修につなげる意味合いがあります。

• 企画する
  • ブレスト、打ち合わせ、議事録
  • 課題洗い出し、解決策検討
• プロジェクト運用
  • 目標を設定し、複数人で課題・タスクを分担し解決する
  • リモートでのコミュニケーション
• 成果物の準備とプレゼン

デザイン基礎

弊社にはデザイナー/フロントエンドエンジニアが2名いるので、せっかくなのでデザイン・UI/UX基礎編を説明してもらいました。
これは正直、エンジニアとして、管理者としての勉強しかしてこなかった私には、新卒が羨ましい！という内容でした。

（詳細は別途デザイナーがブログ書いてくれるかな・・・？）

先輩社員の話

これもちょっと面白いなと思っているんですが、弊社はけっこう多彩なバックボーンを持った社員が多く、
その中から4人ほどピックアップして、どういう経歴なのか、ITでどういうことをやってきたのか、などを語ってもらいました。
基本的には内容は自由としたのですが、皆さんアツイ思いを新人に投げてくれました。

仮想PJ

そして研修の総仕上げとして、4人での仮想プロジェクトをやってもらっています。
こちらは大石の記事に詳しいです。（https://www.hands-lab.com/tech/entry/1628.html）
まだ半ばですから、完了後にレポートが出てくることでしょう！

終わりに

新人研修カリキュラムを悩みながら考え、実際にやってみるというのは、自分自身いい経験になりました。
会社とは？の話なんかは、私も勉強不足を実感しましたし、説明も下手だなぁと実感・・・

またこのメモは来年の担当の役に立つのではないかと期待しているのと、
皆さんの会社ではどのような面白い研修をしているのか、ぜひ教えて下さい！

4月に新卒としてハンズラボに入社した大石と申します。
大学の専攻は応用化学でしたので、ハンズラボ初のIT未経験の新卒ということになります。
一応大学では文化祭のホームページを作成していたのでHTMLとCSSは書けなくもないというレベルです。JavaScript？なにそれおいしいの？
また、文化祭やアルバイトにおいて、ポスターやロゴ、POPや地図など様々なものを、AdobeのIllustratorやPhotoshopを使って作る4年間を過ごしました。
これだけは一言言わせてください。Adobe先輩まじ最高！！

さて、今回は4月に入社した新卒新入社員計4名で行っている仮想プロジェクトの話を書こうと思っています。
以前、ハンズラボ 初の新卒新人研修やってます 講師の視点から編
という記事の中で最後の方にちょろっと触れられていますので、ぜひそちらもご覧いただけたらと思います。
そのうち、新卒視点から新人研修の話も書いていけたらな〜と思います。

仮想プロジェクトとは？

「4人で自由に何らかのシステムを作ってください！」と言われ、ほぼ制約無しに放りだされました。
(ま じ か よ…)
課された制約といえば、

• 新卒4名で開発を行う。プログラミングは全員行うこと
• 締め切りは6月末
• 先輩方をあっと言わせるようなものだとなお良し

くらいなもので、あとは展示会行ってみてもいいよ〜とか、こんなもの使うといいよ〜とか、選択肢が増えるようなアドバイスばかりでした。
逆に難しくないですか！？

蔵書管理システムをつくろう

さて、数日間新卒同士であれやこれやと話し合い、「オフィス特化型蔵書管理システム」を作ろう！ということになりました。
続きを読む 新卒新入社員だけで仮想プロジェクトやってます