DOM構築後に実行
jQueryの場合
$(document).ready(function(){
// Document is ready
});
もしくは
$(function(){
// Document is ready
});
最近のJavaScriptの場合
document.addEventListener('DOMContentLoaded', function(){
// Document is ready
}, false);
CSSセレクタによる要素選択
jQueryの場合
$('#myid');
最近のJavaScriptの場合
単数選択
document.querySelector('#myid');
複数選択
document.querySelectorAll('.ourid');
Foreach文
jQueryの場合
$.each(['a', 'b', 'c'], function(i, value){
console.log(value);
});
最近のJavaScriptの場合
['a', 'b', 'c'].forEach(function(value, i){
console.log(value);
});
Map文
jQueryの場合
$.map(['a', 'b', 'c'], function(value, i){
return value + i;
});
最近のJavaScriptの場合
['a', 'b', 'c'].map(function(value, i){
return value + i;
});
Filter文
jQueryの場合
$.grep([1, 2, 3], function(v, i){
return v > 1;
});
最近のJavaScriptの場合
[1, 2, 3].filter(function(v, i){
return v > 1;
});
配列中のインデックスを返す
jQueryの場合
$.inArray('b', ['a', 'b', 'c']);
最近のJavaScriptの場合
['a', 'b', 'c'].indexOf('b');
配列であるか判別
jQueryの場合
$.isArray(['a', 'b', 'c']);
最近のJavaScriptの場合
Array.isArray(['a', 'b', 'c']);
文字列の先頭と末尾から空白を除去
jQueryの場合
$.trim(' test ');
最近のJavaScriptの場合
' test '.trim();
現在のUnixTimeを取得
jQueryの場合
$.now();
最近のJavaScriptの場合
Date.now();
JSONをパース
jQueryの場合
$.parseJSON('{"name":"John"}');
最近のJavaScriptの場合
JSON.parse('{"name":"John"}');
ちなみにJSONを作成する場合 ※jQueryにはstringifyがありません
JSON.stringify({"name":"John"});
XMLをパース
jQueryの場合
var xml = $.parseXML('<name>John</name>');
$(xml).find('name').text();
最近のJavaScriptの場合
var xml = (new DOMParser).parseFromString('<name>John</name>', 'application/xml');
xml.getElementsByTagName('name')[0].textContent;
IEのせいで最近のJavaScriptはサイトでは使えませんが。
FirefoxやChromeの拡張とかに使う場合は覚えておくと便利かも知れません。
あと他にもあったら教えて下さい。
jQueryの場合
$(document).ready(function(){
// Document is ready
});
もしくは
$(function(){
// Document is ready
});
最近のJavaScriptの場合
document.addEventListener('DOMContentLoaded', function(){
// Document is ready
}, false);
CSSセレクタによる要素選択
jQueryの場合
$('#myid');
最近のJavaScriptの場合
単数選択
document.querySelector('#myid');
複数選択
document.querySelectorAll('.ourid');
Foreach文
jQueryの場合
$.each(['a', 'b', 'c'], function(i, value){
console.log(value);
});
最近のJavaScriptの場合
['a', 'b', 'c'].forEach(function(value, i){
console.log(value);
});
Map文
jQueryの場合
$.map(['a', 'b', 'c'], function(value, i){
return value + i;
});
最近のJavaScriptの場合
['a', 'b', 'c'].map(function(value, i){
return value + i;
});
Filter文
jQueryの場合
$.grep([1, 2, 3], function(v, i){
return v > 1;
});
最近のJavaScriptの場合
[1, 2, 3].filter(function(v, i){
return v > 1;
});
配列中のインデックスを返す
jQueryの場合
$.inArray('b', ['a', 'b', 'c']);
最近のJavaScriptの場合
['a', 'b', 'c'].indexOf('b');
配列であるか判別
jQueryの場合
$.isArray(['a', 'b', 'c']);
最近のJavaScriptの場合
Array.isArray(['a', 'b', 'c']);
文字列の先頭と末尾から空白を除去
jQueryの場合
$.trim(' test ');
最近のJavaScriptの場合
' test '.trim();
現在のUnixTimeを取得
jQueryの場合
$.now();
最近のJavaScriptの場合
Date.now();
JSONをパース
jQueryの場合
$.parseJSON('{"name":"John"}');
最近のJavaScriptの場合
JSON.parse('{"name":"John"}');
ちなみにJSONを作成する場合 ※jQueryにはstringifyがありません
JSON.stringify({"name":"John"});
XMLをパース
jQueryの場合
var xml = $.parseXML('<name>John</name>');
$(xml).find('name').text();
最近のJavaScriptの場合
var xml = (new DOMParser).parseFromString('<name>John</name>', 'application/xml');
xml.getElementsByTagName('name')[0].textContent;
IEのせいで最近のJavaScriptはサイトでは使えませんが。
FirefoxやChromeの拡張とかに使う場合は覚えておくと便利かも知れません。
あと他にもあったら教えて下さい。
Google ChromeとFirefoxしか使えなかったmp3変換がOperaにも対応しました。
とは言っても実装がムリヤリな感じなのでChromeとFirefoxと比べて結構不便ですが、
まず変換する前にOpera Dragonflyを立ち上げなければいけない。
実行時間の長いスクリプトは途中で止まる可能性がありますが、
Opera Dragonflyを立ち上げとくと途中で止まりません。
次にドラッグアンドドロップで変換できません。
ファイル名入力ボックスを使う必要があります。
最後に右クリックから保存しようとするとフリーズしますが、
待っていればフリーズが解けて保存出来るようになります。
フリーズをするのは保存にObject URLではなくData URLを使っているからです。
Operaは残念ながらObject URLに対応していないので使えません。
しかし、それらを我慢すればOperaでもmp3などの音声に変換できると言うわけです。
とは言っても実装がムリヤリな感じなのでChromeとFirefoxと比べて結構不便ですが、
まず変換する前にOpera Dragonflyを立ち上げなければいけない。
実行時間の長いスクリプトは途中で止まる可能性がありますが、
Opera Dragonflyを立ち上げとくと途中で止まりません。
次にドラッグアンドドロップで変換できません。
ファイル名入力ボックスを使う必要があります。
最後に右クリックから保存しようとするとフリーズしますが、
待っていればフリーズが解けて保存出来るようになります。
フリーズをするのは保存にObject URLではなくData URLを使っているからです。
Operaは残念ながらObject URLに対応していないので使えません。
しかし、それらを我慢すればOperaでもmp3などの音声に変換できると言うわけです。
ブラウザだけでMP4/FLV/SWFの動画からMP3/M4A/AAC/WAVの音声を抽出できるサービスを作りました。
nicozonにあるmp3変換のページからサービスが利用できます。
nicozonの動画ファイルのダウンロード機能と合わせて使用すれば、
にこさうんどやnicomimiの代わりになりますね。
従来のこういうサービスはサーバー側で変換をするものですが、
このサービスの新しい所はJavaScriptで動画から音声を抽出している所です。
メリット
ブラウザ側で変換してるのでサーバーのリソースを使用しなくて済む
順番待ちとかアップロードとかダウンロードとかしないので変換する速度が速い
音声ファイルをそのまま抽出しているので音質がいい
複数の動画ファイルを同時に変換することが出来る
WebWorkerで処理しているので処理中もブラウザが固まらない
サーバから動画ファイルをアップロードしたりする形式では無いので、
プライベートな動画や著作権のある動画でも安心して使用することが出来る。
サーバから音声ファイルをダウンロードしたりする形式では無いので、
管理人が訴えられる可能性が低い
デメリット
最新のブラウザしか利用できない。※Google ChromeとFirefox
変換できるファイル
ニコニコムービーメーカーのSWFからMP3
MP3音声のFLVからMP3
WAV音声のFLVからWAV
AAC音声のFLVからM4A
AAC音声のMP4からM4A
nicozonにあるmp3変換のページからサービスが利用できます。
nicozonの動画ファイルのダウンロード機能と合わせて使用すれば、
にこさうんどやnicomimiの代わりになりますね。
従来のこういうサービスはサーバー側で変換をするものですが、
このサービスの新しい所はJavaScriptで動画から音声を抽出している所です。
メリット
ブラウザ側で変換してるのでサーバーのリソースを使用しなくて済む
順番待ちとかアップロードとかダウンロードとかしないので変換する速度が速い
音声ファイルをそのまま抽出しているので音質がいい
複数の動画ファイルを同時に変換することが出来る
WebWorkerで処理しているので処理中もブラウザが固まらない
サーバから動画ファイルをアップロードしたりする形式では無いので、
プライベートな動画や著作権のある動画でも安心して使用することが出来る。
サーバから音声ファイルをダウンロードしたりする形式では無いので、
管理人が訴えられる可能性が低い
デメリット
最新のブラウザしか利用できない。※Google ChromeとFirefox
変換できるファイル
ニコニコムービーメーカーのSWFからMP3
MP3音声のFLVからMP3
WAV音声のFLVからWAV
AAC音声のFLVからM4A
AAC音声のMP4からM4A