Doiya’s blog

日々の進捗を書く雑記ブログ(メインはエンジニアやプログラミング関連)

N46-Forever

このブログで自分のPFを紹介したことがなかったので 改めて宣伝させてください!

N46Forever

https://i.gyazo.com/26123ae47d30e6c509ac579c0981a7c4.png

タイトル

N46-Forever

どういうサービスか?

乃木坂46の次の推しメンを紹介するサービス

なぜ作ったのか

以前から私は乃木坂46のことを応援していました。

理由としては、彼女たちの歌や番組などを見たり、握手会やライブに行くことによって生きる活力を見いだしたように感じたからです。

しかし自分の推しメンが卒業することによって徐々に応援するモチベーションが下がっていきました。

ですが、あることがきっかけで、応援するモチベーションを維持することができました。

それが「次の推しメンを見つけることが出来た」ということでした。

この経験を踏まえて、「次の推しメンを紹介するサービスを作ればいいのではないか?」という考えに至り こちらのサービスを作ることに決めました。

サービス概要

https://i.gyazo.com/1e765c4dfa299149b3ffe823d72696f8.png

まず、現役メンバーか卒業メンバーかどちらかを選択して下さい

https://i.gyazo.com/f0796cccc7557ec5dc4792540ab9a7b5.png

次に上記のようにメンバーの選択ボタンがあるので 好きなメンバーのボタンを選んでください。

https://i.gyazo.com/c1a879c30c712b785eb1ca592efaa727.png

一番上に、次の推しメンを提示しています。 左側に円グラフを表示しています。 内訳としては以下の5項目で構成しています。

cute: 可愛さや親しみやすさ 
singing: 歌唱力
dance: ダンスパーフォマンス 
variety: バラエティー能力
acting: 演技力

右側に「次の推しメンを紹介した理由」と twitterシェア機能を提示しています。

またメンバーのボタンを押すと 下記のように各メンバーのYouTubeの埋め込み動画と 簡単なプロフィールを紹介しています。

https://i.gyazo.com/7dadfd8eca20224b6707919c1f6d0098.png

その他乃木坂46の初心者の方向けに 「乃木坂46の紹介」や「乃木坂46を知るにはどうすれば良いか」と 「乃木坂46の最初の推しメンを紹介する」などのリンクも用意しております。

注 画像はPCのレイアウトを使用しておりまして、スマホだと若干レイアウトに違いがありますので、その点だけご了承ください。

技術

HTML

SCSS

chart.js

bootstrap

デプロイ

Heroku

(今後の課題として、RubyRuby on Railsやデータベースを用いて 機能を実装できるようにしていきたいです💧)

他にも色々工夫したところはありますが、私の別の記事に詳しく書いておりますので そちらを見ていただければ幸いです。 (以下にリンクも貼っておきます。)

https://doiya.hateblo.jp/entry/2021/12/15/022610

最後に

今回、ブログを書こうと思った理由は2点ありまして

一つは「自分のPFの軌跡を残したい」というのがあります。

ですが、最も突き動かしたのがもう一つの方で

「今後、乃木坂46のサービスを作る人の参考になって欲しい」です。

最初、「他に乃木坂46のサービスを作った人がいないか?」と探す所から始めたので もし、この記事をみて何かしらの参考になってくれる方がいれば、個人的に非常に嬉しいです。

長文、失礼しました🙇‍♂️