jQueryでサイドバー作り
アニメーションを使うpart2
「jQuery最高の教科書」を読んで作りました。
作ってみたサイドバー
通常時
クリック時
HTMLのコード(サイドバー部分)
<aside> <ul> <li><a href="#"><img id="kabuki_side" src="kabuki_side1.png"></a></li> <li><a href="#"><img id="kabuki_side" src="kabuki_side2.png"></a></li> <li><a href="#"><img id="kabuki_side" src="kabuki_side3.png"></a></li> </ul> <button><img id="kabuki_open" src="open.png"></button> </aside>
- asideタグで囲んで、画像を縦並びのリスト表示にします。
CSSのコード(サイドバー部分)
.page-main > aside { background-color: rgba(0,0,0,0.8); width: 350px; height: 100%; top: 0; left: -350px; position: fixed; } .page-main > aside ul { margin: 0; padding: 0; top: 50px; left: 114px; position: absolute; } .page-main > aside li { margin: 0 0 20px; list-style: none; } .page-main > aside button { background-color: rgba(0,0,0,0.8); display: block; position: absolute; top: 150px; left: 350px; width: 52px; height: 132px; margin: 0; padding: 0; border: none; }
- サイドバーのwidthを350pxにして、leftを-350pxにすることでサイドバーを隠しておくことができる。
- サイドバーについている開け閉めボタンにはleftを350pxにすることでサイドバーにくっつける。
display:block, inline, inline-blockの違い(考え中)
display:block
対象の要素をブロックとして扱うことができる。
display:inline
対象の要素をインライン要素として扱うことができるので、他の要素と横並びに表示することができる。
display:inline-block
対象の要素をインラインのように横並びに表示し、さらにそれぞれの要素に高さや横幅も指定することができる。
position:absolute, relative, fixed, static
position:absolute
ボックス要素を絶対位置へ配置。position:absoluteが指定された要素は他の要素との関係は切り離されて全くの別物になる。
position:absoluteには必ず親要素がいることに注意。
親にしたい要素にposition:relativeかfixedを指定し、その中に子要素を入れてposition:absoluteを指定する。 br>top,bottom, left, rightは親要素との距離で、親要素を指定しなかった場合は勝手にブラウザが親要素になる。position:relative
相対位置での配置。本来表示されるべき位置からずらして表示できる。
position:fixed
固定位置での配置。
画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。position:static
初期値。上記三つの設定を解除したいときに使う。
Java Scriptのコード(サイドバー部分)
var $aside = $('.page-main > aside'); var $asidButton = $aside.find('button') .on('click', function(){ $aside.toggleClass('open'); if($aside.hasClass('open')){ $aside.stop(true).animate({left: '-90px'}, duration, 'easeOutBack'); //❶ $asidButton.find('img').attr('src', 'close.png');//❷ }else{ $aside.stop(true).animate({left: '-350px'}, duration, 'easeInBack'); $asidButton.find('img').attr('src', 'open.png'); }; });
- CSSで指定したサイドバーのleftを操作することでサイドバーの開け閉めをする。(❶)
toggleClass()・・・このメソッドは引数に指定されたクラス名(文字列)が、jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、指定されていない場合は追加し、すでに指定されている場合は削除する。
hasClass()・・・このメソッドは引数に渡したクラス名(文字列)が、対象要素のclass属性に含まれていればtrueを返し、含まれていなければfalseを返す。
attr()・・・要素の属性値の取得または属性値の設定を行うメソッド。
attr(属性名); //jQueryオブジェクトは返らない attr(属性名, 値); //jQueryオブジェクトが返る
animateメソッドで開いた状態までアニメーションさせた後、attr('src', 'close.png');を実行することで閉めるボタンに変更している。(❷)
filter()メソッドとfind()メソッドの違い
参考サイトfilter()とfind()の違い
参考サイト一覧
display:inline, block, inline-blockの使い方とサンプル
jQuery最高の教科書 | 株式会社シフトブレイン 著
jQueryでボタン作り
アニメーションをつかう
「jQuery最高の教科書」を読んで作りました。
作ってみたボタン
- 通常時
- マウスオーバー時(ふわっと画像が変化します)
HTMLのコード(ボタン部分)
<div class="page-main" role="main"> <div id="button"> <div class="inner"> <button> <span> <img src="kabuki1.png"> <img src="kabuki_green.png"> </span> </button> </div> </div> </div>
- 全体を#buttonで囲んで二つの画像を重ねる。
- imgタグで指定しているkabuki1.pngは通常時に表示する画像、kabuki_green.pngはマウスオーバー時に表示する画像。
- この二つの画像はJava ScriptからCSSの'opacity(不透明度)'を操作する事で切り替えます。
CSSのコード(ボタン部分)
#button button img:first-child { position: absolute; } #button button img:nth-child(2) { opacity: 0; }
- ここのコードは初期状態なので、通常時の画像を絶対配置にし、マウスオーバー時は非表示にします。
- buttonタグの最初の子要素にあたる"kabuki1.png"に対してimg:first-childを指定することで、特定の要素(この場合"kabuki1.png")を対象にスタイルを適用させることができます。
- :first-childは:nth-child(1)を指定した時と同じ動作。
- :nth-child(2)を指定するとbuttonタグの2番目の要素にスタイルを適用させることができます。
Java Scriptのコード(ボタンの部分)
$(function() { var duration = 300; $('#button button') .on('mouseover', function(){ var $btn = $(this).stop(true).animate({ backgroundColor: '#5fb751' //ボタンの背景を緑に }, duration); $btn.find('img:first-child').stop(true).animate({opacity: 0}, duration); $btn.find('img:nth-child(2)').stop(true).animate({opacity: 1}, duration); }) .on('mouseout', function(){ var $btn = $(this).stop(true).animate({ backgroundColor: '#fff' }, duration); $btn.find('img:first-child').stop(true).animate({opacity: 1}, duration); $btn.find('img:nth-child(2)').stop(true).animate({opacity: 0}, duration); }) });
- durationはアニメーションにかける時間を指定しています。
- buttonそれぞれにopacityを指定して画像を切り替えます。
ボタンがふわっと変化するようなアニメーションを作るにはjQuery UIもインポートする。
参考書籍
jQuery最高の教科書 | 株式会社シフトブレイン著
jQuery
コードのメモ
HTMLの読み込みを最後まで待つコード
HTMLを最後まで読み込んだ後に{ }の中の処理が実行される
$(function(){
//HTMLを読み込んだ後に実行する処理
});
$('セレクタ') .css('プロパティ', '値');
css( );・・・jQueryメソッド、その中身は引数。CSSプロパティと値を入れる。
$('セレクタ')・・・HTMLに指定されている、「id = 'セレクタ名' 」に対して命令している
$( )・・・「HTML要素を元にしてjQuery独自の要素を生成する」機能を持った関数。
この関数によってjQuery形式に変換された要素のことをjQueryオブジェクトという
つまり、「HTML要素を$( )関数によってjQueryオブジェクトに変換し、css( );メソッドでそのオブジェクトに変更を加えている」
<補足>(考え中)
$()にidを指定するとjQueryオブジェクトを取得できる(1行目)。Java ScriptのDOMのgetElementByIdで取得できるのは、Elementオブジェクトそのもの。(2行目)
以下は同じ
console.log($('#id')) console.log(document.getElementById('id'))
もし、jQueryでDOMと同等のものを取得したい場合は以下のように書く
$('#id').get(0)
実行タイミングをコントロールするコード
マウスオーバーした時とか、マウスアウトした時のタイミングで動きを加える
$('セレクタ') .on('イベントタイプ', イベントハンドラ);
on( );・・・特定のタイミングに実行したい命令の設定をするメソッド
- イベントタイプ
イベントタイプ | 該当するタイミング |
---|---|
mouseover | 要素にマウスが乗った時 |
mouseout | 要素がマウスから離れた時 |
mousedown | 要素上でクリックボタンが押された時 |
mouseup | 要素上でクリックボタンが離れた時 |
mousemove | 要素上でマウスが動かされた時 |
click | 要素がクリックされた時 |
dblclick | 要素がダブルクリックされた時 |
keydown | 要素にフォーカスした状態で、キーボードのキーが押された時 |
keyup | 要素にフォーカスした状態で、キーボードのキーが離された時 |
focus | 要素にフォーカスが当たった時(フォーカスできる要素のみ) |
blur | 要素からフォーカスが外れた時(フォーカスできる要素のみ) |
change | 入力内容が変更された時(textarea要素、input要素、select要素など) |
resize | 要素がリサイズされた時 |
scroll | 要素がスクロールされた時 |
function(){
//任意の処理
}
イベントハンドラの中には、イベントタイプで指定したタイミングで実行して欲しい処理の内容を記述する
アニメーション
$('セレクタ').animate({ 'CSSプロパティ': '値', 'CSSプロパティ': '値' }, アニメーション時間 );
animate( );・・・処理対象をアニメーション化するメソッド
animateメソッドの一つ目の引数にはアニメーション完了時の見た目を表現するCSSプロパティと値を指定する。二つ目の引数にはどのくらい時間をかけてアニメーションさせるかを指定する。時間の単位はミリ秒。1500の場合1.5秒かかる。
- もっとアニメーション
$('セレクタ').animate({ 'CSSプロパティ': '値', 'CSSプロパティ': '値' }, アニメーション時間, 'イージングの種類', function(){ //アニメーション終了時に実行する処理 } );
- CSSプロパティの種類
CSSプロパティ | 説明 |
---|---|
opacity | 要素の不透明度 |
- イージングの種類
イージングの種類 | 説明 |
---|---|
linear | 一定のスピードでアニメーションする |
swing | アニメーションの変化する速度が変わる |
- アニメーション終了時に実行する処理
アニメーションが完了した後に画面を元に戻したい場合などはfunction(){}の中に処理を書く
- アニメーションの途中でも次のアニメーションに移りたい場合
stop( true | false )
stop()・・・要素のアニメーションを停止するメソッド
引数 | 説明 |
---|---|
true | アニメーションをストップする |
false | アニメーションをストップさせない |
コードの書き方
$('セレクタ').stop(true).animate({ });
その他メソッド一覧
メソッド名 | 使い方 |
---|---|
find() | jQueryオブジェクトの各要素の子孫要素を対象として要素を絞り込む |
filter() | jQueryオブジェクトの各要素を対象として要素を絞り込む |
セッション管理とSpring Bootの話
セッション管理(Servlet)
Webアクセスに使うHTTPにはセッションの概念がなく,そのままでは複数のWebページをまたがった一連の通信をセッションとして認識できません。そこでWebサーバーがクライアントとの間のセッションを認識し,処理の進行状態を把握するセッション管理のしくみが必要になります。このセッション管理を実現する一般的な方法に、Webサーバーが発行するセッションIDを利用するものがあります。これは、クライアントがWebサーバーにログインした際、セッションIDを発行し、以後、その情報をもとにクライアントとWebサーバーのセッション管理を行うものです。
セッション管理のしくみ
セッション管理なしの場合、マロサーバは毎回の要求に対して独立にレスポンスを送るだけなので前回の要求内容を覚えていません。そのため、初回リクエスト時にマロサーバにリクエストを送っても、二回目以降のリクエストでは一回目のリクエスト内容を覚えていないので話がつながりません。7ちゃんブラウザは毎回初回リクエストのように全てを伝えなければなりません。
一方セッション管理ありの場合、マロサーバは初回リクエストで発行したセッションIDをもとに二回目以降の処理を行うので、7ちゃんブラウザが伝えたことは引き継がれていきます。
ショッピングサイトで買い物カゴに入れられた商品が注文を確定するまでそのまま引き継がれていくのもセッション管理を行っているおかげです。
セッション管理のソースコード
HttpSession session = request.getSession(); //getSession();でセッションを開始 Users user = (Users) session.getAttribute("users"); if (user == null) { String error = "セッションがタイムアウトしました"; request.setAttribute("error", error); request.getRequestDispatcher("/views/index.jsp").forward(request, response); } else { //セッションを保持していた場合の処理 }
Spring Boot
「効率的に必要最低限の作業でSpring MVCを使ったWebアプリケーションを構築できるようにしよう」という考え方から生まれたのがSpring Bootです。
Webアプリケーション用のフレームワークとしてはSpring MVCが用意されています。しかし、Spring MVCを利用するためには、必要となるフレームワークやライブラリを正確に組み込まなければなりません。また、処理を構築するにはMVCの各コードを作成しなければいけません。これではプログラミングに取り掛かるまでの作業がかなり大変です。
そこでSpring Bootは従来のXMLによる設定ファイルだらけのJava EE開発から、@アノテーションによる設定ファイルを使わない開発へシフトし、効率的にWebアプリケーションを構築できるようにしました。
アスペクト指向
今日のまとめ
AOPとOOP
アスペクト指向(AOP)は、オブジェクト指向(OOP)の本質でない部分を抜き出したものです。簡単に言えば、AOPはOOPではカバーできない箇所を補います。複数のオブジェクトで同じ操作が散在してしまうことを「横断的関心事」といいます。AOPでは、横断的関心事をアスペクトというモジュールに分離、管理をすることで、OOPよりも処理の保守性と再利用性のレベルを高めることができます。
AOP・・・Aspect Oriented Programming
Aspect・・・横断的関心事
モジュール・・・一連の機能がひとまとまりになる複数の機能
ロギング
ロギングとは、起こった出来事についての情報などを一定の形式で時系列に記録・蓄積すること。そのように記録されたデータのことを「ログ」(log)という。
Pointcut
ジョインポイントの集合のこと。条件にあうジョインポイントだけを抜き出すことも可能。
Interceptor
メソッドの呼び出しタイミングで、振る舞いを挿入すること。Advice
ジョインポイントに埋め込まれるアスペクトコードのこと。3つの種類がある。- Around Advice
ジョインポイントの前後で実行される。 - Before Advice
ジョインポイントの前で実行される。 - After Advice
ジョインポイントの後に実行される。2つの種類がある。
After returning Advice
ジョインポイントでの処理が正常に終了した後に実行される。
Throws Advice
ジョインポイントでの処理で例外が発生した場合に実行される。
- Around Advice
JoinPoints
アスペクトコードが挿入できる位置を表したもの。例えば、メソッド呼び出しの前後などは、ジョインポイントになる。
Thymeleaf
Javaのテンプレートエンジンライブラリ。テンプレートエンジンというのはデータとテンプレートを合体させ、文字列を作る仕組みのことです。XML/XHTML/HTML5で書かれたテンプレートを変換して、アプリケーションのデータやテキストを表示することができます。
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<p th:text="${hoge}">
MVC
Model View Controller
フロントコントローラー
フルスタック
Gradle
Groovy製のビルドツール。
ビルド・・・ソースからアプリケーションを構築するまでの一連の流れ。
ビルドツール・・・ビルドに関わる各種処理を実行。
論理削除とrollbackの話
今日のまとめ
論理削除と物理削除
物理削除はDELETE文を使って物理的にデータを削除してしまうことです。データベースから完全にレコードを削除してしまって、簡単には復元することはできません。(バックアップデータから復元しなければいけない)
対して論理削除は、間違って消してしまっても簡単に復元できます。データベースにフラグとなるフィールドを用意しておいて、削除するときに削除フラグを立てることで、表示時にそのデータを見せなくする方法です。UPDATE文を使います。
こんなときに論理削除を使います。
ユーザーからはデータがないように見せたいけど、実際のデータは消したくないとき
"削除した"データを検索したい
誤った操作をしたとき、すぐに元に戻したいとき
削除フラグ・・・「削除したものとして扱いますよ」というフラグ
rollback
トランザクションで行われた作業を元に戻すためのメソッドです。現在のトランザクションを終了して、保留中の変更をすべてデータベースにロールバックします。
7ちゃんの例
7ちゃんがデータを更新して新しいデータに変更されるまで一連の流れをトランザクションといいます。
7ちゃんは"hachichan"というアカウント名に変更しようとしていますが、更新中にエラーが起きてしまいました。そのため、"hachichan"という更新途中のデータはトランザクションを開始したときの"nanachan"という更新前のデータに戻ってしまいます。
つまり、トランザクションを開始して、何らかの障害が更新途中の処理で起きてしまった場合、更新途中のデータでもトランザクション開始時の状態に戻してデータの整合性を保つ処理を行う必要があります。この処理のことをロールバックといいます。
ロールバック・・・データ更新などで障害が起こったときに、その前の状態にまで戻ることをいう。 後進復帰とも言う。
今日の復習!!
Spring Framework
Javaプラットフォーム向けのオープンソースアプリケーションフレームワーク・・・。
アプリケーションフレームワーク・・・アプリケーションを実装するために使われるクラスやライブラリの集まり
ReflectionUtils
例外処理するためのシンプルなユーティリティークラス。
Invoke
発動させるという意味。メソッドを発動(実行)させる。
@AutoWired
DIコンテナがその変数の型に代入できるクラスを@Componentの付いているクラスから探し出し、インジェクションしてくれる
DI・・・オブジェクト間で依存性のあるコードを実行時に注入するという設計思想
インジェクション・・・注入
pageContext
ページの情報を取ってくるオブジェクト
JSTL
JavaServer Pages Standard Tag Libraryの略。
JSPで利用される標準的なカスタムタグをまとめたもの。
参考サイト データベースの論理削除と物理削除
クロスイデアBlog「論理削除か物理削除か」
Oracle® Database SQL Reference
IT用語辞典 ロールバック
基本情報技術者講座
楽観ロックと悲観ロック
今日のまとめ
楽観ロック
あるデータをAさんが更新処理をしている間にBさんも処理が可能です。 でも、更新処理をAさんが先に完了してしまうと、Bさんの更新処理は失敗してしまいます。
7ちゃんとマロくんの例
楽観ロックの場合、複数のユーザーが同時にデータを見ることができます。この例の場合、7ちゃんが更新中にマロくんはデータを見ることはできますが、7ちゃんが更新処理を先に完了してしまうと、マロくんは更新することはできずにエラーになってしまいます。また、更新したことは告げられないので、現在マロくんが見ているデータが最新のものであるかはわかりません。
悲観ロック
あるデータをAさんが処理していた場合、BさんはAさんの処理が終わるまで、そのデータに触ることはできません。悲観ロックはデータを読み込んだ時点から始まります。
7ちゃんとマロくんの例
悲観ロックはユーザーが読み込みや更新処理を行っているときは、他のユーザーはそれらの処理を行えません。この例の場合、7ちゃんがデータ更新中に、マロくんはデータに触ることができません。7ちゃんの更新が終わってロックが解除されたタイミングで、マロくんはデータに触ることができます。悲観ロックであれば、今見ているデータは最新であると言うことが保証されますが、次に処理したい人は、前の人の処理が終わるまで待たなければいけません。
排他制御(ロック)
あるトランザクションが実行中のときに、そのトランザクションが対象としているデータを制御(ロック)し、他のトランザクションのアクセスを禁止することで、データの整合性を確保しようとする仕組みのこと。
トランザクション・・・一連の処理
整合性・・・ずれがなく揃うこと
今日の復習!!
三項演算子の書き方
条件式 ? 式1 : 式2
条件式の値がtrueだった場合、式1が処理され、falseだった場合、式2が処理されます。
if文の代わりに使える。
isEmptyメソッド
isEmptyは文字列がnullか"空文字"かをチェックします。
StringUtils.isEmpty(null); // true StringUtils.isEmpty(""); // true StringUtils.isEmpty(" "); // false StringUtils.isEmpty("meow"); // false StringUtils.isEmpty(" meow "); // false
isBlankメソッド(こんなメソッドもある!!)
isBlankは文字列が"空文字"かをチェックします
StringUtils.isBlank(null); // true StringUtils.isBlank(""); // true StringUtils.isBlank(" "); // true StringUtils.isBlank("meow"); // false StringUtils.isBlank(" meow "); // false
isValidメソッド
戻り値boolean型
isValid();は、SQL例外がスローされた後でも接続が有効かどうかをチェックするために使用されます。
接続が有効な場合は true です。接続が有効でないか、タイムアウトするまでに接続の有効性を特定できない場合は、false です。
public boolean isValid(int timeout)
コンスタントプールの図(大石さんに教えてもらいました)