2018-01-11

Symfony4でBabelとPostCSSを使えるようにする

Symfony

BabelとPostCSSを使えるようにする。

PostCSS and autoprefixing (postcss-loader) (Symfony Docs)

と思ったんだけど、Encore入れるとすでにBabelが有効になってて、ES2015以降のシンタックスで記述できてちゃんとビルドもされる。
実際、yarn.lock を見ると、babel-core babel-loader babel-preset-env をインストールしていることがわかる。
Babelに関連するデフォルトの設定を変更したいときは、ドキュメントのようにすればいいのだけど、とりあえず今はこのままで。

なので、イチから準備するのはPostCSSだけ。

PostCSSを使うためにpostcss-loaderを入れる。
それとプラグイン。とりあえずautoprefixerとpostcss-normalizeを入れる。

$ yarn add --dev postcss-loader autoprefixer postcss-normalize

インストールしたら postcss.config.js の作成。
デフォルトではプロジェクトのルートに作成するようになっているんだけど、ここでは config/ に作成して webpack.config.js に設定を記述するときにパスを指定する。

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-normalize')(),
  ]
}

webpack.config.js に設定を追記。

Encore
    // ...
    .enablePostCssLoader((options) => {
        options.config = {
            path: 'config/postcss.config.js'
        }
    })

これで設定は完了。

あとは assets/css/app.css を書いてビルド。
試しにこんな感じのCSSを書いてみる。

@import-normalize;

div {
  border-radius: 4px;
}

p {
  display: flex;
}

ビルド。

$ yarn run encore dev

ビルドに成功したらNormalize.cssが読み込まれてベンダープレフィックスもちゃんとついてるはず。

2018-01-10

ブロックチェーンをPHPでやっていく

PHP Blockchain

ブロックチェーンの仕組みを勉強するためにPHPで実装（写経）してみた。

gist.github.com

exec.php で非同期処理やるためにampを使っている。
ので、動かすにはampのインストールが必要。
どうでもよいけど、ampって"Accelerated Mobile Pages"を想像してしまうな、、amphpって言ったほうがよいのか。
そもそもコード書いててPHPで非同期処理しなくていいと思った。

blockchain.php が本体。
php exec.php で実行すれば動く。

=== START SIMULATE ===
Miner3 add block. BLOCK: f21abf980c6c56377d7cf5b4729ebc09c420a85786e4edede86d07c1478e65ae
Miner3 add block. BLOCK: 27f3b0e39578361e4bd22853fcb0e4fc193121f31a188365263884a2b6caa557
Miner3 add block. BLOCK: d04571c323ec59c5180e37d917846c4d1f2729493354afaeb7f52b8ea7df5f34
Miner3 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner3 new blockchain. SIZE: 4, LATEST_BLOCK: d04571c323ec59c5180e37d917846c4d1f2729493354afaeb7f52b8ea7df5f34
Miner1 add block. BLOCK: a75097b87109a28473776ce8b08e32cd631b9a5701d1dbf927c7406dc59e0c6c
Miner1 add block. BLOCK: ef05961295542a74136b19270ed5ae64c3b755122b626d8ca38ac43def19b976
Miner1 add block. BLOCK: e20ee1b2ba5a65b584a5290bb184cebb22150772d55db304fd8c1af8f818c150
Miner1 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner1 new blockchain. SIZE: 7, LATEST_BLOCK: e20ee1b2ba5a65b584a5290bb184cebb22150772d55db304fd8c1af8f818c150
Miner2 add block. BLOCK: fa624208be35a727a6230d8f390fd25c31d78fbd079ffbdc5a81b3cc715df00c
Miner2 add block. BLOCK: 67eefa2171825da2112518ed1cb8db86a1e67dc7dbfd6cdf7410b55410e0007d
Miner2 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner2 new blockchain. SIZE: 9, LATEST_BLOCK: 67eefa2171825da2112518ed1cb8db86a1e67dc7dbfd6cdf7410b55410e0007d
Miner3 add block. BLOCK: 5ab9d24da4ab3f1109678733f4e9912c112cc8b2585dadebb557287228c4e880
Miner3 add block. BLOCK: a0657d7db99716c713b6a3ca6095d79990a03225e4b760c31aafea2e41209ef3
Miner3 add block. BLOCK: a8a625e41d478e33cfd47ff9e4f967535d7069c0633597818efe5d18779c7605
Miner3 add block. BLOCK: 6a17e28df917e40ccfbea3ae1d8ae6abda2e958b83a95de9982e9c9e122750bf
Miner3 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner3 new blockchain. SIZE: 13, LATEST_BLOCK: 6a17e28df917e40ccfbea3ae1d8ae6abda2e958b83a95de9982e9c9e122750bf
Miner1 add block. BLOCK: eddd9bba8821a2092b2ebb7be816c5070f7e55bb4d623c72748ce13372230dd9
Miner1 add block. BLOCK: 3d329b88409085acfa9999b40c8d608eeb3819b06009d97cd4cdfd713d711cac
Miner1 add block. BLOCK: 676e868fc430d9304345a5c68e7bfb1c5faa722d93be7a6248c025b374ba5680
Miner1 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner1 new blockchain. SIZE: 16, LATEST_BLOCK: 676e868fc430d9304345a5c68e7bfb1c5faa722d93be7a6248c025b374ba5680
Miner3 add block. BLOCK: 121b078c0b324860d916f4c10d6dc96ebc4885035ea6fbd75f78de5a3d9f8c41
Miner3 add block. BLOCK: 8317660dfd4e74e22e894ef131937004a58b59d2dd9f871a4c9a655f67137180
Miner3 add block. BLOCK: 054db460f22d9026794e30c96d9a7584af65732a7205596fa9110f61f3dba54d
Miner3 broadcast.
Received blockchain is valid. Replacing current blockchain with received blockchain
Miner3 new blockchain. SIZE: 19, LATEST_BLOCK: 054db460f22d9026794e30c96d9a7584af65732a7205596fa9110f61f3dba54d

PHPのコードとしてはうわぁ、、という気しかしない。
でもブロックチェーンについてはだいぶわかってきた。
仕組み自体はとてもシンプルだった。ブロックチェーン。
もちろん、この実装だけじゃ不十分なので、また余裕があるときに手を動かしてみる。

※以下の記事を参考にしました。感謝。。
200行のコードへのブロックチェーンの実装 | プログラミング | POSTD
自分でコードを書きながらブロックチェーンを勉強した - mizchi's blog

2018-01-09

Symfony4のフロントエンド環境構築

Symfony

ここを起点にしてドキュメントを追っかければ、ほぼほぼ大丈夫だと思う。
Managing CSS and JavaScript

まずは、Encoreをインストールする。
Encore Installation (Symfony Docs)

単純にJS・CSSを使うなら public/ に置いて読み込めばいいのだけど、Symfonyでイマドキのフロントエンド環境を構築したい場合はEncoreを使って準備していくと早い。
あと、パッケージマネージャはYarnを使っていることを前提にしてドキュメントが書かれているので、インストールしておくと良さそう。

$ composer require encore asset
$ yarn install

encoreだけじゃなくて、assetコンポーネントも入れておく。
入れておかないとテンプレートで asset() が使えない。

次は最低限のJSとCSSを用意してビルド・読み込みまでやっていく。
First Example (Symfony Docs)

まずは webpack.config.js の修正。
以下の箇所のコメントを外してエントリーポイントを指定する。

// .addEntry('js/app', './assets/js/app.js')
// .addStyleEntry('css/app', './assets/css/app.scss')
.addEntry('js/app', './assets/js/app.js')
.addStyleEntry('css/app', './assets/css/app.css')

CSSファイルの拡張子を変えているのは意図的で、Sassを使うつもりがないから。
assets/ に js/app.js と css/app.css を作成する。

ここまでできたら yarn run でビルド。

$ yarn run encore dev

圧縮したりソースマップをつけたくないなら以下のようにproductionを指定する。

$ yarn run encore production

すると public/build/ にビルドされたJSとCSSが生成されるので、それを読み込めば完了。

<head>
    <!-- ... -->
    <link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
</head>
<body>
    <!-- ... -->
    <script src="{{ asset('build/js/app.js') }}"></script>
</body>

てな感じで、これで最低限。
本当に最低限すぎて、これだとEncore（Webpack）使わなくていいレベル。

これにPostCSSとかBabelとか入れていく。
記事が長くなるので別で書く。