FullCalendar 4をlaravel/mixでビルドして利用する

LaravelのプロジェクトでFullCalendarを導入する方法についてまとめてみました。

FullCalendarを利用するにはscriptタグでソースを読み込む方法もありますが、メンテナンス性を考えるとパッケージをnpmで管理して、Laravel Mixを利用してビルドするのが良い方法です。

特にFullCalendar 4からはコア以外の機能はプラグインの形で都度追加する必要があるためよりパッケージ管理システムを利用することが推奨されています。

Laravel Mixとは

以前の記事、Laravel 6.x laravel/uiを利用してbootstrap 4を適用する で少し触れていますが、Laravel Mixは、Laravelのフロントエンド ビルド環境で、Webpackを簡単に利用するラッパーみたいなものです。

Laravel Mixのセットアップは以下のようにプロジェクトの作成後npm installするだけで、自らWebpack環境を用意しなくてもLaravelと組み合わせてVue.jsやReactを簡単に使い始められます。

$ composer create-project --prefer-dist laravel/laravel laravel-fullcalendar
$ cd laravel-fullcalendar
$ npm install

ビルドの設定はwebpack.mix.jsファイルに記述します。例えば、jsとcssのビルドする場合、以下のように入力ファイルと出力するディレクトリを指定するだけです。

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

とても簡単ですね。

ビルドはnpm run dev、開発中はnpm run watchしてすぐ開発が進められます。

また、通常Webpackで複数の入力ファイルを扱うのは工夫が必要ですが、Laravel Mixなら以下のように簡単に追加できます。

mix.js('resources/js/blog.js', 'public/js')
    .sass('resources/sass/blog.scss', 'public/css');
mix.js('resources/js/admin.js', 'public/js')
    .sass('resources/sass/admin.scss', 'public/css');

例えば、これはブログ記事と管理画面のビューで使うjsやcssのアセットをビルドするイメージです。

FullCalendarのインストール

ここから本題ですが、まずFullCalendarのパッケージをnpmで追加していきます。

この記事では、FullCalendarのビューはTimeGrid Viewのみを使用します。
また、予定をドラッグで変更できるようにするのと、複数のタイムゾーンに対応したいので、interactionmoment-timezoneも追加します。
まとめるとコアも含めFullCalendar関連は以下の4つのパッケージをインストールします。

  • @fullcalendar/core
  • @fullcalendar/timegrid
  • @fullcalendar/interaction
  • @fullcalendar/moment-timezone

また、@fullcalendar/moment-timezoneは、moment-timezoneを別途インストールする必要があります。

以下のコマンドでインストールします。

$ npm install @fullcalendar/core @fullcalendar/timegrid @fullcalendar/interaction moment-timezone @fullcalendar/moment-timezone

FullCalendarの実装

resources/js/app.jsを編集しても良いですが、FullCalendarはすべてのページで使用することは無いと思うので、js、cssファイルを分けます。

resources/js/fullcalendar.jsを追加して以下を記述します

// resources/js/fullcalendar.js
import { Calendar } from '@fullcalendar/core'
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import momentTimezonePlugin from '@fullcalendar/moment-timezone';

document.addEventListener('DOMContentLoaded', function () {
  const calendarEl = document.getElementById('calendar');

  const calendar = new Calendar(calendarEl, {
    allDaySlot: false,
    plugins: [timeGridPlugin, momentTimezonePlugin, interactionPlugin],
    timeZone: 'Asia/Tokyo', // momentTimezonePlugin
    defaultView: 'timeGridWeek',

    events: []
  });

  calendar.render();
});

次に、スタイルシートresources/css/fullcalendar.scssを追加して以下を記述します。

// resources/css/fullcalendar.scss
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/timegrid/main.css";

Laravel Mixの設定ファイルに上記のファイルを読み込む設定を追加します。

// webpack.mix.js

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

ここでビルドしてみましょう。

$ npm run dev

以下のように、ビルドされたresources/js/fullcalendar.jspublic/js/fullcalendar.jsに、resources/css/fullcalendar.scsspublic/css/fullcalendar.cssに出力されます。

Laravel Mixでjs、cssをビルド

生成したアセットをビューで読み込んで表示してみます。

とりあえずここではwelcome.blade.phpを以下のように置き換えてみます。

// resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <link href="{{ asset('css/fullcalendar.css') }}" rel="stylesheet">
        <script src="{{ asset('js/fullcalendar.js') }}" defer></script>
    </head>
    <body>
        <div id="calendar"></div>
    </body>
</html>

開発サーバーを起動してhttp://127.0.0.1:8000を開きます。

$ php artisan serve

予定を表示したり追加したりできませんが、FullCalendarの表示ができました。

FullCalendarをLaravelのビューに表示

Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法

ExpressでJSONのリクエストを受け付けて、JSONのレスポンスを返す処理のメモです。

たまにExpressで検証などすることがあるのですが、いつもJSONの扱い方を検索している気がするので自分でもまとめておくことにしました。

また、検索するとbody-parserをインストールするように書かれている記事が多いのですが、2020年5月現在はExpress本体にミドルウェアが用意されています。
よって、以下の方法がおそらく現在最もシンプルで標準的な手順になると思います。(公式マニュアル読めばいいという話でもありますが)
“Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法” の続きを読む

Vue.js x TypeScriptのプロジェクトでjQuery UIを使う

以前の記事「React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには」のVue.js x TypeScript版になります。

改めて調べた背景としては、Vue x TypeScriptのプロジェクトで、ある要素をドラッグしてただ移動するという機能をHTML5のDrag and Drop APIを使って実装しようとしたところ、ただの移動を実装するのは意外と面倒でした。そこで、昔ながらのライブラリの導入を検討してみるかと思いつき試したところです。

jQuery UI以外の候補としては、interactjsあたりがパッケージ内に型定義も含んでいて良さそうでしたが残念ながらコンパイルが通らずその修正は大変そうだったので、結局一番使われていて型定義もしっかりしていそうなJQuery UIを試してみることにしました。

この記事のサンプルはGithub hrendoh/vue-ts-jqueryui-example にアップしていますので参照ください。
動作については記事本文の最後にgifアニメを貼っていますが、箱を追加して移動できるというシンプルなサンプルです。

プロジェクトの作成

Vue CLIで、TypeScriptを使用するように設定し、その他はなしで作成したプロジェクトに設定していきます。

vue cliでtypescriptのプロジェクトを作成

その他設定は以下の通り。

jquery jquery-uiのインストール

$ npm install jquery jquery-ui --save
$ npm install @types/jquery @types/jqueryui --save-dev

TypeScriptのコンパイラーオプションのpathsにjquery-ui用の型定義ファイルを指定します。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": [
        "src/*"
      ],
      "jquery-ui": [
        "node_modules/@types/jqueryui/index"
      ]
    },
    ...

あとは、jQuery UIを使う箇所で以下のようにimportすればOKです。

import $ from "jquery";
import "jquery-ui";

サンプルではcomponents/Box.vueの12行目でimportしています。

jquery jquery-uiのソースの読み込み

ここまでの設定は、TypeScriptのコンパイルを通すところまでで、実際に動かすにはjQueryとjQuery UIのソースをビルド後のファイルapp.xxxx.jsに含める必要があります。

まず、npmパッケージjquery-uiにはビルド前のソースのみ含まれていないため、ビルド済みのソースを含むjquery-ui-distを追加でインストールします。

$ npm install jquery-ui-dist --save

追加したjquery-ui-distのソースをバンドルするWebpackの設定はVueプロジェクトの設定ファイルvue.config.jsに記述します。

vue.config.jsファイルはVue CLIを作成したプロジェクトにはデフォルトで含まれていないので作成して以下の記述を含めます。

// vue.config.js
const path = require("path");
module.exports = {
  configureWebpack: {
    devtool: "source-map",
    optimization: {
      minimize: false
    },
    resolve: {
      alias: {
        // bind version of jquery-ui
        "jquery-ui": "jquery-ui-dist/jquery-ui.js",
        // bind to modules;
        modules: path.join(__dirname, "node_modules")
      }
    }
  }
};

再度ビルドすると、dragableがちゃんと動くことを確認できます。

jQuery UIによるドラッグの実装

課題 VSCodeの補完ができない

“jquery-ui”は、型定義が”jqueryui”と名前が合っていないため、VSCodeの補完とエラーが解決できません。

VSCodeでjquery-uiの型が参照できない

おそらく設定で解決できるのではと思いますが、未調査です。

ちなみに、”jquery-ui”ではなく”jqueryui“をインストールするとちゃんとVSCodeの補完も効きますが、公式があるのにそちらを使う気にはなれないのでVSCodeの設定を調べる方が正攻法かなとは思います。

参考

以下の記事は簡潔にまとまっていて参考になりました。

【TypeScript】外部ライブラリ(jQueryなど)を使用する方法をまとめてみる

あとはこのあたり

Error when using JQueryUI with TypeScript and DefinitelyTyped definition file

SymfonyでJS、SCSSをWebpack encoreでビルドするには

Symfonyで、JavascriptやCSSなどフロントエンドのアセットを管理する仕組みとして、以前はAsseticが用意されていましたが、Webpackを利用するWebpack Endoreに置き替わり今時な構成になりました。

Laravelで言うところのElixirにあたります。

Webpack Encoreの利用方法については、公式ドキュメント Managing CSS and JavaScript に一通りの使い方が載っています。
また、Symfonyのでもアプリ symfony/symfony-demo が、Webpack Encoreを使った構成になっているので、こちらのソースを読むほうが解りやすいかもしれません。

この記事では、公式ドキュメントの例、First Example を試してみた手順をまとめいます。
公式ドキュメントでは、nodeのパッケージ管理システムにyarnを使っていますが、私は普段まだnpmを使っているので、npmを利用してパッケージをインストールしています。

プロジェクトの構成

symfony/symfony-demo を参考に、以下のようなディレクトリ構成にします
“SymfonyでJS、SCSSをWebpack encoreでビルドするには” の続きを読む

React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには

TypeScriptで記述しているReactアプリケーションをWebpackでビルドしている開発環境で、jQueryライブラリをあわせて使う構成について調べたことをまとめてみました。

ここでは、前回の記事 「TypeScript,WebPackを利用したReactJS開発環境セットアップまとめ」で構築したプロジェクトに、jQuery Bootstrapを追加してみます。

jQueryは、TypeScriptのコンパイルはimportで通りますが、そのままでは、jQueryがbundle.jsに含まれません。
jQueryをbundle.jsに含めるためには、ProvidePluginを利用することで解決できます。
また、jQuery本体については、CDNからjsを含めても依存の問題は発生しにくいので、scriptタグで指定してしまうのが良い気もします。

ReactでBootstrapを使いたい場合は、React-Bootstrapを使うほうが筋が良いと思いますが、ここではあえて本家のBoostrapを利用してみます。

パッケージのインストール

jqueryとbootstrap、その型定義をインストールします
また、bootstrapのPopoverはpopper.jsに依存しているのでpopper.jsも追加しておきます

$ npm install --save jquery @types/jquery bootstrap @types/bootstrap popper.js

“React x TypeScript x Webpackの開発環境でjQuery (Bootstrap)を使うには” の続きを読む

React x SCSS x Webpack開発環境セットアップ手順まとめ

スタイルシートをSCSSで、JSはES6で記述するReactJSのアプリケーションを、Webpackでビルドする手順についてまとめてみました。

スタイルシートはバンドルされたJSに含めず、ExtractTextWebpackPluginを利用してファイルを分けるようにしています。

この記事を試したnodeのバージョンは以下の通りです

$ node -v
v6.9.4
$ npm -v
3.10.10

プロジェクトの構成とnpmの初期化

プロジェクトのディレクトリ構成は以下のようにします

“React x SCSS x Webpack開発環境セットアップ手順まとめ” の続きを読む

TypeScript,WebPackを利用したReact開発環境セットアップまとめ

TypeScriptの公式チュートリアル React & Webpack · TypeScriptをベースに、TypeScriptで記述したReactJSアプリをWebpackでビルドする開発環境の構築手順についてまとめています。

nodeのバージョン

この記事では、以下のバージョンのnode.jsを利用しました。

$ node -v
v8.5.0
$ npm -v
5.3.0

プロジェクトのディレクトリ構成を準備

プロジェクトの構成は、以下のようにsrcディレクトリにReactJSのコンポーネントを置き、distディレクトリをWebpackのビルドターゲットとします。

以下コマンドで、プロジェクトのディレクトリ構成を作成します

“TypeScript,WebPackを利用したReact開発環境セットアップまとめ” の続きを読む

Laravel Angular Material Starter API認証周りの構成についてのメモ

Laravel Augnlar Material Starterは、フロントエンドにAngular Material、バックエンドAPIにLaravelを利用したシングルページアプリケーションを開発するためのスターターパッケージです。

Laravelは、Laravel ElixirというJavascriptやCSSなどのアセットをビルドするためのgulpタスクがフレームワークに予め含まれていますが、Laravel Angular Material Starterは、AngularJSとAngularJSベースのUIコンポーネントフレームワーク Angular MaterialをビルドするためにLaravel Elixirが予め構成されたLaravelプロジェクトと言った構成になっています。
また、フロントエンドのAngularJSから呼び出されるLaravel側のAPIに対する認証はJWTを利用します。

この記事では、主にフロントエンドのAPIの呼び出しと、バックエンドのJWT生成、検証に利用されるパッケージの構成について調べたことをまとめていきます。

含まれるパッケージ

Laravel Angular Material Starterには、2016.7時点でLaravel 5.2とAngularJS 1.5をベースに以下のパッケージが含まれています。

公式ドキュメントでは「Libraries involved」に載っています。

Composerパッケージ

Laravel側のパッケージは、バックエンドAPIおよび認証をサポートする以下のようなパッケージを含んでいます。

  • dingo/api: Laravel、LumenでRestful APIを管理するミドルウェアを提供するパッケージ
  • tymon/jwt-auth: Laravel、Lumen用のJWTの生成、認証の仕組みを提供するパッケージ
  • barryvdh/laravel-cors: Laravel、Lumen用のCross-Origin Resource Sharingを提供するパッケージ

“Laravel Angular Material Starter API認証周りの構成についてのメモ” の続きを読む

Azure WebアプリにNode.js expressアプリをGitからデプロイ

Azureにデプロイするアプリの開発は.Net以外でもVisual StudioのAzure統合ぶりがとても便利そうですが、Node.jsアプリの開発となると、私も含め普通はMacで開発している人がほとんどかと思います。
Build 2016で発表があったBotFrameworkを試していて、BotをAzure WebAppにデプロイするために、Azure向けのNode.jsアプリをMac OS X上で開発・デプロイする手順について調べてみたことをまとめてみます。

割りと驚いたのは、いつのまにかHerokuの様にgitと連携したデプロイができるようになっているんですね。非常にこれは便利です。
今回は、Bitbucketにpushしたらデプロイする手順を試しています。

Azureは、2,3年前にWebSitesを試して以来ですがとても進化してますね。
以前の記事は「Windows Azure WebサイトでFuelPHPアプリを動かす」の時は旧ポータルでした。

Node.jsの開発については、改めてまとめずとも公式ドキュメントにもちゃんと日本語で説明があります。
Azure App Service での Node.js Web アプリの作成

Hello Worldまでは、この説明のみで必要十分なので、npmでパッケージを管理する例としてexpressを利用する例についてもまとめてみました。
“Azure WebアプリにNode.js expressアプリをGitからデプロイ” の続きを読む

AWS Lambda (Node.js) からRDS PostgresqlまたはRedShiftへ接続するには

Node.jsのLambda関数からデータベースにアクセスするには、Postgresqlの場合はnpm pgパッケージが利用できます。
npmパッケージはプロジェクトにローカルインストールするとnode_modulesディレクトリに保存されるので、それを一緒にZipするとLambda関数のJSで読み込めるようになります。

Node.jsのLambda関数をnpmでパッケージ管理して開発する手順について調べてみたことを手順化してまとめてみました。
前提条件として、Node.JSとAWS CLIが利用できる環境が必要です。
“AWS Lambda (Node.js) からRDS PostgresqlまたはRedShiftへ接続するには” の続きを読む