はじめに
当記事で作成したWEBアプリについて
アプリ名：審査員似てる度診断
自分の笑いの感覚がどの審査員と似ているかを診断してくれます。
記事を読む上での注意点
当記事は、プログラミング学習を独学で始めて、約４ヶ月の者が作った作品となります。技術的な面には誤りを含む場合があります。ご了承ください。
開発背景
皆さんは「M-1グランプリ2023」はご覧になられましたか？今年はどの漫才も面白くて、終始お腹を抱えて笑っていました。
私は昔から「M-1グランプリ」が大好きで、毎年この時期を楽しみにしています。各芸人の選りすぐりのネタが見れるのはもちろんのこと、審査員の講評や得点を知ることができるのもとても楽しみです。テレビ前で、各芸人に得点をつけて楽しむ方も多いのでないでしょうか？
かく言う私も、「M-1グランプリ」の日になると、友人とテレビ前に集合し、自分が審査員なら何点をつけるかを雑談しながら見るのが恒例行事となっています。
その時、毎回話題に挙がるのが、どの審査員に自分の笑いの感覚は近いのかということです。しかし、誰に似ているのかはいつも分からず終いです、、、。原因は以下のように考えられました。
・似ているための条件が確立されていない
・審査員の点数を覚えられない
・そもそも自分の点数も覚えられない
これらを解決できる便利なアプリがあるのではないか？調べても・・・そんなアプリやサイトは無い！！
「それじゃあ自分で作ってみるか・・！」ということで作成に取り掛かりました。
アプリの使い方
１．どのお笑いコンテストにするか選択する
お笑いの三大コンテストである、「M-1グランプリ」「キングオブコント」「R-1グランプリ」を選択できるようになっています。現在は、「M-1グランプリ」のみ診断可能で、「キングオブコント」「R-1グランプリ」は工事中となっています。
クリックする際には、実際にボタンをクリックしたようなモーションをつけました。
２．どの年にするか選択する
どの年を診断するか選択します。現在、2001年と2023年を選択できるようになっています。他の年は工事中となっています。
３．得点を記入する
自分が考えた、それぞれの芸人の得点を得点ボックスに記入していきます。
バグを極力減らすために、得点ボックスの中には、0点〜100点の整数のみを記入できるように設定しています。もし、この枠に収まらない得点が記入されたときは、以下のような表示が出ます。
↓100点以上の入力があった時
↓0点以下の入力があった時
4. 似ている度診断が表示される
１番似ている芸人が大きく中央に、他の芸人の似ている度は画面下に表示されます。
５．工事中画面
工事中の画面も表示されます。
工夫した点
UIについて
今後、正式にアプリとしてリリースすることを考えると、多くのユーザーに使いやすいと思ってもらう必要がありました。そこで、以下の２点を機能として追加しました。
・ヘッダーをつける。
・スマホ用の表示もできるようにする。
特に、スマホ用の表示もできることで、手軽に診断を楽しむことができます。フォント・文字の大きさやボタンの配置などをスマホ用に変更することによって、誰でも見やすい画面を心がけています。
JSP/サーブレットを用いて似ている度を算出
Javaを使用し、似ている度を計算するプログラムを作成しようと考えました。そこで、Javaのプログラムをサーバ側で使用するために、今回はJSP/サーブレットの技術を用いています。
入力された得点をサーブレットに受け渡し、似ている度がプログラムによって計算されます。ここでは、「M-1グランプリ2023」を例に説明します。
以下のように、それぞれの得点が決定したとします。
| 自分の得点 | 富澤たけしさんの得点 | 差（絶対値） | |
|---|---|---|---|
| 令和ロマン | 92 | 94 | 2 |
| シシガシラ | 90 | 91 | 1 |
| さや香 | 95 | 95 | 0 |
| カベポスター | 92 | 88 | 4 |
| マユリカ | 93 | 96 | 3 |
| ヤーレンズ | 97 | 97 | 0 |
| 真空ジェシカ | 94 | 94 | 1 |
| ダンビラムーチョ | 91 | 92 | 1 |
| くらげ | 88 | 89 | 1 |
| モグライダー | 90 | 90 | 0 |
この時、「差」が小さければ小さいほど似ている度は高く、逆に「差」が大きければ大きいほど似ている度がは低くなるように設定しました。
| 差の点数 | 似ている度 |
|---|---|
| 0点 | 10% |
| 1点〜2点 | 9% |
| 3点〜4点 | 8% |
| 5点〜6点 | 7% |
| 7点〜8点 | 6% |
| 9点〜10点 | 5% |
| 11点〜12点 | 4% |
| 13点〜14点 | 3% |
| 15点〜16点 | 2% |
| 17点〜18点 | 1% |
| 19点〜 | 0% |
これを用いると、以下のようになります。
| 自分の得点 | 富澤たけしさんの得点 | 差（絶対値） | 似ている度 | |
|---|---|---|---|---|
| 令和ロマン | 92 | 94 | 2 | 9% |
| シシガシラ | 90 | 91 | 1 | 9% |
| さや香 | 95 | 95 | 0 | 10% |
| カベポスター | 92 | 88 | 4 | 8% |
| マユリカ | 93 | 96 | 3 | 8% |
| ヤーレンズ | 97 | 97 | 0 | 10% |
| 真空ジェシカ | 94 | 94 | 1 | 9% |
| ダンビラムーチョ | 91 | 92 | 1 | 9% |
| くらげ | 88 | 89 | 1 | 9% |
| モグライダー | 90 | 90 | 0 | 10% |
この時、似ている度の合計は91%となるため、自分の得点と富澤たけしさんの似ている度は91%と表示されます。
開発に関して
使用技術
言語
HTML,CSS,Java
JSP/Servlet
開発環境
Eclipse IDE(4.29.0)
インフラ関連
Tomcat(9.0.80)
技術選定理由
プログラミング学習中期段階では、Progateを用いてJavaの学習をしていました。（初期の方では、XCodeでSwiftを用いて開発や学習を進めていました。）
WEBアプリを作るとなった際、学習したことが活かせる開発環境を動画等で探していると、ある一本のYouTubeに出会いました。その動画では、Eclipseでは
①Javaを用いて開発ができること
②Tomcatが開発環境に導入されていること
が説明されていました。またその動画内では、サンプルファイルを使いながら説明されていることで、スムーズに理解ができそうと思い、Eclipseを使った開発に挑戦することにしました。
実際、開発を進めていくと学習してきたJavaの知識だけでなく、インフラ関係の知識やHTML/CSSなどの知識も必要になり苦戦しましたが、結果的に色々な知識を網羅することができ満足しています。
今後の展望
課題点と今後に実装したい点は以下の通りです。
１．DBとの連結
現在はプログラムに直接、審査員の名前や得点を記入しています。しかし、それでは人的ミスや作業の煩わしさがあるため、DBと連結することでそれらの課題を解決していきたいです。
２．M-1以外のコンテストや他の年度の追加
現在、完成しているのは「M-1グランプリ2001」「M-1グランプリ2023」のみなので、随時更新を行なっていきたいです。
３．似ている度計算方法のレベルアップ
似ている度の信頼性を上げるためには、もっと複雑になった計算が必要になると思われます。
終わりに
2023年9月ごろから始めたプログラミング学習の壁を一つ突破したのかなと思います。仕事との両立は大変でした、、、。ただ、まだまだ課題は山積みなので、学習を止めず更なるステップアップを目指します！
次は、ポートフォリオ作成に並行して、資格の勉強や競技プログラミングにも挑戦してみたいな〜。
拙い文章も多くあったと思いますが、最後まで読んでいただきありがとうございました！