Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress ローカル環境のすヽめ 〜サーバに上げる、その前に〜

2018/06/30 WordBench しずおかで発表したスライドに加筆修正したものです。

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

WordPress ローカル環境のすヽめ 〜サーバに上げる、その前に〜

  1. 1. WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜 五⼗嵐 武志 2018/06/30 WordBench Shizuoka
  2. 2. ご案内 このスライドは、2018年6⽉30⽇のWordBenchし ずおかで発表したものに、加筆修正したものです。
  3. 3. whoami 五⼗嵐 武志 Web開発者 ★ HTML5/CSS3 ★ WordPress ★ Cloud Computing(AWS他) デザイナー ★ UX/ユーザー中⼼設計(HCD)      takeshi81
  4. 4. whoami 五⼗嵐 武志 コミュニティ ★ DIST http://dist.tokyo ★ WordPressとおやつの会
 2010-2013 ★ F-site http://f-site.org
 2002-2016      takeshi81
  5. 5. しぞーかと私
  6. 6. whoami 五⼗嵐 武志 ★ 1975年 沼津⽣まれ ★ その5年後 浜松へ転居 ★ しかし1年半後に県外へ
 今は東京に漂着 ★ 実家は7年前、県内へ戻る
 今は伊東市内
  7. 7. 最初に質問 Questionnaire
  8. 8. 質問 Q: ⾃分のブログやwebサイトを持っている⼈、
 ⼿を挙げて🙋" (更新頻度は問いません)
  9. 9. 質問 Q: お仕事でwebサイトを制作、構築、運⽤などに
 関わっている⼈、⼿を挙げて🙋" (受託、⾃社の別は問いません)
  10. 10. 質問 Q: これらのブログ、webサイトの、
 デザイン・機能の変更をテストできる環境を、
 本番以外に⽤意している⼈、⼿を挙げて🙋" (リモート、ローカルの別は問いません)
  11. 11. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。
  12. 12. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です
  13. 13. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です • 難しいんじゃないですか? わりとお⼿軽です
  14. 14. 開発環境とは • 現場により厳密な定義があったりしますが、ここで は「デザイン変更や機能追加を試しても安⼼な、本 番同様ブログやwebサイトが動作する環境と、その ためのツール類」とします。
  15. 15. ローカル環境とは ★ お⼿もとのPC = ローカル
  16. 16. ローカル環境とは ★ ローカルでない = リモート = ネットワーク経由
 ⼀般に公開されているwebサーバーと、⼿もとの PCは通常リモート接続していることになります。
  17. 17. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう!
  18. 18. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリ モートサーバーとFTPを繰り返す⼿間も省けます。
  19. 19. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログやCMS を動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリモート サーバーとFTPを繰り返す⼿間も省けます。 ★ ⾃分のPCなら元に戻すのも、リモートより簡単です。
  20. 20. ローカルでwebサーバーを動かす WordPressなど、PHPアプリケーション向けツール ★ 初⼼者におすすめ: MAMP、XAMPP ★ Vagrantベース: VCCW、Wocker、VVV ★ Local by Flywheel
  21. 21. ローカルでwebサーバーを動かす ちなみに私は…… ★ Homebrewで直接Macにインストール
 PHP, MariaDB, h2o, node & more. 基本は同じなので、お好みのツールでOK!
  22. 22. 百聞は⼀⾒にしかず ローカルwebサーバーでWordPressを動かすデモ
  23. 23. 百聞は⼀⾒にしかず リモートサーバーからデータをダウンロードして
 ローカル環境に反映させるデモ
  24. 24. ⼀般的なweb開発・公開環境構成例 HOME INTERNET DATA CENTER My PC 公開webサーバー ブラウザ Mobile, Tablet, PC
  25. 25. ⼀般的なweb開発・公開環境構成例 HOME INTERNET DATA CENTER 作ったデータをアップロード webを閲覧
  26. 26. ローカル開発環境を使ったイメージ HOME INTERNET DATA CENTER 本番のデータをダウンロードして反映
  27. 27. ローカル開発環境を使ったイメージ HOME INTERNET DATA CENTER 動作を確認しながら開発
  28. 28. ローカル開発環境を使ったイメージ HOME INTERNET DATA CENTER 作ったデータをアップロード webを閲覧
  29. 29. WordPressで同期・バックアップするべきもの ★ ⾃作、または⾃分で改変したファイル
 (テーマ、プラグイン etc.) ★ データベース
 (記事、⽇付などメタ情報 etc.)
  30. 30. ローカルとリモートのWordPressを同期 ★ ツールを使えば難しくありません ★ Wordmove、bash-wp-deploy ★ 私は⾃作しています…(参考リンク)
  31. 31. ご静聴ありがとうございましたm(_ _)m

×