diff --git a/docs/guide-ja/README.md b/docs/guide-ja/README.md index c567ad1..121156f 100644 --- a/docs/guide-ja/README.md +++ b/docs/guide-ja/README.md @@ -2,18 +2,19 @@ Yii 2 Twitter Bootstrap エクステンション ======================================== このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 3](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています) に対するサポートを提供します。 -Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント側の開発プロセスを大いにスピードアップすることが出来るものです。 +Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。 Bootstrap のコアは二つの部分によって表されます。 -- CSS の基礎。例えば、グリッドレイアウトシステム、タイポグラフィ、ヘルパクラス、レスポンシブユーティリティなど。 -- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダルボックス、タブなど。 +- CSS の基礎。例えば、グリッド・レイアウト・システム、タイポグラフィ、ヘルパ・クラス、レスポンシブ・ユーティリティなど。 +- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダル・ボックス、タブなど。 始めよう -------- * [インストール](installation.md) +* [アセットのセットアップ](assets-setup.md) * [基本的な使用方法](basic-usage.md) 使用方法 @@ -21,7 +22,7 @@ Bootstrap のコアは二つの部分によって表されます。 * [Yii ウィジェット](usage-widgets.md) * [Html ヘルパ](helper-html.md) -* [アセットバンドル](asset-bundles.md) +* [アセット・バンドル](asset-bundles.md) 追加のトピック -------------- diff --git a/docs/guide-ja/asset-bundles.md b/docs/guide-ja/asset-bundles.md index ccfbe93..1eb2142 100644 --- a/docs/guide-ja/asset-bundles.md +++ b/docs/guide-ja/asset-bundles.md @@ -1,13 +1,13 @@ -アセットバンドル -================ +アセット・バンドル +================== -Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンドソリューションです。 -Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションはアセットバンドルをいくつかに分けて提供しています。 +Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンド・ソリューションです。 +Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションはアセット・バンドルをいくつかに分けて提供しています。 すなわち、 - [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。 - [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、javascript ファイルを含みます。 -- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、Bootstrap のデフォルトテーマの CSS を含みます。 +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、Bootstrap のデフォルト・テーマの CSS を含みます。 個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。 CSS のスタイルだけが必要なのであれば、[[yii\bootstrap\BootstrapAsset]] だけで十分です。 diff --git a/docs/guide-ja/assets-setup.md b/docs/guide-ja/assets-setup.md new file mode 100644 index 0000000..9e9ffa8 --- /dev/null +++ b/docs/guide-ja/assets-setup.md @@ -0,0 +1,236 @@ +アセットのセットアップ +====================== + +このパッケージは、アセットのインストールについて、[Bower](http://bower.io/) および/または [NPM](https://www.npmjs.org/) のパッケージに依存しています。 +このパッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。 + + +## asset-packagist レポジトリを使う + +[asset-packagist.org](https://asset-packagist.org) を Bootstrap アセットのソース・パッケージとしてセットアップすることが出来ます。 + +あなたのプロジェクトの `composer.json` に下記の行を追加して下さい。 + +```json +"repositories": [ + { + "type": "composer", + "url": "https://asset-packagist.org" + } +] +``` + +そして、アプリケーション構成で `@npm` と `@bower` を設定します。 + +```php +return [ + //... + 'aliases' => [ + '@bower' => '@vendor/bower-asset', + '@npm' => '@vendor/npm-asset', + ], + //... +]; +``` + + +## composer アセット・プラグインを使う + +次のコマンドを使って [composer アセット・プラグイン](https://github.com/francoispluchino/composer-asset-plugin/) をグローバルにインストールします。 + +``` +composer global require "fxp/composer-asset-plugin:^1.4.0" +``` + +Yii を使ってアセットを発行したい場合は、あなたのプロジェクトの `composer.json` に下記の行を追加して、インストールされるパッケージが置かれるディレクトリを設定します。 + +```json +"extra": { + "asset-installer-paths": { + "npm-asset-library": "vendor/npm", + "bower-asset-library": "vendor/bower" + } +} +``` + +これで、`composer install/update` コマンドを実行すると、Bootstrap のアセットを取得することが可能になります。 + +> Note: `fxp/composer-asset-plugin` は asset-packagist に比べると、`composer update` コマンドを著しく遅くさせます。 + + +## Bower/NPM クライアントを直接に使う + +Bower または NPM のクライアントを直接に使って Bootstrap のアセットをインストールすることが出来ます。 +あなたのプロジェクトの `package.json` に次の行を追加して下さい。 + +```json +{ + ... + "dependencies": { + "bootstrap": "3.3.5", + ... + } + ... +} +``` + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "bower-asset/bootstrap": ">=3.3.0" +}, +``` + + +## CDN を使う + +[公式 CDN](https://www.bootstrapcdn.com) から Bootstrap アセットを使うことが出来ます。. + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "bower-asset/bootstrap": ">=3.3.0" +}, +``` + +'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。 + +```php +return [ + 'components' => [ + 'assetManager' => [ + // バンドルをオーバーライドして CDN を使う + 'bundles' => [ + 'yii\bootstrap\BootstrapAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7', + 'css' => [ + 'css/bootstrap.min.css' + ], + ], + 'yii\bootstrap\BootstrapPluginAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7', + 'js' => [ + 'js/bootstrap.min.js' + ], + ], + 'yii\bootstrap\BootstrapThemeAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7', + 'css' => [ + 'css/bootstrap-theme.min.css' + ] + ], + ], + ], + // ... + ], + // ... +]; +``` + + +## .less ファイルからコンパイルする + +Bootstrap CSS ソースを直接にカスタマイズしたい場合、*.less ファイルから CSS をコンパイルしたいと思うことがあるでしょう。 +そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールすることは合理的ではありません。 +なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。 +Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、例えば `assets/source/bootstrap` フォルダに置かなければなりません。 + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "bower-asset/bootstrap": ">=3.3.0" +}, +``` + +'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドし、CSS ファイルのためのコンパイラを指定します。 + +```php +return [ + 'components' => [ + 'assetManager' => [ + // *.less ファイルのためのアセット・コンバータを設定する + 'converter' => [ + 'class' => 'yii\web\AssetConverter', + 'commands' => [ + 'less' => ['css', 'lessc {from} {to} --no-color'], + ], + ], + // バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う + 'bundles' => [ + 'yii\bootstrap\BootstrapAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + 'css' => [ + 'css/bootstrap.less' + ], + ], + 'yii\bootstrap\BootstrapPluginAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + ], + 'yii\bootstrap\BootstrapThemeAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + ], + ], + ], + // ... + ], + // ... +]; +``` + + +## .sass ファイルからコンパイルする + +Bootstrap CSS ソースを直接にカスタマイズしたい場合、*.sass ファイルから CSS をコンパイルしたいと思うことがあるでしょう。 +そのための *.sass ファイルは [Bootstrap ported from Less to Sass](https://github.com/twbs/bootstrap-sass) から得ることが出来ます。 + +そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールすることは合理的ではありません。 +なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。 +Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、例えば `assets/source/bootstrap` フォルダに置かなければなりません。 + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "bower-asset/bootstrap": ">=3.3.0" +}, +``` +'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドし、CSS ファイルのためのコンパイラを指定します。 + +```php +return [ + 'components' => [ + 'assetManager' => [ + // *.sass ファイルのためのアセット・コンバータを設定する + 'converter' => [ + 'class' => 'yii\web\AssetConverter', + 'commands' => [ + 'scss' => ['css', 'sass {from} {to} --sourcemap'] + ], + ], + // バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う + 'bundles' => [ + 'yii\bootstrap\BootstrapAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + 'css' => [ + 'css/bootstrap.scss' + ], + ], + 'yii\bootstrap\BootstrapPluginAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + ], + 'yii\bootstrap\BootstrapThemeAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap', + ], + ], + ], + // ... + ], + // ... +]; +``` diff --git a/docs/guide-ja/basic-usage.md b/docs/guide-ja/basic-usage.md index 7d183de..e86066c 100644 --- a/docs/guide-ja/basic-usage.md +++ b/docs/guide-ja/basic-usage.md @@ -3,7 +3,7 @@ Yii は bootstrap の基礎を PHP コードでラップすることをしていません。 なぜなら、この場合の HTML コードがそれ自体として非常にシンプルだからです。 -bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメントウェブサイト](http://getbootstrap.com/css/) で見ることが出来ます。 +bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメント・ウェブ・サイト](http://getbootstrap.com/css/) で見ることが出来ます。 それでも、Yii はあなたのページに bootstrap のアセットをインクルードするための便利な方法を提供しています。 `@app/assets` ディレクトリに配置されている `AppAsset.php` に一行を加えるだけで大丈夫です。 diff --git a/docs/guide-ja/helper-html.md b/docs/guide-ja/helper-html.md index 9ba2997..f028fbd 100644 --- a/docs/guide-ja/helper-html.md +++ b/docs/guide-ja/helper-html.md @@ -10,7 +10,7 @@ Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルト - `icon()` - Glyphicon のアイコンのレンダリングを可能にする - `staticControl()` - フォームの "static controls" のレンダリングを可能にする -[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビューファイルの中で両方を使う必要はありません。 +[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。 例えば、 ```php diff --git a/docs/guide-ja/topics-less.md b/docs/guide-ja/topics-less.md index 2420061..29f1460 100644 --- a/docs/guide-ja/topics-less.md +++ b/docs/guide-ja/topics-less.md @@ -3,7 +3,7 @@ Bootstrap の .less ファイルを直接に使う あなたが [Bootstrap CSS をあなたの less ファイルに直接含める](http://getbootstrap.com/getting-started/#customizing) ことを望む場合は、オリジナルの CSS ファイルがロードされないように無効化する必要があります。 [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] の `css` プロパティを空に設定することによって、そうすることが出来ます。 -そのためには、`assetManager` [アプリケーションコンポーネント](https://github.com/yiisoft/yii2/blob/master/docs/guide-ja/structure-application-components.md) を以下のように構成します。 +そのためには、`assetManager` [アプリケーション・コンポーネント](https://github.com/yiisoft/yii2/blob/master/docs/guide-ja/structure-application-components.md) を以下のように構成します。 ```php 'assetManager' => [ diff --git a/docs/guide-ja/usage-widgets.md b/docs/guide-ja/usage-widgets.md index d74ca56..6d113d6 100644 --- a/docs/guide-ja/usage-widgets.md +++ b/docs/guide-ja/usage-widgets.md @@ -27,7 +27,7 @@ Yii ウィジェット 例えば、[[yii\bootstrap\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。 このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。 -特定のボタンクラスを指定するだけで十分です。 +特定のボタン・クラスを指定するだけで十分です。 ```php echo Button::widget([