Closed TetsuFe closed 6 years ago
初めはJSはフレームワークなどを使わず作っていく予定でしたが、萩原さんやエンジニアの方々からアドバイスをもらう内に、昨今のフロントエンドの成長スピードは凄まじく、モダンなフロント開発を一からやると時間がかかりすぎること、ReactやVueは初心者に優しくいきなり始めても大丈夫そうであることが分かりました。そのため私たちは今までも少し話題に上がっていたReactを選びました。Reactはcreate-react-appというとても簡単な雛形生成用コマンドがあり、この点ではとても始めやすかったように感じます。しかしながら、公式チュートリアルはReactによるWeb制作の具体例というわけではなく、また、Web制作のReact使用の丁度いい難易度の具体例が見つからず、どのようにReactをWeb制作に適用させていくのか学ぶのが一番最初の壁であり、一番大きな壁でした。
浅野はCIの設定と、登録後のポップアップを主にやったのですが、他の仕事とのスケジュール管理が怠慢なのもあり、コンフィグの設定と、CIサーバーからのデプロイに予想以上に苦戦しました。React、Firebase Databaseのキャッチアップにも長谷川さん、おおたくんにペアプロをしてもらったりレクチャーしてもらったり、自分の協力のできなさと実力のなさを痛感するここまでの開発でした。私は幸いプロダクト作りプロジェクトに専念することになりそうなのでこれからのブラッシュアップ、機能拡張で引っ張る側に回れるよう日々邁進していきます。
当初はruby on rails+herokuでの開発を検討していた5月。我々の経験不足のため、railsは我々に愛想をつかし、herokuはいつの間にか消息不明になっていました。そんな二転三転した開発環境は、ついにReact+Firebaseに着地。私はFirebaseに関して既に使用経験があったため、絶えずこれを推し続けていましたが、その努力が、ついに実ったのです。Firebaseは認証システムやデータベース、ストレージの管理といったサーバーサイドのタスクを、ウェブ上のGUIで手軽に管理でき、私のようなWeb初心者にとっては非常にとっつきやすいモノとなっています。とりあえず何かウェブサイトを作ってみたい、という方には特におすすめのサービスでしょう。
WAYは学生が多いAI HOKKAIDOで普段使いやすいカジュアルな雰囲気でWAY(WhoAreYou)を解決するためにために生まれました。 社内の見えない壁をぶち壊し、アルバイト・社員の枠にとらわれずに協力し合える雰囲気を作り出し、開発効率を向上させることが目的です。
開発チームは、サツドラデジタル・アプリチームで、萩原さんをヘッドコーチとした
の5人の学生でした。
僕たち学生はプロダクト開発経験がほぼない状態でアプリ開発に取り組むことが決まりました。 Ruby on Railsの公式ガイドから始め、環境構築からたくさんつまづいた僕らでしたが、そんな僕らにも萩原さんは一つ一つ丁寧に、チーム開発に必要な姿勢から教えてくださいました。
萩原さんが教えてくださった開発フレームワークはUberやAirBNBから最近の様々なベンチャーにも取り込まれているLean Product Developmentというもので、このフレームワークで一つ社内向けにモノを作ってみようということになりました。
Lean Developmentではすぐさまモノを作り出す前に、アイデアの仮説検証を行うのが特徴です。 Slackを用いて情報共有をしながらそれぞれアイデアを出し、議論し、社員に簡単にヒアリングしながら、さらにそれぞれがペーパープロトタイピングで実際のアプリを形にして、お互いフィードバックしあいました。
そうしてうまれたWAYのアイデアですが、この段階での反省はこのアプリがメンバーのアイデアの共通部分をとった最低限の機能しか考えられなくなった点と、そこに僕らが気づいていなかった点です。 既存のアプリで解決できるか、足りないものがなんなのかを検証する発想がなく、構想の段階でとても視野が狭くなってしまっていた事実が、後に指摘されるのでした。
全員初めてのチームでのWeb開発ということもあり、技術構成に関しても二転三転していきました。
↓萩原さんの元同僚のハイパーエンジニアの方のアドバイス
↓長谷川さんの高速実装
最終的な技術構成は
(デプロイの自動化にTravis CIを使いました)
になり、それからの開発は、WantedlyのGithub、Pull Requestベースのチーム開発を参考にし、それぞれの持ち味を出しながら連携してガツガツ進めていきました。
北村くんは基盤となるプロトタイプをFigmaを使って作り、大田くんはSlackでTik-Tokを共有しながら、ビジュアル系実装を引っ張り、Material-UI(GoogleのMaterial DesignのReactパッケージ)を用いてどんどんフロントを充実させていきました。
長谷川さんはバックエンドのモデルを一人でFirebaseを用いて完成させ、当初の予定を覆しシンプルに最速でアプリを形にしていきました。
芳尾さんはプロダクトマネージャーとして、各人のスキルと時間を配慮したタスク割り振りと進捗管理を行い、プロダクトを確実に完成に近づけていきました。
浅野は適当な理論をこねくりまわし、Githubのコミットログを汚しながらTravisCIの導入をしたあと、大田くん、芳尾さん、長谷川さんに指導を請いてなんとか数コミットしてついていきました。
そうやって夏休みの終わりの今、ようやくリリースはできるだろうという状態になったわけです。
ついに初回リリースをさせていただきましたが、メンバーの立場(社員・アルバイト)、各プロジェクトによるフィルター表示その他、今ある社内のWhoAreYouを緩和する効果は備わっていると思います。
ですが、上記でも述べた通り今のところ最低限の機能しかないです。
みなさんが使う中で、欲しい機能(自分のSNSを公開したい、こういう情報・表現がしたいなど)、機能的なバグ、使いにくい点、その他たくさんうらみつらみとしてふと感じられると思います。
どんなに直感的でも、どんな難しいものでもいいのでフィードバックをください! 正直まだまだ開発チームの中でも今後の機能追加の方向性は完璧に定まってはいません。 ですがこのアプリが今の社内のやりづらさを解消する足がかりになると信じ、僕らは改善をします。
フィードバックはchatworkから受け付けます。また、興味のある方にはgithubでソースコードを公開するので、僕ら開発メンバーのchatworkに連絡お願いします! どんどんIssueを書いたり、追加機能を作ってPull requestでも大丈夫です。どうかよろしくお願いします。
文章的な提案
React, Firebase, Material Designの最初の一文
止まっていたところ、
ー>
止まってしまっていました。そんなとき、
俺の役割は「ドキュメント術、不断のコミット」というよりは「タスクの振り分けと全体の進捗管理」な気がする
Feedbackの前に、「ついにver.1のリリース」みたいな章がほしいかも(3行くらい?) こういう風に使ってほしい、役立って欲しいみたいな話?
reactの説明
もっともモダンな大規模アプリに適したコンポーネントの概念を含むNode.jsライブラリ. -> モダンな大規模アプリに適したUIを作るためのjsライブラリ.
wantedlyの開発手法を
基盤に -> 参考にし
ついに初回リリースをさせていただきましたが、メンバーの立場(社員・アルバイト)、各プロジェクトによるフィルター表示その他、今ある社内のWhoAreYouを緩和する効果は備わっていると思います。
ちょっとここ考えます
みなさんが使う中で、もっと自分のSNSを公開したい、こういう情報、表現がしたいなど欲しい機能、機能的なバグ、その他たくさんうらみつらみとしてふと感じられると思います。
みなさんが使う中で、欲しい機能(自分のSNSを公開したい、こういう情報・表現がしたいなど)、機能的なバグ、使いにくい点、その他たくさんうらみつらみとしてふと感じられると思います。
最初の方で
社内の見えない壁をぶち壊し、学生達同士の協力を促し開発効率の向上を図ります。
社内の見えない壁をぶち壊し、アルバイト・社員の枠にとらわれずに協力し合える雰囲気を作り出し、開発効率を向上させることが目的です。
Feedbackのところ
正直まだまだ開発チームの中でも今後の機能追加の方向性は見えていません。
正直まだまだ開発チームの中でも今後の機能追加の方向性は完璧に定まってはいません。
実は、僕たちが日ごろ使っているアプリのデザインは、「MaterialDesign」などといったデザインの標準的な規格に沿って作られています。これはとても厳密に出来ておりますが、それに従って作られるデザインはとても見やすく出来上がるため、とても役に立ちます。 wayでは、まず全員がiPhoneの描かれた紙にアプリを手描きでデザインする「ペーパープロトタイプ」というものから始めました。そして、デザイン担当となった僕が「wimsical」というツールで簡単なプロトタイプを作り、その後「Figma」というツールで、より細かいプロトタイプを作成しました。 実はver.1では実際のデザイン案にはあまり寄せられていません。これからもっと見やすくきれいなUIになっていく予定なのでお楽しみに!
WHY
WHAT
以下、ブログ下書き
wayをリリースしました(転びまくりながら、やっとここまできた)
Summary(What)
Why なぜ作ったか
How 1 どう作ったか
How 2
Request