webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

jQueryでのcookieの指定

jQuery

Cookie（クッキー）とは？

Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したときに ユーザーを特定し、情報を入力する手間が省けます。ショッピングサイトに訪問したとき、すでにログイン状態になっている、以前カートに入れた商品がそのまま残っているのは、Cookie機能がはたらいているからです。


似たような機能でSessionという機能がありますが、Cookieはクライアント側にデータを保存するのに対して、Sessionはサーバー側に保存されてるため機密性の高いデータを扱う場合はSessionを使った方が良いでしょう。



github.com



$(function(){
//jquery.cookie.jsの設定
if($.cookie('access')){
//既にアクセス済みの場合はカーテンを非表示
$('.curtainr').css({'display':'none'});
}else{
//初アクセスの場合はカーテンをfadeOutさせる
$('.curtain').delay(5000).fadeOut(400);
}
//ファイルがロードされたら
$(window).on('load',function(){
$.cookie('access',$('body').addClass('access'));
});
});

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

jQuery

svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。

<body>
<svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500">
  <circle class="explosion" r="150" cx="250" cy="250"></circle>
  <g class="particleLayer">
    <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/>
    <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/>
    <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/>
    <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>

ただこのやり方だとbody内のソースの可読性が著しく下がってしまうので、svgタグ部分を外部ファイル化しajaxを使って非同期通信で読み込む方式に変更します。
ajaxで読み込めばbody内のソースも整理され、なおかつインラインの時と同じようにcssでsvgをコントロールする事が出来ます。

<body>
<div id="box">
<!--ここ外部svgデータが挿入-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'logo.svg',//ここにsvgファイルのパスを入れる
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#box').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
});
</script>
</body>

Fetch APIを使ってsvgを呼び出す

JavaScriptの次世代の非同期通信の規格であるFetch APIを使用する事で、jqueryを使わずに非同期通信が行えるようになります。


フェッチ 【 fetch 】とは

ソフトウェアやネットワーク通信の分野では、データなどの受信側・需要側が(送信側・供給側から送られてくるのを待つのではなく)能動的に読み出しに行く、相手に送信するよう要求する、といった意味合いでフェッチという用語が用いられる。特に、送信側が能動的に送り出す「プッシュ」(push)方式と対比して、一定時間ごとに受信すべきデータの有無を繰り返し確認する受信側の動作を指す場合があり、「ポーリング」(polling)とも呼ばれる。

マイクロプロセッサ(CPU/MPU)では、命令を実行する最初の段階で、命令コード(インストラクション)をメインメモリ(またはキャッシュメモリ)から読み出し、プロセッサ内部のレジスタに転送する動作のことをフェッチという。フェッチされた命令デコード(解析)されて実行に移される。フェッチにかかる時間を「フェッチサイクル」(fetch cycle)あるいは「命令サイクル」(instruction cycle)という。

また、CPUやソフトウェアが将来必要になる(かもしれない)データなどを先取りして読み出しておくことで読み込み動作にかかる待ち時間を削減する手法が様々な分野で幅広く利用されており、そのような「先読み」方式のことを「プリフェッチ」(prefetch)という。

var box = document.getElementById("box")
fetch("logo.svg")
.then(function(response) {
    return response.text();
}).then(function(svg) {
    box.innerHTML = svg
})

cssで作るドロップダウンメニュー

CSS3

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。


メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp


www.nike.com


www.kureha.co.jp



www.nodai.ac.jp


<nav class="g-nav">
<ul>
<li><a href="#">トップ</a></li>
<li class="drop">メニュー
<ul class="menu-child">
<li><a href="menu/index.html#lunch">ランチ</a></li>
<li><a href="menu/index.html#dinner">ディナー</a></li>
<li><a href="menu/index.html#course">コース</a></li>
</ul>
</li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</body>
</html>

第4回試験提出用フォーム

docs.google.com

Furniture store
より快適な毎日を、より多くの方々に<200b>

HOME
CONCEPT
SERVICE
ACCESS

新しい習慣でおしゃれな部屋づくりをはじめよう
感性のままに、好きなものを飾る場所を作りませんか？
コツはテーマを決めること。そうしたら自分の直感を信じて、いいなと思ったものを並べましょう。
それだけで、自分の家の中で好きな場所が一つ増えます。

Item-1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Item-2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Item-3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

Store info
会社名
株式会社 Furniture store
住所
東京都豊島区南池袋
電話番号
03-0000-0000
従業員
1000名
資本金
100,000,000円


Map

© Net Smart all rights reserved.

img要素をobject-fitで自由な大きさにトリミングする

webサイト制作

今まではimg要素には「max-width:100%」を指定して、レスポンシブレイアウトに対応させて来ました。俗に言うフルードイメージです。
画像の縦横比（アスペクト比）が一定の場合はフルードイメージでいいのですが、柔軟なレイアウトの場合は「object-fit」を使う事で、画像の縦横比をコントロールする必要があります。

フルードイメージ

フルードイメージは画像の縦横比が一定のレイアウトやPCファーストから作る場合に向いています



See the Pen
fluid img by yachin29 (@yachin29)
on CodePen.


object-fit

object-fitはレイアウト毎に画像の縦横比が変わる自由なレイアウトやモバイルファーストで作る時に向いています。




See the Pen
object-fit by yachin29 (@yachin29)
on CodePen.