ある日、上司が UI の大改修を要求してきましたが、幸いにも私は準備ができていました。
以前から不満を抱いていたのですが、設定や cg などのページを TyranoScript で書くと理解しにくく、またページの階層もわかりにくいです。HTML で直接書いた方が良いですね。今日はどのようにして新しいページを HTML で作成するか分析してみましょう。
既存の「非スクリプト」ページから始めましょう。たとえば、デフォルトのロードページは、kag.menu.js ファイルの中でdisplayLoadというキーワードで検索すると見つかります。
this.kag.html('load', { array_save: array, novel: $.novel }, function(
html_str
) {
var layer_menu = that.kag.layer.getMenuLayer()
var j_save = $(html_str)
j_save.find('.save_list').css('font-family', that.kag.config.userFace)
j_save.find('.save_display_area').each(function() {
$(this).click(function(e) {
var num = $(this).attr('data-num')
that.snap = null
that.loadGame(num)
var layer_menu = that.kag.layer.getMenuLayer()
layer_menu.hide()
layer_menu.empty()
var layer_title = that.kag.layer.getTitleLayer()
layer_title.hide()
layer_title.empty()
if (that.kag.stat.visible_menu_button == true) $('.button_menu').show()
})
})
j_save.find('.button_smart').hide()
if ($.userenv() != 'pc') {
j_save.find('.button_smart').show()
j_save.find('.button_arrow_up').click(function() {
var now = j_save.find('.area_save_list').scrollTop()
var pos = now - 160
layer_menu
.find('.area_save_list')
.animate({ scrollTop: pos }, { queue: false })
})
j_save.find('.button_arrow_down').click(function() {
var now = j_save.find('.area_save_list').scrollTop()
var pos = now + 160
j_save
.find('.area_save_list')
.animate({ scrollTop: pos }, { queue: false })
})
}
that.setMenu(j_save)
})
新しいページを作成するための核心は、kag.html関数です。この関数は kag.js にあります：
{
html: function(html_file_name, data, callback) {
var that = this
data = data || {}
if (this.cache_html[html_file_name]) {
if (callback) {
var tmpl = $.templates(this.cache_html[html_file_name])
var html = tmpl.render(data)
callback($(html))
}
} else {
if (!this.kag.stat.sysview) {
this.kag.stat.sysview = {
save: './tyrano/html/save.html',
load: './tyrano/html/load.html',
backlog: './tyrano/html/backlog.html',
menu: './tyrano/html/menu.html',
}
}
var path_html = this.kag.stat.sysview[html_file_name]
$.loadText(path_html, function(text_str) {
var tmpl = $.templates(text_str)
var html = tmpl.render(data)
that.cache_html[html_file_name] = text_str
if (callback) callback($(html))
})
}
}
}
html 関数の引数は次のとおりです：
- ファイル名
- 渡されるデータ
- コールバック関数
displayLoadを見ると、load ページを読み込むには、ページ名（load）、セーブデータを含むオブジェクト、および html ファイルの内容を引数とするコールバック関数が必要です。ここで注意すべき点は、コールバックで渡される $(html) は、実際には引数で指定された html_ "str" ではなく、jQuery で処理されたオブジェクトです。
html 関数内に戻ると、$.loadTextはローカルの html ファイルを ajax で取得します。また、$.templatesやtmpl.renderなどの関数は、オープンソースのレンダリングエンジンjsrenderから提供されています。
load.html では、テンプレートの使用方法が見られます：
<div class="save_list">
{{for array_save}}
<div class="save_display_area save_list_item" data-num="{{:num}}">
<span class="save_list_item_thumb">
{{if img_data != ""}}
<img class="pic" src="{{:img_data}}" />
{{/if}}
</span>
<span class="save_list_item_thumb">
{{if img_data == ""}}
<div class="pic">No data</div>
{{/if}}
</span>
<div class="save_list_item_area">
<div class="save_list_item_date">{{:save_date}}</div>
<div class="save_list_item_text">{{:title}}</div>
</div>
</div>
{{/for}}
</div>
しかし、私は jsrender をテンプレートエンジンとして使用するつもりはありません。なぜなら、Vue を導入して MVVM の利便性を活用したいからです。
したがって、よりシンプルな html 関数を作成することにしました：
{
htmlPure: function(html_file_name, data, callback) {
var that = this
data = data || {}
if (this.cache_html[html_file_name]) {
if (callback) {
callback(this.cache_html[html_file_name])
}
} else {
var path_html = this.kag.stat.sysview[html_file_name]
$.loadText(path_html, function(text_str) {
that.cache_html[html_file_name] = text_str
if (callback) callback(text_str)
})
}
},
}
htmlPure 関数では、テンプレートエンジンのレンダリングを省略し、html 文字列を直接コールバック関数に渡します。（jsrender を保持することも選択できますが、Vue のテンプレートとの競合を避けるために、Vue のデリミタを変更する必要があります）
htmlPure 関数を追加した後、新しいページを表示するためのタグを作成する必要があります。ここでは、showExtendPageという名前にしました：
tyrano.plugin.kag.tag.showExtendPage = {
pm: {},
start: function(pm) {
var that = this
this.kag.stat.is_skip = false
this.kag.htmlPure(pm.name, null, function(html_str) {
var extendPage = $(html_str)
var layer_extend = that.kag.layer.layer_extend
layer_extend[0].style.zIndex = pm.zindex || 9999999999
layer_extend[0].innerHTML = ''
layer_extend.fadeIn()
layer_extend.append(extendPage)
})
this.kag.ftag.nextOrder()
},
}
これがカスタムページを使用するアイデアです。スクリプトファイルを html ファイルに置き換えた後、showExtendPageタグを呼び出すだけでページがフェードインします。