はじめに
私は主に.NET系のエンジニアなのですが、諸事情により HTML5 + JavaScript プレイヤーのUI部分のカスタマイズに関わったので、その中で知ったアレコレを書いていこうと思います。
その1. クラスを作る
Playerというclassを作りたいため、 ECMAScript 6 で導入された JavaScript クラスを利用しようとしました。
class Player {
constructor(id) {
this._id = id;
}
play() {
console.log('id=' + this._id);
}
}
var player = new Player('player');
player.play();
分かりやすい構文ですが、残念ながらInternet Explorer 11で未サポートです。
IE11もMSE(Media Source Extensions)に対応している以上は、サービス対象外とするのは難しいので諦めざるを得ません。
非常に読みづらいですが、こんな感じに書きました。
var Player = function (id) {
this._id = id;
this.player = function() {
console.log('id=' + this._id);
}
}
var player = new Player('player');
player.play();
【参考】
その2. Visual Studio 2017でスクリプトを最小化したい
開発中はコードを整形してコメント等を加えていますが、リリースするときはスクリプトをまとめたり、最小化させるのが定石かと思います。
Visual StudioではBundler & Minifierを使えばOKです。
細かい使い方は割愛しますが、このツールを入れてあれば、元ソースが更新されると、自動でmin.jsも更新してくれます。
その3. ASP.NET Coreで簡単にCache Bustingする
JavaScriptやCSSといった静的ファイルがブラウザにキャッシュされて更新が反映されないことを防ぐため、クエリ文字列を付加することが一般的です。
こんな感じ
<script src="./player.min.js?ver=xxx"></script>
ASP.NET MVC ではこれを独自実装をしなければいけなかった（はず・・・）のですが、ASP.NET Core MVCではScriptTagHelperのasp-append-versionを使えば自動でクエリ文字列を更新してくれます。
cshtml内の記述
<script src="./player.min.js" asp-append-version="true"></script>
ページの表示結果
<script src="./player.min.js?v=Y24i4b1MaAB28JJITCIOv0TZ79xd4gqv5BJXbZYLcZc"></script>
※Azure App Serviceで試したところ、再起動しても値が変わらないので、クエリの値の変更タイミングはデプロイ時と思われるが仕組みは要確認
その4. 最小化するとAngular.jsが屍になる
スクリプトの最小化前の実行時は問題ないのに最小化するとエラーが発生。色々調べてみると訳あって使っているangular.jsの実装が原因。
var app = angular.module("samplePlayer", ['ngAnimate', 'luegg.directives']);
app.controller("myController", function ($scope, $window, $timeout, $interval, $filter) {
...
}
こんなコードを書いていました。
\$scope, \$window などのパラメータはangular.jsのエンジンで使う予約パラメータ（この表現で良いのか？）なのですが、スクリプトが最小化されると名前が変わってしまい、追跡できなくなるらしい
こんな感じに書き直すと最小化うまくいきます。
var app = angular.module("samplePlayer", ['ngAnimate', 'luegg.directives']);
app.controller("myController",
['$scope', '$window', '$timeout', '$interval', '$filter',
function ($scope, $window, $timeout, $interval, $filter) {
...
}]);
最後に
とりとめのない記事になってしまいましたが、JavaScript開発あれこれでした。