JavardryEditorHTML5版 Ver.0.000 テスト公開
え～、2月か3月くらいからちょこちょこと作っていたHTML5版のエディタがなんかそれっぽい形になってきたので、とりあえずテスト公開してみます。
見た目はこんな感じ。大体Java版と同じよーな感じですが、ごちゃごちゃして見づらいところをいくつか整理してます。今回HTML5版作成のために見直していて、個人的に一番見にくかったのが呪文（アイテムの使用効果・SP、トラップ、ダンジョンイベントの呪文効果）の条件分岐や発動種別の部分。特に酷いのがダンジョンイベントの呪文効果で、実際どんな感じかっつーと、以下の画像のような状態です。
Java版では、可能な限りスクロールさせずに一画面に収めようとした結果、こんなことになってしまっています。内容を把握しているハズの制作者自身ですら、ぱっと見では条件分岐や発動種別がどういう繋がりあるんだっけと、混乱してしまうレベルです。
HTML5版では整理して大分すっきりした……気がします。少なくとも、この一部分だけを見るならば大分見やすくはなってると思います。ただし、その分全体を見るには上下にスクロールさせる必要があるので、それはそれで忙しない気もします。一長一短ですね。
作り始めたときは、スマホ専用画面とか作ったら素敵じゃな～い？ とかうっすら思ってたんですが、冷静に考えると、まあ無理ですよね。不可能ってことはないんでしょうけども、見た目をちょいと変えるとかじゃあなくて、スマホ用に大幅に作り直す覚悟がないと無理っぽい。というわけで、スマホではとりあえず動けばいいだろぐらいの気持ちになっていて、大体の形が出来上がった頃にスマホで表示させてみたところ、大きな問題が二つ発生してました。なお、PC用の画面をスマホで表示させているので物凄く見づらい、というのは想定していたことなので今回はスルーしてます。
まず一つ目。JavardryEditorでは種族・職業・アイテム・モンスター等のデータをリストボックスで操作してたんですが、HTML5版では<select>要素のsizeを2以上にすることでリストボックスとして扱える（sizeを1にするとドロップダウンリスト（プルダウンメニュー）になる）ということで、実際にやってみてPCで表示させたのが上の画像。
PCでは思ってた通りの動作をしてくれているので油断してました。同じものをスマホで表示させたのが上の画像。ドロップダウンリストになってるやないか！
軽く調べてみたところ、どうやらスマホではsize指定にかかわらず、強制的にドロップダウンリストになってしまうようです。スマホの画面でリストボックスの各項目部分をクリックするとかしんどいやろ？ ということのようですね。まあ、操作性を考えれば納得のいく話ではあるんですが、項目が少ない場合はまだしも、アイテムとかモンスターのように100とか200とか普通にあり得る場合は、さすがに一覧として表示されてないとわかりにくすぎる。スマホでの動作はおまけみたいなものでとりあえず動けばいいんだ、とは言っても、さすがにこれはどげんかせんといかん。
スクロール付きの<div>要素をとか、まあ細かいことはさておき、なんとかかんとか疑似リストボックス的なものを作りまして、スマホ動作時にはこの疑似リストボックスを表示させるようにしました。拡大しないと狙った項目がクリックしにくいとか、そら見たことかと言われそうな欠点は当然のようにありますが、元のリストボックスと同等の動きをしてくれているので、それだけで僕はもう満足です。成仏出来そうな勢いです。
二つ目。長文のデータを入力するのにテキストエリアを多用してまして、上の画像は呪文効果「HP回復」の回復値と抵抗の計算式を入力するテキストエリアです。PCで表示させた場合は普通に表示されるんですが……
はい、スマホで表示させるとこんな風になってしまいます。文字がでっかくなっちゃった！ とか手品じゃないんで勘弁して下さい。全部のテキストエリアではないんですが、いくつかのテキストエリアで内部の文字がクソデカサイズになってしまい、それに伴ってテキストエリア自体も大きくなってしまうという、これもうバグじゃねーのかと言いたくなる現象が起きています。
調べ方が悪かったのか、なかなか原因が特定出来なかったんですが、スマホではテキストエリアの横幅が大きすぎるとデザインが狂う場合がある、みたいな情報を見つけまして、横幅を縮めてみたら文字サイズが大きくならずに済みました。もしやAndroid特有の症状ではあるまいな……。
横幅をいくつにすればバグらないのかというのは不明なままなんですが、一般的に、スマホではスマホの画面サイズ（横幅）に収まるように設定するものだとかいう情報があり、スマホ専用の表示じゃねえのにしゃらくせえなあ！ とか思いつつ、スマホ表示時にはテキストエリアの横幅を調整するようにしてみました。
画像の通り、本来一行で済む長さなのに折り返されてしまうのがちと悔しいところですが、まあ文字がクソデカサイズにならないだけいいですかね……。
と、まあそんな感じで一応動作確認は実施してますが、こんなん確認し切れるハズもなく、例によって色々とバグが残ってると思われますので、気が向いたら試して頂いて、バグ報告とかしてもらえると助かります。自分の環境ではたまたま動いていただけで、他の環境ではバグがどうとか言う以前に一切動かないとかだったら、泣きながら削除して無かったことにするかもしれません。いや、さすがにそこまで酷いことにはならないと思いたいですけども。
見た目はこんな感じ。大体Java版と同じよーな感じですが、ごちゃごちゃして見づらいところをいくつか整理してます。今回HTML5版作成のために見直していて、個人的に一番見にくかったのが呪文（アイテムの使用効果・SP、トラップ、ダンジョンイベントの呪文効果）の条件分岐や発動種別の部分。特に酷いのがダンジョンイベントの呪文効果で、実際どんな感じかっつーと、以下の画像のような状態です。
Java版では、可能な限りスクロールさせずに一画面に収めようとした結果、こんなことになってしまっています。内容を把握しているハズの制作者自身ですら、ぱっと見では条件分岐や発動種別がどういう繋がりあるんだっけと、混乱してしまうレベルです。
HTML5版では整理して大分すっきりした……気がします。少なくとも、この一部分だけを見るならば大分見やすくはなってると思います。ただし、その分全体を見るには上下にスクロールさせる必要があるので、それはそれで忙しない気もします。一長一短ですね。
作り始めたときは、スマホ専用画面とか作ったら素敵じゃな～い？ とかうっすら思ってたんですが、冷静に考えると、まあ無理ですよね。不可能ってことはないんでしょうけども、見た目をちょいと変えるとかじゃあなくて、スマホ用に大幅に作り直す覚悟がないと無理っぽい。というわけで、スマホではとりあえず動けばいいだろぐらいの気持ちになっていて、大体の形が出来上がった頃にスマホで表示させてみたところ、大きな問題が二つ発生してました。なお、PC用の画面をスマホで表示させているので物凄く見づらい、というのは想定していたことなので今回はスルーしてます。
まず一つ目。JavardryEditorでは種族・職業・アイテム・モンスター等のデータをリストボックスで操作してたんですが、HTML5版では<select>要素のsizeを2以上にすることでリストボックスとして扱える（sizeを1にするとドロップダウンリスト（プルダウンメニュー）になる）ということで、実際にやってみてPCで表示させたのが上の画像。
PCでは思ってた通りの動作をしてくれているので油断してました。同じものをスマホで表示させたのが上の画像。ドロップダウンリストになってるやないか！
軽く調べてみたところ、どうやらスマホではsize指定にかかわらず、強制的にドロップダウンリストになってしまうようです。スマホの画面でリストボックスの各項目部分をクリックするとかしんどいやろ？ ということのようですね。まあ、操作性を考えれば納得のいく話ではあるんですが、項目が少ない場合はまだしも、アイテムとかモンスターのように100とか200とか普通にあり得る場合は、さすがに一覧として表示されてないとわかりにくすぎる。スマホでの動作はおまけみたいなものでとりあえず動けばいいんだ、とは言っても、さすがにこれはどげんかせんといかん。
スクロール付きの<div>要素をとか、まあ細かいことはさておき、なんとかかんとか疑似リストボックス的なものを作りまして、スマホ動作時にはこの疑似リストボックスを表示させるようにしました。拡大しないと狙った項目がクリックしにくいとか、そら見たことかと言われそうな欠点は当然のようにありますが、元のリストボックスと同等の動きをしてくれているので、それだけで僕はもう満足です。成仏出来そうな勢いです。
二つ目。長文のデータを入力するのにテキストエリアを多用してまして、上の画像は呪文効果「HP回復」の回復値と抵抗の計算式を入力するテキストエリアです。PCで表示させた場合は普通に表示されるんですが……
はい、スマホで表示させるとこんな風になってしまいます。文字がでっかくなっちゃった！ とか手品じゃないんで勘弁して下さい。全部のテキストエリアではないんですが、いくつかのテキストエリアで内部の文字がクソデカサイズになってしまい、それに伴ってテキストエリア自体も大きくなってしまうという、これもうバグじゃねーのかと言いたくなる現象が起きています。
調べ方が悪かったのか、なかなか原因が特定出来なかったんですが、スマホではテキストエリアの横幅が大きすぎるとデザインが狂う場合がある、みたいな情報を見つけまして、横幅を縮めてみたら文字サイズが大きくならずに済みました。もしやAndroid特有の症状ではあるまいな……。
横幅をいくつにすればバグらないのかというのは不明なままなんですが、一般的に、スマホではスマホの画面サイズ（横幅）に収まるように設定するものだとかいう情報があり、スマホ専用の表示じゃねえのにしゃらくせえなあ！ とか思いつつ、スマホ表示時にはテキストエリアの横幅を調整するようにしてみました。
画像の通り、本来一行で済む長さなのに折り返されてしまうのがちと悔しいところですが、まあ文字がクソデカサイズにならないだけいいですかね……。
と、まあそんな感じで一応動作確認は実施してますが、こんなん確認し切れるハズもなく、例によって色々とバグが残ってると思われますので、気が向いたら試して頂いて、バグ報告とかしてもらえると助かります。自分の環境ではたまたま動いていただけで、他の環境ではバグがどうとか言う以前に一切動かないとかだったら、泣きながら削除して無かったことにするかもしれません。いや、さすがにそこまで酷いことにはならないと思いたいですけども。
コメント一覧
コメント投稿
