タグ検索:a-blogcms

表題の通り「名古屋の Web 制作会社として15年になります」正確には2024年7月1日で創業15年目になります。もう少し細かく言いますと、その2年前の2007年4月1日に個人事業主として独立しておりますので、名古屋で営業を始めてからの年月としましては丸15年を超えました。

Web は変化が早い業界です。15年もあると 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 に便利な小ネタでした。


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">

ご利用中の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以上のバージョンから対応
・PHP 7.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 のフィックスバージョンのプログラムが提供されることを意味しております。技術的なサポートではございませんので、あらかじめご了承ください。