Gulpなどインストール不要。アップロードするだけでSassが使用できるサーバーが登場!!

イイウェブ

みなさんScssを使用する際に自身のパソコンでコンパイラKoalaやタスクランナーのGulpを使用してcssに変換したものをアップロードしていると思います。

ですがまだまだ現場ではScssやGulpを使用している会社は半分ほどです。

池田さんのアンケートではタスクランナーが60%となっております。

私もここ1、2年で積極的にScssを使用するようになりましたが

会社員時代は数人で作業する時やファイル納品がありましたのでcssでの記述が基本となっておりました。
今でも代理店さんからの依頼の最終納品は「css」が多い印象です。

すべてScssにするには全員がScssを知っている必要があり、
会社の方針としてScssで統一しなければいけません。

Gulpを使用するきっかけはGulpをつかわなければいけない案件があったからです。

  • HTMLファイルのミニファイ(改行をすべて削除して1行に)
  • CSSファイルのミニファイと規則的な並びに
  • 100ページを超えるコーディング
  • すべて静的HTMLで納品
  • アイコンなどはfontに変換
  • Gzipの使用

手作業でこれらのノルマをクリアするのは厳しかった為、
この案件をする前にGulpをインストールしてなんとか納品することができました。

Gulpタスクランナーを使って作業効率化 | イエロー×グリーン | cross bench (クロスベンチ)
ここ一年で「Gulp」というタスクランナーの聞く機会が増えました。 爆速!作業効率10倍!!というコピーがあったり、今時のフロントエンドなら当たり前!という記事を見て 何度かチャレンジしましたが馴染めず、今まで使う機会がなかったです。 最近のお仕事で速度を重視する案件が多く、静的で圧縮コンパイルが必須になりツールでは限界を感じましたのでやろうやろうと思っていたGulpを勉強しました。 学習コストが低いと言われていますが結構難しかった。 Gulpとは? gulp.jsはNode.jsを使用し作業を毎回行う作業を自動化してくるビルドシステムです。 Koalaなどアプリケーションを使用してSassのコンパイルや圧縮することができますが、Gulpを使用すれば多くのアプリーケーションを使用せず、自分好みまたは案件ごとに作業の自動化をすることができます。 Node.jsインストール Gulpを使用するにはNode.jsのインストールが必要になります。 まだインストールしていない方は公式サイトよりインストールしてください。 ターミナルでバージョンが表示されたら無事インストールが出来ています。 node -v npm Node.jsではnpmというコマンドを使用してインストールを行います。 私が紹介するのはMacの「ターミナル」を使用してのインストール方法です。 gulpインストール npmではローカルとグローバルどちらにインストールするかを選択することができます。 今回gulpはグローバルでインストールしますので-gを追加しています。 先頭にsudoを付けないとインストールできないかもしれません。 npm install -g gulp-cli sudo npm install -g gulp-cli Gulpバージョンの確認 gulp -v ディレクトリの作成とcd(チェンジディレクトリ) Gulpを使用したいフォルダーを作成し、ターミナルでフォルダーに移動します。 cd /Users/◯◯◯/myproject package.jsonの作成 パッケージを作成しておくことで Gulpバージョンやインストールしたパッケージのバージョンを確認することができます。 npm init プラグインをインストール

そしてGulpを使用してココがもうちょっと便利になったらいいのになーと思った箇所です。

  • インストールが大変
  • ターミナルを操作しないといけない
  • WEBデザイナーには仕切りが高い
  • 複数人での作業に向かない
  • 運用もGulpが必要(修正する際にGulpを使用しないと先祖返りが起こる)

Gulpは自由度も高くフロントエンドの方は覚えておきたいツールだと思います

が!!

今回はWEBデザイナー、Scssの練習をしたい、ターミナル無理という方の為にあるサービスを紹介したいと思います。

前から思っておりました。

「ブラウザーが勝手にScssを認識してくれたらいいのにー。」

「ヘッダー、フッターとか共通部分とかHTMLのままなんとかしたい。」

このGulpがやっている作業をサーバーにアップロードしたら変換してくれるサービスはないのか。

他の方も思っていたはず、、、

今回はそんな同じ悩みを持っていた方にコレを紹介したい!!

↓↓↓↓↓↓↓↓↓↓↓↓↓↓

イイウェブ

イイウェブ | ツールに頼らずSassが使える コンパイルサーバー
ツールに頼らずSassが使えるコンパイルサーバー イイウェブ | iiweb

「イイウェブ」サービスではScssをアップロードすると自動的にコンパイルしたcssを生成してくれます。

誰でも無料で利用することができ、Scssの他にも便利な機能が多数搭載されたサーバーサービスになっていますのでその機能を紹介していきます。

無料で登録できて1アカウントで複数サイトを運営できる

イイウェブ 値段表

1サイト5MBまでのサイトが無料で利用することができます。

5MBってちょっと少ないよね??

ランディングページや練習サイト用に使ってみて実際運営するサイトの場合には標準プランに切り替えるのがオススメです!

そして作ったWEBサイトには一切の広告が付きません!
よくある無料サーバーは下の方に会社の文字が入ったり大きなバナーが表示されますがイイウェブでは管理画面以外表示されないのです。

また1つのアカウントで複数サイトを管理することができます。サイト毎に登録する必要はありません!
これ地味に便利じゃないですかね?

1アカウントで最大100個のサイトまで管理できます。
まったくログインがないと削除されるので定期的にログインする必要があります。

登録できるウェブサイトの数には上限があり、登録直後は3個までですが、その後7日が経過するごとに1個ずつ追加され、最終的には100個までご登録いただけます。

無料プランの利用
管理ページのご利用がないまま31日が経過したアカウントは使用されていないものと判断されて自動的に削除されます。

引用:イイウェブ

ベンダープレフィックス、ミニファイ

cssコンパイル

ベンダープレフィックスが自動で付くのでcssには1つの記述でOK!!
(IEまで対応させたい場合でもプロパティを変更することができる)

管理画面からクリックで

  • ソースマップの埋め込み
  • メディアクエリのまとめ
  • cssの並びを整頓
  • ミニファイ

が選択できます!!

テンプレートを使って共通化ができる

普段はSSIやphpのインクルードファイルを使用してヘッダー、フッターを共通化していくのですが
サーバー環境によって異なります。

イイウェブでは共通化の為にphpに変換する必要がないです。

コンパイル前
@import "_header.html";

<article>
	主コンテンツ
</article>
別ファイル _header.html
<header>
	共通ヘッダー
</header>

コンパイル後

<header>
	共通ヘッダー
</header>

<article>
	主コンテンツ
</article>

内容部分のみHTMLに記述ができる

別ファイル _base.html
<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
		@import *;
	</body>
<html>
@export "/_base.html";

<article>
	主コンテンツ
</article>

コンパイル後

<!DOCTYPE html>
<html>
	<head>...</head>
	<body>
<article>
	主コンテンツ
</article>
	</body>
<html>

インポートという形ではなくHTMLの内容から記述できる方法もあります。

修正やページを量産する場合に便利です。

タイトルやメタタグをページ毎に設定ができる

テンプレートタグ

テンプレート変数を使用することによってページ毎に文字を変更することができます。

HTMLをひとつひとつ開いて設定するのではなく全ページ一気に設定できるので便利!

タイトルやメタの他に条件分岐もできるので「TOPページ」とそれ以外ということも設定できます。

お問い合わせフォームが簡単に作れる

WEBサイトをはじめて作って、お問い合わせフォームの設置はひとつの壁ではないでしょうか。

私もお客さんのお問い合わせフォームを初めて設置した時にphpがまったくできなく苦戦した思い出があります。

イイウェブではphpを必要とせずお問い合わせフォームを設置できるので
コーディングが苦手なWEBデザイナーさんでもプログラマーの力を借りずに設置できます。

イイウェブ reCAPTCHA

さらにGoolgeでreCAPTCHAを設置することによって迷惑メールを排除することができます。

テスト環境と本番環境がある

テスト環境

FTPを使用してアップロードしたファイルはテスト環境のURLから確認することができます。

その後、動作に問題がなければ本番環境にボタンひとつで反映されます。

まとめ

サーバー上で変換する為、サーバーからダウンロードしたファイルを編集できるので複数人の作業にも向いています。

紹介した機能以外にもまだたくさんあるのでイイウェブのマニュアルページを見てください。

今後このようなサービスが主流になってくるのではないかと思っております。

是非使用してみてください。

イイウェブ

Leave a Reply

Your email address will not be published. Required fields are marked *