$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
a-blog cms でよくあるサポート小ネタまとめてみた
Search
Kasumi Morita
October 13, 2020
Programming
1
190
a-blog cms でよくあるサポート小ネタまとめてみた
a-blog cms のお問い合わせでよくあるサポート小ネタをまとめてみました。
a-blog cms zoom up 2020/10で発表した内容です。
Kasumi Morita
October 13, 2020
Tweet
Share
More Decks by Kasumi Morita
See All by Kasumi Morita
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
980
興味を追求して開いた私のキャリアのターニングポイント
mkasumi
0
190
スムーズに入力するためのForm Design
mkasumi
7
1.2k
UTSUWAテーマVer.2.0の紹介
mkasumi
1
120
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
210
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
180
デザインを考える習慣づくり
mkasumi
1
940
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
mkasumi
10
11k
Other Decks in Programming
See All in Programming
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
290
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
26
22k
sbt 2
xuwei_k
0
220
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
fuuki12
0
210
俺流レスポンシブコーディング 2025
tak_dcxi
13
8.2k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
660
エディターってAIで操作できるんだぜ
kis9a
0
670
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
710
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
190
チームをチームにするEM
hitode909
0
250
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
490
S3 VectorsとStrands Agentsを利用したAgentic RAGシステムの構築
tosuri13
6
290
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Embracing the Ebb and Flow
colly
88
4.9k
The Language of Interfaces
destraynor
162
25k
Java REST API Framework Comparison - PWX 2021
mraible
34
9k
For a Future-Friendly Web
brad_frost
180
10k
GraphQLとの向き合い方2022年版
quramy
50
14k
Unsuck your backbone
ammeep
671
58k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
87
Docker and Python
trallard
46
3.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Transcript
サポートの⼩ネタ まとめてみた 有限会社アップルップル 森⽥かすみ よくお問い合わせがある! a-blog cms zoom up 2020/10
Q1 IFブロックでELSEも表⽰されてしまっている Q2 lazy-loadで画像をふわっとしたい! Q3 ラジオボタンをクリックした時に 検索結果を反映させたいときは? Q4 モジュールでctxが効かないのですが?
Q5 ctxのstartとendがうまく使えない…! ⽬次
IFブロックでELSEも 表⽰されてしまっている Q1.
<!-- BEGIN_IF [{group_detail}/em] --> <p class="acms-text-danger">֓ཁจ͕ۭͩͬͨͱ͖ʹදࣔ͞Ε·͢ɻ <!-- ELSE --> <p
class="acms-text-success">ELSEͷͱ͖ʹදࣔ͞Ε·͢ɻ <!-- END_IF -->
{group_detail}の中⾝ ߍਖ਼Φϓγϣϯͳ͠ ߍਖ਼ΦϓγϣϯOMCS͋Γ
<!-- BEGIN_IF [{group_detail}[delnl]/em] --> <p class="acms-text-danger">֓ཁจ͕ۭͩͬͨͱ͖ʹදࣔ͞Ε·͢ɻ <!-- ELSE --> <p
class="acms-text-success">ELSEͷͱ͖ʹදࣔ͞Ε·͢ɻ <!-- END_IF -->
lazy-loadで画像を ふわっとさせたい! Q2.
.js-lazy-load { opacity: 0; transition: .5s ease .2s; } .js-lazy-load[data-loaded*="true"]
{ opacity: 1; } 表⽰した瞬間にふわっとすることはCSSで可能です
※回線が遅いとふわっとしないことも…
ラジオボタンをクリックした時 に検索結果を反映したい時は? Q3.
たとえば送信ボタンがない検索画⾯を実装したいときの問題
<script> $(function(){ ACMS.Ready(function() { ACMS.Config.postIncludeMethod = 'swap'; // swap |
replace }); $('.js-post input[type="radio"]').on('change', function () { $('.js-post').submit(); }); }); </script> changeイベントで内容を書き換える 1 2 3
<div> <!-- BEGIN_MODULE Field_Search --> <form action="" method="post" class="js-post js-post_include"
target="#realestateIndex"> …ϥδΦϘλϯলུ… <input type="hidden" name="field[]" value="station"> <input type="hidden" name="bid" value="%{BID}" /> <input type="hidden" name="cid" value="%{CID}" /> <input type="hidden" name="tpl" value="/include/entry/summary-custom.html" /> <input type="hidden" name=“ACMS_POST_2GET”><!— ௨ৗsubmitʹͳͬͯΔ෦ —> </form> <!-- END_MODULE Field_Search --> </div> <!-- ΤϯτϦʔαϚϦʔʢΧελϜϑΟʔϧυը૾දࣔʣ --> <div id="realestateIndex"> @include("/include/entry/summary-custom.html") </div> changeイベントで内容を書き換える 1 2 3 4
モジュールで ctxが効かないのですが? Q4.
https://developer.a-blogcms.jp/blog/news/entry-3305.html モジュールID名に「ctx」が含まれているとctx指定が読み込めなくなる
<!-- BEGIN_MODULE *** id="test_module_ctx" ctx="bid/1/cid/6" --> <!-- END_MODULE *** -->
<!-- BEGIN_MODULE *** id="test_module" ctx="bid/1/cid/6" --> <!-- END_MODULE *** --> NG例 OK例
Q5. ctxのstartとendが うまく使えない…!
<!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/2" --> ...省略 <!-- END_MODULE Entry_List -->
BIDとCIDの値を渡したい場合
startとendの書き⽅??? <!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/2" --> ...省略 <!-- END_MODULE Entry_List
--> <!-- BEGIN_MODULE Entry_List ctx="/start/ʢ։࢝࣌ʣ/end/ʢऴྃ࣌ʣ/" --> ... <!-- END_MODULE Entry_List -->
ctx="/start/ʢ։࢝࣌ʣ/end/ʢऴྃ࣌ʣ/" ctx="/ʢ։࢝࣌ʣ/-/ʢऴྃ࣌ʣ/" 間違い例 正解例
ctx="/2020-06-2310:00:00/-/9999-12-3123:59:59/" ctx="/1000-01-01/-/{date#Y}-{date#m}-{date#d}{date#H}:{date#i}:{date#s}/" 年⽉⽇の書き⽅ 記述式:変数で⽇時指定する
ありがとうございました! 引き続きご質問があればフォーラムまたは マイページのサポート依頼からお待ちしています!