スマホ版ソーシャルゲームコーディングのポイント

kokoe

2012.11.29

フロントエンジニア

三度の飯よりコーディングが好きと言って入社させてもらったマークアップエンジニアのココエです。
四度目は飯の方がいいです。

さて、自分の所属事業部がソーシャルアプリ事業部なので、ソーシャルゲームのコーディングばっかりやっています。

最近は、どんどんスマートフォンが普及してきて、ソーシャルゲームもスマートフォンのコーディングが多くなってきました。

なので、
「スマホ版ソーシャルゲームコーディングのポイント！」 について書いてみようと思います。

・・・といっても、ポイントがいっぱいあるので、今回は大事なポイント2点のみでｗ

容量に気を付けて、表示スピードを重視する
ページの内容は、可変することが前提！

容量に気を付けて、表示スピードを重視する

まんまですが、ユーザーは動きが遅かったり重かったりを嫌うので、ここは一番気を付けたいところです。

容量を軽くする、見直しポイントとしては

PNG24(透過PNG)は、透過の情報が結構重いので使いどころを考えて使う。
Retina対応は、画像の容量を考慮して、どこまで対応するか切り分けする。

表示スピードを見直すポイントとしては

CSS3のシャドウは、あまり広範囲に利用しない（iPhoneは気にならなくとも、Androidは描画が遅くなる。）
jQueryのanimationは重いので、CSS3で対応するとよい感じ。
画像はCSS Sprite推奨。特にナビゲーションなど共通で使うもの。

といった感じでしょうか？

ページの内容は、可変することが前提！

ページの内容は、可変することが前提！

これ結構重要です。

LPや、数ページのコーディングの経験が多かった方に、ぜひ見ていただければと思います。

とりあえず、例がないと説明しにくいので、サンプルページを用意しました。
ソーシャルゲームによくある「ショップ」のページです。

デザインのことは突っ込んではいけません、当方コーダーです。（と、逃げるｗｗ）

では、可変するということを中心に、ポイントをみていきましょう。
※HTMLのバージョンはHTML5ということで。

1点目

所持している「ゲーム内通貨」と「リアルマネー」が表示してあるエリアで、（まあ、あまりないケースですが）所持コインが0の場合に、コインエリアを消したい、といった場合。

仕様を理解しないでコーディングすると、上記の「悪い例」に書いてあるようなことになります。

2点目

このケースは、「期間限定デコ」の見出し要素に対してbackgroundなどで赤いラインを表示するよう設定してしまうと、期間限定デコが消えたときに「あれ！？赤いラインがでてない！」といったことになります。

この場合は、フェスGやコインの表示エリアに対して、赤いラインを設定するのがよいと思われます。
※もし、フェスGやコインの表示エリアがなくなったとしても、赤いラインが二重に表示されないですむし！

3点目

ボタンの要素自体にmarginをかけて、テキストにmarginを設定し忘れていると、期待通りのレイアウトが実現されなかったりするので、ボタンやテキストの親要素に対してmarginやpaddingをかけるのも手かな、と思います。

CSS

[sourcecode lang="text"]
&lt;style&gt;
.mtb10 { margin-top:10px; margin-bottom:10px; }
.txtRight{ text-align:right; }
&lt;/style&gt;
[/sourcecode]

[sourcecode lang="text"]

<style>

.mtb10 { margin-top:10px; margin-bottom:10px; }

.txtRight{ text-align:right; }

</style>

[/sourcecode]

HTML(PHP)

[sourcecode lang="text"]
&lt;div class=&quot;mtb10 txtRight&quot;&gt;
&lt;?php if($hasCoin): //コインが足りている場合 ?&gt;
&lt;a href=&quot;/&quot; class=&quot;btn1&quot;&gt;買う&lt;/a&gt;
&lt;?php else: //コインが足りない ?&gt;
&lt;span&gt;コインが足りません&lt;/span&gt;
&lt;?php endif; ?&gt;
&lt;/div&gt;
[/sourcecode]

[sourcecode lang="text"]

<?php if($hasCoin): //コインが足りている場合 ?>

<?php else: //コインが足りない ?>

<span>コインが足りません</span>

<?php endif; ?>

</div>

[/sourcecode]

4点目

スマホ版のソーシャルゲームのコーディングでは、行全体をタップエリアにすることが多く、このような例は多くみられると思います。

リンクがある時と無い時で、いちいちclassをつけたり外したり等で切り替えるのは冗長かな？と思います。
そんな時に役に立つのがネガティブマージンです。

CSS

※説明ポイントのみの記述です。

[sourcecode lang="text"]
&lt;style&gt;
.itemArea{
    padding:10px;
}
.itemArea &gt; .blockLink{
    margin:-10px;
    padding:10px;
}
.itemArea &gt; .blockLink.arrow{
    padding-right:20px; /* 20pxはカーソル分を考慮した余白 */
}
.blockLink.arrow{
    position:relative;
}
.blockLink.arrow:after{
    content:&quot;&quot;;
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    right:5px;
    top:50%;/* 縦に対してセンタリング処理 */
    margin-top:-5px;/* 縦に対してセンタリング処理 */
    background:url(&quot;/&quot;) no-repeat;
}
&lt;/style&gt;
[/sourcecode]

[sourcecode lang="text"]

<style>

.itemArea{

padding:10px;

}

.itemArea > .blockLink{

margin:-10px;

padding:10px;

}

.itemArea > .blockLink.arrow{

padding-right:20px; /* 20pxはカーソル分を考慮した余白 */

}

.blockLink.arrow{

position:relative;

}

.blockLink.arrow:after{

content:"";

display:block;

width:10px;

height:10px;

position:absolute;

right:5px;

top:50%;/* 縦に対してセンタリング処理 */

margin-top:-5px;/* 縦に対してセンタリング処理 */

background:url("/") no-repeat;

}

</style>

[/sourcecode]

HTML:リンク無しバージョン

[sourcecode lang="text"]
&lt;div class=&quot;itemArea&quot;&gt;
    &lt;p&gt;&lt;img src=&quot;/&quot; width=&quot;65&quot; height=&quot;65&quot; alt=&quot;画像&quot;&gt;&lt;/p&gt;
    &lt;div class=&quot;rightColumn&quot;&gt;
        &lt;p&gt;ソ・ニフェスさん（2）&lt;/p&gt;
        &lt;dl&gt;
            &lt;dt&gt;価格：&lt;/dt&gt;
            &lt;dd&gt;10フェスG&lt;/dd&gt;
        &lt;/dl&gt;
        &lt;p&gt;かぁいいねぇ～ニフェス&lt;/p&gt;
        &lt;div class=&quot;txtRight&quot;&gt;
            &lt;p&gt;準備中&lt;/p&gt;
        &lt;/div&gt;
    &lt;!-- /.rightColumn --&gt;&lt;/div&gt;
&lt;!-- /.itemArea --&gt;&lt;/div&gt;
[/sourcecode]

[sourcecode lang="text"]

<p>ソ・ニフェスさん（2）</p>

<dl>

</dl>

<p>かぁいいねぇ～ニフェス</p>

</div>

</div>

</div>

[/sourcecode]

HTML:リンク有りバージョン

[sourcecode lang="text"]
&lt;div class=&quot;itemArea&quot;&gt;
    &lt;a href=&quot;/&quot; class=&quot;blockLink arrow&quot;&gt;
        &lt;p&gt;&lt;img src=&quot;/&quot; width=&quot;65&quot; height=&quot;65&quot; alt=&quot;画像&quot;&gt;&lt;/p&gt;
        &lt;div class=&quot;rightColumn&quot;&gt;
            &lt;p&gt;ソ・ニフェスさん（2）&lt;/p&gt;
            &lt;dl&gt;
                &lt;dt&gt;価格：&lt;/dt&gt;
                &lt;dd&gt;10フェスG&lt;/dd&gt;
            &lt;/dl&gt;
            &lt;p&gt;かぁいいねぇ～ニフェス&lt;/p&gt;
            &lt;div class=&quot;txtRight&quot;&gt;
                &lt;p&gt;準備中&lt;/p&gt;
            &lt;/div&gt;
        &lt;!-- /.rightColumn --&gt;&lt;/div&gt;
    &lt;!-- /.blockLink --&gt;&lt;/a&gt;
&lt;!-- /.itemArea --&gt;&lt;/div&gt;
[/sourcecode]

[sourcecode lang="text"]

<p>ソ・ニフェスさん（2）</p>

<dl>

</dl>

<p>かぁいいねぇ～ニフェス</p>

</div>

</div>

</a>

</div>

[/sourcecode]

.itemAreaでpadding:10pxを指定。普通に意図した余白が保たれます。

次に、.itemAreaの直下にa要素（.blockLink）が来た場合。
ここで、親要素（.itemArea）で設定したpadding:10pxを、元に戻す処理margin:-10px;を設定。
さらに、同じようにpadding:10px（親要素.itemAreaと同じ余白）を設定することにより、リンクがあろうがなかろうが、見え方が同じになり、リンクエリアもちゃんと保持されます。

と、こんな感じでしょうか。

まとめると、ちゃんと仕様を理解してコーディングしないと、システム実装後にレイアウト崩れちゃうよん。ってことですね。

こんな色んなことを考えながらコーディングをするわけですが、ただいまスタッフを募集中です。一緒に働いてよねっ！