javascriptの基本操作【まとめ】

javascriptの基本操作

皆さんこんにちは、今日はjavascriptの導入から、基礎までをざっとやっていきたいと思います。この記事は自分用のまとめになりますので、説明をざっくりした感じで進めると思いますのでご了承ください。

javascriptの記述方法

●HTMLファイル内に記述する方法

→任意の場所に<script>タグを記述し、その中にコードを記述していく。

(例)

<script>

var x =10;

console.log(x);

</script>

●外部の.jsファイルにコードを記述して、その外部ファイルをHTMLファイルから読み込む方法

(例)HTMLファイルから読み込む

<script type="text/javascript" src="外部のjavascriptファイルのパス"></script>

+===============================================+

javascriptが実行されるタイミング

htmlファイルを上から順番に実行していき、スクリプトが出現した時点で、スクリプトを解析し始めます。ですので、スクリプトをhtmlが読み込み終わった後に、スクリプトを実行させたい場合は、意図的にタイミングをずらすか、記述位置を変更する必要があることを覚えておきましょう。

+===============================================+

変数の扱い

■変数宣言

var 変数名;

■変数の初期化を同時に行う場合

var 変数名 = 値 ;

■変数の扱いに関して意識しておきたい注意点

→予約語は使用不可、又予約語となりそうなものも使用は控えるべきである。

→先頭文字に0~9は使用不可

→大文字小文字は区別される

文字列の扱い

文字列とは、ダブルクォーテーション（またはシングルクォーテーション）で囲まれた文字の集まりです。

■文字列を囲むクォーテーションのいい例とエラーがでる例：同じ種類のクォーテーション同士は中に入れられないのがわかりますね。

”文'字'列”→正解

'文"字"列'→正解

"文"字"列"→エラー

'文'字'列'→エラー

+===============================================+

変数の出力と計算

■コンソールへの出力

console.log();

(例)

var price = 2000;

console.log(price);

→実行結果：コンソール画面上に、2000と出力される。

■ブラウザへの出力

document.write();

※タグも含めて出力できるが、エスケープシーケンス及びHTMLのタグは文字列として、（）内に入れて上げる必要がある。

(例)

var strGreeting  = 'HelloWorld';

document.write("<p>" + strGreeting + "</p>");

→実行結果：ブラウザ上にHelloWorldと出力される。

※+は文字列を連結させる、文字列連結演算子です。+はこの他にも算術演算子（数値と数値を加算する）や、単行演算子（++でインクリメントさせる)といった使い方もあります。

■代入演算子（=）

javascriptに限った話ではないのですが、＝は、右辺の結果を左辺に代入する役割を持ちます。

var x = 2+3;

これは、右辺の2+3の結果である数値の5を、宣言したxという変数に代入する作業です。この作業を変数の初期化といったり、変数に値を格納すると言ったりもします。

■算術演算子を用いた計算

var num ;

num = 2+3 ; // 5 【+=加算】

num = 8-2 ; // 6 【-=引き算】

num = 3*6 ; // 18 【*=掛ける】

num = 2/2 ; // 1 【/=割る】

num = 3%2 ; // 1【%=割った余りを求める】

+===============================================+ 

ビルトインオブジェクト（組み込みオブジェクト）の利用方法

ビルトインオブジェクトとは、javascript実行環境下にあらかじめ用意されているオブジェクトのことです。特定の処理を行うのに便利な変数や関数をまとめてあり、それらにアクセスしてその機能を利用することが出来ます。

例えば、数値の扱いに適したNumberオブジェクトや、計算処理に適したMathオブジェクト、日付等の扱いに適したDateオブジェクトがあります。

★実際にビルトインオブジェクトである、Dateオブジェクトを使ってみましょう。

※Date()オブジェクトは new演算子で、インスタンス化してあげる必要があります。

var dat = new Date(); // Dateオブジェクトをインスタンスとして生成

console.log( dat.toLocaleTimeString() ); // 何時何分何秒を取得してコンソール側に出力

Dateオブジェクトには、他にも便利な関数等が用意されています。

例えば、

.getDay() →曜日を0-6で取得

.getDate() →何日かを取得(1-31)

.getFullYear() →年を取得(4桁まで)

.getHours() →時を取得

.getMinutes →分を取得

.getSeconds →秒を取得

etc...

主要なビルトインオブジェクトの詳しい使い方はこちらを参照下さい。

Date - JavaScript | MDN

Math - JavaScript | MDN

Number - JavaScript | MDN

 +===============================================+

乱数を扱う

乱数をMathオブジェクトのrandom関数を使って生成してみましょう。

１～10の乱数を取得するには、

========================================

Math.floor(Math.random () * 10) + 1

========================================

→Math.random ()は、0以上~1未満の擬似乱数を実行結果として返します。

→Math.floor()は、簡単に言うと切り捨てを行います。引数が正でも、負でも、引数より小さい整数を返します。

※Math.floor()関数は、こちらに詳しい情報が掲載されています。

floor関数 - Mathクラス - JavaScript入門

ですので、1~xまでの乱数を取得したい場合は、

========================================

Math.floor(Math.random () * x) + 1

========================================

という具合になります。

+===============================================+

関数

関数とは、引数と呼ばれる値を受け取って、一定の規則を持った処理を加え、実行結果を返すものです。

関数は、宣言部分に処理を記載し、その宣言した関数を実行させるには、関数の呼び出しと言うものが必要になります。

■書式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【関数宣言（関数定義）】

function 関数名(仮引数1,仮引数2){

    処理を書くところ;

    return 戻り値;

}

※仮引数及び、return 戻り値;は処理によって必要がない場合もありますので、必須ではありません。

※function内の仮引数はvarで宣言する必要はありません。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【関数の呼び出し】

関数名(実引数1,実引数2);

■使用例

<script>

function addFunc(x,y){

    var result = 0 ;// 癖で初期化、0を代入する必要はありません。

    result = x+y ;

    return result ;

}

console.log( addFunc(3,6) );

</script>

→実行結果：コンソール画面に、9と表示されます。

解説：addFuncという名前の関数を作り、その関数は仮引数としてx,yという2つの値を受け取れるようにしています。そして、実引数から送られてきた値が格納されている2つの仮引数同士を加算して、ローカル変数として、用意した変数resultに格納します。そのresultという変数の中身（値）を実行結果として、returnを使い戻り値として返します。よって、コンソール上には9と表示されるという感じです。

即時関数

先程ご紹介した関数は、宣言と、呼び出しを分けているものでしたが、即時関数は、宣言と呼び出しを一緒にした関数となります。ですので、宣言と同時に呼び出される関数とも言えます。また関数名を設定しないので、即時関数は、無名関数の一種であるともいえます。

■書式

(function (仮引数1,仮引数2){

    処理を書く;

    return 戻り値 ;

})(実引数1,実引数2);

→関数に名前が無いのが特徴で、実引数を渡して、仮引数で受取り、処理を行った結果を返します。関数定義そのものを（）で囲んで、最後に();と言う形で実引数を渡してあげる事ができます。

■使用例

<script>

var result1 ;

result1 = ( function (x,y){

    var result2 = 0 ;// 癖で初期化、0を代入する必要はありません。

    result2 = x+y ;

    return result2 ;

} )(3,6);

console.log( result1 );

</script>

無名関数

無名関数は関数名を持たない関数です。関数定義自体を変数に代入することが出来ます。その関数定義が代入された変数は、関数のように呼び出すことが出来ます。

■使用例

var result1 ;

result1 =  function (x,y){

    var result2 = 0 ;// 癖で初期化、0を代入する必要はありません。

    result2 = x+y ;

    return result2 ;

}

var ans = result1(3,6);

console.log( ans );

→実行結果：コンソール画面に9と表示される。

+===============================================+ 

警告ダイアログの表示

■書式（※window.は省略可）

window.alert("警告ダイアログに表示する文字列");

OKのみを問います。スクリプトの処理がアラートの箇所でストップしてしまう点に注意が必要です。

確認ダイアログの表示

■書式（※window.は省略可）

window.confirm("確認ダイアログに表示させる文字列");

OKorキャンセルを問います。OKが押されると、trueという値を返します。キャンセルが押されると、falseという値が返されます。

入力ダイアログの表示

■書式（※window.は省略可）

window.prompt("入力ダイアログに表示させる文字列","初期値");

ユーザーに入力させる為のダイアログを表示させます。警告ダイアログと同じく、スクリプトの処理が入力ダイアログの箇所で、止まりますので注意が必要です。

指定したURLにジャンプする

■書式

 location.href = "URL" ;

■使用例

<script>

    tof = confirm("googleのページに移動してよろしいですか？");

    if( tof == true ){

        location.href = "http://www.google.co.jp/" ;

    }

</script>

+===============================================+

配列

【配列の宣言と初期化】

①配列の要素数を指定しないで宣言する場合

var ary = new Array();

var ary = [];

②配列の要素数を指定して宣言する場合(今回は3つ分作るという想定です)

var ary = new Array[3];

var ary = [,,];

③配列の宣言と初期化を同時に行う場合その1

var ary = new Array("東京","大阪","北海道");

④配列の宣言と初期化を同時に行う場合その2

var ary = ["東京","大阪","北海道"];

【配列の参照方法】

 aryという配列変数のインデックス番号0のところに、値として、東京という文字列が格納されます。同様にインデックス番号1のところに、大阪という文字列が値として格納されます。アクセスする場合は、ary[0]というように、インデックス番号（添字とも言う）を指定して値を参照する。

+===============================================+

連想配列

連想配列とは、インデックス番号の代わりに、キー名を参照して値にアクセスする配列。

※値は文字列であれば、シングルorダブルクォーテーションで囲む必要があります。

【連想配列の宣言と初期化】

①var 連想配列名 = { キー1 : 値1 , キー2 : 値2 , キー3 : 値3 } ;

②var 連想配列名 = new Object();←new Object();の部分は、new Array();でも可

　連想配列名['キー名'] = 値 ;

【連想配列の参照方法】

①ドットシンタックス記法

連想配列名.キー名

↓

対応するキー名の値を取得

②ブラケット記法

連想配列名[ 'キー名' ]

↓

対応するキー名の値を取得

+===============================================+ 

繰り返し処理

①for文

■書式

for(初期化;条件;変化式){

    繰り返される処理;

}

→条件がtrueなら処理を実行する。初期化は最初の1回目のみ通る。条件式がfalseになると、繰り返し処理をやめてループを抜ける。

■配列と相性が良いのでこのような使い方も出来ます。for文で使う変数と、配列の添字を対応させることで、配列の要素数分繰り返すことが出来る。

<script>

var ary = new Array("教育","勤労","納税");

document.write("<p>国民の三大義務とは");

for(var i = 0 ; i < ary.length ; i++ ){

    document.write( "[" + ary[i] + "]" );

}

document.write("である。</p>");

</script>

→実行結果：ブラウザ上に、国民の三大義務とは、[教育][勤労][納税]である。と表示される。

②while文

■書式

while(条件式){

    処理;

    (変化式;)

}

条件式がtrueなら、処理を繰り返す。変化式がないと、無限ループとなり危険な場合があります。

★for文とwhile文の特徴：for文、while文は条件式を評価してから1回目の繰り返しを行います。その為、場合によっては、一度も繰り返し処理を行わない場合がありますが、次にご紹介する、do{}while();という繰り返し命令は、必ず1回処理を行ってから条件式を評価します。この違いを認識した上で、続きをやっていきましょう。

③do...while文※while(条件式)の後のセミコロンのつけ忘れに注意して下さい。

■書式

do{

    処理;

}while(条件式);

又は、

do

    処理;

while(条件式);

④for...in文

■書式

for( var キー格納変数 in 連想配列名 ){

    キー分だけ処理を繰り返す。

    キー1,キー2,キー3...と順番にループ毎に、キー格納変数にキーを格納していく。

    値にアクセスする方法↓

    連想配列名[キー格納変数]; ※注意：キー格納変数にはクォーテーション不要

    ※for-in文の中でドットシンタックス記法を使うと挙動が変になりました。だめっぽいです。

}

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

■【連想配列の復習】

値は文字列であれば、シングルorダブルクォーテーションで囲む必要があります。

【連想配列の宣言と初期化】

連想配列とは、インデックス番号の代わりに、キー名を参照して値にアクセスする配列。

①var 連想配列名 = { キー1 : 値1 , キー2 : 値2 , キー3 : 値3 } ;

②var 連想配列名 = new Object();←new Object();の部分は、new Array();でも可

　連想配列名['キー名'] = 値 ;

【連想配列の参照方法】

①ドットシンタックス記法

連想配列名.キー名

↓

対応するキー名の値を取得

②ブラケット記法

連想配列名[ 'キー名' ]

↓

対応するキー名の値を取得

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

■continue文

[ 書式 ]

continue;

continueが実行されると、continue;より下の処理を実行せずに、次のループ処理に入る。

■break文

[ 書式 ]

break;

breakが実行されると、実行中のループから抜ける。

+===============================================+

分岐処理(if文/switch文)

■if文書式（条件式の評価により、処理を分岐させる）

if(条件式){

    条件式がtrueの時に通る処理;

}

else if(条件式2){

    条件式がfalseだが、条件式2がtrueの時に通る処理;

}

else{

    条件式と条件式2がfalseの時に通る処理;

} 

■switch文書式（評価式と合致するcaseの値を探して、合致したらそのcase内の処理を実行して抜ける。どのcaseの値とも合致しなかった場合は、defaultの処理を通る。）

switch (評価式){
  case 値1:
    実行する文;
    break;
  case 値2:
    実行する文;
    break;

  ~~省略~~

  default:

    実行する処理;
    break;
}

// 最後のbreakは必要ないと言われればそれまでですが、癖で付けています。

■使い分け

どっちを使おうか迷ったら、二分岐程度ならif文、多分岐ならswitch文を使おうという具合に、最初のうちは気軽に考えておいてもらっても大丈夫です。実行速度やソースの可読性を考えるのは使い慣れた頃でも全然大丈夫です。

+===============================================+ 

グローバル関数

ParseInt関数

ParseInt("文字列")→文字列を整数に変換します。

ParseInt("文字列",基数)→基数で指定した進数で、文字列を整数に変換します。

※文字列の先頭の文字が、数値に変換できる文字ではない文字だった場合、NaNを返します。（+,-,A~F,数なら変換可能とみなされる）

※基数には、2,8,10,16を指定できます。

【使用例】

var x = ParseInt("5"); // 変数xに数値の5が代入されます。

※また、第二引数には基数を指定して、変換する数値の進数を指定できます。

var x = ParseInt("11",16); // 変数xに11を16進数として解釈して、数値の17を代入する。

ParseFloat関数

簡単にいえば、小数点も扱える、ParseInt関数です。役割は、同じく文字列を数値に変換します。

ParseFloat("文字列")→文字列を数値に変換します。（小数点も扱える）

【使用例】

var x = ParseFloat("18.55"); // 変数xには、数値の18.55が代入される。

isNaN関数

■書式

isNaN(評価する値);

isNaN関数とは、評価する値が、NaNであれば、trueを返し、それ以外ならfalseを返します。

【前提として必要な知識】

変数を初期化していないと、中の値は文字列のundefinedでしたね。

そして、undefinedは、数値のNaNになります。NaNは非数を表します。

isFinite関数

■書式

isFinite(評価する値);

isFinite関数は、評価する値が有限であるかを調べます。有限であれば、trueを返し、無限であれば、falseを返します。

+===============================================+

イベントハンドラ

イベントハンドラとは、指定したイベントを検出し、そのイベントに対するjavascriptの処理を呼び出すものです。また、この仕組みをイベント駆動型モデルと言ったりします。

ブラウザ上の部品（要素）に属性のように記述することにより実現します。

主要なイベントハンドラはこちらに詳しく記載されていますので、詳しく知りたい方はこちらをオススメします。

■書式

<イベントの対象となる要素 イベントハンドラ="javascriptの処理;" >

【主要なイベントハンドラの実例】

①body内が全て読み込まれたら、コンソール画面にページが読み込まれましたと表示させる場合

<body onload="console.log('ページが読み込まれました。')"></body>

②選択項目が変更されたタイミングでコンソールに項目が変更されましたと表示させる場合

<select onchange="console.log('選択項目が変更されました。');">

    <option value="りんご">りんご</option>

    <option value="いちご">いちご</option>

    <option value="みかん">みかん</option>

</select>

③マウスホバーとマウスアウトを検知する例。

<p><img src="img/xx.jpg" onmouseover="console.log('画像にマウスが乗りました');" onmouseout="console.log('画像からマウスが離れました');" /></p>

 ④フォーカスが当たったときと、フォーカスが外れた時を検知する例

<p><input type="text" onfocus="console.log('フォーカスが当たりました');" onblur="console.log('フォーカスが外れました');" /></p>

他にもクリックを検出するonclickといったイベントハンドラがあります。

 +===============================================+

window.openでサブウィンドゥを表示する

■書式

window.open('サブウィンドゥのURL','サブウィンドゥの名前','オプション');

■window.openについての使い方はこちらのURLからどうぞ

新しいウィンドウを開く(open) - ウィンドウ(window) - JavaScript入門

■使用例：サブウィンドゥをボタンにより、開いたり、閉じたりできるコードです。

事前準備として、indexJsTimer.htmlというページを用意しておきましょう。あるいは、なにか他のページのURLを入れても大丈夫です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascriptOpen</title>

<script type="text/javascript">
var subWindow;

function subWindowOpen(){
 subWindow = window.open('indexJsTimer.html','サブウィンドウ名','width=600,height=300,scrollbars=no,location=yes');
 console.log('サブウィンドゥを開きました。');
}
function subWindowClose(){
 if( subWindow && !subWindow.closed ){
  subWindow.close();
  console.log('サブウィンドゥが閉じられました。');
 }
}
</script>
</head>

<body>
    <div id="container">
        <input type="button" value="サブウィンドゥを表示する" onclick="subWindowOpen()" />
        <input type="button" value="サブウィンドゥを閉じる" onclick="subWindowClose()" />
    </div><!-- /container -->
</body>
</html>

■補足

subWindow変数の中身が閉じられている状態のときの値が subWindow.closeです。ですので、subWindow変数の中身の値が、subWindow.closedではない時（つまりサブウィンドゥが開いてる時）のみ、サブウィンドゥを閉じる処理を実行してあげれば安全となります。

 +===============================================+

window.setTimeoutで一定時間後に処理を行う

■書式

window.setTimeout("実行する処理",ミリ秒指定した時間);

ミリ秒指定した時間後に、1回だけ処理を実行する。

 +===============================================+

window.setIntervalで一定時間毎に処理を行う

■書式

window.setInterval("実行する処理",ミリ秒指定した時間);

又は、

window.setInterval(

    function(){

        実行する処理;

    } ,ミリ秒指定した時間

);

ミリ秒指定した時間毎に、処理を実行する。

■使用例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>javascriptTimer</title>
<script type="text/javascript">
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// 【 Javascript講座 】
// 　　１：一定時間毎に処理をするsetInterval関数を使ってみよう
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

var timerId;

window.onload = function(){
 timerId = setInterval(
  //setInterval関数の第一引数に関数を使用
  function() {
   var dat = new Date();
   document.getElementById('result').innerHTML = dat.toLocaleTimeString();
  },
  //setInterval関数の第二引数に秒数を指定
  1000
 );// setInterval関数の終了
};// window.onload = function(){};の終了
</script>
<style>
body{
 background:#000;
}
#result{
 width:100%;
 background-color:#000;
 line-height:200px;
 text-align:center;
 font-size:52px;
 color:#FFF;
}
</style>
</head>

<body>
    <div id="container">
        <div id="result">
        </div><!-- /result -->
    </div><!-- /container -->
</body>
</html>

 +===============================================+

DOM

DOMとは、DocumentObjectModelの略で、HTML等を、ノードと呼ばれる階層的な構造として識別し、javascript等のプログラミング言語やスクリプトから扱いたいノードを指定し、操作できるようにする仕組みを提供するAPIです。

DOMを理解するのに最適な参考サイト

DOMを利用してノードを取得したり操作する基本が学べるサイトを紹介致します。以下のURLのサイトはwindowオブジェクトから丁寧に解説されてありますので、是非ご参考いただければ幸いです。

 techacademy.jp

 +===============================================+

最後に

いかがでしたでしょうか、javascriptの基本をまとめてみたらこんなに長くなってしまいました。皆様の学習の一助となれば幸いです。ではまた次回：D

 

jQuery基礎 基本的な使い方【保存版】

jQueryの基本的な使い方【保存版】

皆さんこんにちは、迅犬です。今回はjQueryの基本的な使い方を見ていきましょう。

jQueryの導入方法をまず知りたい！という方は以下の記事をご参照いただければと思います。

webdesignzin.hateblo.jp

jQueryの基本構文

jQueryの基本的な書き方は以下の通りです。

==================================

 $("セレクタ").メソッド

==================================

端的に言うと、

$("セレクタ")でHTML上の要素を指定して、

メソッドと呼ばれるもので、セレクタによって指定した要素に対して、jQueryの命令をかけてなんらかの操作をする。

という流れになります。

jQueryのお約束として覚える事

 jQueryのコードは、大抵の場合、ページの読み込みが終わった後に実行したいため、以下のコード内に書く必要があります。（※例外有り）

==================================

$(document).ready(function(){

     ■ここにjQueryのコードを記述していく。

});

↓（※省略形として以下のように書いた場合でも同じ意味となります。）

$(function(){

    ■ここにjQueryのコードを記述していく。

});

==================================

上述したコードの内側にjQueryのコードを記述することにより、ページの読み込み後にjQueryのコードを読んでくれます。

jQueryの基本的なセレクタ

jQueryはセレクタと呼ばれるもので、要素を指定して、メソッドでなんらかの操作すると言いましたが、実際にどのように要素を指定するのか、セレクタについて少し詳しく見ていきましょう。

名称	特徴	書き方	効果
要素セレクタ	単純に要素名から指定する	$("要素名")	要素名に合致する要素を指定する
idセレクタ	id名から要素を指定する	$("#id名")	指定したid名と合致する要素を指定する
classセレクタ	class名から要素を指定する	$(".class名")	指定したclass名と合致する要素を指定する
子孫セレクタ	半角スペースで区切って子孫要素を指定する	$("A B")	Aの子孫要素であるBを指定する
グループセレクタ	カンマで区切って複数要素を指定する	$("A,B")	A要素及びB要素を指定する
子セレクタ	親要素と子要素を大なり記号で結んで親要素の直下の子要素のみを指定する	$("A>B")	A要素の子要素Bを指定する
隣接セレクタ	Bの要素の中で、基準となるAの次に出現する要素Bを指定する（※Bは複数並んでいる兄弟要素） ※AとBは半角プラスで結ぶ。	$("A+B")	Bという複数並んでいる要素の中で、基準となる要素Aの次に出現する要素Bを指定する（※Bは複数並んでいる兄弟要素）
間接セレクタ	Bの要素の中で、基準となるAの後続する要素Bすべてを指定する（※Bは複数並んでいる兄弟要素） ※AとBは半角チルダで結ぶ。	$("A~B")	Bという複数並んでいる要素の中で、基準となる要素Aの後に出現する要素Bすべてを指定する（※Bは複数並んでいる兄弟要素）
first-child疑似クラス	Aの中で最初の要素を指定する 要素の後にコロンで繋げてfirst-childを記述する	$("A:first-child")	要素Aの中で最初の要素Aを指定する
last-child疑似クラス	Aの中で最後の要素を指定する 要素の後にコロンで繋げてlast-childと記述する	$("A:last-child")	要素Aの中で最後の要素Aを指定する
否定疑似クラス	特定の条件以外の要素Aを指定する 要素の後にコロンで繋げてnotと記述する ※特定の条件には擬似クラスを使用しても良い、例えば、li:not(:fisrt-child)と記述すると、最初以外のliを指定するといった具合になります。	$("A:not(特定の条件)")	特定の条件以外の要素Aを指定する

他にもたくさんの便利なセレクタが存在しますが、基本的には上記のもので対応できますので、必要になったら調べて使うといったやり方をオススメします。

例えば、アニメーション中の要素を指定できる$("要素A:animated")といったものや、指定した番号の要素を指定できる$("要素A:nth-child(番号)")、それから属性セレクタ等はよく使われますので是非覚えておきましょう。

セレクタに関してうまくまとめられているページがございましたので、より詳しく知りたい方は、以下のURLの記事を参考にするといいと思います。特に隣接セレクタ（+）、間接セレクタ(~)等は、使い方に一癖ありますので、実例を通して理解したほうが得策です。

【jQuery】要素を指定するセレクタの使い方 まとめ | Web制作会社スタイル

セレクタとメソッドを使って実際に操作してみよう

個人的に最も簡単なメソッドの例として、cssメソッドというメソッドを使って見ましょう。今回は、<p>という要素をセレクタで指定して、cssメソッドを使って文字色をredに変えてみたいとおもいます。ともあれまずは、cssメソッドの使い方を下記に記載しておきます。

==============================================================

■cssメソッドの使い方

$("セレクタ").css("プロパティ名","プロパティ値");

これは、セレクタにより指定された要素に対して、その指定された要素がもつプロパティ名のプロパティ値を、cssメソッドで指定したプロパティ値に変更する。という操作になります。また、

$("セレクタ").css("プロパティ名");

という風に、プロパティ名だけを指定すると、そのプロパティ値を取得することも出来ます。

==============================================================

では、実際にcssメソッドを使って、要素pに対して文字色をredに変えていきましょう。

$(function(){

    $("p").css("color","red");

});

以上です。これにより、html上のp要素全ての文字色がredに変更されます。

このように、セレクタで要素を指定して、その指定した要素になんらかの操作をメソッドを使って加える。といった流れが、jQueryの基本的な使い方となります。

是非皆さんも、この基本を押さえつつ、これから色々なメソッドやセレクタを学び、jQueryを使って、リッチな動的コンテンツをwebサイトに組み込めるようになることを祈っております。では、また次回( ˘ω˘)

photoshop基礎 整列の基本操作

photoshopにおける整列

photoshopで整列機能を使用するには、基準となる選択範囲が必要です。まず選択範囲で基準を指定して、選択したレイヤーを整列させるというイメージで、一緒にフォトショップでの整列を行っていきましょう。

イラストレーターとフォトショップの整列機能の違い

イラストレーターでは複数オブジェクト選択後に、キーオブジェクトを指定してから、キーオブジェクト以外をキーオブジェクトを基準として、整列機能を使用することが出来ました。一方フォトショップの整列機能は、キーオブジェクトの代わりに、選択範囲がキーオブジェクトのような役割を果たします。

実際にやっていきましょう。

シェイプツールで丸を適当に描いてみましょう

この描画されたグレーの丸を整列させて、ドキュメントの中央に配置させたいのですが、移動ツールに持ち替えても、まだ上のオプションバーの整列パネルが灰色で使用できない状態となっています。

この理由は、整列を行うための基準が無いためです。

ですので、基準となる選択範囲を指定してあげなければ、整列を行うことはできません。

フォトショップの場合、この整列の基準となるのが、先程ご説明したとおり、選択範囲となるので、基準となる選択範囲を作っていきましょう。

今回は、ドキュメント全体を基準として、グレーの丸が描かれたレイヤーを中央に配置したいので、ドキュメント全体を選択範囲化させていきましょう。

長方形選択範囲ツールを選び、ドキュメント全体をドラッグして選択範囲化しましょう。

次に整列させたいレイヤーを選びます

今回はグレーの丸（シェイプ）を移動させたいので、そのシェイプが描画されているレイヤーを選びます。

そしたら、移動ツールに持ち替えます。

移動ツールに持ち替えることで、オプションバーに整列パネルが出現します。

下に画像で図解してみました。

お待たせしました、整列させましょう

整列パネルのボタンの

垂直方向中央揃え（下記画像のアイコン）と

水平方向中央揃え（下記画像のアイコン）を押すと、

グレーの丸（シェイプ）が、選択範囲を基準として、ドキュメントの中央にきましたね。

このようにして、選択範囲を作ってから、移動ツールに持ち替えて、整列をする。この流れをしっかりと押さえておきましょう。

今度はシェイプを基準にして文字を整列させてみましょう

先ほどと流れは一緒なので肩の力を抜いて、一緒にやっていきましょう。大事なのは、①選択範囲を指定して基準を作る。②整列させたいレイヤーを選んで整列させる。この流れさえわかってしまえば簡単です。

では、グレーの円の真ん中に文字を整列させて再配置していきます。

先程の続きからになりますので、まずは、選択範囲をCtrl+Dで一旦解除しておいてください。今下記のような状態になっていると思います。

では、文字ツールに持ち替えて、なんでもいいので文字を描画していきましょう。

私は、”シェイプを基準に文字を整列させる”という改行された文字を打ってみました。みなさんも好きな文章で大丈夫ですよ。

そしたらシェイプが描画されているレイヤーサムネール（グレーの円が描画されているレイヤーのサムネイル）をCtrl押下状態でクリックして、描画されているグレーの円の形で選択範囲を作りましょう。

円の形で選択範囲が作れましたね。ということは、円の選択範囲を基準として、他のレイヤーに描画されているものを整列出来る状態になった。ということです。

では、この円を基準として、文字を整列させていきましょう。

①整列させたい文字のレイヤーを選びます。

②移動ツールに持ち替えます。

③整列パネルから整列操作を行います。

すると、下記のような状態になりますね。

円の真ん中に文字を整列させて、再配置させる事ができましたね。やったね！

以上になります。皆さんお疲れ様でした。フォトショップの整列は、イラストレーターと少しやり方が違うので最初の内は混乱してしまうと思いますが、もう大丈夫ですね！

ではまた次回( ˘ω˘)/

photoshop基礎 特定の色域部分にのみ加工をする

ある特定の色の部分だけを加工する方法

皆さんこんにちは、今回はフォトショップを使って、特定の色を持った一部分のみを加工したい場合に、非常に有効な選択範囲を作る方法と元画像をそのままにその選択範囲化した部分の加工をやっていきます。選択範囲は特定の色部分のみを抽出して選択範囲化させる色域指定を使っていきましょう。

色域指定とは

ある特定の色部分を選択範囲化するものです。

例えば、黄色のガウチョパンツと、紺色のガウチョパンツと、茶色のガウチョパンツが一枚になった商品画像があったとします。上司の方から、「この紺色のガウチョパンツだけ彩度を少し上げてもらいたいんだけど、、、」等、特定の色のものだけを加工したい。そんな時に、紺色のところ（ある一部分の色）だけを加工したいから選択範囲をその部分で作りたい、といった場合に非常に有効です。

実際に使うとこんな感じで出来ます

色域指定から選択範囲を作って、加工すると実際にはこんな感じの作業が可能になります。実際に写真を使って見てみましょう。

before:　NAVYのガウチョパンツのみ色を暗い感じの緑に変えたい。

after:　NAVYのガウチョパンツの色を暗い緑色に変更。

では、実際に作業の流れを一緒にやっていきましょう。

色域指定から加工までの実際の作業工程

作業01：ファイルから加工したい画像を開く

今回は業務を想定して、変形を行っても画質を崩さないスマートオブジェクトで素材を開いてみましょう。もちろん実際に業務で行う場合はバックアップとしてコピーをとっておくということも大切です。

●ファイル→スマートオブジェクトとして開く→画像を選択する

画像が読み込めましたね。

作業02:色域指定で紺色の部分を選択範囲化させる

●選択範囲→色域指定　を選択します。

●色域指定ダイアログボックスがでたら、スポイトツールを選んでいる状態で（保存ボタンの下にあるスポイトアイコンの一番左）、画像の紺色の部分をクリックします。

これにより、紺色の部分をこれから選択範囲として指定する部分ですよとフォトショップに命令をかけています。

●次に、さらに選択範囲化する色域をしぼるために、スポイトツールの＋マークがついたものに持ち替えましょう。

プラスマークの入ったスポイトツールに持ち替えたら、色域指定ダイアログボックスのサムネイルの方の白い部分（これから選択範囲化される予定の部分）を、プラスマークの入ったスポイトツールでクリックします。

※色域指定ダイアログボックス内の白黒のサムネイルは、白の部分がこれから選択範囲化される予定の部分になります。一方黒の部分は選択範囲化されない部分になります。

そうしましたら、許容量の数値を少し下げて、他の色の部分を選択範囲化しないように調整します。

許容量を下げすぎて、紺色の選択範囲化する部分が少し削れていたので、数値を少しあげます。調整が終わったらOKを押しましょう。

OKを押すとこのように紺色の部分のみが選択範囲化されていると思います。成功です。あとは、この色域指定で選択した部分を加工していきましょう。

作業03:色域指定で選択した部分を加工する

 さて、色域指定により選択範囲化が終わったので、この紺色の部分（選択範囲）を加工していきましょう。今回はもとの画像の色自体は変えずに、新規調整レイヤーを使用して紺色の部分を暗めの緑に変えていきます。彩度等を変える方法もこの方法でいけますよ。

まずは、右下の塗りつぶしまたは調整レイヤーを新規作成アイコンを選択しましょう。

これですね。半月マーク( ˘ω˘)

そしたら、色相・彩度を選択してください。

そうしましたら、色相・彩度を変更するためのダイアログボックスがでますので、色相と明度を少し変えてあげれば、加工完了です。

この新規の調整レイヤーはクリッピングマスクのようなものなので、もとの画像の上に新たに調整レイヤーというもので選択範囲化された部分だけを加工できます。なのでこの調整レイヤーを非表示にしてみるともとの画像自体は変わってないことがわかりますね。下記画像参照。

以上になります。お疲れ様でした。

本日の振り返り

いかがでしたでしょうか、この方法は特定の色の部分だけを加工したい＋もとの画像はそのままにしたい場合に非常に有効なやり方になりますので、是非覚えておきましょう。 ちなみにweb向けのフォトショップの環境設定の解説も先日行いましたので、そちらも合わせてご覧いただければ幸いです。

webdesignzin.hateblo.jp

色域指定に関してはこちらを参考に致しました。もっと詳しく知りたいという方はこちらも合わせてどうぞ。

フォトレタッチの極意２：色域指定を使って選択範囲を作る | Adobe Creative Station

では、また次回( ˘ω˘)

jQueryをこれから使いたい人のために~jQuery入手＆導入編~

jQueryとは

簡単に特徴をまとめておきます。

javascriptをより少ない記述でかけるようにしたjavascriptライブラリです。

javascriptのライブラリは他にもありますが、一番ポピュラーで浸透しているものと言っても過言では無いでしょう。

jQueryを入手する

jQueryのサイトにアクセスします。↓こちらからでも大丈夫です。

jquery.com

オレンジ色のDownload jQueryボタンを押しましょう。最新版のjQueryのダウンロードページにいきます。

下記のようなページにいけましたら、

Download the compressed,production jQuery 3.1.1をクリックして最新バージョンのjQueryの圧縮版を入手しましょう。

※compressed=圧縮された(ファイル)＝つまり軽いです。中身をいじったりする必要は無いので、改行等が取り除かれている圧縮版を使いましょう。

※jQuery 3.1.1はjQueryのバージョンです。常にアップデートされていますので、最新版をダウンロードするようにしましょう。

入手したjquery-3.1.1.min.jsというファイルはjsという名前のフォルダを作って中にしまっておきましょう。

以上が、jQueryの入手です。続いて、このjQueryの圧縮ファイルをhtmlの中で読み込んでjQueryを使用できる状態まで持っていきましょう。

HTMLにダウンロードしたjQuery本体を読み込ませる

index.htmlと同じ階層に先程ダウンロードした圧縮版jQuery本体を入れたjsフォルダを配置しておきます。続いて、ヘッダの中に以下のコードを記述して、jsフォルダの中のjQuery本体の圧縮されたjsファイルを読み込みます。このファイルが読み込まれた時点で、jQueryの記述が可能になります。

 <script src="js/jquery-3.1.1.min.js"></script>

jQueryをbodyタグ内に記述してみる

jQueryの本体はもう読み込まれているので、jQueryを記述することが可能になっています。実際にjQueryをhtmlファイル内に記述してみましょう。

<body>

<script>

jQueryのコードを記述する場所

</script>

</body>

htmlファイル内にjQueryのコードを書く場合は<script>タグで囲んだ範囲内にjQueryのコードを記述します。

jQueryを外部ファイルの.jsに記述してみる

jsフォルダ内にscript.jsというjavascriptファイルを用意します。この用意したjavascriptファイルにjQueryのコードを記述して、ヘッダで本体の読み込みが終わった後に、この外部ファイルをヘッダから読み込みます。

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/script.js"></script>

※jsファイル内では、jQueryのコードを<script>タグで囲む必要はありません。

実際にこのような感じで記述していきます

今はコードの意味がわからなくても大丈夫です。

bodyタグ内に記述する例。↓

<script>

$(function(){
  $("#panel-btn").on('click',function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

</script>

外部.jsファイル内にjQueryのコードを記述する例。↓

$(function(){
  $("#panel-btn").on('click',function() {
    $("#panel").slideToggle(200);
    $("#panel-btn-icon").toggleClass("close");
    return false;
  });
});

以上です。いかがでしたでしょうか、jQueryは少ない記述で、比較的容易にサイトに対して、動的なコンテンツを実装することができます。是非皆さんもjQueryを使って様々な動的コンテンツを作ってみてはいかがでしょうか。ではまた次回。

photoshopデザインカンプ制作のための環境設定(cs6)

デザインカンプ制作におけるphotoshop環境設定

イラストレーターでのワイヤーフレーム制作同様、1pxにこだわる作業をしたいためピクセルベースの環境設定をフォトショップにおいてもやっていきたいと思います。

環境設定の単位をピクセルベースにする

①編集→環境設定→単位・定規→単位→定規をpixelに、文字をpixelに変更する

②編集→環境設定→ガイド・グリッド・スライス→グリッド線を10px、分割数を10に変更する

定規やグリッドを表示させる

③表示→表示・非表示→グリッドにチェックを入れる。

④次に、表示→エクストラにチェックを入れる。

これで、環境設定で指定したグリッド線が表示される状態となります。

さらに定規も表示させておくと便利なので、表示→定規にチェックを入れて、定規も表示させておきましょう。これで下記画像のような状態になると思います。

環境設定以外で気をつけるポイント

⑤シェイプツールを使用する際は、エッジを整列にチェックを入れる。（シェイプの幅高さが小数点の時に発生する境界線のぼやけを防止するため。）

⑥新規ドキュメント作成時、カラープロファイルをsRGBに。

以上になります。

こちらでも分かりやすく解説されておりますので、ご参考までに。

blogs.adobe.com

メディアクエリによるレスポンシブ対応

メデイアクエリによるレスポンシブ対応の前準備

レスポンシブ対応（マルチデバイス対応）させるには、必ずビューポート設定を行っておきましょう。

<meta name="viewport" content="width=device-width">

なんでビューポート設定が必要なのでしょうかという方はこちらを参考にしてみると納得していただけると思います。

表示サイズ調整の要となるViewportの設定 - Webデザイン仕事で役立つ54のアイデア | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive -

メディアクエリによるレスポンシブ対応

今回は、メディアクエリによるレスポンシブ対応の基本をやっていきましょう。

メディアクエリによる、レスポンシブ対応とは、デバイス画面幅に応じて、適用させるスタイルシートを制御することです。

つまり、指定した画面幅に応じて、適用させるスタイルシートを、１つのCSSファイル内で切り替える手法です。

例えば、960px以上の画面幅であれば、960px以上の画面用に用意したCSSを適用させて、959px以下の画面幅のときは959px以下の画面用に用意したCSSを適用させて、767px以下の画面幅の時は767px以下の画面用に用意したCSSを適用させる。といった具合です。

実際には、

@media screen and ( max-width:○○px ){

○○px以下が最大幅として適用させるCSSを記述。

＝つまり、画面幅が○○px以下の時に適用させるCSSを記述

}

重要な特徴として、スタイルシートは上の記述から継承される事を覚えておきましょう。たとえば、PC用のスタイルシートでfloat:left等を行った要素は、メディアクエリでスタイルシートを切り替えても、そのまま設定したプロパティの値が継承されるので、もしタブレット用のCSSでその値を切りたい（floatを解除したい）場合はfloat:none;と指定してプロパティの値をデフォルト値に戻す必要が出てきたりします。

/*
-------------------------------------------------
 PC用のCSS(960px以上の時に適用させるcss)
-------------------------------------------------
*/

　※ここにPC用のスタイルシートを記述。

/*
-------------------------------------------------
 タブレット用のCSS(959px以下の時に適用させるcss)
-------------------------------------------------
*/
@media screen and ( max-width:959px ){

　※ここにタブレット用のスタイルシートを記述。

}

/*
-------------------------------------------------
 スマートフォン用のCSS(767px以下の時に適用させるcss)
-------------------------------------------------
*/
@media screen and ( max-width:767px ){

　※ここにスマートフォン用のスタイルシートを記述。

}

※これはPC用のスタイルシートから考えるメディアクエリの手法です。次はスマートフォンのレイアウトから考えていく（モバイルファースト）手法をやっていきましょう。

モバイルファーストという考えを用いたメディアクエリ

こちらは、ファイルを分けた場合でご紹介します。

画面サイズが767px以下の時style.cssを読み込んで、画面サイズが768px~959pxの時にさらにstyleTab.cssを読み込んで、画面サイズが960px以上の時にstylePc.cssを読み込んでいく。と言った具合に、スマートフォンのスタイルシートを基準として考える手法もやっていきましょう。

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/styleTab.css" media="only screen and (min-width:768px)">
<link rel="stylesheet" href="css/stylePc.css" media="only screen and (min-width:960px)">

適切なブレイクポイント

画面サイズを切り替えるポイントである、959pxなどと言ったブレイクポイントと呼ばれる数値は、主流となっているスマートフォンや、タブレットの解像度、画面サイズにより適切な値が時代により変化します。なので、最初のうちは書籍などにのっている数値を参考にサイト制作を行っても大丈夫ですが、実際の実務についたら、ブレイクポイントについても考える必要がでてくることも頭に入れておきましょう。

↓こちらにブレイクポイントについて基礎的な部分がわかりやすく記載されています。

【CSS】適切なブレイクポイントを考えてみる（レスポンシブデザイン用）

↓こちらはブレイクポイントをどう決めていくかが非常に参考になります。（主流となっているデバイスをチェックしたりしていますね。）

allabout.co.jp