ウィンナスのプログラミング忘備録

アプリケーション制作をしている最中に発見したテクニックを忘備録としてまとめていきます。

【Web開発】OOCSSを考慮したモジュールを作ってみる

こんにちは!

皆さんはウェブサイトを作る際にきちんとOOCSS(オブジェクティブなCSS)を考慮して作っていますか?

「プログラミングでもあるまいし、そんなの関係ねーよ」「形ができればいいんだろ?」と思った人もいるかもしれませんが、CSSでもオブジェクト指向を考慮しないと改修の際にめんどくさいことになるかもしれません!

 

では、オブジェクト指向を考慮したCSSを組み立てるにはどうすればいいのか、考えていきましょう♪

 

オブジェクト指向にすることでのメリット

OOCSSを理解する上で、もっとも学習の手助けになるのはそのメリットを知ることだと思います。(自分がそうでした)

まずは、ボタンのを作ることを考えます。

↓のようなやつですね。

 リンクボタン

これに加えて今度は↓のようなアコーディオンボタンを作るとします。

アコーディオン

 

この2つの見た目の差は「アイコン」と「色」となります。

つまり、そのほかは共通で使えることになります。(paddingとかfont-sizeとかとか) 

その辺をまとめちゃおう!というのがOOCSSの考え方です。

 

●実際にコードを書いてみた

実際にコードを書いてみましたのでこちらで解説していきます。

 

共通部分のコードを見ると「btn_link」のクラスが共通になっています。

そして、「btn_blue」「btn_red」「btn_green」が色を決定するクラスになります。

リンクボタンのコードを見てみると「type1」がアイコンを”>”にするクラスになります。

アコーディオンのコードを見てみると「accordion」がアイコンを”+”にするクラスになります。

 

仮に、”>”アイコンから”+”アイコンに変更したいとした場合、(なかなかなさそうな変更ですが笑)「type1」を「accordion」に変えればOKです!

さらに新たにリンクボタンを作る際には、アイコンだけを作ればいいのでかなり楽になります♪

 

●まとめ

・共通で使える部分は一緒にしちゃおう!

・アイコンや色など異なる部分のみ専用のクラスを使おう!

・OOCSSを使うと無駄なコーディング(作業)が減ります!

【開発日記:ブロック崩し】第4回 ボールの衝突処理を実装しました!

第4回目となりました!

とりあえずこれで最後って感じです。

今回やる内容は以下の通りです。

  • ブロックをプレハブ化する
  • 上下左右に衝突したときブロックを生成する
  • ボールが衝突したときにブロックを削除する

こんな感じです!

 

 ブロックをプレハブ化する

ブロックを汎用的に使えるようにプレハブ化します。

プレハブについては以下の記事を参考にしてください!

それぞれのブロックに「Box Collider」とスクリプト「BlockActivity.cs」を設定していきます。

 

上下左右に衝突したときブロックを生成する

ボールがプレイヤーに衝突したときにブロックが生成されるようにします。

ボールに設定されているスクリプト「ballActivity.cs」を下のように編集します。

 
//ブロックプレハブ
public GameObject block_red;
public GameObject block_blue;

//ベクトル
float speed_x = 0.5f;
float speed_y = 0.5f;

Vector2 vec;

// Use this for initialization
void Start () {
  //乱数で初期方向を決める
  if (Random.Range (1, 100) > 50) {
    speed_x *= -1;
  }
  if(Random.Range(1, 100) < 50){
    speed_y *= -1;
  }

  vec.x = speed_x * Time.deltaTime;
  vec.y = speed_y * Time.deltaTime;
  GetComponent().AddForce (vec, ForceMode2D.Force);
}
	
// Update is called once per frame
void Update () {
}

//衝突処理
void OnCollisionEnter2D(Collision2D col){
  //衝突したオブジェクトごとに処理をする
  switch (col.gameObject.tag) {
  //左右にぶつかった時に青いブロックを生成する
  case "player_left":
    createBlock ("blue");
    break;
  case "player_right":
    createBlock ("blue");
    break;
  //上下にぶつかった時に赤いブロックを生成する
  case "player_top":
    createBlock ("red");
    break;
  case "player_bottom":
    createBlock ("red");
    break;
  }
}

//ブロックの生成
private void createBlock(string color){
  Vector2 vec = transform.position;
  //乱数で生成する位置を決める
  vec.x = Random.Range (-5, 5);
  vec.y = Random.Range (-3, 3);

  //赤いブロックを生成する
  if (color.Equals ("red")) {
    GameObject go = (GameObject)Instantiate (block_red, vec, transform.rotation);
  }
  //青いブロックを生成する
  else if (color.Equals ("blue")) {
    GameObject go = (GameObject)Instantiate (block_blue, vec, transform.rotation);
  }
}

衝突する処理と生成処理になります。

 

ボールが衝突したときにブロックを削除する

今度は先ほど作成したブロックに設定したブロックのスクリプト「BlockActivity.cs」に以下を記述していきます。

void OnCollisionEnter2D(Collision2D col){
  if (col.gameObject.tag.Equals("ball")) {
    Invoke ("del", 0.05f);
  }
}
void del(){
  Destroy (this.gameObject);
}

 

ぶつかったゲームオブジェクトのタグがボールだったときに削除します。

delメソッドでブロックを削除します。

削除の処理については以下の記事を参考にしてください!

winnassmemo.hatenablog.jp

「Invoke」を設定していますが、これを設定しないとボールが反射しないで素通りしてしまいますww

というのも設定しない場合、反射する前にオブジェクトが消滅してしまうんですよね^^;

まぁ0.05秒がちょうどいい感じでした!

 

これで一通りのブロック崩しが出来上がりました!

 

 

【ポケモンGO】7月27日のプレイ成果!

プログラミング関係ないけど!「定期」


平日にしてはボチボチ歩いた気もします。

結果はー...ババァン!

f:id:win-friendof:20160727221309j:image

 

えぇーっと、
・レベルは8
・歩いた距離が12.3km
・図鑑登録が25匹
・ゲットしたモンスターが77匹
・タマゴ孵化は4つ


あれ、思ったよりもゲットしたモンスターが多かった!(29匹アップ)

でもキャタピーとかポッポとかなんだよなーww

会社周りにはズバットが多いです 笑

 

タマゴがたまりに貯まっているので頑張って割ります!

f:id:win-friendof:20160727222528j:plain