Author Archives: susumuis

About susumuis

メイドカフェによく居るWebエンジニア

はてなブログEpicテーマをレスポンシブルしてみた

悪乗りしてレスポンシブルしてみた。

こうですか?わかりません><

もう、何が何だかなので現在のものをそのまま貼ります。動きはこのブログ自体を見て!

ソース全文

/* <system section=theme selected=alpha2> */
@import /css/theme/alpha2/alpha2.css;
/* </system> */
h1#title {
    text-align: left;
    /*font-family: \'Times New Roman\';*/
    font-style: italic;
    text-shadow: 6px 6px 2px #CCC;
    padding-top: 30px;
    padding-bottom: 15px;
}
h1#title > a {
    font-size: 130%;
}
#container {
    text-align: left;
    width: 100%;
    max-width: 1160px;
}
@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}
header#blog-title {
    margin-bottom: 0;
}
#top-editarea {
    margin-bottom: 2em;
}
#main {
    float: left;
    width: 100%;
    padding: 0 0 0 0;
}
#main-inner {
    margin-left: 130px;
    margin-right: 220px;
}
#wrapper {
    width: 100%;
}
#box2 {
    margin-left: -200px;
    width: 200px;
}
#main img {
    max-width: 100%;
}
@media screen and (max-width: 800px) {
    .entry-header .date {
        position: relative;
        left: 0px;
    }
    .entry-header-menu a {
        top: 4px;
        left: 120px;
    }
    #main-inner {
        margin-left: 0px;
    }
}
@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}
/* <system section=background selected=fff> */
body{background:#fff;}
/* </system> */

解説

  • 背景色を白くした
    • 前回、紙みたいなデザインがリキッドしたら気持ち悪いということがわかったので
  • 横幅90%だったのを、960px以下では100%になるように、90%が960pxを下回った時は960pxになるようにした
    • 以下の部分
@media screen and (min-width: 1067px) {
    #container {
        width: 90%;
    }
}
@media screen and (min-width: 960px) and (max-width: 1067px) {
    #container {
        width: 960px;
    }
}
@media screen and (max-width: 600px) {
    #box2 {
        display: none;
        width: 0px;
    }
    #main-inner {
        margin-right: 0px;
    }
}

おおおおっー僕でもできたー!!!

はてなブログのEpicテーマをリキッドレイアウトにしてみた

はてなブログを使っている技術者の方はEpicテーマを使っている人が多いなあと思います。シンプルで読みやすいので、内容重視の技術者ブログに適していますよね。

このブログもEpicテーマを使用していますが、幅が960pxで固定されているのが気に入っていませんでした。最近のディスプレイで見たら狭すぎです。ソースコードを配置してもすぐに右が切れてしまいます。そこでCSSをカスタマイズできる機能を利用してリキッドレイアウトにしてみました。

動作確認済ブラウザ

  • MacOSX 10.0.2
  • Safari 7.0.3
  • Windows 8.1
  • Chrome 34
  • Firefox 29
  • Opera 20
  • Internet Explorer 11

CSSコード全文

/* <system section=theme selected=alpha2> */
@import /css/theme/alpha2/alpha2.css;
/* </system> */
#container {
    text-align: left;
    width: 90%;
    max-width: 1160px;
}
#main {
    float: left;
    width: 100%;
    padding: 0 0 0 0;
}
#main-inner {
    margin-left: 130px;
    margin-right: 220px;
}
#wrapper {
width: 100%;
}
#box2 {
    margin-left: -200px;
    width: 200px;
}
#main img {
    max-width: 100%;
}
/* <system section=background selected=ddeaed> */
body{background:#ddeaed;}
/* </system> */

ポイント

主に下記の情報を参考にしています。

【CSS】3カラムレイアウト-左右は固定幅、中央は残りの幅目一杯に広がるレイアウト-14時の間食

日付の表示は、mainの並列ではなく、mainに含まれる要素だったところが少し違います。 また、そのままだと画像が横にはみ出してしまうので、max-widthを入れています。

それから横に長いディスプレイで読んだ場合、かえって読みづらくなってしまうので、#containerにもmax-widthを入れました。

その他参考にしたページ

言い訳

僕はHTMLコーダーでもWebデザイナーでもないので、見よう見まねと当てずっぽうでCSSを書いていますので適切でない書き方ではないかもしれません。もしもっと良い書き方があればコメントいただければ有り難く思います。

追記

リキッドにしたら、落ち着かない感じになったように感じます。

日常のものはそんなふにゃふにゃしないからと考えれば当然ですね。

よく見るとfacebookやTwitterも横幅固定なのですね。

発見したこと

よく見ると、例えば、日付のカラムって、main divの内側で本文の下にあります。 これがEpicでは左側にあるのですが、普通に考えると左→右ってところを、marginとfloatを使って右→左の順番で並べています。 なんでこんな変なことするのかと思いますが、日付よりも圧倒的に本文が重要ですよね!

はてなブログはアクセスすると即座に本文がレンダリングされるので、その辺りが最適化されているようです。

Cocos2d-jsを試してみた(秋葉原Cocos2d-html5もくもく勉強会#4 にて)

4連休の初日は、秋葉原Cocos2d-html5もくもく勉強会#4 に参加してきました。

秋葉原Cocos2d-html5もくもく勉強会#4 - connpass

参加経緯

僕はCocos2dもゲームプログラミングも業務経験がないド初心者ですが、実は、昔、学生の頃は僕もガラケー向けの落ち物パズルゲームを作ったり、ちょっと特殊なブロック崩しを作ったりしていました。せっかくだから、その頃の作品を最近のスマートフォンに移植したいと思いつつ、仕事が忙しいことを言い訳にしてなかなかできずにいました。

そんな中で、ちょうどこのイベントがGW中に開催されることを知って申し込みました。初参加です!

Cocos2d-js *1とは

Cocos2d(Cocos2d-x)主にモバイル向けのクロスプラットフォーム2Dゲーム作成ライブラリで、C++で開発することを基本としています*2。(http://www.cocos2d-x.org

Cocos2d-jsは、Cocos2d-xのJavaScriptバインディング機能を利用して、同様のコードがWebブラウザ上で動作するようにしたライブラリです。言語はJavaScript†使います。Webブラウザとエディタさえあれば開発環境はが揃うので、非常に取っ付き易いライブラリです。

しかも、Chromeなどの最近のブラウザではネイティブとも遜色ないほど軽快な動きをするらしいです。Webビューに貼付ければそのままスマホアプリにできるとか。もっとも、端末の性能を最大限に活用するなら、Cocos2d-xでネイティブにコンパイルした方が良いらしく、その方法もあるようです。*3

Cocos2d-JS | Cocos2d-xにサンプルプログラムが公開されています。

これなら、JavaScriptなどのWebの知識を活用できるので、僕でも取っ付きやすそうです!

勉強会の様子

会場は株式会社あゆたさんの開発室です。以前、お茶の水の方に開発室があったときに別の勉強会でお邪魔したことがありましたが、岩本町のビルに移転していました。きれいな会場のご提供ありがとうございます。

自分は12時15分頃到着しましたが、既に2名の方が無言でカタカタしていました。 参加者が全員集まったところで、自己紹介と今日やる内容を発表し、最後にみんなでできたことを発表するというスケジュールで、あとは皆一言もしゃべらずひたすら黙々していました。

こういう雰囲気だと、集中できて良いですね!

自分がやったこと

下記のebookがAmazonで販売されていたので、購入してひたすら頭から写経していました。(500円!安い!)

Cocos2d-html5ではじめるモバイルゲーム開発

Cocos2d-html5ではじめるモバイルゲーム開発

書いたプログラムの内容はこのebookを読めば良いわけですから、ここでは紹介しません。(笑)

本の感想

本職の方々の意見はどうなのか分かりませんが、この本は説明も易しく、ゲーム開発者の気持ちも伝わって来て、良い本だと思います。自分は少しばかりゲーム開発の素地があったからかもしれないので、全くの初心者だとどういう感想があるかは分かりませんが、少なくとも僕はこの本一冊で入門は良さそうで、あとは公式ドキュメントやWebの情報でなんとかなると思いました。

やってみた感想

学生の頃すこしDelphiやC#でゲームを作ったりしてた経験に照らし合わせると、ハード面もずいぶん進化しているのか、ライブラリが良いのか、昔「これはダメ」と言われたやり方が全然大丈夫になっていて驚きました。

例えば、Delphiでもラベル(TLabel)をフォーム(TForm)に貼り付けて、ラベルのLeft, Topプロパティをタイマー(TTimer)で動かせば文字を動かすことができますが、そんなことをするとチラつくし、滑らかじゃなかったので、そうではなくて、1フレーム1/60秒になるように処理落ちを考慮しながら計算しながら、毎フレーム画面を再描画し、それも、都度描画するとチラつくから、裏で描画させたものをまとめてコピーして。。。(ry

このebookでは、宇宙船を操作して敵から避けるゲームを作っていくのですが、いきなり、ラベルをたくさん作って配列に入れたりするんですね。敵の動きはラベルの座標を動かす感じです。あと、フレームの計算とかも自分でしないで、60fpsなら60fpsと設定するだけであとは、update関数に処理を書くだけなんですね!ゲーム作りの最初数日を消費した苦労が。。。。*4

そもそも、言語がJavaScriptってのが楽すぎます!配列は事実上、メモリの管理とかもないしいいですねえ。。。

JavaScriptを書くのに良いエディタは?

JavaScript開発の環境として、以前このブログで下記のような記事を書きました。 EclipseのJavaScript環境(JSDT)を快適に使う方法 - susumuis Info

このときは、ExtJSというRIAライブラリを使おうとして環境を構築していたのですが、ExtJSとCocos2d-jsの共通点として、非常に巨大なJavaScriptライブラリをロードするというところがあります。従って、このライブラリを開発環境のライブラリパスに含めてしまうと、コード補完に数秒という、非常に残念な環境になってしまいます。なので、今回も、Cocos2d-js関連のライブラリは外してしまいました。プロジェクトのプロパティ画面から、下記のキャプチャのようにして、Cocos2d-html5-v2.2.3.min.jsを外しています。

f:id:s-ishigami:20140504180810p:plain

これで、かろうじて開発できるようになったのですが、これはこれで、残念な開発環境でした。Cocos2d-jsのコードの特性上、ほとんど補完が利きません!例えば、次のようなコードを書くのですが

var Result = cc.Layer.extend({
    init: function() {
        this._super();
        var size = cc.Director.getInstance().getWinSize();
        // 省略
        return true;
    }
    , onTouchesBegan: function(touches, event) {}
    , onTouchesMoves: function(touches, event) {}
    , onTouchesEnded: function(touches, event) {}
    , onTouchesCancelled: function(touches, event) {}
});
var ResultScene = cc.Scene.extend({
    onEnter: function() {
        this._super();
        var layer = new Result();
        layer.init();
        this.addChild(layer);
    }
});

cc.Layer.extendみたいにして、継承を表現してしまうため、ResultSceneの定義の側でnew Result()とか、layer.init()が全く補完できません。これなら、テキストエディタによる語句補完の方がマシです。

ということで、最終的に僕が選んだのはAtomです。

Atom

別に、Web業界で大人気のSublime Textでも良かったんですが、JavaScript書くなら相性が良さそうな気もしますし、今後活用して行こうと思います。

f:id:s-ishigami:20140504181726p:plain

会場にいた人にどんなエディタ使っているのか聞いたところ、IntelliJを使っているとか。。。。それは最強ですね。w;

しょっぱなcocos2d-xサイトが落ちてたので、GitHubからライブラリをダウンロードしてサンプルを実行しました

たまたま http://www.cocos2d-x.org/ が一時的に落ちてました。(すぐに復旧しました)

早速、ライブラリをダウンロードして、サンプルを実行しようとした時にこうだったので、「僕は何をしたら良いんだ」状態になってしまったので、githubからソースを落としたりしてみました。

READMEに従って

$ git clone git://github.com/cocos2d/cocos2d-html5.git
$ cd cocos2d-html5/
$ git submodule update --init
$ python -m SimpleHTTPServer

とやりましたが、なぜか、http://localhost:8000/にアクセスしてもページがありません。 どうたら現在のdevelopブランチには、デモ用のindex.htmlとかがないようです。そこで下記のようにして、2.xブランチに切り替えたところ、サンプルのindex.htmlもダウンロードされてきました。

$ git branch -a
* develop
remotes/origin/HEAD -> origin/develop
remotes/origin/NPM
remotes/origin/develop
remotes/origin/gh-pages
remotes/origin/master
remotes/origin/v2.x
$ git checkout -b v2.x origin/v2.x
$ python -m SimpleHTTPServer

ただ、本の中で紹介されているライブラリソースを一個のjsファイルにコンパクションしたCocos2d-html5-v2.2.3.min.jsは含まれていませんでした。これは自分で生成できるのでしょうけど、そうこうするうちに、公式サイトが復活したので、普通に http://cocos2d-x.org/download から落としちゃいました。

ゲーム作ってみようかなあ

ゲームプログラミングには疎いのですが、思ったよりも短時間でゲームを作れることが分かりましたし、昔作ったブロック崩しゲームのようなゲームは簡単に実装できそうです。

昔はゲームプログラミングを勉強しようとすると、C言語でHello, Worldから入って、慣れて来たら、Windows SDKでウィンドウを作るだけのコードを書くのに何百行も書いて*5、Microsoftのヘルプファイルと格闘し、慣れて来たらDirect Xに挑戦して。。。という道を歩まなければならなかったので、今は良い時代になったなあと思います。

ゲームを作って利益を得ようとすると非常に大変な世界と聞きますが、趣味の範囲でちょっとした表現として、ゲームを作るというのは楽しいです。「なんか思いついちゃったんで、一晩でこんなクソゲー作っちゃったーwww」なんてのを繰り返してたら、思ったより楽しいゲームができてしまったとか、そういうの良いですよね!

ピアノなんかと同じです。プロになろうとすると大変ですが、趣味でゲームプログラミングをする。へたくそで良いんです。楽しめれば。

*1:先日Cocos2d-html5から名前が変わりました

*2:正確にはiPhone用のCocos2d-iPhoneってのがオリジナルで、Objective-C用みたいで、それをC++に移植してクロスプラットフォームにしたのがCocos2d-xです。その他Go言語やC#への移植版も存在するようです。

*3:後述のeBook曰く「二階から目薬(iPhone)」「三階から目薬(Android)」というようですがw

*4:当時でも僕がDelphi使いだからいいもので、C++使いの人たちはWindows SDKでまずフォームを出すところから苦労が

*5:しかも大体動かねーとかいって苦しむんですよね