SimplicityにCSS Frameworkを導入してみる

前置きとして、別にそのままでも何ら問題はないSimplicityですが、色々と手を加えたくなる素材でもあります。現在進行中でもあるメイン画面をフリップさせるうんぬん、それに伴ってサイドバーが動かなくなったことの修正などに手を付けているわけですが、ついに大掛かりな所に手を付けてしまいました。

そうそれが、CSS Frameworkを導入してみると言うことだったんです。

例えば自分が何かしらのサイトを作るとしたら、やはり何かしらのCSS Frameworkを入手してからやり始めます。それぐらいに簡単なんです。特にレイアウトやらでサイズを勝手にそろえてくれるし勝手に計算してくれるしで、とても便利です。まだこのサーバーのWordpressには導入してませんし、画像だけでちょっとだけして見せられないぐらいしかできてないんですが、もしかして誰か同じようなことを考えている人がいるかも知れないということで書いている次第です。

Screenshot_from_2014-11-21 20:52:18
これは製作途中でのChromiumの画面ですハイライトを付けた所を見て頂いたらわかるように、localhostの文字が!!
そして、今回CSS Frameworkに選んだのは、記述が比較的簡単で色々できそうなFurattoです。

どこから書き始めたらいいのかあまりまとまってないんですが、ひとまずFurattoから説明してみようかと思います。

Furatto

このCSS Frameworkは色々見た中で、書き方が結構簡単なのと、自分では使ってませんがSass & Compassで色々いじれるような感じになっております。
Sassってのは凄いCSSと言う感じのものです。変数が使えたり、面倒なベンダープレフィックス自動付与や、あるいはコードの再利用ができたりして痒い所に手が届くと言うようなものです。
Sassを使おうとするとRubyの環境がいるのですが、linuxやmacなら極簡単に導入することができます。あるいは最初から入ってます。簡単なのは導入だけかも知れませんけども。で、通常はCUI、つまりコマンドラインから何かしらのコマンドを入れてSassで書かれたものをコンパイルしてCSSにするわけです。最初からブラウザがSassを理解してくれたらいいんですが、ひとまずは仲介する何かしらがいるということですね。

で、GUIは甘えなんて言う人もいますが、ボタンひとつで色々できる例えばKoaraなんてソフトは有名です。このソフトは、SassだけではなくLessもCompassもCoffeeScriptもサポートしてます。最新の現場で飛び交うような言葉ばかりですが、凄いCSSと凄いJavascriptを扱えると思ってもらえばいいんじゃないでしょうか?

こういうのがサクっと使えるようになるともっと深く色々とできるようになりますが、使えなくても問題はありません。なんせFurattoはCSSとJavascriptで提供されてますから。その基本となる部分を拡張して行ったり、更に手を加える時にあると便利なのがこれら聞きなれない言葉のモノたちです。

他のFrameworkでは、例えばcolumnをいくつか作る時、one、two、three・・・sixsteenなどと英語表記で16カラムのクラスがつけてあったり、まぁ12カラムだったり色々ありますが、とにかくその英語表記の場合、コード手打ちだとその内にスペルを間違えるとか、わかりづらい部分もあったりするわけです。
Furattoはcol-1〜col12ととてもわかりやすく、レスポンシブでシンプル軽量なFrameworkにはあまり付いていないUIの部分、例えばナビゲーションバーとかいろんな機能がはじめから付属していて簡単に始めことができます。HTML Kickstartの様に比較的簡単に使うことができます。HTML Kickstartはギターを弾き語れ!でも使っております。

Furattoの問題としては古いブラウザに対応していないことぐらいです。古いと言ってもIEとかでしょうからどうでもイイ部分ではあります。まぁどうせIE11とかでも他のブラウザとは別の仕様を考えないといけないこともありますし、最初から対応もしなくてもいいよと自分では思っています。

Simplicityのように、ヘッダがあって、記事が左側、右にサイドバーその下にフッターがあってと言うサイトなら上の構造でできてしまいます。もちろん中身も色々していかないといけませんし、レスポンシブである程度の大きさになれば勝手に対応してくれるとは言え、手を入れなければならない部分は結構ありますがこれぐらい簡単にできてしまうわけです。

もし仮に、メイン記事の部分になるclass.col-8の中に更に何かしらカラムを入れていくとすると、col-8の幅を100%と見立てて、中を更に12分割します。例えば、

このような仕組みにすれば、col-8の中は50%幅と50%幅のカラムができるということです。Frattoは12カラムで最大なので50%はcol-6です。その下に100%幅のカラムを入れたいと思えばcol-12とすればよいです。とても簡単ですね。導入方法はダウンロードしたdistにあるCSSとJSの中身から、通常使う場合は、normalize.cssとfuratto.min.css,furatto.min.jsを任意の場所に入れてリンクするだけです。他にも色々と入っていますが、先に書いたSassなどで使うファイル等です。

SimplicityにCSS Frameworkを導入するには

ご存知のようにSimplicityのアップデートは頻繁に行われます。そのため、親テーマを変更してしまうと更新によって再度やり直さなければいけなくなりとてもアップデートについていけません。これは僕も色々考えていてどうすればバージョンを上げても対応できるか調べたりもしてましたが、もう強引にjQueryで書き換えると言う方向にしました。するとある程度はアップデートについていけるのではないかと思うわけです。

Simplicityの構造が今後、例えば機能を追加していくだけで大きく構成が変わらないとすれば、いわゆる子テーマのようにあるいはスキンのようにして親テーマのCSSを利用しないやり方で対応できます。ただし全部を無効にしようとすると色々大変なので、親テーマの例えばSNSボタンはそのまま流用して、必要な部分は子テーマの方で同じCSSを上書き変更して利用します。

最初にやることは、子テーマのCSSの最上部にある、

@import url(“../simplicity/style.css”)

これをコメントアウトして無効にします。すると基本的な親テーマのスタイルは無効になります。レスポンシブの機能やSNSのボタンのCSSは必要であれば使えば良いと言う感じです。つまり、sns.cssやresponsive.cssとかですね。
親テーマのcssと一緒に親テーマのjavascript.jsも場合によっては一部コメントアウトして利用できないようにします。後から必要な部分だけ使うというのでも良いです。ただCSS Frameworkを使用するのであればたいていはレスポンシブ対応でモバイル用のメディアクエリなど用意されているでしょうから、不要なものは使わない方向でもいいかも知れません。

CSSは無効にしてもレイアウト自体はPHPで出力されますから、F12などからwebの開発できる準備をしてどのIDやClassに何が当てられているかを順番に見るしか無いんですけども、変更すべき場所は言うほど多くはありません。ただ色々と変更する必要があるのでそれをまずちょっとだけ。

仕組みとして簡単なのはfooterの部分です。大きなブロックの中に、ウィジェットが3つ入って、一番下にコピーライトが入るだけの構成ですからフッターあたりを練習台に。

その前にどうすればCSS Frameworkのclassやらの指定をSimplicityに渡すかですが、自分はこんな感じのスクリプトを子テーマのjavascript.jsに書きました。

再度書いておきますがjQueryでタグを書き換えるため一瞬最初にcssが適用されるのにチラツキみたいのがあります。

色々考慮しているスクリプトではないので必要があれば書き直さないといけません。使い方としては、tags.changeの場合、タグそのものを書き変えます。Simplicityで適用されているタグが例えば、

<div id=”footer” class=”xxxx”>

とあった場合で仮に

<footer class=”xxx”>

と書き変えたい場合、tags.change(“#footer”,”footer”,null,”xxx”);と言うような書き方にします。関数的には、クラスを追加するaddClassとaddId、delnextとひとまず3つ用意してあります。addClassはjQueryのaddClassと同じ働きをしていますが書き方を統一するために付け加えています。addIdも同じです。delnextは例えばfooter.phpを見て頂いたらわかるように、<div class=”clear”></div>と言うのがあります。コピーライトの前ですね。
これを無効にするのは案外大変なので、タグ自体を削除します。と言ってもphp自体を変更しているのではないので、上記javascript.jsの該当部分をコメントアウトしたら復活します。

消す方法としてはfooterの中のclass=”clear”を探せば消せるんですけど、感覚的に、#xxxの次のやつみたいな感じで指定できるようにしてます。仮に同じブロックの中にclass=”clear”がいくつかあって全部消えるとマズイ場合に利用できるようにするためです。

上記設定でインデントしてかき分けていますが、どのパートで何をしているかを並べているだけです。tagsで色々変更できない部分は直接書き変えたりしていますがだいたい上記で大まかに8割方書き変えられているだろうと思います。
ちなみに使用するframeworkにあわせて追加するclassや書き換える場所が変わってくると思うので、ここらは直さないといけないと思います。
frameworkのclassやらが追加できて、構造的に修正ができたら、後は子テーマのstyle.cssで細かな修正をしていきます。

ローカル開発環境を作る

さて、frameworkで書き換えができるようになったとしても、例えば本番のサーバーでいちいち書き変えて試していては大変です。そこでローカルサーバーを作ったりしてテスト環境を作ってみたりしました。

前にも少し触れた、nginxを今回はサーバーとして導入しました。nginxについて詳しくはこちらのサイトで。
これまでapache2を入れていましたが新しいもの好きなので入れてみたわけです。まだチューニングが済んでないのでアレですけど、それでもapacheよりレスポンスが良い気が・・・しないでもない。個人環境ではapacheで十分ですが、何万人とかが色々何かするような環境だとnginxが良いみたいで、本当かどうかは知りませんがリバースプロキシやら色々とチューニングしてapacheの50倍で動作するとか。

ちなみにlinux、apacheとmysql、PHP、のそれぞれの頭文字をとってLAMP環境とかと言いますが、nginxの場合は、lemp環境と言うみたいです。エンジンエックスですから、Nが頭文字ですけどEを当ててるんでしょうね。lnmpとか読めませんしね(笑)
linuxの場合は、ターミナルからインストールするだけなんですが、英語ですけどこちらの記事がとてもわかり易かったのでかなり参考にしました。ちなみに使用しているlinuxはlinux mint 17です。

windowsでももちろんそれぞれを入れたらいけますが、色々と設定がアレなのでPC以外は無料ですからcore2duoぐらいのPCを安く買ってきてサーバーにすると色々捗ると思います。sambaを入れてファイルサーバーとか、案外アリかも知れません。

同じような内容ですけどこちらも結構、参考になりました。また日本のサイトでは、CentOSですがこちらもなかなかわかりやすかったです。

自分的にはソフトも豊富でubuntuの豊富なtipsもたくさんあるlinux mintをオススメしますが、CentOSもRedHat系ではかなり良いのではないでしょうか?通は、ArchLinuxとかなんでしょうけども。

ちなみに、nginxで入ってるモジュールを確認するのは、
>nginx -V
動作してるかテストするには、
>nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
これがでなくて、failが表示される場合はsudoを付けてやってみる。たいていは権限がなくてファイルにアクセスできないからと言うことらしい。

WordPressのテスト環境を作るのであれば、OS:linux、サーバー:apacheとかnginx、データベース:mysql、PHPは実際に使う環境に合わせてバージョンを選べばいいけど、たいてい最新版で大丈夫なのではないかと思います。Wordpressのコアを触るわけではないのでいわゆる自分のサイトのテストぐらいなのであれば最新版にしておいても問題ありません。
プラグインやらでキャッシュをいじるようなものを作りたい場合はある程度同じようにしておかないと正しく動いているのかどうかの判断ができにくいでしょうから、そういう場合は合わせていくという感じで。
その時にはサーバーも若干設定を変える必要がありますが、そのあたりはできる範囲で。

ちなみにローカル環境ができると、ftpの転送速度に驚くはずです。あ、そういやftpについて書いてないけど、vsftpdとかで色々検索してみて下さい。要は、サーバーにファイルを送る時に仲介するソフトです。直接サーバー内のwordpressやらをおいているファイルを編集しても良いですがftpにすることで簡単なバックアップが取れるという感じです。あと、サーバー内のフォルダはftpを使うユーザーとルートだけがアクセスできるようにしておくとかとやっておくとセキュリティ的にもよろしいかと。
そもそも公開するためのサーバではないのでセキュリティうんぬんはアレですが、例えば会社などの社内で使うサーバーとして使う時でもWindowsみたいに、誰でもがそのフォルダにアクセスできるようなのは、改ざんやら色々させる仕組みを提供しているようなものです。そのフォルダにアクセスできるのは全員ができてもファイルの書き換えはAさんとBさんしかできないとしておけば、何かあった時ABさんどちらかが犯人ということです。
まぁスーパーハッカーみたいのが社内にいるかも知れませんけどね。で、そこまでする必要はないにせよ、ftpを利用するのには指定されたユーザーしか使えないと言う制限もできますから導入するのが良いと思います。パーミッションを変えたり色々できますから便利です。

エディター等

これまで、何かしらweb関係のものを作る時はたいてい手打ちでしたが、まぁとにかく打ち間違いがあったり、セミコロンが抜けてたとか極簡単なミスでありながら単純すぎて見つけにくいエラーとかが結構あったりしたわけです。できあがったものをFTPソフトでアップロードするのも手間でしたし。

そこで今回は、aptana3を導入することにしました。
こちらもまだ色々と設定してない素の状態に近い環境なので面倒といえばそうなのですが、エラーの発見や、普通のテキストエディターにはない便利な機能もあったりして結構面白がって利用しています。

ちなみにlinuxでaptanaをインストールする時は、ダウンロードしてきたのをアーカイブマネージャーで開いて、その中にあるAptanaStudio3.shに権限を与えてから、端末あたりで実行するだけです。権限はコンソールからchownでもいいですけど、ダウンロードしたということは所有者は自分になってますから、普通なら右クリックしてプロパティーからパーミッションに開いて、実行の部分を「プログラムとして実行可能にチェック」を入れればダブルクリックで動作するはずです(linuxmintあるいはubuntuでもそうだろうと思う)。windowsなら普通にexeだったりをダブルクリックでしょうね。

細かくはこちらのサイトなど良いのではないでしょうか?

「GUIから簡単に起動するようにすると言う」所で書いてあるパスはウチでは

sudo nano /usr/share/applications/apturl_mime.desktop

でした。nanoの部分はgeditでもお好きなエディターで。やることは同じでもこういったパスの違いで悩むことがあったりしますよね。windowsに比べて英語圏ではたくさんの情報があるのでしょうが、日本ではあまり自分の環境に合う説明がなくていろいろ試しながらやるしか無いんですよね。たいていは大丈夫でも、アレな時もありますからね。ほらアレですよ、もう一度OSのインストールからとかのアレ。
そういうのは稀ですけど、たまにあるから恐ろしい。データは外部に保存しときたいものです。

Aptanaはeclipsからweb寄りに対応したというようなIDEです。環境さえ整えばPHPやその他のデバッグもできます。zenコーディングやらもできます。rubyやらの開発環境もいけますし、IDEにコンソールが内蔵されているので先に書いたSassなどもすぐにコンパイルできたり色々できます。
テキストエディターから比べたら格段に高性能ですが、その分やや重いです。最近のPCなら大丈夫でしょうがcore2Duoぐらいでは動作自体は重いわけではないにしろ、頻繁にHDDにアクセスするような時があったりします。Chromeで10個近くウィンドウ開いてるよりはマシですけども。

日本語化はこちらのサイトを参考に。たいていどのサイトでも日本語化に関しては同じようなことが書かれているはずです。

実際、件名にもあるcss frameworkをsimplicityに適用したり改造する時間よりも、環境を作っている時間の方が圧倒的にかかりました(笑)
そしてそれはまだしばらく続くのです(ΦωΦ)