ブログ

日々の出来事

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/


今回は「SLOW START」*としての活動の話題です。

2024/4/14に和歌山で開催された空冷ワーゲン旧車イベント「Orange Bug(オレンジバグ)」に参加してきました。
今回のイベント参加に合わせて、以前弊社にステッカーパーカーの制作をご依頼いただいた、GFK JAPAN代表のManny's Auto様が代表を務める、GFK JAPAN(German Folks of Japan)の皆さまのショーカーを写真と動画で撮影・編集させていただきました。

当日は天候も良く最高のイベント日和、会場の和歌山片男波海水浴場には、空冷VWのビートル・タイプ2(ワーゲンバス)・タイプ3・カルマンギア、そしてポルシェなど、総台数400台を超える沢山の空冷ワーゲン(旧車)が集まりました。

素晴らしいロケーションの片男波海水浴場に並ぶ、世界レベルのGFK JAPANが誇るハイクオリティなショーカーを是非ご堪能ください。
4kで撮影・編集していますので、ぜひ4kでご視聴ください。

※「SLOW START」とは、弊社が空冷vwなどのビンテージカーやキャンプなどの愛好家の方向けに、動画制作・写真撮影・グッズ制作・販売などの活動をおこなう際に利用するネームになります。

Youtube 動画


写真


会場に並ぶ3台のビートル

青いビートルの後ろ姿

キラキラと輝くホイール

磨き上げられた赤いビートル

低くローダウンされたタイプ3ノッチバック

オリジナルの状態を保つビートル

輝くホイールを履いたビートル

貴重な年代物の外付けクーラー

アイボリーとグリーンの並ぶ2台のビートル

50年以上前の貴重な淡いグリーンのビートル

ワーゲンバスで有名なグリーンのタイプ2

来場者に撮影される人気のビートル

空冷バスの車内

GFK JAPAN のステッカー

GFK JAPAN のナンバープレート

写真撮影・動画制作(撮影・編集)のご依頼について

弊社はWeb制作会社ですので、写真・動画の専門会社ではございませんが、弊社でWebサイトを制作されたお客様限定で、写真撮影・動画制作やYoutubeの運用などもお手伝いさせていただきます。特に動画は専門の会社にご依頼されると非常に高価になりますので、手軽に少しでも安価に作りたいなど、何かお困りな事がございましたらお気軽にご相談ください。

写真撮影・映像制作会社の様な専門的な機材や技術はございませんので、弊社にご依頼いただく場合は手軽に制作されたい場合に最適だと思います。

動画撮影機材・編集ソフトなど

【カメラ】
・NIKON D600
・SONY FX30
・SONY ZV-E10
・SONY ZV-1
【レンズ】
・SONY E 11mm f1.8
・SONY FE 24mm f1.4 GM
・SONY E PZ 18-105mm f4 G など
【編集ソフト】
・Davinci Resolve


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をお勧めする理由