tag:crieit.net,2005:https://crieit.net/boards/bowling/feed Crieitで「ボウリング大会幹事アプリの開発」ボードに投稿された最近の投稿 2019-11-11T07:54:09+09:00 https://crieit.net/boards/bowling/feed tag:crieit.net,2005:PublicArticle/11-9-10 2019-11-10T23:47:55+09:00 2019-11-11T07:54:09+09:00 https://crieit.net/boards/bowling/11-9-10 <p><a href="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dc81f5dc0334.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/102e92a702e89059033b1dff5b0f87c55dc81f5dc0334.jpg?mw=700" alt="" /></a></p> <h1>はじめに</h1> <h2>開発の経緯</h2> <p>ボウリング大会(?)で幹事をやるかもしれないということで、<br /> チーム分けとかチーム戦のスコア計算とかHDCP計算とか<br /> Excelとか紙に書かずにできないかな、と思ったのが始まりです。</p> <h2>まず市場調査</h2> <p>一通り調べてみましたが、Excelマクロとかはそれらしいのがあったものの、PC持ち込んで計算というよりスマホだけで完結させたかったので、アプリを色々調べてみたのですが、個人の記録に特化していたのでこれはもう作るしかないと思いました。</p> <h1>現段階での動作イメージ</h1> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/k6A8r5p4g_Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <p><a target="_blank" rel="nofollow noopener" href="https://letsbowling.netlify.com/">https://letsbowling.netlify.com/</a></p> <h2>目指す仕様</h2> <h3>実装済み</h3> <ul> <li>5ゲーム合計値の計算</li> <li>ドラッグアンドドロップ</li> <li>localstorage保存・削除機能</li> <li>UIはほぼフィックス</li> </ul> <h3>未実装の機能</h3> <ul> <li>プレイヤー新規作成・編集</li> <li>チーム分け機能</li> <li>自動ソート機能 <ul> <li>手動でドラッグアンドドロップはできるものの、自動でソートする機能をつけたい。</li> </ul></li> <li>HDCP計算 <ul> <li>対象となるゲームを選択して、HDCPを計算、結果を反映する</li> </ul></li> <li>結果共有 <ul> <li>QRとかbase64文字列</li> </ul></li> </ul> <h1>技術的な話</h1> <h2>木目調CSS</h2> <p><a target="_blank" rel="nofollow noopener" href="https://qiita.com/nakyos/items/c71dbd723b1df3492b9a">CSSで木目調背景と畳調背景</a></p> <h2>データ保存</h2> <p>local storage</p> <h2>ドラッグアンドドロップ</h2> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/atlassian/react-beautiful-dnd">react-beautiful-dnd</a></p> <h2>チーム分けアルゴリズム</h2> <p>人数が少なければ、総当たりで解いてもいいのだけれども。<br /> ググって見つけたチーム分けアルゴリズムはなぜそういう処理をするのか、処理の意図が見えなくてとりあえずナップザックで解いてみた。<br /> <a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/ナップサック問題">ナップザック問題</a>で平均との差が小さくなるように実装してみた(平均+誤差の範囲で最大になるような解き方)</p> <ul> <li>ナップザックに入れる個数が自由だからか、 チーム分けしたときに人数が均等にならない</li> </ul> ckoshien