2013年6月10日月曜日

first-childとかnth-last-child(x)とか

残業万歳!
眠い!∠( ゚Д゚)/気が付いたら6月だ!

cssで詰まったからメモメモφ(・ω・ )

疑似クラス:first-child系を用いた「絞り込み」と勘違い


何番目の要素, ってやつ

<div id ="parent">
<div class="child_node">1番目</div>
<h5>タイトル1</h5>
<div class="child_node">2番目</div>
<div class="child_node">3番目</div>
<h5>タイトル2</h5>
<div class="child_node">4番目</div>
<div class="child_node">5番目</div>
</div>

たとえばこんな構造だったとき. #parentの最初の要素を指定したい!なんて時に使えるのが疑似クラスの :first-child. 読んで字のごとく「最初の子」を指す. また, 逆に「最後の子」を指す :last-childなんてのも.
<style>
#parent{
    background-color: blue;
}

#parent div:first-child{
    background-color: red;
}

#parent div:last-child{
    background-color: red;
}
</style>
試しにこんなスタイルを当ててみる.
1番目
タイトル1
2番目
3番目
タイトル2
4番目
5番目
とまぁ色が変わっているのだが, 問題はここから. 「前から x番目の子」を指す :nth-child(x), 「後ろから x 番目の子」を指す :nth-last-child(x)など, 順番を指定し始めると始まる勘違い. たとえば, 「一番最後の h5を指定したい」, 「上から3番目の child_nodeを指定したい」と思った時に,
<style>
#parent .child_node:nth-child(3){
    background-color: green;
#parent h5:nth-last-child(1){
    background-color: green;
</style>
と正直に指定すると…
1番目
タイトル1
2番目
3番目
タイトル2
4番目
5番目
Σ('A`)
"2番目"に色がつくわh5に色はつかないわ散々なわけで. 原因は出力を見ればだいたいの想像はつくかと.
要するに
#parent .child_node:nth-child(3)
とは,
「id=parentの子の, class=child_nodeの中での3番目のもの」ではなく,
「id=parentの子の中で3番目の子で, かつclass=child_nodeなら」という,
ある意味では確かに「絞り込み」を行っているみたい('A`)ソリャネェヨ

なので結局, 「x番目の子」という, 構造が変わると効果がなくなる不安定な絞り込みには変わりないものだったりするorz.




日本語と英語の解釈の違いみたい(・д・`)

2013年5月9日木曜日

Unityのエディタ拡張 -基礎

なんかUnityではエディタが拡張できることも売りの一つらしい.
そんなこと言われたら手を出すしかないじゃない+(・ω・0)*

Unityのエディタ拡張 -基礎

まずは拡張ウィンドウ作成から

1. 準備

ほとんどいらない. Assetsの下に「Editor」ディレクトリを作るくらい. ちなみに他のところでも, 「Editor」ディレクトリにあれば動くらしい. まぁわかりやすくまとめておくのが吉. 

2. コーディング

他の普通のコードと同じようにC#で書ける. 
using UnityEngine;
using UnityEditor;
using System.Collections;

public class ExpansionPrac : EditorWindow {

 [MenuItem("Window/My Window %i")]
 static void Init(){
  ExpansionPrac window = 
   (ExpansionPrac)EditorWindow.GetWindow(typeof(ExpansionPrac));
 }
}
こんな感じ. なにも表示されないウィンドウを出すだけ.
とりあえず EditorWindowクラスを継承. その際には UnityEditorクラスのインポートを忘れずに.

問題は 7行目. 他ではあまり見ない [ ] を使った宣言. MenuItem()により, メニューに追加する.
引数はその際の配置. この場合はメニューの Window → My Windowをクリックで表示されるようになる. 最後の %i はなんとショートカットキー. この場合は 「ctrl + i」. 他と被ってないか注意.


こうなります.

クリック後, Init()の中でウィンドウを用意する.  EditorWindow.GetWindow()でウィンドウを呼び出してる(らしい). 型はこのクラスの型. このクラス名がウィンドウのタブに出てくるので注意.

3. 実際に呼び出せるようにする

しかしゲームに関係ないのにいつコンパイルするんだろう…とか思ってたら
シーンを再生/停止したとき
スクリプトを編集したとき
にやってくれているらしい. 道理でスクリプト編集から戻ってくるなり「エラーあるぞゴルァ!щ(゚Д゚#щ)」とか怒ってくれるわけだ…
なのであと必要な手順は「Editor」ディレクトリの下に配置しているかということ. ちなみに自分は
Assets/Scripts/Editor/ExpansionPrac.cs
と配置して起動を確認. ただ他でEditorを作成→Scriptsディレクトリ以下に移動 した直後はコンパイルが通っていないのか起動しません(・ω・`) 一度 再生→停止 するなどしてコンパイルしてもらうといいかも.

4. 中身を作ってみる

呼び出してはみたものの…
さみしい(・ω・`)
なので中身を適当に入れてみる.
bool isEditable;
bool childToggleBool = true;
float childSliderFloat = 2.22f;
 
void OnGUI(){
 GUILayout.Label("DispTest", EditorStyles.boldLabel);
 int sw = Screen.width;
 int sh = Screen.height;
 isEditable = EditorGUILayout.BeginToggleGroup("ToggleGroupTest", isEditable);
 childToggleBool = EditorGUILayout.Toggle("childToggle", childToggleBool);
 childSliderFloat = EditorGUILayout.Slider("childSlider", childSliderFloat, -10, 10);
 EditorGUILayout.EndToggleGroup();
}
まさかの OnGUI();
シーン中で使ったようにGUILayout()が使用可能. EditorStylesなんていうフォントなどの仕様のクラスも.
また 7, 8行目のように, カスタムウィンドウの幅/高さを取得することも可能.

9行目からがちょっと独特. EditorGUILayoutなるクラスを使える. 通常よく見る Inspectorなんかで使われている表示はここから取り出せるっぽい. Unityリファレンスマニュアルにある通り, とりあえず Toggleグループを追加してみる. グループの中身になるものを 10, 11行目に宣言し, 12行目の EndToggleGroup()でグループの宣言を閉じる. 閉じなくても今回は問題なく動くのだが, 当然閉じないといつまでもグループの中身を足し続けることに…

10行目は子にもトグルボタンをつけてみる. 特に何もなし.
11行目はスライダ. 3,4つ目の引数がスライダの下限/上限. ちなみに, ここの引数を 7行目で取得した swを使って, -sw/swと入れて, ウィンドウサイズを変えてみるとちょっと面白いことにヘ(゚∀゚ヘ)

ちなみにフィールドにあるのがトグルやスライダの初期値になります.
これを 2. で作ったコードに追加してコンパイルしてもらうと…
出てきた!+(゚∀゚0)*



ちなみにコード全景.
using UnityEngine;
using UnityEditor;
using System.Collections;

public class ExpansionPrac : EditorWindow {

 [MenuItem("Window/My Window %i")]
 static void Init(){
  ExpansionPrac window = 
   (ExpansionPrac)EditorWindow.GetWindow(typeof(ExpansionPrac));
 }
 
 bool isEditable;
 bool childToggleBool = true;
 float childSliderFloat = 2.22f;
 
 void OnGUI(){
  GUILayout.Label("DispTest", EditorStyles.boldLabel);
  int sw = Screen.width;
  int sh = Screen.height;
  isEditable = EditorGUILayout.BeginToggleGroup("ToggleGroupTest", isEditable);
  childToggleBool = EditorGUILayout.Toggle("childToggle", childToggleBool);
  childSliderFloat = EditorGUILayout.Slider("childSlider", childSliderFloat, -10, 10);
  EditorGUILayout.EndToggleGroup();
 }
 
}




今回はここまで.
次はGUI操作でちゃんと編集できるようにしたいなー+(・ω・0)*



参考 : Unityリファレンスマニュアル
         MK Games
         EditorGUILayout

2013年4月30日火曜日

Enumノススメ

ふとしたチャンスで借りて読んだ EffectiveJava. ずっとEnumの使い方を勘違いしていたので矯正を兼ねて
メモメモφ(・ω・ )

Enumノススメ

なんという今更感.
だが, それがいい.

1. Enumって?

日本語に直すと 列挙型. 要するに関連する定数をまとめたもの. もともとは基本的に int値らしい. あらかじめ要素数がわかっている際に効果を発揮し, 別の要素が混ざらなくなる.

たとえば実際 EffectiveJavaにある例から. 
public static final int APPLE_FUJI = 0;
public static final int APPLE_PIPPIN = 1;
public static final int APPLE_GRANNY_SMITH = 2;

public static final int ORANGE_NAVEL = 0;
public static final int ORANGE_TEMPLE = 1;
public static final int ORANGE_BLOOD = 2;
リンゴ, オレンジの種類を定数にしておきたいとする. なにが困るかというと, たとえば品種改良を表すメソッド
public void breed(int variety1, int variety2){}
なんてのがあったとする. このメソッドは引数の2つの品種を掛け合わせる, なんてメソッドだとした時, ちょっとした問題が発生する.
それは, リンゴ×オレンジなんていう異種交配が始まってしまうパターン.
引数は「intかどうか」しかチェックしないため, 間違って (リンゴ,オレンジ) と別の種類の引数を入れてもコンパイルどころか実行まで通ってしまう. おおこわいこわい.
また, 上記例なら,
APPLE_FUJI == ORANGE_NAVEL
が trueを返すミラクル. これを回避するために, いちいち数値が被っていないかチェックが必要だったりとなかなか骨が折れる.
そこでEnum.

2. Enumの作り方

作り方はいたって簡単. 上記例ならリンゴ, オレンジはそれぞれ別物としてほしいので,
  public enum Apple {
    FUJI, PIPPIN, GRANNY_SMITH;
  }

  public enum Orange {
    NAVEL, TEMPLE, BLOOD;
  }
classや interfaceの代わりに enumを使う, 後は名前を列挙してやる. 「,(カンマ)」区切りで並べ, 必ず最後は「;(セミコロン)」でしめる.
こうすると, たとえばFUJIを呼び出したいなら,
Apple.FUJI
で呼び出せる. こうするとbreedメソッドも
public void appleBreed(Apple variety1, Apple variety2){}
とすれば, このメソッドはリンゴ同士でしかコンパイルが通らなくなる. 比較も,
Apple.FUJI == Orange.NAVEL;
Apple.FUJI == Apple.PIPPIN;
上はそもそも比較するものの型が違うとコンパイルエラーを吐いてくれるし, 下はもちろん falseが返る.
後からの追加も名前を足すだけで, 値の被りは名前の被りだけ気にすればいい.

3. 応用

こんな Enumの作り方もできちゃう.
public enum Skill {
  KAMEHAMEHA("かめはめ波", 1000);

  public String name;
  public int power;

  Skill(String name, int power) {
    this.name = name;
    this.power = power;
  }

  public String toString() {
    return name;
  }

}
唐突すぎる例( ゚д゚ )
たとえばかめはめ波という技の持つデータがすべて定数だった場合. これを Enumを使わずに管理するのはおそらく骨.
String KAMEHAMEHA_NAME ="かめはめ波";
int KAMEHAMEHA_POWER = 1000;
うん. 絶対事故る('A`).

そこで 「Enumにデータと振る舞いを持たせる」 ことをやってみる. KAMEHAMEHAは Skill型なので, 7行目からのコンストラクタが使える. 名前 KAMEHAMEHAが()で引数を持つのは, このコンストラクタを使うため. かめはめ波の powerを取り出したいなら,
int power = Skill.KAMEHAMEHA.power;
で取り出せる. 読みやすいし変にいろいろ参照しなくても OKなのは事故が起きにくいはず.
ちなみに12行目からのtoString()はEffectiveJava第 3章 10項「toStringを常にオーバーライドする」参照. 要するに,
System.out.println(Skill.KAMEHAMEHA);
としたときに, 「かめはめ波」と返ってきてくれた方が, 使う人にも優しい, ということ. 技を増やすときは同じように,
KAMEHAMEHA("かめはめ波", 1000),
TAIYOUKEN("太陽拳", 500);
とでも増やしてやればいい.



他にもメソッド持たせたりさらに応用もあるけどまだここまで.



かめはめ波とか出てきたのはだいたいここのせい.
たまに振り返ると固まっていなかった部分が矯正できて気分がいい+(・ω・0)*








まぁこの固めたのもいつまでもつやら…('A`)

2013年4月26日金曜日

UnityプロジェクトをGitHubで管理 -タスク管理編

なにやらGitHubにはタスク管理チックなことができるらしい, みたいな噂だったので調査.

UnityプロジェクトをGitHubで管理

第2幕

1. Issueの作成

プロジェクトのページに入ったら, 
コイツをクリック. 数字がissueの数を表しているらしい.
クリックすると, そこはIssueの一覧画面. New Issueをクリックして新規作成.

こんな画面になるので, タスク名, 担当者やコメント, フィルター…はヨクワカラナイ('A`)を設定して submit.
これでサクッとできました.

2. Issueの操作

一覧に戻るとグリーンなIssueの一覧. グリーンは Open(まだ残っている)タスクの一覧. Closeのボタンを押すと, こちらは Closed(解決済み)タスク一覧に. まだ解決していないのでリストは空のはず. 
では先ほどのIssueを Closeしてみる. 
CloseしたいIssueをクリックすると, 
こんな画面になるはず, 途中経過のコメントとか書けるのかな… 担当なども変えられる. Closeするなら下の Close. それだけで Closeし, 右上の緑の Openが, 赤い Closeに変わるはず. リストに戻れば, Closedのリストに移動しているのがわかるかと. ClosedのIssueを再 Openすることもも可能. 





とりあえずこんなところ. 
意外と簡単かも+(・ω・0)*



って言ってると爆死するフラグ…('A`)


2013年4月24日水曜日

UnityプロジェクトをGitHubで管理 -Git準備編追記

すっかり忘れてたorz
リポジトリに 「共同開発者」 としてチームメイトを登録しないと書き込みしてもらえない(・ω・`)

UnityプロジェクトをGitHubで管理

前回の追記なのでちょびっと

共同開発者の追加

追加するためにはまずチームメイトが GitHubアカウントを持っていることは必須. 当然か(・ω・`)
追加したいプロジェクトの詳細ページに行き, ヘッダにある Settingsをクリック. 

左側にあるこのリストの Collaboratorsをクリック. 
すると入力フォームと Addボタンが出てくるので, チームメイトのアカウントネームを入力して Addする. 
入力フォームにネームを入力しようとすると, 候補がリストで現れるので, 確認してから Addできる. 間違って関係ない人招かないように…
Addはほぼ一瞬で完了する. Addしたことは相手に GitHubからメールでお知らせしてくれる. 届いてなかったら多分別の人追加してる…カモΣ(||゚Д゚)ヒィィィィ
逆に除名したいときは対象のネームの横の (remove). こちらも一瞬. そしてこちらも GitHubからメールが行く. 追加を誤爆すると 追加時のメール+削除時のメール で2通誤爆メールが届きます. 追加の際は相手のアカウントネームをしっかり確認しましょう(・ω・`)





Collaborators がどこにあるか探してしまったのでメモメモφ(・ω・ )

2013年4月18日木曜日

UnityプロジェクトをGitHubで管理 -Git準備編

仲間内で「Unityで共同開発やろうぜ!(意訳)」な話があがり, 何を作るのか盛り上がったところで問題が一つ.
「リソースの共有どうすんの?」
……(;´Д`)('A`)(・д・`)……

「ま、まぁGitとかあるs」「UnityとGit仲悪かった気が…」
……(;´ω`)('A`)(・ω・`)……

若干先行き不安だけどやってみる

UnityプロジェクトをGitHubで管理

※ 前提条件として「コマンドラインでロクにPCとお話しできない人」の行動ログであることをご理解いただいたうえでお読みください.

1. リポジトリ準備

GitHubにて新しいリポジトリを作成する. アカウントはなければ作りましょう. プライベートなリポジトリを作るのでなければ無料. 逆に作りたいなら月々課金が必要. 世の中金か('A`)
ここ. これをクリックするとリポジトリの名前や設定を決める画面に移行する. 


正直 Repository nameと Publicだけ設定しておけばいいと思う. というかわからないorz 先述の通り Privateなリポジトリを立てるには課金が必要. お支払方法の入力フォームがにょきっと出てくるのでおとなしくPublicで.
Repository nameでエラー(既にある名前を使用しようとしている etc...)にひっかからなければ, 下の緑のボタンがクリックできるようになるので, クリックで決定.


できたできた. ちなみにできたリポジトリに行くとご丁寧にreadmeがおいてある. よんでおくといいかも. ちなみにこの画像の右上の「New repository」 でも新規リポジトリの作成ができます.

2. ローカルの準備

正直こっちがめんどくさかった…というか成功してない…1. でできてたreadmeのコマンドを, ここを参考に打ってみたりしてみたけど…なんか繋がらない…('A`)
そこでふと出てきたのが Github for Windows. うん. 前にも使って挫折したんだ. しかし衝突しなけりゃ使えたなーと思いひっぱり出し使ってみる. ちなみにここからダウンロードできます. またツールを使うには当然ですが Gitのアカウントが必要. 先に1. を済ませておくとスムーズ.

一番左, 自分のアカウントネームをクリックすると, GitHub上にあるアクセス可能なリポジトリ一覧が登場.  画像は既に cloneしてしまっているのでパソコンアイコンが出ているが, cloneしていないリポジトリには青く cloneのアイコン

こんなのが出てくる. クリックすると設定で指定したディレクトリにリポジトリを cloneしてくれる. 楽だ…
設定は上にある tools → optionから. またアカウントネームからGitHubに飛ぶことも可能. default storage directoryに指定した場所に展開されるので, デフォルトの場所が嫌ならここを変更しよう. 

これでリポジトリをローカルに用意できたはず. ちなみに toolsの隣あたりにある addで, ローカルにディレクトリを用意しつつ GitHubに pushしてくれるみたい. ずるい(・ω・`)

これでバージョン管理が開始できる!+(・ω・0)*

3. 共有

自分で作って自分で拾えるのはいいのさ. 問題は共有. 誰かの作ったリポジトリをいただきたい. 
こんどはふらっと見つけた TortoiseGitなるものを使ってみる. 

準備

ちょっとアレだがここも参考に. 
まずはインストーラをここからダウンロード. bit数は注意. 一緒に下の方にある Japaneseを拾っておくと日本語化できます. 英語苦手('A`)
インストールは基本そのまま Next連打. 途中 Pathの設定の際に,
Run Git from the Windows Command Prompt
を選んでおくと, パスも一緒に通してくれる. 一緒に cmdから gitコマンドが使えるようになった?
インストールが完了したら, 今度は日本語化のインストーラも起動. 特に設定もなくインストールが完了するはず.
最後に適当なディレクトリで右クリックすると,

こんなのがふえているはず(既に日本語化終わってるけど最初は英語のまま)なので, 設定から, General → Language を日本語にして決定すると日本語化完了.
詳しくはここ. 

Clone

上の画像にもあるけど, まんま Gitをクローン.
ダイアログが出るので, 上の URLに貰いたいリポジトリのURLを入力 → 実行 でOK.
非常に楽.






…たったこれだけだったんだけどなぁ…('A`)
まだUnity関係ないし.

超参考 → こちら
04/24追記・共同開発者の追加 → こちら

2013年4月11日木曜日

Conditionのカスタム

ちょっと前にまとめた Wait.until()と、その引数の condition. あの時まとめた既存の物じゃ, 正直今やってるテストがカバーしきれないと思いカスタムしてみたのでメモメモφ(・ω・ )

Conditionのカスタム


といっても正直コピペなんだけどね…

1. 状況

対処したい状況は, 「画像リソースでチェックボックスを表現してる. しかもAjaxで表示を書き換える仕様」といった状況. 
当然 elementToBeSelected系列は使えないし, stalenessOfもページがリロードされるわけでもないから使えない.

なので, 「チェックされているボックスの画像が, x枚になるまで」待機, みたいな形にしてみた.

2. メソッド

ベースにしたのは titleIs. 一番シンプルだし, 戻り値 Booleanだし.
  public static ExpectedCondition<Boolean> countBy(final By by, final int expectedSize) {
    return new ExpectedCondition<Boolean>() {
      public Boolean apply(WebDriver driver) {
        return driver.findElements(by).size() == expectedSize;
      }
    };
  }
本当にちょびっとの改造. 引数は Byロケーターと期待する数.
なんてことはなく, titleIsで「タイトルが引数と一致する」という条件を書いてた部分を, 「Byで指定したWebElementの size()が, 引数の expectedSizeに一致する」に書き換えただけ. この程度なら意外と簡単.
ちなみにちゃんとロケーターを引数にして, 中で driver.findElements()で取得しなおしてやりましょう.
WebElementや List<WebElement>を直で渡そうとすると, 取得のし直しがない = ページの方は変更があっても size()変わらない = ちゃんと動かない なんていうただのストッパーが出来上がります.




とまぁこんな風に近いメソッドをひっぱり出してきてちょこっと改造してやるだけでも, 一層テストしやすくなるかも. +(・ω・0)*

AWS CDKで立てたEC2インスタンスのTimeZoneとかいじりたかった話

EC2を立てることはできたけど、立てたインスタンスは UTCのままだし設定ファイルとかいちいちscpしてくるのはダルい。 当初UserDataでなんとかしようとしたものの、「書く量がヤバいしメンテしにくい」と悩んでいたところ見かけたのが  AWS::CloudFormation:...