Submit Search
Upload
タスクランナー導入 〜とあるWordPress制作環境〜
•
6 likes
•
2,506 views
Masaya Kogawa
Follow
HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド
Read less
Read more
Software
Report
Share
Report
Share
1 of 100
Download now
Download to read offline
Recommended
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。
About SnapKit - Open source lab -
About SnapKit - Open source lab -
Daisuke Yamashita
autolayout DSL library
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
2016年9月10日に開催された「a-blog cms in 札幌 x SaCSS」のエバンジェリストセッションのスライドです。a-blog cmsの投稿画面をカスタマイズする様々な方法を紹介しています。
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
第5回 業界中心会議でのLT予定資料です。 https://itmedia.smartseminar.jp/public/application/add/922
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
SaCSS(札幌コーディング勉強会) vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第9回の資料です。WordPressを利用している人がa-blog cmsを利用する際に注意すべき点や、投稿タイプの代替としてのカテゴリーの解説、表示条件を管理画面から変更するハンズオンを紹介しています。
Recommended
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。
About SnapKit - Open source lab -
About SnapKit - Open source lab -
Daisuke Yamashita
autolayout DSL library
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
2016年9月10日に開催された「a-blog cms in 札幌 x SaCSS」のエバンジェリストセッションのスライドです。a-blog cmsの投稿画面をカスタマイズする様々な方法を紹介しています。
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
第5回 業界中心会議でのLT予定資料です。 https://itmedia.smartseminar.jp/public/application/add/922
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
SaCSS(札幌コーディング勉強会) vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第9回の資料です。WordPressを利用している人がa-blog cmsを利用する際に注意すべき点や、投稿タイプの代替としてのカテゴリーの解説、表示条件を管理画面から変更するハンズオンを紹介しています。
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
DIST.2「Sass Again」発表資料
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その二
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
20120826 ec cube-handson
20120826 ec cube-handson
Masaki Takeda
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
v-kansai Vue.js/Nuxt.js meetup #7
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
a-blog cmsの「インポート機能」で差分インポートデータを作成する手順です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第8回の資料です。Movable Typeを利用している人がa-blog cmsを利用する際に注意すべき点や、コンテンツによるレイアウト変更、マルチサイトを実装するハンズオンを紹介しています。
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. アイコンとテキストが1pxズレてる...!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ 12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ 【jsで無理やりごにょごにょ編】 13. select要素をデザインするワザ 14. input[type=“file”]要素をデザインするワザ 15. ユーザーエージェントを利用してブラウザ&OSハックするワザ
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
Ito Kohta
Sails.jsのメリット・デメリット
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
WordCamp Tokyo 2015 LT
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
タカシ キタジマ
WP-D Fes #03 in GMO 2015年3月7日 懇親会LT
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。
More Related Content
What's hot
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
DIST.2「Sass Again」発表資料
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
html5jk 勉強会 #1 はじめての HTML5 アプリ開発 その二
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
20120826 ec cube-handson
20120826 ec cube-handson
Masaki Takeda
Vue.js + WordPress
Vue.js + WordPress
Takahiro Kudo
v-kansai Vue.js/Nuxt.js meetup #7
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
Seiko Kuchida
a-blog cmsの「インポート機能」で差分インポートデータを作成する手順です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第8回の資料です。Movable Typeを利用している人がa-blog cmsを利用する際に注意すべき点や、コンテンツによるレイアウト変更、マルチサイトを実装するハンズオンを紹介しています。
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. アイコンとテキストが1pxズレてる...!とかいうときに5秒で揃えるワザ 11. text-indent:-9999pxの上位互換的なワザ 12. デバイズごとに快適な閲覧をしてもらうために設定すべきviewportのワザ 【jsで無理やりごにょごにょ編】 13. select要素をデザインするワザ 14. input[type=“file”]要素をデザインするワザ 15. ユーザーエージェントを利用してブラウザ&OSハックするワザ
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
Ito Kohta
Sails.jsのメリット・デメリット
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
Hidetaka Okamoto
WordCamp Tokyo 2015 LT
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
What's hot
(20)
Sass実践編+Compass入門
Sass実践編+Compass入門
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
HTML5 アプリ開発
HTML5 アプリ開発
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
20120826 ec cube-handson
20120826 ec cube-handson
Vue.js + WordPress
Vue.js + WordPress
a-blog cmsのインポート機能を使いこなす
a-blog cmsのインポート機能を使いこなす
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
YARAIYA! Opendata with WordPress
YARAIYA! Opendata with WordPress
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Viewers also liked
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
タカシ キタジマ
WP-D Fes #03 in GMO 2015年3月7日 懇親会LT
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。
Bootstrap
Bootstrap
kenji goto
201409 ゼロから始めるWordPress勉強会 「Sass+Bootstrap+_sでテーマを作ろう」の中で使用したBootstrapについてのスライドです。 http://zerokarawp.com/ http://coedo-wordpress.doorkeeper.jp/events/14849
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
2014年9月 第14回ゼロから始めるWordPress勉強会「Sass+Bootstrap+_sでテーマを作ろう」&質問大会! でのプレゼン資料です。 Sassを説明しました。 CSSを直接書くよりも、Sassを使って書いてほうが楽にかけて、効率的です。 Sassは最初は理解しにくいかもしれませんが、直ぐに慣れてくるので、だんだんと効率よくWebサイト制作ができるようになります。 初級者の方がでもわかりやすいようにまとめました。 初級者に薦めるなら、次の6つが便利な機能だと思います。 1.構文の階層化 2.変数 3.親セレクタ参照 &(アンパサンド) 4.関数 5.四則演算 +、-、×、÷ 6.インターポレーション(差し込む、補間) 上記の6つの機能を使えるだけでも、かなり楽になります。 通常のCMSやホームページなどであれば、上記の6つの機能だけでも十分だと思います。 ★Windowsの場合は日本語に注意! フォルダ名、ファイル名で日本語はNG なので使わない。 [Decode error - output not utf-8] のエラーがでた場合は、以下の記事が参考になります。 http://cappee.net/coding/sublime-scss-compass-emmet Invalid Windows-31J character “\xE3” のエラーがでた場合は、以下の記事が参考になります。 http://frmmpgit.blog.fc2.com/blog-entry-34.html
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
2014年8月 WordBench東京8月勉強会「制作現場を爆速にする妙技をシェアしあおう!!」 「Bootstrap を使って効率よくオリジナルテーマを作る!」というテーマで話しました。 自分でオリジナルテーマを作りたくても、制作に時間がかかりすぎることがあります。 テーマ制作に、Bootstrapを使う理由とオリジナルテーマを作るときのポイントをシェアしようと思います。
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
WordCamp Tokyo2015ハンズオンスライド(配布版)
Viewers also liked
(6)
VCCW + Wordmove でデプロイが劇的に簡単になった話
VCCW + Wordmove でデプロイが劇的に簡単になった話
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Bootstrap
Bootstrap
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Similar to タスクランナー導入 〜とあるWordPress制作環境〜
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
日本マイクロソフト株式会社
株式会社 ゼンアーキテクツ 大平かづみ GitHub 上に展開される開発環境をブラウザや Visual Studio Code から接続し、あたかも手元で作業しているかのように利用できる GitHub Codespaces。手元のマシンスペックに影響されず、プロジェクトで共通の環境をオンデマンドで利用できるため、コーディングからレビュー、デバッグに至るまでシームレスに作業することができます。実際に GitHub Codespaces を用いて開発を進めたプロジェクトを例に、デモを交えてご紹介します。
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
日本マイクロソフト株式会社
フロントエンドエンジニアのみなさんに郎報です!いよいよ Azure にも SPA や JAM Stack に最適化なホスティングサービスが登場しました。このセッションでは、Build 2020 で発表されたばかりの Azure Static Web Apps について、このサービスの魅力や特長、そして活用方法のヒントなどについて、Azure MVP である三宅がフロントエンドエンジニアと Azure Geek 両方の視点から解説します。
オトナのDocker入門
オトナのDocker入門
Tsukasa Kato
オトナのプログラミング勉強会 2017/04/19
WordPress アカンパターン
WordPress アカンパターン
Kazue Igarashi
WordOnsen in 福島飯坂 2014のセッション「WordPress アカンパターン」のスライド
はじめての Azure 開発
はじめての Azure 開発
Yoshitaka Seo
Azure開発の基本的な操作手順の説明 技術ひろば.net 2010年3月に実施 2010年3月13日
AWSのElastic BeanstalkでWordPressを 構築レスで導入してみる。
AWSのElastic BeanstalkでWordPressを 構築レスで導入してみる。
Daigou Harada
2016/7/28 Rosso社内勉強会
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
loftwork
社内にエンジニアをもたない“ロフトワーク流”Webサイト構築プロジェクトの進め方を、WordPress導入の具体的な事例・アウトプットをベースにご紹介。 いかにリスクを減らし、スムーズにプロジェクトを進めるか? テクニカルディレクターの目線でコツをお話します。
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
MILI-LLC
Amazon EC2 Container Service をはじめ、 Docker ベースのサービスが徐々に本番環境に導入されはじめてきています。 改めて Docker とはどのようなものなのか、 VMWare や VirtualBox など、従来の仮想環境と何が違うのかについて触れていきます。 また、開発環境を VPS 上に構築することで、チーム全体のパフォーマンスを向上させたり、ローカルマシンとサーバー上のデータをリアルタイムで同期させる他、マルチドメインに対応させることで、複数の開発メンバーが同時に開発環境にアクセスできるようにするなど、 Docker を使った開発がより楽しく便利になる方法についてお話しました。
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
Ryo Mitoma
DevOpsDays Tokyo 2022 の発表資料です。 https://confengine.com/conferences/devopsdays-tokyo-2022/proposal/16422
Fcp
Fcp
Naoto TAKAHASHI
某所向け資料の公開版
DockerでWordPressサイトを開発してみよう
DockerでWordPressサイトを開発してみよう
mookjp
GTUG-Girls #20 のハンズオン資料です
Pro aspnetmvc3framework chap23
Pro aspnetmvc3framework chap23
Hideki Hashizume
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
Kazue Igarashi
JAWS FESTA Tohoku 2014でセッションした「WordPressとAWSの素敵な関係」のスライド
2014.11.01 Dockerことはじめ
2014.11.01 Dockerことはじめ
xyzplus_net
2014.11.01 これからはじめるDocker勉強会
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
Masaya Tahara
Security-JAWS第24回登壇資料
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
Masanori Ishigami
GitHubのIssueとVisual Studio OnlineのWorkItemの連動を始める時に考慮すべき点をまとめました
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
Akira Inoue
6/12 Microsoft Build Recap Community Day のセッション資料です https://msdevjp.connpass.com/event/213915/
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Ryo Nakamaru
Docker Inc.の Jérôme Petazzoniさんが re:Invent2015で行った「From Local Docker Development to Production Deployment」というセッションの資料を、ご本人の了解を得て日本語に訳したものです。
Vagrant入門以前
Vagrant入門以前
katanyan
Vagrant入門以前
クラウド案件の作り方 for azureしなの4周年
クラウド案件の作り方 for azureしなの4周年
Kuniteru Asami
「JAZUG4周年記念! どこよりも雲に近い長野でするクラウドの話 feat. NSEG」でお話しさせていただいたスライドです。
Similar to タスクランナー導入 〜とあるWordPress制作環境〜
(20)
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【BS13】チーム開発がこんなにも快適に!コーディングもデバッグも GitHub 上で。 GitHub Codespaces で叶えられるシームレスな開発
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
オトナのDocker入門
オトナのDocker入門
WordPress アカンパターン
WordPress アカンパターン
はじめての Azure 開発
はじめての Azure 開発
AWSのElastic BeanstalkでWordPressを 構築レスで導入してみる。
AWSのElastic BeanstalkでWordPressを 構築レスで導入してみる。
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
年間300プロジェクトから体得!"リスクを撃破する"テクニカルディレクション術
明日からはじめられる Docker + さくらvpsを使った開発環境構築
明日からはじめられる Docker + さくらvpsを使った開発環境構築
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
Fcp
Fcp
DockerでWordPressサイトを開発してみよう
DockerでWordPressサイトを開発してみよう
Pro aspnetmvc3framework chap23
Pro aspnetmvc3framework chap23
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
2014.11.01 Dockerことはじめ
2014.11.01 Dockerことはじめ
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
OSS+AWSでここまでできるDevSecOps (Security-JAWS第24回)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Vagrant入門以前
Vagrant入門以前
クラウド案件の作り方 for azureしなの4周年
クラウド案件の作り方 for azureしなの4周年
More from Masaya Kogawa
協業プロジェクトにおけるコミュニケーション設計ケーススタディー
協業プロジェクトにおけるコミュニケーション設計ケーススタディー
Masaya Kogawa
CPI MEGAMIX 2016 で発表した内容 CalmTechとして青森県弘前市を拠点に活動するプログラマーが、ITスキルを通じて異業種との協業を行ってきた際に得た知見を共有。 料理研究一家「古川家」、TEKUTEKU編集部をケーススタディーとして例示。
料理研究一家「古川家」を支えるツールと技術 | CPI MEGA MIX 2015
料理研究一家「古川家」を支えるツールと技術 | CPI MEGA MIX 2015
Masaya Kogawa
受託開発メインのプログラマーが業界と自身の今後をうらない、ある方向に舵を切りました。それは、自らコンテンツホルダーになること。 それまで業務システム開発で要件を整理したり、プログラムに落とし込む「つくる特化のシステム屋」でした。コンテンツホルダーになってからは、自分が企画を立て、告知・集客、対外交渉とあらゆる役割を別業界でこなすことで見える世界がまったく変わりました。 華麗なる転身をしたわけではありません。新しい刺激には満ちていますが、この状況を支えるものはすべて、システム屋としてつちかってきた技術の延長にありました。 料理研究一家「古川家(こがわけ)」と称し、家族ユニットとして活動する中で、支えとなっているツールの紹介をします。
WordPressテーマ事始め
WordPressテーマ事始め
Masaya Kogawa
WDHA #35のWordPressデモで使用したスライド
CMSから考えるサイト設計
CMSから考えるサイト設計
Masaya Kogawa
WDHA #35で使用したスライド
個人力を高める6つのメソッド
個人力を高める6つのメソッド
Masaya Kogawa
WDHA 2010.01.16で使用したスライド
Ruby on JavaScript
Ruby on JavaScript
Masaya Kogawa
Created for CSS Nite in Aomori 2009
Ruby on Rails Live Coding
Ruby on Rails Live Coding
Masaya Kogawa
BubbleMap Application
BubbleMap Application
Masaya Kogawa
Presentation for IWDD#23
Basic Training for UI Design
Basic Training for UI Design
Masaya Kogawa
Presentation for WDHA Regular Meeting #004
More from Masaya Kogawa
(9)
協業プロジェクトにおけるコミュニケーション設計ケーススタディー
協業プロジェクトにおけるコミュニケーション設計ケーススタディー
料理研究一家「古川家」を支えるツールと技術 | CPI MEGA MIX 2015
料理研究一家「古川家」を支えるツールと技術 | CPI MEGA MIX 2015
WordPressテーマ事始め
WordPressテーマ事始め
CMSから考えるサイト設計
CMSから考えるサイト設計
個人力を高める6つのメソッド
個人力を高める6つのメソッド
Ruby on JavaScript
Ruby on JavaScript
Ruby on Rails Live Coding
Ruby on Rails Live Coding
BubbleMap Application
BubbleMap Application
Basic Training for UI Design
Basic Training for UI Design
タスクランナー導入 〜とあるWordPress制作環境〜
1.
タスクランナー導入 ∼とあるWordPress制作環境∼ 古川 勝也 NPO法人 あおもりIT活用サポートセンター
理事
2.
自己紹介 • 古川 勝也(こがわ
まさや) • あおもりIT活用サポートセンター理事 • CalmTech(カームテック) 代表 • CPIエバンジェリスト • テクテク編集部 代表 • 料理研究一家「古川家」
3.
本日の流れ • Webデザインを取り巻く現状 • セッションの対象とゴール •
ブラウザの外のJS • パッケージマネージャー概説 • タスクランナー概説 • WordPress制作環境での導入例 • まとめ
4.
Webデザイナーはどこへ行く? 認識をすり合わせましょう
5.
Webは高度な複合技術 • ホームページ作りたい!(ごく気軽な思い) • サーバー、ドメイン、FTP…etc •
HTML、CSS、JS、ビットマップ…etc • CGI、データベース、SSL…etc • CMS、ウェブビルダー、ブログ…etc • 一体いくつ覚えればいいのよ!?(半ギレ)
6.
楽になったコトも苦になったコトも増えましたね ぜんぜん手軽じゃない
7.
だって、いっぱい増えてますもの
8.
Webデザイン業界の個人的超解釈 • DTP業界からの流入で本格スタート • 検索エンジン浸透で代理店、マーケターが本腰 •
SEO戦国時代、ガラケー天国 • 回線の高速化が普及してキャズム越え • iPhone登場でアプリバブル到来 • 1人1台スマホ、SIer業界からの流入が増加 • コンテンツと技術の乱立で見直し開始 <イマココ
9.
どういうバランスにしていきます? マーケティング インタラクション マークアップ IA UX ビジュアルデザイン
10.
大事なのはゴールとモチベーション そもそもナゼ?
11.
Web技術のコモディティ化 • 誰でも「すぐに」ホームページ、ブログ開設 • 誰でも「すぐに」決済機能つきECサイト開設 •
誰でも「すぐに」写真、動画を共有 • 誰でも「すぐに」メッセージ送信、返信
12.
大量生産、大量消費、スピード命 • 技術の進歩が高速化&多様化 • 消費サイクルも高速化 •
高度化した技術がインフラとして浸透
13.
でも健康でいることを第一にしましょうね 時間がいくらあっても足りない
14.
時間は資源であり有限、効率よく使いたいところ 時は金なり
15.
どうやって壁を越えていくか? • 手動の割合を減らしていく • 作ったものは可能な限り再利用する •
1つの仕事が連鎖する仕組みを作る
16.
それが全てではありませんが 自動化せよ
17.
本セッションでの自動化とは • コンピューターに任せる仕事の範囲を決める • コンピューターに任せるために仕事を定型化する •
繰り返しに落とし込む • コンピューターに仕事を任せる
18.
コンピューターは知の鏡 自動化=機械化
19.
機械化するメリットとは? • ミスの可能性が減る • 品質の保証ラインが均一化される •
人間が拘束される時間が減少する • 人間しかできないコトに集中できる • 「時間」を「価値」に転化する機会が増える
20.
時間をお金で買うのも1つの選択ですが 時は金なり
21.
Web制作で自動化できることは? • CMSや制作環境の導入 • CSSやJSの結合、圧縮 •
動作確認のブラウザリロード • 複数デバイスでの表示確認
22.
本セッションのターゲット 前提知識が色々とありまして・・・
23.
HTMLの前提知識・経験 • 静的サイトの制作経験がある
24.
CSSの前提知識・経験 • CSSフレームワークを知っている、使っている • CSSプリプロセッサを知っている、使っている
25.
JavaScriptの前提知識・経験 • jQueryとかのライブラリを使ったことがある • JSONを見たこと、聞いたことがある
26.
WordPressの前提知識と経験 • WordPressインストールは自分でできる • XAMPPやMAMP上に構築できる •
独自テーマを作成したことがある
27.
そう、あれです。黒いやつです。 運命の別れ道
28.
Y/n 黒い画面つかってみますか?
29.
顔に出てますよ? 今、迷わず「No」と思いましたね
30.
嘘です (・∀・)カエレ!
31.
他の方法もちゃんとあります 黒い画面をできるだけ避けたい方へ
32.
CodeKit(Macのみ) 一時期、話題になったコンパイルツールが進化しました
33.
Prepros(Win/Mac/Linuxすべて対応) コンパイルとかブラウザリロードとかFTPとか全部やってくれます
34.
これで十分なのでは? • Sass/SCSSだけ自動化は手軽 • ブラウザリロードだけでもありがたいぐらい •
まず必要性と利便性を感じてみる • Macユーザー特権でなくなってきました
35.
git for windows(git-bash) Windowsで黒い画面を使うにはこれが1番手軽
36.
プログラマーには日常的ですが・・・ なんで黒い画面前提なんでしょうね
37.
GUI化は多大な労力が必要 • フロントエンドの変化がかなり早い状況 • 今は「鉄板」がない •
作ってすぐ動かすにはCUIが手軽 • GUIだとカスタマイズに限界がある • カンプ作って終わりならな… < 同じこと
38.
コントロールできない技術はリスクにもなります 待つことも重要な選択肢
39.
ブラウザの外で動くJS いろいろな使い方されるようになりました
40.
41.
Node.js • サーバーサイドJavaScript環境 • フロントエンドに役立つツールがいっぱい •
Long-term Support版がオススメ
42.
43.
パッケージマネージャー概説 これがないと困ったことになります
44.
なぜ必要なの? • Aと言うライブラリを使うにはBが必要 • BはCとDに依存したツール •
えーと、つまり全部入れればいいのかな? • バージョンの相性とかあんの!? • 人の手でやってられません
45.
46.
• Node.jsのパッケージ管理ツール • サーバーサイド、フロントエンド問わず •
npmにもタスク実行機能が備えられている npm
47.
-g はグローバルの意味 1度インストールすると以後はどこでも呼び出し可能に > npm
install -g [パッケージ名]
48.
初期処理として packages.json 作成 プロジェクトごとにパッケージを管理する想定 >
npm init
49.
インストールしたパッケージは packages.json に追記 ̶save
でパッケージ間の依存関係も追加される ̶save-dev は制作時のみ使用するパッケージを指す node_modules 以下にインストールされる > npm install [パッケージ名] ̶save > npm install [パッケージ名] ̶save-dev
50.
プロジェクトで packages.json を共有している時に利用 指定しておいたパッケージが一括でインストールされる そのためにも
̶save と ̶save-dev オプションが重要 ̶production で ̶save-dev で入れたパッケージ除外 > npm install
51.
52.
• Twitter製パッケージマネージャー • フロントエンド用に特化 •
Bootstrapとか Bower
53.
初期処理 bower.json 作成 プロジェクトごとにパッケージを管理する想定 >
bower init
54.
インストールしたパッケージは bower.json に追記 ̶save
でパッケージ間の依存関係も追加される ̶save-dev は制作時のみ使用するパッケージを指す bower_components 以下にインストールされる > bower install [パッケージ名] ̶save > bower install [パッケージ名] ̶save-dev
55.
プロジェクトで bower.json を共有している時に利用 指定しておいたパッケージが一括でインストールされる そのためにも
̶save と ̶save-dev オプションが重要 ̶production で ̶save-dev で入れたパッケージ除外 > bower install
56.
57.
• Rubyのパッケージマネージャー • Sass/SCSS、Compassぐらい RubyGems(通称:gem)
58.
グローバルでインストール プロジェクトごとにパッケージを管理するBundlerもある > gem install
[パッケージ名]
59.
60.
• PHPのパッケージマネージャー • WordPressがらみで使うかも Composer
61.
composer.json というパッケージを記述するファイル生成 > composer
init
62.
インストールしたパッケージは composer.json に追記 パッケージ間の依存関係も追加される ̶dev
は制作時のみ使用するパッケージを指す vendor 以下にインストールされる > composer require [パッケージ名] > composer require [パッケージ名] ̶dev
63.
composer.json に記述されたパッケージをインストール > composer
install
64.
うわぁ・・・って思われても仕方ありません 察しの通り、全部つかいます
65.
実はコマンド形式ほぼ一緒 npm install bower install gem
install composer install
66.
タスクランナー概説 なんと本編はここから!
67.
68.
Gulp • タスクという単位の処理を自動でこなす • 非同期で実行するので既存ツールより高速 •
プラグインを組み合わせると高度な処理が可能に
69.
インストールから実行まではこれだけ > npm install
-g gulp > gulp
70.
WordPress制作環境に導入 いくつかのアプローチがあります
71.
ツール群をどう取り込むべきか? • WordPress構造はどうする? • 独自テーマだけ作ることができればいい? •
動作確認はどうやって行う?
72.
なるべく手動で用意しないように ゼロから考えるより既存をカスタム
73.
74.
Yeoman • ひな型を自動生成してくれるツール • 様々なひな型が公開されている •
インストールしたもので勉強する
75.
後は yo というコマンドを呼ぶだけ >
npm install -g yo
76.
77.
YeoPress • Yeoman経由でWordPressをインストール • 初期設定を対話形式CUIで行う •
あらかじめカスタムされたフォルダ構造もある • local-config.phpで設定を上書きできる
78.
WordPressのインストールが始まります ̶advanced オプションをつけると細かい点を調整できます > npm
install -g generator-wordpress > yo wordpress ̶advanced
79.
WordPress日本語化に注意 • アップデートすれば日本語化は大丈夫 • WP
Multibyte Patch は自分で入れます
80.
local-config.php テスト環境用のファイルを置くだけで設定の切り替えができます
81.
yo-emi • WordPressのテーマひな型 Emi
がベース • Yeoman経由でインストール • Gulp、Sass、Autoprefixerなど設定済み • LiveReloadで自動更新
82.
テーマフォルダの下で実行します テーマ名は英数字とアンダースコアでつけましょう ハイフンだと自動生成される関数名でエラーになります > yo emi
83.
Gulp利用前に > gem install
sass gulpfile.jsでコンパイル対象を指定する LiveReload使用が初期状態
84.
制作環境が最初から整っている、ありがたさ 洗練された土台でスタートダッシュ
85.
86.
87.
Bedrock • WordPressのひな型 • 最初から色々とカスタマイズ済み •
構成は複雑に見えるが、よく整理されている • dotenvという仕組みで設定を変更できる
88.
パッケージをインスールしましょう 必要なものは最初から記述されています > composer install
89.
やはりWordPress日本語化に注意 • アップデートを忘れずに • これもWP
Multibyte Patch は自分で入れます
90.
.env local-config.phpのようにテスト環境と設定の切り替えができます
91.
• WordPressテーマのひな型 • 必要なものは一通り揃っている •
Bedrockは必須ではない Sage
92.
Sageインストールの前に > gem install
sass
93.
パッケージをインスールしましょう 必要なものは最初から記述されています > npm install >
bower install
94.
manifest.json Gulpで使用される基本設定が記述されています
95.
まとめ お持ち帰りできることはありましたか?
96.
できそうなところから自動化 • SCSS/Sassの導入とコンパイル • ブラウザリロード •
複数端末での表示チェック • GUIツールからまず触ってみる
97.
自動化=機械化
98.
機械化したメリットとは? • ミスの可能性が減る • 品質の保証ラインが均一化される •
人間が拘束される時間が減少する • 人間しかできないコトに集中できる • 「時間」を「価値」に転化する機会が増える
99.
大事なことなので3回言いました 時は金なり
100.
良き「きっかけ」となりますように http://www.aoit.jp
Download now