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ページをとにかくいろいろ動かしたい方はこちら

3.5億のCC写真の中から著作権放棄作品(CC0)を優先的に高精度で検索してくれるサービス「Visual Hunt」

以前フリー画像検索サイト「o-dan」を紹介しました。
今回はなんとそれ以上にたくさんのフリー画像を検索できるサイトが紹介されていたので、こちらも共有したいと思います。

Visual Hunt

3.5億枚の画像の中から検索してくれるそうです。ちょっとだけ触ってみた感じでは、日本語で検索するとちゃんと日本サイトを探してくれるみたいです。
本当の本当にフリーなのかはもう少し調べてみる必要性もありそうですが……驚きの便利さなので、使ってみるといいかもです。

紹介元:3.5億のCC写真の中から著作権放棄作品(CC0)を優先的に高精度で検索してくれるサービス「Visual Hunt」
↑詳しい情報はこちらに載っています

12月22日(火) (実)Webデザイン制作基礎⑤ 講義内容

デベロッパーツール(検証ツール)の使いかた

今一般に普及しているブラウザには、Webページ検証用のツールが付属しています。
これらを使いこなせると、Webサイト開発に非常に役立ちます。

今回は特に高性能といわれるGoogleChromeの検証ツールの使いかたの講義をしました。
どのブラウザでもある程度似通った操作方法ではあるのですが、微妙に使い方が違うので注意してください。

出し方

調べたいページ内で右クリック→要素を検証
或いは、F12キー

画面構成

develo-01
検証画面の画面構成です。クリックで拡大。

①表示タブ
ソースコードや、JavaScriptの実行結果を見る画面など、色々なタブが選択できます。

基本的には一番左、初期表示の「Elements」画面が使えれば大丈夫です(以下はElementsタブの説明になります)。

②選択ツール
これをクリックしてからソースコードのほうにマウスカーソルを持っていくと、様々な要素を直接選択することが出来ます。
検証したい場所を探すのに役立ちます。
③ソースコード
実行されているソースコードが表示されます。ここからも検証したい部分を選ぶことが出来ます。
タグの階層ごとに折りたたまれているので、非常に見やすいです。また、タグの閉じ忘れなども見つけやすくなります。
さらにここでソースの位置を変更したり、一部書き換えたりなどで、表示の確認をすることが出来ます(実際には保存はされないので注意!)
④要素の位置
選択している要素が、どの位置にあるのかを表示してくれます。(DreamWeaverにも同じ表示があります)。階層が複雑なページでは非常に役立ちます。
⑤CSS
選択された要素にかかっているCSSを表示してくれます。表示が違うときの検証にかかせない存在です。
スペルミスがあると「!」マークや打消し線が入ったりなど、かゆい所に手の届く仕様になっています。
また、一番下までスクロールすると、marginやpadding、borderを図解で表示してくれます。
さらに重要なのが、ここに直接CSSのテストコードを書き込めるところです。
このエリアにCSSを書き込むと、実際にどんな表示をするのか見ることが出来ます。保存はされないのと、更新すると戻ってしまうので注意は必要ですが、レイアウトが崩れたときや、どんな表示にするか迷った時などはとても有効です。
表示場所の切り替え
develop02右側の点三つのアイコンをクリックすると、表示位置の変更もできます。
下、右、別ウィンドウなどの選択が可能です。

おまけ:hover時の検証

develop03こちらも右側のピン止めアイコンから、hover時やvisit時の検証ができるようになっています。
特にhoverの検証はよくやるので、覚えておくと便利です。

参考:Chromeデベロッパー・ツール(要素を検証)の基礎的な使い方
他にもプログラムやページ速度の検証など、沢山の使い方が(多分講師陣の知らない使い方も……?)あるので、色々と調べてみるといいかもしれません。

ページ内リンク

<a href="#link_test">ページ内リンク</a>
<div id="link_test">
    <p>ここに跳びます</p>
</div>

ページ内リンク

IDを付けている場所にリンクを付ける事で、ページ内でもリンクを飛ばすことが出来ます。
今回はすぐ下にいきますが、当然もっと遠くに飛ばすことも、あるいは別ページの特定のIDに飛ばすことも可能です。
こういう使い方もできるので、IDは一ページに一回までしか使えません。十分に注意してください。

商用利用OK!2015年にリリースされた無料フォント35

新しくできた商用可のフリーフォントが紹介されていたので、共有します。
最近ではフリーで使えるフォントが非常に増えてきています。一昔前だったら想像もつかなかったような面白い&綺麗なフォントが目白押しなので、色々使ってみてください。

商用利用OK!2015年にリリースされた無料フォント35

関連記事:フォントを増やしていこう

12月21日(月) (実)Webデザイン制作基礎④ 講義内容

地図を作ってみよう

トレースを応用して、自分の好きな地図を作る事もできます。
googlemapと違って拡大や縮小ができませんが、よりデザインにあった地図を使うことが出来ます。
今日はIllustratorを使って、自由に地図を描いてもらいました。

  1. まずはgooglemapを開いて、トレスしたい場所をスクリーンショットします。
    windowsの場合は alt + fn + insertキー、macの場合はcommand + shift + 3キーです。
    windowsだと画像をコピーした状態に、macだと自動でデスクトップに、pngファイルとして保存されます。
  2. 次に、PhotoShopで新規ファイルを開き、ctrl + vで貼り付けます。それから大きさや表示位置を変更し、切り取ってみましょう。
    特に切り取らなくてもいい場合は、そのままIllustratorで開いてしまっても構いません。
  3. こちらではIllustratorに直接張りつけてみました。
    map01
    貼り付けた後、自由変形等で回転させたりして程よい角度にしてあげたり、不透明度を下げてあげたりするのもおススメです。
    準備ができたらロックして動かないようにしましょう。
    この時点で、新規レイヤーを作ると楽です。
  4. 地図をトレースしていきます。
    map02
    画像では主に直方体ツールで道を描いていますが、ラインツールやペンツールを使ってももちろんかまいません。
    他に、逆に道以外の部分をオブジェクトで描いて何もない部分を道に見立てるなど、様々な方法があります。
    主要道路と主なランドマークを描いてあげるだけでもそれっぽくなります。
    大雑把に作った後、細かい部分を描き足していくと楽です。

    プラスポイント

    上記地図で使っている線路は、少し応用的な技法で描いています。
    Illustratorには色々な小技があるので、調べてみても楽しいです。
    興味のある方は是非試してみてください。
    イラストレーターでJRの線路を描く
    Illustrator 修正が楽なデータ作成 線路と矢印はアピアランスでカーブ自在

  5. 完成。
    map
    トレス元の画像を非表示にして、保存すれば完成です。
    上記はわりとテキトウな感じですが・・・・・・センスと作りこみ次第で、様々なバリエーションの地図を作ることが出来ます。