はてなブログの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を入れました。
その他参考にしたページ
- CSSで計算式を可能にするcalc()ファンクション|Web制作 W3G
marginにマイナス値を入れるテクニックとかも、これを使えば不要になるかもしれません。IE8を切れるなら使っても良かったかもしれないです。
- 日付のために左の列を使ってしまっているのは確かにもったいないと思うんでやってみたいです。
ただ、横幅が十分にある場合は今のままで良いので、レスポンシブルでできたらベストだと思いますので、いずれ挑戦してみたいです
はてなブログデザインカスタマイズの解説。WEBデザインのノウハウも詳しく解説。 - showrtpath - iPhone,iPadウェブブラウザアプリ開発ブログ
- さらに頑張ればここまでカスタマイズできるようです。
言い訳
僕はHTMLコーダーでもWebデザイナーでもないので、見よう見まねと当てずっぽうでCSSを書いていますので適切でない書き方ではないかもしれません。もしもっと良い書き方があればコメントいただければ有り難く思います。
追記
リキッドにしたら、落ち着かない感じになったように感じます。
日常のものはそんなふにゃふにゃしないからと考えれば当然ですね。
@susumuis Web画面でいうと、文章とかならレイアウトを動的に決めるんでもまあいいんだけど、ツール(アプリ)としての画面ならコロコロ変わられると道具としての使い勝手に差し障ると感じてます。コンテンツは情報つまり「初めて見る」事に価値が有るけど、ツールは「何度も見る」価値。
— 非実在naka aki (@naka_aki_spl) 2014, 5月 6
よく見ると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円!安い!)
- 作者: フニゲ
- 発売日: 2014/01/09
- メディア: Kindle版
- この商品を含むブログを見る
書いたプログラムの内容はこの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
を外しています。
これで、かろうじて開発できるようになったのですが、これはこれで、残念な開発環境でした。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です。
別に、Web業界で大人気のSublime Textでも良かったんですが、JavaScript書くなら相性が良さそうな気もしますし、今後活用して行こうと思います。
会場にいた人にどんなエディタ使っているのか聞いたところ、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」なんてのを繰り返してたら、思ったより楽しいゲームができてしまったとか、そういうの良いですよね!
ピアノなんかと同じです。プロになろうとすると大変ですが、趣味でゲームプログラミングをする。へたくそで良いんです。楽しめれば。
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.php
かhttp://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
これでどやー!!
なんか動きました。うわースタイルシートとかあたってなくて全然ガタガタですね。でもこれは確かにwordpressです!
ログがここで切れてるので、ここでおしまいです。 ということで、えらいはまりながらも、なんとかGCE上にwordpressを動かすことが出来ました。手順がわかったので今度はもう少しちゃんとやり直して見たく思います。
ここまで長い間お付き合いいただき有難うございました。
蛇足、このエントリはAtomで書きました
このエントリの原稿はベータテスト中のAtomエディタでmarkdown記法を使って書いてみました。 Atomエディタはmarkdownをリアルタイムプレビューしながら記述できて便利です。 まだ日本語の扱いなど難点がありますが、エディタとしては結構使い物になるように思います。これからも使ってみようと思います。