前回までで想定していた機能の実装は完了しました。
今回からはほしいなと思った機能を追加するなどカスタマイズを気ままにしていきます。
↓前回の記事はこちら
メモの表示
現在ホーム画面下の収支データ表にメモのアイコンを「メモが登録されている場合のみ」出力していますが、このアイコンにイベントを設置してアラート画面でメモの内容を表示するようにします。
まずはイベントを設定します。
function showMemo(memo) {
alert(memo);
}ただアラートに表示させる基本的なイベントです。表示する内容を引数に設定します。
イベントが記述できたら<i>タグで作っているメモのアイコンにイベントを設定します。
<!--327行目付近・545行目付近-->
<i class="fa-regular fa-message" onclick="showMemo('<?php echo h($memo); ?>');"></i>※PC表示の表だけでなくスマホ版のメモアイコンにも同じイベントを設定します。
メモアイコンを押すとアラートにメモの内容が表示されるようになりました。
パーツの共通化
今後の保守も考えて、共通パーツを1つのファイルにまとめて各ページに読み込ませる処理に変更します。
今回はヘッダーを共通化していきます。
PHPファイルを格納している同階層に「header.php」という名前のファイルを作成し以下を記述します。
以下はindex.phpの<!DOCTYPE html>から</header>までをコピーして持ってきたものです。
<title>の中だけ少し修正しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.min.css">
<script src="./js/footer-fixed.js"></script>
<title>家計簿アプリ｜<?php echo $page_title;?></title><!--「ホーム」をPHP出力に変更-->
</head>
<body class="body" id="body">
<header class="l-header">
<h1 class="l-header__title"><a href="./index.php">家計簿アプリ</a></h1>
<div class="l-header__icon">
<a href="./index.php">
<i class="fa-solid fa-house"></i>
</a>
<a href="./account.php">
<i class="fa-solid fa-user"></i>
</a>
<a href="./logout.php" id="logoutButton" onclick="logoutConfirm();">
<i class="fa-solid fa-arrow-right-from-bracket"></i>
</a>
</div>
</header>このパーツを各ページに読み込ませていきます。
読み込ませるページ
・index.php
・account.php
・item-edit.php
・record-edit.php
読み込ませ方は、各ページの<!DOCTYPE html>から</header>までを削除し以下をPHP内に記述します。
$titleの値はページによって変えています。
//index.php
$page_title = "ホーム";
include_once('./header.php');
//account.php
$page_title = "アカウント管理";
include_once('./header.php');
//item-edit.php
$page_title = $subTitle . '編集';
include_once('./header.php');
//record-edit.php
$page_title = "レコード編集";
include_once('./header.php');以上に書き換えることで、画面上は特に変わりませんが今後の修正の際に1回で済むようになりました。
続いて「join」ディレクトリに格納しているファイルのheaderパーツを共通化します。
まずjoinディレクトリ直下に「header.php」を作成し以下を記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/style.min.css">
<script src="../js/footer-fixed.js"></script>
<title>家計簿アプリ｜<?php echo $page_title; ?></title>
</head>
<body>
<header class="l-header--join">
<h1 class="l-header__title l-header__title--join">会員登録</h1>
</header>そして各ファイルの<html>から</header>までを削除し、冒頭PHPプログラムの一番下に以下を記述します。
//index.phpの場合
$page_title = '新規ユーザー登録';
include_once('./header.php');
//confirm.phpの場合
$page_title = '登録情報確認';
include_once('./header.php');
//thanks.phpの場合
$page_title = '登録完了';
include_once('./header.php');以上で「join」ディレクトリファイルのヘッダーパーツの共通化が完了です。
おまけ
おまけとして全体のフォントを変更します。
今回はGoogle Fontsの「Zen Maru Gothic」を使います。
先程共通化したheader.phpとlogin.phpのhead内に以下を記述します。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap" rel="stylesheet">そしてcss→foundationディレクトリ内の「_reset.scss」の23行目のhtmlセレクタと233行目付近のseslectセレクタに以下を追加します。
html {
font-size: 62.5%;
color: #333;
line-height: 1; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: transparent; /* 3*/
font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif, "FontAwesome"; /* 書き換え */
font-weight: 500 /* 追記 */
}
button,
input,
optgroup,
select,
textarea {
vertical-align: middle;
color: inherit;
// font: inherit;
background: transparent;
padding: 0;
margin: 0;
// border-radius: 0;
text-align: inherit;
text-transform: inherit; /* 2 */
font-family: "Zen Maru Gothic", sans-serif; /* 追記 */
font-weight: 500; /* 追記 */
}※追記したあとすぐには反映されません。css直下の「style.scss」を保存することで反映されます。
以上でフォントの指定は完了です。
最後に
今回は簡単な内容でしたが、メモの内容をアイコンクリックで表示させたり、今後の保守も考えて各ページの同じパーツを1つのファイルにまとめて管理するように修正しました。
次回からは、レビューで頂いた点を修正していきます。
最後までお読みいただきありがとうございました。
コメント