「LaravelMix」の記事 - Crieit

PWA対応WebサービスをTWAとしてGoogle Playに登録してみた

2020-01-17T09:22:44+09:00

現在PWA対応のWebサイトはTWAとしてGoogle Playストアに登録してAndroidアプリとしてインストールできるようになっています。当サービスCrieitも試しにやってみました。Laravel + Laravel Mix(Vue.js)という構成です。

PWA対応

まずはサイト自体がPWA対応していることが前提ですのでそちらの準備を行います。利用しているフレームワークによっては最初からPWA対応されているものもあるのでその場合は特に設定は不要です。

色々キャッシュしてトラブルになると面倒だと思ったのでホーム画面追加機能だけ利用しました。

Workboxを導入

Service Workerの作成のためWorkboxを導入します。

yarn add -D workbox-sw workbox-webpack-plugin

デフォルトだとLaravel Mixでビルドしたファイルをキャッシュ設定にしてしまうため、今回はそれを無効にしておきました。webpack.mix.jsに下記を追記します。excludeで全無視しています。

const workboxPlugin = require('workbox-webpack-plugin')

mix.webpackConfig({
  plugins: [
    new workboxPlugin.GenerateSW({
      swDest: 'service-worker.js',
      clientsClaim: true,
      skipWaiting: true,
      exclude: [/.*/],
      runtimeCaching: []
    })
  ],
  output: {
    publicPath: ''
  }
})

PWA用のmanifest.jsonを公開ルートフォルダに作成します。

{
    "name": "Crieit - プログラマー、クリエイターが何でも気軽に書けるコミュニティ",
    "short_name": "Crieit",
    "icons": [
        {
            "src": "/img/card.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "theme_color": "#448AFF",
}

表示するHTMLにmanifest.jsonを位置を記述します。

JavaScriptでService Workerの登録を行います。Laravelプロジェクト作成時に自動的に作られていたbootstrap.jsに追記しておきました。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
  })
}

これでビルドしたら完了です。ビルドすると precache-manifest.なんちゃらかんちゃら.js というファイルがされるためそれもコミットします。ただ、これは毎回生成されてしまうので、一度生成した後にwebpack.mix.jsの記述はコメントアウトしておきました。シンプルなPWA対応の場合は以後もう何も変更がありませんので。

TWA対応

次にTWAの対応です。これはAndroid StudioでAndroidアプリケーションを作成します。具体的なやり方は下記に書かれています。

【実践】Google Play Store でPWA配信 (TWA) - Qiita

ただしちょっとインストールするもののハッシュ値が古かったりするので本家も参考にすると良いでしょう。

Using Trusted Web Activities | Google Developers

丁度この記事を書いている最中に見つけたできたてほやほやの記事もありました。多分色々情報が最新ですので日本語情報では一番参考になりそうです。

話題のTWAでPWAをGoogle Play Storeに配信してみた

ハマったところ

build.gradle

似たようなセクションがあったりして追記するところを間違えてうまくいかなかった事がありました。

customtabsだとうまくいかない

実は前述リンクでやっているcustomtabsを使った方法ではうまくいきませんでした。ということで、代わりにandroid-browser-helperというものを使いました。なぜうまく行かなかったかというと、多分丁度最近android-browser-helperに変わったばかりで、微妙に各所の情報が古かったのではないかと。

具体的には、app/build.gradleに追記したcustomtabsのimplementationの代わりに下記を追記しました。

    implementation 'androidx.browser:browser:1.0.0'
    implementation 'com.github.GoogleChrome:android-browser-helper:ff8dfc4ed3d4133aacc837673c88d090d3628ec8'

僕は試していませんが、実は公式も変わったようなので下記のほうが正しそうです。ハッシュ値からバージョンに変わっているのでもしかしたら丁度ちゃんとリリースしたよ、というところなのかもしれません。

    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:1.0.0'

あとはAndroidManifest.xmlのActivityもこれを使った形に変更が必要です。

assetlinks.json

あとはassetlinks.jsonを公開フォルダに追加する必要があります。前述のリンクどれでも作り方の説明が書かれています。

アイコンの調整

そのままだとデフォルトのアイコンでアプリになってしまいますので、適宜アイコンを置き換えます。最近は最新の方の機種用にXMLのアイコンファイルも作成するようです。容量自体も軽量になり、あとはforegroundとbackgroundがあり、Android側でアイコンを揺らしたりするアニメーションなどで利用されるようです。

今回は作るのが面倒だったので元々のXMLを削除することで画像を使ってもらうことにしました。

まとめ

ということでTWAの対応方法を書きました。詳しい説明と言うよりは主にハマったところをメインに書いているため詳しくは記事中のリンクを参考にしてください。

Laravel 6 でVue.jsやReactを使う

2019-09-12T21:30:14+09:00

Laravel 6 が先日リリースされました。Laravel 5 との違いとして、プロジェクトの初期化時にVue.jsのリソースが自動生成されなくなりました。そのため、引き続きLaravel 6でも使用したい場合は追加で導入する必要があります。

laravel/uiをインストール

まずはフロントエンドの初期化を行うためのパッケージとしてlaravel/uiというものがありますので、それをインストールします。

composer require laravel/ui --dev

JavaScriptとCSSの生成

uiライブラリを使って各種JavaScript、CSSのファイルを生成します。

Vue.jsを使う場合

下記のコマンドで生成します。

php artisan ui vue

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。appというIDの要素内でVue.jsを有効化させているため、その中にコンポーネントを配置しています。

これで画面の端っこに表示されます。

Reactを使う場合

下記のコマンドで生成します。

php artisan ui react

packages.jsonにパッケージが追加されるのでインストールします。

yarn

念の為正常にビルドできるか一度試してみます。

yarn hot

DONE Compiled successfullyと表示されればOKです。hotコマンドの場合はjsファイルを修正すれば自動的にビルド＆リロードを行ってくれるのでこのまま修正して実際に表示してみます。welcome.blade.phpのbodyの閉じタグの前に下記を追記してビルドされたJavaScriptを読み込みます。また、コンポーネントはexampleというIDの要素に挿入されるように指定されているため、その要素も表示したい場所に追加しておきます。

これで画面の端っこに表示されます。

参考リンク

公式の説明
JavaScript & CSS Scaffolding - Laravel - The PHP Framework For Web Artisans

Laravel Mixにて途中でJavaScriptをTypeScriptに変える

2018-12-30T10:52:32+09:00

Laravel MixでVueを使っているプロジェクトで、既にコンポーネントをJavaScriptで書いてしまったけどTypeScriptに変えたい、という場合があると思いますが、割と最小限ではじめられます。全部のコンポーネントをTypeScriptに書き直さなければならない、ということもありませんし、おすすめです。具体的な手順を書いておきます。

必要なファイルを追加

vue-cliやcreate-nuxt-appのテンプレートから取ってくると早いと思います。

tsconfig.json
resources/assets/js/index.d.ts

mix.jsをmix.tsに変える

webpack.mix.jsで下記のような設定があると思います。

mix.js('resources/assets/js/app.js', 'public/js')

これをtsに変えます。

mix.ts('resources/assets/js/app.ts', 'public/js')

まるごと全てTypeScriptに置き換える開設の場合はフォルダ名もtsに変更する様な記述があったりしますが、今回は最小限ですのでメソッド名とapp.jsのファイル名だけの変更になります。

app.jsをapp.tsにする

app.jsというかエントリーポイントのファイルですが、これだけはTypeScriptに変更しないといけません。そのため変更し、ビルド時にエラーが出るようであればとりあえず変数の宣言にvariable: anyのようにanyを付けまくります。とりあえずビルドできないとしょうがないので型の設定はあとでやることにしてひたすらanyを付けていきます。

コンポーネントをTypeScript化する

とりあえず何か一つTypeScriptに変更してみましょう。これは他で色々解説があるので詳しくはそのあたりを見ていただければ良いと思いますが、一応ざっと何をするかを書いておきます。

クラスにする

これがだいたい基本形です。

上記の通り、Laravelのヘルパーに含まれるmix関数だけはPHP側に用意が必要です。公式のリポジトリからコピーして修正してみたものが下記です。
（公式のものはLaravelのヘルパーを多用しているためそのままは使えません）

ちなみにhotまでしか試していないので後半は微妙に動かないかもしれません。とはいえmix-manifest.jsonを読んでそのパスを返しているだけなので、処理自体は簡単なためダメだったら適宜修正してみてください。

あ、あと適当にBASE_DIRという定数を入れてしまっているので適宜修正してください。

ちなみにコード中にThe Mix manifest does not exist.のエラーがありますが、そのjsonファイルが無いということなのでビルドし忘れてるか、コミットする方針ならコミットし忘れてるか、というところが原因だと思われます。

    function mix($path, $manifestDirectory = '')  
    {  
        static $manifests = [];  

        if ($path[0] != '/') {  
            $path = "/{$path}";  
        }  
        if ($manifestDirectory && $manifestDirectory[0] != '/') {  
            $manifestDirectory = "/{$manifestDirectory}";  
        }  
        $manifestDirectory = substr($manifestDirectory, 1);  

        $hotPath = BASE_DIR . "{$manifestDirectory}/hot";  
        if (file_exists($hotPath)) {  
            $url = file_get_contents($hotPath);  
            if (preg_match('/^https?:\/\//', $url)) {  
                $url = preg_replace('/^https:/', '', $url);  
            }  
            return "{$url}{$path}";  
        }  

        $manifestPath = BASE_DIR . $manifestDirectory . '/mix-manifest.json';  
        if (! isset($manifests[$manifestPath])) {  
            if (! file_exists($manifestPath)) {  
                throw new Exception('The Mix manifest does not exist.');  
            }  
            $manifests[$manifestPath] = json_decode(file_get_contents($manifestPath), true);  
        }  
        $manifest = $manifests[$manifestPath];  
        if (! isset($manifest[$path])) {  
            throw new Exception("Unable to locate Mix file: {$path}.");  
        }  
        return $manifestDirectory.$manifest[$path];  
    }

これでページのソースに表示されているcssとjsのURLを開いてみて何かしら表示されれば成功です。

Laravelで通常行っている様な感覚でコンポーネントの追加、配置、ホットリロード、プロダクションビルドなどができるようになります。別にPHPじゃなくても良さそうな感じです。

ビルド

公開フォルダへのパスが違う場合などはビルド時にno such fileエラーになるようです。webpack.mix.jsに下記のような一文を追加してください（フォルダは適宜指定してください）。

mix.setPublicPath('.');

まとめ

LaravelじゃないけどLaravel Mixが便利だからそのまま使いたい、と思っていた方は是非お試しください。

2018/7/15追記）
やっぱり他のフレームワークでも使えて良いみたいですね。僕がPHPメインなのでやっぱり言語でwebpackをラップするというのは非常に違和感があります。
RailsでLaravel Mix(webpack)を使って15分でES6を書きはじめる