2013年12月13日

CoffeeScriptの基本

はじめてのCoffeeScriptに続いてCoffeeScriptの文法を読みながらCoffeeScriptの勉強

コメントアウト

コメントアウトは# 複数行コメントは###で包む

#コメント1

###
コメント2
###



これをコンパイルすると以下のようなコードが書きだされる。コメントアウトは出力されないが複数行コメントアウトは出力される。ライセンス以外はコンパイル後にコメント書き出さないイメージかな。

// Generated by CoffeeScript 1.6.3
/*
コメント2
*/


(function() {


}).call(this);



変数

myVariable = "test"


以下のように書きだされる。基本無名空間で包まれてvar なんかも自動で付けてくれる。

// Generated by CoffeeScript 1.6.3
(function() {
var myVariable;

myVariable = "test";

}).call(this);


グローバル変数

スコープをグローバルに出したい場合は以下のようにグローバルオブジェクトのプロパティとして定義する。

exports = this
exports.MyVariable = "foo-bar"


コンパイル後はグローバルに入れていくれる。

// Generated by CoffeeScript 1.6.3
(function() {
var exports;

exports = this;

exports.MyVariable = "foo-bar";

}).call(this);


関数

関数は次のように定義

func = -> "bar"


関数名 = -> 返り値みたいな感じ

// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function() {
return "bar";
};

}).call(this);



関数の引数は次のように定義

times = (a, b) -> a * b


引数aとbが利用できる

// Generated by CoffeeScript 1.6.3
(function() {
var times;

times = function(a, b) {
return a * b;
};

}).call(this);


引数のデフォルト値を指定できる。

times = (a = 1, b = 2) -> a * b


手動で書くとめんどくさいけどCoffeeなら簡単

// Generated by CoffeeScript 1.6.3
(function() {
var times;

times = function(a, b) {
if (a == null) {
a = 1;
}
if (b == null) {
b = 2;
}
return a * b;
};

}).call(this);


可変長引数にも対応

sum = (nums...) -> 
result = 0
nums.forEach (n) -> result += n
result


コンパイル後のスクリプトは以下のような感じ。可変長引数はargumentsオブジェクトではなく配列に変換されているのでforEachといった簡単に利用できる

// Generated by CoffeeScript 1.6.3
(function() {
var sum,
__slice = [].slice;

sum = function() {
var nums, result;
nums = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
result = 0;
nums.forEach(function(n) {
return result += n;
});
return result;
};

}).call(this);


関数の実行は直接実行出来る

func = ->
alert("ok")
false

func()


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function() {
alert("ok");
return false;
};

func();

}).call(this);


引数がある場合は以下のようにも実行出来る

func = (a)->
alert(a)
false

func "hoge"


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function(a) {
alert(a);
return false;
};

func("hoge");

}).call(this);


2個以上の引数がある場合は,カンマ区切りで実行出来る

func = (a,b)->
alert(b)
false

func "hoge","fuga"


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function(a, b) {
alert(b);
return false;
};

func("hoge", "fuga");

}).call(this);


スコープの生成

スコープの管理も簡単にできる

this.clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => this.clickHandler(e)


このように指定をするとthisの値を継承して利用できるようにコンパイルされる

// Generated by CoffeeScript 1.6.3
(function() {
var _this = this;

this.clickHandler = function() {
return alert("clicked");
};

element.addEventListener("click", function(e) {
return _this.clickHandler(e);
});

}).call(this);


オブジェクトの生成

オブジェクトの生成も様々な書式が利用できる

object1 = {one: 1, two: 2}

# 中括弧無しで
object2 = one: 1, two: 2

# 改行をカンマの変わりにする
object3 =
one: 1
two: 2

User.create(name: "John Smith")


// Generated by CoffeeScript 1.6.3
(function() {
var object1, object2, object3;

object1 = {
one: 1,
two: 2
};

object2 = {
one: 1,
two: 2
};

object3 = {
one: 1,
two: 2
};

User.create({
name: "John Smith"
});

}).call(this);


配列

配列の生成もいかのような書式が利用できる

array1 = [1, 2, 3]

array2 = [
1
2
3
]

array3 = [1,2,3,]


// Generated by CoffeeScript 1.6.3
(function() {
var array1, array2, array3;

array1 = [1, 2, 3];

array2 = [1, 2, 3];

array3 = [1, 2, 3];

}).call(this);


if文

if文はrubyに近い文法が利用できる

if true == true
"We're ok"

if true != true then "Panic"

# 以下と同じ意味
# (1 > 0) ? "Ok" : "Y2K!"
if 1 > 0 then "Ok" else "Y2K!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true === true) {
"We're ok";
}

if (true !== true) {
"Panic";
}

if (1 > 0) {
"Ok";
} else {
"Y2K!";
}

}).call(this);


式修飾子(後置if文)なんかも利用できる

alert "It's cold!" if heat < 5


// Generated by CoffeeScript 1.6.3
(function() {
if (heat < 5) {
alert("It's cold!");
}

}).call(this);


!ではなくてnot構文を利用することもできる

if not true then "Panic"


// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}

}).call(this);


unless文もサポート地味にうれしい

unless true
"Panic"


// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}

}).call(this);


trueと書くと===に変換されます。

if true is 1
"Type coercion fail!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true === 1) {
"Type coercion fail!";
}

}).call(this);


true isntで!==に変換される

if true isnt true
alert "Opposite day!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true !== true) {
alert("Opposite day!");
}

}).call(this);


文字列の挿入

ダブルクオーテーションで包んだら改行しても大丈夫。#{変数名}での挿入もサポート

favourite_color = "Blue. No, yel..."
question = "Bridgekeeper: What... is your favourite color?
Galahad: #{favourite_color}
Bridgekeeper: Wrong!
"


// Generated by CoffeeScript 1.6.3
(function() {
var favourite_color, question;

favourite_color = "Blue. No, yel...";

question = "Bridgekeeper: What... is your favourite color? Galahad: " + favourite_color + " Bridgekeeper: Wrong! ";

}).call(this);


タグ:CoffeeScript
posted by ねこまんま at 20:16 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Sublime Text2のEmmet用のパネル表示

いつも忘れてしまうけど「control」+「alt」+「enter」でEmmet用のパネル表示ができる。

Best of Sublime Text 3: Features, Plugins, and Settings ハート(トランプ) Scotch
posted by ねこまんま at 17:13 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年12月11日

続・YouTubeで特定のチャンネルのリストを表示

YouTubeで特定のチャンネルのリストを表示だとIE9以下でエラーで表示できなかったので修正。

getJSON()から$.ajax()に変更、dataによる値の受け渡しができないようなので引数で受け渡すようにしたらIE9以下でも動いた。

$.ajax({
url: 'http://gdata.youtube.com/feeds/api/users/チャンネル名/uploads?v=2&alt=json',
success: function(json){
var items = json.feed.entry;
$.each(items,function(i){
$("#youtube ul").append('<li><a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /><p>'+ items[i].title.$t + '</p></a></li>');
});
}
});
posted by ねこまんま at 05:36 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年11月29日

YouTubeで特定のチャンネルのリストを表示

YouTubeで特定のチャンネルのリストを表示。APIからJSONPのデータを取ってきて表示するだけ

$.getJSON('http://gdata.youtube.com/feeds/api/users/チャンネル名/uploads', {alt:'json' },function (json) {
var items = json.feed.entry;
$.each(items,function(i){
$("#youtube ul").append('<li><a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /><p>'+ items[i].title.$t + '</p></a></li>');
});
});


追記

IE9以下で動いてなかったので続・YouTubeで特定のチャンネルのリストを表示に続きます
タグ:JSONP YouTube
posted by ねこまんま at 21:40 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2013年10月30日

Alfredの使い方

AlfredはMacで利用できる高機能ランチャーソフト、「フロントエンド開発者向けのAlfred Workflow - アインシュタインの電話番号」という記事が気になったので触ってみました。

まずは、公式サイトからダウンロード。zipを解凍してアプリケーションフォルダにドラッグアンドドロップしてインストール。起動するとデフォルトではoption+spaceでAlfredが起動するようになります。

Spotlightのようにキーワードを入力するとアプリケーションが起動できます。

特定のサイトを検索したい場合は「google Alfred」などを入力するとブラウザが立ち上がりgoogle の検索結果ページが表示されます。

ファイル検索

「'<ファイル名>」などと検索するとMac内のファイルの検索が行なわれます。ファイルを選択してshiftキーを押すとプレビューでファイルの内容が表示されます。

じゃ、記事元のlfred Workflowはどうするかというと、有料版のPowerpack($17)が必要だそうです。Powerpackを購入しているとダウンロードしたalfredworkflowファイルをダブルクリックでインストールしてさまざまな検索がつかえるとか。

有料版の購入は少し保留。もう少し盛り上がってきたら購入してみます。
タグ:Alfred Mac
posted by ねこまんま at 15:13 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

StyleDoccoの使い方

StyleDoccoはnode.jsベースのCSSドキュメント生成ツールです。node.jsとgitがインストールされている環境なら以下のコマンドでインストールが可能。

 sudo npm install -fg styledocco


node.jsは公式サイト(http://nodejs.org/)よりパッケージをダウンロードしてインストール可能。gitはXcodeの上メニューXcode→ preferences→ DownloadsよりCommand Line Toolsをインストールすることでインストールできます。

ターミナルで作業ディレクトリに移動し以下のコマンドを入力すればドキュメントが生成される。

 styledocco -n "My Project" css 


ドキュメントの内容はマークダウンでCSSファイル内のコメントに記述

### デフォルトのボタン



`.btn01`クラスを付与する。



```

<a href="#" class="btn01">Btn</a>

```
posted by ねこまんま at 14:04 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年10月29日

静的サイトジェネレータ「Middleman」の使い方

ちょっと気になったので「Middleman
」を軽く試してみました。Ruby on Railsの超シンプル版といった感じでしょうか?静的HTMLを出力するので最終的な成果物がhtmlの場合もそのジェネレータとして利用できる感じです。

インストール



「Middleman」はRubyのツールなので以下のコマンドでインストール。

sudo gem install middleman


使い方



ターミナルでプロジェクトディレクトリに移動して以下のコマンドを実行するとフォルダの中にプロジェクトのスケルトンを作ります

middleman init my_new_project


そうすると以下のようにエラーが

Ruby 1.8 requires the 'ruby18_source_location' gem be added to your Gemfile


Ruby 1.8.7なのでとりあえずGEMファイルだけインストール

sudo gem install ruby18_source_location


もう一度initを実行したら「my_new_project」ディレクトリが作成されましたが以下のようなエラーが出た。

Gem::RemoteFetcher::FetchError: too many connection resets (http://tokyo-m.rubygems.org/gems/rb-fsevent-0.9.3.gem)
An error occurred while installing rb-fsevent (0.9.3), and Bundler cannot
continue.
Make sure that `gem install rb-fsevent -v '0.9.3'` succeeds before bundling.


言われたとおり以下のコマンドでgemをインストールする。

sudo gem install rb-fsevent -v '0.9.3'


あと、とりあえずプロジェクトディレクトリに移動してミスったやつもインストールしておく。

cd my_new_project
bundle install


つぎに、ローカルサーバーを立ち上げてみましょ。

cd my_project
bundle exec middleman server


http://localhost:4567/にアクセスするとサイトが表示される

つぎにHTMLをいじっていみる

sourceのindex.html.erbをひらいて以下のように変更

---
title: hellow world
---

<p>hellow world


ブラウザをリロードするとちゃんと変更されてる。

layouts/layout.erbでベーステンプレートを修正してみる。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= current_page.data.title %></title>
<%= stylesheet_link_tag "all" %>
<%= javascript_include_tag "all" %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
</body>
</html>


こちらもブラウザをリロードするとちゃんと変更されてる。

Sass/Compassはデフォルトで利用できるのstylesheets/all.cssをall.scssに変更するだけでOK

@charset "utf-8";
body{
background:red;
p{
color:white
}
}


最後に以下のコマンドで静的なファイルを生成することができます。

middleman build
posted by ねこまんま at 14:21 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年07月22日

JavaScriptの正規表現のmオプション

正規表現の先頭(^)や最後($)は検索文字列に対応している為、以下のような正規表現はマッチしません。

var str = "abc\ndef";
str.match(/^d/);//null


var str = "abc\ndef";
str.match(/c$/);//null


mオプションを指定することで先頭(^)や最後($)が各行二大して適応されるようになります。

var str = "abc\ndef";
str.match(/c$/m);//["c"]


var str = "abc\ndef";
str.match(/^d/m);//["d"]
posted by ねこまんま at 12:33 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

new RegExp()で特殊文字を入力する際の注意

new RegExp()で以下のように特殊文字を入力しようとしたら動かなくてはまった。

var regexp = new RegExp("^(\S*)$");


以下のようにバックスラッシュをさらにバックスラッシュでエスケープする必要がある。

var regexp = new RegExp("^(\\S*)$");
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

JavaScriptの正規表現で改行にマッチ

.などでマッチできると思ったら、.は改行以外の任意の文字列にマッチだった。

[\S\s]とすることで空白と空白以外の文字列にマッチできる。

String.match(/^([\S\s]{3})([\S\s]*)$/);

タグ:正規表現
posted by ねこまんま at 12:32 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2013年07月17日

Backbone.jsのCollectionを使ったサンプル

Backbone.jsのCollectionを使ったサンプル。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/x-tmpl" id="tplList">
<% if(mode=="edit"){ %>
<p data-id="<%= id %>"><input type="text" value="<%= title %>"><button>edit</button></p>
<% }else{ %>
<p data-id="<%= id %>"><%= title %></p>
<% } %>
</script>
<script>
var Todo = Backbone.Model.extend({
defaults: {
mode : 'view'
},
initialize : function(){
this.set("id",this.cid);
}
});
var todo1 = new Todo({title:"title1"});
var todo2 = new Todo({title:"title2"});
var TodoList = Backbone.Collection.extend();

var todoList = new TodoList([todo1,todo2]);

var TodoView = Backbone.View.extend({
initialize : function(){
_.bindAll(this, "render");
this.collection.on("change:mode", this.render);
this.render();
},
tmpl : _.template($("#tplList").html()) ,
events: {
"click p": "edit",
"click button" :"editDo"
},
render: function(){
var self = this;
self.$el.empty()
this.collection.each(function(model){
self.$el.append(self.tmpl(model.attributes));
});
},
edit: function(el){
this.collection.get($(el.currentTarget).data("id")).set("mode","edit");
},
editDo: function(el){
this.collection.get($(el.currentTarget).parent().data("id")).set({
"mode":"view",
"title":$(el.currentTarget).prev().val()
});
el.stopPropagation()
}
});

$(function(){
var todoView = new TodoView({el:"#foo",collection: todoList});
});
</script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
posted by ねこまんま at 13:24 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2013年05月17日

Dust.jsを利用したテンプレートの埋め込み方法

Dust.jsを利用したテンプレートの埋め込み方法

<script id="tmpl" type="text/html">
{bar}
</script>


<script>
var temp = $.trim($("#tmpl").html());
var data = {bar : "fuga"};
var compiled = dust.compile(temp, "intro");
dust.loadSource(compiled);
dust.render("intro", new_data, function(err, out) {
$("#tmpl").after(out);
});
</script>
posted by ねこまんま at 16:28 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年04月24日

Sublime Text 2にインストールしたパッケージを削除

Sublime Text 2にインストールしたパッケージを削除する方法。

Ctrl+Shift+P

「Package Control: Remove Package」と入力して

任意のプラグインを選択してEnter

アンインストール完了

参考:Sublime Text 2にインストールしたプラグイン(パッケージ)をアンインストールする方法 | 株式会社WEB企画スタッフブログ
タグ:Sublime Text 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Sublime Text 2のショートカット


基本

Cmd + Shift + Pパレットを表示
Cmd + Shift + d行複製


コーディング補助

Cmd + /コメントアウト
Ctrl + Shift + w選択箇所を別の要素で包む


移動

Cmd + ↓末ページ
Cmd + ↑ページトップ
Cmd + → 行末
Cmd + ← 行頭


カーソル系

Cmd+d 選択中のテキストと同じ次のテキストも選択
Cmd+uCmd+dの取り消し
Cmd+Ctrl+g選択中のテキストと同じ全てのテキストにカーソルを出す
Cmd+Shift+l 選択中の複数行にカーソルを出す
Cmd+option+クリック クリックした箇所にカーソルを出す
Cmd+option+ドラッグ ドラッグした箇所にカーソルを出す
Ctrl+shift+↑上の行にもカーソルを出す
ctrl+shift+↓下の行にもカーソルを出す


機能系

option + F12ブラウザプレビュー
タグ:Sublime Text 2
posted by ねこまんま at 12:43 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年04月23日

node.jsのsequelizeモジュール

Re:node.jsを使ってjQueryチックにWebサイトをクローリングする方法 その2で使ったsequelizeモジュールについての覚書。

まずはDB接続テーブル定義。

var sequelize = require("sequelize")
var connection = new sequelize('node_test', 'root', 'pass');
var Sites = connection.define('sites', {
url: sequelize.TEXT,
title: sequelize.STRING
});


これでnode_test DBのSitesテーブルのオブジェクトができます。

SELECT文は次のようにfindAll()を利用する

Sites.findAll().success(function(data) {
for (var i = 0; i < data.length; i++){
console.log(data[i].title);
}
});


挿入(Insert)

次のように記述するとデータのインサートができる。。。と思いきやできない。

var site = new Sites({
url: 'http://hoge.net',
title:'hoge.net'
});
site.save()
.success(function() {
console.log('ok');
})
.error(function(error) {
console.log(error);
});


バージョンの問題?次のように変更したらインサートできました。

var site = Sites.build({
url: 'http://hoge.net',
title:'hoge.net'
});
site.save()
.success(function() {
console.log('ok');
})
.error(function(error) {
console.log(error);
});


途中で文法が変わったのかな。。。オフィシャルのドキュメントも微妙だし、ぐぐっても出てこないし色々と辛い
posted by ねこまんま at 19:09 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

node.jsのcheerioモジュール

Re:node.jsを使ってjQueryチックにWebサイトをクローリングする方法 その2で使ったcheerioモジュールについての覚書。

 $ = cheerio.load(body);


みたいにHTMLを指定するとjQueryと同じような記法でDOMノードの取得ができる。

以下はrequestモジュールによりHTMLを取得したサイトのタイトルを取得するスクリプト。

var request = require('request');
var cheerio = require("cheerio");

request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
$ = cheerio.load(body);
var title = $("title").text();
console.log(title);//google
}
})
タグ:CHEERIO node.js
posted by ねこまんま at 15:39 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

node.jsのrequestモジュール

Re:node.jsを使ってjQueryチックにWebサイトをクローリングする方法 その2で使ったrequestモジュールについての覚書。

第1引数にリクエストの先のURL、第2引数にコールバック関数を定義。コールバック関数ではerror、response、bodyの引数が利用できる。

var request = require('request');
request('http://www.google.com', function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body) // Print the google web page.
}
})
タグ:node.js request
posted by ねこまんま at 12:06 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

Re:node.jsを使ってjQueryチックにWebサイトをクローリングする方法 その2

ちょっと時間があいたけどRe:node.jsを使ってjQueryチックにWebサイトをクローリングする方法: JavaScriptメモの続き。

sequelizeのdefineメソッドでーブルを定義します。

// Define models
var sites = connection.define('sites', {
url: sequelize.TEXT,
title: sequelize.STRING
});


初回のみ実行するsync()。これで先ほど定義したテーブルを自動生成してくれます。

// Synchronize to database
connection.sync({force: true});


DB接続できたので、次はスプレーピング用のしょり。通信用にrequestモジュールと取得したHTMLのDOMパーサー用にcheerioをrequireしときます。

//Initialize instance
var request = require("request");
var cheerio = require("cheerio");


で、以下がメインの処理。これはちょっと各項目づつあとで掘り下げて解説します。

// Define request url
var requestUrl = "http://www.google.com";

// Send http request
request({url: requestUrl}, function(error, response, body) {

// If request succeed
if (!error && response.statusCode == 200) {
$ = cheerio.load(body); // Create cheerio instance

// Get response data
var url = response.request.href;
var title = $("title").text();

console.log(url);
console.log(title);

// Create new instance
var site = sites.build();

// Set fields
site.url = url;
site.title = title;

// Save to database
site.save()
.success(function(anotherTask) {
console.log('Succeed');
})
.error(function(error) {
console.log(error);
});
}

// If error occured
else {
console.log("--------------------------------------------------");
if (error && "code" in error) {
console.log("Error Code:" + error.code);
}
if (error && "errno" in error) {
console.log("Error No:" + error.errno);
}
if (error && "syscall" in error) {
console.log("Error Syscall:" + error.syscall);
}
if (response && "statusCode" in response) {
console.log("Status Code:" + response.statusCode);
}
}
});
タグ:node.js
posted by ねこまんま at 11:56 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2013年04月08日

IEのlayout-grid-line プロパティ

ネタ元:【CSS】画像を上下中央に表示する(IE7以下にも対応させる) | バシャログ。

IEで利用できるlayout-grid-lineを指定することでvertical-alignで中央表現できるらしい。知らなかった。

line-heightでいいんじゃないかと思うけど、これはこれで便利そう。
posted by ねこまんま at 14:54 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

CSSの包含ブロック

CSSの包含ブロックをちゃんと理解してなかったのでメモ。

"包含ブロック"の定義

基本はroot要素、先祖要素にfloatやposition:absolute、position:fixedがあるとそいつが包含ブロックのroot要素になる。

ちなみにpadding-topやpadding-bottomに%で指定を行うと、包含ブロックの幅が%の基準になる。

8.4 パディング特性 (’padding-top’, ’padding-right’, ’padding-bottom’, ’padding-left’及び ’padding’)
タグ:padding
posted by ねこまんま at 12:28 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

position:absoluteを指定された要素のheight;

ちょっと知らなかったのでメモ。

position:absoluteを指定された要素にheightを%で指定するとposition:static以外の先祖要素のコンテンツボックス(height+padding)を基準に高さが算出される。



普通は明示的に指定されたheightをもとに算出だけどちょっと違うっぽいです。
posted by ねこまんま at 11:43 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年04月05日

VirtualBoxを利用して無料のIE検証環境の作成

modan.IEでMac向けのWindowsのヴァーチャルイメージが公開されていたので検証環境を作ってみました。

普段はVMware Fusionを利用しているのですが、modan.IEで配布しているヴァーチャルイメージはVMware Fusion 5に対応していて、私はVMware Fusion 4を利用しているので利用できません。VMware Fusion 5にアップデートしてもいいのですが、4,900円をケチって今回はVirtualBoxで検証環境を作成しました。

VirtualBoxは配布ページからダウンロードインストールします。

WindowsのOSイメージはmodan.IEのダウンロードページからダウンロードします。

たとえば、IE6 - XPの環境は「IE6_WinXP.ova.zip」をダウンロードして、回答すると「IE6 - WinXP-disk1.vmdk」と「IE6 - WinXP.ovf」の2つのファイルが解凍できます。

IE6 - WinXP.ovfをダブルクリックするとVirtualBoxの管理画面が立ちがるので「インポート」をクリックするとVirtualBoxにWindows XPがインストールできます。

modan.IEのWindows XPには日本語フォントが入っていませんので「MS Pゴシック」などをどこかから持ってきてインストールしておきましょう。
posted by ねこまんま at 15:30 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年04月02日

FlashからCreateJSに変換した際にstop()が反映されない

Flash Professional Toolkit for CreateJSを利用しFlashからCreateJSに変換した際にactionscriptに記述したstop()が反映されずループされる。

this.initialize(mode,startPosition,loop,{re:14},true);


の記述を

this.initialize(mode,startPosition,false,{re:14},true);


に変更するとちゃんとストップします。

インスタンス生成時に次のように指定してもOK

this.instance_17 = new lib.hoge(,,false);
posted by ねこまんま at 14:09 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

AppKitBoxでAndroidを楽々検証

Android端末はOSによる差異に加え機種ごとの差異が存在し、検証端末を揃えるのが困難です。そんな時に利用できるのが「AppKitBox」。

クラウドにより、インターネット経由で端末を時間借りできるサービスです。945円(税込)で6チケット購入で気3チケットで30分利用することができます。登録すると15チケットが無料で付いてくるのでとりあえず試してみるのがよいと思う。

利用方法は以下の流れです。

1. 利用するには「Remote TestKit for Android 」をインストールする必要があります。Mac/Winのソフトがあるので、利用したいOSのRemote TestKitをダウンロードしてインストールして下さい。

2. インストールしたRemote TestKitを立ち上げるとログインが要求されます。初回は下の「ユーザ登録がまだの場合」から「新規ユーザ登録」を選択してユーザ登録を行ってください。登録したメールアドレスに 確認コードが送られてくるので認証をおこなってください。

3.Remote TestKit for Androidを立ち上げると以下のような管理画面が立ち上がります。ここで利用した端末を選択し、レンタルを押してください。

Remote TestKit for Androidの管理画面

4.以下のように端末画面が立ち上がりますので検証開始。

Remote TestKit for Androidの端末画面

かなり便利ですので一度試してみてください。
posted by ねこまんま at 12:02 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年03月28日

ターミナルでディレクトリ移動

ターミナルでディレクトリ移動する際にcdコマンドで移動してたんだけど、以下の方法で移動できることを教えてもらいました。

ターミナルでcd と入力して、移動したいディレクトリをファインダーでコピー、ターミナルに戻ってペーストするとそのディレクトリまでのパスが出力される。

ターミナルに、移動したいディレクトリをファインダーでドラックしてもOK

XtraFinderを利用していると、設定のFinderメニューに追加の新規ターミナルで開くから、右クリックメニューに「新規ターミナルで開く」が追加されます。
タグ:ターミナル
posted by ねこまんま at 17:22 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2013年02月26日

iPhoneでカルーセル時のチラツキをなくす

iPhoneでtranslate3dを利用したスワイプギャラリーでカルーセル処理を行おうとするとチラツキが生じる。

.swipeBox *{
-webkit-transform: translate3d(0,0,0);
}


といった具合にスワイプギャラリーの構成要素すべてにtranslate3dを指定してGPUをONにすることでチラツキが解決する。
posted by ねこまんま at 00:58 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

Underscore.jsでXSS対策

Backborn.jsのテンプレートエンジン「Underscore.js」でXSS対策する方法

<%= hoge %>


だとHTMLがそのまま出力されるので

<%- hoge %>


とすると実体参照に変換される。

(実装までみていないので穴があるかもしれないので自己責任で参考までにしてください)
posted by ねこまんま at 00:21 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2013年02月19日

Backborn.jsでのURLルーティング

Backbron.jsでルーティング機能を実装する方法

Backbone.Routerをextendしてroutesでハッシュタグと対応するメソッドを関連づければOK

var Router = Backbone.Router.extend({
routes : {
'index' : "index",
"about" : "about"
},
initialize : function(){
if(!location.hash){
location.hash = "index"
}
},
index : function(){
alert("index")
},
about : function(){
alert("about");
}
});
var router = new Router();
Backbone.history.start();


Backbone.history.start()を指定しないとハッシュイベントの取得ができないので注意。
posted by ねこまんま at 14:34 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2013年02月08日

a要素のhashプロパティ

ページ内スクロールを実装する以下のようなサンプルスクリプトをどっかでみかけました。ここで注目は「this.hash」、domオブジェクトのa要素はhrefのハッシュ値を簡単に取り出せるっぽいです。

$(function(){
$('a[href^=#]').on('click', function(){
//クリックした要素の#を変数に入れる
var Target = $(this.hash);
//行き先までの画面上の高さの数値を変数に入れる
var TargetOffset = $(Target).offset().top;
//アニメーション時間ミリ秒
var Time = 700;
//集めた情報を元にアニメーション
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
タグ:hash
posted by ねこまんま at 11:12 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年02月06日

CSSでマウスカーソルを設定する

予想以上に手間取ったのでメモ。

CSSでカーソルを変更するにはcursorプロパティにurl()で画象を指定します。autoも忘れずに。

cursor: url(img/cursor_zoom01.cur), auto;


利用できるのは.aniと.cur。これを作るのがメンドクサイ。

32px☓32pxのbmp画象を用意し、透過色は1色なので透過したい箇所は別の色を指定しておく、アンチエイリアスとかは諦める。

bmp→curの変換はMacのソフトが見つからなかったので、WindowsのANIメーカーを使って変換しました。Windows 7でもちゃんと動いたよ。
タグ:cursor
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年02月05日

Re:node.jsを使ってjQueryチックにWebサイトをクローリングする方法

ネタ元:node.jsを使ってjQueryチックにWebサイトをクローリングする方法

よい感じの記事なので写経してみます。

まずはモジュールのインストール。

「request」はHTMLでスクレイピング対象のURLのデータを取ってくるライブラリ
「mysql」はデータをMySQLにぶち込むためのライブラリ
「sequelize」はO/Rマッパーライブラリ
「cheerio」は取ってきたデータをjQueryチックにDOMのセレクタでいじいじするためのライブラリ

npm install request
npm install mysql
npm install sequelize
npm install cheerio


次のコマンドでインストールされているモジュールの一覧が確認できます。

npm list


sequelizeでO/Rマッパーを利用します。

var sequelize = require('sequelize');
var connection = new sequelize('データベース名', 'ユーザ名', 'パスワード', {オプション: '値'});


mysqlインストールの為、次回につづく
posted by ねこまんま at 02:50 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2013年02月04日

IEでjQueryの画象のloadが動かない件

IE8以下でjQueryのimg要素のloadが動かない件でプチハマりしたのでメモ

$("<img>").attr("src","....").on("load",function(){
//do something
});


だとすでに画象がキャッシュされている際に動かない。

$("<img>").on("load",function(){
//do something
}).attr("src","....");


にするとちゃんとロードされる。でもwidthやheightはうまくとれないので、

$("<img>").on("load",function(){
setTimeout(function(){
//do something
},1);
}).attr("src","....");


とするとちゃんとwidthやheightも取得できる
タグ:jquery load img IE
posted by ねこまんま at 22:04 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

node.jsでExpress -routes-

node.jsのフレームワークExpressでルーティングを行って見ましょう。

前回設定したExpressのディレクトリのapp.jsに次の構文を追加します。

app.get('/foo/:id', routes.sample);


routesディレクトリのindex.jsに次のスクリプトを追加

exports.sample = function(req,res){
var id = req.param('id');
res.send(id,{'Content-Type':'text/plain'},200)
}


http://localhost:3000/foo/barなどにアクセスするとルーティングされfooと表示されます。
タグ:node.js Routes
posted by ねこまんま at 03:32 | Comment(1) | TrackBack(0) | node.js | 更新情報をチェックする

node.jsのExpress

node.jsにはExpressというフレームワークが存在します。

Expressはnpmを利用してインストールします。

sudo npm install -g express


インストールされれば以下のように表示されます。-gはグローバルオプションでこのオプションをつけることでexpressをグローバルコマンドとして利用できます。」

/usr/local/bin/express -> /usr/local/lib/node_modules/express/bin/express
express@3.1.0 /usr/local/lib/node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── cookie-signature@0.0.1
├── range-parser@0.0.4
├── buffer-crc32@0.1.1
├── cookie@0.0.5
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.1.0 (mime@1.2.6)
└── connect@2.7.2 (pause@0.0.1, bytes@0.1.0, formidable@1.0.11, qs@0.5.1)


では、実際につかってみましょう。

cd ~/Desktop/
sudo express express_sample


と入力するとデスクトップにExpressのファイル一覧が生成されます。

create : express_sample
create : express_sample/package.json
create : express_sample/app.js
create : express_sample/public
create : express_sample/public/javascripts
create : express_sample/public/images
create : express_sample/public/stylesheets
create : express_sample/public/stylesheets/style.css
create : express_sample/routes
create : express_sample/routes/index.js
create : express_sample/routes/user.js
create : express_sample/views
create : express_sample/views/layout.jade
create : express_sample/views/index.jade

install dependencies:
$ cd express_sample && npm install

run the app:
$ node app


次に生成したディレクトリに移動し、モジュールをインストールします。

cd express_sample
npm install


Expressを実行します。

sudo node app.js


これでExpressが起動します。
タグ:node.js NPM
posted by ねこまんま at 01:13 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2013年02月02日

node.jsでexportsを利用し外部モジュールと連携

node.jsでexportsを利用し外部モジュールと連携する方法。各モジュールには名前空間があり基本的にモジュール間で情報が共有できない。連携にはいくつか方法があるがその1つがexportsの利用

var sample = require("./hoge.js");
sample.setProperty("aa","bb");
sample.setProperty("cc","dd");
sample.print();


hoge.jsには以下のような内容を記述しておく

var properties = {}
exports.setProperty = function(name,value){
properties[name] = value;
}
exports.print = function(){
console.log(properties);
}
タグ:node.js EXPORTS
posted by ねこまんま at 23:30 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

Facebookのgraph APIにnode.jsでアクセス

Facebookのgraph APIにnode.jsでアクセスする方法

var http = require('http');
http.get({
host : "graph.facebook.com",
port:80,
path:'/zuck'
},function(response){
response.setEncoding("utf-8");
response.on("data",function(chunk){
http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
chunk = JSON.parse(chunk);
for(var key in chunk){
response.write(key+":"+chunk[key]+'\n');
}
response.end();
}).listen(8124);
})
}).on("error",function(e){
console.log("ERROR",e.message);
});


httpモジュールのgetメソッドで外部APIの情報を取得できる。setEncodingでエンコーディングを設定できて、response.on("data",function(chunk){...})がよくわからないけど、バッファやチャンクを受信した際に発火するイベントっぽい。JSONのパースはJavaScriptと一緒でJSON.parseを利用

posted by ねこまんま at 14:16 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2013年02月01日

node.jsの持続的接続を理解する

node.jsの持続的接続を理解できてなかったのでメモ。

次のコードを実行するとブラウザをリロードする度に2づつカウントアップされる。

var http = require('http');
var i=0;
var server = http.createServer(function (request, response) {
i++;
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write(i+'\n');
response.end();
}).listen(8124);


つまり、1度プロセスとその内容はプロセスが破棄されるまで保持されている。(ブラウザがfavicon.icoにもアクセスするため2づつカウントアップ)

PHPのようにhttpリクエスト毎にプロセスが走るのではないので注意が必要。
タグ:node.js
posted by ねこまんま at 15:14 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

node.jsでファイルを取得して内容を表示

node.jsでファイルを取得して内容を表示する。fsモジュールはファイルの読み書きができるモジュールです。

次のサンプルはreadFileメソッドで「hello.txt」の内容を取得しhttpモジュールで内容をブラウザに出力しています。

var fs = require("fs");
var http = require('http');
fs.readFile("./hello.txt",'utf-8',function(error,data){
if(error){
return console.log(error);
}else{
var server = http.createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write(data+'\n');
response.end();
}).listen(8124);
}
});
タグ:node.js
posted by ねこまんま at 14:28 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

Sublime Text 2でブラウザリロード

Sublime Text 2でブラウザリロードする際のメモ

Command+shift+pでパッケージマネージャーを開いて、「install」と入力すると出てくる「package control install package」でインストールマネージャーを開きます。そこで「Browser Refresh」と入力して「Browser Refresh」をインストールします。

このままではショートカットが動かないので、

「Preference」→「Package Settings」→「Browser Refresh」→「Key Bindings-default」を選択

keysをcommand+shift+rからcommand+option+rに変更します。

[
{
"keys": ["command+option+r"], "command": "browser_refresh", "args": {
"auto_save": true,
"delay": 0.0,
"activate_browser": false,
"browser_name" : "Google Chrome"
}
}
]


これでcommand+option+rでリロードができるようになります。
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Sublime Text 2でブラウザプレビュー

Sublime Text 2でブラウザプレビューをできないかと調べたところ以下のショートカットでできるっぽい

option + F12
タグ:Sublime Text 2
posted by ねこまんま at 12:04 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

node.jsでHello World!!

node.jsでHello World!!

適当な所に以下のファイルを保存

var sys = require('sys');
var http = require('http');

var server = http.createServer(
function (request, response) {

response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello World!!\n');
response.end();
}
).listen(8124);

sys.log('Server running at http://127.0.0.1:8124/');


ターミナルから以下のコマンドを実行

node hello.js


次のようなメッセージが表示される。

 Server running at http://127.0.0.1:8124/


ブラウザでhttp://127.0.0.1:8124/を確認するとちゃんとHello World!!が表示されるめでたし。

説明。

var sys = require('sys');
(中略)
sys.log('Server running at http://127.0.0.1:8124/');


sysモジュールを呼び出してターミナル上にログを出力してます。

var http = require('http');
var server = http.createServer(
(中略)
).listen(8124);


httpモジュールを呼び出してcreateServerでサーバーをポート番号8124で起動してます。

サーバー内ではresponseを出力してます。

 function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello World!!\n');
response.end();
}


たぶんこんな感じ

--

また、Hello Worldだけなら

console.log("Hello World");


でもHello Worldできる。
タグ:node.js
posted by ねこまんま at 00:46 | Comment(0) | TrackBack(0) | node.js | 更新情報をチェックする

2013年01月31日

数値を3桁ごとにカンマで区切り

数値を3桁ごとにカンマで区切り関数。

function number_format(str){
var str_arr = str.toString().split(".");
var num = str_arr[0].replace(/,/g, "");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
return num+(str_arr[1]?"."+str_arr[1]:"");
}


3桁ごとのカンマを取り除く関数

function number_deformat(str){
return str.toString().split(",").join("")-0;
}
posted by ねこまんま at 23:22 | Comment(1) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

カタカナかどうかチェックする正規表現

■カタカナかどうかチェックする正規表現

/^[ァ-ンァ-ン゙゚]*$/


■全角カタカナかどうかチェックする正規表現

/^[ァ-ン]*$/


■半角カタカナかどうかチェックする正規表現

/^[ァ-ン゙゚]*$/
タグ:正規表現
posted by ねこまんま at 23:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年01月20日

Firefoxのキャレットブラウズに対応する

Firefoxではキャレットブラウズといってテキストをクリックするとテキスト選択状態になります。

テキストの場合はいいけど画象とかボタンの場合にもテキストがでてきてうっとおしい。

これはCSSでfont-size:0;を指定すれば消すことができます。
タグ:Firefox
posted by ねこまんま at 21:14 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2013年01月13日

Stylus+nibのインストール

まずはnode.jsをインストールします。node.jsはインストーラーが公開されているので公式サイトで「インストール」からpkgファイルをダウンロードしてクリックしてインストールできます。

つぎにStylus+nibのインストールをします。Macのターミナルを開いて次のコマンドを入力

sudo npm install -g stylus nib


これでインストールは完了。

コンパイルする際には-uオプションでnibを指定する必要があります。

stylus aa.styl -u /usr/local/lib/node_modules/nib/

タグ:node.js NIB stylus
posted by ねこまんま at 04:54 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年12月17日

forEachでDOM要素をループする

forEachメソッドを利用してDOM要素をループさせようとすると上手くいかない。

document.getElementsByTagName("p").forEach(function(){
//do something
});


Arrayオブジェクトじゃないので当たり前と言えばあたりまえだけど。

次のように空のArrayオブジェクトにループにcallメソッドを利用すればDOMをループでまわすことができますよ。

[].forEach.call(document.getElementsByTagName("p"),function(ele){
//do something
});
posted by ねこまんま at 20:36 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年12月14日

MacでCSS3アニメーションで画面がチカチカする件

CSS3の-webkit-keyframesを-webkit-transformを利用してアニメーションを指定しているとどうやMacのSafariやGoogle Chromeで画面がチカチカしてしまう。

どうもclassの抜き差しでグラフィックアクセラレータが切り替わるのが問題っぽい。以下のように隠し要素を無限にアニメーションしておけばチカチカ問題も解決です。

#hack{
width:0;
height:0;
-webkit-animation:hack 2000ms infinite;
}
@-webkit-keyframes hack {
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
posted by ねこまんま at 19:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年12月06日

IE9でjQueryのanimateメソッドでtransformを変更する

IE9はCSS3のtransformに対応しているけどtransitionやanimateには対応していない。jQueryのアニメーションでしなくちゃ行けないけどanimateメソッドはtransformに対応していないということで色々と試行錯誤。

IE9の場合のみ以下の関数を使ってアニメーションを行ないました。

var rotate = function(target,value,duration,callback){
target.animate(
{borderSpacing:value},
{
complete:callback,
duration: duration,
step: function(now,fx) {
target.css('-ms-transform','rotate('+now+'deg)');
}
}
)
}


次のように作成したrotateを入れ子にして頑張ってアニメーションします。

var time =300
var target = $("hoge");
rotate(target,5,time*0.2,function(){
rotate(target,0,time*0.2,function(){
rotate(target,-5,time*0.3,function(){
rotate(target,0,time*0.3,function(){})
})
})
})


IEとかなくなったらいいのに。
posted by ねこまんま at 23:06 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

jQueryでJSONP

jQueryのajax()でJSONPを扱おうとしたらうまく行かなかったのでメモ。

JSONPのデータはこんな感じ

callback({
data:[
"hoge",
"fuga",
"bar"
]
})


試そうとしたのは次のような感じ

var def = $.ajax("hoge.json",{
"dataType":"jsonp"
});


これだと動かない。

jQueryでコールバック関数をcallbackと固定するには次のようにjsonpCallbackオプションを指定しないとダメ。


var def = $.ajax("hoge.json",{
dataType:"jsonp",
jsonpCallback:"callback"
});
タグ:AJAX jquery JSONP
posted by ねこまんま at 12:57 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年11月23日

Sublime Text 2でファイルをタブで開く方法

Sublime Text 2で新規ファイルを開くと新規ウィンドウが立ち上がってうっとうしいなと思ってたら、タブで開く方法があったらしい。

Prefarences→Setting-Userから設定用のJSONをひらいて以下の内容を追加します。

{
"open_files_in_new_window": false
}


で、再起動すると新規ファイルが新規ウィンドウでなく新規タブで開くようになります。

参考:クスールブログ » Sublime Textでファイルをタブで開く方法
タグ:Sublime Text 2
posted by ねこまんま at 10:36 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする