読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

sweet-styleguideで簡単スタイルガイド作成 その0002 sweet-styleguideの編集方法

はじめに

前回の記事「sweet-styleguideで簡単スタイルガイド作成 その0001 準備をする - MOTOMICHI WORKS BLOG」に沿って設定をした場合は、Apacheをstartした状態で、以下のURLにアクセスするとsweet-styleguideのサンプルページが表示されると思います。

以下はhttpd.confを編集していない場合

以下はhttpd.confを81に編集した場合

sweet-styleguideの編集方法は上記のURLページに表示されている内容をもとに説明していきます。

CSSを読み込む

まず編集する前に C:\xampp\htdocs\project1\app\View\Styleguides\index.ctp をコピーしてとっておくと安心です。

例として C:\xampp\htdocs\project1\app\webroot\css フォルダに example.css を配置します。

次に C:\xampp\htdocs\project1\app\View\Styleguides\index.ctp を編集します。

以下のように記述されている箇所があります。

//styleguide.cssを読み込み
echo $this->Html->css('styleguide');

その下に

echo $this->Html->css('example');

と追記して上書き保存したらCSSの読み込みは完了です。

JSを読み込む

JSも必要であれば読み込みます。

例として C:\xampp\htdocs\project1\app\webroot\js フォルダに example.js を配置します。

次に C:\xampp\htdocs\project1\app\View\Styleguides\index.ctp を編集します。

以下のように記述されている箇所があります。

//styleguide.jsを読み込み
echo $this->Html->script('styleguide');

その下に

echo $this->Html->script('example');

と追記して上書き保存したらJSの読み込みは完了です。

色テーブルの編集

色テーブルの情報が記述されているファイルを開く

まず編集する前に C:\xampp\htdocs\project1\app\View\Styleguides\index.ctp をコピーしてとっておくと安心です。

このindex.ctpを開くと、中に以下の画像のような箇所があります。

f:id:motomichi_works:20160802175351p:plain

色テーブルをひとつ増やす / 減らす

赤枠一つ分が、テーブル一つ分のデータなので、赤矢印のあたりにコピペしてファイルを上書き保存すると色テーブルが増えます。

「//」で始まる行はプログラムの動作とは関係ないコメント行ですが、テーブル一つ分のデータのまとまりがわかりやすいように書いています。

赤枠一つ分を削除して、ファイルを上書き保存すると色テーブルが減ります。

色テーブルの行をひとつ増やす / 減らす

黄緑枠一つ分が、テーブル行一つ分のデータなので、黄緑矢印のあたりにコピペしてファイルを上書き保存するとテーブル行が一つ増えます。

「//」で始まる行はプログラムの動作とは関係ないコメント行ですが、一行分のデータのまとまりがわかりやすいように書いています。

緑枠ひとつ分を削除して、ファイルを上書き保存すると、テーブル行一つ分が減らせます。

色テーブルの見出しと、色テーブルのセル内を編集する

水色枠内の文字列を編集してファイルを上書き保存すると、色テーブルの見出しや、セル内の表示内容が変化します。

このとき',を削除しないように気を付けてください。

モジュールテーブルの編集

モジュールテーブルを増やす / 減らす

C:\xampp\htdocs\project1\app\View\Elements\StyleguideTables にある zzz-block-name-0001 をこのフォルダ内でコピペして、ブラウザをリロードするとモジュールテーブルが増えます。

フォルダを削除するとテーブルが減ります。

このとき、フォルダ名がモジュールテーブルの見出しになりますが、日本語は文字化けしてしまうため、半角英数字、半角ハイフン(-)、半角アンダースコア(_)などでフォルダ名をつけてください。

モジュールテーブルの行を増やす / 減らす

例として、zzz-block-name-0001 の行を増減させます。

C:\xampp\htdocs\project1\app\View\Elements\StyleguideTables\zzz-block-name-0001\TableRows にある tr-sample--same.ctp または tr-sample--separate.ctp をコピペして、ブラウザをリロードするとモジュールテーブルの行が増えます。

このフォルダ内の.ctpファイルを削除すると行が減ります。

このTableRowsフォルダ内の.ctpファイルは任意の名前を付けてください。

モジュールテーブルを 廃止予定モジュールにする / 説明文を編集する

C:\xampp\htdocs\project1\app\View\Elements\StyleguideTables\zzz-block-name-0001\table.ctp を開くと中に以下の画像のような箇所があります。

f:id:motomichi_works:20160802182705p:plain

廃止予定モジュール表示にする

赤枠内をTRUEにすると廃止予定モジュール表示になります。
通常はFALSEに設定します。

$is_deprecated = TRUE;または$is_deprecated = FALSE;となります。

テーブルの説明文を編集する

説明文を編集するには、黄緑枠内を編集します。
<br>で改行します。

このファイルのファイル名を変更してはいけません。
ファイル名はtable.ctpのままで使用してください。

モジュールテーブルのセル内容を編集する

例として、C:\xampp\htdocs\project1\app\View\Elements\StyleguideTables\zzz-block-name-0001\TableRows\tr-sample--separate.ctp を編集します。

tr-sample--separate.ctp を開くと以下の画像のようになっています。

f:id:motomichi_works:20160802184809p:plain

赤枠内を編集すると説明文が変更できます。

黄緑枠内を編集すると、表示サンプルが変更できます。ここにはhtmlを記述します。

水色枠内を編集すると、テキストエリア内のコードサンプルが変更できます。

tr-sample--same.ctp について

さきほどの tr-sample--separate.ctp の場合は表示サンプル用のHTMLと、テキストエリア用のHTMLを分けて指定していました。

tr-sample--same.ctp はひとつ指定すると、表示サンプルとテキストエリアの両方に同じHTMLが適用されます。

好みや用途に合わせて二種類を使い分けてください。

projectを増やす

以下のページで前回ダウンロードした、sweet-styleguide-master.zip を展開し、中にあるproject1フォルダをhogeにフォルダ名変更します。

https://github.com/MotomichiWorks/sweet-styleguide

hogeフォルダを C:\xampp\htdocs に移動します。

ブラウザで以下のURLにアクセスします。

以下はhttpd.confを編集していない場合

以下はhttpd.confを81に編集した場合

hogeの部分は任意のプロジェクト名にしてください。