月別アーカイブ: 2011年9月

ページ内のURLをチェックするグリモン用user.js(自分メモ)


ページ内のURLに変換漏れやエラーがないかチェックするために作ったグリモン用user.jsです。
少し改造すれば文字列チェック用にも使えます。
※グリモン用と書いてるけど最近はGoogle Chromeでもドラッグ&ドロップで普通に使えたりする。
Google Chromeからuser.jsを削除するには「ツール」→「機能拡張」でリストを開く

html_checker.user.js


// ==UserScript==
// @name html_checker
// @include *
// ==/UserScript==

// 表示領域の幅
var w = 400;
// チェックする要素(タグ)
var tag = new Array(‘a’,’area’,’input’);
// チェックする属性
var attr = new Array(‘href’,’onclick’);
// チェックするソース
var body = document.getElementsByTagName(‘body’)[0];
// チェックするURLリスト
var str = new Array(‘w-x-w.com’,’hoge.co.jp’);
var ol = document.createElement(‘ol’);
ol.style.fontSize = ‘80%’;
ol.style.listStyleType = ‘decimal’;
ol.style.margin = ‘0’;
ol.style.padding = ‘8px 0 0 2em’;
ol.style.textAlign = ‘left’;
for(var i=0;i

初期設定のままのFireFox3.6でもHTMLに直書きされたSVGを描画するJS(自分メモ)


とある仕事でHTML内でSVGを使いたいがFireFox3.6など一部ブラウザで描画できないという問い合わせが来た。
救いは、IEはVMLで吐き出すから問題ないということだ。

早速、調べてみたところ、
ユーザ側で「about:config」を開き「html5.enable」を「true」にすれば表示できるようになることがわかった。

FirefoxでHTMLソース中のSVGやMathMLを有効にする方法

しかし、今回はユーザの設定任せにするわけにはいかないので改めて調べてみたところ、
Javascriptから吐き出された場合は、同じ条件でも描画できるということだったので、
HTML内にSVGが存在したら、JavaScriptで吐き出し直すJSを作ってみた。

サンプルデモ
※コードの詳しい説明はサンプルデモのソースにコメントアウトで記述してあります。


if(document.createElementNS){
var svgs = document.getElementsByTagName(‘svg’);
if(svgs[0]){
var ns =”http://www.w3.org/2000/svg”;
for(var i=0;iMDN > Docs > JavaScript > JavaScript Reference > 関数
このクロージャ関数はとても便利で、DOMツリーを全て取得することができます。
今回はSVG内の全ての要素を取得するために活用しました。