メディアデザイン実習J 2013 Vol.1.5
-
Upload
irie-taichi -
Category
Education
-
view
145 -
download
1
description
Transcript of メディアデザイン実習J 2013 Vol.1.5
![Page 1: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/1.jpg)
メディアデザイン実習J vol.1.5�2013/4/23
�
![Page 2: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/2.jpg)
�\¶8tµ¥´!• ÙćéËG¢!• ÙćéË3r!• óăðýć!!WebÛÏèĆWebÛćðßĆWebÍóā!• �¸´Á�È�Ûćîć��µ�´-½Åµ�!• ÛćîćËY;ªÇ!
開発環境を構築しよう
![Page 3: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/3.jpg)
• IDEĉj��\X(Ċ!– Eclipse!– Aptana!– VisualStudio!– Xcode!
!• æÕßèÒçÎâ!– c�ÒçÎâ!– Fraise!(Smultron)!
(1) 何で書くか?
![Page 4: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/4.jpg)
(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@�² Ç�´Æ��« Ç�
![Page 5: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/5.jpg)
Aptanaによる開発環境の構築
Eclipseôćß·MS]µIDE!¥ÈË'H¶m�²�¤¹#�µ�!
!Ûćîć�q!
HTML5!+!javascript·'a]µ�\¶¸��!!âćùêĂ�q!
Windows³ÁÙøąé��¤Ç�
![Page 6: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/6.jpg)
受講者のためのサイト
hSp://zokei.koekatamarin.com/�
![Page 7: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/7.jpg)
• X(Lf=��• X(·�2�• w|·�>�• �\E�·Q2!�
「何から始めるか?」
恐れる必要はない!!
H4·HK·�³©°¢Æm�²¾Ç��óĄ×Āùą×¶�¡Å«��HK·�³vQªÇ#�¸+��!¬È³Ád���µ�¥´¸�{¨��¶n¢��ĉ�¶n¥�´¨`�¶o�³Ê�Ç�´��·¸�óĄ×Āøć�Ç�Ç�Ċ�
3�¶F°¥´¸�!ª¦¢g�®°³¨ÃČ�
![Page 8: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/8.jpg)
'H]¶¸���½³Ë�e¨²m�Ç��
1. _:Ë�¶��[ªÇ�2. óĄ×Āú´[�ËÏûćÞªÇ!3. {¨�zx%·Ä�µÁ·ËG¢�4. óĄ×ĀúËG¢�5. æßèªÇ�6. �NªÇ�7. çÜÏąË <ªÇ�8. Ûćîć�³��ªÇ�9. óĄüćÝÿąªÇ!10. �O��²ÐíÐí�čĉĎoĎĊċ!
「どう進めるか?」
![Page 9: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/9.jpg)
それでは、いよいよ
![Page 10: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/10.jpg)
.html と .js (1)
.html�
.js�
.css�
<link!type="text/css"!rel="stylesheet"!href="style.css"!/>�
<script!type="text/javascript"!src="app.js"></script>!
"º�¨²�!}¾�¿�
![Page 11: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/11.jpg)
.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Ùćé�
![Page 12: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/12.jpg)
<!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)
![Page 13: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/13.jpg)
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!')!
ÙąáćĂ��§ÈÇ�
![Page 14: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/14.jpg)
• éåèÝąâåÖß!éåè!.!³±µ£!
基本文法
I��7,!=!&W.FH.I��.�V.6.0R~Z.1556;�
�5^�.!¢(“ÚćĂ”).�Ç(“÷ćĂ”);�
ĉAcmonScript´ ©³ª�Ċ�
ÓòÞÑÖè·ÏûćÞ�
ûáåé·ÏûćÞ�
![Page 15: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/15.jpg)
• A´��)B(·��)�sb§ÈÇ!
!!• A´��C/�(¬·½½)sb§ÈÇ�
変数と文字列
alert(A);!
Alert(‘A’);!
Alert(“A”);!
var!A!=!‘Hello!World!’;!!!alert(A);!alert(‘A’);!alert(“A”);!
3$sb¨½ª�
![Page 16: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/16.jpg)
配列 (1)
var!ManU!=![!!!!!‘�5^�’,!!!!!‘ĄðąĆñÌąĆõĂÝć’,!!!!!‘ÐÑÏąĆĂćëć’,!];!
0� 1� 2�
øąäÑßâćĆþêÏæåéË2l¨²¾Ç�
![Page 17: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/17.jpg)
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§ÈÇ�
![Page 18: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/18.jpg)
オブジェクト
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�¨²�¢��
![Page 19: メディアデザイン実習J 2013 Vol.1.5](https://reader033.fdocument.pub/reader033/viewer/2022052910/559b40d31a28abe8538b4573/html5/thumbnails/19.jpg)
<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>