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のリクエスト/レスポンスを取得する正しい方法” の続きを読む

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へ接続するには” の続きを読む

Yii2 AssetをGruntでビルドするには

前回の記事 Yii2のAssetsでNPMやBowerパッケージを読み込むには でYii2のAssetシステムの使い方についてまとめましたが、今回は、Yii2のAssetを使わずに、JavascriptやCSSをGruntで管理する方法について調べた内容をまとめてみました。

前半は、Yii2 CookbookのAsset processing with Gruntの内容を試したメモで、その後簡単なサンプルを作成してみます。

解説の前提として、Yiiプロジェクトが作成されているところからになります。

Gruntのセットアップ

ますは、Node.jsの環境を準備します。

Ubuntuの場合は以下のコマンドでインストールできます。

$ curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
$ sudo apt-get install -y nodejs

他のプラットフォームのパッケージインストールについては Installing Node.js via package manager を参照してください。

OS Xの場合は、nodebrewがおすすめです。

Gruntをグローバルインストールします。

$ sudo npm install -g grunt-cli

プロジェクトディレクトリに移動して、npm initしてpackage.xmlを作成した後、必要なGruntプラグインをインストールしていきます
“Yii2 AssetをGruntでビルドするには” の続きを読む

Yii2のAssetsでNPMやBowerパッケージを読み込むには

Yii2には、Ruby on Railsのような、割りとしっかりしたAssetの仕組みが用意されています。
Assetを利用してフロントエンドのパッケージを、NPMやBowerで管理する手順について調べたのでまとめてみました。

NPM / Bowerパッケージの追加方法

Yii2は、プロジェクトの構成にNPMやBowerをComposerで管理するためのパッケージfxp/composer-asset-pluginを使うことを前提としています。

fxp/composer-asset-pluginを利用すると以下のコマンドで、NPMやBowerパッケージを追加することができます。

NPMの場合

$ composer require npm-assets/angular

Bowerの場合

$ composer require bower-assets/angular

参照: Bower and NPM Assets
“Yii2のAssetsでNPMやBowerパッケージを読み込むには” の続きを読む