はじめに
初のWebサービスデプロイです。
アプリの紹介
サービスURL
レスポンシブ対応（スマホ・タブレット・PCで使用可能）です。
Github
「着順ナビ」は「どうすれば着順が高くなるか」がわかる麻雀ツールです。
雀魂など「外部ツールの使用」が禁止される環境での使用は想定していません。
友人との麻雀や、振り返りなどでお使いください。
使い方
 |
| 入力が必要なのは赤枠の5箇所です。 |
 |
| 入力し、右のタブをクリック、またはスワイプ |
 |
| 何翻・何符の役で着順が上がる / 下がるかを表示 |
技術構成
| フロントエンド | TailwindCSS, daisyUI, Hammer.js |
| Webサーバー | Node.js |
| インフラ | glitch.com |
こだわったポイント
UI
「説明無しに使える」UIにできたかなと思います。
レスポンシブ対応
スマホでも使えるよう、以下の点を考慮しました。
- Hammer.jsを使用しスワイプに対応しました。
- タブを分割し、狭い画面でも見やすい表示にしました。
画像の表示・favicon
少し殺伐としていたので、サイト訪問時に画像を表示
faviconも作成し、見た目を整えました。
Twitter Card
Twitterでの告知もリッチな見た目にしたいと思い、Twitter Cardに対応しました。
次回やりたいこと
「次回」があればやりたいこと
サービス名に「麻雀」を入れる
語呂の良さで「着順ナビ」にしましたが、「麻雀」を入れたほうが検索に引っかかる、
つまり需要に対し供給できるかなと思います。
せっかく作ったので、より使ってもらいたいですから。
入力をより簡易に
現在、入力に26秒ほどかかります。長い。
案1 画像解析
OpenAI APIを使用して画像から点数を抜き出す方法です。
 |
 |
プロンプト
スクリーンショットから以下の情報を抜き出してください：
各プレイヤーの点数
スクリーンショットの中央にある点数表示パネルに注目してください。
各プレイヤーのアイコンの隣に表示されている点数を読み取ってください。
供託のリーチ棒と本場情報
スクリーンショットの中央にある点数表示パネルの下部に注目してください。
「リーチ棒」と「本場」の数値を確認してください。
「リーチ棒：0」
「本場：0」
このようにして、各プレイヤーの点数および供託のリーチ棒と本場の情報を正確に読み取ってください。
画像の通り、成功はしています。
問題は、雀魂のガイドラインです。
このツールの使用は「外部ツールの使用」にあたると思われます。
そんな中で、雀魂に特化した機能を提供するのはいかがなものかと思います。
「外部ツール」の詳細については公的な説明はありません。
少なくとも「外部のツール」全般が禁止されてはいません。
例えば、雀魂公式で解説をするようなプロ雀士がnagaを使用して牌譜振り返り配信をしています。
しかし、公式の説明が変わるまで、開発はしない予定です。
案2 入力フォームの改善
- 1つの入力フォームで連続入力機能
- 末尾の00を入力不要に
入力の速さと、最初の馴染みやすさのどちらを取るかの問題です。
今回の開発では、馴染みやすさを取ったUIにしました。
しかし、「自分が一番のユーザーになるアプリ」であるため、入力の速さを優先したほうが良かったかなと思います。
以下は簡単な動作イメージです。
See the Pen Qiita_runk_navi by Kohki_Takatama (@Kohki-Takatama) on CodePen.
おわりに
改善点はあるものの、満足のいくサービスが作れたと思います。
同様の実装をしようとしている方がいれば、いつでも相談してください！