ラグビーワールドカップ2023が終わり・・・🏉
こんばんは!みなさんはラグビーワールドカップは観ましたか?
本当に最高の2か月間でしたよねー!
各国の熱い試合をほぼリアルタイムで観ていた私は、閉幕して2週ほどたった現在もラグビー熱が冷め止みません!
そんなタイミングでWebアプリケーションについて学び、ラグビーに関するアプリケーションを作りたいなーと思った事がきっかけで、ラグビー日本代表のメンバーをかっこよく紹介するアルバムを作ってみました!目標は公式の選手紹介よりもカッコよく!です!
※作成途中で著作権的に選手本人の顔はNGと気付いたので、画像はイラストやにしました。
という事でデザインだけ目指せ公式越えって事にします・・・名前は本人なので画像は公式で見てください・・・
完成品はこちら!
アプリケーションはCodePenで作成しました!(PCで見た方が整っているので、宜しければNetlifyのページからもご覧ください!)
今回のアプリケーションのポイントはポジショングループ別のソート機能とモーダル画面内に画像を入れる事で本人の名シーンの画像を差し込めるようにしております!
イラストやにしてやり直し!!
— oooookawa (@ooooooooookawa) November 12, 2023
ラグビー選手紹介アルバムの作成!
本人の顔じゃないから訳分からんけどな!!#protoout #codepen #javascript #いらすとや #ラグビー pic.twitter.com/85gI8Rl2iP
■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">×</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で公開されている先人達の知恵を参考にさせて頂く事で、立派なアプリケーションを容易に真似する事ができ、非常に便利なアプリケーションだと感じました。
今一度、基礎から勉強して、今回作成したアプリケーションの中身をしっかりと理解する事から始めようと思います!!