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

gulpフォルダ内のファイル一覧

• gulpfile.js
• package.json
• readme.txt

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

同梱しているgulpfile.jsにできること

• LESSのコンパイル
• LESSをScssへ変換
• Scssをコンパイル
• CSSを圧縮
• ライブリロード（ ※要Chromeのエクステンション）

以上の設定が、管理画面、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」に記述しているバージョンとは異なったバージョンをインストールされた場合、動作が正常に行われない場合があります。

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

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

使用方法

GUIツールを使う方法

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

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

gulpを使う方法

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

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

場所は、/omake/snippets/default_nostyle/ にて用意しています。

default_nostyleフォルダとは

default_nostyleフォルダに入っているのはacms.cssのクラス名なしのコードをまとめたスニペット集になります（※Ver.2.5.1より、リファレンスや管理画面内で用意しているスニペットはacms.cssのクラス名がすでに適応されているコードに変更されました）。

default_nostyleフォルダで用意しているEntry_List の例

<!-- BEGIN_MODULE Entry_List -->
<div>
<!--#include file="/admin/module/setting.html" -->
<ul>
	<!-- BEGIN entry:loop -->
	<li><a href="{url}">{title}</a></li>
	<!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_List -->

上記のコードのように、default_nostyleフォルダで用意しているスニペットには、クラスは適応されていません。

使い方

default_nostyleフォルダの使い方は自由となっておりますが、以下のような場面でご利用いただけます。

• acms.cssのクラス名が必要ないとき
• acms.cssのクラス名がないバージョンで、テキストエディターやスニペット管理アプリなどのスニペットを作りたいとき
• 管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

1つめ、2つめについてはご自由にお使いください。ここでは、3つめの「管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき」だけ方法をご説明します。

管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

/default_nostyle/の中のコード・フォルダ全てを /themes/使用中のテーマ/acms-code/snippets/ に移動してください。

srcフォルダについて

/omake/snippets/default_nostyle/ を見ると、/src/というフォルダが含まれています。こちらは、管理画面で使っているスニペットを表示するためのCSSとJSになるので、/src/フォルダも一緒に移動してください。

/src/フォルダの中にはsnipets.cssとsnippets.jsが入っている

管理画面＞コンフィグの順にページを移動し、Entry_Listのスニペットのテキストリンクをクリックすると、acms.cssのクラス名が外れているスニペットを参照できるようになっています。

クラス名が外れているEntry_Listのスニペット表示画面

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

場所は、/omake/snippets/SublimeText/ にて用意しています。

SublimeTextフォルダとは

テキストエディター SublimeText のデフォルトのスニペット機能で使用できる a-blog cms のモジュールやブロックのスニペットを配布しています。下記では、まだβ版ですが、利用者も多い SublimeText 3 の使用方法について説明しています。

用意しているスニペット

• ビルトインモジュール
• カスタムフィールド
• タッチモジュール
• IFブロック
• :veilブロック
• :loopブロック
• :emptyブロック
• BEGINブロックやENDブロックのみ

使い方

Macの場合は「~/Library/Application Support/Sublime Text 3/Packages/」 以下に、Windowsの場合は「C:/Users/ユーザー名/AppData/Roaming/Sublime Text3 /Packages」以下に、 「acms」「acms_field」「acms_if」「acms_module」「acms_touch」 の5つをフォルダごとコピーしてください。

※ /Packages/以下であればご自由に置いてください。たとえば、a-blog cms以外でもスニペットを使う場合は、「acms」というフォルダを作っておけば、他のスニペットと混ざることがなく管理しやすくなります。

フォルダへの移動方法

Macをお使いの場合

Macをお使いの場合、 ~/Library/Application Support/Sublime Text 3/Packages/ に移動するためには、Finderを開いて、「Shift + ⌘ + G」キーを押してください。そして、表示されたウィンドウの入力欄に「~/Library/Application Support/Sublime Text 3/Packages/」と入力し、「移動」ボタンをクリックしてください。

Windowsをお使いの場合

Windowsをお使いの場合は、Windowsのフォルダのアドレスに「%appdata%」と入力してからエンターを押し、まずは「C:/Users/ユーザー名/AppData/Roaming/」までアクセスします。「Sublime Text3」→「Packages」の順にフォルダを選択して移動してください。

動作確認

スニペットを各指定の場所に置いたら、SublimeTextに戻り、使用できるか確認します。「!acms:module」とタイプし、タブキーを押してください。

SublimeTextに「!acms:module」とタイプするとモジュールの項目がリストで表示される

画像のようなモジュールのリストが表示されます。好きなモジュールを選び、スニペットが展開されたら成功です。

今回配布しているスニペットには以下の設定が用意されています。

• !acms:module
• !acms:field
• !acms:touch

• !acms:if

• :veil

• :loop
• :empty
• !BEGIN
• !BEGIN_MODULE
• !BEGIN_MODULEid

加えて、各ビルトインモジュールについては「!モジュール名 (例： !Entry_List )」と記述することで呼び出すことも可能です。基本的には、モジュールIDも設定できるようになっていますが、不要であれば削除してください。