80
点以上
安全運転スコア
安全運転スコアのレイアウトについての章です。
コンテンツエリア毎のラッピング
各コンテンツエリアは「t-monthly driving_score」クラスを付与したタグで囲ってください。
<div class="t-monthly driving_score">
<!-- 各コンテンツが入ります -->
</div>
ユーザー情報
ユーザー情報は「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
恵比寿 太郎
<body>
<section class="t-container">
<div class="t-monthly">
<div class="t-monthly-user">
<div class="t-monthly-user-text">恵比寿 太郎</div>
<!-- /.t-monthly-user --></div>
</div><!-- /.t-monthly -->
</section>
</body>
タイトル
タイトルは「t-container」クラス内の「t-monthly」クラス内に下記を参考に記述してください。
安全運転スコア(累計)
<body>
<section class="t-container">
<div class="t-monthly driving_score">
<div class="t-monthly-title">
<div class="t-monthly-title-image"><img src="../apl/sp/images/driving_score/driving_score_title01.svg" alt="Driving Score"></div>
<h2 class="t-monthly-title-page">安全運転スコア(累計)</h2>
</div><!-- /.t-monthly-title -->
</div><!-- /.t-monthly -->
</section>
</body>
運転特性計測期間
2021.06.18更新
運転特性計測期間は「t-container」クラス内の「t-monthly driving_score」クラス内に下記を参考に記述してください。
「kikan01」クラス内の「text current」クラスに、初期値を設置してください。
【パラメータ詳細】
| data-driving_score_totalpoint | 安全運転スコア(累計)の点 |
|---|---|
| data-driving_score_odometer | 累計走行距離 値が500未満の場合、運転特性割引の割引率が「適用なし」を表示 （data-driving_score_cteristicdiscountの値を n に変更してください） |
| data-driving_score_cteristicdiscount | 継続契約に適用される運転特性割引 値が5の場合「5%割引」を表示 値が3の場合「3%割引」を表示 値が0の場合「0%（割引なし）」を表示 値がnの場合「適用なし」を表示 |
「text」クラスに「nodata」クラスを付与すると、「＞」ボタンを押下した際「月次評価データ送信前 固定画面」を表示、「安全運転スコア(累計)の推移」は非表示になります。
安全運転スコア(累計)の推移は下記を参考に記述してください。
（※関連ファイル：Chart.min.js、driving_score.js）
運転特性計測期間
2022年01月01日 ～ 2022年08月31日
2022年09月01日 ～ 2023年08月31日
2023年09月01日 ～ 2024年08月31日
2024年09月01日 ～ 2025年08月31日
2025年09月01日 ～ 2026年08月31日
安全運転スコア(累計)
点
累計走行距離
km
運転特性割引の割引率
5
％割引
割引なし
(0％)
適用なし
安全運転スコア(累計)
安全運転スコア(累計)に応じて、
継続契約の基本保険料も割引に。
継続契約の基本保険料も割引に。
/
- 安全運転スコア(累計)・累計走行距離については、始期日の属する月の翌々月中頃から毎月更新されます。
- 運転特性割引の割引率は、運転特性計測期間終了後に決定します。
- 安全運転スコア(累計)・累計走行距離については、 始期日の属する月の翌々月中頃から毎月更新されます。
- 継続契約に適用される運転特性割引は、運転特性計測期間終了後に決定します。
<body>
<section class="t-container">
<div class="t-monthly driving_score">
<div class="t-monthly-user">
<div class="t-monthly-user-text">恵比寿 太郎</div>
</div><!-- /.t-monthly-user -->
<div class="t-monthly-title">
<div class="t-monthly-title-image"><img src="../apl/sp/images/driving_score/driving_score_title01.svg" alt="Driving Score"></div>
<h2 class="t-monthly-title-page">安全運転スコア(累計)</h2>
</div><!-- /.t-monthly-title -->
<div class="t-block lange">
<div class="t-text center">
<h3 class="title">
<span class="main">運転特性計測期間</span>
<span class="btn-open t-modal-open iconfix01" data-openMadal="driving_score_modal01"></span>
</h3>
<div class="kikan01">
<div class="ini">
<p class="text" data-drive_score_totalpoint="95" data-driving_score_odometer="8000" data-driving_score_cteristicdiscount="5">2022年01月01日 ～ 2022年08月31日</p>
<p class="text" data-drive_score_totalpoint="94" data-driving_score_odometer="7000" data-driving_score_cteristicdiscount="3">2022年09月01日 ～ 2023年08月31日</p>
<p class="text" data-drive_score_totalpoint="93" data-driving_score_odometer="6000" data-driving_score_cteristicdiscount="0">2023年09月01日 ～ 2024年08月31日</p>
<p class="text" data-drive_score_totalpoint="92" data-driving_score_odometer="499" data-driving_score_cteristicdiscount="n">2024年09月01日 ～ 2025年08月31日</p>
<p class="text nodata" data-drive_score_totalpoint="" data-driving_score_odometer="" data-driving_score_cteristicdiscount="">2025年09月01日 ～ 2026年08月31日</p>
<span class="controler prev"></span>
<span class="controler next"></span>
</div><!-- /.ini -->
</div><!-- /.kikan01 -->
</div><!-- /.t-text -->
</div><!-- /.t-block -->
<div class="t-monthly-circle">
<div class="t-monthly-circle-charts">
<div class="ini">
<div class="t-monthly-circle-charts-title">
<span class="main">安全運転スコア(累計)</span>
<span class="btn-open t-modal-open iconfix02" data-openMadal="driving_score_modal02"></span>
</div>
<div id="driving_score-circle"></div>
<div class="t-monthly-circle-charts-text">点</div>
</div><!-- /.ini -->
</div><!-- /.t-monthly-circle-charts -->
</div><!-- /.t-monthly-circle -->
<div class="t-drive-detail">
<div class="t-drive-detail-title">
<h3>詳 細</h3>
</div><!-- /.t-drive-detail-title -->
<div class="t-drive-detail-combo">
<div class="t-drive-detail-distance add_info driving_score_odometer">
<div class="t-drive-detail-distance-header">
<div class="t-drive-detail-distance-title">
<h3 class="title">
<span class="main">
累計走行距離
<span class="btn-open t-modal-open" data-openMadal="driving_score_modal03"></span>
</span>
</h3>
</div><!-- /.t-drive-detail-distance-title -->
</div><!-- /.t-drive-detail-distance-header -->
<div class="t-drive-detail-distance-body">
<div class="body">
<div class="display">
<span class="main"></span>
<span class="sub">km</span>
</div><!-- /.display -->
</div><!-- /.body -->
</div><!-- /.t-drive-detail-distance-body -->
</div><!-- /.t-drive-detail-distance -->
<div class="t-drive-detail-distance add_info driving_score_cteristicdiscount">
<div class="t-drive-detail-distance-header">
<div class="t-drive-detail-distance-title">
<h3 class="title">
<span class="main">
運転特性割引の割引率
<span class="btn-open t-modal-open" data-openMadal="driving_score_modal04"></span>
</span>
</h3>
</div><!-- /.t-drive-detail-distance-title -->
</div><!-- /.t-drive-detail-distance-header -->
<div class="t-drive-detail-distance-body">
<div class="body">
<div class="display">
<span class="main">5</span>
<span class="sub">％<span class="sub-text">割引</span></span>
</div><!-- /.display -->
<div class="driving_score_zero">（割引なし）</div>
<div class="driving_score_not">適用なし</div>
</div><!-- /.body -->
</div><!-- /.t-drive-detail-distance-body -->
</div><!-- /.t-drive-detail-distance -->
</div><!-- /.t-drive-detail-combobox -->
</div><!-- /.t-drive-detail -->
<div class="t-block driving_score_data">
<div class="t-monthly-content">
<div class="t-monthly-content-item active">
<div class="t-monthly-content-shift">
<div class="t-block change_block">
<div id="graph-b" class="t-monthly-content-shift-block">
<div class="t-monthly-content-shift-block-header">
<div class="t-monthly-content-shift-title">安全運転スコア(累計)</div>
<div class="t-monthly-content-shift-text">
安全運転スコアに応じて、<br class="brfix">継続契約の基本保険料も割引に。<br><span class="t-monthly-content-shift-icon-blue">5％割引</span> <span class="t-monthly-content-shift-icon-lightblue">3％割引</span>
</div>
</div><!-- /.t-monthly-content-shift-block-header -->
<div class="t-monthly-content-shift-linegraph">
<div class="t-monthly-content-shift-linegraph-item">
<div class="b_canvas_wrap">
<canvas id="canvas_driving_score"></canvas>
</div><!-- /.b_canvas_wrap -->
</div><!-- /.t-monthly-content-shift-linegraph-item -->
<div class="t-monthly-content-shift-linegraph-button">
<div class="t-monthly-content-shift-linegraph-button-icon">
<div id="linegraph-kako">
<div id="linegraph-paging-prev"><img src="../apl/sp/images/monthly/btn02.png" alt="Prev"></div>
<div class="linegraph-paging-this"></div>
<div class="linegraph-paging-sprit">/</div>
<div class="linegraph-paging-all"></div>
<div id="linegraph-paging-next"><img src="../apl/sp/images/monthly/btn01.png" alt="Next"></div>
</div>
</div>
</div><!-- /.t-monthly-content-shift-linegraph-button -->
<ul class="annotation">
<li>安全運転スコア(累計)・累計走行距離については、始期日の属する月の翌々月中頃から毎月更新されます。</li>
<li>運転特性割引の割引率は、運転特性計測期間終了後に決定します。</li>
</ul><!-- /.annotation -->
</div><!-- /.t-monthly-content-shift-linegraph -->
</div><!-- /.t-monthly-content-shift-block -->
</div><!-- /.t-block -->
<div class="t-block">
<ul class="annotation more_info">
<li>安全運転スコア(累計)・累計走行距離については、 始期日の属する月の翌々月中頃から毎月更新されます。</li>
<li>継続契約に適用される運転特性割引は、運転特性計測期間終了後に決定します。</li>
</ul><!-- /.annotation -->
</div><!-- /.block -->
</div><!-- /.t-monthly-content-shift -->
</div><!-- /.t-monthly-content-item -->
</div><!-- /.t-monthly-content -->
</div><!-- /.t-block -->
</div><!-- /.t-monthly -->
</section>
</body>