Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

はてなブログの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円!安い!)

書いたプログラムの内容はこの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:しかも大体動かねーとかいって苦しむんですよね

Google Cloud Platform に Google Compute Engine を構築して、Wordpressを動かすまで(その3 - wordpressらしきものが動いた!)

前回: Google Cloud Platform に Google Compute Engine を構築して、Wordpressを動かすまで(その2 - LAMP環境の構築) - susumuis Info

GCE上に構築したDebian LAMP環境にwordpressをインストール

さて、前回までで、wordpressをインストールする前の役者は揃ったわけですが、 wordpress自体を次のどちらから取ってくるかという問題があります。

  • Debianのpackage
  • wordpressのサイトから最新

よく、後者でインストールしている記事をよく見かけますし、その方が最新も手に入るし簡単と聞きますが、 セキュリティのパッチとかが出たら常に追いかけなければなりません。その点、package版なら、 aptでupgradeするだけで、セキュリティパッチが当たりますので、とりあえず、 今回は最新を追いかけないでセキュリティはdebianに任せる方法を採用してみます。

susumuis@instance-1:~/public_html$ sudo aptitude install wordpress
以下の新規パッケージがインストールされます:
  fontconfig-config{a} javascript-common{a} libfontconfig1{a} libgd2-xpm{ab} libjs-cropper{a} libjs-prototype{a} libjs-scriptaculous{a}
  libphp-phpmailer{a} libphp-snoopy{a} libx11-6{a} libx11-data{a} libxau6{a} libxcb1{a} libxdmcp6{a} libxpm4{a} php5-gd{a} tinymce{a} ttf-dejavu-core{a}
  wordpress wordpress-l10n{a} wwwconfig-common{a}
更新: 0 個、新規インストール: 21 個、削除: 0 個、保留: 3 個。
11.0 M バイトのアーカイブを取得する必要があります。展開後に 53.1 M バイトのディスク領域が新たに消費されます。
以下のパッケージには満たされていない依存関係があります:
 libgd2-xpm : 競合: libgd2[仮想パッケージです]
              競合: libgd2-noxpm [2.0.36~rc1~dfsg-6.1 が既にインストール済みです]
 libgd2-noxpm : 競合: libgd2[仮想パッケージです]
                競合: libgd2-xpm [2.0.36~rc1~dfsg-6.1 がインストール予定となっています]
以下のアクションでこれらの依存関係の問題は解決されます:

     以下のパッケージを削除する:
1)     libgd2-noxpm



この解決方法を受け入れますか? [Y/n/q/?]Y
以下の新規パッケージがインストールされます:
  fontconfig-config{a} javascript-common{a} libfontconfig1{a} libgd2-xpm{a} libjs-cropper{a} libjs-prototype{a} libjs-scriptaculous{a}
  libphp-phpmailer{a} libphp-snoopy{a} libx11-6{a} libx11-data{a} libxau6{a} libxcb1{a} libxdmcp6{a} libxpm4{a} php5-gd{a} tinymce{a} ttf-dejavu-core{a}
  wordpress wordpress-l10n{a} wwwconfig-common{a}
以下のパッケージが削除されます:
  libgd2-noxpm{a}
更新: 0 個、新規インストール: 21 個、削除: 1 個、保留: 3 個。
11.0 M バイトのアーカイブを取得する必要があります。展開後に 52.5 M バイトのディスク領域が新たに消費されます。
先に進みますか? [Y/n/?] Y

なんか入りました。ただ、これだけではまだwordpressは動きません。結構ここで挫折する人がいるとか。。。

まず、以下の場所にドキュメントがあるので読んでみます。

susumuis@instance-1:~/public_html$ cd /usr/share/doc/wordpress
susumuis@instance-1:/usr/share/doc/wordpress$ ls
NEWS.Debian.gz  README.Debian  TODO.Debian  changelog.Debian.gz  copyright  examples
susumuis@instance-1:/usr/share/doc/wordpress$ cat README.Debian 

うん、英語。。。僕による超要約によると

  • apacheのルートを usr/share/wordpress に向けろ (examples/apache.confを見よ!)
  • examples/setup-mysql を使えば database と filesystem のセットアップが終わるぜ。/srv/wwwにあるファイルがインストールされることに注意
  • Wordpress 設定ファイルについて
  • wp-config.php は実体として /etc/wordpress/config-$HOST.php または /etc/wordpress/config-$DOMAIN.php を読み込むよ!
  • もしそれらが存在しない場合は 404 を返す
  • 複数ブログをやるときは ... (今回は読んでない)
  • もっと知りたければ /usr/share/wordpress/wp-config-sample.phphttp://codex.wordpress.org/Editing_wp-config.php を見てね!
  • プラグインとかテーマーとかの管理について

以降色々書いてあるけど、とりあえず動かすにはとにかく設定ファイルを作ってしまえば良さそう。なのでやってみます!

susumuis@instance-1:/usr/share/doc/wordpress$ cd examples
susumuis@instance-1:/usr/share/doc/wordpress/examples$ sudo gunzip setup-mysql.gz
susumuis@instance-1:/usr/share/doc/wordpress/examples$ ls -la
合計 20
drwxr-xr-x 2 root root 4096  4月 25 11:36 .
drwxr-xr-x 3 root root 4096  4月 25 11:34 ..
-rw-r--r-- 1 root root 2076  9月 13  2013 apache.conf
-rw-r--r-- 1 root root 5015  9月 13  2013 setup-mysql

susumuis@instance-1:/usr/share/doc/wordpress/examples$ sudo bash setup-mysql -n wordpress localhost
PING localhost (127.0.0.1) 56(84) bytes of data.
64 bytes from localhost (127.0.0.1): icmp_req=1 ttl=64 time=0.029 ms

--- localhost ping statistics ---
1 packets transmitted, 1 received, 0% packet loss, time 0ms
rtt min/avg/max/mdev = 0.029/0.029/0.029/0.000 ms
/etc/wordpress/config-localhost.php written
Trying to create wp-content directory: /srv/www/wp-content/localhost
Setting up permissions
Goto http://localhost to setup Wordpress

こんな感じでしょうか?ここまで来るのに相当エラーでまくったので、もう、当てずっぽうで、やっとコマンドが通った状態です。 いずれ本番環境作るときはこうではいけないです。

examples/apache.confを見よというので見てみます。

susumuis@instance-1:/usr/share/doc/wordpress/examples$ cat apache.conf 
There are several ways to setup Wordpress & Apache in Debian. However the
maintainer's recommended way with the helper script `setup-mysql` uses:
以下続く

うわあ。また英語!!>< とりあえず、setup-mysqlスクリプトは使ったので、一番簡単そうな、

## Virtual host VirtualDocumentRoot

以下の設定を参考にしてみます。 ガイドに従ってrewrite, vhost_alias もし有効にしてみます。

susumuis@instance-1:/etc/apache2/sites-enabled$ sudo a2enmod rewrite
susumuis@instance-1:/etc/apache2/sites-enabled$ sudo a2enmod vhost_alias
susumuis@instance-1:/etc/apache2/sites-enabled$ sudo /etc/init.d/apache2 restart

ハマりどころとして、ワンライナーの a2enmod rewrite && a2enmod vhost_alias && /etc/init.d/apache2 restart をそのまま貼り付けてもダメです。それぞれsudoをつけるか、suでルートになって置かなければなりません。

そして、こんな感じにしました。

susumuis@instance-1:~$ cd /etc/apache2/sites-available
susumuis@instance-1:/etc/apache2/sites-available$ sudo vi localhost
<VirtualHost *:80>
    UseCanonicalName Off
    ServerName 107.***.***.***
    VirtualDocumentRoot /usr/share/wordpress
    Options All

    # wp-content in /srv/www/wp-content/$0
    RewriteEngine On
    RewriteRule ^/wp-content/(.*)$ /srv/www/wp-content/%{HTTP_HOST}/$1
</VirtualHost>

ServerNameのところを本当はドメインと紐付けたりしたほうがよいでしょう。 とりあえず、今は手っ取り早くIPに紐付けちゃいました。..***のところは本物のIPを入れてます。

susumuis@instance-1:/etc/apache2/sites-available$ sudo a2ensite localhost
Enabling site localhost.
To activate the new configuration, you need to run:
  service apache2 reload
susumuis@instance-1:/etc/apache2/sites-available$ sudo service apache2 reload
[FAIL] Reloading web server config: apache2 failed!

あれ、リロードできなくなっちまった。ならばログをみませう。

susumuis@instance-1:/etc/apache2/sites-enabled$ vi /var/log/apache2/error.log

そしたら

PHP Warning:  require_once(/etc/wordpress/config-107.***.***.php): failed to open stream: Permission denied in /usr/share/wordpress/wp-config.php on line 22

とか

PHP Fatal error:  require_once(): Failed opening required '/etc/wordpress/config-***.***.***.php' (include_path='.:/usr/share/php:/usr/share/pear') in /usr/share/wordpress/wp-config.php on line 22

とか書いてある!それなら、(このあたりから大分適当になってきています。すみません)

susumuis@instance-1:/etc/apache2/sites-available$ cd /etc/wordpress/
susumuis@instance-1:/etc/wordpress$ sudo cp config-localhost.php config-***.***.***.php
susumuis@instance-1:/etc/wordpress$ sudo chown www-data config-***.***.***.php
susumuis@instance-1:/etc/wordpress$ cd /usr/share/wordpress/
susumuis@instance-1:/usr/share/wordpress$ sudo chown www-data . -R

これでどやー!!

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

なんか動きました。うわースタイルシートとかあたってなくて全然ガタガタですね。でもこれは確かにwordpressです!

ログがここで切れてるので、ここでおしまいです。 ということで、えらいはまりながらも、なんとかGCE上にwordpressを動かすことが出来ました。手順がわかったので今度はもう少しちゃんとやり直して見たく思います。

ここまで長い間お付き合いいただき有難うございました。

蛇足、このエントリはAtomで書きました

このエントリの原稿はベータテスト中のAtomエディタでmarkdown記法を使って書いてみました。 Atomエディタはmarkdownをリアルタイムプレビューしながら記述できて便利です。 まだ日本語の扱いなど難点がありますが、エディタとしては結構使い物になるように思います。これからも使ってみようと思います。