やる,Laravelを.その3 Laravel Mix

Laravel

お疲れさまですRainGearの杏です.

 

Laravelでの3Dモデルデータ閲覧システムの構築にむけて

今回はJavaScript(以下JS)などの開発方法についてまとめておきたいと思います.

まず,ブラウザで3DCGを表示するにはWebGLという技術が必要なのですが,モデルデータを表示するような処理を自分でフルスクラッチで実装するのは難易度が高そうなので,Three.jsなどのWebGLのラッパーを使うのが一般的?なようです.

WebGLのラッパーとしてはThree.js,Away3D,PixiJSなどが有名みたい.

Three,jsならオープンソースでローダ(様々な形式のデータを読み込むプログラム)が開発されているため,色んなケースに対応できると思われる.

(ちなみにFlashを使って3DCGを表示する方法もあるらしい.ActionScriptを愛する人はどうぞ)

 

これまでのあらすじ

やる,Laravelを.Homesteadで開発環境をつくる

やる、Laravel5.7を。その2「インストールして認証とかを試す」

 

環境

Windows/macOS

Vagrant

Homestead

PHP

Yarn

 

参考ページ

https://readouble.com/laravel/5.7/ja/mix.html

https://readouble.com/laravel/5.7/ja/frontend.html

https://threejs.org/

https://jp.vuejs.org/index.html

https://qiita.com/kokorau/items/1c8ba182699b3646b363

 

Laravel Mix

Laravel Mixは,Webpackを,より簡単なAIPで利用するためのラッパーのようなものみたい.

SASSやLESSをコンパイルしたり,JavaScriptのバンドルなどができるらしい.

名前にLaravelと付いてるけど,他のフレームワークでも使えそう

 

Nodeのインストール

Laravel Mixを使うにはNode.jsとNPMが必要.

Homesteadには最初からインストールされている.

Node:8.11.4

NPM:6.4.0

 

Laravel Mixのインストール

npm install

コマンドを実行してpackage.jsonを元に必要なパッケージをインストールする

laravel-mixというパッケージが含まれていることが確認できる

そのほかにもLaravelが推奨?しているVue.jsなどのパッケージが確認できる

 

Mixの実行

コンパイルを実行するには

(開発時は可読性のあるコードの方がよいためソースコードを圧縮しない

npm run dev

本番環境ではコードを圧縮するため

npm run production

などのコマンドを実行する

コマンドはpackage.jsonで定義されている.

よく分からないので最初から準備してくれてるのは助かる

 

アセット変更の監視

ソースコードの変更を検出して自動でコンパイルさせる場合

npm run watch

コマンドを実行する

Homesteadで開発していて,ローカルファイルを編集する場合

npm run watch-poll

コマンドじゃないと動かなかった

 

ソースファイル・出力先の設定

ソースファイルやコンパイル後の出力先を設定する場合webpack.mix.jsファイルを編集する

ドキュメントを参考に,こんな内容にしてみた.

ちなみにJSの記述はES2015記法で行うらしい.

TypeScriptなどを使うこともできるらしい.

いろいろ設定が必要になってくるとLaravel Mixを使うより,自分で勉強する必要が出てきてツラくなってくる.

 

Webpackカスタム設定

Laravel Mixはとくに難しい設定をしなくても作業にとりかかれるのがメリットみたいだけど

もし独自にwebpack.config.jsを設定する場合webpack.mix.jsファイルにwebpackConfigメソッドを定義すればいいらしい

mix.webpackConfig({
  resolve: {
    modules: [
      path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
    ]
  }
});

こんな感じ

 

カスタム設定ファイル

Webpack設定をすべてカスタマイズしたい場合,

node_modules/laravel-mix/setup/webpack.config.js

をルートに持って来て,package.jsonファイル中の–config参照を全て新しくコピーした設定ファイルに変更すればいいらしい.

Laravel Mixは結局WebPackの設定のラッパーなので,WebPack自体の設定を理解していれば必要ないかもしれない.

Laravle Mixとはなんだったのか

 

yarn

解説ではnmpでインストールとあるけどyarnを試してみたら実行できた.

yarnはnpmの上位互換みたいなもんらしい.

HomesteadだとYarnもインストールされている

 

Vue.jsを使う

せっかくなのでVue.js(以下Vue)というのを使ってみようと思う

Vueは「ユーザーインターフェイスを構築するためのプログレッシブフレームワーク」らしい.

リアクティブシステムだったり,コンポーネントシステムだったり,ほかのライブラリと組み合わせて使えたりするのが売りらしい.

逆に言えば,昔ながらのMVCの場合あんまり必要なさそう.

でも,あとから「ここの表示をリッチにしてぇ…」というときでも導入しやすいってことだろうか.

分かりやすい使い方としては,ユーザーがフォームに入力したデータに応じて,表示が自動で変わるような処理を実装したい場面とか?

そういう処理はjQueryでも可能だけど,入力の検出から,イベントの定義から,DOMの更新まで記述しなければいけない.

Vueを使えばデータの変更を検出して自動でDOMを書き換えてくれる(らしい).

 

Vueコンポーネントの出力

Vueはコンポーネントという単位のパーツを定義して,コンポーネントを組み合わせることによって画面を構成するらしい.

Laravelではresources/js/componentsディレクトリに.vueファイルとしてコンポーネントを定義する.

.vueファイルはJS,HTML.CSSを1つのファイルで記述してコンポーネントを定義できる.シングルファイルVueコンポーネントというらしい.

.vueファイルを扱うにはvue-loaderパッケージが必要らしいけど,これはlaravel-mixに含まれているっぽい.

詳しいことはドキュメント参照

https://vue-loader-v14.vuejs.org/ja/start/spec.html

.vueファイルが定義できたら,app.jsに

Vue.component('example-component', require('./components/ExampleComponent.vue'));

みたいに記述して,コンポーネントを登録?する

これでbladeテンプレートに

<example-component></example-component>
みたいな記述をすると,コンポーネントとして動作するみたい

 

three.jsを試してみる

three.jsの機能を持つvueコンポーネントを定義できるか試してみる.

まずパッケージをダウンロードする

npm install three

yarn add three

npmだとinstallのところyarnだとaddらしい

 

Controllerをつくる

php artisan make:controller Three

このあとで追加するテンプレートを表示するアクションを追加する

 

viewを作る

resources/viewsディレクトリにbladeファイルを作成する

 

ルーティングを設定する

routes/web.phpファイルに,controllerのアクションを実行するルーティングを追加する

 

vueコンポーネントを作る

resources/js/componentsディレクトリにvueファイルを追加する

 

参考までにVue.jsのライフサイクルフック一覧

  • beforeCreate:インスタンスが初期化されるとき
  • created:インスタンスが作成された後
  • beforeMount:render 関数が初めて呼び出されようと、マウンティングが開始される直前に
  • mount:インスタンスがマウントされたちょうど後
  • beforeUpdate:データが変更されるとき、DOM が適用される前
  • update:データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれる
  • activated:生き続けたコンポーネントが活性化するとき呼ばれます。
  • deactivated:生存し続けたコンポーネントが非活性化されるとき呼ばれます。
  • beforeDestroy:Vue インスタンスが破棄される直前に呼ばれます。
  • destroyed:Vue インスタンスが破棄された後に呼ばれます
  • errorCaptured:任意の子孫コンポーネントからエラーが捕捉されるときに呼び出されます

computedはフックではないらしい

 

参考までにthree.jsで利用する主なオブジェクト

  • Seen
  • Camera
  • Light
    Render
  • Geometry
  • Material
  • Mesh
  • Animate
  • Animation
  • WebGL
  • WebGL2
  • Canvas
  • Loader
  • Obect3D
  • Controls
  • Color
  • Fog
  • Helper
  • Effect
  • Attribute
  • Modifier
  • Shader

基本的には名前の通り,あとで解説追記する(するとは言ってない)

 

vueコンポーネントでthree.jsを利用するには

コンポーネントのdataプロパティ?にthree.jsのオブエクトを設定する.

dataにオブジェクトを設定することで,オブジェクトをコンポーネントで操作することができる

(これがリアクティブってことだと思う)

dataはメソッドで定義して,戻り値の連想配列がコンポーネントのプロパティになる.

 

three.jsを利用する簡単な流れとして

  • シーンを作る
  • カメラを作る
  • メッシュを作る
  • ライトを作る
  • シーンにカメラ,メッシュ,ライトを追加する
  • アニメーションループでレンダリングを実行する

みたいな感じらしい

コンポーエントが定義できたらapp.jsにコンポーネントを登録する

使用するコンポーネントをテンプレートから呼び出す.

 

確認

くるくる回転するcubeが表示された

ボタンを押すとマテリアルの色が切り替わるのも確認できた(これはVueってよりthree.jsの仕組みな気もする)

 

まとめ

three.js用に公開されているloaderなどの機能を使えばFBXやgITFなども表示できるみたい.

Blenderのプラグインでモデルデーターをthree.jsで表示できるJSONに変換できたりもするらしい.

詳しいことは公式のサンプルを参考に作業していけば色々なことが出来そう

 

次回はLoader機能やLaravelで静的ファイルをアップロード/保存などの方法あたりを実装していきたい.

 

PHPフレームワーク Laravel入門

新品価格
¥3,240から
(2018/12/17 19:56時点)

Spread the love
コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PHP
PHP俺チートシート

PHPをコーディングする上で「これどうやんだっけ」みたいのをいちいちドキュメント確認とかしてたので, …

Spread the love
Laravel
やる、Laravel5.7を。その2「インストールして認証とかを試す」

お疲れ様です. RainGearの杏です.   目次0.1 はじめに0.2 環境0.3 イ …

Spread the love
Laravel
やる,Laravelを.Homesteadで開発環境をつくる

お疲れ様です。 Raingearの杏です。 今回はPHPのフレームワークのLaravelを使ってみた …

Spread the love