LOCAL by Flywheel と Add-on で実現する無駄のないリモートテーマ開発

静岡 WordPress MeetUp in 浜松（2019.03.02）の発表資料です。

Transcript

1. LOCAL by Flywheel とAdd-onで実現する 無駄のないリモートテーマ開発 2019.3.2 静岡 WordPress Meetup in 浜松 SHIMIZU Kumiko
2. プロフィール
3. 磐⽥市在住、1児のおかん 株式会社コミュニティコム所属 清⽔久美⼦ SHIMIZU Kumiko デザイナー・マークアップエンジニア • TEDxHamamatsu メディアチーム (WP運営) • Think About MeetUp 主宰 • ITざっくばらん会 in 磐⽥ プロジェクター係 • WP利⽤歴10年くらい、実務歴3年くらい • 猫アレルギー持ちの猫好き ねこ好き〜
4. 公式テーマや100%GPLの有料テーマ
5. ,N SHIZUOKA SAITAMA 埼⽟メンバーと オンラインでつなぎながら フルリモートで作業
6. 1. テーマ開発フロー 今⽇お話しすること 2. ローカル環境構築ツール 3. アドオンで無駄のない開発
7. テーマ開発フロー
8. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Ｚ ﻯ Ｏ ｆ ＠ Ｗ ｆ Ｋ ⡲ 䧭 Ｍ ． ﻺ ﻭ ． Ｂ ⡲ 䧭 Ｂ Ｘ ３ ＊ ﻯ Ｂ ⡲ 䧭   １ ｆ Ｉ ⻉ 嗚 鏾 ٥ ⥜ 姻 Ｉ ６ Ｐ ﻭ Ｖ ⡲ 䧭 ２ Ｍ ＀ ﻯ ３ ⡲ 䧭 Ｕ Ｕ ｆ ＄ ʁ テーマ開発フローとツール
9. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Ｚ ﻯ Ｏ ｆ ＠ Ｗ ｆ Ｋ ⡲ 䧭 Ｍ ． ﻺ ﻭ ． Ｂ ⡲ 䧭 Ｂ Ｘ ３ ＊ ﻯ Ｂ ⡲ 䧭   １ ｆ Ｉ ⻉ 嗚 鏾 ٥ ⥜ 姻 Ｉ ６ Ｐ ﻭ Ｖ ⡲ 䧭 ２ Ｍ ＀ ﻯ ３ ⡲ 䧭 Ｕ Ｕ ｆ ＄ ʁ テーマ開発フローとツール ࠓ೔ͷ͓࿩
10. ローカル環境構築ツール
11. リモート or ローカル？ ローンチ前の作業は
12. 1.本番環境のデータ損失を防ぐ 2.リアルタイムで変更を確認 3.同じ環境が複数必要 なぜローカル環境？
13. ざっと調べてみると…
14. 私が使っているのは…
15. 私が使っているのは… WordPressの有料ホスティングを⾏う Flywheel が提供するローカル環境構築ツール。 Windows / Mac 版が提供。ツールの利⽤は無料。 https://local.getflywheel.com/
16. LOCAL について • 動作が軽量 • 複数の環境を気軽に⽴てられる • サーバー環境が選択できる（PHP, OS,MySQL） • マルチサイトもOK • SSLも使える（Firefoxでの閲覧はNG） • 不要になったら気軽に壊せる Good
17. LOCAL について • インストールファイルが500MB • 初回セットアップに時間がかかる • UIが英語 • インストール後の初期設定が英語 • 最新版WordPressがインストールされる ⽇本語の情報が豊富なので、正直使わない理由にはならないです Hmmmm
18. LOCAL の便利な機能 Live Link ngrok を介して LOCAL 上のサイトを 外部から⾒れるようにする。 構築中のサイトやテーマをミーティン グ時など共有するのにとても便利。
19. LOCAL の便利な機能 すでに構築済みの環境をひな形として 保存し、新規構築時に適⽤できる。 プラグインやテーマ、ユーザー情報な どが含まれる。 Blueprint
20. DEMO 百聞は⼀⾒にしかず
21. ローカル環境構築ツール アドオンで無駄のない開発
22. LOCAL の アドオン ユーザーが作ったカスタムアドオンで ローカル環境の拡張ができる。 現在5つ公開されている。 Add-ons
23. LOCAL の アドオン ローカル環境外のフォルダをマウント し、仮想的に使うことができる。 Volumes
24. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Ｚ ﻯ Ｏ ｆ ＠ Ｗ ｆ Ｋ ⡲ 䧭 Ｍ ． ﻺ ﻭ ． Ｂ ⡲ 䧭 Ｂ Ｘ ３ ＊ ﻯ Ｂ ⡲ 䧭   １ ｆ Ｉ ⻉ 嗚 鏾 ٥ ⥜ 姻 Ｉ ６ Ｐ ﻭ Ｖ ⡲ 䧭 ２ Ｍ ＀ ﻯ ３ ⡲ 䧭 Ｕ Ｕ ｆ ＄ 最初に戻って…
25. Volumesを導⼊する前 /dev /app /.. /themes /theme-name /project /html /themes /theme-name ローカルリポジトリ ローカル開発環境 変更が⼊る度に⼿動同期
26. ಉ͡ςʔϚͷ؀ڥ͕ ͻͱͭ૿͑ɺ;ͨͭ૿͑ Volumesを導⼊する前 ։ൃ༻ɺϚχϡΞϧ༻ɺݕূ༻…
27. ͋ΕʁͲΕ͕࠷৽ʁ あらあら Volumesを導⼊する前
29. • テーマファイルはPC上に唯⼀無⼆にする • ローカルリポジトリ内で作業を完結する どうすればいい？
30. Volumes This is a handy way to share a single theme or plugin directory across mul?ple Local sites. “ ”
31. Volumesを導⼊した後 /dev /app /.. /themes /theme-name /project /html /themes /theme-name ローカルリポジトリ ローカル開発環境 ローカルリポジトリのフォルダを ローカル開発環境下に接続 Volumes
32. ローカル環境 A Volumesを導⼊した後 テーマ プラグイン ローカル環境 B ローカル環境 C Volumes = =
33. Volumesの設定⽅法 /app/public/wp-content/themes /Users/username/foldername/themes Host Source Container Des?na?on 1.Volumes の設定にパスを⼊⼒。 2.ローカル環境を起動した状態で
 REMAP VOLUMES を押す。 ※Macでの設定例です
34. DEMO またまた 百聞は⼀⾒にしかず
35. ローカル環境構築ツール まとめ
36. 1. LOCALはとにかく簡単 2. Volumesで無駄をなくす 3. ⼯数減でスピードアップ
37. ͋ͳͨͷ։ൃ࡞ۀ͔Β ແବ͕ͳ͘ͳΓ·͢Α͏ʹʂ
38. ThankYou! ご清聴ありがとうございました！ @shimikumi32 Photos & Neco by SHIIMZU Kumiko (Me :) Speech balloons by Fukidashi Design