tag:crieit.net,2005:https://crieit.net/tags/ReactNativeForWeb/feed Crieitでタグ「ReactNativeForWeb」に投稿された最近の記事 2020-12-30T20:52:17+09:00 https://crieit.net/tags/ReactNativeForWeb/feed tag:crieit.net,2005:PublicArticle/16448 2020-12-30T20:51:19+09:00 2020-12-30T20:52:17+09:00 https://crieit.net/posts/f05ede37f52343628fe7705f6a531ed7 <h1 id="蓋野球スコア入力アプリ「CAP-SCOREBOOK」"><a href="#%E8%93%8B%E9%87%8E%E7%90%83%E3%82%B9%E3%82%B3%E3%82%A2%E5%85%A5%E5%8A%9B%E3%82%A2%E3%83%97%E3%83%AA%E3%80%8CCAP-SCOREBOOK%E3%80%8D">蓋野球スコア入力アプリ「CAP-SCOREBOOK」</a></h1> <p><a target="_blank" rel="nofollow noopener" href="https://cap-scoresheet.netlify.app">https://cap-scoresheet.netlify.app</a></p> <h2 id="操作マニュアル"><a href="#%E6%93%8D%E4%BD%9C%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB">操作マニュアル</a></h2> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/XtF5HmEmwWU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="機能概要"><a href="#%E6%A9%9F%E8%83%BD%E6%A6%82%E8%A6%81">機能概要</a></h2> <ul> <li>非ログイン時(閲覧モード) <ul> <li>試合結果閲覧</li> <li>試合内容閲覧</li> <li>個人成績閲覧</li> <li>チーム成績閲覧</li> <li>リーグ成績閲覧</li> <li>ログイン時(入力モード)</li> <li>チーム新規作成</li> <li>選手新規作成</li> <li>試合新規作成</li> <li>スターティングメンバー設定</li> <li>結果入力 <ul> <li>1球ごと入力</li> <li>1打席ごと入力</li> </ul></li> <li>自責点・勝敗S入力</li> </ul></li> </ul> <h2 id="開発環境"><a href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">開発環境</a></h2> <ul> <li>NextJS(static export)</li> <li>Netlify</li> <li>検証機: Pixel4a(Android)/12mini(iOS)/PC</li> <li>サーバ側: NodeJS</li> <li>DB: MySQL</li> <li>Docker-compose</li> <li>ReactNative For Web</li> <li>ユーザ認証: firebase</li> </ul> <h2 id="開発の経緯"><a href="#%E9%96%8B%E7%99%BA%E3%81%AE%E7%B5%8C%E7%B7%AF">開発の経緯</a></h2> <p>10/21 蓋世・エスト監督からスコアを共有できるアプリはないか聞かれる<br /> 10/25 1打席ごとの入力ができるWEBアプリの仮実装が終わる<br /> 10/30 スコアの活用方法思い付かずに実装中断<br /> 11/26<br /> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/Yokoppe_cap/status/1331653356872298496">https://twitter.com/Yokoppe_cap/status/1331653356872298496</a><br /> よこっぺさんの一言で中断してたスコアアプリの開発のやる気が復活する。<br /> 11/28 リーグ戦の帰りにkamiさんが「投球分析したいなぁ」と言う話をする。<br /> 11/29〜<br /> ある程度実装が終わっていたアプリに1球ごとのコース分析機能を拡張したアプリに着手。<br /> 当初はReactNativeを使ったandroid/iOSアプリを想定。<br /> 12/1 ネイティブアプリから得意なWEBアプリへの舵の切り直しを宣言。<br /> 12/4 ReactNative For Webの採用を決定。<br /> 12/7 Hirooookiさんから投手視点への切り替えが欲しいとの要望を受けるhttps://twitter.com/gstiltonhs/status/1335606102675783680<br /> 12/11 配球分析機能の実装が完了<br /> 12/14 いらすとやからのデザイン変更<br /> 12/21 テストコードの実装に着手<br /> 12/30 α版リリース</p> <h2 id="今回新たに使った技術"><a href="#%E4%BB%8A%E5%9B%9E%E6%96%B0%E3%81%9F%E3%81%AB%E4%BD%BF%E3%81%A3%E3%81%9F%E6%8A%80%E8%A1%93">今回新たに使った技術</a></h2> <ul> <li>ReactNative For Web</li> </ul> <p>CSSが書きにくいと思って敬遠していたのですが、いざ使ってみるとモバイルに最適化されていて、きちんとスタイルを書けば複雑なUIも実現できたので、食わず嫌いはよくないなと。</p> <h2 id="開発する上で役に立ったこと"><a href="#%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E4%B8%8A%E3%81%A7%E5%BD%B9%E3%81%AB%E7%AB%8B%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">開発する上で役に立ったこと</a></h2> <p>やっぱり<a target="_blank" rel="nofollow noopener" href="https://jcbl-score.com">みんなのSCORE</a>の開発経験ですかね。<br /> DB設計的にはCAP-SCOREBOOKの方が1球ずつ記録する分複雑なのですが、<br /> CAP-SCOREBOOKにほとんどDB設計を応用できました。</p> <h1 id="今後の展開(β版へ向けて)"><a href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E5%B1%95%E9%96%8B%28%CE%B2%E7%89%88%E3%81%B8%E5%90%91%E3%81%91%E3%81%A6%29">今後の展開(β版へ向けて)</a></h1> <ul> <li>共同編集機能</li> <li>スコアシート出力機能(需要があれば)</li> </ul> ckoshien