Laravelで”Error: Cannot find module ‘webpack/lib/RuleSet'”エラー

LaravelのプロジェクトでLaravel Elixirが使われていたので、Laravel Mixを使うように修正した。

‘npm run dev’を実行すると次のエラーメッセージが表示された。

Error: Cannot find module 'webpack/lib/RuleSet'

WebPackが古いことが原因だったらしく、更新したら解決した。

npm install --save-dev webpack

2つのセレクトボックスが連動するVue.jsのサンプル

2つのセレクトボックスが連動するVue.jsのサンプル。

左のセレクトボックスから地方を選択すると、右の都道府県の選択肢が更新されます。

選択したセレクトボックスの値は下に表示されます。

LaravelでPDFファイルを作成し、ダウンロードする

Laravel-PDF-Sample

LaravelでPDFファイルを作成し、ダウンロードする

サンプルコード

tFPDF

tFPDFFPDFをUTF-8サポートしたライブラリ。

公式のcomposerのパッケージはないが、非公式なパッケージならいくつか見つかる。

今回はdocnet/tfpdfを使用する。

インストール

docnet/tfpdfをインストールする。

$ composer require docnet/tfpdf

日本語フォントの設定

tFPDFで使用する日本語フォントを設定する。

resourcesフォルダーにfontフォルダーを作成し、その中にunifontフォルダーを作成する。

$ mkdir -p resources/font/unifont

unifontフォルダーのアクセス権を設定する。
設定しなくても動作するが、設定するとフォントの設定がキャッシュされ、実行速度が向上する。

$ chmod 755 resources/font/unifont

unifontフォルダーの中に使用するフォントファイルを配置する。
ここではmplusフォントを使用する。

resources/
    font/
        unifont/
            mplus-1p-regular.ttf

フォントを配置したフォルダーをfTPDFに反映する。

configフォルダーにtfpdf.phpを作成し、定数FPDF_FONTPATHにフォントフォルダーのパスを設定する。

<?php
if (!defined('FPDF_FONTPATH')) {
    define(
        'FPDF_FONTPATH',
        dirname(__DIR__) . DIRECTORY_SEPARATOR . 'resources' . DIRECTORY_SEPARATOR . 'font' . DIRECTORY_SEPARATOR
    );    
}

PDFの作成

PDFを作成してダウンロードさせる。

コードの説明は、ソースコード内のコメントを参照。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Response;
use tFPDF\PDF;

class HomeController extends Controller
{
    public function index()
    {
        $pdf = new PDF();
        $pdf->AddPage('L','A4');

        // フォントの追加(第4引数をtrueにしてUTF-8を有効にする)
        $pdf->AddFont('mplus-1p-regular', '', 'mplus-1p-regular.ttf', true);
        $pdf->SetFont('mplus-1p-regular', '', 28);

        // テキストを追加
        $pdf->Write(8, 'test');

        // ページを追加
        $pdf->AddPage('P','A4');

        // 画像を追加(storage/image/01.jpgをPDFに追加する)
        $pdf->Image(storage_path('image/01.jpg'), 0, 0, 210, 297);

        return Response::make(
            $pdf->Output(),
            200,
            [
                'Content-Type' => 'application/pdf',
                'Content-Disposition' => 'inline; filename="sample.pdf"'
            ]
        );
    }
}

Vue-CLI 3でElectronの開発環境を作る

Vue CLI Plugin Electron Builderを使い、Electron+Vue.jsの開発環境を作る。

Vue-CLI 3をインストールする

$ npm install -g @vue/cli

バージョンが3.xになっていることを確認する。

$ vue --version
3.10.0

新しいプロジェクトを作成する

$ vue create hello-world

プリセットを選択するように求められるので、好みの設定でプロジェクトを作る。

GUIでプロジェクトを作成したい場合は、「vue gui」コマンドを使うこともできる。

$ vue gui

Vue-CLI 3で作成したアプリのディレクトリに移動する

$ cd hello-world

Vue CLI Plugin Electron Builderをインストールする

$ vue add electron-builder

途中で、インストールするElectronのバージョンの問い合わせがあるので、最新のバージョンを選ぶ。

? Choose Electron Version (Use arrow keys)
^4.0.0 
^5.0.0 
❯ ^6.0.0 

開発用サーバーを実行する

$ npm run electron:serve

アプリケーションが起動する。

App.vueを編集すると、変更が即座に反映される。

アプリケーションを再起動する必要はない。

アプリケーションをビルドする

$ npm run electron:build

参考