2016-05-04

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を指定して画像を切り替えます。
- マウスオーバー時は、kabuki1.pngのopacityを"0"にして、kabuki_green.pngのopacityを"1"にします。
- マウスアウト時は、kabuki1.pngのopacityを"1"にして、kabuki_green.pngのopacityを"0"にします。

ボタンがふわっと変化するようなアニメーションを作るにはjQuery UIもインポートする。

参考書籍
jQuery最高の教科書 | 株式会社シフトブレイン著

2016-05-01

jQuery

コードのメモ

HTMLの読み込みを最後まで待つコード

HTMLを最後まで読み込んだ後に{ }の中の処理が実行される

$(function(){
  //HTMLを読み込んだ後に実行する処理
});

スタイルを変更するコード

"セレクタ"に該当する要素のCSSの"プロパティ"を"値"に変更する処理

$('セレクタ') .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オブジェクトの各要素を対象として要素を絞り込む

2016-04-29

セッション管理とSpring Bootの話

セッション管理(Servlet)

Webアクセスに使うHTTPにはセッションの概念がなく，そのままでは複数のWebページをまたがった一連の通信をセッションとして認識できません。そこでWebサーバーがクライアントとの間のセッションを認識し，処理の進行状態を把握するセッション管理のしくみが必要になります。このセッション管理を実現する一般的な方法に、Webサーバーが発行するセッションIDを利用するものがあります。これは、クライアントがWebサーバーにログインした際、セッションIDを発行し、以後、その情報をもとにクライアントとWebサーバーのセッション管理を行うものです。
セッション管理のしくみ f:id:marikooota:20160430114812p:plain セッション管理なしの場合、マロサーバは毎回の要求に対して独立にレスポンスを送るだけなので前回の要求内容を覚えていません。そのため、初回リクエスト時にマロサーバにリクエストを送っても、二回目以降のリクエストでは一回目のリクエスト内容を覚えていないので話がつながりません。7ちゃんブラウザは毎回初回リクエストのように全てを伝えなければなりません。 f:id:marikooota:20160430111609p:plain 一方セッション管理ありの場合、マロサーバは初回リクエストで発行したセッション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アプリケーションを構築できるようにしました。

2016-04-28

アスペクト指向

今日のまとめ

AOPとOOP

アスペクト指向(AOP)は、オブジェクト指向(OOP)の本質でない部分を抜き出したものです。簡単に言えば、AOPはOOPではカバーできない箇所を補います。複数のオブジェクトで同じ操作が散在してしまうことを「横断的関心事」といいます。AOPでは、横断的関心事をアスペクトというモジュールに分離、管理をすることで、OOPよりも処理の保守性と再利用性のレベルを高めることができます。

AOP･･･Aspect Oriented Programming
Aspect･･･横断的関心事
モジュール･･･一連の機能がひとまとまりになる複数の機能

f:id:marikooota:20160428010214p:plain

ロギング

ロギングとは、起こった出来事についての情報などを一定の形式で時系列に記録・蓄積すること。そのように記録されたデータのことを「ログ」(log)という。
Pointcut

ジョインポイントの集合のこと。条件にあうジョインポイントだけを抜き出すことも可能。
Interceptor
メソッドの呼び出しタイミングで、振る舞いを挿入すること。
- LogInterceptor
  メソッドの実行時間を測る。どのメソッドに時間がかかっているのかを把握することができる。
Advice
ジョインポイントに埋め込まれるアスペクトコードのこと。3つの種類がある。
- Around Advice
  ジョインポイントの前後で実行される。
- Before Advice
  ジョインポイントの前で実行される。
- After Advice
  ジョインポイントの後に実行される。2つの種類がある。
  After returning Advice
  ジョインポイントでの処理が正常に終了した後に実行される。
  Throws Advice
  ジョインポイントでの処理で例外が発生した場合に実行される。
JoinPoints

アスペクトコードが挿入できる位置を表したもの。例えば、メソッド呼び出しの前後などは、ジョインポイントになる。
Thymeleaf

Javaのテンプレートエンジンライブラリ。テンプレートエンジンというのはデータとテンプレートを合体させ、文字列を作る仕組みのことです。XML/XHTML/HTML5で書かれたテンプレートを変換して、アプリケーションのデータやテキストを表示することができます。

<html xmlns:th="http://www.thymeleaf.org" lang="ja">

<p th:text="${hoge}">

MVC

Model View Controller

フロントコントローラー

f:id:marikooota:20160429214145j:plain

フルスタック

Gradle

Groovy製のビルドツール。ビルド･･･ソースからアプリケーションを構築するまでの一連の流れ。
ビルドツール･･･ビルドに関わる各種処理を実行。

2016-04-27

論理削除とrollbackの話

今日のまとめ

論理削除と物理削除

物理削除はDELETE文を使って物理的にデータを削除してしまうことです。データベースから完全にレコードを削除してしまって、簡単には復元することはできません。(バックアップデータから復元しなければいけない)
対して論理削除は、間違って消してしまっても簡単に復元できます。データベースにフラグとなるフィールドを用意しておいて、削除するときに削除フラグを立てることで、表示時にそのデータを見せなくする方法です。UPDATE文を使います。
こんなときに論理削除を使います。

ユーザーからはデータがないように見せたいけど、実際のデータは消したくないとき
"削除した"データを検索したい
誤った操作をしたとき、すぐに元に戻したいとき

削除フラグ･･･「削除したものとして扱いますよ」というフラグ

rollback

トランザクションで行われた作業を元に戻すためのメソッドです。現在のトランザクションを終了して、保留中の変更をすべてデータベースにロールバックします。

7ちゃんの例 f:id:marikooota:20160426233521p:plain

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用語辞典ロールバック
 基本情報技術者講座

2016-04-26

楽観ロックと悲観ロック

今日のまとめ

楽観ロック

あるデータをAさんが更新処理をしている間にBさんも処理が可能です。でも、更新処理をAさんが先に完了してしまうと、Bさんの更新処理は失敗してしまいます。

7ちゃんとマロくんの例

f:id:marikooota:20160425231509p:plain

楽観ロックの場合、複数のユーザーが同時にデータを見ることができます。この例の場合、7ちゃんが更新中にマロくんはデータを見ることはできますが、7ちゃんが更新処理を先に完了してしまうと、マロくんは更新することはできずにエラーになってしまいます。また、更新したことは告げられないので、現在マロくんが見ているデータが最新のものであるかはわかりません。

悲観ロック

あるデータをAさんが処理していた場合、BさんはAさんの処理が終わるまで、そのデータに触ることはできません。悲観ロックはデータを読み込んだ時点から始まります。

7ちゃんとマロくんの例

f:id:marikooota:20160425233631p:plain

悲観ロックはユーザーが読み込みや更新処理を行っているときは、他のユーザーはそれらの処理を行えません。この例の場合、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)

コンスタントプールの図（大石さんに教えてもらいました）

f:id:marikooota:20160426004343j:plain

参考サイト条件演算子(三項演算子)
悲観もあれば楽観もある「トランザクション」の常識
 TECHSCORE(排他制御)

アニメーションをつかう

作ってみたボタン

HTMLのコード(ボタン部分)

CSSのコード(ボタン部分)

Java Scriptのコード(ボタンの部分)

コードのメモ

HTMLの読み込みを最後まで待つコード

スタイルを変更するコード

実行タイミングをコントロールするコード

アニメーション

その他メソッド一覧

セッション管理(Servlet)

Spring Boot

今日のまとめ

AOPとOOP

ロギング

Pointcut

Interceptor

Advice

JoinPoints

Thymeleaf

フロントコントローラー

Gradle

今日のまとめ

論理削除と物理削除

rollback

今日の復習!!

ReflectionUtils

Invoke

@AutoWired

pageContext

今日のまとめ

楽観ロック

悲観ロック

排他制御(ロック)

今日の復習!!

三項演算子の書き方

isEmptyメソッド

isBlankメソッド(こんなメソッドもある!!)

isValidメソッド

コンスタントプールの図（大石さんに教えてもらいました）