Greasemonkey Greasemonkey

Size: px
Start display at page:

Download "1 5 1.1 Greasemonkey............................ 5 1.2................................... 5 1.3 Greasemonkey...................... 6 1.4.............."

Transcription

1 Dive into Greasemonkey Mark Pilgrim

2 Greasemonkey Greasemonkey Hello World Javascript GM log DOM Inspector Javascript Greasemonkey HTML HTML HTML HTML

3 CSS Javascript XML : Gmail Secure : Blogline Autoload : Ain t It Readable : Offsite Blank : Dumb Quotes : Frownies : Zoom Textarea : Access Bar Greasemonkey API GM log GM getvalue

4 GM setvalue GM registermenucommand GM xmlhttprequest GNU Preamble Terms and conditions for copying, distribution, and modification

5 How to apply these terms to your new programs GNU GPL 2 GNU General Public License

6 1 1.1 Greasemonkey Greasemonkey Firefox Greasemonkey Greasemonkey Javascript Greasemonkey Javascript Greasemonkey Javascript Greasemonkey Greasemonkey Greasemonkey 1.2 Greasemonkey 5

7 Greasemonkey Aaron Boodman Jeremy Dunck 1.3 Greasemonkey 0.3 Greasemonkey 1. Greasemonkey 2. Install Greasemonkey 3. Firefox Greasemonke 1 OK 4. Install Greasemonkey Install User Script..., Manage User Scripts..., User Script Command Manage User Scripts... OK Greasemonkey 3 1

8 1.4 Greasemonkey Javascript Greasemonkey ;.user.js Butler Google 1. Butler Butler Greasemonkey 2. Download version... ( 0.3) Greasemonkey 2 3. Install Greasemonkey Success! Refresh page to see changes Google Try your search on: Yahoo, Ask Jeeves, AlltehWeb,... Enhanced by Butler Butler Greasemonkey 2

9 1.5 Greasemonkey Greasemonkey ( Butler ) 1. Manage User Scripts... Greasemonkey Manage User Scripts 2. Butler 3. Butler Enabled Butler 4. Ok Butler Google Enhanced by Butler Enabled Butler Butler Manage User Scripts 1. Manage User Scripts... Greasemonkey Manage User Scripts 2. Butler Uninstall 3. 3 Jeff Goldblum

10 Butler 2 Manage User Scripts Butler Froogle-Google - Google Butler 1. Manage User Scripts... Greasemonkey Manage User Scripts 2. Butler Butler (http://*.google.*/*) ( ) 3. Excluded pages Add 4. Greasemonkey Add Page 2 URL OK 5. Manage User Scripts URLhttp://froogle.google.com/* Butler froogle.google.com URL (http:/ /) URL 6. OK Manage User Scripts Froogle Butler Google

11 2 2.1 Hello World Greasemonkey Hello World 1: helloworld.user.js // Hello World! example user script // version 0.1 BETA! // // Copyright (c) 2005, Mark Pilgrim // Released under the GPL license // // // // // This is a Greasemonkey user script. // // To install, you need Greasemonkey: // Then restart Firefox and revisit this script. // Under Tools, there will be a new menu item to "Install User Script". // Accept the default configuration and install. // // To uninstall, go to Tools/Manage User Scripts, // select "Hello World", and click Uninstall. // // // // ==UserScript== Hello World example script to alert "Hello world!" on every page * // ==/UserScript== alert( Hello world! ); 10

12 Hello World diveintogreasemonkey.org Google Hello world! helloworld.user.js 2.2 2: Hello World // ==UserScript== Hello World example script to alert "Hello world!" on every page * // ==/UserScript== Gresemonkey 6 // ==UserScript== // // ==/UserScript== Gresemonkey Gresemonkey Helllo World

13 Manage User URL Greasemonkey example script to alert "Hello world!" on every page Manage User Manage User Scripts

14 3 * Gresemonkey URL * Greasemonkey *() URL URL * Greasemonkey URL tag: URIs 2.3 Hello World! 3: Hello World! alert( Hello world! ); Greasemonkey

15 window.settimeout onclick Javascript helloworld 4: function helloworld() { alert( Hello world! ); window.settimeout("helloworld()", 60); Javascript Erro: helloworld is not defined helloworld() helloworld window 5: window.helloworld = function() { alert( Hello world! ); window.settimeout("helloworld()", 60); Hello World! window window

16 window.settimeout 6: window.settimeout(function() { alert( Hello world! ), 60); window.settimeout window.settimeout, document.addeventlistener click submit Anonymous functions in Javascript Block Scope in Javascript 2.4 Manage user Script Edit 1. Manage User Scripts... Greasemonkey Manage User Scripts 2. Hello World Edit Hello World.js 3. Live editing! 4. Manage User Scripts Edit Firefox

17 Greasemonkey

18 3 3.1 Javascript Javascript 1. Firefox 2. Firefox Javascript Javascript Gresemoneky 3.2 GM log Greasemonkey GM log Javascript OK GM log Javascript 7: Javascript 17

19 if (/^http:\/\/diveintogreasemonkey\.org\//.test(window.location.href)) { GM_log( running on Dive Into Greasemonkey site w/o www prefix ); else { GM_log( running elsewhere ); GM_log( this line is always printed ); 2 Javascript Greasemonkey: Log: \ running on Dive Into Greasemonkey site w/o www prefix Greasemonkey: Log: this \ line is always printed GM log 2 Javascript Greasemonkey: Log: running elsewhere Greasemonkey: Log: this line is always printed 255 Javascript Javascript Mac Ctrl+ 3.3 DOM Inspector DOM Inspector (DOM) HTML CSS

20 DOM Inspector Firefox DOM Inspector Firefox (Dom Inspector ) 1. Firefox Developer Tools 1 4. Firefox Dom Inspector Dive into Greasemonkey DOM DOM Inspector DOM Inspector 3. DOM Inspector DOM DOM Nodes 4. HTML 3 HEAD #text BODY BODY diveintogreasemonkey-org id 5. BODY 5 #text, DIV id="intro",#text, DIV id="main", #text 6. DIV id="intro" #text DIV class="sectioninner" 2 7. DIV class="sectioninner" #text DIV class="sectioninner2" 2 8. DIV class="sectioninner2" #text, DIV class="s",#text, DIV class="s", #text 5 9. DIV class="s" #text, H1, #text, P, #text 5 1

21 10. H1 DOM Inspector H1 (H1) URI HTML application/xhtml+xml XML DOM Node, Box Model, XBL Binding, CSS Rules, Computed Style, Javascript Object Javascript Object H1 12. CSS Style Rules monkey.org/css/dig.css 14. font-variant normal (DOM Inspector ) Dive Into Greasemonkey 15. Mac Ctrl- New Property New Style Rule background-color OK red OK DOM Inspect Element DOM Inspector Inspect Element DOM Inspector Firefox Firefox firefox -safe-mode Firefox Inspect Element

22 (Inspect Element ) 1. Inspect Element Install Now 2. Firefox Mac Ctrl- 5. Inspect Element DOM Inspector H1 DOM Inspector DOM Inspector DOM Inspector [DOM Inspector ] DOM Inspector Introduction to DOM Inspector Inspect Element extension Inspector Widget extension Inspect Element 3.4 Javascript Javascript Javascript 1. Jesse 2. Shell 3. Shell Javascript Javascript DOM Inspector DOM

23 document.title Dive Into Greasemonkey document.title = Hello World Hello World var paragraphs = document.getelementsbytagname( p ) paragraphs [object HTMLCollection] paragraphs.length 5 paragraphs[0] [object HTMLParagraphElement] paragraphs[0].innerhtml Teaching an old web new tricks paragraphs[0].innerhtml = Live editing, baby! Live editing, baby! Enter Javascript props 8: var link = document.getelementsbytagname( a )[0] props(link) Methods of prototype: blur, focus Fields of prototype: id, title, lang, dir, classname, accesskey, charset, coords, href, hreflang, name, rel, rev, shape, tabindex, target, type, protocol, host, hostname, pathname, search, port, hash, text, offsettop, offsetleft, offsetwidth, offsetheight, offsetparent, innerhtml, scrolltop, scrollleft, scrollheight, scrollwidth, clientheight, clientwidth, style Methods of prototype of prototype of prototype: insertbefore, replacechild, removechild, appendchild, haschildnodes, clonenode, normalize, issupported, hasattributes, getattribute, setattribute, removeattribute, getattributenode, setattributenode, removeattributenode, getelementsbytagname, getattributens, setattributens, removeattributens, getattributenodens, setattributenodens, getelementsbytagnamens, hasattribute, hasattributens, addeventlistener, removeeventlistener, dispatchevent, comparedocumentposition, issamenode, lookupprefix, isdefaultnamespace, lookupnamespaceuri, isequalnode, getfeature, setuserdata, getuserdata Fields of prototype of prototype of prototype: tagname, nodename, nodevalue, nodetype, parentnode, childnodes, firstchild, lastchild,

24 previoussibling, nextsibling, attributes, ownerdocument, namespaceuri, prefix, localname, ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, baseuri, textcontent, DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDING, DOCUMENT_POSITION_FOLLOWING, DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_CONTAINED_BY, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC Methods of prototype of prototype of prototype of prototype of prototype: \ tostring Javascript <a> DOM blur focus href hreflang insertbefore DOM Inspector DOM Inspector Javascript Javascript Javascript Javascript Javascript 3.5 Web Developer extension Aardvark id class Venkman Javascript Debugger Javascript 2 Web Development Bookmarklets JSUnit Javascript. 2

25 js-unit Javascript

26 4 4.1 www. 9: // ==UserScript== // ==/UserScript== Butler Salon Auto-Pass 4.2 Greasemonkey Greasemonkey Greasemonkey 10: Greasemonkey if (!GM_xmlhttpRequest) { alert( Please upgrade to the latest version of Greasemonkey. ); return; // more code here that uses GM_xmlhttpRequest 25

27 4.3 HTML getelementsbytagname HTML 11: <textarea> var textareas = document.getelementsbytagname( textarea ); if (textareas.length) { // there is at least one textarea on this page else { // there are no textareas on this page BetterDir Zoom Textarea 4.4 HTML HTML Firefox getelementsby Tagname( * ) 12: var allelements, thiselement; allelements = document.getelementsbytagname( * ); for (var i = 0; i < allelements.length; i++) { thiselement = allelements[i]; // do something with thiselement XPath Anti-Disabler

28 4.5 HTML HTML <textarea> getelementsbytagname( tagname ) 13: textarea var alltextareas, thistextarea; alltextareas = document.getelementsbytagname( textarea ); for (var i = 0; i < alltextareas.length; i++) { thistextarea = alltextareas[i]; // do something with thistextarea <a> Zoom Textarea 4.6 Greasemonkey evaluate XPath getelementsbytagname( a ) <a> href Firefox XPath href <a> var alllinks, thislink; alllinks = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < alllinks.snapshotlength; i++) {

29 thislink = alllinks.snapshotitem(i); // do something with thislink document.evaluate XPath XPath href <a> alllinks.snapshotitem(i) XPath title 14: title var allelements, thiselement; allelements = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < allelements.snapshotlength; i++) { thiselement = allelements.snapshotitem(i); switch (thiselement.nodename.touppercase()) { case A : // this is a link, do something break; case IMG : // this is an image, do something else break; default: // do something with other kinds of HTML elements thiselement thiselement.nodename HTML text/html application/xhtml+xml thiselement.nodename.touppercase() class <div> XPath 15: sponseredlink class div

30 var alldivs, thisdiv; alldivs = document.evaluate( sponsoredlink ]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i < alldivs.snapshotlength; i++) { thisdiv = alldivs.snapshotitem(i); // do something with thisdiv XPath document.evaluate document XPath document.getelementbyid document.getelementsbytagname 3 application/xhtml+xml Mozilla XPath Documentation 4 2 XPathResult.UNORDERED NODE SNAPSHOT TYPE XPathResult.ORDERED NODE SN APSHOT TYPE Mozilla XPath Documentation 5 2 XPath document.evaluate 2 null XPath XPath XPath XPath document.evaluate 16: xpath

31 function xpath(query) { return document.evaluate(query, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); xpath( ) title xpath( ) snapshotitem Javascript Access Bar BetterDir Blogdex Display Title Butler Frownies Offsite Blank Rotten Reviews Stop The Presses Mozilla XPath documentation XPath tutorial by example XPathResult reference 4.7 insertbefore ID main 17: <hr>

32 var main, newelement; main = document.getelementbyid( main ); if (main) { newelement = document.createelement( hr ); main.parentnode.insertbefore(newelement, main); Butler Zoom Textarea 4.8 nextsibling insertbefore navbar ID 18: <hr> var navbar, newelement; navbar = document.getelementbyid( navbar ); if (navbar) { newelement = document.createelement( hr ); navbar.parentnode.insertbefore(newelement, navbar.nextsibling); someexistingelement 1 someexistingelement.nextsibling someexistingelement.nextsibling null insertbefore Blogdex Display Title Butler 1 sibling

33 4.9 Greasemonkey removechild ads ID 19: var adsidebar = document.getelementbyid( ads ); if (adsidebar) { adsidebar.parentnode.removechild(adsidebar); removechild <table> <td> AdBlock up-to-date filter list Butler 4.10 replacechild annoyingsmily ID 20: var theimage, alttext; theimage = document.getelementbyid( annoyingsmily ); if (theimage) { alttext = document.createtextnode(theimage.alt); theimage.parentnode.replacechild(alttext, theimage); HTML HTML innerhtml Frownies

34 4.11 HTML innerhtml HTML HMTL DOM 21: var logo = document.createelement("div"); logo.innerhtml = + YOUR TEXT HERE + ; document.body.insertbefore(logo, document.body.firstchild); 2 logo.innerhtml Firefox HTML logo <p> <div> <div> Access Bar Butler BetterDir 4.12 Firefox data:url URL data:url Internet Explorer 22: var logo = document.createelement( img ); logo.src = \ data:image/gif;base64,r0lgodlhdqaoajeaanno6wbmzgaaaaaaach5baaaaaaa + LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D ; document.body.insertbefore(logo, document.body.firstchild);

35 <img> src data:url data:url data:url kitchen Butler Zoom Textarea data: URI kitchen 4.13 CSS CSS 23: function addglobalstyle(css) { var head, style; head = document.getelementsbytagname( head )[0]; if (!head) { return; style = document.createelement( style ); style.type = text/css ; style.innerhtml = css; head.appendchild(style); addglobalstyle( p { font-size: large! important; ); <style> <head> Firefox

36 addglobalstyle! important Access Bar Aint It Readable BetterDir Butler CDReadable LIP : Ain t It Readable 4.14 CSS sytle style="" getcomputedstyle <p> <p> style <html> <head> <title>style test page</title> <style type="text/css"> p { background-color: white; color: red; </style> </head> <body> <p id="p1">this line is red.</p> <p id="p2" style="color: blue">this line is blue.</p> </body> </html>

37 24: var p1elem, p2elem; p1elem = document.getelementbyid( p1 ); p2elem = document.getelementbyid( p2 ); alert(p1elem.style.color); // will display an empty string alert(p2elem.style.color); // will display "blue" element.style ; getcomputestyle() 25: var p1elem, p2elem, p1style, p2style; p1elem = document.getelementbyid( p1 ); p2elem = document.getelementbyid( p2 ); p1style = getcomputedstyle(p1elem, ); p2style = getcomputedstyle(p2elem, ); alert(p1style.color); // will display "rgb(255, 0, 0)" alert(p2style.color); // will display "rgb(0, 0, 255)" Butler Zoom Textarea 4.15 style logo ID 26: var logo = document.getelementbyid( logo ); logo.style.margintop = 2em ; logo.style.backgroundcolor = white ; logo.style.color = red ;

38 margin-top someelement.style.margintop float someelement.style.cssfloat float Javascript Access Bar BetterDir Blogdex Display Title Zoom Textarea CSS properties 4.16 Firefox DOM addeventlistner 27: var newbody = ; window.addeventlistener( load, function() { document.body.innerhtml = newbody;, true); window.addevent Listner newbody (closure)javascript

39 document.body.innerhtml CSS <head> Access Bar BetterDir 4.17 HTML XPath 28: POST post var postforms = document.evaluate( POST, post )= post ]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); XPath POST translate method XPath 2.0 lowercase translate post ForceGet 4.18 window.location.href

40 URL window.location.host 29: var href = window.location.host; Offsite Blank 4.19 href article ID 30: var a = document.getelementbyid( article ); if (a.href.match(/\?/i)) { // link already contains other parameters, so append "&printer=1" a.href += &printer=1 ; else { // link does not contain any parameters, so append "?printer=1" a.href +=?printer=1 ; Rotten Reviews Stop The Presses 4.20 Greasemonkey window.location.href 31: window.location.href = window.location.href.replace(/^http:/, https: ); GMail Secure Salon Auto-Pass

41 4.21 addeventlister 32: document.addeventlistener( click, function(event) { // event.target is the element that was clicked // do whatever you want here // if you want to prevent the default click action // (such as following a link), use these two commands: event.stoppropagation(); event.preventdefault();, true); document.addeventlistener 4.22 Javascript prototype 33: function newsubmit(event) { var target = event? event.target : this; // do anything you like here alert( Submitting form to + target.action); // call real submit function this._submit(); // capture the onsubmit event on all forms window.addeventlistener( submit, newsubmit, true); // If a script calls someform.submit(), the onsubmit event does not fire,

42 // so we need to redefine the submit method of the HTMLFormElement class. HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit; HTMLFormElement.prototype.submit = newsubmit; 2 submit submit (submit) submit() submit HTMLFormElement submit 2 newsubmit submit event event.target submit event this newsubmit event null this 2 Enter submit aform.submit() submit 2 submit HTMLFormElement submit Javascript event compatibility tables Javascript-DOM prototypes in Mozilla Displaying Event object constants 4.23 XML Firefox DOM XML DOM 34: XML 2

43 var xmlstring = var parser = new DOMParser(); var xmldoc = parser.parsefromstring(xmlstring, "application/xml"); DOMParser parsefromstring parsefromstring 2 XML DOMParser parsefromstring 2 application/xml, application/xhtml+xml, text+html application/xml GM xmlhttprequest XML 35: XML M_xmlhttpRequest({ method: GET, url: headers: { User-agent : Mozilla/4.0 (compatible) Greasemonkey/0.3, Accept : application/atom+xml,application/xml,text/xml,, onload: function(responsedetails) { var parser = new DOMParser(); var dom = parser.parsefromstring(responsedetails.responsetext, "application/xml"); var entries = dom.getelementsbytagname( entry ); var title; for (var i = 0; i < entries.length; i++) { title = entries[i].getelementsbytagname( title )[0].textContent; alert(title); ); Atom DOM DOM DOM iterate-one-element.html

44 GM xmlhttprequest

45 5 5.1 : Gmail Secure GMail Secure https://gmail.google.com/ GMail Google GMail (http:// ) (https:// ) GMail 36: GMail https:// // ==UserScript== GMailSecure force GMail to use secure connection // ==/UserScript== window.location.href = window.location.href.replace(/^http:/, https: GMail https:// URL 44

46 window.location.href = window.location.href.replace(/^http:/, https: ); 5.2 : Blogline Autoload Bloglines 2 Bloglines Bloglines 37: Bloglines // ==UserScript== Bloglines Autoloader Auto-display all new items in Bloglines // ==/UserScript== if (doloadall) { doloadall(); Bloglines doloadall() doloadall() if (doloadall) {

47 doloadall(); bloglines-autoload.user.js 5.3 : Ain t It Readable Ain t It Cool News 38: aintitreadable.user.js // ==UserScript== Ain t It Readable change style on aint-it-cool-news.com // ==/UserScript== function addglobalstyle(css) { var head, style; head = document.getelementsbytagname( head )[0]; if (!head) { return; style = document.createelement( style ); style.type = text/css ; style.innerhtml = css; head.appendchild(style); addglobalstyle( h1, h2, h3, h4 { + font-size: 12px! important; +

48 line-height: 14px! important; + font-weight: normal! important; + + h1:hover, h2:hover, h3:hover, h4:hover { + background-color: inherit! important; + color: inherit! important; + ); CSS CSS function addglobalstyle(css) { var head, style; head = document.getelementsbytagname( head )[0]; if (!head) { return; style = document.createelement( style ); style.type = text/css ; style.innerhtml = css; head.appendchild(style); CSS! important addglobalstyle( h1, h2, h3, h4 { + font-size: 12px! important; + line-height: 14px! important; + font-weight: normal! important; + + h1:hover, h2:hover, h3:hover, h4:hover { + background-color: inherit! important; + color: inherit! important; + );

49 aintitreadable.user.js CSS 5.4 : Offsite Blank Offsite Blank Gresemonkey Offsite Blank 39: offsiteblank.user.js // ==UserScript== Offsite Blank force offsite links to open in a new window https://* // ==/UserScript== var a, thisdomain, links; thisdomain = window.location.host; links = document.getelementsbytagname( a ); for (var i = 0; i < links.length; i++) { a = links[i]; if (a.host && a.host!= thisdomain) { a.target = "_blank"; HTML https://* 4

50 thisdomain = window.location.host; XPath document.getelementsbytagname( a ) links = document.getelementsbytagname( a ); <a> HTTP URL FTP a.host for (var i = 0; i < links.length; i++) { a = links[i]; if (a.host && a.host!= thisdomain) {... target " blank" a.target = "_blank"; offsiteblank.user.js HTML

51 5.5 : Dumb Quotes DumbQuotes (publishing software) ASCII 1 7 ASCII 40: dumbquotes.user.js // ==UserScript== DumbQuotes straighten curly quotes and apostrophes, simplify fancy \ dashes, etc. * // ==/UserScript== var replacements, regex, key, textnodes, node, s; replacements = { "\xa0": " ", "\xa9": "(c)", "\xae": "(r)", "\xb7": "*", "\u2018": " ", "\u2019": " ", "\u201c": ", "\u201d": ", "\u2026": "...", "\u2002": " ", "\u2003": " ", "\u2009": " ", "\u2013": "-", "\u2014": "--", "\u2122": "(tm)"; regex = {; for (key in replacements) { regex[key] = new RegExp(key, g ); 1

52 textnodes = document.evaluate( "//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i <textnodes.snapshotlength; i++) { node = textnodes.snapshotitem(i); s = node.data; for (key in replacements) { s = s.replace(regex[key], replacements[key]); node.data = s; Javascript 8 7 replacements = { "\xa0": " ", "\xa9": "(c)", "\xae": "(r)", "\xb7": "*", "\u2018": " ", "\u2019": " ", "\u201c": ", "\u201d": ", "\u2026": "...", "\u2002": " ", "\u2003": " ", "\u2009": " ", "\u2013": "-", "\u2014": "--", "\u2122": "(tm)";

53 regex = {; for (key in replacements) { regex[key] = new RegExp(key, g ); { replacements["\xa0"] = " "; replacements["\xa9"] = "(c)"; replacements["\xae"] = "(r)"; // and so forth 8 16 \xa0 \u g document. body.innerhtml var tmp = document.body.innerhtml; // do a bunch of search/replace on tmp document.body.innerhtml = tmp; innerhtml HTML 8 innerhtml XPath textnodes = document.evaluate( "//text()", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 2

54 XPath text() <a> alt <img> DOM 3 XPath for (var i = 0; i <textnodes.snapshotlength; i++) { node = textnodes.snapshotitem(i); s = node.data; // do replacements node.data = s; node s node s for (key in replacements) { s = s.replace(regex[key], replacements[key]); dumbquotes.user.js 5.6 : Frownies Frownies Gresemonkey :-) ASCII

55 20 <img> alt alt 41: fronies.user.js // ==UserScript== Frownies convert graphical smilies to their text equivalents * // ==/UserScript== var smilies, images, img, replacement; smilies = [":)", ":-)" ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/", ":/", ":X", ":-X", ":\">", ":P", ":-P", ":O", ":-O", "X-(", "X(", ":->", ":>", "B-)", "B)", ">:)", ":((", ":(((", ":-((", ":))", ":-))", ":- ", ": ", "O:-)", "O:)", ":-B", ":B", "=;", "I)", "I-)", " -)", " )", ":-&", ":&", ":-$", ":$", "[-(", ":O)", "3:-O", ":( )", "**==", "(~~)", "*-:)", "8-X", "8X", "=:)", "<):)", ";;)", ":*", ":-*", ":S", ":-S", "/:)", "/:-)", "8- ", "8 ", "8-", "8", "(: ", "=P~", ":-?", ":?", "#-O", "#O", "=D>", "~:>", "%%-", "~O)", ":-L", ":L", "[-O<", "[O<", "$-)", "$)", ">-)", ":-\"", ":^O", "B-(", "B(", ":)>-", "[-X", "[X", "\\:D/", ">:D<", "(%)", "=((", "#:-S", "#:S", "=))", "L-)", "L)", "<:-P", "<:P", ":-SS", ":SS", ":-W", ":W", ":-<", ":<", ">:P", ">:-P", ">:/", ";))", "^:)^", ":-J", "(*)", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:", ":SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:", ":RAZZ:", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:", ":WINK:", ":!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:", ":MRGREEN:"]; images = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = 0; i <images.snapshotlength; i++) { img = images.snapshotitem(i); alt = img.alt.touppercase(); for (var j in smilies) { if (alt == smilies[j]) { replacement = document.createtextnode(alt);

56 img.parentnode.replacechild(replacement, img); alt 3. alt ASCII 4. <img> ASCII Javascript [ ] smilies = [":)", ":-)" ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/", ":/", ":X", ":-X", ":\">", ":P", ":-P", ":O", ":-O", "X-(", "X(", ":->", ":>", "B-)", "B)", ">:)", ":((", ":(((", ":-((", ":))", ":-))", ":- ", ": ", "O:-)", "O:)", ":-B", ":B", "=;", "I)", "I-)", " -)", " )", ":-&", ":&", ":-$", ":$", "[-(", ":O)", "3:-O", ":( )", "**==", "(~~)", "*-:)", "8-X", "8X", "=:)", "<):)", ";;)", ":*", ":-*", ":S", ":-S", "/:)", "/:-)", "8- ", "8 ", "8-", "8", "(: ", "=P~", ":-?", ":?", "#-O", "#O", "=D>", "~:>", "%%-", "~O)", ":-L", ":L", "[-O<", "[O<", "$-)", "$)", ">-)", ":-\"", ":^O", "B-(", "B(", ":)>-", "[-X", "[X", "\\:D/", ">:D<", "(%)", "=((", "#:-S", "#:S", "=))", "L-)", "L)", "<:-P", "<:P", ":-SS", ":SS", ":-W", ":W", ":-<", ":<", ">:P", ">:-P", ">:/", ";))", "^:)^", ":-J", "(*)", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:", ":SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:", ":RAZZ:", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:", ":WINK:", ":!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:", ":MRGREEN:"]; XPath alt <img> XPath

57 images = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 3 <img> alt touppercase() alt for (var i = 0; i <images.snapshotlength; i++) { img = images.snapshotitem(i); alt = img.alt.touppercase()) for (var j in smilies) { if (alt == smilies[j]) { //... <img> replacement = document.createtextnode(alt); img.parentnode.replacechild(replacement, img); frownies.user.js 5.7 : Zoom Textarea Zoom Textarea <textarea> <textarea>

58 Enter 42: zoomtextarea.user.js // ==UserScript== Zoom Textarea add controls to zoom textareas * // ==/UserScript== var textareas, textarea; textareas = document.getelementsbytagname( textarea ); if (!textareas.length) { return; function textarea_zoom_in(event) { var link, textarea, s; link = event.currenttarget; textarea = link._target; s = getcomputedstyle(textarea, ""); textarea.style.width = (parsefloat(s.width) * 1.5) + "px"; textarea.style.height = (parsefloat(s.height) * 1.5) + "px"; textarea.style.fontsize = (parsefloat(s.fontsize) + 7.0) + px ; event.preventdefault(); function textarea_zoom_out(event) { var link, textarea, s; link = event.currenttarget; textarea = link._target; s = getcomputedstyle(textarea, ""); textarea.style.width = (parsefloat(s.width) * 2.0 / 3.0) + "px"; textarea.style.height = (parsefloat(s.height) * 2.0 / 3.0) + "px"; textarea.style.fontsize = (parsefloat(s.fontsize) - 7.0) + "px"; event.preventdefault(); function createbutton(target, func, title, width, height, src) { var img, button; img = document.createelement( img ); img.width = width; img.height = height; img.style.bordertop = img.style.borderleft = "1px solid #ccc"; img.style.borderright = img.style.borderbottom = "1px solid #888";

59 img.style.marginright = "2px"; img.src = src; button = document.createelement( a ); button._target = target; button.title = title; button.href = # ; button.onclick = func; button.appendchild(img); return button; for (var i = 0; i <textareas.length; i++) { textarea = textareas[i]; textarea.parentnode.insertbefore( createbutton( textarea, textarea_zoom_in, Increase textarea size, 20, 20, data:image/gif;base64, + R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3%2BLOys6WkpmJiYvDw8fX19vb + 296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kho%2Bjo6bKytZqZml5eYMLBxNra21JSU3 + Jxc3RzdXl4emJhZOvq7KamppGQkr29vba2uGBgYdLR1dLS0lBPUVRTVYB%2Fgvj4%2BYK + Bg6SjptrZ3cPDxb69wG1tbsXFxsrJy29vccDAwfT09VJRU6uqrFlZW6moqo2Mj4yLjLKy + s%2fj4%2bk%2busu7t783nz3l4e19fx7u6vaalqnps1mjhylzvv318ftfw2uhhsg9uccv + KzfHw8qqqrNPS1eXk5tvb3K%2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5 + mym11dxp2cnm9vcfxcxaojo0pjssc%2fwuxk6aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC + H5BAAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4JlB0pOCkEiRQKKRxM + gkwmgdfeqbypprj4gawwlckqsijwqbaqjcunsw1mksualnivvjzivsio7gruagzuoptpc + iguemyntiwmhgc2kal5hcbenydlcwc7gob1ldzrdwlzmazoejl83vpb3ggafundo5w%2f + AFRQxJPj7J4aMhYWCoPyASFFRIAA7 ), textarea); textarea.parentnode.insertbefore( createbutton( textarea, textarea_zoom_out, Decrease textarea size, 20, 20, data:image/gif;base64, + R0lGODlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2BPb29%2FX19mJiY + %2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho4KBg729vWJhZK%2BuskZF + R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2dDQ0W1tbpmZm8DAwfT09fHw8n18f + uli49lr1v5eyojo6vbpua6tr769wehhsnra20pjstps1kuqrnps1zmym%2b7t77kys8rj + y%2fj4%2basjpm9uca%2bvsmjhyqalqhrzdvjru8pdxvrtvcvkzc3nz0pks9rz3evq7mc + %2FwsXFxp2cnnl4e1VVVu%2Fv8ba2uM7Oz29vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh + Y1xcXZGQklZVV29vcHl4eoyLjKqpq6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA +

60 AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA + AAACH5BAAAAAAALAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0heQgG + KQTFLPQgMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVfih8dLzRTKA47 + Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8Ck4QtZUQe9faCABlGrvD + rb4aldbmu%2bvnruuobqke4ndycqcgqads%3d ), textarea); textarea.parentnode.insertbefore( document.createelement( br ), textarea); data:uri <textarea> HTML return textareas = document.getelementsbytagname( textarea ); if (!textareas.length) { return; Javascript 2 function createbutton(target, func, title, width, height, src) { createbutton 6 target <textarea> func Enter Javascript title width src height src

61 src URL data:uri 2 <img> <a> document.createelement <img> img = document.createelement( img ); img._target = target; img.width = width; img.height = height; img.style.bordertop = img.style.borderleft = "1px solid #ccc"; img.style.borderright = img.style.borderbottom = "1px solid #888"; img.style.marginright = "2px"; img.src = src; 2 2 img.style.bordertop = img.style.borderleft = "1px solid #ccc"; <a> <img> button = document.createelement( a ); button._target = target; button.title = title; button.href = # ; button.onclick = func; button.appendchild(img); 2 href Firefox target <textarea> Javascript onclick target onclick event

62 function textarea_zoom_in(event) event currenttarget link = event.currenttarget; Event target event.target Enter event.target event.target DOM event.currenttarget <textarea> target textarea = link._target; <textarea> textarea.style textarea.style.width, textarea.style.height, textarea.style.fontsize <textarea> getcomputedstyle s = getcomputedstyle(textarea, ""); textarea.style.width = (parsefloat(s.width) * 1.5) + "px"; textarea.style.height = (parsefloat(s.height) * 1.5) + "px"; textarea.style.fontsize = (parsefloat(s.fontsize) + 7.0) + px ; href? Firefox onclick Firefox onclick event.preventdefault()

63 event.preventdefault(); <textarea> onclick <textarea> data:uri for (var i = 0; i <textareas.length; i++) { textarea = textareas[i]; textarea.parentnode.insertbefore( createbutton( textarea, textarea_zoom_in, Increase textarea size, 20, 20, data:image/gif;base64, + R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3%2BLOys6WkpmJiYvDw8fX19vb + 296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kho%2Bjo6bKytZqZml5eYMLBxNra21JSU3 + Jxc3RzdXl4emJhZOvq7KamppGQkr29vba2uGBgYdLR1dLS0lBPUVRTVYB%2Fgvj4%2BYK + Bg6SjptrZ3cPDxb69wG1tbsXFxsrJy29vccDAwfT09VJRU6uqrFlZW6moqo2Mj4yLjLKy + s%2fj4%2bk%2busu7t783nz3l4e19fx7u6vaalqnps1mjhylzvv318ftfw2uhhsg9uccv + KzfHw8qqqrNPS1eXk5tvb3K%2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5 + mym11dxp2cnm9vcfxcxaojo0pjssc%2fwuxk6aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC + H5BAAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4JlB0pOCkEiRQKKRxM + gkwmgdfeqbypprj4gawwlckqsijwqbaqjcunsw1mksualnivvjzivsio7gruagzuoptpc + iguemyntiwmhgc2kal5hcbenydlcwc7gob1ldzrdwlzmazoejl83vpb3ggafundo5w%2f + AFRQxJPj7J4aMhYWCoPyASFFRIAA7 ), textarea); textarea.parentnode.insertbefore( createbutton( textarea, textarea_zoom_out, Decrease textarea size, 20, 20, data:image/gif;base64, + R0lGODlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2BPb29%2FX19mJiY + %2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho4KBg729vWJhZK%2BuskZF + R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2dDQ0W1tbpmZm8DAwfT09fHw8n18f + uli49lr1v5eyojo6vbpua6tr769wehhsnra20pjstps1kuqrnps1zmym%2b7t77kys8rj + y%2fj4%2basjpm9uca%2bvsmjhyqalqhrzdvjru8pdxvrtvcvkzc3nz0pks9rz3evq7mc + %2FwsXFxp2cnnl4e1VVVu%2Fv8ba2uM7Oz29vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh + Y1xcXZGQklZVV29vcHl4eoyLjKqpq6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA + AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA +

64 AAACH5BAAAAAAALAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0heQgG + KQTFLPQgMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVfih8dLzRTKA47 + Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8Ck4QtZUQe9faCABlGrvD + rb4aldbmu%2bvnruuobqke4ndycqcgqads%3d ), textarea); textarea.parentnode.insertbefore( document.createelement( br ), textarea); zoomtextarea.user.js Event documentation HTML 5.8 : Access Bar Access Bar Firefox Access Bar 43: accessbar.user.js // ==UserScript== Access Bar show accesskeys defined on page * // ==/UserScript== function addglobalstyle(css) {

65 var head, style; head = document.getelementsbytagname( head )[0]; if (!head) { return; style = document.createelement( style ); style.type = text/css ; style.innerhtml = css; head.appendchild(style); var akeys, descriptions, a, desc, label, div; akeys = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); if (!akeys.snapshotlength) { return; descriptions = new Array(); desc = ; for (var i = 0; i <akeys.snapshotlength; i++) { a = akeys.snapshotitem(i); desctext = ; if (a.nodename == INPUT ) { label = " + a.name + " ]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singlenodevalue; if (label) { desctext = label.title; if (!desctext) { desctext = label.textcontent; if (!desctext) { desctext = a.textcontent; if (!desctext) { desctext = a.title; if (!desctext) { desctext = a.name; if (!desctext) { desctext = a.id; if (!desctext) { desctext = a.href; if (!desctext) { desctext = a.value; desc = [ + a.getattribute( accesskey ).touppercase() + ] ; if (a.href) { desc += + desctext + ; else { desc += desctext; descriptions.push(desc); descriptions.sort();

66 div = document.createelement( div ); div.id = accessbar-div-0 ; desc = + descriptions[0] + + descriptions[i] + ; div.innerhtml = desc; document.body.style.paddingbottom = "4em"; window.addeventlistener( "load", function() { document.body.appendchild(div);, true); addglobalstyle( #accessbar-div-0 { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + border-top: 1px solid silver; + background: black; + color: white; + margin: 1em 0 0 0; + padding: 5px 0 0.4em 0; + width: 100%; + font-family: Verdana, sans-serif; + font-size: small; + line-height: 160%; + + #accessbar-div-0 a, + #accessbar-div-0 li, + #accessbar-div-0 span, + #accessbar-div-0 strong { + background-color: transparent; + color: white; + + #accessbar-div-0 div { + margin: 0 1em 0 1em; + + #accessbar-div-0 div ul { + margin-left: 0; + margin-bottom: 5px; + padding-left: 0; + display: inline; + + #accessbar-div-0 div ul li { + margin-left: 0; + padding: 3px 15px; + border-left: 1px solid silver; + list-style: none; +

67 display: inline; + + #accessbar-div-0 div ul li.first { + border-left: none; + padding-left: 0; + ); 6 1. addglobalstyle 2. accesskey accesskey 5. ul li 6. addglobalstyle 6 CSS CSS function addglobalstyle(css) { var head, style; head = document.getelementsbytagname( head )[0]; if (!head) { return; style = document.createelement( style ); style.type = text/css ; style.innerhtml = css; head.appendchild(style); 2 accesskey Firefox XPath XPath

68 var akeys, descriptions, a, i, desc, label, div; akeys = document.evaluate( document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); if (!akeys.snapshotlength) { return; 3 accesskey accesskey HTML input accesskey input input label label title input label input input value label input label accesskey label title title accesskey title title name id akeys XPathResult akeys.snapshotitem(i) akeys is an XPathResult object, so I need to get each result by calling \ akeys.snapshotitem(i). descriptions = new Array(); desc = ; for (var i = 0; i <akeys.snapshotlength; i++) { a = akeys.snapshotitem(i); desctext = ; if (a.nodename == INPUT ) { label = " + a.name + " ]", document, null,

69 XPathResult.FIRST_ORDERED_NODE_TYPE, null).singlenodevalue; if (label) { desctext = label.title; if (!desctext) { desctext = label.textcontent; if (!desctext) { desctext = a.textcontent; if (!desctext) { desctext = a.title; if (!desctext) { desctext = a.name; if (!desctext) { desctext = a.id; if (!desctext) { desctext = a.href; if (!desctext) { desctext = a.value; desc = [ + a.getattribute( accesskey ).touppercase() + ] ; if (a.href) { desc += + desctext + ; else { desc += desctext; descriptions.push(desc); Javasript sort 4 descriptions.sort(); 5 HTML accesskey <div> HTML <div> innerhtml window.addeventlistener <div> onload innerhtml HTML window.addeventlistener div = document.createelement( div ); div.id = accessbar-div-0 ; desc = + descriptions[0] + + descriptions[i] + ; div.innerhtml = desc; document.body.style.paddingbottom = "4em"; window.addeventlistener( "load",

70 function() { document.body.appendchild(div);, true); 6 CSS HTML Firefox position: fixed CSS addglobalstyle( #accessbar-div-0 { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: auto; + border-top: 1px solid silver; + background: black; + color: white; + margin: 1em 0 0 0; + padding: 5px 0 0.4em 0; + width: 100%; + font-family: Verdana, sans-serif; + font-size: small; + line-height: 160%; + + #accessbar-div-0 a, + #accessbar-div-0 li, + #accessbar-div-0 span, + #accessbar-div-0 strong { + background-color: transparent; + color: white; + + #accessbar-div-0 div { + margin: 0 1em 0 1em; + + #accessbar-div-0 div ul { + margin-left: 0; + margin-bottom: 5px; + padding-left: 0; + display: inline; + + #accessbar-div-0 div ul li { + margin-left: 0; + padding: 3px 15px; +

71 border-left: 1px solid silver; + list-style: none; + display: inline; + + #accessbar-div-0 div ul li.first { + border-left: none; + padding-left: 0; + ); accessbar.user.js CSS HTML

72 6 6.1 Greasemonkey 2 GM setvalue GM getvalue GM setvalue GM getvalue Greasemonkey URL GM setvalue GM getvalue function GM_setValue(key, value); function GM_getValue(key, defaultvalue); key value GM getvalue defaultvalue key defaultvalue key GM getvalue undefined Gresemonkey 0.3 MyPIPsTag 71

73 POST Interceptor (GM registermenucommand ) MSDN Language Filter GM getvalue GM setvalue 6.2 Greasemonkey GM registermenucommand Firefox User Script Commands function GM_registerMenuCommand(menuText, callbackfunction); menutext callbackfunction callbackfunction Greasemonkey POST Interceptor GM registermenucommand 6.3 Greasemonkey GM xmlhttprequest URL GET URL POST GM xmlhttprequest Greasemonkey LibraryLookup Amazon.com

74 Annotate Google Google del.icio.us Bloglines Tweaks Expand Bloglines Expand Flick Batch Enhancer GM xmlhttprequest Flickr REST API Flickr Hide Google Redirects Google Personal Search History <a href="...">, URL GM xmlhttprequest. 6.4 Greasemonkey Javascript Firefox XPI Adrian Holovaty Greasemonkey Compiler 1. Butler 2. Greasemonkey compiler 3. Javascript Butler 4. Creator Mark Pilgrim 5. Version Butler GUID Generator GUID { GUID 7. Greasemonkey compiler GUID GUID Generator GUID 8. Homepage

75 9. Creater Firefox Extension Firefox Opening butler.xpi Save to disk Butler Butler Butler Google Greasemonkey Compiler butler.xpi Firefox.xpi ZIP ZIP Windows 7-zip Mac Stuffit Expander butler.xpi +-- install.rdf +-- chrome/ +-- butler/ +-- content/ +-- browser.xul +-- contents.rdf +-- javascript.js 4 RDF Firefox install.rdf URL contents.rdf Firefox javascript.js

76 Greasemonkey compiler Greasemonkey URL User Script Commands Extension Developer s Extension Firefox

77 7 Greasemonkey API 7.1 GM log GM log: Javascript function GM log(message ); GM log Javascript GM log Greasemonkey 0.3 GM log Javascript 7.2 GM getvalue GM getvalue: returntype GM getvalue(key, defaultvalue ); 76

78 7.2.3 GM getvalue key defaultvalue key defaultvalue key GM getvalue undefined Greasemonkey Greasemonkey URL about:config greasemonkey.scriptvals GM getvalue Greasemonkey 0.3 GM setvalue 7.3 GM setvalue GM setvalue: function GM setvalue(key, value ); GM setvalue key value Greasemonkey

79 Greasemonkey URL GM setvalue Greasemonkey 0.3 GM getvalue 7.4 GM registermenucommand GM registermenucommand: function GM registermenucommand(menutext,callbackfunction ); GM registermenucommand User Script Commands menutext callbackfunction function callbackfunction(e): e GM registermenucommand( Some &menu text, myfunction) Some &menu text 10090

80 7.4.5 GM registermenucommand Greasemonkey GM xmlhttprequest GM xmlhttprequest: HTTP GM xmlhttprequest(details ); GM xmlhttprequest HTTP details 7 method HTTP GET POST, PUT, DELETE HTTP url URL headers HTTP headers: { User-Agent : Mozilla/4.0 (compatible) Greasemonkey, Accept : application/atom+xml,application/xml,text/ xml data HTTP (method== POST ) headers application/x-www-form-urlencoded Content-type data URL onload onerror onreadystatechange

81 onload callback onload responsedetails function onloadcallback(responsedetails); responsedetails 5 status HTTP 200 statustext HTTP responseheaders HTTP responsetext readystate onerror callback onerror responsedetails function onerrorcallback(responsedetails); responsedetails 5 status HTTP 404 statustext HTTP responseheaders HTTP responsetext readystate

82 onreadystatechange callback onreadystatechange responsedetails function onreadystatechangecallback(responsedetails); responsedetails 5 responsedetails. readystate status HTTP responsedetails.readystate 4 0 statustext HTTP responsedetails.readystate 4 responseheaders HTTP responsedetails.r eadystate 4 responsetext responsedetails.readystate 4 readystate HTTP Atom GM_xmlhttpRequest({ method: GET, url: headers: { User-agent : Mozilla/4.0 (compatible) Greasemonkey,

83 Accept : application/atom+xml,application/xml,text/xml,, onload: function(responsedetails) { alert( Request for Atom feed returned + responsedetails.status + + responsedetails.statustext + \n\n + Feed data:\n + responsedetails.responsetext); ); onreadystatechange readystate < XMLHttpRequest GM xmlhttprequest GET POST GM xmlhttprequest Greasemonkey XMLHttpRequest support in Mozilla XMLHttpRequest support in Internet Explorer XMLHttpRequest support in Safari HTTP status codes RFC 2616

84 Added Case study: Zoom Textarea. Added Storing and retrieving persistent data. Added Adding items to the menubar. Added Integrating data from other sites. Added Compiling your user script into an extension Added Case study: Frownies. Changed void to function in Greasemonkey API Reference. ( You keep using that word. I do not think it means what you think it means. ) Added What is Greasemonkey?. Thanks, Dennis. Added Case study: Dumb Quotes. Added downloadable Palm OS database for reading on mobile devices Added Parsing XML. Added Case study: Offsite Blank. 83

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

HARK Designer Documentation 0.5.0 HARK support team 2013 08 13 Contents 1 3 2 5 2.1.......................................... 5 2.2.............................................. 5 2.3 1: HARK Designer.................................

More information

HTML文書の作成

HTML文書の作成 99 C HTML 1 1 2 HTML 1 3 2 4 HTML 2 4.1... 2 4.2... 3 4.3... 5 5 HTML 8 5.1... 8 5.2... 10 5.3... 12 6 HTML 13 7 13 1 HTML HTML [1] 2 HTML HTML Hyper-Text Markup Language World Wide Web (WWW)[2] HTML Hyper-Text

More information

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

m_sotsuron

m_sotsuron iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone

More information

189 2015 1 80

189 2015 1 80 189 2015 1 A Design and Implementation of the Digital Annotation Basis on an Image Resource for a Touch Operation TSUDA Mitsuhiro 79 189 2015 1 80 81 189 2015 1 82 83 189 2015 1 84 85 189 2015 1 86 87

More information

388-356697252-2.pdf

388-356697252-2.pdf 専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]

More information

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

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.................................................

More information

HTML5&CSS3 レッスンブック

HTML5&CSS3 レッスンブック STEP 7-6 Chapter 7 FINISHING & ARRANGE style.css STEP 7-6 で 置 き 換 えた style.css の 設 定 です DESIGN POINTS デザインのポイント Google Fontsの Bowlby One で 表 示 ナビゲーションメニューの 各 リンクは 四 角 形 にデザイン コンテンツは 罫 線 で 囲 まない メインコンテンツの

More information

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................

1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS

More information

Microsoft Word - Meta70_Preferences.doc

Microsoft Word - Meta70_Preferences.doc Image Windows Preferences Edit, Preferences MetaMorph, MetaVue Image Windows Preferences Edit, Preferences Image Windows Preferences 1. Windows Image Placement: Acquire Overlay at Top Left Corner: 1 Acquire

More information

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1..............................

1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 1 1 1............................ 1 2 jquery........................ 2 3................ 3 4................... 3 2 4 1.............................. 4 2.............................. 6 3...........................

More information

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2

1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................

More information

ホームページ制作スターターズ

ホームページ制作スターターズ HTML タグ はじめての 方 ガイド Ver1.0 1 < 目 次 > 1ホームページ 構 造 2HTML タグ 3スタイルシート Copyright ナレッジコーディネーター All Rights Reserved. 2 第 1 章 ホームページ 構 造 Copyright ナレッジコーディネーター All Rights Reserved. 3 1HTMLとは ウェブ 上 の 文 書 を 記 述

More information

Microsoft PowerPoint - 2016_2b-DOM.pptx

Microsoft PowerPoint - 2016_2b-DOM.pptx < 練 習 2-11> DOMの 空 白 ノード 2_nodeVisit の 実 行 結 果 ( 前 ページ)から,HTML をルート 要 素 とするDOMの 木 構 造 を 示 しなさい ただし, 空 白 ノードは 空 白,その 他 のテキストノードは テキスト とすること HTML DOMによる 文 書 データの 参 照 と 変 更 DOMツリー 内 のノード 参 照 相 対 位 置 によるノード

More information

文 書 構 造 とスタイル

文 書 構 造 とスタイル 第 4 回 の 内 容 文 書 構 造 とスタイル CSSの 基 礎 図 表 の 利 用 文 書 構 造 とスタイル 自 己 紹 介 のHTML 文 書 放 送 太 郎 の 自 己 紹 介

More information

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

CSS3

CSS3 オレたちAndroid CSS @media only screen and (max-device-width: 480px) {! div#wrapper {!! width: 400px;! }! div#header {!! background-image: url(media-queries-phone.jpg);!! height: 93px;!! position: relative;!

More information

/ [Save & Submit Code]ボタン が 下 部 やや 左 に ありますが このボタンを 押 すと 右 上 の 小 さいウィンドウ(the results tab) が 本 物 のブラウザのようにアク ションします (ブラウザの 例 : Chrome(グーグルクロム) Firefox(

/ [Save & Submit Code]ボタン が 下 部 やや 左 に ありますが このボタンを 押 すと 右 上 の 小 さいウィンドウ(the results tab) が 本 物 のブラウザのようにアク ションします (ブラウザの 例 : Chrome(グーグルクロム) Firefox( (Why) -((we))- +(learn)+ @(HTML)@? / どうしてHTMLを 覚 えるのか? -(Every webpage you look at)- +(is written)+ (in a language called HTML). / Webページはどのページであれ HTML 言 語 を 使 って 書 かれています -(You)- +(can think of)+ @(HTML)@

More information

インターネットマガジン1998年11月号―INTERNET magazine No.46

インターネットマガジン1998年11月号―INTERNET magazine No.46 6.2% 4 50.5% 4 3 8.9% 25.3% 3 9.2% 290 INTERNET magazine 1998/11 5 @media H1 { color: #FF0000;

More information

1 1 1.......................... 1 2........................ 2 2 3 1.................. 3 2.......................... 5 3........................... 6 4

1 1 1.......................... 1 2........................ 2 2 3 1.................. 3 2.......................... 5 3........................... 6 4 1 1 1.......................... 1 2........................ 2 2 3 1.................. 3 2.......................... 5 3........................... 6 4........................ 7 3 Ajax 8 1...........................

More information

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................

1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ HTML 1 1 1.......................... 1 2........................... 1 3 CSS CSS.................... 2 4........................... 3 2 4 1................ 4 2..................... 6 3.....................

More information

あいち電子自治体ガイドライン(第1章)

あいち電子自治体ガイドライン(第1章) 1-1 HTML/XHTML 5 1-2 h 6 1-3 TITLE 7 1-4 8 1-5 9 1-6 10 1-7 11 1-8 12 2-1 13 2-2 14 2-3 15 2-4 16 2-5 17 2-6 18 2-7 19 2-8 20 3-1 21 3-2 22 3-3 23 3-4 24 3-5 25 3-6 4 26 3-7 27 3-8 28 - i - 4-1 29 4-2

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

untitled

untitled JavaScript HP JavaScript JavaScript Web JavaScript Web JavaScript JavaScript JavaScript HTML HTML HTML JavaScript 1. JavaScript ON/OFF 2. JavaScript 3. 4. 5. 6. 7. 8. 9. 10. if 11. if 12. switch 13. 14.

More information

(1) ,,,,, <> ( ) (/ ) (2) HTML5 (3) HTML (4) html (ja) (5) JavaScript CSS (6)

(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript

More information

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24 3 : HTTP : HTML4 2 / 24 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac:

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン(2) CSS (Cascading Style Sheets) ここまで HTML は 文 章 の 意 味 的 な 役 割 を 記 述 するもので 表 示 はブラウザ 次 第 であること を 強 調 してきました あるブラウザでの 表 示 方 法 を 前 提 に HTML で 見 た 目 を 制 御 しようとす ると 他 の 環 境 では 意 味 が 通 じにくい 相 互

More information

Introduction to Information and Communication Technology (a)

Introduction to Information and Communication Technology (a) Introduction to Information and Communication Technology (a) 5 th week: 1.4 Transmission, exchange and evaluation of information Kazumasa Yamamoto Dept. Computer Science & Engineering Introduction to ICT(a)

More information

10 11 12 33.4 1 open / window / I / shall / the? 79.3 2 something / want / drink / I / to. 43.5 3 the way / you / tell / the library / would / to / me

10 11 12 33.4 1 open / window / I / shall / the? 79.3 2 something / want / drink / I / to. 43.5 3 the way / you / tell / the library / would / to / me -1- 10 11 12 33.4 1 open / window / I / shall / the? 79.3 2 something / want / drink / I / to. 43.5 3 the way / you / tell / the library / would / to / me? 28.7 4 Miyazaki / you / will / in / long / stay

More information

0序文‐1章.indd

0序文‐1章.indd 本 書 に 記 載 されたURL 等 は 執 筆 時 点 でのものであり 予 告 なく 変 更 される 場 合 があります 本 書 の 使 用 ( 本 書 のとおりに 操 作 を 行 う 場 合 を 含 む)により 万 一 直 接 的 間 接 的 に 損 害 が 発 生 し ても 出 版 社 および 著 者 は 一 切 の 責 任 を 負 いかねますので あらかじめご 了 承 下 さい Microsoft

More information

Microsoft Word - Live Meeting Help.docx

Microsoft Word - Live Meeting Help.docx 131011 101919 161719 19191110191914 11191417 101919 1915101919 Microsoft Office Live Meeting 2007 191714191412 1913191919 12 151019121914 19151819171912 17191012151911 17181219 1610121914 19121117 12191517

More information

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet 2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

Microsoft PowerPoint - css.ppt [互換モード]

Microsoft PowerPoint - css.ppt [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 W3Cで 推 奨 される

More information

10 2000 11 11 48 ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) CU-SeeMe NetMeeting Phoenix mini SeeMe Integrated Services Digital Network 64kbps 16kbps 128kbps 384kbps

More information

JavaScriptプログラミング入門

JavaScriptプログラミング入門 JavaScript 2015 8 15 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

4 How to Print Cards When you want to print Select the cards you would like to print from your WORD LIST. About the WORD LIST To print multiple cards,

4 How to Print Cards When you want to print Select the cards you would like to print from your WORD LIST. About the WORD LIST To print multiple cards, 5 Flash Cards Maker APRICOT Publishing www.apricot-plaza.co.jp 4 How to Print Cards When you want to print Select the cards you would like to print from your WORD LIST. About the WORD LIST To print multiple

More information

LWW EJ on Ovid LWW Ovid Online (Ovid Web Gateway) Ovid Online LWW tutorial Ovid Online Refresh Ovid Online LWW Ovid Medline, Cinahl, EBMR, Ovid

LWW EJ on Ovid LWW Ovid Online (Ovid Web Gateway) Ovid Online LWW tutorial Ovid Online Refresh Ovid Online LWW Ovid Medline, Cinahl, EBMR, Ovid LWW EJ on Ovid Tutorial For Kagawa University Sep 2005 Ovid Technologies Japan Office japan@ovid.com Visit our homepage at http://www.ovid.jp/site/index.html for more Japanese documents and latest news.

More information

Microsoft PowerPoint - css [互換モード]

Microsoft PowerPoint - css [互換モード] 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく 使

More information

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1

: 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 : 1/15( ): HTML web page (2) 1/18( ): (1) 1/25( ): (2) 1 2 : : 1 1 : 3 : 2 (.ppsx) (A0nxxyyy.ppsx) presen (1 ) ID:A0nxxyyy Name: Title: 3 HTML (HyperText Markup Language) 4 ( ) http://pweb.cc.sophia.ac.jp

More information

インターネットマガジン2004年3月号―INTERNET magazine No.110

インターネットマガジン2004年3月号―INTERNET magazine No.110 C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++ c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300;

More information

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ 8 : Web Same Origin Policy : XML :, XML http://www.w3.org/xml/ http://www.w3.org/tr/dom-level-3-core 1 / 31 xml.html: XML xpath-test.html: XPATH valid-test.html: XML (IE ) xslt-test.html: JS XSLT xslt-test.xml:

More information

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3...................

1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3................... 0448051 1 1 1........................... 1 2.............................. 1 2 2 1........................... 2 2...................... 3 3.................... 4 4........................ 6 5...........................

More information

7_16.dvi

7_16.dvi Vol. 49 No. 7 2360 2371 (July 2008) Ajax 1 Ajax Ajax JavaScript MVC A Framework for Ajax-enabled Business Applications Takahide Matsutsuka 1 Ajax gains public attention these days. Using Ajax, we can provide

More information

nopcommerce 2.2 2.1.6 Adobe Flash ( 1 ) 1 nopcommerce 2.2 ( [5, p.3-4] )

nopcommerce 2.2 2.1.6 Adobe Flash ( 1 ) 1 nopcommerce 2.2 ( [5, p.3-4] ) nopcommerce 2.2 NopCommerce (Ver.2.3) NopCommerce 2.1.1 (OS) Windows 7 Windows Vista Windows XP Windows Server 2003 Windows Server 2008 2.1.2 Web Internet Information Service (IIS) 6.0 2.1.3 ASP.NET 4.0

More information

untitled

untitled Junaio 2011 11/4 Location Base AR GLUE AR www.junaio.com Junaio.com www.junaio.com JunaioDevelopper JunaioDevelopper Public Description public metaio Private D D D OK Create Junaio 3D Description

More information

Taro-CSS.jtd

Taro-CSS.jtd CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML

More information

elemmay09.pub

elemmay09.pub Elementary Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Activity Bank Number Challenge Time:

More information

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

More information

2

2 http: Develop Simply, Realize Conceived 1 2 3 4 5 6 7 8 9 10 11 12 13 14 tbody tr div [_im_enclosure] div [_im_repeater] span [_im_enclosure] span [_im_repeater] ol li ul li select option 15 1. Detecting

More information

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正

2 詳 細 なレイアウトを 記 述 できる HTMLよりレイアウト 記 述 力 が 高 い 例 )テキストや 画 像 を 好 きな 位 置 に 配 置 できる HTMLから レイアウトに 関 する 記 述 を 除 去 で きる HTMLがシンプルに 文 法 間 違 いを 減 らせる 情 報 を 正 1 情 報 基 礎 CSSを 用 いたWebページ 作 成 CSSとは Cascading Style Sheetの 省 略 表 記 シー エスエスと 読 む Webページのレイアウト( 視 覚 的 構 造 )を 定 義 する スタイルシート の 規 格 の 一 つ Webの 標 準 化 団 体 であるW3C(World Wide Web Consortium)によって 標 準 化 現 在 ひろく

More information

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6.....................

1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6..................... web 0448039 1 1 1............................ 1 2.............. 1 3................... 1 4...................... 1 5 Web................. 2 6...................... 3 7 HTML CSS.................... 3 8....................

More information

InfoPros13_digest.key

InfoPros13_digest.key ! CSS sample2.css h1 h1 { color : blue ; } : ; { } : 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size:

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

HTML5 による Webサイト制作の基本 株式会社サイバーガーデン 益子 貴寛 2012年4月7日 土曜日 CSS Nite in OKAYAMA, Vol.2 with Microsoft アップル http://www.apple.com/jp/ ローソン http://www.lawson.co.jp/

More information

untitled

untitled 25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)

More information

卒論タイトル

卒論タイトル 1 Web, [ ] [ ] [ ] [ ] [ ],.,,.,,., Web, Web 3. Web., 3,, IDF. 2 1 4 1.1... 4 1.2... 4 1.3... 4 1.4... 5 1.5... 5 2 6 2.1 Web UI[2]... 6 2.1.1... 6 2.1.2... 7 2.2 [3]... 7 2.2.1... 7 2.2.2... 7 2.3 Web

More information

WordPress Web

WordPress Web 0948011 1 1 1.............................. 1 2 WordPress....................... 2 3........................ 3 4........................ 4 2 4 1 Web......... 4 3 5 1 WordPress...................... 5 2..........................

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

1 1 2 2 3 3 3.1 RSS Dripper [1]............................................ 3 3.2 Whazzup [2].............................................. 3 3.3 Summ

1 1 2 2 3 3 3.1 RSS Dripper [1]............................................ 3 3.2 Whazzup [2].............................................. 3 3.3 Summ 2011 08H046 1 1 2 2 3 3 3.1 RSS Dripper [1]............................................ 3 3.2 Whazzup [2].............................................. 3 3.3 Summify [3]..............................................

More information

p { color: yellow } div#hoge { color: green; } div.fuga { color: red; } div { color: orange; } div[id=hoge] { color: blue; } div#hoge

More information

グラフ数値読み取りシステム (GSYS2.4) 利用の手引

グラフ数値読み取りシステム (GSYS2.4) 利用の手引 (GSYS2.4) GSYS2.4 Manual SUZUKI Ryusuke Hokkaido University Hospital 2011 6 7 Abstract GSYS2.4 is an update version of GSYS version 2. Main features added in this version are Magnifying glass function,

More information

Internet Explorer 1. Under the Tools or Settings icon in the toolbar, click on Internet Options 2. Ensure Delete browsing history on exit box is unche

Internet Explorer 1. Under the Tools or Settings icon in the toolbar, click on Internet Options 2. Ensure Delete browsing history on exit box is unche 日 本 語 Device Registration Guide Having trouble registering for our digital research? If you have already registered for our digital product and you are being prompted to register again, please follow the

More information

1 2 3 4

1 2 3 4 LC-32GH1 LC-32GH2 1 2 3 4 5 4 6 7 8 9 10 11 1 2 3 4444444444 4444444 444444444 OIL BAR BAR CLINIC CLINIC 1 2 1 2 1 2 3 4 1 2 1 2 See page 44 if you wish to display menu screens

More information

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー

HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパー Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込

More information

MOTIF XF 取扱説明書

MOTIF XF 取扱説明書 MUSIC PRODUCTION SYNTHESIZER JA 2 (7)-1 1/3 3 (7)-1 2/3 4 (7)-1 3/3 5 http://www.adobe.com/jp/products/reader/ 6 NOTE http://japan.steinberg.net/ http://japan.steinberg.net/ 7 8 9 A-1 B-1 C0 D0 E0 F0 G0

More information

JC オンライン投稿の操作方法について(mac) 2011_9 FINAL

JC オンライン投稿の操作方法について(mac) 2011_9 FINAL Journal of Cardiology Journal of Cardiology Cases < > Elsevier Editorial System > > Journal of Cardiology.. http://ees.elsevier.com/jjcc Journal of Cardiology Cases http://ees.elsevier.com/jccase Guide

More information

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html

More information

第3回HP講習会資料ver1.2(2007.9.20)

第3回HP講習会資料ver1.2(2007.9.20) 1.はじめに 第 3 回 技 術 センター 職 員 向 けHP 講 習 会 では スタイルシートの 基 礎 として CSSを 使 った Webページを 作 成 していきます HTMLだけでは 出 来 ないCSSを 用 いたレイアウトを 分 かり 易 く 体 験 してもらえるように 今 回 はCSSの 中 でもクラスやIDといった 概 念 を 省 いています 2.スタイルシートとは? スタイルシート

More information

fiš„v5.dvi

fiš„v5.dvi (2001) 49 2 293 303 VRML 1 2 3 2001 4 12 2001 10 16 Web Java VRML (Virtual Reality Modeling Language) VRML Web VRML VRML VRML VRML Web VRML VRML, 3D 1. WWW (World Wide Web) WWW Mittag (2000) Web CGI Java

More information

設 定 を 変 更 する 前 に 反 映 させたい Group と Profile が 選 択 されているかをご 確 認 下 さい A. General Settings A- インターフェイスの 外 装 色 を 変 更 する (Customize Colours) この 項 目 では インターフェ

設 定 を 変 更 する 前 に 反 映 させたい Group と Profile が 選 択 されているかをご 確 認 下 さい A. General Settings A- インターフェイスの 外 装 色 を 変 更 する (Customize Colours) この 項 目 では インターフェ EBSCO Admin のトップページにアクセスし 発 行 された ID/PW を 入 力 してログインしてください ID PW を 入 力 2 Login する Customize Services Branding をクリックして 下 さい 画 面 が 下 図 のものに 切 り 替 わります この 画

More information

[2] 1. 2. 2 2. 1, [3] 2. 2 [4] 2. 3 BABOK BABOK(Business Analysis Body of Knowledge) BABOK IIBA(International Institute of Business Analysis) BABOK 7

[2] 1. 2. 2 2. 1, [3] 2. 2 [4] 2. 3 BABOK BABOK(Business Analysis Body of Knowledge) BABOK IIBA(International Institute of Business Analysis) BABOK 7 32 (2015 ) [2] Projects of the short term increase at present. In order to let projects complete without rework and delays, it is important that request for proposals (RFP) are written by reflecting precisely

More information

@tikeda Sass (scss) Less,CSS

@tikeda Sass (scss) Less,CSS Sass @tikeda Sass (scss) Less,CSS Agenda About Cookpad s Coding Style Sass Engineer + Designer 45 Sass / Haml GitHub cookpad.com 1 user UX UI Designer Engineer Engineer Directer team Directer Engineer

More information

2

2 OCaml Web HTML5 IT PPL 2012 Web 2012 8 21 ( ) 14:30-17:30 2 Web JavaScript HTML5 3 Web JavaScript CoffeeScript Dart Haxe S2JS (Scala) JSX Ocamljs, Js_of_ocaml (OCaml) 4 OCaml 5 6 js_of_ocaml 7 OCaml Web

More information

Technische Beschreibung P82R SMD

Technische Beschreibung P82R SMD P26 halstrup-walcher GmbH http://www.krone.co.jp/ Stegener Straße 10 D-79199 Kirchzarten, Germany 124-0023 2-22-1 TEL:03-3695-5431 FAX:03-3695-5698 E-MAIL:sales-tokyo@krone.co.jp 530-0054 2-2-9F TEL:06-6361-4831

More information

すばやく小さくはじめられる HTML5 CSS3 JavaScriptで 青森のコンテンツをつくる 青森大学ソフトウェア情報学部 小久保 温(こくぼ あつし) alert('x=' + x); var styletable = { normal: "default", syncing: "syncing", failed:

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

More information

スライド 1

スライド 1 第 7 講 観 光 情 報 論 2008 年 6 月 4 日 Style Sheet (CSS) 宮 国 薫 子 1 スタイルシート (CSS) CSSとは(Cascading Style Sheets) 本 来 ホームページにデザインを 加 える 機 能 の すべて 教 科 書 で 言 う スタイルシート とはCSSのことを 指 す CSSを 使 うと Page 106 にあるようにホーム ページの

More information

Cascade Style Sheet

Cascade Style Sheet SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;

More information

エレクトーンのお客様向けiPhone/iPad接続マニュアル

エレクトーンのお客様向けiPhone/iPad接続マニュアル / JA 1 2 3 4 USB TO DEVICE USB TO DEVICE USB TO DEVICE 5 USB TO HOST USB TO HOST USB TO HOST i-ux1 6 7 i-ux1 USB TO HOST i-mx1 OUT IN IN OUT OUT IN OUT IN i-mx1 OUT IN IN OUT OUT IN OUT IN USB TO DEVICE

More information

CSSで書籍組版を

CSSで書籍組版を CSSで 書 籍 組 版 を ( 有 )イー エイド 藤 島 雅 宏 FormatterClub CSS 書 籍 組 版 セミナー 講 演 資 料 開 催 日 2013 年 10 月 18 日 会 場 東 京 都 中 央 区 浜 町 区 民 館 簡 単 そう 易 しい 簡 単 なことしかできない CSSはWeb 用 であり 組 版 機 能 が 劣 る コンテンツはHTMLなので 構 造 が 簡 単

More information

分散情報システム構成法

分散情報システム構成法 Web Information System Design No.3 Web 文 書 にスタイルを 付 ける Tatsuya Hagino (hagino@sfc.keio.ac.jp) 1 Webページの 構 成 要 素 直 交 技 術 を 組 み 合 わせる 内 容 スタイル プログラミング スタイル プログラミング JavaScript CSS Webページ Web 文 書 HTML 内 容

More information

Microsoft PowerPoint - InfPro_I9.pptx

Microsoft PowerPoint - InfPro_I9.pptx 今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開 HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ

More information

untitled

untitled 0 3 6 2 1 5 8 3 2 5 inquiry@j-drive-com.jp 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% 20% 80% 2005 1999 2002 90% 10% 92% 94% 77% 66% 66% 65% 60% 59% 61% CAD 48% 0% 10% 20% 30% 40% 50% 60% 70% 80% 90%

More information

eil2009062930_4.ppt

eil2009062930_4.ppt URL (Universal Resource Locator) WWW (World Wide Web) URL http://www.cs.kumamoto-u.ac.jp/ Web ftp://ftp.cc.kumamoto-u.ac.jp/ FTP (File Transfer Protocol) FTP World Wide Web (WWW) Web HTTP (HyperText Transfer

More information

Title 社 会 化 教 育 における 公 民 的 資 質 : 法 教 育 における 憲 法 的 価 値 原 理 ( fulltext ) Author(s) 中 平, 一 義 Citation 学 校 教 育 学 研 究 論 集 (21): 113-126 Issue Date 2010-03 URL http://hdl.handle.net/2309/107543 Publisher 東 京

More information

i WebTiling Web Web ( URL ) ( ) Web Web Yahoo Google Web Web Web Web Web Web Web Web Web Web 1 Web DOM( ) Web

i WebTiling Web Web ( URL ) ( ) Web Web Yahoo Google Web Web Web Web Web Web Web Web Web Web 1 Web DOM( ) Web WebTiling Web 17 2 10 i WebTiling Web Web ( URL ) ( ) Web Web Yahoo Google Web Web Web Web Web Web Web Web Web Web 1 Web DOM( ) Web ii 1 Web Web Web Web Web WebTiling Displaying and Manipulating Multiple

More information

1 Fig. 2 2 Fig. 1 Sample of tab UI 1 Fig. 1 that changes by clicking tab 5 2. Web HTML Adobe Flash Web ( 1 ) ( 2 ) ( 3 ) ( 4 ) ( 5 ) 3 Web 2.1 Web Goo

1 Fig. 2 2 Fig. 1 Sample of tab UI 1 Fig. 1 that changes by clicking tab 5 2. Web HTML Adobe Flash Web ( 1 ) ( 2 ) ( 3 ) ( 4 ) ( 5 ) 3 Web 2.1 Web Goo Web 1,a) 1,b) Web Web HTML Indicating Important Parts in Searched Web Pages by Retrieval Terms Yokoo Shunichi 1,a) Yoshiura Noriaki 1,b) Abstract: Users cannot always find retrieval terms immediately in

More information

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç

JavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç JavaScript 2009 5 28 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................

More information

XSIコンポーネントについて

XSIコンポーネントについて 1. VBS http://www.microsoft.com/japan/developer/scripting/ 2. NetView HTML FrontPage 3. File User Preference Scripting/Logging VB Script Language Scripting Language VB Script Language Script Programmer

More information

卒業論文はMS-Word により作成して下さい

卒業論文はMS-Word により作成して下さい () 2007 2006 KO-MA KO-MA 2006 6 2007 6 KO-MA KO-MA 256 :117:139 8 40 i 23 50 2008 3 8 NPO 7 KO-MA( KO-MA ) 1) (1945-) KO-MA KO-MA AD 2007 1 29 2007 6 13 20 KO-MA 2006 6 KO-MA KO-MA ii KJ 11 KO-MA iii KO-MA

More information

SNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000

More information

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ

競 合 ショップとの 差 別 化 するために ボクのショップにオリジナル 性 を 出 したいんだけど 何 かオススメの 方 法 ないかな? 前 にも 教 えたことのある HTML CSS を 使 うと 文 字 を 大 きくした り 色 を 付 けたり サイトのデザインを 自 由 に 変 更 できるよ このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ 界 No.1 とも 言 われているデザイナー ナムー が WEB ページ 作 成 の コツを 解 説 していきます 少 し 専 門 的 な 内 容 も 含 まれていますが 分 からない ことは 積 極 的 に 調 べて 1つ1つスキルアップをしていきましょう! マリー HTML CSS のプロフェッショナル うさぎだけど

More information