TRPGでオフラインセッションをする際の必須ツールとなってきているココフォリア。
様々なシーンやキャラクターを簡単な操作で管理できて便利ですが、開発者さんが個人で開発していることもありまだまだ整備が行き届いていない部分もあります。
今回は、そんな便利ツール「ココフォリア」のちょっと不便な部分である、「シーン一覧でシーン名が見切れてしまう問題」の解決策を紹介します。
補足
「シーン一覧でシーン名が見切れてしまう問題」はこの記事を書いている2021年12月現在発生している問題です。ココフォリアの開発が進むことで、開発者の方が対応してくれて本記事の内容は必要なくなる未来が来るかもしれません。
目次
「シーン一覧でシーン名が見切れてしまう問題」とは？
まずは実際の画面を見ながら起こっている問題を確認してみます。以下の画像をご覧ください。
ココフォリアでシーン名が見切れてしまっている様子
上記の画像はとあるセッションで利用したココフォリアの画面です。シーン一覧を表示していますが、シーンの名前が「（探索）ホームル...」と途中で途切れてしまっていることがわかります。
たくさんのシーンを管理しなければならないシナリオだと、シーンの判別がつきづらくてちょっと困ってしまいますよね。
問題が確認できたところで、次の節から解決方法の紹介をしていきます。
解決方法ステップ1：ブラウザのデベロッパーツール（開発者ツール）を開く
ブラウザにはエンジニア（プログラマ）が様々な動作確認を行うために用意された「デベロッパーツール（開発者ツール）」という機能があります。
今回の解決方法ではこのデベロッパーツールを活用するため、まずは開発者ツールを開きましょう。
全てのブラウザについてやり方を解説するのは大変なので、この記事では1つの例としてChromeでデベロッパーツールを開く方法を解説します。
その他のブラウザについては「ブラウザ名 デベロッパーツール 開き方」とGoogleで検索すると、開き方の解説記事がたくさん出てくるので、そちらを参考にデベロッパーツールを開いてから続きをご覧ください。
Chromeでデベロッパーツールを開くには、画面右上の3点リーダー（点が3つ並んでいるアイコン）をクリックします。
そうすると、メニューが開くので「その他のツール → デベロッパーツール」を選択します。
すると、以下のように画面上にデベロッパーツールが現れます。これで準備完了です。
解決方法ステップ2：デベロッパーツール上でスクリプトを実行
ここまででデベロッパーツールを開くことに成功しました。次はこのデベロッパーツール上で、シーン一覧のシーン名が見切れなくなるようにスクリプトを実行します。
なお、ここからの説明もChromeを使って説明していきますが、他のブラウザでも同様の操作で同じことを実現できます。
まず、デベロッパーツールの上部に「Elements」「Console」などのタブがあると思うので、それらの中の「Console」を選択して以下のような画面に切り替えます（設定によっては日本語で「コンソール」というタブ名になっているかもしれません）。
赤や黄色の英語でメッセージがたくさん表示されるかもしれませんが、何も問題はないので怖がらなくて大丈夫です。
次に、実行するスクリプトをコピー&ペーストします。以下のスクリプトをドラッグで全部選択してCtrl+Cを押してコピーしてください。
document.querySelectorAll('.MuiToolbar-regular button:not(.MuiButton-text)')[3].addEventListener('click', () => setTimeout(() => Array.from(document.querySelectorAll('.MuiPaper-root .MuiButton-label span')).forEach(e => e.style.width = '100%'), 200))
コピーできたら、Chromeのデベロッパーツールの「Console」タブの中で以下のように貼り付けます（Ctrl+Vで貼り付けできます）。
貼り付けできたら、「Enter」キーを押して実行してみましょう。以下の画像のように「undefined」と表示されたら成功です。
ここまでの操作が完了したら、Chromeのデベロッパーツールの右上にある「×」ボタンを押して、デベロッパーツールを閉じてしまいましょう。
お疲れ様でした。これでシーン名が見切れる問題が解決できました。
シーン名が見切れなくなったことを確認する
それでは、本当にシーン名が見切れなくなったかを確認してみましょう。もし、現在シーン一覧を開いている場合は1度閉じてください。
そして、シーン一覧を開いてみると、以下のように見切れていた部分が表示されているはずです。今回の場合は「（探索）ホームルーム）」という名前が省略されずにちゃんと表示できました！
注意
ブラウザのページをリロードしてしまうと、今回行った変更もリフレッシュされてしまいます。ページを再読み込みした際はこの記事でやったことをもう1度実施してください。
最後に
この記事では、ココフォリアのちょっとだけ不便だった部分、「シーン名が見切れてしまう」問題をスクリプトを実行することで解決する手段を紹介しました。
冒頭で記載した通り、開発が進めば修正され、このような作業をしなくても良くなるかもしれません。
それまでの応急処置としてこの方法を紹介しておきます。
少しでも誰かのセッションの手助けになれば幸いです。