| Decimal | Hexadecimal |
|---|---|
| -0.1 | 0xBDCCCCCC |
| 0.1 | 0x3DCCCCCC |
| 0.25 | 0x3E800000 |
| 0.5 | 0x3F000000 |
| 0.75 | 0x3F400000 |
| 1 | 0x3F800000 |
| 1.25 | 0x3FA00000 |
| 1.5 | 0x3FC00000 |
| 2 | 0x40000000 |
| 3 | 0x40400000 |
| 4 | 0x40800000 |
| 5 | 0x40A00000 |
| 10 | 0x41200000 |
| 50 | 0x42480000 |
| 100 | 0x42C80000 |
| 500 | 0x43FA0000 |
| 1000 | 0x447A0000 |
DOMAttrModifiedや、DOMNodeInsertedをGreasemonkeyスクリプト内で使用していたのだが、これらのMutation eventsが非推奨となってしまったらしい。DOMAttrModifiedをMutationObserverに置き換えるとこんな感じ。
$('#hoge').bind('DOMAttrModified',function(event){
console.dir(event);
});
var mo = new MutationObserver(function(mutationRecords){
console.dir(mutationRecords);
});
mo.observe($('#hoge').get(0), {attributes: true});
変更前の値も欲しいならこう
var mo = new MutationObserver(function(mutationRecords){
console.dir(mutationRecords);
});
mo.observe($('#hoge').get(0), {attributes: true, attributeOldValue: true});
| Mutation events | Mutation Observers |
|---|---|
| DOMAttrModified | observe( Node target, {attributes: true, attributeOldValue: true} ); |
| DOMNodeInserted | observe( Node target, {childList: true} ); |
| DOMNodeRemoved | observe( Node target, {childList: true} ); |
| DOMCharacterDataModified | observe( Node target, {characterData: true, characterDataOldValue: true} ); |
| DOMSubtreeModified | observe( Node target, {subtree: true} ); |
ツール»ページの情報をクリックして、サイト別設定タブを開く。
function notifyReq(){
Notification.requestPermission(function(permission){
console.debug("Notification permission: "+permission);
if(Notification.permission == "granted"){
notify();
}
});
};
function notify(){
switch(Notification.permission){
case "granted":
new Notification("デスクトップ通知テスト", {
icon:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixMhqVE-KPC4uFvSew7A5jZ64O0oJVsUXtBJVwv6JTF0BRIV_dI0hyYUh8qEGR6pdJ-WJaYd9xk97foeo_VCFIXc1O6vI8wWbl6grHGpbItKdrIMbn4tU8w4Zeaqj05ynBJdbhEHtkyWgE/s220/logroid_150.png",
body:"デスクトップ通知のテストです",
tag:"notification-test",
});
break;
case "default":
notifyReq();
break;
case "denied":
console.warn("デスクトップ通知が拒否されています");
break;
}
};
notify();
こんなカンジで通知されます。
Notification.permissionで現在の権限を見ることができる。"default"、許可されていれば"granted"、拒否されていれば"denied"の文字列が返される。Notification.requestPermissionで、権限をリクエストする。こんなポップアップが表示される。
new Notificationにタイトルとオプションを設定したハッシュを渡す。new Notificationで得られるインスタンスには、onclose、onclick、onerror、onshowイベントが登録できる。
キャッシュから直接リクエストが解決されたため、サーバからのレスポンスはありません。キャッシュされているレスポンスについては下を参照してください。これは、Firefox 15から搭載されている、BFCache(Back-Forward Cache)という機能によるものだ。
Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。 Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。
- ページが
unloadハンドラを使用している- ページが "cache-control: no-store" をセットしている
- ページが "cache-control: no-cache" をセットしていて、サイトが HTTPS である
- ページが完全にはロードされないまま、ユーザがそのページから去るナビゲートをする
- トップレベルのページにキャッシュ不可能なフレームがある
- ページがフレーム内にあり、ユーザがそのフレーム内に新しいページをロードする（この場合、ユーザがそのページから去るナビゲートをするとそのフレームに最後にロードされたコンテンツがキャッシュされる）
ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。
- ナビゲートされたことがあるページであることを知ること（そのページがユーザのキャッシュからロードされるとき）
- ユーザがそのページを去るときのページの挙動を定義すること（ページがキャッシュされるようになっている間）
ウェブページの標準的な挙動は次のとおりです。4 ステップ目があるページもあります。ページが
- ユーザがページにナビゲートする。
- ページロード時にインラインスクリプトが実行される。
- ページがロードされると
onloadハンドラが実行される。unloadハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unloadハンドラが存在しているとそのページはキャッシュされません。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトとonloadハンドラは実行されません（ステップ 2 および 3）。ほとんどの場合、これらのスクリプトの効果が保存されているためです。
document.title="hoge";
window.open("http://example.com");
console.info("info message");
location.href="http://example.com";
以下で実際に確認することが可能です。$(document).ready(function(){
// #hogeに#fugaを追加
$('#hoge').append($('<div>').prop('id','fuga').attr('key','bar').text('baz'));
$('input[type="radio"]:checked').click(
function(){
alert($(this).val());
$('#hogehoge').addBack('.hoge').text($(this).val());
}
);
});
jQuery 1.9時点でdeprecated/removedとなったメソッドは色を分けています。.live()、.die()メソッドの例
$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
また、deprecated/removedとなっていても、同名のメソッドがdeprecated/removedではない場合は、通常のjQuery APIとしてハイライトされます。.toggle()メソッドの例
$('.target').toggle();
$('#target').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
以下で実際に確認することが可能です。.live()が削除されている。同じように、.die()も削除されている。.live()を、jQuery 1.9で使用しようとすると、以下のようなエラーが出力される。
TypeError: $(...).live is not a function
.live()は.on()に、.die()は.off()にそれぞれ置き換えられている。$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
$(document).on('click', '.live', liveFunction);
$(document).off('click', '.live', liveFunction);
$()にHTML文字列を渡して解析していたのだが、jQuery 1.9ではエラーになった。$()に渡す文字列の最初が<以外の場合はセレクタとしてみなされるようになったためだ。<で始まっていない場合、以下のようなエラーが出力される。
Error: Syntax error, unrecognized expression:この場合、
$.parseHTML()を用いることで解析することが出来る。var html_string_1="<div>hoge</div>", html_string_2=" <div>HOGE<div>FUGA</div></div>"; console.dirxml($(html_string_1).get(0)); console.dirxml($(html_string_2).get(0));
var html_string_1="<div>hoge</div>", html_string_2=" <div>HOGE<div>FUGA</div></div>"; console.dirxml($($.parseHTML(html_string_1)).get(0)); console.dirxml($($.parseHTML(html_string_2)).get(0));あれ、思ったような結果にならない・・・
var html_string_1="<div>hoge</div>", html_string_2=" <div>HOGE<div>FUGA</div></div>"; console.dirxml($($.parseHTML(html_string_1)).get(0)); console.dirxml($($.parseHTML(html_string_2.trim())).get(0));または
var html_string_1="<div>hoge</div>", html_string_2=" <div>HOGE<div>FUGA</div></div>"; console.dirxml($($.parseHTML(html_string_1)).get(0)); console.dirxml($($.parseHTML(html_string_2.replace(/^[^<]+/,''))).get(0));もうちょっと調べる必要があるな・・・
#gbx3, #gbx4 {
background-color: #2D2D2D;
background-image: none;
background-position: 0 -138px;
background-repeat: repeat-x;
border-bottom: 1px solid #000000;
font-size: 24px;
height: 29px;
opacity: 1;
position: absolute;
top: 0;
width: 100%;
z-index: 990;
}
.gbtb .gbts {
background: url("//ssl.gstatic.com/gb/images/b_8d5afc09.png") repeat scroll -27px -22px transparent;
border: 0 none;
font-size: 0;
padding: 29px 0 0;
width: 1px;
}
.gbtb .gbts {
background: url('//ssl.gstatic.com/gb/images/b_8d5afc09.png') repeat scroll -27px -22px transparent;
border: 0 none;
font-size: 0;
padding: 29px 0 0;
width: 1px;
}
['#gbx3, #gbx4 {',
'background-color: #2D2D2D;',
'background-image: none;',
'background-position: 0 -138px;',
'background-repeat: repeat-x;',
'border-bottom: 1px solid #000000;',
'font-size: 24px;',
'height: 29px;',
'opacity: 1;',
'position: absolute;',
'top: 0;',
'width: 100%;',
'z-index: 990;',
'}',
'.gbtb .gbts {',
'background: url("//ssl.gstatic.com/gb/images/b_8d5afc09.png") repeat scroll -27px -22px transparent;',
'border: 0 none;',
'font-size: 0;',
'padding: 29px 0 0;',
'width: 1px;',
'}',
'.gbtb .gbts {',
'background: url(\'//ssl.gstatic.com/gb/images/b_8d5afc09.png\') repeat scroll -27px -22px transparent;',
'border: 0 none;',
'font-size: 0;',
'padding: 29px 0 0;',
'width: 1px;',
'}'];
var wo = window.open("about:blank","hoge");
↓alert(typeof wo.name);
アクセスが拒否されました。エラーnumberは-2147024891
警告: E4X は非推奨となりました。 この機能は、Firefox 16 において content 向けにはデフォルトで無効となり、Firefox 17 では chrome 向けにもデフォルトで無効となる予定です。 そして、Firefox 18 において削除される予定となっています。 代わりに、DOMParser/DOMSerializer や非ネイティブの JXON アルゴリズムを使用してください。
JavaScript E4X が無効化されました Bug 778851 – Turn javascript.options.xml.content off by default ECMAScript for XML (E4X) は非推奨となり、Firefox 17 で無効化されました。隠し設定 javascript.options.xml.content の値を true に変更すれば有効になりますが、Firefox 18 Firefox の近い将来のバージョン (当初 Firefox 18 とされていましたが現状未定のようです) では実装そのものが完全に削除される予定です。
E4X is deprecated. It will stop working in phases, Firefox 16 through 18.
SpiderMonkey から E4X サポートが削除されました。
var hoge=<><![CDATA[ <pre class="hoge" id='fuga'> hoge </pre> ]]></>.toString(); var fuga=<><![CDATA[<pre class="hogehoge" id='fugafuga'> fuga </pre>]]></>; var fuga=<><![CDATA[<pre class="bar" id='bar'>bar</pre>]]></>.toString();
var hoge=['<pre class="hoge" id=\'fuga\'>',
' hoge',
'</pre>'].join("\n");
var fuga=['<pre class="hogehoge" id=\'fugafuga\'>',
' fuga',
'</pre>'].join("\n");
var fuga='<pre class="bar" id=\'bar\'>bar</pre>';
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf8" src="cordova-2.1.0.js"></script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
Activityファイルを開き、以下のように変更します。
package jp.blogspot.logroid.phonegap.test;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="jp.blogspot.logroid.phonegap.test"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="15" />
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="true" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
configChanges="orientation|keyboardHidden"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.google.co.jp/',
timeout: 5000,
onload: function(r){
GM_addStyle(<><![CDATA[
#hoge {
color: #CCC;
}
]]></>.toString());
GM_log( GM_info.script.version +"\n"+r.responseText );
}
});
以下で実際に確認することが可能です。// ==UserScript==
// @name GM_xmlhttpRequest Test
// @namespace http://logroid.blogspot.jp/
// @version 1
// @description GM_xmlhttpRequest 検証スクリプト
// @include http://127.0.0.1/*
// @include http://127.0.0.1:*/*
// @grant GM_log
// @grant GM_xmlhttpRequest
// ==/UserScript==
GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.google.co.jp/',
timeout: 5000,
onload: function(r){
GM_log("synchronous:false\n"+r.responseText);
}
});
GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.google.co.jp/',
timeout: 5000,
synchronous:true,
onload: function(r){
GM_log("synchronous:true\n"+r.responseText);
}
});
エラー: A parameter or an operation is not supported by the underlying object ソースファイル: file:///C:/Users/hoge/AppData/Roaming/Mozilla/Firefox/Profiles/hoge/gm_scripts/GM_xmlhttpRequest_Test/gm_xmlhttprequest_test.user.js 行: 96
- synchronous
- Boolean (Compatibility: 0.9.9+) When true, this is a synchronous request. Be careful: The entire Firefox UI will be locked and frozen until the request completes. In this mode, more data will be available in the return value.
- timeout
- Number (Compatibility: Greasemonkey 1.0+, Firefox 12) The number of milliseconds to wait before terminating the call; zero (the default) means wait forever.
Greasemonkey 1.0 adds a special Metadata Block imperative: @grant. As of version 1.0: If a script does not specify any @grant values, Greasemonkey will attempt to auto-detect the right settings. If a script specifies any values (or they have been auto detected), then it will be provided with only those API methods that it declares. The valid values are the names of those GM_ prefixed values that you wish your script to be granted access to. Otherwise the script will be granted no special API privileges, and thus run without the security constraints Greasemonkey scripts have traditionally had. If you want your script to operate in this mode, you should explicitly declare @grant none.
[Exception... "A parameter or an operation is not supported by the underlying object" code: "15" nsresult: "0x8053000f (InvalidAccessError)" location: "chrome://greasemonkey/content/xmlhttprequester.js Line: 86"]ちなみに、xmlhttprequester.jsの該当行は以下。
// this function is intended to be called in chrome's security context, so
// that it can access other domains without security warning
GM_xmlhttpRequester.prototype.chromeStartRequest =
function(safeUrl, details, req) {
this.setupReferer(details, req);
var setupRequestEvent = GM_util.hitch(this, 'setupRequestEvent', this.wrappedContentWin);
setupRequestEvent(req, "abort", details);
setupRequestEvent(req, "error", details);
setupRequestEvent(req, "load", details);
setupRequestEvent(req, "progress", details);
setupRequestEvent(req, "readystatechange", details);
setupRequestEvent(req, "timeout", details);
if (details.upload) {
setupRequestEvent(req.upload, "abort", details.upload);
setupRequestEvent(req.upload, "error", details.upload);
setupRequestEvent(req.upload, "load", details.upload);
setupRequestEvent(req.upload, "progress", details.upload);
}
req.mozBackgroundRequest = !!details.mozBackgroundRequest;
req.open(details.method, safeUrl,
!details.synchronous, details.user || "", details.password || "");
if (details.overrideMimeType) {
req.overrideMimeType(details.overrideMimeType);
}
if (details.timeout) {
req.timeout = details.timeout;
}
if (details.headers) {
var headers = details.headers;
for (var prop in headers) {
if (Object.prototype.hasOwnProperty.call(headers, prop)) {
req.setRequestHeader(prop, headers[prop]);
}
}
}
どうやらGM_xmlhttpRequestのtimeoutパラメタが悪さしているみたい。var LoggerLevel={
ALL:-99,
DEBUG:-1,
INFO:0,
WARN:1,
ERROR:2,
OFF:99
},
self=null;
var Logger=function(level){
self=this;
self.level=isNaN(level) ? LoggerLevel.INFO : level;
};
for(var key in console){
var level=LoggerLevel[key.toUpperCase()];
if(!level){level=99};
(
function(k,l){
Logger.prototype[k]=function(){
self=this;
if(self.level<=l){
return console[k].apply(console, arguments);
}
}
}
)(key, level);
};
こんな感じで実行する。
var logger=new Logger(LoggerLevel.INFO);
logger.debug("debugメッセージ");
logger.info("infoメッセージ");
logger.warn("warnメッセージ");
logger.error("errorメッセージ");
logger.dir([1,2,3,4,5]);
ブラウザのコンソールを確認すると、うまく出力されているようだ。var LoggerLevel={
ALL:-99,
DEBUG:-1,
INFO:0,
WARN:1,
ERROR:2,
OFF:99
},
self=null;
var Logger=function(level){
self=this;
self.level=isNaN(level) ? LoggerLevel.INFO : level;
};
for(var key in console){
var level=LoggerLevel[key.toUpperCase()];
if(!level){level=99};
Logger.prototype[key]=(
function(k,l){
self=this;
if(self.level<=l){
if(Function.bind){
return console[k].bind(console);
}else{
return console[k].apply(console, arguments);
}
}
}
)(key, level);
};
先ほどと同じように実行してみる。var LoggerLevel={
ALL:-99,
DEBUG:-1,
INFO:0,
WARN:1,
ERROR:2,
OFF:99
},
self=null;
var Logger=function(level){
self=this;
self.level=isNaN(level) ? LoggerLevel.INFO : level;
};
for(var key in console){
var level=LoggerLevel[key.toUpperCase()];
if(!level){level=LoggerLevel.OFF};
if(Function.bind){
Logger.prototype[key]=(
function(k,l){
self=this;
if(self.level<=l){
return console[k].bind(console);
}
}
)(key, level);
}else{
Logger.prototype[key]=(
function(k,l){
self=this;
if(self.level<=l){
return console[k].apply(console, arguments);
}
}
)(key, level);
}
};
Loggerのprototypeを作る際にあらかじめ判定するようにしてみた。var LoggerLevel={
ALL:-99,
DEBUG:-1,
INFO:0,
WARN:1,
ERROR:2,
OFF:99
};
var Logger=function(level){
var self=this;
self.level=isNaN(level) ? LoggerLevel.INFO : level;
self.make();
};
Logger.prototype.make=function(){
var self=this;
for(var key in console){
var l=LoggerLevel[key.toUpperCase()];
if(!l){l=LoggerLevel.OFF};
if(self.level<=l){
if(Function.bind){
Logger.prototype[key]=(
function(k){
return console[k].bind(console);
}
)(key);
}else{
Logger.prototype[key]=(
function(k){
return console[k].apply(console, arguments);
}
)(key);
}
}else{
Logger.prototype[key]=function(){};
}
}
};
さらに無駄な処理を省いた| OS | Windows 7 Professional Service Pack 1 32bit |
|---|---|
| CPU | Intel Core i5 M 560 2.67GHz |
| RAM | 2GB |
"hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H");パターン2
var r=new RegExp();
r.compile("h","g");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
パターン3
"hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H"); "hogehogehogehogehoge".replace(/h/g,"H");パターン4
var r=new RegExp();
r.compile("h","g");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
"hogehogehogehogehoge".replace(r,"H");
確認を行ったのは以下のブラウザ。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>これが無いと、IE8でまともに表示されない。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"/>これで、IE8はIE7互換モード、IE9は標準でレンダリングされるハズ。