Web

Web研 in シェーキーズ

suckamon

webken02.jpg

最近、会社のメンバーでWeb研なるものを定期的に開いています。

主にWeb制作に関わる業務効率化や、近年のWeb動向についてアツく語り合っています。

今回はボスの計らいで、会社近くのピザ食べ放題「シェーキーズ」でWeb研してきました。

またこのブログでも詳しく取り上げていこうと思っているのですが、議題は主にSASSについて。
うちの制作チームでもSASSによるCSSコーディングが中心となりつつあるのですが、個人によってはSASSを導入しきれてない人もいるので、これを社内で統一しようと画策中です。
将来的にはSASSの社内テンプレートを構築して社内全体の効率化につながったらいいねってことで今回は終わり。

webken01.jpg

プライベートの飲み仲間はテクノロジーの話にまったく興味がないようなので、雑談混じりにアツく仕事の話しながらピザをほおばるのが楽しくて仕方ないです。

(さらに…)

続きを読む

作業効率UP タスクランナーGulp

suckamon

gulp.jpg

フロントエンド開発において、もはや必須となってしまった開発環境Gulp。
今更ながらGulpの魅力について書き留めておきます。

Gulpでできること

プラグインを追加し、タスクを登録していくことで、様々な処理を同時並行で自動化することができます。
僕がコーディングの際によく使うのは主に4つ
1. Sassのコンパイル
2. CSS3ベンダープレフィックスの自動挿入
3. 画像の圧縮
4. BrowserSyncによるライブリロード

中でも4のライブリロードは重宝してます。
その他、HTML、CSS、JSの圧縮など何でもできちゃいます。
ではまずGulpを動かすための環境構築から解説していきます。

Gulp環境構築

GulpはNode.jsのインストールが前提となるので、公式サイトからインストールしましょう。
インストールが完了したらターミナル（コマンドプロンプト）でバージョン確認。

node -v

Node.jsをインストールするとnpm(Node Package Manager)も同時にインストールされます。
npmも同時にバージョン確認しておきましょう。

npm -v

設定ファイル作成

続いて、プロジェクトのディレクトリへ「cd」コマンドで移動し、以下のコマンドを実行します。

npm init

すると色々質問されるので、とりあえず全てEnterでOK。（ここで問われた値は後から変更できます）
これでディレクトリに設定ファイルpackage.jsonが作成されます。

Gulpのインストール

まずはグローバルインストール。

npm install gulp -g

続いてローカルインストール。

npm install gulp --save-dev

「–save-dev」を付けることでローカルにインストールする際にpackage.jsonにインストールしたパッケージが記載されるので、他のプロジェクトでpackage.jsonを使い回すことで共通の開発環境を一括して構築することができます。
package.jsonに記載されたパッケージを一括インストールするコマンドは以下のとおり

npm install

おすすめプラグインのインストール

Gulpをインストールしただけでは何もできないので、僕のよく使うおすすめプラグインをインストールしていきます。
【ローカルサーバーを立ててライブリロード】 

npm browser-sync --save-dev

【CSS3のベンタープレフィックス自動付与】 

npm gulp-autoprefixer --save-dev

【Sassのコンパイル】 

npm gulp-sass --save-dev

【jsファイルの自動圧縮】 

npm gulp-uglify --save-dev

【CSS3のベンタープレフィックス自動付与】 

npm gulp-autoprefixer --save-dev

【画像の自動圧縮】 

npm gulp-imagemin --save-dev

【とりあえず入れとけ】 

npm gulp-plumber --save-dev

gulpfile.jsの作成

プロジェクトのルートディレクトリ（package.jsonと同じディレクトリ）にgulpfile.jsを作成し、タスクを記述していきます。
サンプルで僕の使っているgulpfile.jsを掲載しておきます。
上記で紹介したプラグインをインストールしていれば動くはずです。

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var uglify = require("gulp-uglify");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");
var imagemin = require("gulp-imagemin");
gulp.task("server", function(){
browser({
notify: false
server: {
baseDir: "./"
}
});
});
gulp.task("html", function(){
gulp.src("**/*.html")
.pipe(plumber())
.pipe(browser.reload({stream:true}));
});
gulp.task("sass", function(){
gulp.src("sass/**/*.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true}));
});
gulp.task("sass_watch", function(){
gulp.watch("sass/**/*.scss",["sass"]);
});
gulp.task("js", function(){
gulp.src(["js/**/*.js", "!js/min/**/*.js"])
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("./js/min"))
.pipe(browser.reload({stream:true}));
});
gulp.task("img", function(){
gulp.src("img/*(*.jpg|*.png|*.gif)")
.pipe(imagemin())
.pipe(gulp.dest("./img/min"));
});
gulp.task("default", ['server'], function(){
gulp.watch(["js/**/*.js","!js/min/**/*.js"],["js"]);
gulp.watch("sass/**/*.scss",["sass"]);
gulp.watch("img/*(*.jpg|*.png|*.gif)",["img"]);
gulp.watch("**/*.html", ["html"]);
});

Gulpを使ってみよう

ここまで設定が面倒くさいですが、一度package.json、gulpfile.jsを作ってしまえば、どんなプロジェクトでも使いまわしがきくので頑張って下さい。
他のプロジェクトで使う場合は、使いまわし用のpackage.jsonをディレクトリに置いて「npm install」とコマンド叩くだけ。
先ほど色々インストールしたプラグインを一括でインストールしてくれます。
あとは、これも使いまわし用のgulpfile.jsをディレクトリに置くだけ。
簡単ですね。

gulpfile.jsの中身についてはここでは触れませんが、ソースを見ればなんとなくわかるはず。
とりあえずコマンドで「gulp」と叩いてください。
すると自動でローカルサーバーが立ち上がりブラウザが開くはずです。
この状態でHTMLを編集して保存すると自動でブラウザに反映されます。

SCSSファイルを編集する場合は「/sass/」ディレクトリ内にファイルを置いて編集します。
保存すると同時に自動で「/css/」ディレクトリ内にコンパイルされたCSSファイルが吐き出され、これも自動でブラウザに反映されます。

また、jsも同様「/js/」ディレクトリ内にファイルを置き、編集・保存。すると「/js/min/」に圧縮されたjsファイルが自動で吐き出され、やはり自動でブラウザに反映されます。

画像は「/img/」内にファイルを保存するだけで、圧縮されたファイルが「/img/min/」内に保存されます。
感動ですね。
これで作業効率が5倍くらい上がったような気がします。
次は作業効率10倍にアップするテキストエディタとプラグインを紹介していきます。
お楽しみに！

(さらに…)

続きを読む

ポートフォリオサイト

suckamon コメントを残す

portfolio.jpg

勉強がてらポートフォリオサイトを作ってみました。

https://suckamon.com/portfolio/

最近よく目にするパララックスエフェクトを入れたシングルページにしてみました。

スマホ・タブレットでは動作不安定かも。

あとIEは完全無視。

今後も興味のある技術が出てきたらどんどんギミックを追加していこうと思います。

(さらに…)

続きを読む

MT OGP設定方法

suckamon コメントを残す

YRUO4LCSLB.jpg

最近Googleウェブマスターツールが改名しましたね。
いつの間にかSearch Consoleというかっちょいい名前に変わってました。

さて、そんなSearch Consoleの検索アナリティクスを見ると、このブログではWeb系、特にMovabletype関連の記事への流入が多いようです。
ということで、今後はMovabletypeでよく使う小技を中心にまとめていこうと思います。

MTタグによるOGPメタタグの書き方

MTに限らずCMSでOGPを設定するときは、ページ単位でなくヘッダーテンプレートに記述することになると思います。
そこで、今回はこのブログで実際に記述されているソースを公開していきます。 









< $MTEntrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"$>

では解説していきましょう。
まず１行目。
if文で、カスタムフィールド「EntryH1Title」に値が入っているばあいは、OGPのタイトルに値をセット。
カスタムフィールドに値が入力されていない場合は、そのまま記事タイトルをセットしています。
このブログではSEO対策のため、記事タイトルと記事ページH1出力文を分けているのでif文で分岐させていますが、普通はそのまま「EntryTitle」をセットしておけばいいでしょう。

７行目では、OGPのdescriptionに記事概要をセットしています。
EntryBodyで記事本文を出力し、その中からHTMLタグを除去、最大１００文字までと制限をかけています。

MT記事本文内の画像から最初の画像パスを取得

< $MTEntrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"$>

ポイントは９、１０行目の画像セット。
いったん９行目で変数「og_image」に記事本文中で使用される画像のうち、最初の画像パスを正規表現で抜き出してセット。
１０行目でog:imageに変数「og_image」をセット。
ここがMTでのOGP設定の関所ですね。だいぶ苦労してこのコードにたどり着きました。

この最初の画像を取得するコードは、今回OGPで使用しましたが、幅広い状況で応用できそうですね。

(さらに…)

続きを読む