Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Cfdeb7e141681ce7d2dcdedc1d2ab736?s=128

ShimiKumi

March 02, 2019
Tweet

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. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Z

    ﻯ O f @ W f K ⡲ 䧭 M . ﻺ ﻭ . B ⡲ 䧭 B X 3 * ﻯ B ⡲ 䧭   1 f I ⻉ 嗚 鏾 ٥ ⥜ 姻 I 6 P ﻭ V ⡲ 䧭 2 M ＀ ﻯ 3 ⡲ 䧭 U U f $ ʁ テーマ開発フローとツール
  9. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Z

    ﻯ O f @ W f K ⡲ 䧭 M . ﻺ ﻭ . B ⡲ 䧭 B X 3 * ﻯ B ⡲ 䧭   1 f I ⻉ 嗚 鏾 ٥ ⥜ 姻 I 6 P ﻭ V ⡲ 䧭 2 M ＀ ﻯ 3 ⡲ 䧭 U U f $ ʁ テーマ開発フローとツール ࠓ೔ͷ͓࿩
  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. ⟰ 歗 ➬ 圫 ٥ 堣 腉 嗚 鎢 Z

    ﻯ O f @ W f K ⡲ 䧭 M . ﻺ ﻭ . B ⡲ 䧭 B X 3 * ﻯ B ⡲ 䧭   1 f I ⻉ 嗚 鏾 ٥ ⥜ 姻 I 6 P ﻭ V ⡲ 䧭 2 M ＀ ﻯ 3 ⡲ 䧭 U U f $ 最初に戻って…
  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