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

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

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

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



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



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">イラストやにしてやり直し！！<br>ラグビー選手紹介アルバムの作成！<br>本人の顔じゃないから訳分からんけどな！！<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/codepen?src=hash&amp;ref_src=twsrc%5Etfw">#codepen</a> <a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> <a href="https://twitter.com/hashtag/%E3%81%84%E3%82%89%E3%81%99%E3%81%A8%E3%82%84?src=hash&amp;ref_src=twsrc%5Etfw">#いらすとや</a> <a href="https://twitter.com/hashtag/%E3%83%A9%E3%82%B0%E3%83%93%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ラグビー</a> <a href="https://t.co/85gI8Rl2iP">pic.twitter.com/85gI8Rl2iP</a></p>&mdash; oooookawa (@ooooooooookawa) <a href="https://twitter.com/ooooooooookawa/status/1723697428879253746?ref_src=twsrc%5Etfw">November 12, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### ■Netlifyページ
https://6550d5029a84fd7e338cf66f--genuine-monstera-369513.netlify.app/

### ■Codepen
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYbZydZ" data-user="oooookawa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/oooookawa/pen/vYbZydZ">
  JAPN Rugby Albam</a> by oooookawa (<a href="https://codepen.io/oooookawa">@oooookawa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


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

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

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

```html
<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>]
～省略～
```

https://www.limosuki.com/2022/02/bootstrap5-class.html

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

```javascript
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});

    });
```
https://devsakaso.com/jquery-isotope/#





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


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


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

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