9月 2016 - 株式会社インターエデュ・ドットコム

株式会社インターエデュ・ドットコム > 2016年 > 9月

SASS(scss)とLESSの違い

2016-09-30 20:09 - m.tanaka

こんにちは。デザイン担当の田中です。
今回、SASS(scss)とLESSの違いついて簡単に紹介をしたいと思います。

SASS・LESSとは

SASSとLESSはcssを生成するための技術です。
コンパイルしてcssを用意するという意味では、差はそんなにありません。
前回紹介しました　SASS(scss)の入門　を見ていただくと全体像がわかるかと思います。

SASS(scss)とLESSの記述の違い

■ネスト（入れ子）
SASS(scss)とLESSの差はありません。

SASS(scss)

.box{
    .red{
        background-color: #ff0000;
    }
    .blue{
        background-color: #0000ff;
    }
}

.box{

.red{

background-color: #ff0000;

}

.blue{

background-color: #0000ff;

}

LESS

.box{
    .red{
        background-color: #ff0000;
    }
    .blue{
        background-color: #0000ff;
    }
}

.box{

.red{

background-color: #ff0000;

}

.blue{

background-color: #0000ff;

}

↓

css

.box .red {
  background-color: #ff0000;
}

.box .blue {
  background-color: #0000ff;
}

.box .red {

background-color: #ff0000;

}

.box .blue {

background-color: #0000ff;

}

■変数
変数の定義の仕方が微妙に違います。SASS(scss)なら「$」、LESSなら「@」です。

SASS(scss)

$red: #ff0000;
.box{
    .title{
        background-color: $red;
    }
    .button{
        background-color: $red;
    }
}

$red: #ff0000;

.box{

.title{

background-color: $red;

}

.button{

background-color: $red;

}

LESS

@red: #ff0000;
.box{
    .title{
        background-color: @red;
    }
    .button{
        background-color: @red;
    }
}

@red: #ff0000;

.box{

.title{

background-color: @red;

}

.button{

background-color: @red;

}

↓

css

.box .title {
  background-color: #ff0000;
}

.box .button {
  background-color: #ff0000;
}

.box .title {

background-color: #ff0000;

}

.box .button {

background-color: #ff0000;

}

■mixin
これはSASS(scss)とLESSで差があります。引数の定義は変数と同じで「$」「@」の差があります。LESSの方が簡単ですが、私はLESSだとclassと見分けがしづらいのでSASS(scss)のほうが好みです。

SASS(scss)

@mixin transformRotate($to) {
    -moz-transform: rotate($to);
    -webkit-transform: rotate($to);
    transform: rotate($to);
}
.box{
    @include transformRotate(45deg);
}

@mixin transformRotate($to) {

-moz-transform: rotate($to);

-webkit-transform: rotate($to);

transform: rotate($to);

}

.box{

@include transformRotate(45deg);

}

LESS

.transformRotate(@to) {
    -moz-transform: rotate(@to);
    -webkit-transform: rotate(@to);
    transform: rotate(@to);
}
.box{
    .transformRotate(45deg);
}

.transformRotate(@to) {

-moz-transform: rotate(@to);

-webkit-transform: rotate(@to);

transform: rotate(@to);

}

.box{

.transformRotate(45deg);

}

↓

css

.box {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.box {

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

■インポート
SASS(scss)とLESSの差はありません。

SASS(scss)

@import "./mixin.scss";

1	@import "./mixin.scss";

LESS

@import "./mixin.less";

1	@import "./mixin.less";

最後に

いかがでしたでしょうか。
SASSがRubyベース、LESSがJavaScriptベースと、裏側に差があり機能で「できること」「できないこと」がありますが、今回ご紹介した内容ではほとんど差がありませんね。
SASSの方が機能が多く、ウェブ上の情報・書籍の量でも一歩リードしているようですが、LESSもcssにより近いという意味で導入をしやすいメリットがあります。
LESSも　SASS(scss)の入門　で紹介いたしました「Prepros」でコンパイルできます。
一歩踏み出せない方は、LESSからはじめてみるのも良いのではないでしょうか。

ページスピードのチューニングその１：CSSとJSによるレンダリングブロックの仕組み

- NozawaTakeshi

page speed insightを見るとCSSのレンダリングブロックのアラートが出ることがあります。特にスマートフォンでページをチェックしたときにはこのメッセージがよく表示されると思います。

Googleのレファレンスを見ると、ファーストビューに必要なものはhead内でインラインで記述し、それ以外のものはあとから読み込むようにしてくださいとのことです。

今回、かなりこの問題の解決に苦労したので、いろいろ調べたことをまとめてみたいと思います。

基本的にはGoogleのベスト・プラクティス集である”Web Fundamentals“のうち、
「クリティカルレンダリングパス」という章を参考に見ていきたいと思います。

そもそもレンダリングブロックとは
javascriptとcssの依存関係
ファーストビューのレンダリングブロック

こんな内容でお送り致します。

>>続きを読む

EC2のGCC最適化

2016-09-23 19:43 - saito

こんにちは。エンジニアの齋藤です。今回は、前回メモした、

メモ：gccの最適化オプション。今後コンパイルする時にテスト。

についてちょっと書いてみようかと思います。
まずGCCですが、これはGnu Compiler Collection(Gnu C Compiler)の略です。
GNUというプロジェクトが作った、色々な言語のソースコードを、CPUが実行できるようにコンパイルしてくれるものです。
ソースからインストールする時のmakeコマンドで動いてるヤツです。

そして、このGCCの最適化オプションを使うとどうなるかですが、CPUに合わせてコンパイルするので、できあがったバイナリの実行速度が速くなります。

実際には、configureの前に、

export CFLAGS="-O2 -march=native -pipe"
export CXXFLAGS="${CFLAGS}"

export CFLAGS="-O2 -march=native -pipe"

export CXXFLAGS="${CFLAGS}"

というコマンドを実行しています。

この2つのコマンドですが、それぞれ
CFLAGS → Cコンパイラの引数
CXXFLAGS → C++コンパイラの引数

さらにそのオプションで、
-O2 → 最適化レベル。7段階ありますが、2が推奨のレベルです。
-march=native → micro architecture。CPUに合わせたものを指定します。nativeだと自動的にそのCPUに合わせたものにしてくれます。
-pipe → コンパイル時間を短縮してくれます。作成されるバイナリには特に影響ありません。
という感じです。
ここらへんはGCCの最適化 – Gentoo Wikiが詳しく解説してくれています。

問題は、CPUに合わせて最適化させるので、他のCPUが違うサーバにバイナリを持って行った時に動かなくなったりします。
Amazon EC2では、インスタンスタイプが違えばCPUも違うので、インスタンスを変更したりした時に動かなくなりそうな懸念があります。
なので少し調べてみました。

t1.micro	Xeon E5-2670 v2	march=core-avx-i
t2.nano	Xeon E5-2676 v3	march=core2
t2.micro	Xeon E5-2676 v3	march=core-avx2
t2.small	Xeon E5-2676 v3	march=core-avx2
t2.small (昔に作ったもの)	Xeon E5-2670 v2	march=core-avx-i
t2.medium	Xeon E5-2676 v3	march=core-avx2
m1.small	Xeon E5-2651 v2	march=core-avx-i
m1.small (昔に作ったもの)	Xeon E5-2650 0	march=corei7-avx
m3.medium	Xeon E5-2670 v2	march=core-avx-i
m3.large	Xeon E5-2670 v2	march=core-avx-i
m4.large	Xeon E5-2676 v3	march=core-avx2
c4.large	Xeon E5-2666 v3	march=core2

と、どれもバラバラな結果ですが、とりあえず最新世代はHaswellになっていました。
ただ、それでもmarchはnativeでcore-avx2にはならないようです。
一応、最新世代ならGCCコマンドで-march=core-avx2と指定した時でもエラーにはならなかったので、おそらく大丈夫だとは思います…多分…
もし試す方がいたら自己責任でお願いします…

豪華なランチに行けたわけ・・・

2016-09-16 19:36 - 加福

とってもお久しぶりの人事ブログの更新です。

ブログにも何度か登場しているキックオフと懇親会の話題。

エデュでは年度の上期下期の区切りに、全社員参加のキックオフと懇親会を行います。

その懇親会中にゲーム大会が行われるのですが…

景品が『チームで行く！ご褒美ランチ』です(*^-^*)

先日、優勝チームがご褒美ランチに行ってきました☆彡

今回はなんと…『ステーキコース』(^_-)-☆

しかも、ビルの51階のお店なので新宿一望出来ちゃいます。

普段はソリューション事業部の方は外回りで、あまり制作の人と

お昼を一緒にとることは少ないので、貴重な時間です。

このご褒美ランチは、社員にもとっても好評な企画♪

私はまだご褒美GETした事ないので…次回こそは！と燃えています。

ご褒美ランチ おいしい食事しながら、どんな話をしたのかな？

WordPressサイトのAMP対応

- hagiwara

こんにちは。開発担当の萩原です。

以前からAMPが話題になっておりますが、
対応方法やAMP_HTMLについての情報はたくさん公開されておりますので、
AMP_HTMLの基本的な文法や仕様などの部分は割愛させていただきまして、
今回はWordPressサイトのAMP対応について書かせていただきたいと思います。

その方法ですが、WordPressを制作したAutomattic社が公開している「AMP」という
プラグインをダウンロードしてきて管理画面から有効化するだけです。
※この記事時点でのプラグインのバージョンは0.3.3です

そうしますと既存のページのURL末尾に「/amp/」か「?amp=1」を追加してアクセスすると
AMP対応したページが表示されます。

これでAMP対応はできるのですが、このプラグインの仕組みとしては、
AMP用のURLへのリクエストがあったら、
このプラグイン内に持っているAMP用のテーマに切り替えて表示するという
感じになっておりまして、
このプラグインでAMP対応したサイトの見た目はどのサイトもほぼ同じになってしまいます。
もしくは、プラグイン内のテーマを自分で変更する方法もありますが、
プラグインをアップデートするたびに、そのテーマを変更し直さなければなりません。
また、この状態ではGoogleAnalyticsのタグも入っていません。

そのような状態ではAMP対応できても意味がないと思う方もいらっしゃると思いますので、
・WordPressサイトをAMP対応して、AMP用のテーマをプラグインの外で管理する方法
・WordPressサイトをAMP対応して、GoogleAnalyticsのタグを入れる方法
を紹介させていただきます。

WordPressサイトをAMP対応して、AMP用のテーマをプラグインの外で管理する方法

AMPプラグインの「templates」ディレクトリを、
使用しているテーマのディレクトリに「amp_templates」という名前でコピーしてください。
そしてそのテーマのfunctions.phpに以下の記述を追加してください。

add_filter('amp_post_template_dir', 'my_amp_post_template_dir');
function my_amp_post_template_dir($amp_template_dir)
{
	$amp_template_dir = TEMPLATEPATH.'/amp_templates';
	return $amp_template_dir;
}

add_filter('amp_post_template_dir', 'my_amp_post_template_dir');

function my_amp_post_template_dir($amp_template_dir)

{

$amp_template_dir = TEMPLATEPATH.'/amp_templates';

return $amp_template_dir;

}

「amp_post_template_dir」のフィルタを使ってテンプレートディレクトリを変更することで、
amp_templates内のテンプレートファイルを読み込むようになりますので、
プラグイン内のテンプレートファイルを書き換えなくて良くなります。
※「amp_templates」は任意の名前で結構です

WordPressサイトをAMP対応して、GoogleAnalyticsのタグを入れる方法

使用しているテーマのfunctions.phpに以下の記述を追加してください。

add_filter('amp_post_template_analytics', 'my_amp_post_template_analytics');
function my_amp_post_template_analytics($analytics)
{
    if (!is_array($analytics)){
        $analytics = array();
    }
    $analytics['my-site'] = array(
        'type' => 'googleanalytics',
        'attributes' => array(),
        'config_data' => array(
            'vars' => array(
                'account' => "UA-XXXXX-Y"
            ),
            'triggers' => array(
                'trackPageview' => array(
                    'on' => 'visible',
                    'request' => 'pageview',
                ),
            ),
        ),
    );
    return $analytics;
}

add_filter('amp_post_template_analytics', 'my_amp_post_template_analytics');

function my_amp_post_template_analytics($analytics)

{

if (!is_array($analytics)){

$analytics = array();

}

$analytics['my-site'] = array(

'type' => 'googleanalytics',

'attributes' => array(),

'config_data' => array(

'vars' => array(

'account' => "UA-XXXXX-Y"

'triggers' => array(

'trackPageview' => array(

'on' => 'visible',

'request' => 'pageview',

);

return $analytics;

}

「amp_post_template_analytics」のフィルタを使って、GoogleAnalyticsの情報をセットします。
「account」には任意のトラッキングIDを入れてください。

最後に

このプラグインでは「投稿ページ」しかAMP対応しないのですが、
「固定ページ」もAMP対応する方法です。
この方法はプラグインファイルを変更するのであまりお勧めはできませんが、
どうしても対応させたい場合は、

AMPプラグイン内のamp.phpの40行目あたりの

add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK );
add_post_type_support( 'post', AMP_QUERY_VAR );

1 2	add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK ); add_post_type_support( 'post', AMP_QUERY_VAR );

を

add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK | EP_PAGES );
add_post_type_support( 'post', AMP_QUERY_VAR );
add_post_type_support( 'page', AMP_QUERY_VAR );

add_rewrite_endpoint( AMP_QUERY_VAR, EP_PERMALINK | EP_PAGES );

add_post_type_support( 'post', AMP_QUERY_VAR );

add_post_type_support( 'page', AMP_QUERY_VAR );

に変更すると固定ページもAMP対応の対象となります。

以上となります。ご参考になりましたら幸いです。

1 / 212 »

2016年9月
月	火	水	木	金	土	日
« 8月		11月 »
	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

PROFILE

株式会社
インターエデュ・ドットコム

〒151-0053
東京都渋谷区代々木1-12-8 4F

SASS(scss)とLESSの違い

SASS・LESSとは

SASS(scss)とLESSの記述の違い

SASS(scss)

LESS

css

SASS(scss)

LESS

css

SASS(scss)

LESS

css

SASS(scss)

LESS

最後に

ページスピードのチューニングその１：CSSとJSによるレンダリングブロックの仕組み

EC2のGCC最適化

豪華なランチに行けたわけ・・・

WordPressサイトのAMP対応

WordPressサイトをAMP対応して、AMP用のテーマをプラグインの外で管理する方法

WordPressサイトをAMP対応して、GoogleAnalyticsのタグを入れる方法

最後に

カテゴリー

最近の投稿

アーカイブ

PROFILE