2013マツオソフトウェアブログソフトウェア開発に関連することを発信しています2013年8月8日木曜日UbuntuにGitをセットアップしてWindowsから接続する自前のGitサーバが欲しくなり設定したのでその方法をまとめる。bashからもさくりと作れるので今回はそちらで。Windowsをインストールしよう。Bash」があるのでそちらを叩いて起動する。name\Documentsなどになっているはずである。SSHキーを下記のコマンドから生成する。nameは自分のユーザ名で置き換えてもらいたい。ssh-keygenそうすると以下の内容が出力されるので順々に必要な項目をタイプする。sshから参照されるので名前と場所を変更しないように。エンターキーでpassphraseの入力に移ろう。passphraseは入力しなくてもかまわないがセキュリティの観点から入力するのが望ましい。name\.sshを参照するとid_rsaとid_rsa.pubができているはずだ。WindowsのセットアップはここまでにしてGitサーバをたてる。Gitサーバをたてるサーバセットアップまでは以下をそのまま参考してもらいたい。Server一応手順を訳すとこうなる。.ssh3、Windowsで作ったid_rsa.pubを/home/git/に持ってくるコピーするなりFTPで渡すなりしてもらいたい。/home/git/.ssh/authorized_keys.sshとauthorized_keysの権限は以下のようにしておく必要があるので注意してほしい。id_rsa.pubちなみに複数ユーザを追加する場合はユーザ分のid_rsa.pubをどんどんauthorized_keysに追加していくだけでよい。Bashから以下のコマンドを試してもらいたい。domain.comは自分のドメイン名に変更してもらいたい。key(id_rsa.pub)を追加してもらいたい。5、Git用の作業ディレクトリを作るそれぞれのリポジトリ用に空のディレクトリを用意する必要がある。initを--bareオプションで行う。init必要に応じてどんどんディレクトリを増やしていこう。project.gitのオーナーがgitになっていることを確認しよう。なっていない場合は以下コマンドで変更しておこう。Bashから下記のコマンドを実行してみよう。masterこれで他の端末にcloneすることもできるようになったので、他の端末から下記のコマンドを実行してみよう。masterまとめSSH周りにはまるとアホみたいに時間がかかるけれど、それさえなければ一時間もかからずにGitサーバを用意してリポジトリをどんどん追加できるはずだ。SSH周りの認証がうまくいかない場合は下手に色々といじくるよりも手順を最初からやり直したほうが早いことが往々にしてあるのでそれを試してみるとよいだろう。72013年7月20日土曜日ホワイトIT企業で働くとこんな感じブラック企業の代名詞としてよくあがるIT業界。IT土方(土方の方々に失礼なのではと思わないでもない)なんていわれる職場もあるようでひどいところは本当にひどいようだけれども、今の現場に入って数ヶ月、超絶ホワイトっぷりがすごいので書いてみる。今の案件にはお客さん(A社)の自社開発の企業向けソリューション(α)にGUI開発者として参画している。なんかも含めるとざっと80人規模になる。したら知らない場所にも人がいるかもしれないけれど、同じフロアでαに確実に専任で携わっていると知れている人だけで80人ぐらいいる。とトライアンドエラーを繰り返しながら柔軟に体制を変えているようなので以前はまた違ったようだけれども、今は大体こんな感じで回しているようだ。内実はよく分からないので数字は適当。・現行開発/サーバサイド(3~5人ぐらい)Ver2の開発でサーバとかデータ周りをいじくり回してる人達。・現行開発/フロントエンド(3~5人ぐらい)Ver2の開発でGUIとかクライアントアプリ周りをいじくり回してる人達。・プロト開発/サーバサイド(5人ぐらい)Ver3に向けてのプロト開発でサーバとかデータ周りをいじくり回してる人達。・プロト開発/フロントエンド(10人ぐらい)Ver3に向けてのプロト開発でGUIとかクライアントアプリ周りをいじくり回してる人達。GUIの凝ったアプリなのでここに開発リソースがたくさん割かれてる。・プロト設計(5人ぐらい)Ver3に向けての設計を進める人達。・営業/コンサル(10人ぐらい)αを実際のお客さん達に売り込みに行く人達。「αを使ったらこんなに効率よくなりますよー」とか甘言を弄する人々。日本全国飛び回ってるっぽい。・保守運用(5~7人ぐらい)良く分からんけど多分保守とかやってる人達だと思う。・テスト(5~7人ぐらい)テストケースとか作ってるっぽい人達。ここまではパートナー企業から来てる人達の内訳。・A社社員(20人ぐらい)パートナーの取りまとめを行う人達。設計の最終決定や、スケジュール管理、アーキテクチャ選定、価格交渉などなど最終的な責任を持つ人達。なんか人数合わないけどざっとこんぐらい居る。ホワイトなのかで、ここからはいかにホワイトなのかを語る。A社社員は言わずもがな、パートナー企業から来てる人達も優秀。コアメンバーはかなりスキルが高いと思われる。まれにあまり仕事のできない人が紛れ込んでくることがあるけれども、そういう人達はさくっと契約が打ち切られるのでいつの間にかいなくなっている。System)の活用なんて今じゃどこでもやっていることだけど、A社ほど有効活用できているところは少ない。チケットの意味付け(課題、TODO、実装、レビュー、etc)はしっかりしているし、チケットとバージョンコントロールもちゃんと紐付けがされている(とくにレビューとの紐付けがかなり良くできている)。何よりWikiの充実っぷりがすごく、そのWikiも日々更新され、Wiki上でのコメントのやりとりも活発。意識の高い人が多いのだと思う。・レビューがすごいコードレビューが頻繁に行われている。コミットされたコードに対してはA社社員に限らず、パートナーの開発者もガシガシ行って指摘チケットが飛び交っているし、そこで見つけた事例が新しければすぐにWiki化されるというなんとも良くできた仕組み。ここでやべーこいつ、と思われた人は契約カットの憂き目に会うと思われる。コードだけではなく設計やらテストやらもガンガンレビューされている模様。・体調不良に優しいA社社員は言わずもがな、パートナーでも体調不良で長期で休んでも契約がきられない(とりあえず家庭の事情で長期で休んでいる人がいるけれど契約はきられていない模様)。A社社員に療養が必要となれば積極的に休暇を薦めてフォローしあう体制をすぐさま作ってる感じ。・スケジュールがきつくない9-5時勤務で余裕で回る感じ。実はA社社員はかなり大変なようで終電間際まで作業している人もちらほらいるらしい。それでも休暇なんかはとりやすいらしく、みなさんガシガシ取得している。パートナーも設計の人達とかは大変そうだ。・ピリピリしてない納期のある請負案件だったりすると期日が迫ってくるにつれピリピリしはじめて、嫌な職場になると怒鳴るような人員がいるところもあるけれど、今の現場ではみんなある種のんびりとしている。自社開発のプロトとはいえスケジュールはあるのでそれに向かって進めているのだけれども、よりよいものを作ろう的なスタンスなのでスケジュールは柔軟である。そのせいもあってか余裕があるように見受けられる。これだけでもこの現場のホワイトさが分かろうというもの。・嫌らしい人がいない性格の悪い人がいない。A社の社員はみんなシュッとしてて紳士的である。A社自体も大企業でありA社の社風的なものもあると思うけど、とりあえず一緒に仕事する人達(A社社員に限らず)は感じの良い人達が多い。・技術的に結構チャレンジング新しい技術を上手いこと使ってよいもの作っていこうぜ!的なスタンスだし、技術的にかなり高度なことをやっていたりもするので知識欲を満たせる。これぞザ・ホワイト企業だな、と数ヶ月働いてみての実感。飽き性なので小金がたまったら働くのをやめて、しばらく自分のやりたい開発とか調べ物をしてからまた請負仕事をする、みたいな感じで色々な職場を見てきたけれど、A社ほどのホワイトっぷりはいまだかつて見たことが無いレベル。ブラックと叫ばれて久しいIT業界だけど、いるところにはホワイトな企業も生息しているというお話。その4長々と続いてきたカツオと中島のゲーム開発も今回で終了だ。今回はTextとEntityModifier周りを解説する。}文字を表示するのは一見簡単そうなのだけど柔軟さに欠けるので中々に面倒くさい。第一にフォント読み込み時に色を指定するので文字色を後から任意に変更できない。色毎にフォントを読み込むのは難儀だ。それなので白色フォントで読み込んだ後にEntityの色変更メソッドを通して任意の色へと設定している。第二にフォント読み込み時の領域確保に指定する値の最適値が判然としない。文字の大きさと文字数から判断するしかないのだけど直感的でないので良く分からない。多量の文字を表示するなら大きくなければならないし、かといって無駄に領域を確保するとメモリを無駄に圧迫するのでやっかいな部分だ。最後にこれはバグなのだけど、コンストラクタで指定した文字列よりも長い文字列をsetTextで後から設定すると例外が発生する。いう状況が起こりえる場合の回避策はコンストラクタで長い文字列を渡しておくしかないだろう。フォントを指定して読み込む方法は下記を参照してほしい。_scene.attachChild(ship);EntityModifier周りだけを抜き取ると余計にわけが分からなくなりそうなのでそこらへんをごっそりと持ってきているけれど、注目して欲しいのは10行目から。SequenceEntityModifierを指定すると順番にEntityの値を変更していくことができる。12行目から27行目までは開始と終了のイベントハンドラーでそれ以降が値の変更を記述している。Tweenjsと同様の働きをする。同時に2つ以上の値を変更したい場合は下記のようにParallelEntityModifierを使用する。省略またTweenjsと同様にどのように値を変更させるかEase関数を使って指定ができる。Ease関数の種類は下記を参照してほしい。/実際に挙動を見るのが一番早いのでAndEngineExamplesをローカルに設定してEase関数周りのサンプルを動作させてみるのが一番良いだろう。その際にはExtensionsも必要なので忘れずに取得しよう。詳しくはAndEngineのReadMeを参照してほしい。EntityModifierの開始、終了のイベントハンドラーでUI要素をいじくる場合は注意してほしい。左記2つの関数はワーカスレッドから呼び出されるのでUI要素をいじくるとアプリがクラッシュする。それなので17行目のようにmEngine.runOnUpdateThreadでUIスレッドを呼び出して処理しよう。EntityModifierのざっくりとした説明は以上になるけれど、今回EntityModifierをいじくりまわしていていくつか不明な点があった。1つ目は、EnityModifierを使いまわせないかとEnityModifier.reset()をいじくりまわしてみたけれど上手くいかなかったこと。2つ目は、unregisterEntityModifierの使いどころ。Entityが不要なEntityModifierをいつまでも参照しているのが嫌だったので一応呼んでいるけれど、AndEngineのサンプルコードを参考にしてもunregisterEntityModifierを呼んでいるものがなかった。AndEngineのコードを追っかけていけば分かることなのだろうけれど現状はどうするのが一番良いのかは不明。これでAndEngineの解説を終わりとする。AndEngineの基本的な使い方がどういったものか理解できたかと思う。今回は実装しなかったけれどもちろんゲームのメインループにあたる機能や、あたり判定の便利機能などなどゲーム開発に必要な機能は大体そろっている。いった今回解説しなかった機能はAndEngineExamplesで詳説されているのでそちらを参照してほしい。その3今回は画像周りを解説する。その2BitmapTextureAtlasAndEngineで画像を扱う場合はまずBitmapTextureAtlasでサイズを指定し画像のための領域を作り、そこに実際の画像をどしどし読み込む形になる。コードにすると以下のような形。}BitmapTextureAtlasのコンストラクタで指定する数値は2のべき乗である必要がある。2,4,8,16,32,64,128,256...というわけだ。上記のコードが実行されると下図のような様子になる。BlueShip.pngは600*100なので幅512では収まらないので幅1024になっているし、WalkingSquare.pngとあわせての必要な高さが230になっているので高さは256となっている。そのため画像のように無為な領域が多量に発生してしまっている。無駄なメモリ使用を減らすためにも画像はすき間無くつめられるようなサイズを意識して用意するとよいだろう。ちなみにBitmapTextureAtlasにあまりにも大きい領域を指定するとアプリがクラッシュすることもあるので注意しよう。4096などを指定すると危うそうだ。TiledTextureRegionBitmapTextureAtlasのほかにもここではTiledTextureRegionを使ってスプライトシートアニメーションを読み込むことを明示している。下記のコードで船のアニメーションが簡単に実現できる。//アニメーション速度_scene.attachChild(shipAnimation);また下記のようにTiledTextureRegionから指定のフレームを使ってスプライトオブジェクトを作ることも可能。this.getVertexBufferObjectManager());TextureRegion単純に画像をただ表示するだけならば下記のようにすればよい。}BitmapTextureAtlas周りが理解できればAndEngineの画像周りはしごくシンプルだ。次回はEntityModifier周りを解説してこのシリーズも終了となる。その2今回からはAndEngineを使ってのゲーム開発を解説する。その1サンプルコード今回使用するコードはhttps://github.com/yooontheearth/andengine-sampleから取得できる。概要AndEngineはOpenGLベースのゲームライブラリで現在はバージョンGLES2となっている。AndEngine周りのチュートリアルを探すと大体前バージョンであるGLES1が見つかると思うけれど、GLES2になって仕様が若干変わっているので注意してもらいたい。GLES2のコードは以下。IDEAでのセットアップ方法を解説する。今回使用するIDEAのバージョンは12.04のCEだ。アプリケーションの新規作成の図。GLES2は2.2以降で動作する(らしい)。2.3の実機にインストールしたところ問題なく動作した。AndEngineを追加する準備の図。Moduleを選択する。AndEngineを追加するの図。nameは「org.andengine」と入力するように)Finishをクリックする。AndEngineを確認の図。SDKは4.2のこと。AndEngineは3.0以降のConstantをいくつか参照しているので最新のSDKを参照しないとコンパイルエラーになる。AndEngineを参照するの図。Dependencyを選択→AndEngineを選択する。AndEngineの参照ができたらExportにチェックしておこう。}}上記はもっともシンプルな構成のActivityだ。ちなみに上記を実行しても何も表示されない。AndEngineはSimpleBaseGameActivityから派生したActivityひとつだけで動作する。開発者はSceneオブジェクトにぺたぺたと画像を貼り付けつつ、this.mEngine.registerUpdateHandler(Obj)で登録したObjのonUpdateが定期的に呼ばれるのでそこで当たり判定などを行いつつ開発をすすめていく。基本は上記の3つのメソッドで、エンジンを作り、リソースを読み込み、シーンを使って描画するという流れだ。次回以降は上記のコードにドシドシ肉付けを行っていく。その1前回まではHTML5での2dゲーム開発を解説したが今回からはAndroidでのゲーム開発を解説する。「次回はAndEngineを」と述べたけれど気が変わったのでAndroid編初回の今回は前回までに作ったHTML5ベースのゲームをWebViewでラッピングし、さもAndroidネイティブで作られたゲームかのように動作させる方法を解説する。前回までのシリーズは以下。その3ゲーム概要Androidローカル(assetsフォルダ)に配置したindex.html、画像、JavaScriptファイルなどをWebViewに読み込んでいる。ゲームの内容は前回までとまったく同じ。Network)を利用しているのでインターネット経由で取得している。オフラインでも動作可能にするにはこれらの外部ライブラリもローカルに配置しそちらを参照するようにすればよい。サンプルコード今回のWebViewのサンプルコードはhttps://github.com/yooontheearth/html5-game-webview-sampleから取得できる。}}いたってシンプルである。・6、7行目、フルスクリーンで表示するためのフラグを設定する・11行目、JavaScriptを有効にする・12行目、assetsフォルダからファイルを読み込む。file:///android_assetはassetsフォルダへの特別なファイルパスここまででゲームはさもAndroidネイティブアプリかのように起動するのだけれども、見てくれをよくするためにもindex.htmlのbodyタグに以下のスタイル設定が必要となる。0">とまぁ、これでブラウザで動作させたときと同様のHTML5のゲームがAndroidでラッピングできたわけだけれども、WebViewにはこれだけではなくAndroidからJavaScriptを操作したり値を渡したりその逆もまた可能になっているのでJavaScript上の値をAndroid上で永続化したり復元したりもできるようになっている。詳しくは以下を参照してもらいたい。・AndroidとJavaScriptとのやりとりは以下のリンクからaddJavascriptInterface()周りを参照してもらいたい。WebView・JavaScriptのエラーハンドルなどは以下のリンクからsetWebChromeClient、setWebViewClient周りを参照してもらいたい。WebView結論HTML5のコードに手を加えずともWebViewでラッピングしてそのままAndroidアプリとしてリリースすることもできるし、Android用の特別な処理を実装したい場合はAndroidと双方向でやりとりできることも理解できたかと思う。HTML5をそのまま使えるというわけで各プラットフォームごとに開発を行わなくてもよいかも!?と明るい展望を一瞬みせてくれたWebViewではあったけれど、その実、実行速度はひっじょうに遅い!!!通常だと50または60FPS平均のものが10FPS以下ほどへと速度が落ちてしまうので大体のゲームはゲームとして成り立たなくなると思われる。通常のアプリ類であればPhoneGapやTitaniumがプラットフォームフリーへの一応の答えになると思うけれど、ゲームはどうなんだろう。以前調べたときはあまりよさげなのはなかった。いうわけでAndroidの能力を搾り出すためにも次回からはAndEngineの使い方を解説していく。その3磯野と中島のゲーム開発も今回で3回目。HTML5編は今回で終了だ。ちなみに今回もめがねと坊主頭の出番はない。GamePlatform・4行目、画像からBitmapオブジェクトを生成する・5行目、setTransformは移動、スケール、回転、傾き、中心点をまとめて指定できる便利メソッド。ここではスケールまでしか指定していない・6行目、Zオーダーという概念はなく後からstageに追加されたものほど上にくる。Zオーダーの指定がしたい場合は自分で実装しよう・9行目、テキスト生成はこのとおり・12行目、alignの指定などもおこなえる・16行目、スプライトシートの設定を行う。画像の指定は複数可能。Classを参照してほしい・21行目、アクションの中心点を設定する。意味が不明な場合はXY両方の値を0に変更して実行してみよう。宇宙船の回転のアニメーションの部分で意味が理解できるはずだ・23行目、BitmapAnimationで使用するアニメーションの設定を行う。Classを参照してほしい・28行目、BitmapAnimationオブジェクトを生成する。16行目で行ったスプライトシートのアニメーション設定をこのBitmapAnimationオブジェクトを通して使用する・31行目、スプライトシートから指定のフレームを抜き取ってBitmapオブジェクトを生成する・34行目、クリックイベントをハンドルする。これもEaselJSの大きな功績のひとつだ・37行目、指定のアニメーションを実行する・40行目、TweenJSを使用してオブジェクトアニメーションを設定する。指定のオブジェクトのプロパティ値を指定の時間と動かし方で変更できる・46行目、TweenJSのアニメーションの終わりにコールバックを設定する。そのコールバックで宇宙船のアニメーションをstageからはずしたり宇宙船のアニメーションを止めたりする・77行目、画像をフリップさせる場合はscaleXまたはscaleYに-1を設定する・87行目、Containerを活用するとオブジェクトのグルーピングも楽に行える・98行目、Tickerの設定あれこれ。Second)を表示するざーっと説明したけれども大体EaselJSを使ってのゲーム開発がどういうものか理解できただろうか。前回にも述べたけれどTicker(に登録したオブジェクトのtick())とStageという概念が基礎にあるだけでその上で行うゲーム開発は通常のゲーム開発とさほど変わらない。いうわけでこれまでの解説を通してEaselJS、TweenJS、PreloadJSの便利さとか開発のしやすさが伝わったら幸いだ。次回からはAndEngineの解説を行っていく。その2今回はHTML5でのゲーム開発を解説するシリーズの第二回である。その1今回からコードを使って解説していく。内容はCoffeeScriptをもとに説明するけれど、javascriptsフォルダ内に対応するJavaScriptファイルがあるのでCoffeeScriptになじみがない方はそちらを参照してほしい。height="320"></canvas></body>なぜかCSSからのサイズ指定が行えないのでCanvasタグに直接widthとheightを指定している。ContentManager何はともあれ画像がないとはじまらないのでPreloadJSを使用して画像を読み込む。・2行目、読み込む対象画像へのパスを指定する。ここで指定しているidが11行目のonFileLoadイベントの引数e.idとして渡ってくる・8行目、PreloadJSのコンストラクタにuseXHR=falseを指定している。この引数はPreloadJSにXHRではなくimageタグでの画像取得を行わせるための設定。コールバックを設定する・17行目、PreloadJSに画像の読み込みを指示する・19行目、createjs.Tickerのイベントリスナーを登録する。ここで登録したオブジェクトのtickメソッドが定期的に呼び出される。このtickメソッドがいわゆるゲーム開発におけるメインループとなる・24行目、取得の完了した画像のidをプロパティ名として画像内容を設定する。・28行目、すべての画像の取得が完了したのでTickerのイベントリスナーを忘れずにはずしておく・32行目、stage.update()で画面のリフレッシュを行う。stageについては後述するとざっくりとだがPreloadJSの機能説明をした。簡単に言うと画像の取得が楽、という一言に尽きる。ちなみにPreloadJSを使わずに画像取得をする場合は以下のようになる。"http://hoge/test.jpg";上記のコードを汎用的に使いやすい形にするとPreloadJSになるのが理解できるかと思う。コールバックでGamePlatform(後述)をインスタンス化しゲーム本編へと移行する。・9行目、Stageをインスタンス化している。BitmapオブジェクトやBitmapAnimationオブジェクトなどの描画したいオブジェクトをstage.addChild(Obj)で追加する。stage.update()で追加されたオブジェクトのリストをコンストラクタで指定されたCanvasへと描画する。EaselJSではTickerとStageが開発の基礎となる。長くなったので続きは次回。その1ちぬあたりMEGAのAndroid版もリリースし、HTML5とAndroidの2Dゲーム開発が何となく分かったのでこれから数回に分けて解説していく。最初の数回はHTML5(というよりもeaseljs)で残りはAndroidの解説になる。AndroidはAndEngineの使い方がメインとなる。ちなみに中島も磯野も出てはこないのであしからず。今回のシリーズで使用する画像は下記から拝借している。商用利用する場合は連絡が必要ということなのでその意向がある方はリンク先の指示に従っていただきたい。Spritesゲーム内容いたってシンプルな2dゲームである。キャラクターをクリックすると右端に消えた後に戻ってくるという内容だ。ちなみにゲームの対象年齢は2~3歳児ぐらいとなっている。サンプルコード今回のHTML5のソースコードはhttps://github.com/yooontheearth/html5-game-sampleから取得できる。後述する設定を行うことによってindex.htmlから動作確認できるはずだ。javascriptsフォルダ内のJavaScriptファイルはすべてcoffeescriptsフォルダ内のCoffeeScriptファイルから生成されている。今回はサーバをたてずにローカルからindex.htmlを起動するのでChromeにいろいろと設定が必要になる(IEとFireFoxは使用していないので不明)。Chromeの初期設定ではローカルからファイルを読み込んだ場合にほかの読み込んだローカルファイルをいじくるとセキュリティエラーが発生するようになっている。それを回避するために下記のフラグを設定する必要がある。--allow-file-access-from-files※セキュリティ上たいへんよろしくないのでテスト中などの場合にのみ使用するように上記のフラグとともにChromeを起動する方法は下記。これはUbuntuの場合。--allow-file-access-from-filesちなみに上記のコマンドでChromeを立ち上げる前にすでにChromeのProcessが起動していたりするとフラグの設定が有効にならないのでUbuntuを再起動することをおすすめする。X、Androidなんかの起動方法は下記を参照してほしい。flagsどうやってもうまくいかん、という人はApacheでもなんでもよいので適当にWebサーバを立ち上げてhttp://localhost/index.htmlとかしてもらっても今回のサンプルは動作するはずなのでそちらからアプローチしてもらってもかまわない。ライブラリ今回はHTML5編の第一回ということで今回のシリーズで使用するライブラリの紹介をする。・EaselJSゲームのメインループや画像オブジェクトクラス、スプライトシート・アニメーションクラス、テキストクラスなどなど便利な機能盛り沢山のライブラリでHTML5の2dゲーム開発の核となる。Documentを参照してほしい。・TweenJSオブジェクトのアニメーションや動作を直感的に記述できるライブラリ。メソッドチェイン形式で振る舞いを記述できるので大変便利。デモでどのようなビルトインの動きがあるか参照してほしい。・PreloadJS画像などを読み込むのに使用する。上記のライブラリ群にSoundJSというライブラリを追加するとCreateJSというライブラリスイートになる。今回はサウンド周りは実装しないのでCreateJSではなく個別に参照している。次回は前述のサンプルコードを使って色々と解説していく。Japanウェブアプリ、デスクトップアプリ、モバイルアプリ、ゲームなどを開発しています。