読者です 読者をやめる 読者になる 読者になる

Laravel Elixir から Laravel Mix へ

laravel php javascript

あけましておめでとうございます。id:localdisk です。今年もよろしくお願いします。さて、昨年末 Laravel の作者である Taylor さんからこんな発言がありました。

Laravel Elixir のリネーム

Laravel 5.4 のリリースに合わせて Laravel Elixir の名前の変更を考えているとのこと。うん、サーチビリティよくないですからね。プログラミング言語である Elixir と被ってるという指摘は以前からありましたし。

このエントリとはあまり関係がないのですが、この手の話題を見聞きする度に Fabric という言葉はなぜ人々を惹きつけるのかということを考えてしまいます。

そして Taylor さんの発言からわずか1日。名前が決まったようです。

Laravel Mix ですか。これはこれで…うーん…。まぁ無難といえば無難ですね。現在の Laravel に付属されている gulpfile.js の記述が

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

となっており Mix という名前がつくのは自然ではあります。相変わらず検索しづらいですが。で、発言の僅か一時間後、Laravel Elixir の作者である Jeffrey さんから

「できたよ」

…早いっすね。というか明らかに待ち構えてましたね。というわけでできてました。

github.com

Laravel Mix を使ってみよう

せっかくなので、少し触ってみましょうか。ちょうどよいリポジトリもありますし。

github.com

上記リポジトリを clone して npm install あるいは yarn すれば使う準備は整います。まずは webpack.mix.js を見てみましょう。

let mix = require('laravel-mix').mix;


mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

ファイルの内容はあまり違いはないですね。あえて言えば、第1引数である変換対象のファイルパスが明示的になったのと、設定で決まっていた変換されたコードが出力されるパス public/(js|css) を明示的に指定するようになったという点でしょうか。

しかし内部的には大きな変更があります。以下の2点です。

  • gulp ではなく npm scripts を使うようになった
  • 以前はモジュール管理に Browserify, rollup, webpack から選択できるようになっていたが、webpack 一択になった

私はフロントエンドの流行にそこまで敏感ではなく、最近そういう流れだなーと漠然と感じていたのですが Laravel Mix のリリースでなるほどと思った次第。

Laravel Mix の npm scripts は4種類のコマンドが用意されています。どれも webpack コマンドを叩いている単純なものです。()はオプションです

  • webpack コマンド
    • ビルドを行う(-progress --hide-modules --config=webpack.config.js のパス)
  • dev コマンド
    • webpack コマンドに加えファイルの監視を行う(--watch)
  • hmr コマンド
  • production コマンド
    • ビルドを行う際に Minify される

カスタマイズしたいときは package.json を変更するのがよいと思います。設定を変更したい場合は node_modules/laravel-mix/setup/webpack.config.js を任意の場所にコピーし修正してから package.json にある npm scripts の --config オプションのパスを修正するとよいでしょう。

いつもの

当社では、東京と福岡で web サービスを作りたくてたまらないエンジニアを募集しております。

recruit.innovator.jp.net

LINEとmyThingsでカジュアルに恐怖を味わう

slack iruca おうちハック

こんにちは。 アヤト(@ayato_tw)です。
今日は仕事納めですね。
今月、弊社のアドベントカレンダーが無事に完走しました!
その中で社内の在席確認を自動化する試みの話をした時にYahoo!JapanのmyThingsを利用しましたが、
一昨日(26日)にそのmyThingsにLINEチャンネルが追加されました。
これはとても面白い恐ろしいと思ったのでブログを書きます。

続きを読む

【おうちハック】郵便物が来たらすぐに分かる仕組みをサクッと作ってみた(ソニー MESH × IFTTT)

iot advent-calendar おうちハック slack

どうもこんにちは、@yamacho1111 です。
このエントリーは イノベーター・ジャパン Advent Calendar 2016の19日目の記事です。

本日が自分の当番であることをすっかり忘れていました。
なので、今回は郵便物が来たらすぐに分かる仕組みをサクッと作ります。

続きを読む

Laravel 5.4 の新機能: JSON Based Language Files の話

laravel advent-calendar

こんにちは。エンジニアの @localdisk です。このエントリは イノベーター・ジャパン Advent Calendar 2016 16日目の記事です。

先日は当社デザイナの @tyan_hikaruの記事でした。いかがでしたでしょうか? まだ読んでないという方はよかったら目を通してみてください。

さて、Laravel 5.3 のリリースから4ヶ月。5.3 も使い慣れたかなぁという今日この頃ですが、Gihtubリポジトリ では 5.4 の開発も進んでいます。今回は Laravel 5.4 の新機能の中でも個人的に嬉しい対応であった JSON Based Language Files の話をしたいと思います。

f:id:localdisk:20160824143945p:plain

何が嬉しいのか?

Web アプリケーションを多言語対応する場合、一般には*1クライアントサイドとサーバーサイドで翻訳情報を持つ必要があります。クライアントサイドはJSON以外の選択肢はほぼない状況ですが、サーバーサイドの場合、その言語と相性のよい形式で持つことが多くなります。Laravel の場合は配列で定義されたPHPファイルによって多言語サポートを実現しています。

Laravel 5.4 では多言語サポートとして上述のPHPファイル以外にもJSONをサポートします。この対応によってクライアントサイドとサーバーサイドで同じファイルを共有できることになります。クライアントサイドとサーバーサイドで同じ意味のメッセージなのに微妙に内容が違う…という悲劇を繰り返すことがなくなります。嬉しい!

特に当社でWebサービスを作成する際には必ず多言語化することを義務付けられているので非常にありがたい。

では本題に。現在時点(2016/12/14)での使い方は以下のような感じです。

*1:Node.jsはJSONで統一できる

続きを読む

AWS+WordPress.SkeletonでスケーラブルなWordPressサイトをつくる【完全版】

wordpress aws advent-calendar

f:id:gurimmer:20161214102354j:plain

こんにちは、エンジニアの@gorou_178です。このエントリは、「WordPress Advent Calendar 2016」の14日目の記事兼、イノベーター・ジャパン Advent Calendar 2016の14日目の記事です。

今年7月に、WordCamp Kansai 2016に登壇して、以下の発表をしてきました。

speakerdeck.com

スケーラブルにする場合、自動的にデプロイできるべきなのですが、スライドの最後に掲げている3つの課題がありました。

  1. WordPressコアのDBマイグレーション
  2. WordPressプラグインのDBマイグレーション
  3. 言語ファイルのダウンロード

これらをWP-CLIで解決できたのでまとめようと思います。

続きを読む

warikan(現金いらずのビットコイン割り勘ツール)の開発をふりかえってみる

bitcoin advent-calendar

こんにちは。@akase244 です。このエントリは イノベーター・ジャパン Advent Calendar 2016 11日目の記事です。

今年はwarikanという「ビットコインで割り勘ができるwebサービス」にかなりの時間を割いてました。いい機会なので、今回はこのプロジェクトのふりかえり(KPT)をやってみようかと思います。

f:id:akase244:20161204172615j:plain

続きを読む