目指せ公式越え！いい感じのJAPANラグビーメンバー紹介アルバムを作る！ #JavaScript

ラグビーワールドカップ2023が終わり・・・🏉

こんばんは！みなさんはラグビーワールドカップは観ましたか？
本当に最高の2か月間でしたよねー！
各国の熱い試合をほぼリアルタイムで観ていた私は、閉幕して2週ほどたった現在もラグビー熱が冷め止みません！

そんなタイミングでWebアプリケーションについて学び、ラグビーに関するアプリケーションを作りたいなーと思った事がきっかけで、ラグビー日本代表のメンバーをかっこよく紹介するアルバムを作ってみました！目標は公式の選手紹介よりもカッコよく！です！

※作成途中で著作権的に選手本人の顔はNGと気付いたので、画像はイラストやにしました。
という事でデザインだけ目指せ公式越えって事にします・・・名前は本人なので画像は公式で見てください・・・

完成品はこちら！

アプリケーションはCodePenで作成しました！（PCで見た方が整っているので、宜しければNetlifyのページからもご覧ください！）
今回のアプリケーションのポイントはポジショングループ別のソート機能とモーダル画面内に画像を入れる事で本人の名シーンの画像を差し込めるようにしております！

イラストやにしてやり直し！！
ラグビー選手紹介アルバムの作成！
本人の顔じゃないから訳分からんけどな！！#protoout #codepen #javascript #いらすとや #ラグビー pic.twitter.com/85gI8Rl2iP
— oooookawa (@ooooooooookawa) November 12, 2023

■Netlifyページ

■Codepen

See the Pen JAPN Rugby Albam by oooookawa (@oooookawa) on CodePen.

環境準備

今回使用した環境は以下の通りです。
・CodePen
・HTML
・CSS
・JavaScript
-------以下はライブラリ-----------
・jQuery
・isotope
・Bootstrap

わからなかった箇所

今回のアプリケーションを作るにあたり、サンプルコードを参考にさせて頂き作成しました。
しかし内容がわからずに躓いた箇所がありましたので、参考にしたサイトと合わせてポイントを説明します。

●画像のカラム数指定 + モーダル画面の実装
中央画像のバランスはBootstrapのclassを使用してカラム数を指定する事で実装しております。
また、モーダル画面はBootstrapの画面で作成しております。

<div class="card col-12  col-md-4 item front">
    <img class="card-img-top work-img" src="<画像UL>" data-toggle="modal" data-target="#workModal1"/>
    <div class="card-body">
        <h2 class="card-text"><文字列></h2>
    </div>
</div>

～省略～

    <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
        <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
        　        </button>
            　</div>]
～省略～

● ソート機能
画像をソートする機能はjQueryのプラグインのIsotopeで実装しております。

var $projects = $('.projects');

    $projects.isotope({
        itemSelector: '.item',
        layoutMode: 'fitRows'
    });

    $('ul.filters > li').on('click', function(e){

        e.preventDefault();

        var filter = $(this).attr('data-filter');

        $('ul.filters > li').removeClass('active');
        $(this).addClass('active');

        $projects.isotope({filter: filter});

    });

作ってみての正直な感想

正直！ライブラリとクラスの種類が多すぎて全然分かっておりません・・・・

今回作成したアプリケーションも、たくさんのCodePenのサンプルを参考にして繋ぎ合わせる事で実装しましたが、一行ずつ分析する事でどこで何をしているか？くらいは把握できたものの、これを一から自分で作るとなると、現状の自分では作れないな、、、というのが正直な感想です。

しかし、CodePenで公開されている先人達の知恵を参考にさせて頂く事で、立派なアプリケーションを容易に真似する事ができ、非常に便利なアプリケーションだと感じました。

今一度、基礎から勉強して、今回作成したアプリケーションの中身をしっかりと理解する事から始めようと思います！！