【夏#15】jqueryよくわからない
こんにちは！
課題制作は残りあと2日（今日と月曜日）、火曜日に発表ですが、なかなか終わりません。
でもとりあえず構成がわかるくらいにはHTMLとCSSを書いたので、jqueryを使って実装するものや、ちょっと凝ったCSS装飾に手を出しました。
必ず入れなければならないのが、画像などをスライドさせるのと、ボタンを押したらページが浮き出てくる、モーダルウィンドウです。
グループのみんな、その他の作業で手一杯そうだったので、やってみました。と言っても、jquery自体、授業でもあっさりとしかやっておらず、殆ど覚えられていなかったので、最初から学び直しでした。
復習……
授業の復習はいつも、課題制作期間に一気にやっていました。授業でやった内容をこれでもかというくらい盛り込んで実際に遊んでみることで、なんとかしていました。
この方法は少なくとも私が受けている職業訓練では効果的だと思われます。というのも、課題制作の発表の日は、その単元（教科書1冊分）のテスト日なのです。復習だけやっている暇がないです。要領が悪いのは自覚しています！
毎日復習したほうが良いのは本当にそうです。そうなのですが、、そこまで頑張る気力がなく、全然できていませんでした。でも、最近は課題の内容が随分とカロリーが高くなってきたり、資格試験の勉強だったりでやらざるを得なくて、悔しいことに習慣ができてしまいました。
あとはこのnote。最近は毎日投稿するぜと言い張ったのはよいものの、夏休みの日記帳になりました。反応をくれたり突っ込んでくれたり、意見をもらったりなど、皆様に構ってもらえるお陰で、私ちゃんと勉強しているぞという姿勢を見せるために授業のこととかを書いていたのですが、その際に学校の復習をせざるを得なくてとても助かっています。ほんとうにいつもありがとうございます！泣
jquery
やっとjqueryの話に入るのですが、まずjqueryってなんだというところから始まりました。
QueryはJavaScriptのためのライブラリです。jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになりました。
Javascriptも知りません。私は元ITですが、C#ちょっとと、Pythonほんのちょっと。そういうのよりもマクロのほうが仲良しな、圧倒的に事務職寄りの人間でした……という言い訳をさせてほしい。
JavaScript（ジャバ スクリプト）とは、Webページに動きをつけるためのプログラミング言語です。 ボタンに触れると形や色が変わる機能や、スライドショー、ポップアップウィンドウ、ログインなど、さまざまな機能の実装に用いられます
なるほど、Webサイトを作るなら知っておかないといけないことがまだたくさんあるんですね……
あと、「jquery」と検索したら「終わった」と候補に書いてありました。
そういえば授業のメモ二項書いてありました。
バージョンが上がるに連れ、機能の向上や改善が図られている。しかし、例えば1.x 系のプラグインを、jQuery 本体が2.x 系で使用することは基本的に考えられていない。
→ 自分が実装した機能＝プラグインによって、jQuery 本体のバージョンを選択して制作しているのが現状である。
→ 現実的な部分として、最新の3.x 系よりも1.x や2.x で本体を設置する方が無難な実情
ということで、先輩方も使っていたバージョン1.8.x系を使うことにしました。
jqueryはCDNとダウンロード版があります。どっちが良いのかググりました。
jQueryを導入する方法は２種類あります。ダウンロードする方法とCDNを使う方法です。CDNを使う方はダウンロードに比べて簡単にできるため、初心者の方でもすぐにjQueryを利用することができます。
jQueryの導入方法にはCDNの他にダウンロードして、ファイルを読み込む方法があります。 結論としては、どちらでもいいと思います。 しかし、Webページを長期間運用するのであればダウンロードする方をおすすめします。
このサイトによると、どちらでも良さそう。学校ではダウンロードする方法を使っていたので、パクりやすい 参考にしやすいので、ダウンロードしてやってみることにしました。
メモ
※公式サイトででダウンロードする
headダウンロードしたファイルのパスを書く。
使いたい機能の<script>は、この行のあとに書くこと！
<script src="js/jquery-1.8.x.min.js"></script>参考にするサイト
CSSでも色々できるようです
スライドさせたい
スライドさせるjqueryを検索してみると、大体slickがでてくるので、他の半も使っていそうだなと思い、これにしました。誰かに聞けそう。
このサイトを見ながらやってみました。
コードなどをふんだんにコピー参考にして、やってみたところ、スライドすることと、自動で画像が切り替わるようになりました。
しかし、左右の矢印を出そうとすると、デフォルトのものではなく、「←」みたいなダサい矢印が出てきます。ほんとにダサい。なんでこうなった。
このサイトのオプションのところと、slick用のcssを見比べてみて解決したいです。土日の間に……
この辺のcssが非常に怪しい。
でも、これslickのファイルをダウンロードしたときに入っていた「slick-theme.css」のはずなんですが。
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}モーダルウィンドウ
これは学校で習ったのをそのままやってみたらできたのでひとまず問題ない。
他にもやらないといけないことは山ほどある気がするのですが、今ちょうど原神のVer.4.0「ゆえなく煙る霧雨のように」予告番組が始まってしまいました。PCの画面右半分でnoteを書きながら、画面左半分で予告番組を見ています。
いつもはキャラクターの声優さんが解説してくれるのですが、つぎのアップデートは新マップ開放で、フォンテーヌが実装されるため、中国のお偉いさんたちが紹介してくれています。ラジオのように聞き流しながら書こうと思ったのですが、ほぼ全部中国語で内容がぜんぜん入ってこない。
新キャラがかわいいのと、景色が綺麗なことしか今のところわかりません。
でも、知らないことが多いほうがワクワクするものですよね！！！
ああ、WEBページ制作もそのような心意気でやりたいものです。
今週もお疲れ様でした🍺
