この記事では、omakeフォルダ内に同梱している、gulpについての説明をしています。

※このファイルだけではgulpは動作しません。あらかじめ、gulpを動かすためのnode.jsをインストールしてから、gulpをお使いのパソコンにグローバルインストールする必要があります。npm install --global gulp と入力することでgulpをグローバルインストールできます。

以上の設定が、管理画面、site2015テーマ、blog2015テーマに用意されています。

LESSについて

管理画面内で使用しているacms-admin.cssや、CSSフレームワークとして配布しているacms.cssのLESSは、/themes/system/less/ に用意しています。

Scssについて

管理画面内で使用しているacms-admin.cssや、CSSフレームワークとして配布しているacms.cssのScssは、とくに gulpfile.js を使わなくてもScssとして利用できるように、/omake/scss/ にて用意しています。

CSSについて

LESSからコンパイルした管理画面およびCSSフレームワークのCSSは、/themes/system/css/ に、site2015テーマやblog2015テーマで使用しているものは/themes/各テーマ名/css/内に用意しています。

gulpfile.jsおよびpackage.jsonをphpフォルダやthemesフォルダが設置してあるディレクトリと同じ位置に設置します。

お使いになるときは、ターミナルでgulpfile.jsおよび、package.jsonが設置してあるディレクトリに移動し、package.jsonの「devDependencies」に記述しているプラグインを npm install と入力し、インストールしてください。「devDependencies」に記述しているバージョンとは異なったバージョンをインストールされた場合、動作が正常に行われない場合があります。

エイリアス機能を使うとブログ単位で、別のURLでも同じブログを指すことができるようになります。 ここでは、実際の利用例を交えてエイリアスの使い方を紹介したいと思います。

エイリアスの作成

管理ページ > エリアス に移動し「エイリアスの作成」ボタンを押します。

例えば、http://example.com というサイトがあった場合に以下のようなエイリアスが設定されている場合があったとします。

• ドメイン = example.com
• コードネーム = en

この場合、以下２つのURLは全く同じブログを参照するようになります。

• http://example.com
• http://example.com/en/

利用例-1 IPアドレスでのアクセス

公開前のサイトで、本番ドメインに切り替えた場合、DNSがまだ切り替わっていないと表示させる事ができません。（a-blog cmsでは設定されているドメインでしか表示できない為）

hostsファイルなどを設定する事により、そのマシンからは表示する事ができるようになりますが、マシンごと設定が必要です。

そこでエイリアス機能を使い、エイリアスのドメインにwebサーバのグローバルIPアドレスを設定します。 これにより、IPアドレスでもサイトが表示できるようになるので、簡単に表示確認できるようになります。

＊ 独自ドメインなどは、特別なライセンスがないと設定できませんが、IPアドレスはどのライセンスでも自由に設定できるようになっています。

利用例-2 共有SSL/TLS

共用サーバーなどでSSL/TLS接続（https://...）を使う場合、そのサービス特有のドメインで独自ドメインが使えない場合があると思います。このような時にSSL/TLS接続用のドメインをエイリアスとして作成すれば共有SSL/TLSを使う事ができるようになります。

＊ a-blog cmsは基本的に最初に設定した基本ドメイン以外はエイリアスなどに設定できないようになっています。（ドメイン拡張オプションが必要）ただし、共用SSLは申請をすることにより、審査の上無料で共有SSL/TLSライセンスが手に入ります。

共有SSL/TLSドメインの例

• secure○○.sakura.ne.jp
• ○○.heteml.jp
• ○○.ssl-xserver.jp

これ以外にも共有SSLなら大丈夫ですので、 a-blog cms > マイページ > ライセンス購入・申請 > 共有SSLライセンスを申請から申請ください。

利用例-3 複数台サーバーで利用

a-blog cmsを管理用のCMSサーバを1台、表示用のCMSを1台のように複数台構成で動かす事があると思います。

• www. example.com 表示用のサーバー
• cms. example.com 管理用のサーバー（リクエスト制限）

この２つのサーバーは同じ内容をみているのですが、ドメインが違います。なのでエイリアスを使う事により両方で表示させる事ができます。

注意点として、管理ページはエイリアスを使用していても、基本ドメインでしか表示できないので、ここでいう cms. example.comを基本ドメインにして、www. example.comをエイリアスに設定してください。

＊ a-blog cmsを複数台構成で動かす場合、プロフェッショナル版以上のライセンスが必要となります。

Ver2.5.1より、管理画面で使っているacms-admin.cssおよびCSSフレームワークのacms.cssのLESSをScssに変換したものを、omakeフォルダで配布をしています。

場所は /omakes/scss/ です。ScssをCSSにコンパイルすると、LESSからコンパイルしたCSSと同じ内容のCSSがご利用いただけます。

もし、普段お使いのCSSプリプロセッサーがLESSではなく、Scssの場合、scssフォルダ内に入っているScssを使うことをお勧めします。たとえば、変数で管理されているボタンの色やメディアクエリーのブレイクポイントの変更を、変数を一箇所変更するだけで可能になります。

Scssファイルを読み込んでいる大元のファイル

• acms.scss
• acms-admin.scss

管理画面用のファイル

• acms-system.scss

mixin、変数をまとめたファイル

• variable.scss
• system-variable.scss
• mixins.scss

他、各パーツ用のファイルが用意してあります。

ScssをCSSにコンパイルするにはGUIツールを使って対応することもできます。 有名なものでは、以下のツールが挙げられます。

• Koala （無料・Windows/Linux/Mac対応）
• Codekit （有料・Mac対応）

omakeフォルダに同梱している、gulpfile.jsとpackage.jsonの設定をお使いください。