概要
授業で学んだSSG(静的サイトジェネレーター)11tyを使用して作成したオリジナルのECサイトです。また、ターミナルを使用したNode.jsを活用の学習を同時に行いました。 今回は自分の身の回りにあるものを商品にするということで私の持っている好きなバンドのグッズの販売をしているECサイトの作成を行いました。
| 制作時期 | 2022年7月 |
| 制作期間 | 1カ月 |
| 担当箇所 | ECサイトの構築・コーディング |
| 制作人数 | 個人製作 |
| 公開URL | https://kentalog.work/_site/ |
◆制作工程
- 環境構築について学ぶ
- Eleventy（11ty）についての学習
- ページ量産の仕組みの作成
- 実際にEleventy（11ty）を使用してサイトの構築
- scssやJavaScriptを使用してデザインの作成や調整
大変だった点
◆SSGに対する理解
SSGの扱いが最初はよくわからなく授業資料を参考にしてなんとか学ぶことができました。 先生に言われたとおりにやってみると上手く実装されていたりしていたので驚きとともにどのような仕組みでできているのかとても気になったのを覚えています。 今回は11tyを使用して作成を行い初めて聞く言語が多くとても混乱しました。
◆ページ量産について
ページの量産の方法が最初は全く分からず、授業資料を参考にして学習を行いました。 失敗を繰り返すことでどこがだめだったのか、Pagenationがどのような仕組みで複数ページを量産しているのかを把握することができました。 まだ完全に把握したわけではなく、難しい箇所も多いのでこれから復習を行いブログなどで知識をアウトプットしていきたいと考えています。
◆Nunjucksについて
今回新しく学んだ言語にNunjucksがあったのですが最初は難しくはあったのですが制作を行っていくうちに便利な箇所が多いと感じました。 Nunjucksの知識を忘れずにこれから必要になってくる場面のときに有効活用できるように学習していく必要があると感じました。
◆JavaScript
//在庫数の確認
let state = document.querySelectorAll(".item__state");
let rababanstate = document.querySelectorAll(".rababan__state")
let rnumber = document.querySelectorAll(".rababan__kazu");
let rbutton = document.querySelectorAll(".rababan__button")
for(let i=0;i<state.length;i++){
let zaiko = state[i].innerHTML;
if(zaiko=="true"){
state[i].innerHTML="在庫有"
state[i].setAttribute("style","color:blue")
}else if(zaiko=="false"){
state[i].innerHTML="在庫無";
state[i].setAttribute("style","color:red")
}else{
state[i].innerHTML="在庫残りわずか";
state[i].setAttribute("style","color:#ff9500")
}
}
for(let i=0;i<rababanstate.length;i++){
let rababanzaiko = rababanstate[i].innerHTML;
if(rababanzaiko=="true"){
rababanstate[i].innerHTML="在庫有";
rababanstate[i].setAttribute("style","color:blue")
}else if(rababanzaiko=="false"){
rababanstate[i].innerHTML="申し訳ございません。終了しました。";
rababanstate[i].setAttribute("style","color:red");
rnumber[i].setAttribute("style","display:none");
rbutton[i].setAttribute("style","background-color:red")
rbutton[i].innerHTML="終了しました"
}else{
rababanstate[i].innerHTML="残り数が少なくなっております。"
rababanstate[i].setAttribute("style","color:#ff9500")
}
}
//itemページの画像を押したら変更される
let imglist = document.querySelectorAll(".rababan__imgitem")
let mainimg = document.querySelector(".rababan__img")
console.log(imglist)
for(let i=0;i<imglist.length;i++){
imglist[i].addEventListener("click",function(){
let code = imglist[i].getAttribute("src") //変数codeにクリックした画像のsrcを取得する。
mainimg.setAttribute("src",code) //mainimg(一番大きな画像)に先ほど取得したcodeのsrcをsetAttributeする。
})
}
//viewボタンの設定
let view = document.querySelectorAll(".item__link");
console.log(view)
for(let i=9;i<view.length;i++){
view[i].classList.add("hyouzi");
console.log(view[i])
if(view[i].classList.contains('hyouzi') == true){
view[i].setAttribute("style","display:none")
console.log(view[i])
}
}
//viewボタンを押したときのアニメーションの設定
let button = document.querySelector(".main__viewbutton")
button.addEventListener("click",function(){
button.classList.toggle('move')
if(button.classList.contains('move')==true){
for(let i= 9;i<view.length;i++){
view[i].setAttribute("style","display:block");
view[i].classList.add("fadeUp")
button.innerHTML = "view close"
}
}else{
for(let i= 9;i<view.length;i++){
view[i].setAttribute("style","display:none");
view[i].classList.remove("fadeUp")
button.innerHTML = "view more"
}
}
})今回プラグインを使用せずすべて自分でコードを打ってJavaScriptでのプログラムを行いました。 今まではサイトのものを流用したりしてましたが今回は一人で全てできたので自信に繋がりました。 また、在庫数の確認の箇所が文字ではなく数値にすると判別が付きやすいとの指摘があり、まだまだ改善の余地があると感じました。 今回のプログラムの箇所では友人に教える機会も多く、他人にわかりやすく伝える必要性を改めて学びました。
作品を通して
今回の授業、作品制作で学んだことは新しい知識が多くとても難しく感じました。 ですが、この知識を忘れることなく常にいつでも活用できるように復習やブログなどの活用をしてアウトプットする必要があると感じました。 また、他の言語を学ぶことで今までできていた基礎的なことができていなかったり凡ミスを指摘されることも多かったので改めて復習が大事だと再確認させられました。