100日後に完成するゲームシステム 83日目「Webサイトのパンくずリストや管理画面などで使える階層選択型UI」

ライブラリに頼らず独自にUIを考えることを趣味にしている、ユゲタです。 ゲーム本番以外の管理画面って、とにかく手を抜きがちで、味も素っ気もない、簡素な画面になりガチですが、 今回は、どうしても使いづらかった箇所に手を入れてみて、その内容が比較的、他のwebサイトでも使えると思って、紹介したいと思います。

通常のUI

この画面キャプチャは、ゲーム内で使用するアイテムの一覧を管理する画面ですが、 簡単に説明すると、階層化された名前と、その中の情報を記載するだけの管理画面です。 内容は今後作り込むとして、階層表示は、データが増えてきたら膨大な数になることが想定できます。 この画像だけではわかりにくいのですが、名前部分は、フォルダ構造のファイル名のようになっていて、ようするに階層構造になっているんですね。 なので、今現在の階層にある一覧だけ表示すればもっと使いうやすくなるのに・・・ そう考えて、どうすればそれに該当するUIが作れるかを考えてみました。

独自UI

そして、出来上がったのが、この画面キャプチャの機能です。 通常版と比べると少しだけUIがよくなっている感じが分かるでしょうか？ 全体で１つの一覧で表示するのではなく、階層を掘り進んでいくような使い方ですが、マウスだけでサクサクと選択できてしまうし、 表示されるのも同一階層のみなので、ちゃんとデータを整理していれば、無駄な表示がなくなって、非常に効率的になるという事です。

どんなメリットがあるの？

実際に使ってみた感覚は、通常版とUI版では、圧倒的に違っていて、同一仕様のすべてのデータにこのUIを仕込む予定です。 通常のホームページでもｍ、「パンくずリスト」という機能を備えているサイトもありますが、 そのパンくずリストとしても、同じUI機能を使うことで、WEBサイト内にあるたくさんのページを移動するときに、便利に操作できるようになるかもしれません。 何かしらのシステム画面などは、階層選択機能などは、よくみかけるため、そうした箇所にも部分的にこのUIを組み込むことで、システム利用効率の向上が見込めるかもですね。

構築難しいんでしょ？

実は、今回のこのUI機能は、以前にブログで書いたことのある機能を組み合わせて作り込んだのです。 serectタグは使いづらい、選択も入力もできるフォーム構築ができる「pulldown.js」 タグ登録機能サンプル「TagRegist」 この２つの記事なんですが、このプログラムを使って、さらに、階層表示をするための、絞り込み機能をCGIで作る必要があるんですが、 使いたい人は、さほど難しくないはずなので、トライしてみてください。 この機能、色んなサイトのパンくずリストとして使えるようなライブラリコーディングができたら、このブログやGithubなどで公開したいと思います。 いや〜UIって奥深いですね。