root/docs/amachang/20080813-procamp2008/firebug.html @ 17684

Revision 17684, 6.9 kB (checked in by amachang, 5 years ago)

Firebug の資料追加

Line 
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset=utf-8>
5        <title>プログラミングを道具として使おう！ - セキュリティ＆プログラミングキャンプ JavaScript 入門講座資料</title>
6        <style type="text/css">
7strong {
8    font-weight: bold;
9    color: #008;
10}
11
12body {
13    line-height: 1.5;
14}
15
16
17p, address {
18    margin: 1em;
19}
20
21pre {
22    margin: 1em;
23    font-family: monospace;
24    padding: 1em;
25    border: gray 5px solid;
26    background: #ddd;
27}
28
29blockquote {
30    margin: 0.5em;
31    padding: 1em;
32    background: #ddd;
33}
34
35h1 {
36    font-size: 4em;
37    color: #008;
38}
39
40@media print {
41    strong {
42        text-decoration: underline;
43    }
44}
45
46h2, h3, h4, h5, h6 {
47    page-break-before: always;
48    margin-top: 2em;
49    padding-left: 0.4em;
50    border-bottom: 2px #008 solid;
51    border-left: 0.5em #008 solid;
52}
53        </style>
54        <script type="text/javascript">
55// <![CDATA[
56
57function html(elm) {
58    elm = elm.parentNode;
59    while (elm = elm.previousSibling) {
60        if (elm.nodeName.toLowerCase() == 'pre') {
61            var code = elm.textContent || elm.innerText;
62            var d = window.open().document;
63            d.write(code);
64            d.close();
65            break;
66        }
67    }
68}
69function js(elm) {
70    elm = elm.parentNode;
71    while (elm = elm.previousSibling) {
72        if (elm.nodeName.toLowerCase() == 'pre') {
73            var code = elm.textContent || elm.innerText;
74            var div = document.createElement('div');
75            div.appendChild(document.createTextNode(code));
76            var codeEscaped = div.innerHTML;
77
78            var d = window.open().document;
79            d.write('\
80<!DOCTYPE html>\n\
81<html>\n\
82    <head>\n\
83        <meta charset=utf-8>\n\
84        <title>Sample</title>\n\
85    </head>\n\
86    <body>\n\
87\n\
88      <pre>\n\
89' + codeEscaped + '\n\
90      </pre>\n\
91\n\
92      <script type="text/javascript">\n\
93' + code + '\n\
94      </s'+'cript>\n\
95\n\
96    </body>\n\
97</html>');
98            d.close();
99            break;
100        }
101    }
102}
103window.onload = function() {
104    var elmNav = document.getElementById('nav');
105    var elmSection = document.getElementById('article');
106
107    (function(elmSection, elmList, id) {
108        var count = 1;
109        var child = elmSection.firstChild;
110        var elmSubList = document.createElement('ul');
111        elmList.appendChild(elmSubList);
112        do {
113            var tagName = child.nodeName.toLowerCase();
114            if (tagName == 'div') {
115                child.id = id + '.' + (count++);
116                var elmLi = document.createElement('li');
117                elmSubList.appendChild(elmLi);
118                var elmA = document.createElement('a');
119                elmLi.appendChild(elmA);
120                elmA.href="#" + child.id;
121                var headerTagNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
122                for (var i = 0; i < headerTagNames.length; i ++) {
123                    var elmsHeader = child.getElementsByTagName(headerTagNames[i]);
124                    if (elmsHeader.length) {
125                        var elmHeader = elmsHeader[0];
126
127                        var elmPToc = document.createElement('p')
128                        var elmAToc = document.createElement('a');
129                        elmAToc.innerHTML = '目次へ戻る';
130                        elmAToc.href = "#nav";
131                        elmPToc.appendChild(elmAToc);
132                        elmHeader.parentNode.parentNode.insertBefore(elmPToc, elmHeader.parentNode);
133
134                        elmA.appendChild(document.createTextNode(child.id.replace(/^section\./, '') + ' '));
135                        elmA.appendChild(document.createTextNode(elmHeader.firstChild.nodeValue));
136                        elmHeader.insertBefore(document.createTextNode(child.id.replace(/^section\./, '') + ' '), elmHeader.firstChild);
137                        break;
138                    }
139                }
140                arguments.callee(child, elmSubList, child.id);
141            }
142        } while(child = child.nextSibling);
143    })(elmSection, elmNav, 'section');
144};
145// ]]>
146        </script>
147    </head>
148    <body>
149        <div id="header">
150            <h1>プログラミングを道具として使おう！</h1>
151            <address>
152                Author: amachang &lt;<a href="mailto:seijro@gmail.com">seijro@gmail.com</a>&gt;<br />
153                Weblog: <a href="http://d.hatena.ne.jp/amachang/">http://d.hatena.ne.jp/amachang/</a>
154            </address>
155        </div>
156
157        <div id="nav">
158            <h2>目次</h2>
159            <!-- Auto generation -->
160        </div>
161
162        <div id="article">
163
164            <div>
165                <h2>Firebug や Bookmarklet を生かして毎日を便利にする</h2>
166                <p>
167                    プログラミングが出来ると<strong>小さなコード</strong>を使って日々の行動を便利に変えることができます！
168                    今日は、小さな JavaScript のコードをすぐ実行するための、 2 つ環境についてちょっと話したいと思います。
169                </p>
170                <ul>
171                    <li>Firebug</li>
172                    <li>Bookmarklet</li>
173                </ul>
174            </div>
175
176            <div>
177                <h2>Firebug とは</h2>
178                <p>
179                    Firebug とは、 JavaScript や CSS や HTML を書くためのツールです。
180                    C 言語でいうところの gdb や cscope などのツールにあたります。
181                </p>
182                <p>
183                    では、さっそくインストールしてみましょう！
184                </p>
185                <p>
186                    <a href="http://getfirebug.com/jp.html">Firebug - Web Development Evolved</a>
187                </p>
188            </div>
189
190            <div>
191                <h2>Bookmarklet とは</h2>
192                <p>
193                    JavaScript のコード自体をブックマークして、好きな時にそのコードを実行することが出来ます。
194                    そのブックマークに入った JavaScript のコードを Bookmarklet といいます。
195                </p>
196                <p>
197                    <a href="javascript:document.body.style.background='rgb(0, 0, 64)';void(0);">たとえばココをクリック</a>
198                </p>
199            </div>
200
201            <div>
202                <h2>Firebug を使ってみよう</h2>
203                <p>
204                    <a href="http://b.hatena.ne.jp/">ここに行って</a>
205                </p>
206<pre><code>Array.filter(document.getElementsByClassName('bookmark'), function(_,i) i &lt; 5).forEach(open);
207</code></pre>
208            </div>
209
210            <div>
211                <h2>Bookmarklet 化しよう！</h2>
212                <p>
213                    Firebug で作った機能を Bookmarklet 化しよう！
214                </p>
215            </div>
216
217        </div>
218        <div id="footer">
219            <p>This document is in the public domain.</p>
220        </div>
221    </body>
222</html>
Note: See TracBrowser for help on using the browser.