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
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Thoughts on Productivity
jonyablonski
70
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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