読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

JavaScript

Grunt v0.4をTravis CIに対応させる

以前、jQueryプラグインでTravis CI - ほげほげ(仮) ってのを書いたんですが、内容が古くなってるので書き直します。 今回もjQuery Pluginでのサンプルです。 かなりざっくりとした説明ですが、細かい部分はGrunt公式ドキュメント見たほうが手っ取り早いの…

jQueryプラグインでTravis CI

jQueryプラグインでTravis CIが使えないか色々試したメモです。nodeとかGrunt使いますが、まだまだ全然使ったことないので何か間違いがあれば指摘ください。 テストフレームワークはQUnitです。QUnit自体の説明は省略します。 QUnit Gruntインストール Grunt…

CoffeeScriptの環境を作ってみた

最近、何かと耳にするCoffeeScriptの環境を自分も作ってみました。 前提環境 MacOS X Lion node.js インストール済み CoffeeScriptのインストール ターミナルから次のコマンド一発でインストールできます $ npm install -g coffee-script Vimプラグインイン…

kanazawa.js v1.7に参加してきました。

kanazawa.jsに参加してきたので、簡単にまとめ。 内容 kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催) 発表されたスライドへのリンク まだ一部しかアップロードされてないみたいです。 ・JavaScript小史 // Speaker Deck ・Kanazawa.JavaScript.…

長い文字列を省略するjQueryプラグインを作った

ガーっと作りました。 完璧な出来ではないです。はい。 ソースはGithubに上げてます。 STAR-ZERO/ellipsis.js · GitHub 使い方は簡単です。 $('#hoge').ellipsis(); これを実行すると1行を超える場合に省略されて省略文字が末尾に表示されます。 引数オプシ…

QUnitをPhantomJSで実行する

ちょっとメモc⌒っ゚д゚)っφ メモメモ... QUnitをPhantomJSで実行するには phantomjs/examples/run-qunit.js at master · ariya/phantomjs · GitHub のJSをかましてあげます。 上のJSをQUnitのindex.htmlがあるディレクトリにおきます。 最後に実行です。 ターミナ…

Chromeでローカルファイル参照時にエラー

ちょっとした動作確認はローカルでやっちゃうオレなので。 サーバーに置くのとか面倒だし。 ChromeでAjaxを使ってローカルファイル参照時に次のようなエラーが出ます。 XMLHttpRequest cannot load file:///xxx/hoge. Origin null is not allowed by Access-…

久々にJavaScriptを書いた

なんとなくJavaScript書いてないなぁっと思って軽く書いた。 リハビリがてらJavaScriptでATNDのAPIにアクセスしてみました。 まぁ説明は別にいいですね… 単純なサンプルをGitHubにあげました。 STAR-ZERO/SampleATND · GitHub 特に難しいことは一切やってな…

WebWorkerでのデバッグ

最近WebWorkerについて色々と調べてました。 WebWorkerで一番困るのがデバッグ方法です。 DOM操作やalert、console.logが使えません。 ということで、デバッグが上手く出来る方法を探してみました。 探した結果、簡単にできそうなのが二通りかなぁって思いま…

new thisって何?

昨日、ネットを見てて気になったので調査しました。 気になったのはJavaScriptで次のような感じでした。 p = new this[s]; なんかパッと見でよく分からなかったのですが、ちゃんと考えれば簡単なことでした。 まず、次のような簡単なクラス(function)を作り…

DeviceOrientationイベントを試してみた

JavaScriptでDeviceOrientationイベントを試してみました。 DeviceOrientationは傾きなどを取得するイベントです。 詳しいことは DeviceOrientation Event Specification に書いています。 今回使用した環境はMacBookPro、ブラウザはChrome11です。 使い方は…

node.jsを試してみる

ずっと気になってた node.js を試してみました。 環境はCentOS5.6です。 node.jsにはpythonとOpenSSLが必要みたいですが、自分の環境には元々入っていたので省略しています。 ダウンロード・解凍 普通にダウンロードして解凍するだけです。 Gitからでも落と…

jQueryのajaxでdataTypeをjsonにしてみたら

ちょっと久しぶりにjQueryを使ったらハマったのでメモメモ $.ajax({ 'type': 'POST', 'url': '/hogehoge', 'dataType': 'json', 'data': {'foo': 'foo'}, 'success': function(data) { }, 'error': function(XMLHttpRequest, textStatus, errorThrown) { } }…

Userscriptを作ってみた

Greasemonkeyとかで使えるUserscriptを作ってみたました。 内容ははてなブックマークのサイトで、ブックマーク数でソートします。 コレを使うと下のように多い順にソートします。 微妙な感じですけど、良かったら使ってみてください。HatenaBookmarkSort for…

オブジェクトのプロパティとプロトタイプについて

プロパティとプロトタイプについて簡単にまとめておきます。 プロパティについて 次のようにプロパティを持ったオブジェクトを生成することができます。 // コンストラクタ function Test(a, b) { // プロパティ初期化 this.v1 = a; this.v2 = b; } var t1 =…

Canvasでデジタル時計

Canvasタグを使ったデジタル時計を作ってみました。 こんな感じです。 ココで公開してます。 DigitalClock - jsdo.it - Share JavaScript, HTML5 and CSS 初めてCanvasタグで作ったから、座標とかの計算で苦労しました(´Д`;)ソースも汚くなって、座標位置と…

Argumentsオブジェクト

JavaScriptの関数は定義されている引数と実際に関数を実行する際に渡す関数が一致していなくてもエラーは起きずに実行可能です。 例えば下のソースも問題なく動きます。 function func() { // なんかの処理 } func('a', 'b'); 便利といえば便利かもしまれま…

JavaScriptで分割代入を作ってみた【失敗作(;゚Д゚)】

Firefoxで分割代入できるのは知っていたけど、Chromeでも出来ないかなぁっと思い、作ってみました。 先に言っておくと、使い物にはなりませんΣ(゚д゚lll) function s(x, y) { for (var i = 0, n = x.length; i < n; i++) { eval('this.'+x[i]+'='+y[i]); } } …

JavaScriptからローカルファイルの画像を表示する

HTML5関連の情報を見てたら、面白そうなのがあったので試してみました。 (実はだいぶ前に公開されている情報なのですが・・・) まず、対応しているブラウザですが、Chrome5.0.375.125も対応していませんでした。Dev版とかベータ版とかは試してないですが、…

element.childNodesについて

IEと他のブラウザで若干の違いがあったので、メモしておきます。 次のようなHTMLがあった場合 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function test1() { var childs = document.getElementById('t').childNodes; for (var i = 0; i < childs.length; i++) { alert(childs[i].nodeNam…</meta></head></html>

WebDatabaseをやってみた

まずは準備として次のように変数を定義します。 var webdb = {}; webdb.db = null; Databaseオープンするメソッドを定義します。 webdb.open = function() { var dbSize = 5 * 1024 * 1024; webdb.db = openDatabase('Sample', '1.0', 'SampleDB', dbSize); …

JQueryでコロン付きのセレクターを使う場合

id等にコロンが含まれている場合

親Windowに要素を追加するときの注意【IE】

ポップアップWindowから親Windowの要素を追加するとき 次のように書いた場合 var s = document.createElement('span'); s.innerHTML = 'テスト'; window.opener.document.getElementById('d').appendChild(s); IEの場合は「インターフェイスがサポートされて…

Chromeでローカルファイルをiframeで表示したときの注意

ローカルファイルのHTMLをiframeで表示したとき、Chromeだけ挙動が違ったので、書いておきます 次のようなファイルが同一ディレクトリにある場合・Test.html <html> <head> <script type="text/javascript"> function test() { var i = document.getElementsByTagName('iframe')[0]; if(i.contentDocume</head></html>…

JSONでクロスドメイン通信の仕組み

jQuery とかを使うようになってよく見かける JSON(JavaScriptObjectNotation)という形式クロスドメインでのajax通信を可能にするもので、原理が気になって調べてみた まず通常のajaxで XMLHttpRequest を使った通信はドメインが違う場合セキュリティのため…

TwitterSearchAPIを使う

TwitterSearchAPIをJavaScriptから呼び出して結果を表示できるようにした TwitterSearchAPIを参考にして、jQueryを使って作ってみた jQueryを理解している人ならすぐできる簡単なものだと思うけど、オレはjQueryをあんまり知らないから思ったより苦戦した や…

翻訳Bookmarklet

ちょっと時間があったからBookmarkletをまたもや作ってみた今回は選択してる文字を翻訳するっていうやつ 使い方 1.下記のリンクからブックマークバーに追加する翻訳(エキサイト) 2.翻訳したい文字を選択するして、さっきのブックマークをクリック 3.…

初Bookmarklet

ちょっとJavaScriptをやろうと思い立ちBookmarkletを作ってみたBookmarklet自体は最近知ったんだけど、便利な機能ですなぁ オレが作ったのはTwitterの過去TLをページ上部に表示するってやつ簡単に説明するとTwitter画面の下に「もっと読む」の機能を 今表示…

ブラウザ判定

ちょっと気になったから調べてみた意外と簡単にブラウザの判定ができるみたい var userAgent = window.navigator.userAgent.toLowerCase(); var appVersion = window.navigator.appVersion.toLowerCase(); if (userAgent.indexOf("msie") > -1) { if (appVer…

クロージャについて

聞いたこと無い言葉だったからメモメモっとココのブログが分かりやすくまとめてあったから参考に クロージャってのは関数を返す関数があって、その中に静的な変数があって、どーたらこーたらって感じらしい言葉にするとサッパリだねサンプルだとこんな感じ f…