きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

【勘違い】ニコニコ動画風コメントライブラリ × NicoScreen.js × 使ってみた

この記事の目的

この記事では、
NicoScreenを動かすためにした作業とその考察のまとめ
を目的としています。
なお、タイトル通り、本件は勘違いでした。何もしなくても動くことを改めて確認しました(-_-メ)


本題

★NicoScreenとは

NicoScreenとは、2011年に作成された「ニコニコ動画」風のコメントをJavaScriptで実現するためのライブラリです。バージョンは【0.1】です。Jqueryを利用しています。
以下の記事を参考に実装をしました。
https://feelcreativity.jp/all/blog/homepage/1040.html


★何が起こった?

サンプルの通り実装したところ、以下の個所でエラーが発生し、コメントが想定通りに流れてこない現象が発生しました。

//NicoScreen.jsの97行目から107行目を抜粋
var elm = $("#nicoscreen");
this.elm = elm;
this.elm.css("position", "relative");
this.elm.css("border", "solid 1px gray");
this.elm.css("overflow", "hidden");
this.elm.bind("selectstart",function(){return false;});
this.elm.bind("mousedown",function(){return false;});


this.env.width = ""+elm.css("width"); ←ここ
this.env.height = ""+elm.css("height"); ←ここ

elm.cssのコードを実行するときに、定義されていないよエラーが発生しました。

★対応したことと、その考察

利用しているJqueryのバージョンが、違うことに気が付き、対象のプロパティがサポートされなくなったんだ(`・ω・´)キリ。と勝手に判断し、以下のように修正しました。これで動かすことができたので、よかった~となっていました。

        var elm = $("#nicoscreen");
        this.elm = elm;
        this.elm.css("position", "relative");
        this.elm.css("border", "solid 1px gray");
        this.elm.css("overflow", "hidden");
        this.elm.bind("selectstart", function () { return false; });
        this.elm.bind("mousedown", function () { return false; });

        this.env.width = "" + elm[0].clientWidth; //css("width"); ←ここ
        this.env.height = "" + elm[0].clientHeight; //css("height"); ←ここ

・・・しかし、そんなことはありませんでした。よく調べれば、公式ドキュメントにもしっかり載っていました。CSSプロパティがサポートされなくなっているなんてことありません。
https://api.jquery.com/css/#css-propertyName
このブログを書こうとして再実行しているところで気が付きました(/ω\)お恥ずかしい・・・




まとめ

・自己判断サポート切りはダメ!絶対!
・NicoScreen.jsは素晴らしいライブラリなので、ぜひ使ってみてください。