PHP+MySQLで家計簿システム開発#21【スマホUIをタブ切り替えに修正】

前回はカレンダーの日付部分にその日の支出と収入の合計金額を表示し、日付クリックで詳細モーダルを表示する機能を実装しました。

↓前回の記事はこちら

前回は選択項目編集画面からホームへ戻ったときのセッション処理の追加と収支データ出力箇所のページネーション機能の追加を行いました。 ↓前回の記事はこちら今回はカレンダーを作成し、いついくらの収支があったのかをひと目で分かる機能を追加します。...

今回はスマホ時のUIを「データ入力」「カレンダー」「データ一覧」の3つのタブを作り、タップで切り替えるUIに修正します。

スマホUIをタブ切り替えに
スタイリング修正
最後に

スマホUIをタブ切り替えに

まずはタブをコーディングします。今回は画面下部に固定するので、</main>の前に以下を追記します。

  <!-- スマホ用切り替えタブ -->
  <ul class="p-switch-tab" id="tab">
    <li class="p-switch-tab__item is-active" data-tab="tab-1">
      <i class="fa-solid fa-pen"></i>
      入力
    </li>
    <li class="p-switch-tab__item" data-tab="tab-2">
      <i class="fa-solid fa-calendar-days"></i>
      カレンダー
    </li>
    <li class="p-switch-tab__item" data-tab="tab-3">
      <i class="fa-solid fa-list"></i>
      一覧
    </li>
  </ul>
  <!-- スマホ用切り替えタブ -->

</main>

<li>の「data-tab」属性は、タブ切り替えの要素と紐付けるために設定します。
続いて、タブ項目と紐付ける要素にdata-tab属性と「js-switch-content」クラスを設定します。

<!--データ入力要素を囲むsection 171行目付近-->
<section class="p-section p-section__records-input js-switch-content" data-tab="tab-1">

<!--カレンダー要素を囲むsection 307行目付近-->
<section class="p-section p-section__calendar js-switch-content" data-tab="tab-2" id="calendar">

<!--データ一覧を囲むsection 477行目付近-->
<section class="p-section p-section__records-output js-switch-content" data-tab="tab-3" id="data-table">

そして今回はタブ切り替えのプラグインを使用します。
使用するjsファイルはこちら

上記ファイルをjsディレクトリ直下に保存したら、index.phpのscript読み込みプログラムの一番下に読み込ませます。

<script src="./js/jquery.cookie.js"></script>

ここからは以下の記事を参考に、タブの選択状態がリロードされても維持されるプログラムを実装します。

jQuery Cookie を使ってタブ切り替え状態を保持する方法 - Wataame Frog

jquery.cokkieを使い、リロードや別ページから戻った場合などでもタブ切り替え状態を保持する方法の紹介。

タブを動かすために以下のプログラムをトップへ戻るボタンの挙動を実装したプログラムの下に追記します。

//スマホタブ切り替え
$(function() {
  // クッキー保存されている or いない場合
  if ($.cookie('num')) {
    num = $.cookie('num');
  } else {
    num = 0;
  }

  // タブ処理
  tabSwitching(num);
  // クリックされた場合
  $('#tab li').click(function() {
    // クリックされた <li> のインデックス番号を取得
    num = $('#tab li').index(this);
    // タブ処理
    tabSwitching(num);
    // クッキーを保存
    // 有効期限は1日(ブラウザを閉じたら初期化)
    $.cookie('num', num, {
      expires: 1
    });
  });

  // タブ切り替え処理
  function tabSwitching(num) {
    $('#tab li').removeClass('is-active');
    $('#tab li').eq(num).addClass('is-active');
    $('.js-switch-content').addClass('hide');
    $('.js-switch-content').eq(num).removeClass('hide');
  }
});

上記までを実装すると以下のようになります。

あらかじめタブ切り替え時に非表示にする要素に追加する「hide」クラスのスタイリングを設定してあるので、このようにタブを切り替えると該当要素のみが表示されます。]

スタイリング修正

タブメニューを下部に設置したことで修正したいスタイリングが何点かあるので修正を行います。

トップに戻るボタンの位置修正

まず１点目はトップへ戻るボタンがメニューに隠れてしまったので修正します。

//トップへ戻るボタン
・
・
省略
・
・
if (appear == false) {
  appear = true;

  //以下に書き換え
  if (window.outerWidth > 900) { //PC表示時
    pagetop.stop().animate({
      'bottom': '3.6rem' //下から3.6remの位置に
    }, 300); //0.3秒かけて現れる
  } else {
    pagetop.stop().animate({ //スマホ表示時
      'bottom': '9rem' //下から9remの位置に
    }, 300); //0.3秒かけて現れる
  }

}
・
・
省略
・
・

index.phpの下部に記述しているトップへ戻るボタンのプログラムの一部を修正します。
既存のプログラムは画面サイズに関わらず、1000pxスクロールされたら画面下から3.6remの場所に表示するよう記述していました。
しかしスマホ表示の際は下から9remの場所に表示させたいので「appear = ture」の下にif文を追加し、表示させる位置を画面幅によって変更するプログラムに修正しました。

データ一覧タイトルとページネーション部分の修正

まずは<h3>収支一覧</h3>をスマホ画面では表示しないようにします。

<!--478行目付近-->
<h3 class="pc_only">収支一覧</h3>

「pc_only」クラスを付与することでスマホ時など画面が狭いときには非表示にします。
※pc_onlyクラスのスタイリングも予め設定済みです。

タイトルを非表示にすると検索フォームの上に余白が大きく空いてしまったので、こちらのスタイリングも修正します。
cssディレクトリ内の「project」直下にある「_section.scss」の189行目付近に以下を追記します。

  //支出データ出力セクション
  &__records-output {
    margin: 4rem 0 0;
    > h3 {
      font-size: 2.4rem;
      text-align: center;
    }
    .p-form {
      padding: 3rem 0 1rem;

      //追加ここから
      @include m.mq(tab){
        padding: 0 0 1rem;
      }
      //ここまで

    }
    &.hide {
      @include m.mq(tab){
        display: none;
      }
    }
  }

追記ができたら最後にcssディレクトリ直下の「style.scss」を保存してください。

続いてはページネーション部分です。
こちらの「次へ」がトップへ戻るボタンとかぶってしまっているので修正します。

cssディレクトリ内「project」にある「_pagenation.scss」の以下を修正します。

.sp_only .p-pagenation {
  position: relative;
  //削除 height: 5rem;
  display: block;
  //削除 margin: 0;
  text-align: center; //追加
  a {
    //削除 position: absolute;
    //削除 top: 3rem;
    display: inline-block; //追加
    padding: .7rem 1.4rem; //追加
    margin: 0 1rem; //追加
    //削除 &.prev {
    //削除   left: 0.5rem;
    //削除 }
    //削除 &.next {
    //削除   right: 0.5rem;
    //削除 }
  }
}

以上に修正し「style.scss」を保存すると以下のようにセンター揃えで表示されるようになります。

カレンダー詳細モーダル表示時はタブメニューを非表示に修正

3点目はカレンダーの詳細表示モーダルが、縦に長いときにメニューに隠れてしまうので修正します。
詳細表示モーダル表示されているときは、タブメニューを表示しないようにします。

タブメニュー要素をif文で囲います。

<!-- スマホ用切り替えタブ -->
<?php if (!isset($_GET['detail'])) : ?>
  <ul class="p-switch-tab" id="tab">
    <li class="p-switch-tab__item is-active" data-tab="tab-1">
      <i class="fa-solid fa-pen"></i>
      入力
    </li>
    <li class="p-switch-tab__item" data-tab="tab-2">
      <i class="fa-solid fa-calendar-days"></i>
      カレンダー
    </li>
    <li class="p-switch-tab__item" data-tab="tab-3">
      <i class="fa-solid fa-list"></i>
      一覧
    </li>
  </ul>
<?php endif; ?>
<!-- スマホ用切り替えタブ -->

detailパラメータが設置されているときには、タブメニューが表示されなくなります。

要素をアニメーションでふわっと表示

タブメニューで切り替える際にアニメーションでふわっと表示されるように修正します。

まずcssディレクトリ内のfoundationディレクトリ内にある「_animation.scss」に以下を追記します。

@use "../foundation/mixin" as m;  //この記述は冒頭に追加

@keyframes fade-in{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.fade-in{
	@include m.mq(tab){
		animation: fade-in .5s alternate;
	}
}

追記したあとに「style.scss」を保存してください。
これでふわっと表示したい要素に「fade-in」クラスを付与するだけでアニメーションがせってできるようになります。

index.phpの各タブ切り替え要素にクラスを付与します。

<!-- 収支データ入力 173行目付近-->
<section class="p-section p-section__records-input js-switch-content fade-in" data-tab="tab-1">

<!-- カレンダー 309行目付近-->
<section class="p-section p-section__calendar js-switch-content fade-in" data-tab="tab-2" id="calendar">

<!--  データ出力部分 479行目付近-->
<section class="p-section p-section__records-output js-switch-content fade-in" data-tab="tab-3" id="data-table">

以上でタブ切り替えをした際にふわっと表示されるようになります。

不要になったプログラムの削除

5点目はタブメニューにしたことで必要なくなった部分を削除します。
これまでカレンダー詳細表示モーダルの「OK」ボタンに「#calendar」というアンカーリンクをつけていましたが、タブメニューにし必要なくなったので削除します。

//155行目付近
if (isset($_GET['ym']) && isset($_GET['page_id'])) :
  $detail_ok_link = './index.php?ym=' . $ym . '&page_id=' . $page_id; //#calendar削除
elseif (isset($_GET['ym'])) :
  $detail_ok_link = './index.php?ym=' . $ym;　//#calendar削除
elseif (isset($_GET['page_id'])) :
  $detail_ok_link = './index.php?page_id=' . $page_id; //#calendar削除
else:
  $detail_ok_link = './index.php';
endif;

またカレンダー要素に付与していた「id=”calendar”」も必要ないので削除します。

<!--  カレンダー 309行目付近-->
<section class="p-section p-section__calendar js-switch-content fade-in" data-tab="tab-2">

そしてカレンダー上部の「＜」「＞」「今月」要素に付与していたonclick属性とid属性も不要なので削除します。続けてfunction.jsに記述している関数も削除します。

<p>
  <a href="<?php echo $calendar_link_prev; ?>">＜</a>
  <?php echo $calendar_title; ?>
  <a href="<?php echo $calendar_link_next; ?>">＞</a>
  <a href="<?php echo $calendar_link_now; ?>">今月</a>
</p>

//以下削除
const onClickMonth = (target) => {
  const windowWidth = window.outerWidth;
  const windowSp = 767;
  if (windowWidth <= windowSp) {
    const targetElement = document.getElementById(target);
    const targetLink = targetElement.getAttribute('href');
    const newHref = targetLink + '#calendar';
    targetElement.setAttribute('href', newHref);
  }
}

以上で修正は完了です。