今日もコーディング日和　

最近javascriptを使う機会があったので、クラスの使い方、定石的な書き方などをまとめてみました。

まだまだ変化のある言語ですし、自分はCなど静的言語を中心にやってきたので、よいまとめサイトが見つからなかったんですよね。

詳細まで書いているので、若干難しいですがjavascript関連の情報がひとつにまとまっているのですごく使いやすいです。

WebAPI,DOM,Event,jQueryと周辺技術やライブラリのことから、HTML5,Node.jsなど新しめの情報までまとまっています。

前半にクラス周りの事をまとめときました。

・クラスの作成

function Character(x,y){
　　　　//この変数は外部からアクセス可能
	this.x = x;
	this.y = y;
	
	this.move = function ()
	{
		this.x += 1;
		this.y += 1;
		
		alert("x:"+this.x+"y:"+this.y);
	}	
}
var c1 = new Character(10,10);
c1.move();

・クラスの継承

クラスの継承にはprototypeを使う

prototypeの特徴

・すべての関数・オブジェクト prototypeという名前のプロパティを持つ

・自クラスにメソッドがなければプロトタイプで定義されているものを使用する

・prototypeは継承元クラスへの参照のようなもの

function Person(x,y){
	this.x = x;
	this.y = y;
	
	this.walk = function()
	{
		this.x += 1;
		this.y += 1;
		alert("歩きます。("+this.x+","+this.y+")");
	}
}

Person.prototype.dash = function ()
{
	this.x += 10;
	this.y += 10;
	alert("走ります。("+this.x+","+this.y+")");
}


person1 = new Person(0,0);
//自クラスにメソッドがなければプロトタイプで定義されているものを使用する（プロトタイプチェーン）
person1.walk();
person1.dash();

・クロージャ

平たく言うと上にかいたクラスとほぼ同じ機能を作れます。

書き方の違いはthisを使わないこと。使用する機能を戻り値として返すこと。newを使わないことです。

関数内で関数を宣言することで使えます。

function Person(x,y){
　　　　//この変数は外部からアクセス不可
	var x =x;
	var y =y;
	
	
	function walk()
	{
		x += 1;
		y += 1;
		alert("歩きます。("+x+","+y+")");
	}
	
	return walk;
}

var closure = Person(0,0);
closure();
closure();
closure();

エンクロージャ：クロージャにおいて、中の関数を囲んでいる外側の関数のこと(ここだとPerson)

レキシカル変数：エンクロージャのローカル変数のこと(ここだとx,y)

このあたりの用語も時々使われてます。

・クロージャとクラス

自分の理解を書いておきます。間違っていたら指摘お願いします。

●クラス

javascriptではオブジェクトによってクラスを実現できる。thisで追加された変数はプロパティとして、

オブジェクトのインスタンスに追加される。オブジェクトのメンバの参照時は自分のメンバを見て存在しなければ、prototypeのメンバを参照し解決する

prototypeで継承を実装でき、同じオブジェクトを大量に作るときなどにも便利

http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20369263/1/

(詳細はthis参照、プロトタイプチェーン）

●クロージャ

クロージャーは状態を持つ関数、変数はvarで宣言し、ローカル変数となるため外部からアクセス出来ない。

コールバック関数を作るときなどに便利。

（詳細はCallオブジェクト、スコープチェーン）

・定石的な書き方

1.オブジェクトの初期化

comが初期化されていればそれを使い、なければ空オブジェクトで初期化する。

//オブジェクトの初期化
var com = com || {};
//変数の初期化にもつかえる
var a = a || 256;

2.名前空間的な物

オブジェクトのプロパティを名前空間のように使い、プロパティ、メソッドの重複を防ぎます。

var com = com || {};
if(!com.mydomain) com.mydomain = {}; 
if(!com.mydomain.myproj) com.mydomain.myproj ={};
if(!com.mydomain.myproj.myfunc) com.mydomain.myproj.myfunc = {};

3.無名関数、クロージャーでグローバルの汚染を防ぐ

(function() {
//このなかは関数スコープなのでグローバルを汚染しない
})();

名前空間的なもの（グローバルにあるもの）を無名関数からアクセスして、

うまくアクセスの制限をかける。

var com = com || {};
if(!com.mydomain) com.mydomain = {}; 
if(!com.mydomain.myproj) com.mydomain.myproj ={};
if(!com.mydomain.myproj.myfunc) com.mydomain.myproj.myfunc = {};

//以下の中ではグローバルを汚さない
(function() {
com.mydomain.myproj.myfunc.action= (function(){
alert("hoge");
});
})();

//メソッド呼び出し
com.mydomain.myproj.myfunc.action();

※以下基本的な事※

・変数・定数

varを使って宣言する。varは無くても使えるけどスコープはグローバルになる。

定数はconst

var a;
//定数
const PI =3.141592653589;
a=PI;
alert(a);

変数の初期値はundefined

・変数のスコープ

グローバルスコープ、関数スコープがある。ブロックスコープはなし。

function func1()
{
	var x;
	x="func1";
	alert(x);
}

function func2()
{
	var y;
	y="func2";
	alert(x);
	//関数スコープなのでここでアクセスできない
	alert(y);
}

・オブジェクト

連想配列のようなもの。

関数を値として保存できる。クラスを作成するときに使えたりとjavascriptの重要機能の一つ

var obj = {a:1,b:2,c:3};
obj.a;
obj['a']
//新規プロパティも簡単に追加できる
obj.d = 4;
//関数もプロパティにできる
obj.add = function(a,b){ return a + b };
alert(obj.add(1,2));
//オブジェクトの作成方法
var obj2 = new Object();
//空オブジェクトで作成
var obj3 = {};

・配列

実態はArrayクラスとのこと。

使い方は他の言語と同じ。

var arr = [1,'hoge',2];

・型

文字列、数値、ブーリアン,null,undefined、オブジェクト型と、ラッパークラスがある。

基本型は値が渡され、オブジェクトは参照（ポインタ）が渡される。

・引数の渡し方

デフォルト引数のようなことをできる

function len(x,y){
	return Math.sqrt(x*x+y*y);
}

function len2(pos){
	pos = pos || { x:0,y:1};
	return Math.sqrt(pos.x*pos.x+pos.y*pos.y);
}

参考サイト

クラス関連について調査した時に見つけたサイト

・クラスのいろいろな書き方

http://d.hatena.ne.jp/amachang/20060516/1147778600

・varとthisの違い

http://d.hatena.ne.jp/bingo_nakanishi_perl/20090529/1243605991

・thisの実行時解釈

http://d.hatena.ne.jp/amachang/20070917/1190015123

・javascriptのオブジェクト指向についてのtips

http://ichitcltk.hustle.ne.jp/gudon/modules/pico_rd/index.php?content_id=32

・スコープチェーン,callオブジェクトについて

http://d.hatena.ne.jp/otosohamirin/20100519/1274258237

・クロージャを使ったペイントソフト

http://0xcc.net/blog/archives/000040.html

・プロトタイプチェーン

http://d.hatena.ne.jp/amachang/20060406/1144339901

・オブジェクト、コンストラクタ、プロトタイプ、スコープ

http://d.hatena.ne.jp/qnzm/20081014/1223934778

・jQueryでクロージャーを有効活用

http://dqn.sakusakutto.jp/2012/02/javascript_13.html

・クロージャとprototypeの実行効率の違い

http://d.hatena.ne.jp/anatoo/20090602/1243881722

・タイプ・クラス・プロトタイプの考え方

http://blog.livedoor.jp/dankogai/archives/51033584.html

・javascriptPrototype注意点

http://blog.livedoor.jp/dankogai/archives/50808279.html

・Prototype的継承？

http://blog.livedoor.jp/dankogai/archives/50662064.html

・名前空間などソースを使いやすく書く方法

http://archiva.jp/web/javascript/writing_style.html

・jQueryのextend　初期値をもたせたりできる

http://d.hatena.ne.jp/nitoyon/20110324/jQuery_extend_mania

・javascriptのクラスの作成（長文）

http://mahoris-program.blog.so-net.ne.jp/JavaScript_Class_Create_1

・javascript カプセル化

http://yabooo.org/archives/53

・無名関数のいろんなパターン

http://blog.livedoor.jp/eeu/archives/55310188.html

・無名関数の考え方

http://d.hatena.ne.jp/amachang/20080208/1202448348

・クロージャーを使ったクラスと継承

http://revengejs.blog69.fc2.com/blog-entry-10.html

Permalink | コメント(0) | トラックバック(0) | 01:32

2012-04-09 iPhone動画ダウンロードアプリ

iPhone動画ダウンロードアプリ

iPhone

このへんのネタ動画や

http://www.youtube.com/watch?v=rznYifPHxDg

このあたりの綺麗な動画を

http://www.youtube.com/watch?v=e-GYrbecb88

友人に見せたかったので、iPhoneの動画ダウンロードアプリをいくつか試してみました。

Clipbox

無料のダウンロードアプリです。Youtube、FC2あたりに対応してた様な気がします。というのも、最近何故か起動しなくなり、

アプリをインストールしなおしても起動しなくなりました。

動画ダウンロード・マネージャー Pro

有料アプリ。Youtube,FC2,他にもmp4とか動画コンテンツのリンクはダウンロードできるみたいです。

UIが機能的では無いですが、凝っていて面白いです。

パスワードロック、自動連続再生、前回再生位置覚えるなど、細かな機能もしっかりあって

さすがストアの上位ランキングにいるだけある感じです。

簡単動画ダウンローダー Pro

有料アプリ。Youtube,FC2,ニコニコ、mp4へのリンクに対応。

動画ダウンロード・マネージャー Proとの違いはニコニコ動画への対応と、

FC2動画で余計なファイルは落とさない、Youtubeでは名前の自動取得って感じですかね。

まとめ

他にもいくつかアプリ試しましたが、ダウンロード方法がわかりやすいのはこの辺りでした。

ClipBoxは無料で使えるので良かったのですが、自分は最近動かなくなりました。

動画ダウンロード・マネージャーProは、ランキングの上のほうにいるだけあって、高機能でデザインも頑張ってます。

簡単動画ダウンローダー Proは機能はまだまだですが、ニコニコ動画への対応や、手間のかかる作業が少ないのがいいですかね。

Permalink | コメント(0) | トラックバック(0) | 00:51

2012-03-19 iPad用高画質ゲーム

iPad用高画質ゲーム

iPad, Apple

新iPadを生かせそうなゲームをダウンロードして遊んでみました

Infinity Blade II - Chair Entertainment Group, LLC

まずは、Infinity Blade II、AppStoreのトップで紹介されていて

この手のゲームにしては安かったのでダウンロード。

戦闘はこんな感じの画面で、フリックとかして剣で斬りつけます。

ガード、パリイ、回避、魔法、必殺みたいな技があり

なかなかゲームしてる感じがします。

光の表現もすごくいい感じですね。

戦闘の合間にリアルタイムレンダリングのムービーを挟んで、

すぐにまた戦闘って感じで、移動はほとんどない感じです。

戦闘の合間のシーンでは、ところどころに落ちている袋や宝箱に

お金やアイテムが入っているのでそれを集めるところがゲーム的要素でしょうか。

レベル上がった時の上げるステータス選択や、

武器に属性をつける宝石とかもあるみたいで、

凝りすぎず、シンプルすぎないiPadでやるにはちょうどよいゲームだと思います。

Machinarium - Amanita Design

もう一つのゲームは、Machinarium、iPad2時代に出たゲームですが、

絵がすごく綺麗なので買ってみました。マシナリウムと読むそうです。

上記写真タイトル、スタート画面、絵の力がすごいです。世界観に引きこまれます。

画面に表示されるヒントから謎を解いていくタイプのゲームです。

ゴーストトリックみたいなタイプですね。

こんな感じで謎をといてステージを進んでいきます。

右下にある電球とか本とかでヒントもらえます。

あまりいうとネタバレになりそうですが、アイテムは合成して使えるものがあります。

最初英語見逃していて、延々と悩んでいましたｗ

開発者のサイトはこちら。

http://amanita-design.net/

他にもセンスのいい作品がたくさんありますね。

SamorostとかいうのはFlashゲームで遊べるようです。

感想

上記２つのゲームはどちらもかなり綺麗で、見るだけでもかなり楽しい感じでした。

しかしながら、まだ新iPadの解像度をフルに生かしている感じはしないですねー。

http://timescapes.org/trailer.asp

http://vimeo.com/33756895

このあたり動画のHD版の画質がiPadの能力を最大限に引き出している感じがするので

これぐらいのクオリティのゲームが出ないかなーと楽しみにしてます。

Permalink | コメント(0) | トラックバック(0) | 00:03

2012-03-17 新型iPadレビュー

新型iPadレビュー

iPhone, iPad, Apple

新型iPad買いました！

感想を一言でいうと、「未来を手にれた」って感じです！

発売日当日

発売日当日は朝、仕事に行く前にAppleStore心斎橋まで行って来ました。

自分は６時ぐらいについて、すでに５０人ぐらい並んでいたと思います。

解像度の凄さ

使ってみて感じたのは解像度の凄さです。

この方の画像を使って比較してみました。

東京情報 Tokyo Information Net | アニメ | アニメーター | SHIRAKABA

1600x1200 PC用液晶ディスプレイ

New iPad

オリジナル画像はこちらです（2Mくらいあります）

http://funnystep.sakura.ne.jp/sample/PCDisplay.JPG

http://funnystep.sakura.ne.jp/sample/iPad.JPG

圧倒的解像度です！

このPC用のディスプレイは、１０万ぐらいする高級品ですが解像度ではiPadに軍配があがりました。

（目へのやさしさ、色合いなどiPadで勝てないところもあります。）

iPhoneアプリの自動拡大も高画質に！

開発者の方には朗報です、iPhoneアプリの自動拡大が非常に綺麗になりました。

テストに使ったのは、ズボラな方にもオススメ家計簿アプリ「残額メモ」です。

かんたん小遣い管理！残額メモ～今日あといくら使っていいの？ - Yasuko Shikiuchi

昔のiPad

iPad 2012

どうやら、昔はRetinaじゃないデータ(3GS以前向け）を拡大していたようですが、

今回からRetina(4以降向け）を拡大しているようです。

iPadで動画を見る

iPadの凄さを実感したい場合「4k2k」「4k」と呼ばれる解像度の動画を見ると凄さがわかります。

TimeScapes Time Lapse Trailer

上の動画をiPadで見ましたが、星空がめっちゃ綺麗でした！

実際の山など空気の澄んだところでみる星空に匹敵する美しさです。

快適なWebブラウジング

解像度の向上のお陰でWebを見るのもPCと同じ感覚でできるようになりました。

いままでのiPadだとちょっと我慢して使っているという感じがありましたが、

今回は、細かな情報までばっちり表示されており、レスポンスもPCと同じで完璧です！

おすすめアプリ

CloudReaders pdf,cbz,cbr

フリーのPDFリーダーです。シンプルですが、すごく使い勝手がいいのでお金掛けたくない人にはお勧めです。

画面は以下のような感じです。

http://netpoyo.jp/

年明けにかった「ねとぽよ」は、iPad初代だと見にくかったのですが、

新iPadでは素晴らしい見やすさでした！

GraffitiPot

2chリーダーです。BB2Cでも解像度が上がったのでよかったのですが、

iPadならではの体験をしたかったので買いました。

画像があればプレビューされたり、大きな画面を生かしていたりと、買ってよかった気がします。

RSSリーダー系

Flipboard

RSSリーダーという感じでもないですが、Flipboardは大きなiPadだと触っていて気持ち良いですね～。

tumblr、twitter、facebookにも対応しているのでいろんなタイムラインを追う人におすすめです。

Reeder for iPad - Silvio Rizzi

googleリーダー用アプリです。

超高速で読み込んでくれるiPadでのデファクトスタンダードとなってるアプリです。

AeroReader

livedoor Reader用のアプリです。Readerのほうが高機能、レスポンスもよいですが、

無料で済ましたい方に。

HootSuite for Twitter

Twitterクライアントです。iPadの画面サイズならやっぱりマルチカラムが欲しい！

ということでこれでした。

TweetDeckのiPad版は残念ながらバグだらけでちょっと実用には厳しかったです。

リモートデスクトップクライアントは以下のやつ入れてみました。

logmelnはWindowsのパスワード入力しなきゃいけなかったので試してません。（なんとなく不安）

SplashtopはiPadの高解像度しようとすると、自分の環境では色数が減ったりしてました。

その他は概ねいい感じ。高画質対応してくれるといいですねー。

詳細レビューは以下へ

http://d.hatena.ne.jp/gravit/20110730/1312094433

TeamViewerは、高解像度対応してますが、さすがに高解像度だとガクガクになります。

AirPlayitHDは、指定フォルダの動画ファイルを共有で見る感じです。

PCにも負荷がかかるようですが、いろんな拡張子の動画が見れて面白いですね。

Elves Bakery

pucchon designさんが作った絵本です。

pucchon design — 絵本・電子書籍・iphoneアプリ・ipadアプリ・かわいらしくてほっくりするもの

New iPadだと普通の本と同等かそれ以上の質感を感じます。夜に見るとお腹が減りますねｗ

Photo-Sort

iPad用の画像閲覧アプリです。落ちたりしませんし、パスワード機能あり、サムネイルあり、画像劣化なしで大きな画像も表示

と、完璧なアプリです。iPhotoより安いし、機能的に不満ないので画像管理はこれ一つでOKですね～

Air Sharing HD

データ保存用・閲覧用アプリです。iPadがUSBメモリ替わりになります。

サムネ表示はないですが、PDF、画像、Office、iWork、リッチテキストも見れるようです。

自分はソースコード閲覧に使ってます。文字の色もつけてくれるし、

これ以外に使いやすいソースコードビューア知らないのであれば教えてください。

手書きメモアプリについては以下でレビューしています。

http://d.hatena.ne.jp/gravit/20110618/1308484637

Noteshelfの書き心地が最高なのでお勧めです。

大きなメモを書きたければ、Underscore Notifyですかね。

他のアプリはappbankさんなどのレビューが参考になります。

http://www.appbank.net/2012/03/17/iphone-news/385072.php

http://applembp.blogspot.jp/2012/03/best-ipad3-app60-japan.html

まとめ

New iPadはクリエイター関係のお仕事している方に激しくおすすめしたいですね～。

まさにこれから色んな表現、物が作れるって感じられるデバイスですし、

次の時代で何をつくろうか？ってすごくワクワクさせてくれます。

ゲームもいくつかやったので次はそっちをレビューしようと思います。

Permalink | コメント(0) | トラックバック(0) | 22:56

2012-02-29 OS再インストール

OS再インストール

パソコンの調子が悪かったのでOS再インストールしました。

症状

・ファイルを一覧を起動時に取得するアプリが非常に重い

・いきなり電源が切れて再起動する

・チェックディスクに１日ぐらいかかる。

・チェックディスク中に電源が落ちる

・Safeモードだとアプリの起動はまだ早く立ち上がる

HDDがそろそろやばいのかなと思ったのですが、

http://sourceforge.jp/magazine/10/02/18/0422227

のツールでHDD診断したところ正常値。

あとセキュリティソフト止めると、アプリの立ち上げが早くなりました。

上記の現象から考えたパソコン不調の原因

・電源の寿命

・セキュリティソフトの問題

・不良セクタ

・ウィルス

使っている電源はこのへんです。電源が安いと信頼性が全然ないのでこのあたりはお金かけてます。

オウルテックシーソニック電源 660W 80PLUS GOLD SS-660KM

特に長時間動かしていると落ちるわけではなく、チェックディスクとかHDDのいろんな所アクセスしてる時におちる感じなので

電源は大丈夫だと思います。

他の原因は直しにくいものばっかりだったので、HDDの空いてるパーティションにOS入れなおすことで対応しました。

一時期はCPUとか調べてパソコン買い換える計画も考えたのですが、

AM3+とFM1と２つのソケットのどっちが今後伸びるか分からない状態で、

FM1はもう終了予定が決まっていてFM2になるそうなので、今買い換えのタイミングとしては悪いらしいので、やめました。

AMD A8-Series APUs A8-3870 FM1 TDP 100W 3.0GHz×4 キャッシュ4MB RH6550D AD3870WNGXBOX

AMD FX-Series AMD FX-4100 TDP 95W 3.6GHz×4 FD4100WMGUSBX

A8-3870は安いグラボ搭載してる感じなので、面白そうだったんですけどね。

そういえばiTunesの曲が、3G回線からでも買えるようになったようですね。

試しにはってみます。GGXXはかなりやり込みましたねー iPhoneで出ればすぐに買うのですが。

Drumhead Pulsation

Permalink | コメント(0) | トラックバック(0) | 02:48