新時代のソーサリアンを提案する

30周年を越えたソーサリアンの夢と妄想を語り続ける

ソーサリアンText 開発者向けマニュアル（Playground Editor編）

Playground Editorは、Playground Flowからチャート機能を除去し、エディターに特化したより軽量なシナリオ開発／実行環境です。STextの記述ルールが判ってきて、マウス操作で流れ図を組み立てるよりも、どんどん生のテキストを編集していきたい、という人にお勧めです。

■Note■

Playground Editorは、軽量な分、ソーサリアン Textの記述言語であるSGMLの理解が前提です。HTMLによく似た簡単な言語なので、本格的な開発では是非習得してみてください。

［1］Playground Editorにアクセスする

Playground Editor（以降、PgEditor）には、以下のアドレスからアクセスできます。

https://www.web-deli.com/sorcerian/text/playground/editor.html
　　　▼
http://www.web-deli.com/sorcerian/text/image/blog/pge_main.png

各部の名称は、以下の通りです。

  1. ツールバー：PgEditorの基本コマンドを実行するボタン群
  2. ヘルプエリア：SGMLのタグリファレンスを表した領域
  3. ドキュメントエリア：シナリオ本体を編集するエディター領域

［2］シナリオデータを入力する

シナリオデータは、一から入力しても構いませんが、選択ボックス［テンプレートを選択］からテンプレートを引用するのが簡単です（以下は主な標準テンプレート）。

  • 空のテンプレート：最低限の骨組みとコード例（コメント）だけが用意されています
  • 基本のキ（チュートリアル）：基本的なシナリオ作成を学ぶための案内シナリオです
  • サンプルシナリオ：最低限動作するミニシナリオが組み込まれたテンプレートです
  • 機能テストデータ：主な機能を組み込んだ動作テストデータです
  • マイストレージ：過去に保存したデータを呼び出します（編集中のシナリオは［ストレージに保存］からブラウザーに保存できます）

「チュートリアル」（基本のキ）は、シナリオ作成の基本をPG Editor上で学べる簡単な案内シナリオです。まずは、ここでシナリオデータの基本構造を理解しておくことで、その後の制作がぐんと捗る、のではないかと。

■Note■

GBAT（http://d.hatena.ne.jp/sorcerian/20180131）で作成した.gbatファイルをインポートすることもできます。これには、［GBATファイルを読み込み］ボタンを押して、表示されたファイル選択ボックスから.gbatファイルを選択、［開く］ボタンをクリックしてください。エディターにSText変換済みのシナリオデータが反映されます。

［3］エディター上でシナリオを編集する

シナリオデータは、エディター上で直接編集することもできます。以下に、エディターの主な機能をまとめておきます。

a）構文ハイライト機能

ページ左上のラジオボタン（Xml、Markdown）を選択すると、いずれかのハイライト機能を切り替えできます（既定はMarkdownですが、Xmlもそれなりにハイライトされています^^;）。

ただし、Xmlを選択すると、タグの折り畳みが可能となり、また、タグの閉じ忘れやクォートの忘れ、全角／半角の間違いなど、基本的なマークアップの問題点を指摘してくれるので、タグをいじる場合にはXmlを選択しておくのがお勧めです。

http://www.web-deli.com/sorcerian/next/images_blog/gbat_play5.png

b）コードスニペット機能

［<+>］（カーソル位置にタグを追加）、［${＋}］（カーソル位置に埋め込み式を追加）ボタンを利用することで、SText固有のタグ／式埋め込みを簡単化できます。

http://www.web-deli.com/sorcerian/text/image/blog/pge_tag.png

c）ダウンロード

Playgroundで編集したシナリオは、［ダウンロード］ボタンでローカル環境にファイルとして保存することもできます（ファイル名はscenario.xmlです）。
※ただし、本機能はChrome、Edge、Firefox環境での利用に限られますので、注意してください。

d）オートコンプリート機能

エディター上でタイプを進めることで、STextで利用されるキーワードを候補表示します。下のダイナミックヘルプ機能と併用して、データ入力の簡単化に役立ててください。

http://www.web-deli.com/sorcerian/text/image/blog/pge_complete.png

e）ダイナミックヘルプ機能

ヘルプエリアで目的の要素／属性を選択することで、対応する要素／属性のヘルプを参照できます。最初に気になる要素／属性のヘルプを眺めることで、新たな機能の発見になるかもしれません。

http://www.web-deli.com/sorcerian/text/image/blog/pge_help.png

［4］シナリオを実行する

シナリオを準備できたら、あとは［シナリオ実行］ボタンを押すだけです。新規のタブが開いて、シナリオをテストプレイできます。

http://www.web-deli.com/sorcerian/text/image/blog/npg_play.png

2度目以降の実行では［続きから開始しますか？］と聞かれますが、［キャンセル］して、最初から実行するようにしてください。

■Note■
Playgroundで開発される方も、「ローカルサーバー編」（https://sorcerian.hateblo.jp/entry/2019/09/15/223009）の手順［2］に沿って、サンプルシナリオをダウンロードしておくことをお勧めします。

/stext-master/stextフォルダー配下に、/scepter（新・消えた王様の杖）をはじめとしたサンプルシナリオが用意されています。シナリオ開発には、まずはこれらのシナリオを確認してみるのが手っ取り早いでしょう。

［5］デバッグモードを利用する

Playground Editorでは、既定でデバッグモードが有効になっています。デバッグモードでは、シナリオ実行領域の上部にデバッグウィンドウが追加されます。

http://www.web-deli.com/sorcerian/next/images_blog/gbat_play4.png

以下の情報を入力して［Reload］ボタンをクリックすることで、指定のシーンに強制的に移動できます。デバッグの効率化にご利用ください。

  • Scene：移動したいシーン番号
  • Items：所有しているアイテム番号（カンマ区切り）
  • Flags：所有しているフラグ（カンマ区切り）

また、デバッグモードが有効になっている場合、シーンでのアイテム／フラグ（scene要素のitems／flagsなど）が、シナリオ定義（items／flags要素）と対応関係にあるかを自動でチェックします。問題がある場合には、シナリオ開始時にエラーを通知します。

http://www.web-deli.com/sorcerian/next/images_blog/gbat_play8.png

［6］Flowを利用する

Pg Editorで編集したデータを、Playground Flowに移動して編集することも可能です。これによって、シナリオ編集はEditorで、全体的なフロー図の確認＆設計はFlowで、という使い分けも可能になります。ツールバーの［Flowで編集］を選択することで、現在のシナリオデータがFlowに移行されます。

ただし、現在のデータが保存されるわけではないので、移動に際してはデータの保存を忘れないように注意してください。

［7］シナリオを投稿する

Pg Editorで制作したシナリオを投稿するには、［6］の方法でFlowにデータを移した上でFlowの投稿機能を利用してください（詳細はPlayground Flowマニュアルを参照）。

Playgroundの制約

冒頭触れたように、Playgroundにはいくつか機能上の制約があります。あくまで、シナリオ本文の動作確認を主目的としたツールなので、ご了承ください。

  • BGMはSText標準のものだけ再生可能
    • シナリオ単位に用意したBGMには非対応
  • 画像は標準で用意されたstext.png、dsc.jpgのみ表示可（あくまで動作確認用です）

BGM／楽曲については、Playground上からサーバーへのファイルアップロードを認めていないため、このような挙動となります。
その他、細かな制約があるかもしれないので、お気づきの点はご連絡ください。