satudora-dev / way

who are you
https://way.satudora.co
0 stars 1 forks source link

開発ブログ第一弾の作成 #38

Closed TetsuFe closed 6 years ago

TetsuFe commented 6 years ago

WHY

WHAT

以下、ブログ下書き

wayをリリースしました(転びまくりながら、やっとここまできた)

Summary(What)

Why なぜ作ったか

How 1 どう作ったか

How 2

Request

yasunari89 commented 6 years ago

React

初めはJSはフレームワークなどを使わず作っていく予定でしたが、萩原さんやエンジニアの方々からアドバイスをもらう内に、昨今のフロントエンドの成長スピードは凄まじく、モダンなフロント開発を一からやると時間がかかりすぎること、ReactやVueは初心者に優しくいきなり始めても大丈夫そうであることが分かりました。そのため私たちは今までも少し話題に上がっていたReactを選びました。Reactはcreate-react-appというとても簡単な雛形生成用コマンドがあり、この点ではとても始めやすかったように感じます。しかしながら、公式チュートリアルはReactによるWeb制作の具体例というわけではなく、また、Web制作のReact使用の丁度いい難易度の具体例が見つからず、どのようにReactをWeb制作に適用させていくのか学ぶのが一番最初の壁であり、一番大きな壁でした。

khei4 commented 6 years ago

CI

浅野はCIの設定と、登録後のポップアップを主にやったのですが、他の仕事とのスケジュール管理が怠慢なのもあり、コンフィグの設定と、CIサーバーからのデプロイに予想以上に苦戦しました。React、Firebase Databaseのキャッチアップにも長谷川さん、おおたくんにペアプロをしてもらったりレクチャーしてもらったり、自分の協力のできなさと実力のなさを痛感するここまでの開発でした。私は幸いプロダクト作りプロジェクトに専念することになりそうなのでこれからのブラッシュアップ、機能拡張で引っ張る側に回れるよう日々邁進していきます。

sono8stream commented 6 years ago

Firebase

当初はruby on rails+herokuでの開発を検討していた5月。我々の経験不足のため、railsは我々に愛想をつかし、herokuはいつの間にか消息不明になっていました。そんな二転三転した開発環境は、ついにReact+Firebaseに着地。私はFirebaseに関して既に使用経験があったため、絶えずこれを推し続けていましたが、その努力が、ついに実ったのです。Firebaseは認証システムやデータベース、ストレージの管理といったサーバーサイドのタスクを、ウェブ上のGUIで手軽に管理でき、私のようなWeb初心者にとっては非常にとっつきやすいモノとなっています。とりあえず何かウェブサイトを作ってみたい、という方には特におすすめのサービスでしょう。

khei4 commented 6 years ago

WAYをリリースしました!(V.1.0)

「…(あの人誰)」を「あの、●●さんですよね?しーぷらぷらかけるんですか。」にする。

WAYは学生が多いAI HOKKAIDOで普段使いやすいカジュアルな雰囲気でWAY(WhoAreYou)を解決するためにために生まれました。 社内の見えない壁をぶち壊し、アルバイト・社員の枠にとらわれずに協力し合える雰囲気を作り出し、開発効率を向上させることが目的です。

開発チームは、サツドラデジタル・アプリチームで、萩原さんをヘッドコーチとした

の5人の学生でした。

プロダクト開発の基礎

僕たち学生はプロダクト開発経験がほぼない状態でアプリ開発に取り組むことが決まりました。 Ruby on Railsの公式ガイドから始め、環境構築からたくさんつまづいた僕らでしたが、そんな僕らにも萩原さんは一つ一つ丁寧に、チーム開発に必要な姿勢から教えてくださいました。

萩原さんが教えてくださった開発フレームワークはUberやAirBNBから最近の様々なベンチャーにも取り込まれているLean Product Developmentというもので、このフレームワークで一つ社内向けにモノを作ってみようということになりました。

picture_pc_490ae0202b1ac29671741ec596e3f7a6

Lean Developmentではすぐさまモノを作り出す前に、アイデアの仮説検証を行うのが特徴です。 Slackを用いて情報共有をしながらそれぞれアイデアを出し、議論し、社員に簡単にヒアリングしながら、さらにそれぞれがペーパープロトタイピングで実際のアプリを形にして、お互いフィードバックしあいました。

そうしてうまれたWAYのアイデアですが、この段階での反省はこのアプリがメンバーのアイデアの共通部分をとった最低限の機能しか考えられなくなった点と、そこに僕らが気づいていなかった点です。 既存のアプリで解決できるか、足りないものがなんなのかを検証する発想がなく、構想の段階でとても視野が狭くなってしまっていた事実が、後に指摘されるのでした。

React, Firebase, Material Design

全員初めてのチームでのWeb開発ということもあり、技術構成に関しても二転三転していきました。

  1. Ruby on Rails + Postgres(DB) + Heroku(Hosting) ( + Docker)

↓萩原さんの元同僚のハイパーエンジニアの方のアドバイス

  1. React(フロント) + Ruby on Rails(API) + Postgres + Netlify(Hosting)

↓長谷川さんの高速実装

  1. React + firebase(DB, Hosting, Auth)

最終的な技術構成は

(デプロイの自動化にTravis CIを使いました)

2018-09-28 14 58 12

になり、それからの開発は、WantedlyのGithub、Pull Requestベースのチーム開発を参考にし、それぞれの持ち味を出しながら連携してガツガツ進めていきました。

北村くんは基盤となるプロトタイプをFigmaを使って作り、大田くんはSlackでTik-Tokを共有しながら、ビジュアル系実装を引っ張り、Material-UI(GoogleのMaterial DesignのReactパッケージ)を用いてどんどんフロントを充実させていきました。

長谷川さんはバックエンドのモデルを一人でFirebaseを用いて完成させ、当初の予定を覆しシンプルに最速でアプリを形にしていきました。

芳尾さんはプロダクトマネージャーとして、各人のスキルと時間を配慮したタスク割り振りと進捗管理を行い、プロダクトを確実に完成に近づけていきました。

浅野は適当な理論をこねくりまわし、Githubのコミットログを汚しながらTravisCIの導入をしたあと、大田くん、芳尾さん、長谷川さんに指導を請いてなんとか数コミットしてついていきました。

そうやって夏休みの終わりの今、ようやくリリースはできるだろうという状態になったわけです。

FeedBackのお願い

ついに初回リリースをさせていただきましたが、メンバーの立場(社員・アルバイト)、各プロジェクトによるフィルター表示その他、今ある社内のWhoAreYouを緩和する効果は備わっていると思います。

ですが、上記でも述べた通り今のところ最低限の機能しかないです。

みなさんが使う中で、欲しい機能(自分のSNSを公開したい、こういう情報・表現がしたいなど)、機能的なバグ、使いにくい点、その他たくさんうらみつらみとしてふと感じられると思います。

どんなに直感的でも、どんな難しいものでもいいのでフィードバックをください! 正直まだまだ開発チームの中でも今後の機能追加の方向性は完璧に定まってはいません。 ですがこのアプリが今の社内のやりづらさを解消する足がかりになると信じ、僕らは改善をします。

フィードバックはchatworkから受け付けます。また、興味のある方にはgithubでソースコードを公開するので、僕ら開発メンバーのchatworkに連絡お願いします! どんどんIssueを書いたり、追加機能を作ってPull requestでも大丈夫です。どうかよろしくお願いします。

TetsuFe commented 6 years ago

文章的な提案

React, Firebase, Material Designの最初の一文

止まっていたところ、
ー>
止まってしまっていました。そんなとき、
TetsuFe commented 6 years ago

俺の役割は「ドキュメント術、不断のコミット」というよりは「タスクの振り分けと全体の進捗管理」な気がする

TetsuFe commented 6 years ago

Feedbackの前に、「ついにver.1のリリース」みたいな章がほしいかも(3行くらい?) こういう風に使ってほしい、役立って欲しいみたいな話?

TetsuFe commented 6 years ago

reactの説明

もっともモダンな大規模アプリに適したコンポーネントの概念を含むNode.jsライブラリ. -> モダンな大規模アプリに適したUIを作るためのjsライブラリ.

TetsuFe commented 6 years ago

wantedlyの開発手法を

基盤に -> 参考にし

TetsuFe commented 6 years ago

ついに初回リリースをさせていただきましたが、メンバーの立場(社員・アルバイト)、各プロジェクトによるフィルター表示その他、今ある社内のWhoAreYouを緩和する効果は備わっていると思います。

ちょっとここ考えます

TetsuFe commented 6 years ago

みなさんが使う中で、もっと自分のSNSを公開したい、こういう情報、表現がしたいなど欲しい機能、機能的なバグ、その他たくさんうらみつらみとしてふと感じられると思います。

みなさんが使う中で、欲しい機能(自分のSNSを公開したい、こういう情報・表現がしたいなど)、機能的なバグ、使いにくい点、その他たくさんうらみつらみとしてふと感じられると思います。

TetsuFe commented 6 years ago

提案

最初の方で

社内の見えない壁をぶち壊し、学生達同士の協力を促し開発効率の向上を図ります。

社内の見えない壁をぶち壊し、アルバイト・社員の枠にとらわれずに協力し合える雰囲気を作り出し、開発効率を向上させることが目的です。

TetsuFe commented 6 years ago

Feedbackのところ

正直まだまだ開発チームの中でも今後の機能追加の方向性は見えていません。

正直まだまだ開発チームの中でも今後の機能追加の方向性は完璧に定まってはいません。

kitamuyu commented 6 years ago

デザイン

実は、僕たちが日ごろ使っているアプリのデザインは、「MaterialDesign」などといったデザインの標準的な規格に沿って作られています。これはとても厳密に出来ておりますが、それに従って作られるデザインはとても見やすく出来上がるため、とても役に立ちます。 wayでは、まず全員がiPhoneの描かれた紙にアプリを手描きでデザインする「ペーパープロトタイプ」というものから始めました。そして、デザイン担当となった僕が「wimsical」というツールで簡単なプロトタイプを作り、その後「Figma」というツールで、より細かいプロトタイプを作成しました。 実はver.1では実際のデザイン案にはあまり寄せられていません。これからもっと見やすくきれいなUIになっていく予定なのでお楽しみに!