強まっていこう

あっちゃこっちゃへ強まっていくためのブログです。

gulp で PHP + twig + pug + SCSS あたりで快適にコード書きつつ js、css を min 化するそんな素敵ライフを送る方法

UI のプロトタイプとかちゃちゃっと書きたい時に pug で書いてたりはしたんだけど、pug ばっか書いてすっかり中毒になると、もう素の HTML で twig なんて書いてらんない体に。
pug を twig に変換するやつを書いてくれてる人もいて試しちゃみたけど、どうもイマイチ。ふと思った。pug の | 使って twig を pug 側に書いちまえばええんでねぇの。

こげな感じで。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    |{% block meta %}{% endblock %}
    link(href!="{{ siteUrl('css/main.min.css') }}" rel="stylesheet")
    link(href!="{{ siteUrl('fa/css/fontawesome-all.min.css') }}" rel="stylesheet")
    |{% block head %}{% endblock %}
  body
    script(src!="{{ siteUrl('js/jquery.min.js') }}")

for だの if だのも全て | 使って書いちゃえばイケる。快適ライフ過ぎてあっという間に1つアプリを作った。そのうち紹介したりしなかったりするかもしらん。

機嫌が良いので gulpfile.js を公開しようそうしよう。パスはこんな感じを想定。** はディレクトリ階層問わずってこと。

approot
  pug/**/*.pug
  js/**/*.js
  sass/**/*.scss
  **/*.php

上記パスに各コードを格納。こいつらを gulp の watch で監視しつつ、更新されたら下記のディレクトリにごにょごにょしたファイルを入れて browserSync 使ってブラウザ側をリロードする。PHP は当然リロードだけ。

approot
  public
    js/**/*.min.js
    css/**/*.min.css
  views/**/*.twig

gulpfile.js を動かす前にやること。composer と npm が入っていること前提。

composer require "twig/twig:^2.0"

npm に audit 入ってウザい。SElinux とかコレ系マジ死んで欲しい。デフォルトにすんなハゲがっ!!速攻黙らせる。

npm set audit false

各種 npm モジュールを入れる。とりあえず gulp 4 をやる気がいまいちしないので 3 の最後を入れるべし。

npm install gulp@3.9.1 gulp-connect-php gulp-plumber gulp-pug gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync  --save-dev
var conf = {
  ip: '0.0.0.0',
  port: 8080,
  uiPort: 8081,
  phpPort: 8082,
  documentRoot: './public'
};

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var plumber = require('gulp-plumber');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();

gulp.task('server', () => {
  connectPHP.server({
    port: conf.phpPort,
    hostname: conf.ip,
    base: conf.documentRoot,
    configCallback: (type, collection) => {
      collection.env = Object.assign({ WIZ_APP_ENV: 'gulp' }, process.env);
      return collection;
    }
  }, () => {
    browserSync.init({
      proxy: 'localhost:' + conf.phpPort,
      port: conf.port,
      ui: { port: conf.uiPort }
    });
  });
});

gulp.task('php', [ 'server' ], () => {
  gulp.watch([ '**/*.php', '!vendor/**/*.php', '!node_modules/**/*.php', '!views_c/**/*.php' ], () => {
    browserSync.reload();
  });
});

gulp.task('pug', [ 'server' ], () => {
  gulp.watch([ 'pugs/**/*.pug' ], () => {
    pugc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('js', [ 'server' ], () => {
  gulp.watch([ 'js/**/*.js' ], () => {
    jsc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('scss', [ 'server' ], () => {
  gulp.watch([ 'sass/**/*.scss' ], () => {
    scssc().pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('pugc', () => { pugc(); });
gulp.task('jsc', () => { jsc(); });
gulp.task('scssc', () => { scssc(); });
gulp.task('c', [ 'pugc', 'jsc', 'scssc' ]);
gulp.task('watch', [ 'php', 'pug', 'js', 'scss' ]);
gulp.task('default', [ 'server', 'watch' ]);

function pugc() {
  return gulp.src([ 'pugs/**/*.pug' ])
    .pipe(plumber())
    .pipe(pug({
      pretty: true
    }))
    .pipe(rename({ extname: '.twig' }))
    .pipe(gulp.dest('./views/'))
}

function jsc() {
  return gulp.src('js/**/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest(conf.documentRoot + '/js/'));
}

function scssc() {
  return gulp.src('sass/**/*.scss')
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest(conf.documentRoot + '/css/'));
}

全てを監視させる場合

gulp

8080 でアクセス。

冗長的な書き方。

gulp php pug js scss

これらを監視が必要なもののみにすると監視が軽くなる。デザインしてる時は

gulp pug scss

こんな感じで、とかね。

min 作ったり twig にしたりコンバートだけしたい場合は

gulp c

その冗長な書き方は

gulp pugc jsc scssc

gulp gulp 書くのが非常にバカバカしいので .zshrc に

alias g='gulp';

と一行入れるともっと快適になれる。

g php js

素敵。これ自分的には必須。C をボリボリ書いてる時とか

alias m='make';

としとかないとイライラする。

むちゃくちゃ叩くコマンドを悠長にタイプし続けれるほど人生は長くない。

毎度忘れる正規表現代表格 肯定否定先読み後読みの覚え方のコツ

毎回忘れてググる人多いでしょ?まぁ覚える必要も無いんですが、簡単に覚えられるので自分なりのコツを。

後ろにその文字が無いとダメ、あったらダメ
前にその文字が無いとダメ、あったらダメ

この4パターンがあるわけですが

何かしらの文字(?=無いとダメ)

(?<=無いとダメ)何かしらの文字

まずこの2つを覚えましょう。

(?=) は後ろ側にその文字が無いとダメなことを表しています。

(?<=) は前側にその文字が無いとダメなことを表しています。

?= の間に < を入れて前に押しやる(シフトする)イメージで覚えておくと良いです。

これらの = を ! に変えると、あったらダメに変化します。

何かしらの文字(?!あったらダメ)

(?<!あったらダメ)何かしらの文字

こうやって覚えるといくぶん覚えやすいんじゃないでしょうか。

実はすごく大したことない代物なんですが、日本語名がいかつすぎるのと記号がいまいちなので覚えづらく感じるんだと思います。

続きを読む

PHP、JS、Sass 編集でブラウザを自動更新しつつ CSS、JS を min 化して幸せになっときたい諸氏へ

大概の FW 使ってると、public 以下が公開用ファイル達のいるドキュメントルートで、その上に PHP のファイルなどが居る的な感じになっているはず。

controllers/*.php
models/*.php
sass/*.scss
js/*.js
public/css/*.min.css
public/js/*.min.js
public/index.php

要するにこんな感じになってんじゃないかと思うわけ。

そいだら、js や scss のディレクトリ配下のファイルいじったら勝手に public 以下に min が作られてリロードされると楽だと思うわけ。

php もいじったら勝手にリロードされたら楽だと思うわけ。

そんな gulpfile.js なわけ。

npm i gulp@3.9.1 gulp-connect-php gulp-plumber gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync --save-dev
var conf = {
  ip: '0.0.0.0',
  port: 8080,
  uiPort: 8081,
  phpPort: 8082,
  documentRoot: './public'
};

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var plumber = require('gulp-plumber');
var pug = require('gulp-pug');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();

gulp.task('server', () => {
  connectPHP.server({
    port: conf.phpPort,
    hostname: conf.ip,
    base: conf.documentRoot,
  }, () => {
    browserSync.init({
      proxy: 'localhost:' + conf.phpPort,
      port: conf.port,
      ui: { port: conf.uiPort }
    });
  });
});

gulp.task('php', [ 'server' ], () => {
  gulp.watch([ '**/*.php' ], () => {
    gulp.src([ '**/*.php', '!vendor/**/*.php', '!node_modules/**/*.php' ])
      .pipe(plumber())
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('js', [ 'server' ], () => {
  gulp.watch([ 'js/**/*.js' ], () => {
    gulp.src('js/**/*.js')
      .pipe(plumber())
      .pipe(uglify())
      .pipe(rename({ extname: '.min.js' }))
      .pipe(gulp.dest(conf.documentRoot + '/js/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('scss', [ 'server' ], () => {
  gulp.watch([ 'sass/**/*.scss' ], () => {
    gulp.src('sass/**/*.scss')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(cleanCSS())
      .pipe(rename({ extname: '.min.css' }))
      .pipe(gulp.dest(conf.documentRoot + '/css/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch', [ 'php', 'js', 'scss' ]);

gulp.task('default', [ 'watch' ]);

gulp ひっぱたいて 8080 にアクセスすると幸せになるわけ。PHP 側から js や css は min を指定しておくと幸せなわけ。

ファイルが増えまくってリロードが遅くなってきたら、いじるファイルタイプだけを監視すれば良いわけ。

gulp php js

後はノリ。

HTML、JS、Sass 編集でブラウザー自動更新、そして、CSS、JS を min 化、そんな gulpfile.js は無いかとお困りの貴殿へ

どうやりゃ良いんですか?って聞かれたので。確かにまとまってるところが無いっぽい。

よくやるパターンだと思うけどなぁーーーと思ったので貼り付ける。

npm i gulp@3.9.1 gulp-plumber gulp-sass gulp-uglify gulp-clean-css gulp-rename browser-sync --save-dev
var conf = {
  port: 8080,
  uiPort: 8081
};

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();

gulp.task('uglify', () => {
  gulp.src([ 'js/**/*.js', '!js/**/*.min.js' ])
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('js/'));
});

gulp.task('cleanCSS',() => {
  gulp.src([ 'css/**/*.css', '!css/**/*.min.css' ])
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(gulp.dest('css/'));
});

gulp.task('minify', [ 'uglify', 'cleanCSS' ]);

gulp.task('browserSync', () => {
  browserSync.init({
    port: conf.port,
    ui: { port: conf.uiPort },
    server: './'
  });
});

gulp.task('watch-html', [ 'browserSync' ], () => {
  gulp.watch([ '**/*.html' ], () => {
    gulp.src('**/*.html')
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-js', [ 'browserSync' ], () => {
  gulp.watch([ 'js/**/*.js' ], () => {
    gulp.src('js/**/*.js')
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-sass', [ 'browserSync' ], () => {
  gulp.watch([ 'sass/**/*.sass' ], () => {
    gulp.src('sass/**/*.sass')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(gulp.dest('./css/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch-scss', [ 'browserSync' ], () => {
  gulp.watch([ 'sass/**/*.scss' ], () => {
    gulp.src('sass/**/*.scss')
      .pipe(plumber())
      .pipe(sass({ outputStyle: 'expanded' }))
      .pipe(gulp.dest('./css/'))
      .pipe(browserSync.reload({ stream: true }));
  });
});

gulp.task('watch', [ 'watch-html', 'watch-js', 'watch-sass', 'watch-scss' ]);

gulp.task('default', [ 'watch' ]);
gulp

で、ポート 8080 で browserSync のサーバが Listen。

index.html
js/*.js
sass/*.sass
sass/*.scss

こんなディレクトリ構造の HTML、JS、Sass のファイルを弄るとブラウザをリロード。
Sass のファイルは css/ に .css として作成される。
それぞれディレクトリは深さ問わず。

全部監視させるとリロードが遅くなる場合、監視対象を絞れば良し。JS だけ監視するなら

gulp watch-js

HTML と Sass だけなら

gulp watch-html watch-sass
gulp minify

とやりゃ、js/、css/ 内に min が作成される。

後はノリとグルーヴ感を大切にすれば OK。

メルカリで出品してみたいけどよくわからない初心者の不安を払拭するための記事 - メルカリのススメ

家にいらない物があるからメルカリで売りたいなぁ。でもよくわからんし、面倒くさそうだから良いやぁ。

そんな人って多いと思います。そう言う人達の背中を押すための記事になればと思い書いてみます。

メルカリはなにげに高値で物が売れます。

自分は仕事柄、技術書籍を多く出品しているのですが、書き込みや折れ目などがなければ、買った値段の半値程度で売れたりします。

3,400円のものが 3,000円で売れたりもしました。アマゾンのリコマースでは1,000円と評価された品です。ブックオフだと更に酷い評価額になります。

嫁のブランド物は質屋で 1,000円で買い取りになると言われたものが 14,000円で売れたりしましたし。

ただ売れたお金から手数用としてメルカリに 10% 取られはしますけども。

(手数料なしの楽天ラクマってのもあるんですが人が少ないせいかあまり売れません。もうちょっと流行ってくれると良いんですがね・・・。)

3,000円で売れたら自分に入るお金は 2,700円です。基本、送料込みでの出品にすべきなのでここからさらに送料が引かれます。

それでも随分と街の中古屋に売るよりは手元にお金が入ってくるので是非活用すべきだと思うんですが、恐らく大半の人が億劫になる部分。それが配送だと思います。

どうやって送りゃ良いのかわからん!いくらかかるのかもわからん!これが一番のボトルネックでしょう。実際、自分も嫁も嫁の周りもそうでしたからね。間違いないと思います。

なのでそこを説明します。

送る方法として郵便局とヤマトがあります。ヤマトであればヤマトに取りに来てもらう(30円かかる)か、ファミマから送ることが出来ます(ヤマト営業所持ち込みも出来ますが近場にないと思います)。

ヤマトに集荷を頼むのは頼むのも待つのも面倒なのでよっぽど大きい商品以外はコンビニ持ち込みの方が良いと思います。実際自分はコンビニばかりです。

商品が売れるとメルカリの画面上から QR が出力出来るようになるので、これをファミマにおいてある Fami ポートで読み込ませて伝票を出し、レジへ発送商品と共に持っていくと、伝票を入れるためのシートをくれるのでこれを箱に貼り、伝票をその中に入れて店員さんに渡すだけで終わりです。

続きを読む

森友問題の主犯格だと思われている酒井弁護士宅へ菅野完氏がアタック敢行

右翼学校 -> 国有地を激安で売却 -> 公文書書き換え -> 汚職問題

www.nikkan-gendai.com

とうとう汚職問題まで飛び出し問題がどんどん深刻化している森友問題。呆れ果てるばかりです。

この問題の中心人物であると噂される酒井弁護士宅へ菅野完氏が突撃しました。

この酒井弁護士なる人物一体どういった人物かと言うと

籠池氏、近畿理財局、大阪府私学課、キアラ設計、藤原工業、これら森友問題の登場人物たち全てとやり取りをしていた弁護士です。

籠池氏が雇っていた弁護士なのですが、ごみ処理業者の田中造園社長、秋山肇さんが自殺した翌日、籠池氏の代理人を画面蒼白になりつつ辞めさせてくれと籠池さんに頼んできたらしいです。立花氏の動画内で籠池氏の肉声によるその件についての話が聞けます。

www.youtube.com

裏になにか真っ黒なものを感じざるを得ませんが、とにかく色んな情報を持っていたにもかかわらず全てをほっぽらかして、籠池氏を見捨てる形で逃げた最悪の弁護士です。おかげで籠池氏は長期勾留され続けるハメに。

一説には籠池氏の命を守るために囲っているんだ、と言う話もありますが、ウソかホントかはわかりませんけどあながち絶対ウソとも言えない気がしてしまいます。

今回、菅野氏が何故突撃したかと言うと、森友への口裏合わせを行ったことを先日財務省が認めた件。

lite-ra.com

これは麻生氏も認めています。これで佐川氏は偽証罪で逮捕でしょう。本格的な佐川切りです。

www.nikkei.com

この件で、以前、酒井弁護士がメディアに流したFAXに問題が。

籠池氏に身を隠せと財務省から話が来た、なんてことが言われているがそんなことは一切ない、と言う内容です。

twitter.com

このFAX丸ごとウソじゃねぇか、と言う事で突撃とのこと。

で、実際の突撃の様子がこちら。

https://ssl.twitcasting.tv/c:suganostaff/movie/456053772ssl.twitcasting.tv

しつこくピンポンしていたところ、住居侵入で警察を呼ぶぞ、と脅す酒井弁護士。呼んでください、呼びましょか?と応戦する菅野氏。

結局酒井氏が警察を呼んだのですが、呼び鈴を鳴らしているだけなので全く法に触れるわけもなく。何をしていたか話だけ聞いて帰っていく警察。

なんなんですかこの弁護士・・・。こんな無駄なことで警察を呼んでまでして税金の無駄遣い。一体このおっちゃんのおかげでいくら税金が無駄になったんでしょうか。

土地取引、国会空転、学校も丸ごと無駄になりましたし、学校の理事である籠池氏はとっつかまり、官僚が自殺までした。莫大な国益が失われたんですよ。

ただでさえ経済がアップアップでそれに対して手を打たなければ国が死ぬのに、こんなくだらない問題で丸一年国会が死んだ。ありえないでしょ・・・。

主犯かどうかわからない、はもうないですね。メディアからも逃げているらしく、これだけ逃げ散らかしていると言うことはやましいことがあるからですし。

恐らく怒りを覚えた国民が相当いると思うので、住所がバレるような配信を行うのはどうかと思いますが、さすがにここまでの重罪だとどうでもよくなってきます。数々の嫌がらせをされるでしょうが、しょうがなしかと。

そのうち大阪地検特捜部に引っ張られて真実が表に出てくると思います。今までも十分な爆弾が埋まっていましたが、さらなる爆弾が埋まっているんでしょうか・・・。

二度とこんな馬鹿らしいことが起こらないよう、しっかりと原因を究明し対策を練ることが大切だと思います。

日本カジノの入場料6,000円。さらに週3、月10回までの制限。

toyokeizai.net

まぁディズニーランドの入場料が今や7,400円だと考えれば安いですよね・・・ってたけぇし。そもそもディズニーが上がりすぎだし。昔は5,000円ぐらいだったのに。

依存症対策と言う名の、パチ屋や競輪、競馬、コインゲームコーナーにたむろしているような輩を弾くための障害として設置したいのはわかります。

そもそも外貨獲得のためだから、というのもまぁ良いでしょう。つっても高すぎでしょ、これ。2,000円とか言っていたのに公明党が余計なおせっかいで結局6,000円ですよ。

カジノで内需も回せるかと思いましたが、こりゃ希望薄いですね。こんな高い入場料にしたら、ガッツリ稼いでやろうと言う人間しか行かないです。

ちょっと気軽にカジノやって、飯食って、ショーでも見るか、みたいな感覚で払える値段じゃないです。相当楽しいアトラクションがないと払えません。家族客の見込みはかなり厳しいでしょうね。

なかなかのセンス無しダメ臭がのっけから漂っておりますね。中身も利権の取り合いでどうせぐちゃぐちゃになるんでしょう。

どこが利権に絡んでくるのか予想書いておきます。今持っている利権も含めて。

胴元 利権 カジノ利権予想
警察庁 パチンコ、パチスロ 設置機械の検定&治安の維持
農水省 競馬 IR内に競馬場を
経産省 競輪・オート IR内に競輪・オートを
国交省 競艇 IR内に競艇を&カジノ施設の道路と建物管理
総務省 宝くじ IR内で巨額富くじ&IR内で銀行の仕切り
文科省 サッカーくじ IR内で野球・サッカー賭博場開帳&正しいギャンブルとの接し方啓蒙
厚労省 なし ギャンブル依存対策&IR施設内飲食店許認可
地方自治 公営競馬 国が仕切るので出る幕なし

考えれば考える程利権でウハウハですな!売り上げた利益も改ざん隠滅させて全部飲み代と裏金に回したり官僚全部で山分けしちゃったりして!最高ですなぁ。ヒューヒュー。

ま、ろくな結果にならんと思います、日本カジノ。期待していただけに、がっかりですわ。