メディアデザイン実習J 2013 Vol.1.5

メディアデザイン実習J vol.1.5�2013/4/23

�

�\¶8tµ¥´!•  ÙćéËG¢!•  ÙćéË3r!•  óăðýć!!WebÛÏèĆWebÛćðßĆWebÍóā!•  �¸´Á�È�Ûćîć��µ�´-½Åµ�!•  ÛćîćËY;ªÇ!

開発環境を構築しよう

•  IDEĉj��\X(Ċ!– Eclipse!– Aptana!– VisualStudio!– Xcode!

!•  æÕßèÒçÎâ!–  c�ÒçÎâ!–  Fraise!(Smultron)!

(1) 何で書くか？

(2) サーバー環境（実行環境）

ĄćÔĂÛćîć�XAMPP!/!MAMPĉUDĊ�AptanaĉUDĊ�

!:X(�

VM!ware!+!UbuntuĉUDĊ�!

ローカルリモート

ăąâĂÛćîć�§¢ÅÏąâćìåèĉ1�Ċ�

!ÖĀÐéÛćîć�

Amazon!EC2!§¢ÅÖĀÐéĉ1�Ċ�NiFy!C4SAĉ1�Ċ�

!PaaSĉÍóāØćÝÿąößèĊ�

Google!App!EngineĉUD�Ċ�Windows!Azure!HerokuĉUD�Ċ�

�

��½³u@�² Ç�´Æ��« Ç�

Aptanaによる開発環境の構築

Eclipseôćß·MS]µIDE!¥ÈË'H¶m�²�¤¹#�µ�!

!Ûćîć�q!

HTML5!+!javascript·'a]µ�\¶¸��!!âćùêĂ�q!

Windows³ÁÙøąé��¤Ç�

受講者のためのサイト

hSp://zokei.koekatamarin.com/�

•  X(Lf=��•  X(·�2�•  w|·�>�•  �\E�·Q2!�

「何から始めるか？」

恐れる必要はない!!

H4·HK·�³©°¢Æm�²¾Ç��óĄ×Āùą×¶�¡Å«��HK·�³vQªÇ#�¸+��!¬È³Ád��µ�¥´¸�{¨��¶n¢��ĉ�¶n¥�´¨`�¶o�³Ê�Ç�´��·¸�óĄ×Āøć�Ç�Ç�Ċ�

3�¶FÂ°¥´¸�!ª¦¢g�®°³¨ÃČ�

'H]¶¸��½³Ë�e¨²m�Ç��

1.  _:Ë�¶��[ªÇ�2.  óĄ×Āú´[�ËÏûćÞªÇ!3.  {¨�zx%·Ä�µÁ·ËG¢�4.  óĄ×ĀúËG¢�5.  æßèªÇ�6.  �NªÇ�7.  çÜÏąË <ªÇ�8.  Ûćîć�³��ªÇ�9.  óĄüćÝÿąªÇ!10. �O��²ÐíÐí�čĉĎoĎĊċ!

「どう進めるか？」

それでは、いよいよ

.html と .js (1)

.html�

.js�

.css�

<link!type="text/css"!rel="stylesheet"!href="style.css"!/>�

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

"º�¨²�!}¾�¿�

.html�

<script!type="text/javascript">!!!!!document.write(”<p>Hello!World!</p>");!</script>�

<style!type="text/css">!p!{!��fontgsize:!18px;!��color:!#00f;!}!</style>!

.html と .js (2)

�ñÌÏĂ�Å}¾�½µ¢²Á�!HTMLñÌÏĂ·�¶G�²��²Á ©¥´�

JavaScriptÙćé�

CSSÙćé�

<!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript">!!!!!document.write(”Hello!World!");!</script>!!</body>!

(1)!ñÌÏĂË�¤Ç´ ·G E� (2)!ñÌÏĂË�¤µ�´ ·G E�

<!DOCTYPE!html>!<head>!!!!!<mtle>Sample</mtle>!</head>!<body>!!<script!type="text/javascript"!src="app.js"></script>!!</body>!

document.write(”Hello!World!");!!

index.html� index.html�

app.js�

•  gTµÙćéµÅ¥È³Á½�OK!•  �¢µÇ´HTML�P¢µÇ!•  SEO¶��!•  ûąæêąß9�p¯Ç�

•  ��±¢¨�…�

�»±�¸<head>�¶G ½¨Ã��

.html と .js (3)

Hello World !

document.write(”Hello!World!");!

*�JSñÌÏĂ¸�"º�§È´¥É³3r§ÈÇ�

"º�§È´¥É¶��§ÈÇ�

document.body.appendChild(document.createTextNode("Hello!World!"));!

Body·.th´¨²��§ÈÇ�

window.onload!=!funcmon!()!{!!!document.body.innerHTML!=!"Hello!World!";!}!

Body·.th´¨²��§ÈÇ�

alert('Hello!World!')!

ãÏÍĄ×�sb§ÈÇ�

console.log('Hello!World!')!

ÙąáćĂ��§ÈÇ�

•  éåèÝąâåÖß!éåè!.!³±µ£!

基本文法

I��7,!=!&W.FH.I��.�V.6.0R~Z.1556;�

�5^�.!¢(“ÚćĂ”).�Ç(“÷ćĂ”);�

ĉAcmonScript´ ©³ª�Ċ�

ÓòÞÑÖè·ÏûćÞ�

ûáåé·ÏûćÞ�

•  A´��)B(·��)�sb§ÈÇ!

!!•  A´��C/�(¬·½½)sb§ÈÇ�

変数と文字列

alert(A);!

Alert(‘A’);!

Alert(“A”);!

var!A!=!‘Hello!World!’;!!!alert(A);!alert(‘A’);!alert(“A”);!

3$sb¨½ª�

配列 (1)

var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!

0� 1� 2�

øąäÑßâćĆþêÏæåéË2l¨²¾Ç�

var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!!!!!var!player!=!ManU[0];!!alert(player);!!!!

配列 (2)

�5^�Ë�Æ�¨²¾Ç�

��5^��´sb§ÈÇ�

var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!!!!!ManU[0]!=!‘ãëćĆÐÑĂôåÖ’;!!var!player!=!ManU[0];!!alert(player);!!!!!

�5ËÐÑĂôåÖ¶k A��

�ãëćĆÐÑĂôåÖ�´sb§ÈÇ�

オブジェクト

var!ManU!=!{!!!!!LM:!‘�5^�’,!!!!!FW:!‘ĄðąĆñÌąĆõĂÝć’,!!!!!CAM:!‘ÐÑÏąĆĂćëć’,!};!!alert(ManU.CAM);!!!!!var!posimon!=!‘CAM’;!!alert(ManU[posimon]);!!!

ManUÓòÞÑÖè·CAM´��óĄïæÎË"¼!→�ÐÑÏąĆĂćëć�´sb§ÈÇ�

óĄïæÎË)B³?2ªÇ→ ©iJ�sb§ÈÇ�

�ÓòÞÑÖè��javascript·'HĈ!!ÓòÞÑÖè·�·çćâ¶ÍÖàßªÇÀ¶�éåèÝąâåÖß³óĄ×ĀúËy�¨²�¢��

<body>

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

<form><div>

日本代表の<select> <option>(ポジションを選択)</option> <option value="FW">フォワード</option> <option value="CAM">セントラルミッドフィルダー</option> <option value="LM">左ミッドフィルダー</option> <option value="RM">右ミッドフィルダー</option> <option value="LDM">左ボランチ</option> <option value="RDM">右ボランチ</option> <option value="LB">左サイドバック</option> <option value="LCB">左センターバック</option> <option value="RCB">右センターバック</option> <option value="RB">右サイドバック</option> <option value="GK">ゴールキーパー</option></select>の選手って、誰だっけ？

</div></form>

<div id="answer">それは、<span></span>です。</div>

<script>$(function(){ var team = { FW: '前田遼一', CAM: '本田圭佑', LM: '香川真司', RM: '岡崎慎司', LDM: '遠藤保仁', RDM: '長谷部誠', LB: '長友佑都', LCB: '今野泰幸', RCB: '栗原勇蔵', RB: '内田篤人', GK: '川島永嗣' }; $('select').change(function(){ var player = ''; var position = ''; $('select option:selected').each(function(){ position = $(this).attr('value'); player = team[position]; }); $('#answer').show(); $('#answer span').text(player); }).trigger('change'); $('#answer').hide();});

</script>

</body>

Education

メディアデザイン実習J 2013 Vol.1.5