技のタンブラー @wazano-blog - Tumblr Blog

入れ子の div タグと overflow スタイルのテスト

小さな div に沢山の div を並べるテストです。

new function() { // Block // set style of the container div var init = function() { var id = "id20140201ctnr"; var el = document.getElementById(id); // el.style.position = "absolute"; el.style.top = "0"; el.style.left = "0"; el.style.width = "150px"; el.style.height = "150px"; el.style.overflowX = "hidden"; el.style.overflowY = "scroll"; } var addDiv = function(id) { var parent = document.getElementById(id); var div = document.createElement("div"); // div.style.width = "90%"; div.style.height = "20px"; div.style.backgroundColor = "yellow"; div.style.borderStyle = "solid"; div.style.borderColor = "blue"; div.style.borderWidth = "1px"; parent.appendChild(div); } var main = function() { var id = "id20140201ctnr"; var i; for (i = 0; i < 100; i++) { addDiv(id); } } init(); main(); } // Block

#javascript #overflow

meta タグの動的挿入テスト

meta タグを動的に挿入するテストです。動作の確認が取れましたので無効にしてあります。

new function() { // Block var main = function() { var head = document.getElementsByTagName("head")[0]; var meta = document.createElement("meta"); meta.setAttribute("name", "apple-mobile-web-app-capable"); meta.setAttribute("content", "yes"); head.appendChild(meta); } // main(); } // Block

#javascript #meta

div をウィンドウいっぱいに表示する

青い四角をクリックすると、四角がウィンドウいっぱいに広がります。青い四角をもう一度クリックするともとに戻ります。

new function() { // Block var resize = function(id, left, top, width, height, position) { var el = document.getElementById(id); el.style.top = top; el.style.left = left; el.style.width = width; el.style.height = height; el.style.position = position; } // I need this because I don't know how to use an internal style sheet on tumblr. var init = function() { var id = "id20140126ctnr"; var el = document.getElementById(id); el.style.width = "100px"; el.style.height = "100px"; el.style.backgroundColor = "blue"; el.style.zIndex = "65536"; // bring it to front. 0 ~ 2147483647 } var main = function() { var id = "id20140126ctnr"; var el = document.getElementById(id); var full = { top: "0px", left: "0px", width: window.innerWidth + "px", height: window.innerHeight + "px", // width: window.screen.width + "px", // height: window.screen.height + "px", // Tumblr's post area is "position: relative", // so we need to set this element as "position: fixed" // to arrange its position anywhere outside of the post area. position: "fixed", } var original = { top: el.offsetTop + "px", left: el.offsetLeft + "px", width: el.offsetWidth + "px", height: el.offsetHeight + "px", position: el.style.position, } var expand = function() { resize(id, full.left, full.top, full.width, full.height, full.position); // to disable scrollbars, set overflow hidden. document.body.style.overflow = "hidden"; // disable scrolling and bouncing effects on iOS document.ontouchmove = function(e) { e.preventDefault() }; el.onclick = shrink; } var shrink = function() { resize(id, original.left, original.top, original.width, original.height, original.position); // to enable scrollbars, set overflow visible. document.body.style.overflow = "visible"; // enable scrolling and bouncing effects on iOS document.ontouchmove = function(e) { return true; }; el.onclick = expand; } el.onclick = expand; } init(); main(); } // Block

#javascript

ウェブブラウザ上で動く SVG エディタ

ウェブブラウザ上で SVG 画像を作成・編集出来るエディタ。

Method Draw

http://editor.method.ac/

SVG-edit

https://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html

こういうソフトウェアが沢山増えると良いですね。

#javascript #svg #editor

SVG を扱う為のライブラリ

自作ライブラリの設計やボキャブラリの参考に。

D3.js

https://github.com/mbostock/d3/wiki/API-Reference

svg.js

http://documentup.com/wout/svg.js

jQuery SVG

http://keith-wood.name/svgRef.html

Snap.svg

http://snapsvg.io/docs/

Raphaël

http://raphaeljs.com/reference.html

自分でライブラリを作成する際は、jQuery 的なメソッドチェーン、簡潔なメソッド名、setter/getter が同じメソッドで引数の渡し方で分岐、etc. みたいにしておけば良さそうです。

#javascript #svg #library

SVG のエレメントをタッチイベントに対応させる

ontouchstart, ontouchmove, ontouchend を使用してタッチイベントに対応するテストです。

イベントデータは event.touches[0] で取得しています。

new function() { // Block // svg query processor // id: svg tag's id // return: svg query processor var svgQuery = function(id) { return new svgQuery.int(id); } // for id generation; var prefix = "d20140106svg"; var currentId = 1000; // int: svgQuery's internal object svgQuery.int = function(id) { this.root = document.getElementById(id); }; // attr: get / set attributes to the svg root // attrs: an array of attribute to set // return: this for further processing svgQuery.int.prototype.attr = function(attrs) { if(typeof attrs == "string") { return this.getAttr(attrs); } for (var i in attrs) { this.root.setAttribute(i, attrs[i]); } return this; } // getAttr: get an attribute of SVG root // return: value of the attribute svgQuery.int.prototype.getAttr = function(attr) { return this.root.getAttribute(attr); } // style: get / set style to the svg root svgQuery.int.prototype.style = function(styles) { if(typeof styles == "string") { return this.getAttr(styles); } for (var i in styles) { this.root.style[i] = styles[i]; } return this; } // getStyle: get style entry of SVG root // return: value of the style entry svgQuery.int.prototype.getStyle = function(style) { return this.root.style[style]; } // data: get / set data // data: { "key": value, "key": value, ... } svgQuery.int.prototype.data = function(data) { if(typeof data == "string") { return this.getData(data); } for (var i in data) { this.root[i] = data[i]; } } svgQuery.int.prototype.getData = function(data) { return this.root[data]; } // newId: generate id // return: new id svgQuery.int.prototype.newId = function() { currentId++; return prefix + currentId; } // createElement: create element and elQuery object // tagName: element's tag name to create // return: new elQuery object svgQuery.int.prototype.createElement = function(tagName) { var ns = 'http://www.w3.org/2000/svg'; var el = document.createElementNS(ns, tagName); var id = this.newId(); el.setAttribute("id", id); this.root.appendChild(el); var eqInstance = new svgQuery.elQuery(id); return eqInstance;; } // circle: create circle // cx, cy, r: SVG circle attributes // return: svgQuery.elQuery object svgQuery.int.prototype.circle = function(cx, cy, r) { var el = this.createElement('circle'); return el.attr({ "cx": cx, "cy": cy, "r": r }); } svgQuery.int.prototype.element = function(id) { return new svgQuery.elQuery(id); } // on: register event handler // event: a kind of event // fun: callback function // return: this for further processing svgQuery.int.prototype.on = function(event, fun) { if(typeof this.root['on' + event] !== 'undefined') { this.root['on' + event] = fun; } else { // console.log("Warning: unknown event specified"); } return this; } //// SVG Element Query Processor // elQuery: svg element query processor // id: element's id // reutrn: nothing svgQuery.elQuery = function(id) { this.el = document.getElementById(id); } // attr: get / set attributes to the element // attrs: an array of attribute to set // return: this for further processing svgQuery.elQuery.prototype.attr = function(attrs) { if(typeof attrs == "string") { return this.getAttr(attrs); } for (var i in attrs) { this.el.setAttribute(i, attrs[i]); } return this; } svgQuery.elQuery.prototype.getAttr = function(attr) { return this.el.getAttribute(attr); } // style: get / set style to the element // styles: an array of styles to set // return: this for further processing svgQuery.elQuery.prototype.style = function(styles) { if(typeof styles == "string") { return this.getAttr(styles); } for (var i in styles) { this.el.style[i] = styles[i]; } return this; } svgQuery.elQuery.prototype.getStyle = function(style) { return this.el.style[style]; } // data: get / set data // data: { "key": value, "key": value, ... } svgQuery.elQuery.prototype.data = function(data) { if(typeof data == "string") { return this.getData(data); } for (var i in data) { this.el[i] = data[i]; } } svgQuery.elQuery.prototype.getData = function(data) { return this.el[data]; } // on: register event handler // event: a kind of event // fun: callback function // return: this for further processing svgQuery.elQuery.prototype.on = function(event, fun) { if(typeof this.el['on' + event] !== 'undefined') { this.el['on' + event] = fun; } else { // console.log("Warning: unknown event: " + event + " specified"); } return this; } var main = function() { var svgId = "d20140106svg"; // svg attributes var svgAttr = { "width": 200, "height": 100, }; // svg style // "style": "border-color: black; border-style: solid; border-width: 1", var svgStyle = { "border-color": "gray", "border-style": "solid", "border-width": 1, } // circle data var c1 = { "cx": "50", "cy": "50", "r": 15 }; // circle attributes var c1Attr = { "fill": "red", "stroke": "blue", "stroke-width": "2" }; // onmousedown var down = function(e) { var root = svgQuery(svgId); var el = svgQuery(svgId).element(this.id); var mx = e.clientX; var my = e.clientY; var cx = Number(el.attr("cx")); var cy = Number(el.attr("cy")); var dx = mx - cx; var dy = my - cy; el.data( { "dx": dx, "dy": dy } ); root.data( { "el": el } ); root.on('mousemove', drag); } var touchstart = function() { var e = event.touches[0]; var root = svgQuery(svgId); var el = svgQuery(svgId).element(this.id); var mx = e.clientX; var my = e.clientY; var cx = Number(el.attr("cx")); var cy = Number(el.attr("cy")); var dx = mx - cx; var dy = my - cy; el.data( { "dx": dx, "dy": dy } ); root.data( { "el": el } ); root.on('touchmove', touchmove); } var drag = function(e) { var root = svgQuery(svgId); var el = root.data("el"); var mx = e.clientX; var my = e.clientY; var dx = el.data("dx"); var dy = el.data("dy"); var x = mx - dx; var y = my - dy; el.attr({ "cx": x, "cy": y }); } var touchmove = function() { var e = event.touches[0]; var root = svgQuery(svgId); var el = root.data("el"); var mx = e.clientX; var my = e.clientY; var dx = el.data("dx"); var dy = el.data("dy"); var x = mx - dx; var y = my - dy; el.attr({ "cx": x, "cy": y }); } var up = function(e) { var root = svgQuery(svgId); root.on('mousemove', null); } var touchend = function() { var root = svgQuery(svgId); root.on('touchmove', null); } var select = function(e) { return false; } svgQuery(svgId).attr(svgAttr).style(svgStyle).on('selectstart', select). circle(c1.cx, c1.cy, c1.r).attr(c1Attr). on('mousedown', down).on('mouseup', up). on('touchstart', touchstart).on('touchend', touchend); } main(); } // Block

#javascript #svg #touch

SVG のエレメントをマウスで移動する

SVG のエレメントをドラッグする方法を確認します。

SVG エレメントに onmousemove を設定するとエレメントからマウスがはみ出した時にドラッグが止まってしまうため、SVG のルート要素に onmousemove を設定しています。

new function() { // Block // svg query processor // id: svg tag's id // return: svg query processor var svgQuery = function(id) { return new svgQuery.int(id); } // int: svgQuery's internal object svgQuery.int = function(id) { this.root = document.getElementById(id); // for id generation; this.prefix = id; this.currentId = 1000; }; // attr: get / set attributes to the svg root // attrs: an array of attribute to set // return: this for further processing svgQuery.int.prototype.attr = function(attrs) { if(typeof attrs == "string") { return this.getAttr(attrs); } for (var i in attrs) { this.root.setAttribute(i, attrs[i]); } return this; } // getAttr: get an attribute of SVG root // return: value of the attribute svgQuery.int.prototype.getAttr = function(attr) { return this.root.getAttribute(attr); } // style: get / set style to the svg root svgQuery.int.prototype.style = function(styles) { if(typeof styles == "string") { return this.getAttr(styles); } for (var i in styles) { this.root.style[i] = styles[i]; } return this; } // getStyle: get style entry of SVG root // return: value of the style entry svgQuery.int.prototype.getStyle = function(style) { return this.root.style[style]; } // data: get / set data // data: { "key": value, "key": value, ... } svgQuery.int.prototype.data = function(data) { if(typeof data == "string") { return this.getData(data); } for (var i in data) { this.root[i] = data[i]; } } svgQuery.int.prototype.getData = function(data) { return this.root[data]; } // newId: generate id // return: new id svgQuery.int.prototype.newId = function() { this.currentId++; return this.prefix + this.currentId; } // createElement: create element and elQuery object // tagName: element's tag name to create // return: new elQuery object svgQuery.int.prototype.createElement = function(tagName) { var ns = 'http://www.w3.org/2000/svg'; var el = document.createElementNS(ns, tagName); var id = this.newId(); el.setAttribute("id", id); this.root.appendChild(el); var eqInstance = new svgQuery.elQuery(id); return eqInstance; } // circle: create circle // cx, cy, r: SVG circle attributes // return: svgQuery.elQuery object svgQuery.int.prototype.circle = function(cx, cy, r) { var el = this.createElement('circle'); return el.attr({ "cx": cx, "cy": cy, "r": r }); } svgQuery.int.prototype.element = function(id) { return new svgQuery.elQuery(id); } // on: register event handler // event: a kind of event // fun: callback function // return: this for further processing svgQuery.int.prototype.on = function(event, fun) { switch(event) { case 'mousedown': { this.onmousedown(fun); break; } case 'mouseup': { this.onmouseup(fun); break; } case 'mousemove': { this.onmousemove(fun); break; } case 'selectstart': { this.onselectstart(fun); break; } default: { console.log("Error: unknown event specified"); } } return this; } svgQuery.int.prototype.onmousedown = function(fun) { this.root.onmousedown = fun; return this; } svgQuery.int.prototype.onmouseup = function(fun) { this.root.onmouseup = fun; return this; } svgQuery.int.prototype.onmousemove = function(fun) { this.root.onmousemove = fun; return this; } svgQuery.int.prototype.onselectstart = function(fun) { this.root.onselectstart = fun; return this; } //// SVG Element Query Processor // elQuery: svg element query processor // id: element's id // reutrn: nothing svgQuery.elQuery = function(id) { this.el = document.getElementById(id); } // attr: get / set attributes to the element // attrs: an array of attribute to set // return: this for further processing svgQuery.elQuery.prototype.attr = function(attrs) { if(typeof attrs == "string") { return this.getAttr(attrs); } for (var i in attrs) { this.el.setAttribute(i, attrs[i]); } return this; } svgQuery.elQuery.prototype.getAttr = function(attr) { return this.el.getAttribute(attr); } // style: get / set style to the element // styles: an array of styles to set // return: this for further processing svgQuery.elQuery.prototype.style = function(styles) { if(typeof styles == "string") { return this.getAttr(styles); } for (var i in styles) { this.el.style[i] = styles[i]; } return this; } svgQuery.elQuery.prototype.getStyle = function(style) { return this.el.style[style]; } // data: get / set data // data: { "key": value, "key": value, ... } svgQuery.elQuery.prototype.data = function(data) { if(typeof data == "string") { return this.getData(data); } for (var i in data) { this.el[i] = data[i]; } } svgQuery.elQuery.prototype.getData = function(data) { return this.el[data]; } // on: register event handler // event: a kind of event // fun: callback function // return: this for further processing svgQuery.elQuery.prototype.on = function(event, fun) { switch(event) { case 'mousedown': { this.onmousedown(fun); break; } case 'mouseup': { this.onmouseup(fun); break; } case 'mousemove': { this.onmousemove(fun); break; } default: { console.log("Error: unknown event specified"); } } return this; } svgQuery.elQuery.prototype.onmousedown = function(fun) { this.el.onmousedown = fun; return this; } svgQuery.elQuery.prototype.onmouseup = function(fun) { this.el.onmouseup = fun; return this; } svgQuery.elQuery.prototype.onmousemove = function(fun) { this.el.onmousemove = fun; return this; } var main = function() { var svgId = "d20140105svg"; var svgAttr = { "width": 200, "height": 100, }; // "style": "border-color: black; border-style: solid; border-width: 1", var svgStyle = { "border-color": "gray", "border-style": "solid", "border-width": 1, } // circle data var c1 = { "cx": "50", "cy": "50", "r": 15 }; // attributes var c1Attr = { "fill": "red", "stroke": "blue", "stroke-width": "2" }; // onmousedown var down = function(e) { var root = svgQuery(svgId); var el = svgQuery(svgId).element(this.id); var mx = e.clientX; var my = e.clientY; var cx = Number(el.attr("cx")); var cy = Number(el.attr("cy")); var dx = mx - cx; var dy = my - cy; el.data( { "dx": dx, "dy": dy } ); root.data( { "el": el } ); root.on('mousemove', drag); } var drag = function(e) { var root = svgQuery(svgId); var el = root.data("el"); var mx = e.clientX; var my = e.clientY; var dx = el.data("dx"); var dy = el.data("dy"); var x = mx - dx; var y = my - dy; el.attr({ "cx": x, "cy": y }); } var up = function(e) { var root = svgQuery(svgId); root.on('mousemove', null); } var select = function(e) { return false; } svgQuery(svgId).attr(svgAttr).style(svgStyle).on('selectstart', select). circle(c1.cx, c1.cy, c1.r).attr(c1Attr). on('mousedown', down).on('mouseup', up); } main(); } // Block

#javascript #svg #event

SVG のパスデータを動的に作成する

SVGPathElement インターフェイスを使用して SVG の path エレメントにパスデータを動的に追加する方法を確認します。

パスデータの処理用に jQuery 風のクエリープロセッサを作成しています。

new function() { // Block // SVG path query processor var pathQuery = function(id) { return new pathQuery.int(id); } // int: pathQuery's internal object pathQuery.int = function(id) { this.path = document.getElementById(id); }; // addSegments: add segments to a path // segments: array of segment to be added // return: this for further processing pathQuery.int.prototype.addSegments = function(segments) { var path = this.path; segments.forEach( function(val) { var type = val["type"]; var args = val["args"]; switch(type) { case "M": { var seg = path.createSVGPathSegMovetoAbs.apply(path, args); path.pathSegList.appendItem(seg); break; } case "L": { var seg = path.createSVGPathSegLinetoAbs.apply(path, args); path.pathSegList.appendItem(seg); break; } case "Z": { var seg = path.createSVGPathSegClosePath(); path.pathSegList.appendItem(seg); break; } default: { console.log("Error: unknown type of path"); } } }) return this; } // attr: set attributes to a path // attrs: an array of attribute to set // return: this for further processing pathQuery.int.prototype.attr = function(attrs) { var path = this.path; for (var i in attrs) { path.setAttribute(i, attrs[i]); } return this; } // segment data // d="M 10 10 L 90 10 L 50 90 Z" // [ { "path segment type": [argument, ...] }, ... ] var segmentData = [ { "type": "M", "args": [10, 10] }, { "type": "L", "args": [90, 10] }, { "type": "L", "args": [50, 90] }, { "type": "Z", "args": null } ] // attributes // fill="white" stroke="blue" stroke-width="10" var attributes = { "fill": "white", "stroke": "blue", "stroke-width": "10" } pathQuery("d20140104p").addSegments(segmentData).attr(attributes); } // Block

#javascript #svg

SVG のパスデータにアクセスするテスト

SVGPathSegList インターフェイスを使用して、SVG の path エレメントのパスデータへのアクセスを実際に試してみます。

new function() { // Block var span = document.getElementById("d20140103s"); var path = document.getElementById("d20140103p"); var lst = path.pathSegList; var n = lst.numberOfItems; for(var i = 0; i < n; i++) { var seg = lst.getItem(i); var str = seg.pathSegTypeAsLetter; switch(seg.pathSegType) { case SVGPathSeg.PATHSEG_CLOSEPATH: { break; } case SVGPathSeg.PATHSEG_MOVETO_ABS: { str = str + " " + seg.x + " " + seg.y; break; } case SVGPathSeg.PATHSEG_LINETO_ABS: { str = str + " " + seg.x + " " + seg.y; break; } } var d = document.createElement('div'); d.innerText = str; span.appendChild(d); } } // Block

path エレメントの d 属性に相当する情報が取得出来ました。

次は SVGPathElement インターフェイスの createSVGPathSeg... を使用して、動的にセグメントを作成する処理を試してみたいと思います。

#javascript #svg

SVG の path のデータを操作する API

SVGPathSegList インターフェイスに SVG の path エレメントのパスデータを操作するメソッドが用意されています。

;; パスのセグメントは path.pathSegList.getItem(index) で取得可能など。

http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSegList

パスデータは文字列なので自前でパースする必要があるのかと思っていました。

;; path.pathSegList.getItem(index) でパスのセグメントを取得出来るのは、SVG の path エレメントが SVGPathElement インターフェイスを実装しており、SVGPathElement インターフェイスが SVGAnimatedPathData インターフェイスを継承しており、SVGAnimatedPathData インターフェイスが pathSegList 属性を持っており、pathSegList 属性には SVGPathSegList が格納されており、SVGPathSegList インターフェイスが getItem() 操作を含有している為。

#javascript #svg #memo

SVG エレメントの動的挿入テスト

SVG に要素を追加する際に document.createElement() ではなく document.createElementNS() を使用する必要があるという話を読んだので、確認です。

確かに document.createElement() で作成した方は表示されず、インスペクタでも SVGElement ではなく HTMLElement として扱われていました。

new function() { // Block // attrs: { key1: value1, key2: value2, ... } var attr = function(el, attrs) { for(var i in attrs) { el.setAttribute(i, attrs[i]); } } // document.createElementNS() var ns = 'http://www.w3.org/2000/svg'; var el1 = document.createElementNS(ns, "circle"); attr(el1, { "cx": "60", "cy": "60", "r": "50", "fill": "white", "stroke": "blue", "stroke-width": 10 }); // document.createElement() var el2 = document.createElement("circle"); attr(el2, { "cx": "70", "cy": "60", "r": "50", "fill": "white", "stroke": "red", "stroke-width": 10 }); var parent = document.getElementById("d20140102"); parent.appendChild(el1); parent.appendChild(el2); } // Block

#javascript #svg

SVG の動的挿入テスト

SVG タグを HTML に動的に挿入するテストです。

文字列として用意した SVG タグを JavaScript を使って DOM ツリーに挿入し、グラフィックを表示させています。

DOM ツリーへのタグの挿入は insertAdjacentHTML() を使用しています。

new function(){ // Block var tag = '<svg width="150" height="150"> <rect x="10" y="10" width="100" height="100" fill="white" stroke="blue" stroke-width="10" /> ' var el = document.getElementById("d20131230div"); el.insertAdjacentHTML("afterbegin", tag); }

#javascript #svg

SVG は線の上にポインタが載っているかを判定出来る

Canvas API には Path の内側かどうかを判定する isPointInPath メソッドがありますが、Path の線上かどうかを判定するメソッドは提供されていません。

SVG では pointer-events を使用することで、線上かどうかの判定が出来ます。下の四角の枠線上にポインタを載せると、中の色が変化します。

#javascript #svg

new function() { some_code } で名前空間を作る意味

this をその名前空間の local に閉じたいから。 function() { some_code } () だと、some_code 部分における this は function の外側から引き継がれる（通常は window）のに対し、new function() { some_code } にすると、this は function 内に閉じた変数として新たに作成される。何故なら、new した時に新しいオブジェクトが作成されて、function のコンテクストがその新しいオブジェクトに設定されるから。これで合っているのかどうか、いつかきちんと確かめよう。 ### 参考 [http://liosk.blog103.fc2.com/blog-entry-32.html](http://liosk.blog103.fc2.com/blog-entry-32.html) [http://hisasann.com/housetect/2008/09/functionnew_function.html](http://hisasann.com/housetect/2008/09/functionnew_function.html) [http://nanto.asablo.jp/blog/2005/10/24/118564](http://nanto.asablo.jp/blog/2005/10/24/118564)

#javascript #memo

OpenWnn のソースコード

OpenWnn のソースコードは[ここ](https://android.googlesource.com/platform/packages/inputmethods/OpenWnn/+/refs/heads/master/)とか[ここ](https://android.googlesource.com/platform/packages/inputmethods/OpenWnn/)で公開されている様です。辞書データは[こちら](https://android.googlesource.com/platform/packages/inputmethods/OpenWnn/+/refs/heads/master/libs/libwnnJpnDic/)。 Android 以外の UN*X 環境でもビルド出来たりするのかな。今度試してみよう。

#inputmethod

Tumblr の投稿に JavaScript を埋め込む方法

Tumblr のテキスト投稿は HTML 形式での投稿も可能です。それを利用して JavaScript を記事に埋め込みます。 ### 手順 1. [アカウント設定ページ](http://www.tumblr.com/settings/account )に移動する（ダッシュボードから歯車のアイコンをクリック） 2. 「テキスト入力形式」を「プレインテキスト・HTML」にして「保存」する 3. [テキスト投稿ページ](http://www.tumblr.com/new/text)に移動する（ダッシュボードからテキストの投稿ボタンをクリック） 4. 「投稿」欄に script タグ、HTML コメント、JavaScript のコードを書き込む 5. 「保存・公開」ボタンを押して公開する ### 記述例これは現在時間を表示させるスクリプトを投稿記事に埋め込む例です。

### 補足 * HTML コメントは、Tumblr の HTML エディタが自動的に br を挿入するのを防ぐ為に入れていますが、HTML コメントの代わりに、script タグの中で改行をしないなど、他の回避方法も可能です * Markdown 記法に慣れているなら、[アカウント設定ページ](http://www.tumblr.com/settings/account )で「プレインテキスト・HTML」の代わりに「Markdown」を選択し、Markdown の Inline HTML 機能を使用する事も可能です

#javascript

JavaScript のテスト

#javascript

Trending Blogs

Recently Viewed Blogs

技のタンブラー