2017-01-05

.gitignoreでフォルダ内を複雑に無視する方法

git

ディレクトリ内にある特定のフォルダのみignoreしたい場合は（今回の場合はhoge）
面倒だが以下のように書いていくしかないみたい。
全体を無視
↓
その下の特定のディレクトリだけ許可
↓
その下の特定のディレクトリの下を無視
↓
その下の特定のディレクトリの下の特定の・・・・

めんどくさいけどwordpressのテーマディレクトリのみ管理したと行った場合に使えます。

#wp
cms/wp/*
!cms/wp/wp-content/
cms/wp/wp-content/*
!cms/wp/wp-content/themes/
cms/wp/wp-content/themes/*
!cms/wp/wp-content/themes/hoge/

【参考サイト】
[ようやく見つけたかもしれない]WordpressサイトをGit管理する方法[メモ] - Qiita
[Git] .gitignoreの仕様詳解 - Qiita

2017-01-05

gulpで引数によって処理を分けたい

gulp Node.js

例えば、引数によって開発環境ではjsをそのまま、本番環境ではminifyする。
などしたい場合。

gulplife.coffee

############
# module
############

gulp = require 'gulp'
coffee = require 'gulp-coffee' # coffeescriptを書くのに必要
uglify = require 'gulp-uglify' # ファイルをminify
gulpIf = require 'gulp-if' # 条件文を使えるようにする
minimist = require 'minimist' # タスクに引数を渡せる


############
# path
############

paths =
  assets: "./src/root/assets"
  assets2: "../htdocs/assets"

############
# 変数
############

# 引数をタスクに渡す
knownOptions =
  string: 'env'
  default:
    env: process.env.NODE_ENV || ''  #ここでデフォルト値を設定できる

options = minimist(process.argv.slice(2), knownOptions)

############
# タスク
############
gulp.task 'coffee',()->
  gulp.src paths.assets + '/js/**/*.coffee', { sourcemaps: true }
  .pipe coffee({ bare: true })
  .pipe gulpIf(!(options.env is 'dev'), uglify())
  .pipe gulp.dest(paths.assets2 + '/js')

重要なのは、「gulpIf」と「minimist」です。
gulpIfはタスクのpipeの中で、if文が使えるというもの。
minimistは、コマンドラインを叩くときの引数をパースしてオブジェクトとして返してくれる。

引数を付け忘れる、なにも付けないとき　-> minifyされる

$ gulp coffee

引数にdevをつける　-> minifyされない

$ gulp coffee --env dev

引数にdev以外をつける　-> minifyされる

$ gulp coffee --env production

【参考サイト】
CLIから引数を渡す | gulp 日本語リファレンス | js STUDIO

2016-12-31

モバイルサイト高速化技術 AMP

AMP

最近話題になっているAMP(Accelerated Mobile Pages)を勉強してみました。
AMP

AMPページのデモを作ってみたので以下からどうぞ！（スマフォでみてください）

ソースはこちら
https://github.com/underground0930/AMP_TEST

デモはこちら
https://underground0930.github.io/AMP_TEST/

モバイルサイトを爆速に作れる、というgoogleが開発した技術です。
今回のデモは、動画や外部SNS読みまくってるので遅いですが。。
ためしにgoogleで「AMPページ」と検索すると（スマフォで）、対応しているページは
⚡️AMP
が表示されるはずです。そのページは描画が普通のページに比べてかなり早いです。

概要をかいつまんで書くと
・img、video、iframe、formタグ… その他、多くのタグが使用禁止。
・AMP JS以外のjavascript禁止なので、速い(javascriptは使えない)
・外部CSS禁止、inlineのcssのみ,容量は50KB以内、なので読み込み、描画が速い
・要素にwidth,heightを指定しなくてはいけないので、描画が速い
・ページ内の上下でソースの読み込みの優先順位を決めているらしい
・AMP JSは非同期で処理されるので速い
・などなど、、

制約がかなりあるので、高機能なjsで作られているページや演出がほどこされているページには向いていません。
一般的な広告の受託案件ではあまりお目にかからないかも。サービスやってる会社の記事詳細ページとか。
用途は限定はされてしまいますが、今後徐々に広まっていくと思われます。

この記事では具体的なデモを載せるので詳しい技術の説明は、以下のICSさんの記事をみてください。
モバイルページの高速化！ AMPの利点と対応HTMLの作り方

ちなみに、ampページは AMP CDNにキャッシュされてより高速に表示をします。
キャッシュされているかどうかは以下のように、対応したURLを専用のサイトの後ろにパラメータでつければOK
見れればキャッシュされています。

// httpページの場合
https://cdn.ampproject.org/c/【確認したいAMPのURL】
// httpsページの場合
https://cdn.ampproject.org/c/s/【確認したいAMPのURL】

僕が作ったdemoも以下で見れました。

https://cdn.ampproject.org/c/s/underground0930.github.io/AMP_TEST/

AMPページは、静的にコーディングする、というよりCMSなどで通常版のページとAMPのページを出力する。
という使い方をするので、MovableTypeやWordpressで運用しているサイトは一度検討してみるといいかもしれません。このブログもいつか。。

■参考にさせてもらった記事
http://qiita.com/daikiueno/items/e239bb0723bd97c55071
https://www.suzukikenichi.com/blog/how-to-see-your-amp-pages-cached-on-amp-cdn/

メモブログ

技術的なことを書き連ねるブログ

.gitignoreでフォルダ内を複雑に無視する方法

gulpで引数によって処理を分けたい

モバイルサイト高速化技術 AMP