Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜
Search
Takeshi Igarashi
June 30, 2018
0
300
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜
このスライドは、2018年6月30日のWordBenchしずおかで発表したものに、加筆修正したものです。
Takeshi Igarashi
June 30, 2018
Tweet
Share
More Decks by Takeshi Igarashi
See All by Takeshi Igarashi
ご当地わぷーのつくりかた(静岡編)
takeshi81
0
72
楽々!楽しい?WP-CLI入門記
takeshi81
0
41
速い!CSS
takeshi81
0
88
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Bash Introduction
62gerente
613
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
For a Future-Friendly Web
brad_frost
179
9.8k
A better future with KSS
kneath
238
17k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building Applications with DynamoDB
mza
95
6.5k
Transcript
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜 五⼗嵐 武志 2018/06/30 WordBench Shizuoka
ご案内 このスライドは、2018年6⽉30⽇のWordBenchし ずおかで発表したものに、加筆修正したものです。
whoami 五⼗嵐 武志 Web開発者 ★ HTML5/CSS3 ★ WordPress ★ Cloud
Computing(AWS他) デザイナー ★ UX/ユーザー中⼼設計(HCD) takeshi81
whoami 五⼗嵐 武志 コミュニティ ★ DIST http://dist.tokyo ★ WordPressとおやつの会 2010-2013
★ F-site http://f-site.org 2002-2016 takeshi81
しぞーかと私
whoami 五⼗嵐 武志 ★ 1975年 沼津⽣まれ ★ その5年後 浜松へ転居 ★
しかし1年半後に県外へ 今は東京に漂着 ★ 実家は7年前、県内へ戻る 今は伊東市内
最初に質問 Questionnaire
質問 Q: ⾃分のブログやwebサイトを持っている⼈、 ⼿を挙げて" (更新頻度は問いません)
質問 Q: お仕事でwebサイトを制作、構築、運⽤などに 関わっている⼈、⼿を挙げて" (受託、⾃社の別は問いません)
質問 Q: これらのブログ、webサイトの、 デザイン・機能の変更をテストできる環境を、 本番以外に⽤意している⼈、⼿を挙げて" (リモート、ローカルの別は問いません)
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です •
難しいんじゃないですか? わりとお⼿軽です
開発環境とは • 現場により厳密な定義があったりしますが、ここで は「デザイン変更や機能追加を試しても安⼼な、本 番同様ブログやwebサイトが動作する環境と、その ためのツール類」とします。
ローカル環境とは ★ お⼿もとのPC = ローカル
ローカル環境とは ★ ローカルでない = リモート = ネットワーク経由 ⼀般に公開されているwebサーバーと、⼿もとの PCは通常リモート接続していることになります。
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう!
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリ
モートサーバーとFTPを繰り返す⼿間も省けます。
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログやCMS を動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリモート
サーバーとFTPを繰り返す⼿間も省けます。 ★ ⾃分のPCなら元に戻すのも、リモートより簡単です。
ローカルでwebサーバーを動かす WordPressなど、PHPアプリケーション向けツール ★ 初⼼者におすすめ: MAMP、XAMPP ★ Vagrantベース: VCCW、Wocker、VVV ★ Local
by Flywheel
ローカルでwebサーバーを動かす ちなみに私は…… ★ Homebrewで直接Macにインストール PHP, MariaDB, h2o, node & more.
基本は同じなので、お好みのツールでOK!
百聞は⼀⾒にしかず ローカルwebサーバーでWordPressを動かすデモ
百聞は⼀⾒にしかず リモートサーバーからデータをダウンロードして ローカル環境に反映させるデモ
⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"$&/5&3 My PC 公開webサーバー ブラウザ Mobile, Tablet,
PC
⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"$&/5&3 作ったデータをアップロード webを閲覧
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 本番のデータをダウンロードして反映
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 動作を確認しながら開発
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 作ったデータをアップロード webを閲覧
WordPressで同期・バックアップするべきもの ★ ⾃作、または⾃分で改変したファイル (テーマ、プラグイン etc.) ★ データベース (記事、⽇付などメタ情報 etc.)
ローカルとリモートのWordPressを同期 ★ ツールを使えば難しくありません ★ Wordmove、bash-wp-deploy ★ 私は⾃作しています…(参考リンク)
ご静聴ありがとうございましたm(_ _)m