COLUMN コラム

『Prepros』というアプリをご存知ですか？

PreprosはWeb開発の際に使用する言語を自動でコンパイルしてくれるGUIツールです。他にも様々な便利機能が搭載されているため、使いこなせれば開発スピードは格段にアップするでしょう。

今回はPreprosの基本的な機能をご紹介します。

Prepros(プリプロス)とは

先述の通り、Preprosは様々な言語をコンパイルしてくれるGUIツールです。

ダウンロード先：https://prepros.io/downloads

対応環境：macOS,Windows,Debian Linux

言語：英語のみ

料金：基本無料(無料版ではポップアップが表示されます。)

Preprosでできること

1.ファイルをコンパイル

Preprosは「Sass」「Less」「Stylus」「Pug(Jade)」「Haml」「Slim」「CoffeeScript」「TypeScript」をコンパイルすることができます。さらにはJavaScriptをバンドルすることも可能です。

ここでは難しいことは説明しませんが、gulpを使用する時のような小難しい設定の必要はなく、黒い画面で指示を出す必要もありません。

2.コードの問題を見つける

記述したコードに問題がある場合、問題のあるコードがどこにあるのかを一目で教えてくれます。同時に作業ログを残すことも可能です。コードに問題がある場合はポップアップが表示されるのでエラーを未然に防ぐことができます。

3.プレビュー機能

Preprosにはhttpおよびhttpsサーバーが組み込まれており、ボタン一つでブラウザプレビューが可能です。さらにはMAMPなどの外部サーバーからページをプロキシすることも可能です。

モバイル端末でのプレビューにも長けており、QRコードを読み込むか、もしくは記載されたURLを打ち込むだけで、手持ちのモバイル端末でプレビューを確認することが可能です。

Preprosはコードを変更するたびに、PC、モバイル端末全てが自動で更新されます。

4.自動ブラウザリロード

例えばCSSで文字のサイズを変更したとすると、CSSファイルを保存したと同時にプレビュー画面が自動で更新されます。

スタイルを変更するたびにページを更新する必要がないのはとても便利ですね。

5.圧縮と最適化

JSファイル、CSSファイルの圧縮、さらには画像の最適化を自動で行ってくれます。その際の設定も簡単で、ボタン一つで長い長いコードを一行に圧縮してくれます。

gulpの場合、minファイルの書き出し先や改行を消す設定を黒い画面を使って行っていましたが、Preprosの場合、Minify CSSにチェックを入れてProcess Fileをクリックするだけで指定した箇所に自動で圧縮ファイルを作成してくれます。

Minify CSSにチェックを入れてProcess Fileをクリック

CSSファイルに書いたコードが

minファイルを自動で作成し、1行に圧縮されます。

6.FTPアップロード

Preprosで展開しているファイルをFTP、SFTPを使用してサーバーにアップロードすることができます。

保存したファイルをわざわざFTPソフトを使用してアップする必要はありません。サーバー情報を入力したらあとはアップロードボタンを押すだけです。さらにはUpload Automaticallyにチェックを入れておけば、ファイルに変更があるたびに自動でサーバーにアップロードされ、ローカル環境とサーバー内を常に同期することができます。

おわりに

今回はPreprosでできることを簡単に紹介してみました。まだ書きたいことはたくさんありますが、全て書いてしまうととんでもない長さになってしまうので今回はここまでといたします。

私としてはこんなに便利なツールは他にないと思っているので、この先どんどん深掘りしてPreprosの便利さを普及させていきたいと思います。

弊社では士業やメディア、医療関係の制作実績もありますので、Webサイトについてお悩みがある方は、お気軽にお問い合わせください。