Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
930
興味を追求して開いた私のキャリアのターニングポイント
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
10k
Other Decks in Programming
See All in Programming
ゼロダウンタイムでミドルウェアの バージョンアップを実現した手法と課題
wind111
0
140
モデル駆動設計をやってみよう Modeling Forum2025ワークショップ/Let’s Try Model-Driven Design
haru860
0
150
Promise.tryで実現する新しいエラーハンドリング New error handling with Promise try
bicstone
3
460
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
techtver
PRO
3
1k
Phronetic Team with AI - Agile Japan 2025 closing
hiranabe
2
600
Bakuraku E2E Scenario Test System Architecture #bakuraku_qa_study
teyamagu
PRO
0
750
Inside of Swift Export
giginet
PRO
1
560
Amazon Bedrock Knowledge Bases Hands-on
konny0311
0
150
Swift Concurrency 年表クイズ
omochi
3
230
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
keisuke69
0
710
Flutterアプリ運用の現場で役立った監視Tips 5選
ostk0069
1
460
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
andpad
0
170
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Documentation Writing (for coders)
carmenintech
76
5.1k
How STYLIGHT went responsive
nonsquared
100
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Statistics for Hackers
jakevdp
799
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
How GitHub (no longer) Works
holman
315
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Become a Pro
speakerdeck
PRO
29
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
11
930
GitHub's CSS Performance
jonrohan
1032
470k
Automating Front-end Workflow
addyosmani
1371
200k
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}/" 年⽉⽇の書き⽅ 記述式:変数で⽇時指定する
ありがとうございました! 引き続きご質問があればフォーラムまたは マイページのサポート依頼からお待ちしています!