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

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を導⼊する前

28. None

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