TypeScriptを触ってみた

TypeScriptを触ってみたので覚書。結構良さげ。

環境構築

最近sublime text2使ってるからyanzmさんが書いてるのを参考に環境構築。

http://y-anz-m.blogspot.jp/2012/12/sublime-text-2-typescript.html

上記エントリーには書いてないけど、以下のコマンドでTypeScriptをインストールするのも忘れずに。

sudo npm install -g typescript

書き方を学ぶ

以下のエントリーたちが参考になった。

TypeScript クイックガイド – phyzkit.net

大体の仕様を把握したら本家からSampleCodeをダウンロードしてきて動かしてみるといいと思う。

TypeScript – Source Code

他のファイルを参照

TypeScriptでjsをrequireするような機能はない。tsファイルをrequireしかできないみたい。他で定義されているtsファイルを使いたい場合は以下のように記述する。jQueryとか使いたい場合はこの機能でtsファイルに変換されたjQueryをrefarenceで持ってくることで使える

/// <reference path="hello.ts"/>

まとめて1ファイルを作る

自分で作っているtsファイルなのであればまとめて1ファイルにコンパイルしてしまえばrefarenceの記述をしなくても依存関係をちゃんと見てくれるみたい。まとめてコンパイルするときは以下の様なコマンドを使う

tsc –sorcemap -o output.js input1.js input2.js input3.js

オプションで指定してる[–sourcemap]はエラー時に圧縮前のtsファイルの行番号を出してくれるようになるらしい。つけといたほうが何かと便利。詳しいオプションは「tsc -h」で見れる

どう変換される?

module

moduleで外からも使用したい関数を使う場合はexportをつけてあげると参照できるようになる。

変換前:

module Page1 {
	function func1 {
		console.log('func1!');
	}
	export function func2 {
		console.log('func2!');
	}
}

変換後:

var Page1;
(function (Page1) {
    function func1() {
        console.log('func1!');
    }
    function func2() {
        console.log('func2!');
    }
    Page1.func2 = func2;
})(Page1 || (Page1 = {}));

class

publicとかprivateとか指定できるけど、何も意味ない。変換後は結局prototypeに登録される。prototypeに登録されたくない場合はstaticを使いましょう。

変換前:

class Page {
	private num : number = 3;
	public str : string = 'str';

	constructor() {
		this.num = 1;
		this.str = 'string'
	}

	private func1() {
		console.log('func1!');
	}

	public func2() {
		console.log('func2!');
	}

	static func3() {
		console.log('func3!');
	}
}

変換後:

var Page = (function () {
    function Page() {
        this.num = 3;
        this.str = 'str';
        this.num = 1;
        this.str = 'string';
    }
    Page.prototype.func1 = function () {
        console.log('func1!');
    };
    Page.prototype.func2 = function () {
        console.log('func2!');
    };
    Page.func3 = function func3() {
        console.log('func3!');
    }
    return Page;
})();

まとめ

とりあえずわかったのはこれぐらい。結構便利に使えそう。HashChangeでページをページの中身をAjaxでデータ取得して書き換えるとかやってるとどうしてもファイルが巨大になってしまうんだけど、こいつを使えば分割しておいて最終的にコンパイルして1ファイルにしてしまえばいいから保守性はかなり向上しそう。あとは継承とかをうまく使って書いてあげればコードは激減できそうだなぁ。

Support LibraryでLoaderを使ってみた

先日Androidの開発環境を新しくしたら初期作成できるアプリの雛形が増えてた。

  • Tab
  • Dropdown
  • Tab and Swipe
  • Swipe and Title

これは便利と早速試してみようとしたんだけど、これってminSdkVersionがAndroid3系以上じゃないとそもそも選択できないみたい。まだまだ2系って主流だからそれを切り捨てて使うことはできないんで、SupportV4使ってどうにかできないものかと調べてみた。supportV4のrefarenceは以下のURLに乗っている。

http://developer.android.com/tools/extras/support-library.html

ActionBarってSupportV4で対応したかなぁと思ってたんだけど、まだ対応してないみたいね。。。

The ActionBar is not supported by the library. However, when creating your Options Menu, you can declare which items should be added to the Action Bar when it’s available (on Android 3.0 or later). You can do so with the MenuCompat.setShowAsAction() method, for example:

ActionBarはまだ対応してないけど、MenuCompat.setShowAsAction()を使ってOptionMenuで入れてる奴は2系だとOptionボタンで、Android4系だとActionBarに表示されますよって意味かな。ActionBarはAndroid2系では完全に諦めるとして、他にSupportV4でどういうことができるようになるのか?って言うことなんだけど、以下のClassに対応したって書いてある。

  • Fragment
  • FragmentManager
  • FragmentTransaction
  • ListFragment
  • DialogFragment
  • LoaderManager
  • Loader
  • AsyncTaskLoader
  • CursorLoader

FragmentとLoaderに対応したのかー。FragmentはSwipeで使ったことあるけど、Loaderってつかったことないからちょっと調べてみた。Loaderがどんなものかってのは以下にのってる。

Loaders | Android Developers

ざっくり読んだところ、バックグラウンドでデータを取得することができますよって感じっぽい。まぁ、名前からしてそうですね。AsyncTaskのデータ取得に特化したものって考えればいいのかな。ContentProviderからデータを取得したい場合はCursorLoaderつかって、それ以外はAsyncTaskLoaderを使うってのが基本らしい。

んじゃ、早速コードを組んでみるかと以下を参考にLoaderを試してみた。

Android3.0以降で、AsyncTaskLoaderを利用した非同期処理を行う | Tech Booster

結果、エラー。。。コンパイルすら通らないレベル。エラー箇所は以下。

		getLoaderManager().initLoader(0, null, loaderSample);

んで、エラー文言がこんな感じ。

The method initLoader(int, Bundle, LoaderManager.LoaderCallbacks) in the type LoaderManager is not applicable for the arguments (int, null, MainActivity.LoaderSample)

エラー内容的にgetLoaderManager()で取得できているのがsupport.v4のじゃなくて、API LEVEL11以上のやつを持ってきてるっぽい。import文を書き換えたりとか色々してもだめで、頭を悩ましていたらActivityじゃ使えないらしい・・・。

SupportLibrary | DeVlog – 銀の翼で翔べ –

これにそって継承をActivityからFragmentActivityに変更して、getLoaderManager()ではなくてgetSupportLoaderManager()を使うことでsupport.v4の方のLoaderCallbacksを引数に取るようになって使うことができましたとさ。って、FragmentActivityを絶対使わないとダメだってどういう仕様なんだよっていう。

FragmentAcitivityとかPagerつかってFragmentバリバリ使ってるようなアプリだったらLoader使うことはできそうだけど、Android2系を切り捨てることができない現状としてLoaderを使うのはまだまだ先っぽい。そもそもだけど、Loader使ったらちょっと書きやすくなるっていう程度でAsyncTaskとかで代用できそうだし別に使う必要もないよね。

と、ここまで書いてリファレンスを再度読んだらFragmentActivityのを使いなさいって書いてありますね・・・。

To manage your fragments and loaders, you must use the methods FragmentActivity.getSupportFragmentManager() and FragmentActivity.getSupportLoaderManager() (instead of the getFragmentManager() and getLoaderManager() methods).

リファレンスはちゃんと読まないとダメですね。。。

参照先へのツッコミ

Android3.0以降で、AsyncTaskLoaderを利用した非同期処理を行う | Tech Booster

これに以下の記述があるけど、そんなことないよね。

Loaderを呼び出すActivity/Fragmentには、LoaderCallbacksインターフェースをimplementsする必要があります。

これは、initLoader()の第三引数にthisを渡してるからimplementsされてるだけで、別クラスを定義して第三引数に設定してあげれば全然問題なく動く。僕はActivityに複数implementsして引数にthisを渡しまくるのはあまり好きじゃないから使うなら分割して使いそう。

Androidの開発環境を更新した(ADT Bundle)

僕の環境にAndroidの開発環境を入れたのが今から1年ほど前なので時間があったのでアップデートしてみた。

Download Android Studio and SDK Tools | Android Developers

開発環境の構築がスゲー楽。前はEclipseダウンロードしてきて、AndroidSDK入れて、パス通してとかやらないといけなかったのに、今回は上記リンクからダウンロードしてきて解凍するだけで基本的に終了、なんと素晴らしいことでしょう。やっぱり開発初心者の方が始めようと思って開発環境の構築でつまずいてしまってヤル気を失うのはもったいないので、プラットフォームを売るっていう意味で裾の尾を広げるには開発環境を楽に作れる状況を作るってのは大事なんだろうね。と、思ったけど何点かつまずいたので備忘録。

アプリケーション作成ってやっても画面がでない

なんか初期画面でこういうことでいますよって画面が出てるんだけど、これが新規アプリケーションを作成しても自動に閉じない。アプリケーションのコードを表示している画面がその裏にあるせいで、新規作成されたアプリはどうやって開けばいいってちょっと悩んだんだけど、普通に表示されている画面の右上にいる×ボタンで閉じればみなれた画面が出てくる。

Layoutファイル画面がエラー

アプリを開くと自動的にLayoutファイルが開かれるみたいなんだけど、いきなりエラー画面がバーンって出てくる。慌てず騒がず[windows]→[Android SDK Manager]を使って必要なモジュールをダウンロードしましょう。いきなりエラー画面が出るのは親切なのかなんなのかよくわからないけどちょっとビビった。

フォルダを移動すると動かない

解凍すると「sdk」「eclipse」って2つのフォルダができて、どうも起動時にAndroidSDKのパスに自動的に「/folderName/sdk」が設定されるみたい。だからフォルダを移動するとSDKが見つからんって怒られる。[Prefarence]→[Android]で[SDK Location]を変更したパスに変えてあげれば大丈夫。

まとめ

環境構築が楽なのは嬉しいですね。起動時に出てくる画面が違うってのもちょっといいかも。でもそのせいでEclipse使ってるっていうことを知らずにEclipseの便利なことが検索されなさそうな気がしなくもない。

ImageDownloaderを作った

カッとなって作った。

ImageDownloader

どんなソフトかっていうとブラウザでネットを見ている最中になんかいい画像があったら保存したくなるじゃないですか。それを簡単にダウンロードできたら需要があるかなぁと思って簡単にダウンロードできるやつを作ってみた感じ。もともと会社でピンタレスト的なことをやりたくて作ったんだけどおじゃんになったからせっかくコード考えたしって思って作った奴。ちゃんと会社のコードとは別に1から作り直してますよ。パクったとか言わないでくださいね。

ちなみに著作権で保護された画像をダウンロードすることは違法です。そんなことには使わないでくださいね。Yukiちゃんが可愛いからってYukiちゃんの画像まとめとかひらいてダウンロードしちゃったりしたらダメですよ。まぁそんなこといってもばれなければ うわなにをするやめrくぁwせdrftgyふじこlp;@:

ソーシャル性の濃さはゲーム性によって決めるべきだよね

これを読んでちょっと思ったので。

継続して広告出稿を行うソシャゲは「ソーシャル性を薄く」するべき | サイプロ~とあるサイトプロデューサーのブログ~

確かにおっしゃるとおりソーシャル性が薄ければ薄いほど新規の人は入りやすい。けどそれってやめやすいってことの裏返しでもあると思うんだよね。ソーシャル性が強ければ強いほど自分がやめると人に迷惑をかける、もしくは自分が人に役に立ってるっていう状況が出来上がって、それが辞めづらい状況っていうものを作り上げていくと思うんだ。だからグラフで書かれている初期獲得ユーザから後期獲得ユーザにつれてソーシャル性が高ければ下がっていくっていうのはそうかもしれないけど、ソーシャル性が高ければ高いほど継続日数は上がる事になるんだと思う。そう考えると、後期になればユーザ数は増えにくいけど継続しだすとずっと続くっていうのがソーシャル性が高いゲームだと考えられて、平均すると同程度のユーザ数・継続率に落ち着くんじゃないのかな。

もともとフックする材料がちがっていて、ゲーム性で楽しむ要素が強いものはソーシャル性を薄くしてゲームを楽しむことをフックに人を集めて継続してもらう。ソーシャル性はおまけ。コミュニケーションで楽しむ要素が強いものはソーシャル性を濃くしてコミュニケーションを楽しむことをフックに人を集めて継続してもらう。っていう違いなんだと思う。ただ、コミュニケーションで楽しむゲームでも本質となるゲーム要素が全く面白くなかったらそもそも流行らないから、ゲーム性もある程度担保しないといけないことになって、こっちのほうが作るのは難しいんだろうね。流行るものが出来ればソーシャル性が強いもののほうが根強い人気がでると僕は思ってるんだけど。

まぁ、何でもかんでも「ソーシャルを強くすれば人が集まって継続率が上がる!」みたいな考えは間違ってると僕も思う。人と人とのつながりはそれなりにコストが高い動作だからそれを全面に押し出すと使うのがめんどくさくなるのは目に見えて言えることで、人と人とがつながる必然性が無い状況で「継続率が低いから人と人をもっと結びつけてどうにかしてやろう!」みたいな安易な考えでやってるとやられるんだろうなぁ。