Web±ÜÍ÷¤Î³Ú¤·¤µ¤ò¹â¤á¤ëWeb¥Ú¡¼¥¸²ÄÄ°²½¥·¥¹¥Æ¥à

Web Web 2 3

1 PC, Web, Web. Web,., Web., Web HTML, HTML., Web, Web.,,., Web, Web., Web, Web., Web, Web.

2 1 6 1.1.................................................. 6 1.2................................................. 6 1.3.................................................. 6 1.4............................................. 6 2 7 2.1 WebAuditoryWorld: WWW.............. 7 2.1.1.............................................. 7 2.1.2....................................... 7 3 8 3.1............................................. 8 3.2.............................................. 8 3.3............................................... 9 3.4........................................... 11 3.4.1.......................................... 11 3.4.2....................................... 11 3.4.3..................................... 11 3.4.4............................... 11 3.4.5.......................................... 12 3.5.............................................. 12 4 14 4.1............................................... 14 4.2.......................................... 15 4.2.1 Chrome......................................... 15 4.2.2 3................................. 15 4.2.3................................... 16 4.2.4............................. 17 4.3 WebMusicJs.............................................. 18 4.3.1.............................................. 18 4.3.2........................................... 18 4.3.3.............................................. 20 4.3.4 DOM...................................... 23

3 5 24 5.1.................................................. 24 5.2............................................... 24 5.3................................................. 24 5.4............................................... 24 5.5.............................................. 26 5.6.................................................. 26 5.6.1........................................ 26 5.6.2....................................... 26 5.7.................................................. 28 5.7.1................................. 28 5.7.2............................... 28 5.7.3 Web................................. 29 6 30 6.1.................................................. 30 6.2.............................................. 30 6.2.1.............................. 30 6.2.2........................................ 30 6.2.3...................................... 30 6.2.4...................................... 30 32

4 2.1 WebAuditoryWorld [1]............................... 7 3.1........................................ 9 3.2............................................... 9 4.1......................................... 14 4.2.......................................... 16 4.3 DOM........................................ 23

5 3.1................................................. 10 3.2......................................... 12 4.1............................................... 14 4.2 HTML.................................. 21 5.1............................................. 24 5.2 1.............................................. 25 5.3 2.............................................. 25 5.4 3.............................................. 25 5.5.......................................... 25 5.6............................................. 26 5.7........................................... 26

6 1 1.1 PC, Web. Web,,, Web Web.,,,, Web. 1.2 Web HTML,., Web HTML., HTML Web,. 1.3 Web, HTML Web., Web. 1.4.,,. 2,. 3,. 4,. 5,. 6,.

7 2 2.1 WebAuditoryWorld: WWW 2.1.1 WebAuditoryWorld[1],, WWW Web, MIDI File[2] Web., Web URL, HTML MIDI File,. 2.1. 2.1: WebAuditoryWorld [1] WebAuditoryWorld, Web,,, Web., HTML, Web HTML. 2.1.2 WebAuditoryWorld,Web,.,, 7., WebAuditoryWorld Web, Web.

8 3 3.1 Web., Web HTML,. Web, Google, Chrome [3].. HTML, Web.,. 3.2. Web HTML..,., HTML,.

3 9, Chrome Chrome. 3.1. 3.1:,. 3.3 3.2., [4].. 3.2:

3 10 HTML,. HTML,. A BR P FONT HR IMG CENTER TABLE TD B TR, Web [5].,, none.. 3.1. C # D b, # E b F # G b, # A b, # B b 3.1:,.,.

3 11.,.,. [4],., D, A C, E, F, G, A. HTML.,. 3.4 3.4.1 2. OSS band.js[6]...,.. 3.4.2 HTML.,, A HTML C,. 3.4.3,. HTML,., DIV. DIV,. 3.4.4, class class %7 + 1 = (3.1), id. id % = (3.2) 3.2.

3 12 C, # D, b, # E, b F, # G, b, # A, b, # B, b 3.2: 3.4.5 1 1 1/4.,.,., 1/4, 180. 3.5 3.1 HTML. 1 <html > 2 <body > 3 <div > 4 <a src= " h t t p : / / h o g e. c o m / h o g e. p n g " id= " h o g e " class= " h o g e h o g e " ></a> 5 <p id= " d e n n k i " class= " t s u s h i n " > </p> 6 <div > 7 <p id= " d e n n k i " class= " t s u s h i n " > </p> 8 </div > 9 <div > 10 <p id= " d e n n k i " class= " t s u s h i n " > </p> 11 <br /> 12 </div > 13 </div > 14 </body > 15 </html > 3.1: HTML 1 1, F1 2 2, F1, E1 3 3, C2, F1 3.2:

3 13, 3.1 HTML 3.2. 3.2 1 F1, 3.1 7 P., 3.2 2 F1, E1 3.1 10, 11 P BR, 3.2 3 C2, F1 3.1 4, 5 A P., DIV., 3.4.1 2,,., 1 2..

14 4 4.1 Google, Chrome., JavaScript. 4.1. 4.1:,. OS OS X(10.8.5) Chrome 32.0.1700.77 (Official Build 244503) Chrome Extension Manifest Version 2 4.1:

4 15 4.2 4.2.1 Chrome Google Chrome.,. / /. 4.2.2 3, Chrome.,,. localstorage 1., Chrome localstorage, localstorage Chrome background., background localstorage, foreground background localstorage 3. 4.2.,. 1 chrome.extension.sendmessage({method: " g e t S t a t u s " }, function(response) { 2 var flag = response. status; 3 if(flag === 1 ) { 4 playmusic( $body, tagdata, noiseoption, false); 5 }else if(flag === 2 ) { 6 playmusic( $body, tagdata, noiseoption, true); 7 } 8 }); 4.1: foreground background 1 chrome. extension. onmessage. addlistener( function( request, sender, sendresponse) { 2 if (request.method == " g e t S t a t u s " ) { 3 sendresponse({status: localstorage[ s t a t u s ]}); 4 }else { 5 sendresponse ({}); 6 } 7 }); 4.2: background foreground status 1 2,. 1 http://developer.chrome.com/extensions/storage.html

4 16 4.2: 1 { 4.2.3 HTML., localstorage., Chrome Options 2., Chrome Options, localstorage. foreground, background. localstorage. 2 " n o i s e T a g " : { 3 " C " : " t a g n a m e ", 4 " D " : " t a g n a m e ", 5 " E " : " t a g n a m e ", 6 " F " : " t a g n a m e ", 7 " G " : " t a g n a m e ", 8 " A " : " t a g n a m e ", 9 " B " : " t a g n a m e ", 10 }, 11 " n o i s e O p t i o n " : { 12 " C " : [ " d e f a u l t ", " # " ], 13 " D " : [ " d e f a u l t ", " b " ], 14 " E " : [ " d e f a u l t ", " b " ], 15 " F " : [ " d e f a u l t " ], 16 " G " : [ " d e f a u l t ", " b ", " # " ], 17 " A " : [ " d e f a u l t ", " # " ], 18 " B " : [ " d e f a u l t ", " b " ], 19 } 2 https://developer.chrome.com/extensions/options.html

4 17 20 } 4.3:, Bootstrap 3 CSS. 4.2.4, WebMusicJs 4 HTML DOM., Web DOM., band.js[6] Web Audio API 5.. 1 function playmusic( $dom, tagdata, noiseoption, loopflag) { 2 var music = new BandJS(); 3 4 music. settimesignature(2, 2); 5 music. settempo (180); 6 7 var righthand = music.createinstrument( s q u a r e, o s c i l l a t o r s ), 8 lefthand = music.createinstrument( t r i a n g l e, o s c i l l a t o r s ); 9 var instruments = [ righthand, lefthand]; 10 11 var webmusic = new WebMusic( $dom, { 12 t a g s : tagdata, 13 s c a l e s : noiseoption 14 }); 15 var fulldatastring = " " ; 16 var fulldatas = webmusic. getdata(); 17 $. each( fulldatas, function(i, data) { 18 var note = data[ n o t e ]; 19 var scales = data[ s c a l e s ]; 20 var instrument_num = data[ i n s t r u m e n t ]; 21 22 var s = " " ; 23 $. each( scales, function(i, scale) { 24 if(s!= " " ) s += ", " ; 25 s += scale; 26 }); 27 28 fulldatastring += s + " \ n " ; 29 if(s == " r e s t " ) instruments[instrument_num].rest(note); 30 else instruments[ instrument_num]. note( note, s); 3 http://getbootstrap.com/ 4 https://github.com/henteko/webmusicjs 5 http://www.w3.org/tr/webaudio/

4 18 31 }); 32 if( fulldatastring == ) return; 33 34 righthand. finish(); 35 lefthand.finish(); 36 37 music.end(); 38 if( loopflag) music. loop( true); 39 music.play(); 40 } 4.4: WebMusicJs band.js 4.3 WebMusicJs WebMusicJs. 4.3.1 WebMusicJs, Web HTML DOM Web., jquery 6, jquery. 4.3.2 Web WebMusicJs. WebMusicJs GitHub github 7. git 8,. 1 $ git clone git@github. com: henteko/ WebMusicJs. git 4.5: WebMusicJs git clone, git URL, zip. https://github.com/henteko/webmusicjs 6 http://jquery.com/ 7 https://github.com 8 http://git-scm.com/

4 19 jquery, WebMusicJs jquery., HTML jquery SCRIPT. 1 <html > 2 <head > 3 <script src= " h t t p : / / a j a x. g o o g l e a p i s. c o m / a j a x / l i b s / j q u e r y / 1. 1 0. 2 / j q u e r y. m i n. j s " ></script > 4 </head > 5 </html > 4.6: jquery, Google CDN 9., jquery HTML SCRIPT.,, jquery. 1 <html > 2 <head > 3 <script src= " h t t p : / / a j a x. g o o g l e a p i s. c o m / a j a x / l i b s / j q u e r y / 1. 1 0. 2 / j q u e r y. m i n. j s " ></script > 4 <script src= " W e b M u s i c J s / w e b m u s i c. j s " ></script > 5 <script src= " W e b M u s i c J s / i n s t r u m e n t. j s " ></script > 6 <script src= " W e b M u s i c J s / n o t e. j s " ></script > 7 <script src= " W e b M u s i c J s / s c a l e. j s " ></script > 8 <script src= " W e b M u s i c J s / t a g. j s " ></script > 9 </head > 10 </html > 4.7: WebMusic, WebMusicJs. WebMusicJs Web DOM,, DOM. jquery DOM. 1 $(function() { 2 var $dom = $( b o d y ); 3 }); 4.8: jquery DOM 9 https://developers.google.com/speed/libraries/devguide

4 20 $dom,body DOM. WebMusicJs,. 1 var webmusic = new WebMusic( $dom); 2 var fulldatas = webmusic. getdata(); 4.9: WebMusicJs 1 [ fulldatas. 2 {, fulldatas. 3 " i n s t r u m e n t " : 0, 4 " n o t e " : " q u a r t e r ", 5 " s c a l e s " : [ " C 1 " ] 6 }, 7 { 8 " i n s t r u m e n t " : 1, 9 " n o t e " : " q u a r t e r ", 10 " s c a l e s " : [ " D 3 ", " C # 5 " ] 11 } 12 ] 4.10: WebMusicJs band.js,. 4.3.3 WebMusicJs. instrument.js note.js scale.js tag.js webmusic.js,. instrument.js instrument.js, Instrument function. Instrument,WebMusicJs.,.,., Instrument.getInstrument

4 21 integer., integer. 0, 1.. 3.4.1,. note.js note.js Note function., quarter, 1/4 function. scale.js scale.js Scale function.,,,., C DOM, C DOM, C#3., 3.4.4 3.1 3.2., WebMusic scales.,,.,, WebMusic. tag.js tag.js HTML Tag function. HTML 4.2.. P IMG SPAN FORM UL A TABLE CODE C D E F G A B rest 4.2: HTML rest., WebMusic tags.,., WebMusic.

4 22 webmusic.js webmusic.js WebMusicJs WebMusic function. WebMusic, DOM, HTML,,. WebMusic. getdata parse findchildrencount,. WebMusic.getData getdata,., WebMusic getdata. WebMusic.parse parse DOM. DOM HTML DIV, DIV, DIV 1.,. 1 WebMusic. prototype. parse = function( $dom, scales, flag) { 2 var scale = this. tag. convert( $dom); 3 if( scale!= " " ) scales. push( scale); 4 var $children = $dom. children(); 5 if( $children. size() == 0 flag) { 6 / / l o o p e n d 7 return scales; 8 } 9 10 var self = this; 11 $children. each( function(key, child) { 12 scales = self. parse($( child), scales, true); 13 }); 14 return scales; 15 } 4.11: WebMusic.parse WebMusic.findChildrenCount findchildrencount, DOM DIV,. DOM DOM.

4 23 4.3.4 DOM DOM, WebMusic getdata. 4.3. 4.3: DOM, DOM DIV., DIV., HTML,.,. DIV, HTML DIV,.

24 5 5.1,., Web.,,. 5.2, PC.,.,. 5.3, 12.. Web HTML 12 11 12 11 12 1 12 12 12 8 5.1: 5.4, A, B, C, B C A,,. 3.,, Web,. Web. Google 1 1 http://google.com

5 25 Yahoo 2 Wikipedia 3 Wikipedia 4 5 Pukiwiki 6 Gyazz 7,. A B C Google wikipedia Google Yahoo 5.2: 1 A B C Wikipedia Wikipedia 5.3: 2 A B C Wikipedia PukiWiki About Gyazz 5.4: 3,. 1 B 2 B 3 5.5:,. 2 http://yahoo.co.jp 3 http://ja.wikipedia.org/wiki/ 4 http://en.wikipedia.org/wiki/main Page 5 http://ja.uncyclopedia.info/wiki/ 6 http://pukiwiki.sourceforge.jp/?about%20pukiwiki 7 http://gyazz.com/gyazz/

5 26 1, A C Web 2, A, B, C, Wikipedia 3, A, B, C 5.5,, Web.,.. Web (YES / NO) (YES / NO) 5.6 5.6.1. 1 2 3 1, B 12 6 7 2, C 0 3 0 3, 0 3 5 1 1 3 5.6: 5.6.2 Web. 9 5 5.7:,.

5 27 Web, Google GitHub Web,, Google 100, Wikipedia, ( ) ( ) Web

5 28?, HTML, HMTL wiki HTML 5.7 5.7.1 5.6 1 2., 3., Web, B,., HTML Web,., Web. 5.7.2 5.7, 12 9., Web, Web.,,.., Web..,.,.,.

5 29 5.7.3 Web,, Web.,, Web,.

30 6 6.1, Web Web HTML, Chrome., Web, Web., Web, Web., Web, Web. 6.2 6.2.1,.,., HTML.,, Web. 6.2.2,.,,. 6.2.3, HTML.,. 6.2.4,.,,.,.

31,,.,,,..,,..,,,,,,,,,,,..

32 [1],. WebAuditoryWorld: WWW. WISS, 2000. [2] MIDI MIDI 1.0, 1989. [3] Google Chrome Extensions. http://developer.chrome.com/extensions/index.html [4]. http://ja.wikipedia.org/wiki/ [5],,,. Web. 2000 2000. [6] meenie band.js. https://github.com/meenie/band.js, 2013