Skip to content

Latest commit

 

History

History
111 lines (82 loc) · 4.42 KB

Tutorial.ja_JP.md

File metadata and controls

111 lines (82 loc) · 4.42 KB
Raw

チュートリアル

English | 简体中文（翻訳中）

このチュートリアルはWebアプリ開発の初心者向けの簡単なチュートリアルです。

はじめに

架设并开发 CCL 其实不难，首先你要确保你有一个服务器开发环境，比如在本机上安装的 Apache 或者你能访 问到的在云端安装的 nginx 等等。请先通过浏览器测试你能正确访问该服务器。如果你在本地开发，请尝试访问

http://localhost/

来测试连同性。

ご注意： 请注意确保你在服务器环境下开发 CCL ，在开发时如果遇到各种资源无法载入，请确保您的地址栏 是以 http: 或者 https: 开头的而不是 file: 等等。

ノート： Linuxを使い場合如果你在linux下开发，任何一个静态Web服务器软件都可。Windows下开发的话，仅作为推荐参考 可以试试 XAMPP。

ライブラリをダウンロードそしてインストールする

Github 有提供以 Zip 方式下载CCL的选项，但是我们不推荐你这样做。正确使用 CCL 二次开发有两种推荐 的方法：

  • 作为外部库通过 npm 或者 bower 引入： 只需运行 npm install comment-core-library --save 即可获取最新版的稳定CCL库。通过 node_modules/comment-core-library/dist/ 可以引用需要的文件。
  • 直接 Clone 下 Git 代码仓库： 通过 git clone https://github.com/jabbany/CommentCoreLibrary.git 即可 Clone下 CCL 的全代码库。建议把工作目录放到 Web 开发服务器下的子文件夹内，如 /var/www/ 或者 D:\webroot\htdocs下之类的。之后进入 CommentCoreLibrary 文件夹， 运行 npm install grunt-cli -g 和 npm install （注意：可能需要管理员权限） 即可开始开发

第一个方式主要用于希望直接挂载 CCL 功能的二次开发，而第二种方式则面向对 CCL 本生的开发有兴趣的人。

正しい使い方

CCL编译好的代码在 dist/ 目录下。有两个文件非常重要： CommentCoreLibrary.js 和 style.css。 这两个分别负责CCL的JS引擎部分和CSS呈现部分，不能省略。相对的还有俩 .min.js和 .min.css 文件 是上述文件的压缩版。压缩版代码都在一行，较不方便对行号调试，建议开发时采用未压缩版，架设时则可以采取 压缩版。

引用方法为，在对应的HTML文件头部添加

<head>
    ... 其他头部信息 ...
    <link rel="stylesheet" href="dist/css/style.css" />
    <script src="dist/CommentCoreLibrary.js"></script>
    ... 其他头部信息 ...
</head>

注意文件路径调整合理。

之后在相应需要弹幕的位置，放置如下 HTML DOM结构：

<div id='my-player' class='abp'>
    <div id='my-comment-stage' class='container'></div>
</div>

其中弹幕结构会在 container 这个 div 里插入。采用双层嵌套可以允许你的弹幕 container 于实际容器 的大小不同，用于实现避开字幕等等功能。

API

调用API目前来说比较容易，在建立好页面dom之后，只要绑定 CommentManager 即可。

var CM = new CommentManager(document.getElementById('my-comment-stage'));
CM.init(); // 初始化

之后 CM 实例会提供如下功能：

// 载入弹幕列表
var danmakuList = [
    {
        "mode":1,
        "text":"Hello World",
        "stime":0,
        "size":25,
        "color":0xffffff
    }
];
CM.load(danmakuList);

// 插入弹幕
var someDanmakuAObj = {
    "mode":1,
    "text":"Hello CommentCoreLibrary",
    "stime":1000,
    "size":30,
    "color":0xff0000
};
CM.insert(someDanmakuAObj);

// 启动播放弹幕（在未启动状态下弹幕不会移动）
CM.start();

// 停止播放（停止弹幕移动）
CM.stop();

// 更新时间轴时间
CM.time(500);
CM.time(1000);

具体使用的参考可以参考 demo/tutorial。内有大部分此示例的代码。

コミュニティ

弾幕送信

コメントコアライブラリは送信機能がありませんですが、ユーザのコメントを記録するが欲しい場合、 自分でサーバをセットすることは簡単にできます。

弾幕受信と生放送

リアルライムで弾幕データを表現する方法の例はここに書いています。