カテゴリー別アーカイブ: プログラミング

1月8日(木) (実)Webプログラミング演習⑤講義内容

JavaScriptとPHP

php01
Webページがインターネットで閲覧できるのは、ファイルをWebサーバーにアップロードするから。
ユーザーがブラウザを通して、サーバーにアクセスし、ファイルを閲覧する形になっている。
JavaScriptはクライアントサイドスクリプトと呼ばれ、閲覧者のPC(正確にはIE、ChromeなどのWebブラウザ)で動作する言語。クリックしたら~する、などの、動きを作るのに適している。

対して、PHPはサーバーサイドスクリプトと呼ばれ、Webページをアップロードしたサーバーで動作する言語である。
ユーザーがリクエスト → サーバーで実行 → 実行結果を返す
という流れになり、実行時にユーザーの環境に左右されないというメリットがある。
また、ブラウザでソースコードを確認できないのが特徴。JavaScriptに比べ、秘匿性に優れている。
更にサーバーに沢山のデータを保存するデータベースとの親和性が高い。

Twitter、Facebookなどの有名なSNSや、ショッピングサイト等、大量のデータを扱うページでは、サーバーサイドスクリプトが用いられている。

フォーム

コード

お問い合わせフォームやアンケートフォームなどに使われるタグ。種類が沢山ある。
これらのタグを書いただけでは表示しかされず、実際に内容を送信するにはphpやjavascriptとの連携が必須である。

<form method="post" action="">
    <input type="text" name="name" value="お名前" >
    
    男性<input type="radio" name="gender" value="男性">
    女性<input type="radio" name="gender" value="女性" checked="checked">

    読書<input type="checkbox" name="hobby" value="釣り">
    スポーツ<input type="checkbox" name="hobby" value="スポーツ">
   
    <input type="email" name="mail_address" value="メールアドレス">
    <input type="email" name="mail_address" value="電話番号">
    <input type="date" name="date">
    <input type="url" name="http://">

    <select name="list">
        <option>項目1</option>
        <option>項目2</option>
        <option>項目3</option>
    </select>

    <textaera cols=""100" rows="10"></textarea>

    <input type="submit" value=" 送信 ">
    <input type="reset" value=" リセット ">
</form>

表示


男性 女性

読書 スポーツ




実際はtableタグやdlタグを使ってきちんと整理して書くことが多いです

formタグ
フォーム全体を囲うタグ。これがないとフォームとして機能しない。
また、以下のinput等のタグは、全てこの中に記述する必要がある。
属性値として、「method」と「action」が必須になる。
methodはデータの送信方法を指定し、値は「POST」か「GET」のいずれか。
使い分けもするにはするが、今はとりあえず「method=”POST”」と入力すればOK。

actionは、送信ボタンを押した後の飛び先を設定する(確認画面や送信完了画面)。
どこにも飛ばさない時は、「action=””」と表記する。

inputタグ
様々なデータを取り扱う、フォームの中で使えるタグ。
type属性の値によって様々な振る舞いをする特殊なタグでもある。
必須の属性としてnameがあり、これには任意の名前を付けることが出来る。
基本的には半角英数字で入力する。
また、type値によってvalue属性の内容も変わる。

type 用途 valueの扱い
text 汎用的な、短いテキストを入力できるエリア 初期表示
radio ラジオボタン。いずれか一つを選択する。同じ名前尾付けたものがグループになる。
checked=”checked” を属性として入力すると、その項目に初期状態でチェックが入る。
選択された時に送信されるデータ。同じグループの選択肢にはる。
checkbox 複数の項目尾選択する 選択された時に送信されるデータ。同じグループの選択肢に貼る。
email,tel,date,url,他 HTML5から増えたタイプ。本来プログラムで判定しなければいけなかったエラー文を判定してくれるようになった。
古いブラウザだと対応が微妙な場合があるのと、表示の仕方(特にdate)がブラウザによって異なるので、使用はケースバイケース。
type=”text”と同じ
submit フォームに入力した内容を送信するボタン。formタグにactionが指定されていると、そこに跳ぶ。 ボタンの上に表示される文字。
reset 入力したデータを消す。 subimitと同じ。
button 特に何も起こらないボタンを作るタグ。昨日はJavaScript等と合わせて使われることが多い。 subimitと同じ。
select,option
選択式のボックスを表示するタグ。
selectタグを親として、項目ごとにoptionタグで囲む。
紛らわしいが、inputタグではないので注意。
selectタグにname属性、optionタグに送信したいデータを入力する。
textarea
テキストを入力するボックス。inputのtextと違い、複数行のテキストが入力できる。
こちらもinputタグではないので注意。
属性としてcolsとrowsがあり、colsは一行の文字数、rowsは行数を指定できる。

1月7日(水) (実)Webプログラミング演習④講義内容

自分で作る関数

alert()、document.write()などは、関数と呼ばれる機能である。
変数がデータを纏める為の箱だとすれば、関数は機能を纏める為の箱と言える。

alertなどははJavaScriptにあらかじめ用意されたものだが、関数は自分で作る事も出来る。
自作した関数のことを、ユーザー定義関数と呼ぶ。

<script type="text/javascript">
   function test(){ //名前は自由に決められる
         alert('関数のテストです!');
   }
</script>
 //名前に括弧を付けると、その場所で実行される
//イベントハンドラと合わせて使う事も出来る。
 <button onClick="test();">Click!</button>

jQuery

JavaScriptでより簡潔にWebページを作れるようにまとめたもの。
詳細はこちらの記事参照。
使用するにはjQueryの本体が必要になる。
プラグインを複数読み込む場合も、本体は一つあればいい。
ただし読み込む順番には注意が必要で、本体を先に読みオム必要があるので注意。

Googleなどに用意されている本体を絶対パスで読み込む方法(CDNと呼ばれる)と、公式ページから本体をダウンロードして、相対パスで読み込む方法がある。

jQueryのバージョンについて

jQueryは時代に応じて開発が進んでいるため、バージョンがある。
よほど理由がない限り、基本は最新のものを使うのが無難。
バージョンには「1.xx.xx」というものと、「2.xx.xx」というものが用意されているが、
2.xx.xxは古いブラウザへの対応を切り捨てたバージョンになる。その分ファイルサイズは軽いので、状況によって使い分けよう。
因みにGoogleから読み込むときは、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

上の様にアドレスのバージョン部分を1だけにすると、1系統の最新版が読み込まれるようになる。

jQueryのプラグイン

プラグインは、jQueryを使って作られた機能を、誰かが公開してくれたもの。
基本的には基礎知識さえあれば使いやすいように設計されている。使う場合はjQueryの本体が必要になるので注意しよう。
スライダーだけでも何百・何千種類もあり、公開されてさえいれば自由に使えるものなので、非常に便利。
「jQuery スライダー プラグイン」などのキーワードで探せば、ダウンロードページが沢山出てくる。
大抵はダウンロードページに、サンプルや設置の仕方などが紹介されているので、色々試してみよう。
また、オプションが用意されている事も多いので、少しの変更で色々な動きが実現できる。
ダウンロードページが英語の場合も多いが、「プラグイン名 使い方」などで検索すると、大抵は紹介記事が存在する。

【jQuery】超万能スライダー FlexSlider の使い方をマスターする。
今日使ったものとは別のスライダーだが、紹介ページの例。使い方を丁寧に教えてくれている

ただし、プラグインによっては、思うようなオプションがない事もあるので、そういう時は類似の他のプラグインを使うか、
追記・あるいは自作するなど、さらに踏み込んだ能力が必要になる。
また、見た目だけであればCSSで変更できる場合も多い。

1月5日(火) (実)Webプログラミング演習② 講義内容

あけましておめでとうございます。
今年初の講義まとめになります。

イベントハンドラー

前回の講義でも紹介はした、JavaScriptの肝となる技術。
「clickしたら」「マウスが乗ったら」など、様々なイベント時に動作をさせることが出来る。
イベントハンドラーはタグに直接書き込むことが出来る点で、JSの中でも特殊な技術になる。

OnClick
クリックしたときに動作する。

<p onClick="window.alert('アラート!')">ここをクリック!</p>

ここをクリック!

クリックしたときにアラートが出てくる。
onClick以後の内容を変えることで、様々な機能が実装できる。
別ページに飛ばしたり、リロードしたりは講義中にも紹介したので、別のことやってみる。

<p onClick="this.style.color ='red';">クリックしてください</p>

クリックしてください

上記では、クリックすると文字の色が変わるようにした。
こういう形で、イベントにあわせて色々な動作を作ることが可能になる。
※分かりやすくするために、pタグをCSSで装飾しています

OnMouseOver,OnMouseDown
Overはマウスを乗せたとき、Downは下ろした時の処理。基本的にはセットで扱う。
CSSのhoverでは、マウスを下ろしたときに自動で元に戻ったが、jsでは両方指定する必要がある。
逆に、乗せたときと下ろしたときで別の動作をさせることも可能。
hoverとの違いは、backgroundではなくimg自体を変更できたりすること。

JSの記述場所

JavaScriptにも、CSSと同じように色々な読み込み方がある。

head、またはbodyタグの中に記述
<script type="text/javascript">
//この間に記述する
</scipt>
外部ファイルを読み込む
今回はhtmlファイルと同じ階層にjsフォルダをおき、そこに「test.js」というファイルを作った想定。

<script type="text/javascript" src="js/test.js"></script>

画像やCSSファイルと同じように、相対パスで指定する。
CSSを張るlinkタグと違い、閉じタグが必要になるので、忘れないように!

イベントハンドラでHTMLタグに記述。
前述の通り、ハンドラを使うことで、タグに記述することも可能。

変数

変数とは、データを入れる箱である。
変数の名前どおり、中身はいくらでも変えることが出来る。何度も参照する値は、変数に入れると記述が減って楽になる。

var num = 10; //変数を作ったときには、手前に「var」をつけ、その後に任意の名前をつける。
var text = 'Hello World!' //文字列を保存するときは、ダブル・シングルどちらかのクオーテーションで囲む。

最初に変数を宣言する時には、きちんと「var」を付けること。

JavaScriptの演算子

JavaScriptに限らず、プログラムは計算が得意。
計算式に使う記号を、演算子と呼ぶ。

+ 加算(足し算)
減算(引き算)
* 乗算(掛け算)
/ 除算(割り算)

足し引きは普通だが、掛け算と割り算の記号に注意。
これらの記号は、基本的にはどんなプログラミング言語でも共通である。

プラスポイント

講義では扱いませんでしたが、この他に「%」という演算子もあります。
こちらは割った後の余りを算出するものです。
var x = 5 % 3;
なら、xには2が代入されます。
意外と出番があるので、追加で覚えておくと良いでしょう。

配列

変数は一つの箱だとすると、配列は区分けのある箱。
複数のデータを一つの名前の箱に入れることが出来る。
配列にはいくつかの書き方があるが、どれも同じ意味になる。

//パターン1
var hairetsu1 = ['猿','キジ','犬'];

//パターン2
var hairetsu2 = newArray(3);
hairetsu2[0] = '猿';
hairetsu2[1] = 'キジ';
hairetsu2[2] = '犬';

//パターン3
var hairetsu3 = newArray('猿','キジ','犬');

どの方法でもOK。状況と好みで使い分ける。

指定した配列は以下のように出力する。

document.write(hairetsu1[0]);//猿と書き込まれる
alert(hairetsu1[2]);//犬というアラートが出る

配列は一番最初のものが0になるので注意!
配列もほとんどのプログラミング言語で使われるが、この点はどんなプログラムでも同じルールになる。

使用した関数

プログラミング言語において、一定の機能を持つ命令を関数と呼ぶ。
関数には様々な種類があり、大抵は
関数(内容)
という形で記述される。
関数の概念自体は全てのプログラミングに共通するが、名前や種類はそれぞれ異なる。

alert()
alert("Hello World!");

アラート(警告文)を表示させる。一番簡単に出力できるので、JS入門では良く使われる関数。

document.write()
document.write("<p>文章を書き込めます</p>");

HTML文書に文章を書き込む命令。
HTMLタグを書き込めば、ブラウザで表示する際にもきちんと反映される。

location.href()
location.href("http://webd.interplan-shinyokohama.net/");

location(場所)を任意の位置(hrefで指定した先)に移動させる命令。
講義ではクリックした際に飛ばす、リンクのように使用したが、
特定の条件を満たしたときに別サイトに飛ばすリダイレクト処理に良く使われる。

location.reload()
location.reload(true);

location(場所)をリロードさせる命令。
括弧の中にtrueを入れると、スーパーリロード(キャッシュを削除)になる。
trueやfalseは、あらかじめプログラムされた単語なので、クオーテーションはつけない。
また、変数として使うことが出来ない。こういう語を予約語という。

this.src()
ここ(this)のsrcを変更してください、という命令。
thisが使えるのは、onClickでimgタグに直接書き込んでいるから。

<img src="images/test_img_off.jpg" onMouseOver="this.src='images/test_img_on'" onMouseOut="this.src='images/test_img_off'">

マウスを乗せたときと降ろした時で画像を切り替える記述。
検証ツールで見るとわかりやすいが、動作的にはイベント発生時にimgのsrcの中身を書き換えている。

if文

プログラミングで最重要といっても過言ではない基礎の命令。
どんなプログラミングにも存在する。別名条件分岐。
条件に当てはまった時に命令を実行する。当てはまらなかった時に実行するelseと同時に運用することが多い(必須ではない)。

if(条件){
    条件に当てはまる時に実行する命令。
}else{
    条件に当てはまらなかったときに実行する命令。
}

また、条件は複数設定することも出来る。その場合はelse ifという命令を使う。

if(条件1){
    条件1に当てはまる時に実行する命令。
}else if(条件2){
    条件2に当てはまる時に実行する命令。
}else if(条件3){
    条件3に当てはまる時に実行する命令。
}else{
    それ以外のときに実行する命令。
}

条件はいくらでも増やすことが出来る。

比較演算子

if文の条件によく使われる、数値等を比較する為の記号を比較演算子と呼ぶ。
条件文は、当てはまっていればtrue、間違っているとfalseを返す。

A < B AがBより小さければtrue
A <= B AがB以下ならtrue
A > B AがBより大きければtrue
A >= B AがB以上ならtrue
A == B AとBが等しければtrue
A != B AとBが違う値ならtrue
A === B AとBが厳密に等しければtrue
今は余り気にしなくていいです
A !== B AとBが厳密にちがければtrue
今は余り気にしなくていいです

12月26日(土) (実)Webプログラミング演習① 講義内容

皆さん発表お疲れ様でした! 今日から(来年から?)は再び通常の講義に入ります。

プログラミングってなに?

プログラミングはWebに限らず、ゲームや電化製品、銀行のシステムなどなど様々な分野で使われている。
Webページでも、色々な動きや、外部からの沢山のデータを管理するページを作る必要がある時には、プログラミングの知識が必要になる。

今までHTMLとCSSで作ってきたのは主に静的なページと呼ばれている。
CSS3のアニメーションなどの登場で、一部動的なサイトが作れるようになってきてはいるものの、未だ安定性や自由性ではJavaScript等のプログラムに劣っている。
ハードルは上がるが、プログラミングが分かると、更に自由なページが作れるようになる。

プログラミング言語とは

プログラムを組むのには、一定のルールがあり、そのルールのことをプログラミング言語と呼ぶ。
プログラミング言語には、様々な種類があり、用途によって使い分けられる。

主なプログラミング言語

C言語、JAVA、C#、C++、ActionScript、Visualbasic、PHP、JavaScript、Peal、Rubyなどなど……
他にもマイナーメジャー含めると、相当な種類のプログラミング言語がある。
HTMLがマークアップ、CSSが装飾専門のものであるのに対し、一般にプログラミング言語と呼ばれるものは、ものすごく色んなことが出来ると思えばいい。

Webで使われるプログラミング言語

上記のように種類は多岐に渡るものの、それぞれが用途によって分けられる。
Webサイト制作に使われるものは一部であり、講義ではその中でも更によく使われる2つの言語、JavaScriptPHPを取り扱う。

JavaScript
最近よく求人に上がるJAVAとは完全に別物なので注意!
JS(ジェーエス)と略すことが多いです。
クライアントサイド(サイトを見る側)に依存したプログラミング言語で、ブラウザで稼働する。
DOMと呼ばれる言語のひとつで、HTML、CSSとの連携が容易である為、Web制作には必須の言語である。
「クリックすると動作する」「ある場所をホバーすると他のものが現れる」「ページ移動にアニメーションをつける」
など、CSSだけでは再現できない事が出来る様になる。
よく見るスライダーや、画像のポップアップ、タブ切り替えなども、大抵はJavaScriptで作られている。
PHP
サーバーサイドと呼ばれるスクリプトで、Webサイトをアップロードした「サーバー」で動作する。
データベースと呼ばれる、沢山のデータを収納する機能との連携が得意。
よくみるメールフォームや、ブログツールなどなど、様々なものを作る事が出来る。
このブログの元になっている「WordPress(最後の方で講義もあります)」も、全てPHPで組まれている。

DOM

JavaScriptは、特にDOM(Document Object Model)と呼ばれる種類の言語。
Documentは文書の意で、この場合HTML文書全体のこと。
Objectは一つ一つのタグのことを示す。
DOMとは、それららに直接アクセスすることが出来る言語の種類。
JavaScriptでは、タグの文章・属性・スタイル・イベントなどを直接編集することが出来る。

イベントハンドラ

JavaScriptはの動作は、
「○○した時に××する」というのが基本になる。
この、「○○した時」の事を、イベントと呼ぶ。
「クリックしたとき」、「ページを読み込んだ時」、「マウスを乗せた時」など、様々なイベントがあり、
イベントハンドラはそうしたイベントを検出する為のものである。
HTMLタグに書き込めるのが特徴。
JavaScriptのイベントハンドラ一覧

JQuery

JavaScriptだけだと記述がとても長くなるので、「より簡単にプログラムを作れないか?」を目的として作られた、JSの拡張機能。その中でもWEB開発に特化したもの。
そういった拡張機能のことを、ライブラリと呼ぶ。
より直感的にプログラミングが出来るので、最も人気のあるJSのライブラリである。
更に、誰かの作ったプログラムが多く公開されていて、スライドショーなどの機能も、プログラミングの知識がなくても容易に取り込むことが出来、様々な機能を追加できる。
※jQueryを使う為には、更にjQueryの本体が必要になります。フリーでダウンロード可

例えばこんなことも出来るようになります。

クリックしたときに別の場所を変化させる

ここをクリック
クリックするたびに色が変わるよ!

タブ機能

  • タブA
  • タブB
Aを表示しています
Bを表示しています。

あくまで簡単な例ですが、他にも様々なことが出来るようになります。

色の変わるコード

$(function(){
	//クリックすると色が変わるよ
	var color = new Array('#FFC6C7','#CFC6FF','#B5FFBB','#BBB');
	var max = color.length;
	var counter = 0;
	$('#btn').click(function(){
		if(counter >= max) counter = 0;
		$('#area').css('background-color',color[counter]);
		counter++;
	});
});

タブを切り替えるコード

//タブを切り替えるよ
$(function(){
	$('#tab li').click(function(){
		var btn = $('#tab li').index(this);
		$('#tab li').removeClass();
		$(this).addClass('active');
	
		$('#disp_area div').hide();
		$('#disp_area div').eq(btn).show();
	});
});

内容は特に気にしなくて構いません。
今は上の動きが、このくらいの分量のプログラムで書かれている事が分かればOKです。
見た目はいつも通りHTMLとCSSで作られています。

興味のある方へ

以下のリンクが参考になるかと思います
マンガで分かる JavaScriptプログラミング講座
今日やった部分やプログラム自体をもっと深く知りたい方はこちら(第一章⑧くらいまでと第三章あたり)

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座
Webページをとにかくいろいろ動かしたい方はこちら