タグ検索:web制作

Web制作に役立つ js ライブラリの小粒な Tips をご紹介します。
今回はWebサイトのTOPページなどでよく利用するjsライブラリ「slick」で、「.slick-dots」で利用される<button>の「aria-hidden」が、画像の表示・非表示に連動してボタンも「aria-hidden="true"」or「aria-hidden="false"」と切り替わってしまう問題についての解決方法をお伝えします。

問題点

この問題点は、画像が表示されていない時にも「.slick-dots」が連動して「aria-hidden="true"」になってしまいます。この場合画像は表示されていなくても、「.slick-dots」の<button>は表示されているため本来は「aria-hidden="false"」が正解になります。
この記述が間違っていることで、音声ブラウザで利用された際にボタンについて間違った操作方法が伝わる可能性があります。

解決策

当初、海外など色々な情報を探しましたが、解決法がわからずでした。
そこで他のサイトはどうかと、最近作った別のサイトを確認したところ、slickを使っていても新しいバージョンではこの問題が解決していることに気付きました。

いつから大丈夫になったのか分かりませんが、今回利用していた古い「slick.js ver1.4.1」では「aria-hidden」問題がおきますが、最新の「slick.js ver1.8.0」(2024/4/19時点)では解決されていました。

新しいサイトを立ち上げる際は js などのライブラリも最新にしますが、過去に作った古いサイトの場合は、そのまま古いライブラリを使っている場合もあります。もし同じ症状に遭遇した場合は、ライブラリを新しくしてみると改善するかもしれません。

Webサイトで利用するjsライブラリなどは、セキュリティの問題もありますので、定期的に確認をするなど最新で運用されることをお勧めいたします。

・slick
https://kenwheeler.github.io/slick/


Web制作に役立つa-blog cmsの小粒な Tips をご紹介します。
今回はキャッシュ操作を便利にする小ネタです。

a-blog cmsではWebサイトの表示を高速化するために非常に高機能なキャッシュ機能が実装されています。
公開ページだけではなくログイン後のページでもキャッシュ(一度表示したページを一時的に保存しておく仕組み)が機能するため、Webサイトの構築・ページ追加・編集などの作業もストレスなく操作ができ大変使いやすくなっています。

ただ、このキャッシュは便利な反面、ページを更新してもキャッシュが効いて画面に反映されず確認ができないことがあります。もしページがキャッシュして更新内容が反映されない場合は、「管理ページ」のダッシュボードでキャッシュをクリアすることができます。

しかしキャッシュをクリアするために、毎回「管理ページ」へ移動するのは少し手間がかかります。そこで今回はログイン後のページに表示される「管理ボタン」の下に、キャッシュをクリアするボタンを追加してみます。

a-blog cmsのキャッシュクリアボタン実装例


実装はすごく簡単で、以下のコードを利用しているテンプレートに貼り付けるだけです。(a-blog cms ver 3.1.13 時点)
コードの表示権限は、ログイン中かつユーザー権限が「投稿者」以上になります。

実装方法とサンプルコード

■インクルード元
コードは少し長いので是非別ファイルにしてインクルードでご利用ください。

<!-- インクルード例 -->
@include("/include/cacheclear.html")

■ cacheclear.html
今回のブログネタ用にコードをコピペで済む様に、一部の css はインラインで記述しております。
この辺りは貼り付ける場所などもありますので、お好みで手直ししていただければと思います。
またスマホ時の表示対策は何もしていないので、自由にカスタマイズしてみてください。

<!-- キャッシュクリア用 cacheclear.html -->
<!-- BEGIN_MODULE Touch_Login -->
@section("dashboard-clear-cache")
<!-- BEGIN_MODULE Touch_SessionWithCompilation -->
<div id="adminBox" class="clearfix js-dragAdminBox_disable normalBox">
<form action="" method="post">
	<table class="clearfix js-dragAdminBox_disable normalBox" style="border:none;margin:0;padding:0;font-size:13px;">
	<tbody>
		<tr>
			<td>
				<div class="acms-admin-form-checkbox">
				<input type="checkbox" id="input-checkbox-cashe-page" name="target[]" value="page" checked />
				<label for="input-checkbox-cashe-page" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->ページ<!--/T--></label>
				</div>
				
				<!-- BEGIN_MODULE Touch_RootBlog -->
				<div class="acms-admin-form-checkbox">
				<input type="checkbox" id="input-checkbox-cashe-template" name="target[]" value="template" checked />
				<label for="input-checkbox-cashe-template" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->テンプレート<!--/T--></label>
				</div>
		
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-config" name="target[]" value="config" />
					<label for="input-checkbox-cashe-config" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->コンフィグ<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-field" name="target[]" value="field" />
					<label for="input-checkbox-cashe-field" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->カスタムフィールド<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-module" name="target[]" value="module" />
					<label for="input-checkbox-cashe-module" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->モジュール<!--/T--></label>
				</div>
				
				<div class="acms-admin-form-checkbox">
					<input type="checkbox" id="input-checkbox-cashe-temp" name="target[]" value="temp" />
					<label for="input-checkbox-cashe-temp" style="font-weight: normal;"><i class="acms-admin-ico-checkbox"></i><!--T-->一時的なデータ<!--/T--></label>
				</div>
				<!-- END_MODULE Touch_RootBlog -->
				
				<div style="position: relative;display: inline-block;">
					<input type="hidden" name="field[]" value="target" />
					<input type="submit" name="ACMS_POST_Cache" value="<!--T-->キャッシュをクリア<!--/T-->" class="acms-admin-btn-admin"/>
					<input type="hidden" name="forcing" value="true" />
				</div>
			</td>
		</tr>
	</tbody>
	</table>
</form>

</div>
<!-- END_MODULE Touch_SessionWithCompilation -->
@endsection
<!-- END_MODULE Touch_Login -->

ということで、a-blog cmsに便利な小ネタでした。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


Web制作に役立つa-blog cmsの小粒なTipsをご紹介します。
今回はカスタムフィールドやカスタムユニットでメディア画像を利用する際に便利な小ネタです。

a-blog cmsではメディア画像をカスタムユニットなどで利用する際に、「width」「height」をそれぞれ単体で取得する変数は用意されていません。(今のところ…)
そこで<img>タグに画像サイズを記述したい場合は、以下の様に「@imageSize」と校正オプション「split」を組み合わせて利用し設定することが出来ます。

実装方法とサンプルコード

<img src="%{MEDIA_ARCHIVES_DIR}{imagename@path}" width="{imagename@imageSize}[split(' x ', 0)]" height="{imagename@imageSize}[split(' x ', 1)]">

「@imageSize」を利用すると「1024 x 768」の様に、画像の「幅 x 高さ」の組み合わせで値が出力されます。
この値を校正オプション「split」を使い「 x 」(半角アキx半角アキ)で分割することで「0」に幅、「1」に高さを設定することが可能です。

<!-- 出力例 -->
<img src="/media/001/202404/imagename.png" width="1024" height="768">

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


ご利用中のCMSが、どの様な状態でサポート(※1)されているか気になる方も多いと思います。

弊社が利用しているa-blog cmsは、セマンティックバージョニングを採用しており、新しいマイナーバージョンがリリースされた後でも、一定期間は古いバージョンの不具合やセキュリティを修正したフィックスバージョンをリリースしています。

・a-blog cmsサポートについて
https://www.a-blogcms.jp/support/

定期的にメンテナンスのご依頼をいただき、バージョンアップされているサイトは問題がない場合がほとんどですが、サイトを構築してから年数が経過してもメンテナンスをされていない場合は、サポート期限が終了している場合もありますのでご注意ください。
ただ、a-blog cmsの素晴らしいところは、期限が切れてしまった場合も、サポート対象バージョンまでバージョンアップする事で、再びサポートを受ける事が可能になります。

そこで、気になる現在のサポート期限を久しぶりに調べてみました、、、

a-blog cmsのサポート状態(2024/04/09現在)

下記の表から、現在のサポート状態がご確認いただけます。
・フィックスバージョンのリリース:Ver.2.8以上のバージョンから対応
・PHP7.4対応についてはVer. 2.11.15以降のバージョンになります。
・不具合修正:マイナーバージョンリリース日から2年間
・Ver. 2.11の不具合修正期間は例外的に延長されています。(Ver. 3.0のリリース期間が空いてしまったため)
・セキュリティ修正:マイナーバージョンリリース日から5年間



バージョン 最終バージョン マイナーバージョン
リリース日
不具合修正
(期限日)
セキュリティ修正
(期限日)
1.7 1.7.0 2013/06/24 - -
2.0 2.0.1.1 2013/12/18 - -
2.1 2.1.1.4 2014/06/23 - -
2.5 2.5.1.3 2015/04/23 - -
2.6 2.6.1.4 2015/12/25 - -
2.7 2.7.34 2017/03/30 - -
2.8 2.8.79 2018/03/26  2020/03/26  2023/03/26 
2.9 2.9.47 2018/10/09 2020/10/09 2023/10/09
2.10 セキュリティ修正のみ 2019/02/28 2021/02/28 2024/02/28
2.11 セキュリティ修正のみ 2019/12/17 2021/12/17
2022/12/17
2024/12/17
3.0 メンテナンス中 2021/12/24 2023/12/24 2026/12/24
3.1 メンテナンス中 2023/09/14 2025/09/14 2027/09/14

各バージョンこの様な状態になっています。
Ver.2.11からVer.3リリースまでの期間が空いた事で、Ver. 2.11の不具合修正の期間が例外的に延長されましたが、それでも2022/12/17までになりますので、今後はVer. 3.1へバージョンアップされることを強くお勧めいたします。

また、残念ながらver2.7以前の方も、セマンティックバージョニング導入前となりますので、すでにサポートは切れております。もし現在ご利用中のa-blog cmsのバージョンが古い場合は、ぜひバージョンアップされる事をご検討ください。サポート状態はもちろんですが、機能やパフォーマンス・セキュリティなどでも大きく差が出ますので、必ずメリットがあります。

また、もしサイトの見た目がそのままでも、バージョンアップだけすることも可能ですから、バージョンアップはしておいた方が絶対良いです。バージョンが古い方は、ぜひバージョンアップして安心・快適にご利用いただければと思います。

a-blog cmsをご利用中の方で、何か心配な点やご不明な点がございましたら、ぜひお気軽に弊社までお声がけください!

※1:この場合のサポートとは、a-blog cmsのフィックスバージョンのプログラムが提供されることを意味しております。技術的なサポートではございませんので、あらかじめご了承ください。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由


a-blog cmsはプロフェッショナル版以上のライセンスで、cmsから静的サイト運用に必要なファイルを丸ごと書き出しする「静的書き出し」機能を利用することが出来ます。

・a-blog cms オフィシャルサイト サイトを静的書き出しする
https://developer.a-blogcms.jp/document/operation/entry-2856.html

この静的書き出しは、基本的なa-blog cmsの運用方法(サーバでcmsのプログラムが動作している状態)とは違い、htmlなどを静的なファイルとして書き出すため、セキュリティ向上、高速な表示、負荷軽減など大きなメリットがあります。しかしその反面、更新をする際に「cmsを更新→静的書き出し→テストサーバで確認→本サーバへアップロード」の様に、サイト更新時の手順が増えます。

いくつかコツがあるので、事前に静的書き出しの仕様をよく把握することが大切となります。思い通りに書き出されているかを確認する為に、cmsを設置するサーバ、書き出したファイルを確認するテストサーバ、公開用の本サーバの3つの環境が必要となります。

また、ブログ単位で書き出される仕様のため、更新頻度やコンテンツのボリュームを考慮して、どの様にブログ構成を立てるかが大切になります。サーバのスペックにより一度に書き出しが出来るエントリー数にも限界がありますので、あまりに多い場合は、ブログを分けたり、jsで処理するなど配慮する必要があります。

作り手としてはサーバでシステムが動いていた方が構築も運用も楽ですが、世の中で不正アクセス、サイトへの攻撃などの被害が増えている現状も考えると、今後小規模webサイトでも静的書き出しがサイト構築の方法として重要になってくるとは思います。この点、a-blog cmsでは静的書き出しが標準機能として設けられていますので非常に心強いです。

サーバによっては環境をうまく使い分けることで、静的書き出しから本番アップまでの流れを半自動化出来るものがあるかもしれません。このあたりは今後模索していきたいところです。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由