Recommended
More Related Content
What's hot
What's hot (20)
Similar to 世界の最前線！VagrantやWP-CLIなどで開発環境をパワーアップ！
Similar to 世界の最前線！VagrantやWP-CLIなどで開発環境をパワーアップ！ (20)
More from Seto Takahiro
世界の最前線！VagrantやWP-CLIなどで開発環境をパワーアップ！
- 2. 瀬戸 貴弘 Twitter ： WordPress暦： 2.6 からブログで使い始めました 自己紹介自己紹介 瀬戸 貴弘 （せと たかひろ） ＠as_chachamaru Facebook ： as.chachamaru 滋賀県のシステム会社に勤務のプログラマー
- 5. ・ Vagrant ・ WP-CLI ・ Sass ・ Grunt ご紹介するツールご紹介するツール
- 6. Vagrant
- 8. こんなことありませんかこんなことありませんか Windows Mac プログラマーAさん デザイナーBさん Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Apache 2.2.21 PHP 5.3.8 MySQL 5.5.16 チーム内で開発環境が異なる 私は動いたんだけど XAMPP MAMP
- 9. VagrantVagrant ならなら Windows Mac Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Vagrant Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Vagrant WindowsやMacなど ローカル環境に依存しない。 チーム内で開発環境が統一しやすい プログラマーAさん デザイナーBさん 同じもの
- 10. Aさん Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Xampp Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Windows Aさん CentOS 本番環境 開発環境では動いたんだけど 本番環境で動かない こんなことありませんかこんなことありませんか
- 11. VagrantVagrant ならなら Windows Aさん Nginx 1.7 PHP 5.5.1 MySQL 5.6.11 Vagrant PHP 5.5.1 MySQL 5.6.11 Aさん CentOS6.5 本番環境 OSやモジュール等を含めた開発環境 本番に近い環境が構築できる CentOS 6.5 Nginx 1.7
- 12. Windows Aさん PHP 5.5.1 MySQL 5.6.11 Aさん CentOS6.5 本番環境 Nginx 1.7 Nginx 1.7 PHP 5.5.1 MySQL 5.6.11 CentOS 6.5 WindowsやMac上で まるで別のマシンが動作するようかのように 仮想マシン VagrantVagrant ならなら
- 13. こんなことありませんかこんなことありませんか Aさん Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Xampp Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 Aさん プロジェクトA プロジェクトB Windows Apache 2.2.21 PHP 5.3.8 MySQL 5.5.16 プロジェクトごとに動作環境が異なる でも開発の動作環境は１つだけ
- 14. Aさん Windows VagrantVagrant ならなら プロジェクトA プロジェクトB CentOS 6.5 Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 CentOS 6.5 Apache 2.2.21 PHP 5.3.8 MySQL 5.5.16 複数の動作環境を構築できる プロジェクトごとに違う環境で動作可能
- 15. こんなことありませんかこんなことありませんか AさんAさん 新人さん 新PC Windows Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 XAMPP Node.js Ruby 他の開発環境 この環境作ってねこの環境作ってねこの環境作ってね また作るのか
- 16. 新人さん 新PC VagrantVagrant ならなら CentOS 6.5 Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 CentOS 6.5 Apache 2.4.4 PHP 5.5.1 MySQL 5.6.11 動作環境を どのように 作るか書か れた情報 設定ファイル 配布 Vagrantが解釈できる Vagrant解釈・自動構築 Vagrant解釈・自動構築 ※必要なファイルのDLなども
- 20. VCCWVCCW WP-CLI WordPressをコマンドラインで Grunt JavaScriptタスクランナー Composer パッケージ依存管理ツール WordPress i18n Tools 翻訳に関するツール PHPUnit テストに関するツール PHP_CodeSniffer コーディングスタンダードに準拠して いるかチェック Pre-installed tools
- 22. WP-CLI
- 26. wp core download --locale=ja WordPressWordPress 日本語 ダウンロード日本語 ダウンロード
- 27. wp-config.phpwp-config.php の生成の生成 wp core config --dbname=testing --dbuser=wp --dbpass=securepswd
- 29. WordPressWordPress インストールインストール wp core install --title=<title> --admin_user=<user> --admin_password=<pass> --admin_email=<mail>
- 31. プラグイン インストール・有効化プラグイン インストール・有効化 wp plugin install <plugin|zip|url> --activate
- 34. wp core download wp core config wp db create wp core install wp plugin install WordPressWordPress 日本語 ダウンロード日本語 ダウンロード wp-config.phpwp-config.php の生成の生成 データベースの作成データベースの作成 WordPressWordPress インストールインストール プラグイン インストール・有効化プラグイン インストール・有効化 一連の流れをまとめて行う処理を作って実行
- 36. Sass
- 40. nav { ul { margin: 0; padding: 0; list-style: none; } } nav ul { margin: 0; padding: 0; list-style: none; } ネストネスト(Nesting)(Nesting) CSS SASS 入れ子で記述する。HTMLのツリー構造が把握でき、 セレクタの追加や変更が容易になる。作業効率やメンテ ナンス性の向上になる。
- 41. nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ネストネスト(Nesting)(Nesting) CSS SASS
- 42. 変数変数 (Variables)(Variables) $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } SASS スタイルシート全体で再利用したい情報を格納する。変 数を使って色やフォントなどを一元管理できる。変更し たい場合に、スタイルシート全体を変更せずに一カ所の 変更で済むのでメンテナンス性が向上する。
- 43. 変数変数 (Variables)(Variables) $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } .body { font: 100% Helvetica, sans-serif; color: #333; } CSS SASS
- 44. ミックスインミックスイン (Mixin)(Mixin) @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } SASS 再利用する再利用するCSSCSS宣言のグループを作ることができる。ベ宣言のグループを作ることができる。ベ ンダープレフィックスの多いンダープレフィックスの多いCSS3CSS3では便利な機能。変では便利な機能。変 数も使える。数も使える。
- 45. ミックスインミックスイン (Mixin)(Mixin) @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } CSS SASS
- 47. Grunt
- 56. タスクを自動化したい！
- 63. まとめ
- 65. ありがとうございました。