2012年11月06日

Google Maps APIのジオエンコーディングで住所から経度緯度を取得

Google Maps APIのジオエンコーディングで住所から経度緯度を取得する方法

google.maps.Geocoder()からgeocoderオブジェクトを生成して取得する。

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: '住所' },
function( results, status ){
if( status == google.maps.GeocoderStatus.OK ){
var latlng = results[ 0 ].geometry.location;
console.log( latlng.lat() , latlng.lng() );
}else{
alert( '取得できませんでした > < \n:' + status );
}
});


コールバック関数内ではresults[ 0 ].geometry.locationでlatlngオブジェクトが取得できるので。
posted by ねこまんま at 11:06 | Comment(0) | TrackBack(0) | google map | 更新情報をチェックする

2012年11月05日

CodeKitでHaml

Hamlがイケテルらしいので触ってみた。CodeKitにコンパイラ入っているので環境構築は楽。

hamlディレクトリを作成し、中にhoge.hamlというファイルを作成してここにHamlの内容を書いていく。このままではhamlディレクトリにコンパイルしたhtmlファイルが出力されるのでCodeKitのプロジェクトの設定からオOutputPathでHamlを選んで、Hamlが../に書き出されるようにしておこう。

!!!
%html
%head
%title Hello, Haml!
%body
#header
%h1 Hello, Haml!
#content
%p
I use Ham
%span.version= Haml::VERSION


などとhamlファイルに記述するとHTMLが書き出されます。(ここら辺で手になじまないと仕様をやめた)
タグ:HAML CodeKit
posted by ねこまんま at 18:50 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Mac用のフリーのアンチウイルスソフト「ClamXav」

最近はMacでもウイルスに感染するようなのでMac用のフリーのアンチウイルスソフト「ClamXav」をインストールしてみました。

ダウンロードして、インストール、起動してスキャンを開始で対象フォルダのスキャンを行います。
posted by ねこまんま at 11:29 | Comment(0) | TrackBack(0) | mac | 更新情報をチェックする

2012年11月02日

jQueryつかってプログレスバーを表示する

次のURLが参考になった。

$.ajaxファイルアップロードでプログレスバーを表示する。 - ブックマクロ開発に

progressイベントで通信の状態を監視できるらしい。

ただ、jQueryの場合はdeferred.progress()を使ったほうがスマートじゃないかという噂も。
posted by ねこまんま at 20:03 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年11月01日

markdown入門

Sublime Text 2にmarkdown previewを入れたので、markdownを覚えようとしているメモ書き。

markdown previewのインストールはSublime Package Controlをインストールしている前提で、Cmd+Shift+Pでコマンドパレットを立ち上げて、「install」などとうって「Package Control:Install Package」を実行します。markdown previewをインストールします。

次のように入力しておくと自動的に変換してくれるイメージ

#見出し1

<h1>見出し1</h1>


##見出し2

<h2>見出し2</h2>


###見出し3

<h3>見出し3</h3>


####見出し4

<h4>見出し4</h4>


#####見出し5

<h5>見出し5</h5>


######見出し6

<h6>見出し6</h6>


*強調1*

<em>強調1</em>


**強調2**

<strong>強調2</strong>


- 箇条書きその1
- 箇条書きその2
- 箇条書きその3


<ul>
<li>箇条書きその1</li>
<li>箇条書きその2</li>
<li>箇条書きその3</li>
</ul>


1. 番号付きその1
2. 番号付きその2
3. 番号付きその3


<ol>
<li>番号付きその1</li>
<li>番号付きその2</li>
<li>番号付きその3</li>
</ol>


<引用

<blockquote>引用</blockquote>


---

<hr>


| A | B | C |
|a|b|c|


<table>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
posted by ねこまんま at 19:47 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

MacのXcodeのFileMargeでdiff差分をとる

MacのXcodeのFileMargeでファイル差分 diff をとる方法。

Xcode4.2では以下のパスにアプリがあるのでこれを直接起動

/Developer/Applications/Utilities/FileMarge.app


左右に比較したいファイルを設定して「Compare」をクリック。ドラッグ&ドロップでファイルを設定することも可能。

一度比較すると落として再起動しないと再比較できないのが若干面倒ですが
posted by ねこまんま at 11:51 | Comment(0) | TrackBack(0) | mac | 更新情報をチェックする

2012年10月31日

はじめてのZen-Coding入門

Sublime Text2にZen-Codingをインストールしたので、Zen-Coding入門を色々と使ってみました。

次のように入力してtabキーを押すと色々なHTMLが自動生成されます。

html:5 [tab]

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>


html:xt [tab]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>

</body>
</html>


link:css [tab]

<link rel="stylesheet" type="text/css" href="style.css" media="all" />


div [tab]

<div></div>


div>p [tab]

<div>
<p></p>
</div>


div>div+p [tab]

<div>
<div></div>
<p></p>
</div>


ul>li*3 [tab]

<ul>
<li></li>
<li></li>
<li></li>
</ul>


dl>(dt+dd)*3 [tab]

<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>


a{ほげ} [tab]

<a href="">ほげ</a>



div#main [tab]

<div id="main"></div>


div.hoge [tab]

<div class="hoge"></div>


div#main.hoge.foo [tab]

<div id="main" class="hoge foo"></div>


ul>li.line$*5 [tab]

<ul>
<li class="line1"></li>
<li class="line2"></li>
<li class="line3"></li>
<li class="line4"></li>
<li class="line5"></li>
</ul>


a[href=#hoge] [tab]

<a href="#hoge"></a>


img[alt=hoge][src=foo.jpg] [tab]

<img src="foo.jpg" alt="hoge">


#main>h1.hoge|c [tab]

<!-- #main -->
<div id="main">
<!-- .hoge -->
<h1 class="hoge"></h1>
<!-- /.hoge -->
</div>
<!-- /#main -->


#main>h1.hoge|e [tab]

&lt;div id="main"&gt;
&lt;h1 class="hoge"&gt;&lt;/h1&gt;
&lt;/div&gt;


#main>h1.hoge|haml [tab]

#main
%h1.hoge
タグ:Zen-coding
posted by ねこまんま at 02:07 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年10月30日

sublime text 2でZen-Codingを使う

sublime text 2で zen-codingを使う方法。

Sublime Package Controlをインストールしている前提で、Cmd+Shift+Pでコマンドパレットを立ち上げて、「install」などとうって「Package Control:Install Package」を実行します。Zen-Codingをインストールします。

これでOK。

Cmd+Nで新規ファイルを開いて、Cmd+Shift+Pでコマンドパレットを立ち上げ「html」と入力すると「Set Syntax :HTML」が選択できるのでシンタックスのモードを「HTML」にします。
エディタ上に「html:5」と入力して、TABのキーを押すと、HTML5的なひな形がファイルに挿入されればOKです。

参考:Sublime Text 2 で Zen Coding - メモログ
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年10月03日

Sublime text 2の操作


  • http://wbornd.net

  • Cmd + Shift + P

  • install package

  • command + / コメントアウト

  • Cmd + T ファイル移動

  • Cmd + R シンボルを移動

  • ctrl + G 行に移動

  • Cmd ↓ 末ページ

  • Cmd ↑ ページトップ

  • Cmd → 行末

  • Cmd ← 行頭

  • フォルダをサイドにドラッグ、SaveProjectでプロジェクトを保存

  • Goto Recent→ Cmd+Shift+R

  • 選択して Cmd dで同一のものの選択、編集

  • cmd shift lで複数行選択 同時編集

  • ⌘+option+ドラッグでブロック編集

  • 行複製cmd shif d

  • cmd+shift+p md でマークダウン(とか他のシンタックスに変更)

  • markdown Preview

  • local history 右クリック

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

2012年09月07日

ブラウザのオートコンプリート機能をOFFにする

ブラウザのオートコンプリート機能をOFFにする方法。autocomplete属性にoffを設定する。

<input type="text" autocomplete="off" />


参考:ブラウザのオートコンプリート機能を無効 - ぷろぐらまさんの忘れないようにメモ書き
タグ:AutoComplete
posted by ねこまんま at 19:29 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

Sublime Text2で不過視文字を表示する

Sublime Text2で不過視文字を表示する方法がわかったのでメモ

「Sublime Text2」→「Preference」→「Setting – User」でPreferences.sublime-settingsを開き以下の文言を追加。

"draw_white_space": "all"

これでタブやスペースが表示されるようになります。

参考:[み]Sublime Text2で、スペースとかタブを見えるようにする方法 | みはら.com
タグ:Sublime Text2
posted by ねこまんま at 11:23 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年09月04日

IE8以下のみフェードの効果を切り替える

IE8以下だと透過PNGを利用したfadeIn fadeOutがおかしくなるので以下のように暫定的に対応。

if($.browser.msie && $.browser.version<9){
var ieLte8=true;
}
$.fn.fade = function(type){
if(ieLte8){
if(type=="in"){
return this.show(1);
}else{
return this.hide(1);
}
}else{
if(type=="in"){
return this.fadeIn();
}else{
return this.fadeOut();
}
}
}


IE8以下の場合はすぐにフェードイン・アウトせずすぐに表示を切り替えます。
posted by ねこまんま at 17:59 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年09月03日

CompassでCSSをminifyして出力する

CompassでCSSをminifyして出力するにはconfig.rbを以下のように変更するとCSSをminifyして出力してくれるようになります。

output_style = :nested




output_style = :compressed 


便利。
タグ:minify compass
posted by ねこまんま at 00:39 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年09月02日

have at least one capital letter

Apple IDの変更を求められて、変更しようとすると

have at least one capital letter

とでて変更できなかった。どうも1文字以上大文字にしろって意味らしい
タグ:apple
posted by ねこまんま at 22:23 | Comment(0) | TrackBack(0) | mac | 更新情報をチェックする

2012年09月01日

Gruntの使い方

GruntはJavaScriptやCSSのMinifyやConcatなどを自動でやってくれるツール

まずは、node.jsのインストール。インストーラーが公開されてるのでさくっとインストールしてしまいましょう。


次はGruntのnpmのインストール、ターミナルで以下のコマンドを実行する

sudo npm install -g grunt


次のコマンドでインストールできているか確認できます。

grunt -version


それではgrunt.jsに処理内容を記述していきましょう

module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: [
'bar.css',
'foo.css'
],
dest: 'all.css'
}
}
});
}


これはbar.cssとfoo.cssを結合したall.cssを作成する設定です。ターミナルでgrunt.jsを設置したフォルダまで移動して以下のコマンドを実行します。

grunt concat


そうするとall.cssが作成されます。

毎回手動でコマンド打つのはめんどくさいの以下でwatchを設定

module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: [
'bar.css',
'foo.css'
],
dest: 'all.css'
}
},
watch: {
files: [
'bar.css',
'foo.css'
],
tasks: 'concat'
}
});
}


ターミナルで以下のコマンドを打っておくとbar.cssとfoo.cssの変更を監視してall.cssを生成するようになります

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

2012年08月30日

特定のオブジェクトがグローバルに存在するかどうかをチェック

特定のオブジェクトがグローバルに存在するかどうかをチェック

in演算子を利用します。

var hoge;
if("hoge" in window){
console.log("ok")
}else{
console.log("ng")
}
タグ:in
posted by ねこまんま at 12:44 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

Versionsでコンフリクトを起こした際の復旧方法

Macのsubversionクライアント「Versions」でコンフリクトを起こした際の復旧方法

コンフリクト時はhoge.js / hoge.js.mine / hoge.js.r100 / hoge.js.r111といった具合のファイルが生成されるます。

hoge.js.mineはローカルの自身のファイル、r○○は現在のリビジョンと最終アップデート時のリビションファイル。

手動でhoge.jsのマージを行い、hoge.jsを右クリック→「Make as Resolve」を選択するとマージされ、コミットが可能になる。

Versions使わずにコマンドラインからする場合は「svn resolved hoge.js」

もうひとつは revert を利用する方法

hoge.jsを右クリックしてrevert を選択、そうすると未コミットの情報は破棄されて最新のリビジョンになります。(revert to revisionで特定のリビジョンにすることも可能)
posted by ねこまんま at 12:39 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Sublime Text2でgrep 検索

Sublime Text2でgrep 検索する方法

「command」+「shift」+「f」でグレップ検索が可能
タグ:Sublime Text2
posted by ねこまんま at 12:38 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Macのターミナルで実行中のプログラムを中止

Macのターミナルで何か処理を走らせると、処理が走り続けて新しいコマンドが入力できなくなることがある。そういった場合は「Ctrl」+「C」で処理を抜ければOK
posted by ねこまんま at 12:37 | Comment(0) | TrackBack(0) | mac | 更新情報をチェックする

2012年08月19日

compassでCSS3

compassを利用してCSS3を利用する方法

@include background-size(5px 5px);


といった具合に基本的に@includeの後に利用したいCSS3の記述を行ない、()内に値を記述する。

-webkit-transformなどは各値ごとに関数が設定されているので次のように記述

@include rotate(45deg);


グラデーションは少し複雑だがbackground-image()の中にlinear-gradient()を設定し、グラデーション部分はcolor-stops()で設定を行う。

@include background-image(linear-gradient(left top,color-stops(
rgba(255,255,255,0),
rgba(255,255,255,0) 45%,
rgba(255,255,255,.2) 46%,
rgba(255,255,255,.2) 54%,
rgba(255,255,255,0) 55%,
rgba(255,255,255,0)
)));
posted by ねこまんま at 21:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年08月11日

Expiresを使って表示を高速化

Last-modifiedだけだとサーバーにファイルの生存確認が走ってるようでどうも遅いので、表示高速化の為、Expiresをつかって画象や静的ファイルのキャッシュを行ってみた。
.htaccessはhttpd.confに以下のような記述を追加するだけ。

ExpiresActive On
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType text/css "access plus 30 days"
ExpiresByType application/x-javascript "access plus 30 days"


最終アクセスから30日間はサーバーにアクセスしないようになった。
posted by ねこまんま at 02:58 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年08月08日

iPhoneのiOS4.3でopacity変更時に画像が欠ける

iPhoneのiOS4.3でopacityをanimateで変更した際に画像が欠けるバグに遭遇

$("img").css("opacity",0).animate({
"opacity":"1"
});


opacityを1ではなく0.99に変更することで画像が欠けずに

$("img").css("opacity",0).animate({
"opacity":"0.99"
});
posted by ねこまんま at 11:33 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年07月27日

初めてのgit入門

Gitというと黒い画面と難しいイメージですが、Macのフリーソフト「 SourceTree」でGitを利用する方法を解説します。

ひとまずSourceTreeを起動するとこのような画面が表示されます。

SourceTree起動画面

日本語も利用できるようです。これなら安心ですね。

まずは、一人でGitを利用したバージョン管理をしてみましょう。右上のDBのアイコンをクリックします。次に右の「リポジトリを作成」をクリックしましょう。リポジトリのタイプに「Git」を選択し、リポジトリの保存先はひとまず適当なフォルダ(repo)に設定し、「repo」など適当な名前を指定しましょう。

これでtestリポジトリが作成されました。ブックマークに今作成したリポジトリが表示されたと思うので、ダブルクリックして表示しましょう。リポジトリの管理画面が表示されました。

つぎに、作成したリポジトリに適当なファイルを入れてみます。そうするとリポジトリの管理画面の下部にある「作業ツリーのファイル」にリポジトリに入れたファイル名が表示されます。

スクリーンショット 2012-07-27 3.28.22.png

Gitでは先ほど作成したリポジトリはWorking Directoryと呼ばれる作業ディレクトリです。実際の作業はここで行ないます。
posted by ねこまんま at 03:29 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年07月23日

isPrototypeOfメソッド

オブジェクトで利用することができ、他のオブジェクトのプロパティとして使われているか確認できます。

var hoge = {}
var Foo = function(){}
Foo.prototype = hoge;
var foo = new Foo();
hoge.isPrototypeOf(foo)// true


このサンプルだとhogeはfooのプロパティとして利用されているので。
タグ:isPrototypeOf
posted by ねこまんま at 05:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月22日

hasOwnPropertyメソッド

オブジェクトのプロパティがオブジェクト自身が持つものかどうか確認するメソッド。

var Hoge = function(){
this.foo = "foo";
}
Hoge.prototype.foo2 = "foo2";
var hoge = new Hoge();
hoge.hasOwnProperty("foo")//true
hoge.hasOwnProperty("foo2")//false


これでprototypeで作成されたオブジェクトと区別ができる。
タグ:hasOwnProperty
posted by ねこまんま at 20:18 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

propertyIsEnumerableメソッド

propertyIsEnumerableメソッドはプロパティが加算できるかどうか確認できます。加算できるとfor inの際に列挙されます。

var hoge = {a:1,b:2};
hoge.propertyIsEnumerable("a");//true


var hage = [1,2,3];
hage.propertyIsEnumerable("length");//false

posted by ねこまんま at 20:13 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

protptypeプロパティ

JavaScriptでは関数にコンストラクタ関数を利用してオブジェクトを追加する方法とprototypeプロパティを利用してオブジェクトを追加する方法がある。

var Hoge = function(){
this.foo = "foo";
this.bar = function(){return "bar"}
}
Hoge.prototype.foo2 = "foo2";
Hoge.prototype.bar2 = function(){
return "bar2";
}
var hoge = new Hoge();
console.log(hoge.foo);//foo
console.log(hoge.bar());//bar
console.log(hoge.foo2);//foo2
console.log(hoge.bar2());//bar2


prototypeで追加されたオブジェクトはコンストラクタ関数への参照の為、コンストラクタ関数に変更を加えるとすでに生成されたインスタンスも含めて全てのオブジェクトに反映されます。

var Hoge = function(){}
var hoge = new Hoge();
console.log(hoge.foo2);//undefined
Hoge.prototype.foo2 = "foo2";
console.log(hoge.foo2);//foo2


コンストラクタ関数を利用して追加したオブジェクトとprototypeプロパティを利用して追加したオブジェクトではコンストラクタ関数を利用して追加したオブジェクトのほうが先に参照されます。コンストラクタ関数を利用して追加したオブジェクトがない場合にprototypeプロパティを利用して追加したオブジェクトが参照されます。

var Hoge = function(){
this.foo = "foo";
this.remove = function(){
delete this.foo
}
}
Hoge.prototype.foo = "foo2";
var hoge = new Hoge();
console.log(hoge.foo);//foo
hoge.remove()
console.log(hoge.foo);//foo2


タグ:protptype
posted by ねこまんま at 19:46 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

JavaScriptと正規表現

JavaScriptで正規表現を利用する方法

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)
特定のテキストの開始位置を取得(searchメソッド)
マッチした文字を取得(matchメソッド)
マッチした文字を置き換える(replaceメソッド)

特定のテキストを含むかどうか確認(testメソッドとexecメソッド)

特定のテキストを含むかどうか確認するにはtestメソッドとexecメソッドがあります

testメソッド

testメソッドは特定のテキストを含む場合trueを、含まない場合はfalseを返します。単純なマッチングに利用するのが良いでしょう。

var txt = "hogehoge";
console.log(/hoge/.test(txt));//true
console.log(/hage/.test(txt));//false


execメソッド

execメソッドではマッチした結果を配列で返します。

var txt = "hogehoge";
console.log(/hoge/.exec(txt));//["hoge"]
console.log(/hoge/g.exec(txt));//["hoge"]
console.log(/hage/.exec(txt));//null


testメソッドとexecメソッドはRegExpオブジェクトのメソッドのため正規表現から記述する必要があります。

特定のテキストの開始位置を取得(searchメソッド)

searchメソッドはマッチした文字列の位置を返します。マッチした場合、マッチした場所を返します。

var txt = "hogehoge";
console.log(txt.search(/hoge/));//0
console.log(txt.search(/hoge/g));//0
console.log(txt.search(/hage/));//1


次のような単純なif文では指定したテキストが最初にある場合をチェックしてしまいます。

if(txt.search(/hoge/)){
//do smoething
}


といった具合に-1とマッチさせるようにしましょう。

if(txt.search(/hoge/)===-1){
//do smoething
}


マッチした文字を取得(matchメソッド)

matchメソッドはマッチした文字列を取得できます。

var txt = "hogehoge";
console.log(txt.match(/hoge/));//["hoge"]
console.log(txt.match(/hoge/g));//["hoge","hoge"]
console.log(txt.match(/hage/));//null


g(global)オプションを付けることによりマッチ結果を複数取得することができます。

マッチした文字を置き換える(replaceメソッド)

replaceメソッドは第2引数に置き換え文字列を指定することで文字列の置き換えを行ないます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"foo"));//foohoge
console.log(txt.replace(/hoge/g,"foo"));//foofoo
console.log(txt.replace(/hage/,"foo"));//hogehoge


文字列そのものを置き換えるのではなく置き換えた文字列を返すので注意してください。また、置き換え文字列に$&を利用するとマッチした文字列を置き換えの際に利用できます。

var txt = "hogehoge";
console.log(txt.replace(/hoge/,"A$&A"));//AhogeAhoge
console.log(txt.replace(/hoge/g,"A$&A"));//AhogeAAhogeA
console.log(txt.replace(/hage/,"A$&A"));//hogehoge


複数のマッチ文字を利用したい場合は、マッチ時に()でつつみ置き換え文字内で$1〜の文字列を利用します。

var txt = "hogehoge";
console.log(txt.replace(/(h)o(g)e/,"$1$2"));//hghoge
console.log(txt.replace(/(h)o(g)e/g,"$1$2"));//hghg
console.log(txt.replace(/(h)a(g)e/,"$1$2"));//hogehoge


replaceメソッドでは置き換え文字の代わりに関数オブジェクトを足すことができます。

var num = "123456";
num.replace(/[0-9]/g,function(num){
if(num<4){
return num
}else{
return ""
}
})


上記のサンプルでは「123」が帰ってきます。
posted by ねこまんま at 19:20 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月17日

Functionオブジェクト

関数オブジェクトはlegthプロパティを持っていてい、これには関数がとれる引数の数が格納されています。

var hoge = function(a,b,c) {}
hoge.length//3


また、callerプロパティに自身を実行した関数への参照が格納されています。(自身への参照はarguments.caller)

var hoge = function() {
console.log(hoge.caller);
}
hoge();//native code
var hoge2 = function(){
hoge();
}
hoge2();//hoge
タグ:function legth
posted by ねこまんま at 02:30 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

instanceof演算子

instanceofでオブジェクトがインスタンスかどうか確認できます。

var Hoge = function(){
}
var hoge = new Hoge();
hoge instanceof Hoge//true
hoge instanceof hoge.constructor//true


タグ:instanceof
posted by ねこまんま at 02:07 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

constructorプロパティ

constructorプロパティはnew演算子でオブジェクトを作成した際に自動的に割り振られるプロパティです。

var Hoge = function(){
alert("hoge")
}
var hoge = new Hoge();
console.log(hoge.constructor);//function(){ alert("hoge")}


これはオブジェクトを作成する際にコンストラクタで利用された関数への参照です。そのためこのconstructorプロパティを利用して新たにオブジェクトを生成することも可能です。

var hoge2 = hoge.constructor();
タグ:Constructor
posted by ねこまんま at 02:01 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月16日

iPhoneでwindowの高さを取得

iPhoneではjQueryを使って「$(window).height()」としても正確な高さが取得できない。すこし小さくなる。jQueryを使わずに、

var winHeight = window.innerHeight


などとすると正確な高さが取得できるようになります。
posted by ねこまんま at 19:41 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

iOS4.3でclientX,clientY

iPhoneのiOS4.3でclientX,clientYが取得できないバグがある。pageX,pageYと同じ値が返ってくる。

var clientX = event.targetTouches[0].pageY - $(window).scrollTop()


などとしてclientXを計算すればOK
posted by ねこまんま at 19:32 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

Androidとgesture event

Androidはgesture eventに対応していないようなので以下のコードが発火しなかった。(ちなみにAndorid2.3で検証)

$("selector").on("gesturestart",function(){
//do something
}).on("gesturechange",function(){
//do something
}).on("gestureend",function(){
//do something
});
タグ:android gesture
posted by ねこまんま at 19:26 | Comment(0) | TrackBack(0) | Android | 更新情報をチェックする

2012年07月15日

Backborn.js入門

とりあえずBackborn.jsを触ってみた感想

Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>


まずは以下のような基本コードを実行「hello world」を表示してみる

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
var listView = new ListView();
})(jQuery);


initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。

つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem');
this.counter = 0;
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});
var listView = new ListView();
})(jQuery);


renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。

つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);


新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。

次はViewをItemとList2つに分けて管理
(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');

this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},

appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);


最後は削除や編集を取り入れたバージョン

(function($){
Backbone.sync = function(method, model, success, error){
success();
}

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);


参考:Hello Backbone.js
タグ:Backborn.js
posted by ねこまんま at 04:21 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

Sublime Text 2

Sublime Text 2の機能まとめ。

⌘+Rで関数検索
⌘+Shift+Pでコマンドパレットを表示
⌘+option+ドラッグでブロック編集

参考

こもりさんと Coda 2 と Sublime Text 2 #st2jp
タグ:Sublime Text 2
posted by ねこまんま at 02:33 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年07月14日

iPhoneでjQueryのliveイベントが発火しない件

iPhoneでjQueryのliveイベントが発火しない。

$("div").live("click",function(){
alert("ok")
});


delegateもdocumentやbodyにbindした際に発火しない。

$(document).delegate("h1","click",function(){
alert("ok")
})


$("body").delegate("h1","click",function(){
alert("ok")
})


解決策としては「cursor: pointer;」を要素に指定するというもの。

h1{
cursor: pointer;
}


はい、すごいですね。たまにあるclickイベントが発火しないときにも有効です。

posted by ねこまんま at 01:55 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年07月13日

関数の引数を取得するarguments

関数やメソッドを実行する際に内部的にargumentsという変数が生成されており、この変数には引数の配列が格納されています。

var hoge = function(){
coneole.log(argument);//aaa,bbb,ccc
}
hoge("aaa","bbb","ccc");


デバッグや可変関数の際に利用できます。

また、arguments.calleeには関数オブジェクト自体が格納されているので再帰的に自信を呼び出すことができる。

var i=0;
var hoge = function(){
if(i<10){
i++;
arguments.callee();
}else{
console.log(i);//10
}
}
hoge();
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年07月09日

iPhoneのtouch イベント

iPhoneのtouch イベントについてもう少しくわしく調べてみるとタッチイベントの取得は

$("hoge").bind("touchstart",function(e){
var e = event.touches[0];
console.log(e.pageX)
})


だけでなく

$("hoge").bind("touchstart",function(e){
var event = e.originalEvent.changedTouches[0];
console.log(event.pageX)
})


でも取得できるっぽい。
posted by ねこまんま at 23:54 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年06月19日

applyとcall

JavaScriptでは applyメソッドとcallメソッドが用意されている

var hoge = {
bar : 13,
foo : function(){
alert(this.bar);
}
}
hoge.foo()


上記の様なJavaScriptを実行すると13がアラートされます。

var hoge = {
bar : 13,
foo : function(){
alert(this.bar);
}
}
var fuga = {
bar : 12
}
hoge.foo.call(fuga);
hoge.foo.apply(fuga);


上記のようにcallメソッドやapplyメソッドを介して実行するとthisの取り扱いが変わり12がアラートされるようになります。

var foo = function(a,b){
alert(a);
alert(b);
}
foo.call(this,1,2);
foo.apply(this,[1,2]);


callメソッドやapplyメソッドは関数を実行する際の引数の取り扱いが違います。callメソッドはカンマ区切りでapplyメソッド配列で引数を渡します。

callメソッドの活用例として以下のようなものがあります。

var anchors = document.getElementsByTagName('a');
anchors.shift();


DOMオブジェクトのリストは Arrayオブジェクトのメソッドが利用できません。しかし一度Array.prototype.slice.call()として実行すると返り値は配列になるのでArrayオブジェクトのメソッドが利用できるようになります。

var anchors = document.getElementsByTagName('a');
anchors = Array.prototype.slice.call(anchors);
anchors.shift();


同様にargumentsも配列のような形状ですが、 Arrayメソッドは利用できません。

var hoge = function(){
arguments.shift();
}
hoge(1,2,3);


Array.prototype.slice.call()で配列に変換することで利用が可能になります。

var hoge = function(){
var arg = Array.prototype.slice.call(arguments);
arg.shift();
}
hoge(1,2,3);


参考:applyとcallの使い方を丁寧に説明してみる - あと味
タグ:apply call
posted by ねこまんま at 09:43 | Comment(0) | TrackBack(0) | 関数/文法 | 更新情報をチェックする

2012年06月18日

Macでユーザーのライブラリディレクトリを表示する

Macではユーザーのライブラリディレクトリがデフォルトで非表示になっており非常にめんどくさい。

chflags nohidden ~/Library 


ターミナルから上記のように入力するとライブラリディレクトリが表示されるようになります。
タグ:Mac
posted by ねこまんま at 16:25 | Comment(0) | TrackBack(0) | mac | 更新情報をチェックする

2012年06月17日

Dropboxの容量を3GB追加する方法

スマートフォン用のDropboxアプリの最新版(over1.5)に変更すると「カメラ UL」使用確認画面が表示されます。有効化し【アップロード】を選択するとカメラロール内の写真がアップロードされだします。

アップロードが500MBを超えるたびに500MB容量が追加され、最大3GBの計6回まで追加されます。

動画もアップロードできるので動画を撮影してアップロードを繰り返すと簡単に追加容量がゲットできます。

参考:Dropboxのアプリから無料で3GB容量追加できます!写真や動画の自動バックアップが可能になりました。
posted by ねこまんま at 14:30 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年06月06日

IEでYou Tubeを再生するとタイトルが文字化けする件

IEでYou Tubeを再生するとタイトルが文字化けするので困った件。

IEでYouTubeを再生するとlocation.hashの内容をタイトルの末尾に追加しようとする。そのためlocation.hashが2バイト文字だと文字化けしてしまいます。

めんどくさいけど次のようにしてタイトルの内容を復元すると文字化けが治ります。

var title = document.title;
swfobject.embedSWF("http://www.youtube.com/v/"+id+"?playerapiid=mytplayer&autoplay=1", "player", "740", "465", "8", null, null, params, atts);
document.title =title
タグ:IE You Tube
posted by ねこまんま at 16:46 | Comment(0) | TrackBack(0) | API | 更新情報をチェックする

2012年06月05日

CSS3のpointer-events

CSS3のpointer-eventsを利用するとマウス操作のイベントを無効化できる。

pointer-events: none;


Androidでレイヤーのせた際に下のエレメントが反応する場合などにも利用可能。
タグ:pointer-events
posted by ねこまんま at 15:37 | Comment(0) | TrackBack(0) | CSS | 更新情報をチェックする

2012年05月22日

Safariかどうか判別する

Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。

$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。

つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。

if( navigator.userAgent.indexOf("Safari") > 0 &&
navigator.userAgent.indexOf("Chrome") < 0 ){
location.hash = "#"+encodeURIComponent(”ほげ”)
}else{
location.hash = "#"+”ほげ”
}

posted by ねこまんま at 16:42 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年05月06日

HTML5のcanvasで円グラフを描画

HTML5のcanvasで円グラフを描画を描画する方法

window.onload = function(){
var imgcanvas = document.getElementById("imgcanvas");
if (imgcanvas.getContext){
var ctx = imgcanvas.getContext("2d");
var xPos = imgcanvas.offsetWidth / 2;
var yPos = imgcanvas.offsetHeight / 2;
var radius = 80;
var sAngle = 0;
var eAngle = 0;
sAngle = ( 0 - 90) * Math.PI / 180;
eAngle = (120 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(xPos , yPos);
ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
ctx.closePath();
ctx.fillStyle = "rgba(255,0,0,.5)";
ctx.fill();
}
};
タグ:HTML5 Canvas
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年04月18日

jQuery を利用して1行の高さ(line-heigt)を取得する

jQueryでline-heigtで1行の高さを取得しようとした所、ブラウザにより返り値がちがったので対応しました。

if($.browser.msie && $.browser.version===9.0){
var lineHeight = $(this).css("line-height")*parseInt($(this).css("font-size"))
}else if($.browser.msie ){
var getStyle = $(this)[0].currentStyle || document.defaultView.getComputedStyle($(this)[0], '');
var lineHeight = getStyle.lineHeight*parseInt($(this).css("font-size"))
}else{
var lineHeight = parseInt($(this).css("line-height"));
}
alert(lineHeight)


こんな感じでした。
posted by ねこまんま at 15:58 | Comment(0) | TrackBack(0) | jQuery | 更新情報をチェックする

2012年04月13日

条件付きコメントでIE対応を簡単にする

コピペで使えるシリーズ

<!DOCTYPE html>
<!--[if lt IE 7]> <html dir="ltr" lang="ja" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="ja" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="ja" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html dir="ltr" lang="ja" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html dir="ltr" lang="ja" class="no-js"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
<head>


こうやっておくとIE対応が楽になる

さらにModernizrとかも合わせて使うといいかも
posted by ねこまんま at 23:48 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年04月05日

iScrollでページ内リンク

iPhoneやAndroidで固定配置を実装するJavaScriptライブラリ「iScroll」。

myScroll = new iScroll('wrapper');
$("#nameNav a").click(function(){
myScroll.scrollToElement($(this).attr("href"), 1);
return false;
});


iScrollでページ内リンクを実装するには上記のようにscrollToElementメソッドを利用します。
タグ:iScroll android
posted by ねこまんま at 14:50 | Comment(0) | TrackBack(0) | iPhone | 更新情報をチェックする

2012年04月04日

Photoshopでテキスト情報だけを抜き出す

MacのFinder上で「Command」+「i」を押すとテキスト情報が取り出される。
タグ:Photoshop
posted by ねこまんま at 11:36 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする