[スタッフコラム]モテる秘訣は作業環境にアリ Vol.2

Put your hand in the air!!

どうも、STRIXディレクター「DJよろずや」です。

上のサムネイル画像見ましたか？気づいちゃいましたか？

そう！

“DJよろずや”の　【ロゴ】　作っちゃいました！！私が！！
一応デザイナーの肩書あるので、、サムネも毎回作ってるよ、、

前書きとかもういいですよね？

気になって仕方ないですよね？

今回の本題のモテる秘訣…

ローカル環境編

お教えいたしましょう。拍手。

  1. はじめに
    1. Prepros
      1. 主な機能
      2. おすすめ設定
    2. Local by flywheel
      1. 主な機能
      2. おすすめ設定
  2. おわりに

はじめに

そもそもローカル環境とはなんぞや？と思う方もいらっしゃるかと思いますが、
それは各自で調べてください。
簡単に言うと

  • 自分のパソコン内でPHPやWordpressなどを動かす
  • 相対パス以外にルートパスを使用する

とかができるって話です。
詳しくは説明しません。

さて、今回紹介するソフトはPreprosとLocal by flywheelの2つです。

なお、前回のエディタ編はこちらから

[スタッフコラム]モテる秘訣は作業環境にアリ
秋深き　隣は何を　する人ぞ私の隣は「デザイナー」 STRIXディレクター「DJよろずや」です。 気づいたらもう私の出番がやってきてしまいました。早くない？名刺の肩書では「ディレクター / デザイナー」とな...
at.strix-inc.jp
2019.12.10

Prepros

PreprosはWindowsとMacに対応しており、無料ですべての機能が使用可能です。
購入すると、定期的に出る「よかったら買ってね！」というポップアップが表示しなくなります。
また、Macの場合ですとCodekitもおすすめですが、有料です。

Your Friendly Web Development Companion
prepros.io

主な機能

  • 指定したフォルダをルートとしてルートパスが使用可能
  • Sass、Less、Pug / Jade、Slim、CoffeeScriptなどがコンパイル可能
  • コード内のエラーログが出力される
  • エディタ保存時に自動的にページがリロードされる
  • CSSやJSのminifyや整形及び、画像の最適化
  • 複数のデバイス間でブラウザーを同期
  • スマホで表示した画面のリモートデバッグが可能
  • ビルドとデプロイ

他にもいろいろ機能がありますが、公式サイトや自分で使ってみてください。
そして例のごとくインストール方法や操作方法は割愛します。

おすすめ設定

おすすめの設定をお教えしたいところではありますが、正直人によって設定はまちまちですので、割愛します。
とりあえず私の変更した個所をお教えします。

①やっぱりテーマはダークモードです。

②コンフィグファイルは邪魔なのでエクスポートしません。
③システムファイルなどは表示してほしいのでチェックは外します。

④PreprosではPHPが使えないので、Local by flywheelを使用して仮想サーバーを立てます。
　ここから設定するとPHPが使用できるようになります。

⑤複数ブラウザ、端末で動きを同期したいときはチェックを入れます。
　たまにめんどくさいのでチェックを外します。

⑥FTPにデプロイしたいときはここで設定します。

⑦SCSSからCSSにコンパイルする際に、プレフィックスを自動でつけてほしい時は、チェックを入れます。
　この際、Can I Useをベースにプレフィックスが付与されます。

Local by flywheel

Local by flywheelもWindowsとMacに対応しており、無料で大体の機能が使用可能です。
有料プランにすると、様々な機能が使用可能になります。
無料でも申し分ないので、無料でも大丈夫です。
むしろ有料プランだと持て余します。

Local
localwp.com

主な機能

  • パソコン内にワンクリックでWordpress環境が構築可能(むしろこれがメイン)
  • SSLを使用してローカルサイトのテストが可能
  • PHP Version、Web Server、MySQL Versionが選択および変更が可能
  • ログファイルの出力
  • 本番環境、ステージング環境へのデプロイ
  • 本番環境をクローンしてローカル環境にサイトを復元

こちらも他にもたくさん機能がありますが、公式サイトや自分で使ってみてください。
そしてもちろんインストール方法や操作方法は割愛します。

おすすめ設定

Local by flywheelについては特におすすめ設定はありませんので、
自分が作りたいローカル環境に応じて設定を変更してください。

また、先ほどPreprosではPHPを使用できないとお話ししましたが、一度Local by flyfheelでWordpress環境を構築した後、Wordpress本体を削除すれば中身が空のローカルサーバーとして使用することが可能です。

この構築した環境をPreprosのCustom Serverとして設定することでPHPが使用可能となります。

おわりに

いかがでしたか？(いつもの)
コーディングにおいて、ローカル環境は必須と言っても過言ではありません。
XAMPPやMAMPPは有名ですが、hosts設定などがあるため、初心者にはあまりお勧めできません。

やはりGUIで簡単に環境を構築できることが、作業効率化において重要となります。
是非PreprosとLocal by flywheelを使用してくださいね。

Have a nice cording day!!

ホーム
トップ