本研究で提案した構成要素カスタマイズの動き

研究背景

　本研究の現状の問題点として、現在のWEBサイトでは、ユーザ側に表示される構成要素の配置のカスタマイズをする技術があまり発展していない．一部，ユーザがWEB上で構成要素の配置を変更することはできるものの，自由性はあまり高くはなく，制限が多い．その点で，個別に思い描く個人が操作しやすい構成要素の配置を実現させることは不可能である．また，人によって，必要のある情報と必要のない情報，つまり必要なWEBサイト上の要素が異なり，それがWEBサイトを使用する中で不必要になることもある．そうした問題点を本研究で解決することが取り組んだ．

研究内容

　構成要素を画面上で，どの座標でも移動ができるという機能である．また，ユーザ側が構成要素の拡大・縮小を操作することが可能で，より独自の構成要素の配置をカスタマイズしていき，ユーザ側の操作性の向上を目指す．内容としては，通常のサイトでは，それぞれの要素が階層化されており，Body，Area，Grid，Blockの順で、階層に区分されている．そこで，この階層をWEBサイト側のプログラムを変更することを可能であると，構成要素の配置がさらにカスタマイズが可能になる．

　以下に示す画像は一般的な従来のWEBサイト階層化方法である．Blockの部分が構成要素にあたるが，従来の方法だと，Block間での位置変えをすることしかできない．

従来のWEBサイト階層化方法

　そこで本研究で提案した手法として，JQueryというライブラリを使用し，以下の画像に示すように，Blockが移動できる範囲をWEBサイト全体にし，Blockの配置の移動もBlock同士だけではなく，個別に好きな位置への移動を可能にした．

本研究のWEBサイト階層化方法

　構成要素カスタマイズのサンプルサイト

　本研究の手法を実際に取り入れたサンプルサイトを作成した．予定管理サイトを土台とし，構成要素を４つ用意した．それぞれの構成要素をユーザが個別で自由に動かすことができたり，最大化・最小化の操作もおこなうことができるようになっているものである．冒頭にある動画の動きのように，マウスカーソルで構成要素をカスタマイズすることができるようになっている．構成要素そのものの機能もそれぞれ，カレンダー，連絡先一覧，to-doリスト，時間割というように学生向けに作成した要素を使用することができる．

　ソースコードの内容

　本研究でも使用したJQueryというライブラリを元に記述した場合を説明する．従来の構成要素のカスタマイズ機能のコードとしては，以下のソースコードを例として説明する．

$('.le-block-menu__move').on('MSPointerDown touchstart mousedown', function(e){
    $(this).closest('.le-block').pep({
        shouldEase: false,
        place: false,
        droppable: ".le-block-edge",
        revert: true,
        start: function(ev, obj) {
            // ドラッグが始まる際の処理
        },
        drag: function(ev, obj) {
            // ドラッグ中の処理
        },
        stop: function(ev, obj) {
            // ドラッグが終了した際の処理
        }
    });
});
<div class="le-block-edge"></div>
<div class="le-block" id="block1">
　<!-- 何かコンテンツ -->
</div>
<div class="le-block-edge"></div>
<div class="le-block" id="block2">
　<!-- 何かコンテンツ -->
</div>
<div class="le-block-edge"></div>
<div class="le-block" id="block3">
　<!-- 何かコンテンツ -->
</div>
<div class="le-block-edge"></div>

　従来の方法は以上のとおりである．この方法は”droppable”というコードを使用しているため，Block同士の位置変えしかできない．しかし，本研究のソースコードの記述方法で”dragging pep”というコードを使用すれば，Grid内でBlockを自由に配置を移動させる処理をすることができる．そのコードが以下のとおりである．

// マウスダウンおよびタッチスタート時の処理
    $('#block1, #block2, #block3, #block4').on('mousedown touchstart', function (e) {
        $(this).closest('.le-area, .le-grid').addClass('pep-dragging');
    });

    // マウスアップおよびタッチエンド時の処理
    $(document).on('mouseup touchend', function () {
        $('.le-area, .le-grid').removeClass('pep-dragging');
    });
// 各ブロックのクリック時の処理
    $('#block1, #block2, #block3, #block4').on('click', function () {
        // クリックされたブロックを移動
        $(this).pep({
            initiate: function () {
                $(this).closest('.le-area, .le-grid').addClass('pep-dragging');
            },
            stop: function () {
                $(this).closest('.le-area, .le-grid').removeClass('pep-dragging');
            },
            axis: null,
            shouldPreventDefault: false,
        });
    });

　また，構成要素の最大化・最小化については”core.style.display”を使用することで，構成要素の内容をボタンの切り替えによって表示するか非表示にするのかを処理させる方法を採用している．そのソースコードは以下に示す．

// coreの非表示・表示を切り替え
if (core.style.display === '' || core.style.display === 'block') {
    // もし表示中または初期状態（空文字）だった場合、非表示にする
    core.style.display = 'none';
} else {
    // それ以外の場合、表示する
    core.style.display = 'block';
}

　評価実施

　本研究で提案した手法が実際にどの程度カスタマイズ性があり，実用的に使用することができるのかを調べるため，第三者にサンプルサイトを使用してもらい評価してもらった．その結果，以下のことがわかった．

　本研究の手法でのカスタマイズ機能の利点

• 要素を最小化することで配置の管理がおこないやすい．
• 要素の位置を独自の配置にすることで自由性が向上する．

　本研究の手法でのカスタマイズ機能の欠点

• 要素の操作に自由性がある分、要素同士の重なりが起こってしまう．
• 一部の要素の動きにバグが起こってしまい，使用に支障が出ることがある．

まとめ

　本研究でおこなった提案内容は，WEBサイトの要素の配置をカスタマイズ機能を作成し，その要素の操作を使い作成した構成要素の配置をユーザごとにデータとして保存する機能の検討と作成をすることでWEBサイトの操作性の向上をさせるというものだった．評価結果としては，要素の配置を自由化させることでユーザの手に届かない操作が実現でき，自由性を感じる一方で，さまざまな不具合もあった．

　また，今回の研究では，独自の構成要素の配置のカスタマイズしたデータ保存機能については，実装することができなかった．今後の課題点は，要素の不具合を無くし，さらに自由性だけではなく快適性を向上させること．そして，独自の構成要素の配置のデータを保存できるアカウント機能を実装させることである．それらを実現することができれば，WEBサイト上でのユーザの操作の可能性が拡大し，より本研究の目的に近づくことができると期待できる．