将棋のBOD形式をhtmlに読み込ませる方法について

Question

現在 shogizumen.jsというスクリプトを使って将棋の局面図を作成しようとしています。

  後手の持駒：なし
  ９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v香v桂 ・ ・ ・v玉v角v桂v香|一
| ・v飛 ・v銀v金 ・v金 ・ ・|二
|v歩 ・ ・v歩 ・ ・v銀v歩v歩|三
| ・v歩v歩 ・v歩v歩v歩 ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 歩 歩 歩 ・ 歩 ・ ・|六
| 歩 歩 銀 金 ・ 歩 銀 歩 歩|七
| ・ ・ 金 ・ ・ ・ ・ 飛 ・|八
| 香 桂 角 玉 ・ ・ ・ 桂 香|九
+---------------------------+
先手の持駒：なし
手数＝25  ▲３七銀  まで

このようなHTMLを作成するとブラウザではこのように表示されますこの作業をHTMLに直接書き込むのでは無く、textareaに入力したBOD形式の文字列を読み込んで変換したいです。試しにVueを用いてこのようなコードを作成したのですが上手く行きません

{{bod}}

これではこのように表示されますどのようにすればtextareaに入力したBOD形式の文字列を上手く変換できるでしょうか？

hinaloe · Answer

当該のスクリプトはドキュメントのロード時に存在するpre.shogizumenの置換を前提としているようであったのでそのまま動的なものに流用するのは厄介そうでしたが，幸いにもSSZumenがグローバルで利用可能な関数と一応なっていたのでそのままでも強引に使うことはできそうです．尤も強制的に再レンダリングを走らせるため厄介なことにはなりましたが…… const vueapp = new Vue({ el: '#app', data: { bod: '', aaa: '', show: true, }, watch: { bod() { this.show=false this.$nextTick().then(()=> { this.show=true return this.$nextTick() }).then(()=> { window.SSZumen() }) } } })

{{bod}}

将棋のBOD形式をhtmlに読み込ませる方法について

One Answer

Add your own answers!

Ask a Question