2015年12月2日

Asus Chromebook Flipがかなり気になる - 米Amazonで249ドル!

昨日、BestBuyから特価セールのメールが来て、ついついクリックして中身を見てしまったのですが、Asus Chromebook Flip 10.1-Inchがなんと「199ドル」となっていました。

Chromebookは各所で評判がいいのでそのうち試して見たいな〜と思っていて、特にこの機種は少し前から気になっていました。

BestBuyで特価セールになっていたのはメモリが2GBのモデルだったので、「4GBモデルはどうなんだろう」と思ってAmazon.comで調べてみました。

Amazon.comの価格だと「239ドル」でした。「4GBでこれならいいかも!」 と思って早速カートに追加。

勢いでそのまま買ってしまおうかとも思ったのですが、「年末で何かと物要りだし」「とりあえず寝て起きてからもう一回考えよう」とひとまず寝ることにしました。朝起きてカートを見ると、なんと10ドル値上げされて、「249ドル」になっています。たった10ドルの差とは言え、ちょっと残念です。^^;

Amazonの割引価格ってコロコロ変わるんですよね。



日本だとメモリ4GBのモデルは「法人向け」となっているみたいですが、米Amazonだと普通に2GB/4GBを選択出来るようです。




ASUS Chromebook Flip C100PA-RK3288 タッチパネル/10.1インチ/シルバー (Amazon.co.jp, 2GBモデル)






Crouton というものを使えばほぼ普通のLinuxマシンと変わらない使い方が出来るのが魅力です。これが出来ずにChromeOSのみだったらそれほど興味が湧かなかったかも。


Chromebook Flip C100PA を買いました - みねこあ http://d.hatena.ne.jp/minekoa/20151005/1444061337



ただ、ひとつだけ気になるのは、解像度が 1280x800px という事。最近のトレンドから考えると少なくとも1920x1080は欲しいところ。

仕事でMacBookPro Retinaの画面に慣れてしまっているので、今さらドットが肉眼で識別出来てしまう画面を見るのは辛いのです。


という事で、かなり気になるAsus Chromebook Flipですが、購入直前のところで今回は踏みとどまってもう少し解像度が高くなったバージョンが出るまで待つ事にしました。次期モデルに期待です!







.

2015年10月21日

無料でしかも簡単にWebサイトを公開する方法を聞かれたら

「お店のWebページを作りたいんだけど」と聞かれたので、ちょっと調べました。


Azure Web Apps とか Google App Engine とか Heroku ならサーバーサイドプログラム込みでほぼ無料で使えるし、静的なサイトだったら Amazon S3 とか GitHub Pages でも良さそうです。

でも、プログラマーでもデザイナーでもなく、今まで全くWebサイトを作った事が無い人にいきなりこれらのサービスを使えというのは厳しいものがあります。


そこで何か良い方法は無いものかと調べていたら、こんなのを見つけました。


Netlify



BitBalloon


どちらもドラッグ&ドロップでフォルダごとアップロード出来て、無料で使えます。
(独自ドメインの設定は有料ですが。)


これらのサービスが従来のレンタルサーバーなどと比べて優れていると思われるのは、コンテンツがグローバルなCDN経由で配信される点です。

そのため、大量アクセスにも強く、ページの表示速度も速いサイトを作る事が出来そうです。




あと、オンラインで販売まで行いたい場合は、日本では stores.jp か BASE が人気みたいですが、アメリカでは Shopify が圧倒的に強いみたいですね。







.

2015年10月15日

米国在住でSprintの携帯を持っている人は要チェック! 無料で使えるMVNOサービスを発見

しばらく使っていないiPhone 4SやGalaxy S3があるので、何かMVNOで安いプランは無いかな〜と探していたところ、ありました!

RingPlus Mobile


最初の3つが「Free Plan」で、そのうち「Future - Phase 9」というのだと毎月500MBのデータ通信(LTE)が可能となっています。

そう、無料です!

これはもう早速申し込んでみました。

契約するのに必要だったのは、

  1. Twitterなどのソーシャルメディアで拡散する事。
  2. 使っていないSprintの携帯(CDMA端末)。
  3. クレジットカード情報。

の3つだけでした。


1番目はこんな感じです。


拡散するソーシャルメディアは、Facebook、Google+、LinkedIn、Twitterから選べます。

アカウント認証後に、数パターンの文章から選んでツイートするフォームが表示されるので、コピペしたりする必要も無く簡単です。


2番目の端末ですが、CDMA方式に対応した端末が必要になります。既に持っているものがあれば、端末に記載されているIMEI番号というものを入力すれば使用可能かどうかチェックしてくれます。Sprintから売られている端末であればほぼ使えるのではないでしょうか。

今回は使っていない iPhone 4S があったのでこれを使うことにしました。使用可能な端末を持っていない人は、ebayなどで探すか、またはRingPlusのサイト内で新規に購入する事も出来ます。


3番目のクレジットカード情報は、最初に$5.62チャージされるのでその支払いのために必要です。この内訳は、
 $5.00 「Top Up」(要するにデポジットみたいなものだと思います。)
 $0.62 税金など
となっています。

という事は、多分無料プランとは言っても毎月$0.62はチャージされる事になりそうです。


プランに含まれているデータ通信量は500MB/月ですが、必要であれば「Add On」を購入して増やす事が出来るようです。

現在のところ、500MBで7ドル, 1GBで8ドルとなっています。



契約手続きが完了したら、あとは数分待てばiPhoneがSprintのネットワークにつながり、通話が出来る様になりました。
左上にSprintのキャリア名が表示されています。

繰り返しですが、無料プランですよ! スゴくないですか?


早速データ通信の速度を計測用のアプリで計ってみたところ、下り4Mbps, 上り1Mbpsぐらい出ています。私が今住んでいる地域でのSprintのLTE回線速度は大体こんなものなので、特に帯域制限が掛かっている様な感じも無さそうです。

パソコンへのテザリングも試してみましたが、全く問題無しです。

ほぼ無料でここまで出来てしまって、本当にこの会社大丈夫なんだろうかと心配になるぐらいです。出来るだけ潰れずにこの無料プランを続けてもらいたいものです。

日本から友人が来た時に貸すなど、手元に余ったCDMA端末がある場合には非常に便利に使えるのではないでしょうか。





.

2015年9月17日

React.jsの練習に◯☓ゲームを作ってみた。

ある日の深夜1時にふと思い立ってどうしても実際にReactで何か作りたくなり、朝5時までかかって大体の部分を作りました。

終了判定の部分がバグっていたりしたので2時間ほど眠ってからまた3時間ほどかけてデバッグ。翌日にまた約1時間かけて調整をして一応出来ました。

合計8時間もかかってますね。 汗)   
何せ初めてのReactなので。

クリックすると別ウィンドウでRunstant Liteが開きます。
https://goo.gl/Psx5fl

使ったツール


@phi_jp さん作成の「Runstant Lite」素晴らしいです。
ソースコードをエンコードしてURLに保存するというアイデアには脱帽しました。



初めてReact.jsで書いてみた感想


実は今AngularJSも勉強中ですが、それと比べるとReactの方が覚えないと行けない事が圧倒的に少ないので精神的に楽です。

まず親コンポーネントをとりあえず作って四角いDIVを表示する事が出来れば、そこに一つずつ子コンポーネントを付け足して行く感じでUIの作成はそれほど苦労せずに出来ました。

今回は

  • Board (盤面の背景を描画)
  • Cell  (個々のセルを描画)
  • StatusPanel (「X」の番です、などゲームの状態を表示)
  • ResultPanel (「X」の勝ち!、引き分け、などの結果を表示)

の4つのコンポーネントを作成しました。

最初は個々のCellにStateを持たせてクリック時の表示の更新をCellの内部で行っていました。でもそれだとBoard全体としての処理(終了判定など)との連携が面倒になる事に気付いて、Reactの世界の外側に作ったAppクラスで全ての状態を管理する様にしました。

ReactはあくまでView担当なので、Modelは自分で作らないとダメなんですよね。

そうなると今度は
1. Reactのコンポーネント内で発生するイベント(クリックされた、など)をModel側に伝える方法
2. 逆にModel側で発生するイベント(勝敗が着いた、など)をReactコンポーネント側に伝える方法
が必要になります。

前者の場合は単純にonClickなどのハンドラからAppクラスの関数を直接呼ぶ事も出来るのですが、後者のやり方が分からずにちょっと悩みました。

そこでFlux関係の解説を読み漁って、「とにかくPubSubで疎結合にしろ」という事なのかな〜と理解しました。

その結果、自分なりにEventEmitterもどき(?)を作って、Reactコンポーネントとモデルが必ずそれを経由して対話する様な形になりました。よくFluxで言われる「単方向のフロー」にはなっていない様な気もしますが、一応「PubSubで疎結合」にはなっているのではないかと思います。

こういうのはやっぱり自分で作って試行錯誤して見ないと腹の底から理解する事は出来ないですね。

単純な◯☓ゲームでしたがとりあえず作ってみて、Reactへの理解を少し深める事が出来たと思います。Android版のReact Nativeも出て来た事だし、これからもさらにReactに時間を投資して見ようかなと思います。


※追記 


きちんとFluxに則って作られたきれいな◯☓ゲームを見つけました。コードも見た目もきれいです。これは参考になります。

https://github.com/hackhat/tic-tac-toe-flux

ついでに、Reactで作られたゲームの一覧もありました。

36 Game Examples with ReactJS
http://react.rocks/tag/Game



React.jsの勉強のために読んだ本


入門 React ―コンポーネントベースのWebフロントエンド開発



参考になったサイト


reactjs - Reactデザインパターン - すべてがeになる - Qiita
http://qiita.com/shunjikonishi/items/ba6d981880e316131836

Flux – Dispatcher【日本語訳】と実装のポイント | mae's blog
http://mae.chab.in/archives/2738

一人React.js Advent Calendar 2014 - Qiita
http://qiita.com/advent-calendar/2014/reactjs

チュートリアル | React
https://facebook.github.io/react/docs/tutorial-ja-JP.html




.

2015年6月26日

JavaScriptでスマホゲームアプリを作る - Unity編

前回のCocos2d-JS編からだいぶ間が空いてしまいましたが、今回はUnity編です。

Unityのバージョンも5になって、新しいGUI機能が追加されていたりして2dゲームの作成もかなりやり易くなっている様です。

今回Unity5を使って出来たものはこんな感じです。



https://github.com/mikehibm/15puzzle-unity


● 新GUI(uGUI)の使い勝手


定番のNGUIを使った事が無いので比較できないのですが、uGUIは特に問題無く使えそうです。
気になるマルチ解像度への対応も簡単。どんな画面サイズでもボタンを常に右上に置きたい、という場合でもアンカーのプロパティ設定だけで行けるので気に入りました。今回のアプリではタイトル画面のメニュー、ゲーム画面のホームボタンとリスタートボタンをuGUIで作成しています。



● Tweenライブラリが色々あって迷う


パズルのピースを移動する時などにアニメーションをするためのTweenライブラリですが、いろいろと選択肢があるので結構迷います。

今回は LeanTween というのを使ってみました。他に iTween, Hotween なども良さそうでした。

LeanTweenは単体のアニメーションを実行するだけなら使い易いのですが、複数のアニメーションを組み合わせて順次実行し、それをさらにループさせたいという様な場合にコールバックを多段に繋がないと行けなくなるのでちょっと面倒です。


● UnityのJavaScriptは普通のJavaScriptではない


これは一番困った点かも知れません。UnityのJavaScriptは、C#にJavaScriptの皮を被せた様な妙な言語でした。。。

Unity の JavaScript でよくわからないことメモ

こんなヘンテコな言語に慣れるぐらいならいっそC#で開発した方が良いと思います。次にUnityで作る時は迷わずC#ですね。


● Cocos2d-JSと比較した感想


GameObjectとComponentの関係、GameObjectにスクリプトを貼り付けて行くやり方を分かった瞬間に、「Unityええやん!」と思ってしまいました。

Coco2d-JSと比べても、もしかするとUnityの方が生産性が高いかも。。。
今まで1年以上もCocos2d-x/JSで開発して来た私ですが、「もっと早くUnity始めてれば良かった」という気もちょっとして来ました。

次はUnity/C#でもうちょっと複雑なものを作って見ようかなと思います。






以上!

2015年4月11日

ブラウザさえあればASP.NETアプリの開発が出来る時代に既になっていたという話

『Visual Studio Online Monaco』の開発環境が素晴らしい。


まずは、Azure Web Siteの管理画面でVisual Studio Onlineを有効にする。


「Edit in Visual Studio Online」というメニューが有効になるのでそれをクリック。



1. ブラウザ内でソースコードの編集が出来る。



サクサク動くし、もちろんコード補完もバッチリ。




2. ブラウザ内でコンソールを開いて各種コマンドが使える。

gitコマンドで色々出来る。node が入っているので npm も使えるし gulp や bower も使える。まだそんなに使い込んでないですが、とりあえず色々出来そうな予感。




3. gitの差分はGUIで見やすく表示してくれる。



4. コンソール内で「msbuild」と打ち込めばクラウド上でソリューションをビルドしてくれる。



5. 一つのWebサイト内に複数のアプリケーションを配置出来る。

メインのサイトと管理用サイトを分けたり、WebAPIだけ別アプリケーションにしたり出来る。



6. DB接続文字列やアプリケーション設定はAzureの管理画面から上書き出来る。

ソース上のWeb.configファイルにはとりあえず仮の値を入れておいて、別途Azure Web Siteの管理画面から設定すれば実行時にはそちらの値で上書きされる。これは便利。


正直、特に4番のビルドについては「Visual Studio Online (MonacoではないTFSのオンライン版)」のCI機能を使わないと出来ないとさっきまで誤解していました。

この動画を見て初めて知りました。

Getting started with ASP.NET | Visual Studio Online "Monaco" | Channel 9

ブラウザ内のコンソールで「msbuild」と打てばクラウド上でビルドが出来るなんて!
衝撃でした。笑)

ソリューション内に複数のアプリケーションがある場合はAzure Web Siteの管理画面で仮想アプリケーションとしてそれぞれのフォルダを指定してやるだけでOK。

ローカル環境にVisual Studioを入れなくてもブラウザだけでここまで出来るんなら、もうPC無しでいいんじゃない? という気がしてくる。

Visual Studio Online Monaco、すごい!





* 4/16/2015 追記:

もう少し「Monaco」を使ってみて気付いた点です。

- コード補完はまあまあだけどやっぱりローカルのVisual Studioの方が快適。

- Monacoではソリューションファイル(*.sln)やプロジェクトファイル(*.csproj)の作成・変更が難しい。

例えばC#のソースファイルを新規作成してプロジェクトに追加したいと思っても、ローカルのVisual Studioの様に右クリックして「プロジェクトに含める」を選ぶ様な事は出来ません。プロジェクトファイルを手動で編集すればなんとかならない事はないですがかなり面倒です。

この辺りが今後改善されればさらに便利になりそうですね。
(と言っても次期のASP.NETではプロジェクトファイル自体が必要無くなるらしいので、別に気にしなくてもいいのかも。)








 .



2015年3月11日

iOS用AdMobの最新版は初代iPad非対応に

公開しているiOSアプリを更新したら、初代iPad(iOS 5.1.1)でテストした時だけエラーで落ちる様になってしまって焦りました。

エラーログを見るとどうやらAdMobに原因がありそうなのでGoogleのページを見た所、やっぱりAdMobの最新版(7.0.0)からはiOS 5がサポート対象外になっていました。

リリースノートを確認していなかったのがダメでした。反省。

AdMob 7.0.0からはiOS5がサポート対象外に。
https://developers.google.com/mobile-ads-sdk/docs/admob/ios/rel-notes

-ObjCリンカフラグが不要になった事やアプリに追加するファイルが一個だけになったのは嬉しい点ですが、iOS 5非対応化はちょっと悲しいです。


初代iPadは我が家では子供達がまだまだ使っているのでぜひ対応したかったのですが、Appleのページを見るとiOS 6を含めてもシェアはもはや3%以下との事。

iOS6以下の割合は3%
https://developer.apple.com/support/appstore/


AdMobのバージョンをひとつ前の6.12.2にしておくという手もあるのですが、ここはきっぱりとあきらめて自分のアプリの方もiOS 5は非対応とする事にしました。

そろそろ子供用のiPadも買い換えるかな。。。







 


2015年1月12日

Cocos2d-JSでAdMob広告を表示する手順 (iOS, Android)

2015年1月12日現在の情報です。

開発環境


- Mac OS X 10.9.5
- Cocos2d-JS v3.2
- Cocos Code IDE v1.1.0
- Xcode v6.1.1
- Eclipse (ADT) 23.0.2


cocos newコマンドでプロジェクトを作成


cocos new -p com.example.CocosJSAdmob -l js CocosJSAdmob

(もちろんCocos Code IDEのメニューから新規プロジェクトを作成する事も出来るのですが、そうすると生成されるファイルが微妙に違ったりするので私はcocosコマンドを使う事にしています。)


Cocos Code IDEでプロジェクトを開く


現状ではcocos newコマンドで作成したプロジェクトをそのままCocos Code IDEにインポートしようとしても「プロジェクトが見つからない」というエラーになるので、まずプロジェクトのルートディレクトリに下の内容で .project ファイルを作成する必要があります。

<name>CocosJSAdmob</name>の部分だけ適宜変更して下さい。

.projectファイルを作成した後、Cocos Code IDEにインポートします。





Cocode Code IDE上で実行出来る事を確認しておきます。



ネイティブコードサポートを追加する。


Cocos Code IDEのCocos Toolsメニューから「Add Native Codes Support」を選択します。
これによってプロジェクトの下に frameworks/runtime-srcというディレクトリが出来ます。



Xcodeでプロジェクトを開く


下のディレクトリにXcode用のプロジェクトファイルがあるのでそれを開きます。

  /(プロジェクトルート)/frameworks/runtime-src/proj.ios_mac/



ターゲット(実機またはシミュレータ)を選んでそのまま実行するとビルドされて実行出来ます。ただ初回は全てのソースファイルをコンパイルするので数分かかるかも知れません。



iOSでのAdMob対応


下を見ながらAdMob SDKを組み込みます。

https://developers.google.com/mobile-ads-sdk/docs/admob/ios/quick-start

AdMob SDKのファイルをプロジェクトに追加。



ライブラリを追加。

下の青枠内が今回追加したもの。特に「GameController」はGoogleのドキュメントでは記載漏れになっているみたいなので要注意です。



-ObjCリンカフラグを追加。


*追記:
AdMobの最新版(v7以降)では-ObjCリンカフラグは不要になったそうです。


ソースコードを変更。


AppController.h
AppController.mm

dealloc関数の後ろ、@endの前に以下を追加。

JavascriptからObjective-Cのコードを呼ぶ。


詳細は下記を参照して下さい。
 How to call Objective-C functions using js on iOS/Mac

app.jsの適切な場所に下のコードを追加します。今回は HelloWorldLayer の ctor関数の一番最後に追加しました。

jsb.reflection.callStaticMethod("AppController", "ShowAdView");


iOSでAdMob広告が表示されたところ

広告を隠したい時はHideAdViewを呼べばOKです。

jsb.reflection.callStaticMethod("AppController", "HideAdView");

iOSでの対応は以上で終わりです。




Eclipse(ADT)でプロジェクトを開く


下のディレクトリにEclipse用のプロジェクトがあるのでそれをインポートします。

  (プロジェクトルート)/frameworks/runtime-src/proj.android/

インポートした後、プロジェクトのディレクトリで

cocos compile -p android

を実行して全てのソースコードをコンパイルしておきます。これも初回は数分ぐらいかかるかも知れません。


AndroidでのAdMob対応


次のドキュメントに従って Google Play Serviceを組み込んで下さい。

https://developers.google.com/mobile-ads-sdk/docs/?hl=ja


Java側にAdMob広告を表示する処理を追加。


AppActivity.javaに以下の変更を加えます。

1. AppActivityクラスの先頭に変数を追加。

private static Activity activity = null;
private static AdView adView = null;


2. onResumeでactivityを変数に保持。

@Override
protected void onResume() {
super.onResume();
activity = this;
};

3. AppActivityクラスに3つのメソッドを追加。

public static void createAdView()
public static void showAdView()
public static void hideAdView()

変更後のAppActivityクラスは下の状態になります。
(xxxxxxxxxxxxxxxx...xxxxxxの部分は適宜置き換えて下さい。)

JavascriptからJavaのコードを呼ぶ


app.jsを下の様に変更します。


Android上でAdMob広告が表示されたところ


Androidでの注意点


現状、Google Play Serviceへの参照をプロジェクトに追加して一旦Eclipse上でRunしてしまうと、それ以降は cocos run, cocos compile, cocos deployなどのコマンドが下の通りエラーで中断してしまいます。


-package-resources:
     [aapt] Creating full resource package...
     [aapt] invalid resource directory name: /Applications/android-sdk-mac_x86/extras/google/google_play_services/libproject/google-play-services_lib/bin/res crunch

BUILD FAILED
/Applications/android-sdk-mac_x86/tools/ant/build.xml:932: The following error occurred while executing this line:
/Applications/android-sdk-mac_x86/tools/ant/build.xml:950: null returned: 1

Total time: 43 seconds
Error running command, return code: 1


原因はADTとAntでビルドの方法(一時ファイルの場所など)が異なる事にあるみたいです。
( http://stackoverflow.com/questions/19746319/how-to-solve-invalid-resource-directory-name-resource-crunch )


対策としては、Eclipseを完全に終了するかまたはEclipseの自動ビルドをオフに設定してから cocosコマンドを実行すればエラーにならない様です。



以上、Cocos2d-JS v3.2でAdMob広告を表示する方法でした。

jsb.reflection.callStaticMethod という関数を使えばJavascriptからObjective-CやJavaのメソッドを簡単に呼び出せるので便利ですね!

これを使えば広告の表示制御だけでなく、
  • ブラウザで任意のURLを開く
  • AppStoreに飛ばす
  • Facebook, Twitterなどに投稿する
など色々な事が簡単に出来そうです。









 .