デッキエディタ開発記録 vol.44 – V2系エディタが横長モニタに対応しました
新年一発目のアップデートは、エディタの横長モニタへの対応です。
これはスマホの横持ちは当然ですが、一般的なPCモニタへの最適化作業でもありました。
以前までのバージョンでは、同じインターフェイスの高さとか幅とかを調整して、無理やり「動かせなくはない」と言う状態にしていただけでしたが、今回はちゃんとGUIのデザインからやりました。
早速見て行くのですが、iPhone ユーザーは取り合えず Safari の設定を変更する事をお勧めします。
この赤枠で囲った「横向き時にタブバーを表示」をオフにするのだけは、絶対にやった方が良いと思ってます。（※否定意見の多い、下にURL欄が表示される「縦持ち時のタブバー」については別に嫌いじゃないのでそのまま使ってます。）
これデフォでオンになってるんだけど、iPhone X 系では残酷なぐらい縦幅が圧迫されて、超ストレスフルな操作を強いられるブラウザへと変貌します。
近年はこう言った、アスペクト比が 16:9 を超えるディスプレイを持つ機種が増えてきましたねぇ。
表示仕様のお話
では気を取り直して、ダッシュボードV2の「クイックアクセス」から、お気に入りのリストにアクセスしてみましょう。
あ、そう言えばサイトのロゴも作成しました。
V2系のツール群は、MTGの「カードタイプ – サブタイプ」の表記ルールを踏襲して
M:TG – Tools
と言う名称にしました。
今まで何も気にしてなかったのですが、ツールズとか呼んでもらえたら嬉しいです。
で、iPhone 13 pro の実機で表示するとこんな感じ。
なんか気持ち悪いな？
この画面下部の変な隙間は、前述の「横向き時のタブバーの表示をオフ」にした後遺症と言うか仕様なんだと思う。
そして iOS の Safari の仕様で、表示したページ内で「一番初めにスクロールした瞬間にリサイズイベントが１回だけ走る」と言う挙動により、
ピッタリと収まる。
左右のグレーの部分は、X 系ディスプレイの「角丸になってる部分は100％の指定範囲に含まれない」からっぽい？
結局気持ち悪いな？
この辺は開発する方も使う方も慣れなんだと思うので、追いつけるように精進します。
インターフェイスのお話
操作方法については特に変更点は無しで、配置とか見た目が横長ディスプレイに最適化された形となります。
一番大きな見た目の変化は、リスト内のカードが画像ではなく、右側にカード名とコストがテキストで表示される点です。（※横スクロールが縦スクロールになってるのも変更点ですね！）
縦持ち時と同じく「クリーチャー」とか「インスタント」とか、カードタイプの境目には黒いラベル行が表示されます。
見た目は大きく変わってますが、操作方法は同じです。
１回タッチで選択状態になって、もう一度タッチするとリスト内から削除。
勿論長押しすればプレビューが開きます。
ボードの切り替えと、分布グラフや検索メニューやリストの保存などのアイコンは左下に固めました。
PCでの操作について
実はこれが本命と言うか、そもそものインターフェイスがマウス操作と相性が悪すぎたんですよね。
今回のアップデートにて、PCでのエディット作業が大きく改善されると良いな。
取り合えず「島」でも検索してみましょう。
中々壮観です、右側にリストを寄せたおかげでマウスのホイール操作が可能になって快適です。（※今までこの当たり前の縦スクロールが出来なかった。）
プレビューはなんか画像がデカ過ぎて、誘い笑いがこみ上げてきます。
テキスト表示だと「デッキの中身が分かりにくい」みたいな意見があるかも知れませんので、設定の中の「公開プレビュー」でパブリッシュページを見るとかでカバーしてください。
自分で言うのもアレだけど、中々見やすいと思います。
—
以上、新機能の紹介でした。
エディット関連はこれで目標を達成したので、一旦フィードバックからのバグ修正とかに専念しようかと思います。
ご協力頂いている皆様に感謝。