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
160
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
スムーズに入力するためのForm Design
mkasumi
6
1.1k
UTSUWAテーマVer.2.0の紹介
mkasumi
1
90
ビルトインモジュールの使い方 / how-to-use-builtin-module
mkasumi
0
170
a-blog cms 2020年版 公式テーマの紹介
mkasumi
0
140
デザインを考える習慣づくり
mkasumi
1
920
マークアップの最適解を見つけ出す方法 in Frontrend Vol.9
mkasumi
10
9.2k
Other Decks in Programming
See All in Programming
【Go言語】golangci-lintの使い方
tomo1227
0
270
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
유연한 Composable 설계
l2hyunwoo
0
380
リハビリmruby
kishima
1
160
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
【Go言語】ジェネリクス
tomo1227
0
170
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Design by the Numbers
sachag
277
18k
Building Your Own Lightsaber
phodgson
101
5.9k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
How to Think Like a Performance Engineer
csswizardry
4
590
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Designing the Hi-DPI Web
ddemaree
276
34k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
A better future with KSS
kneath
231
17k
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}/" 年⽉⽇の書き⽅ 記述式:変数で⽇時指定する
ありがとうございました! 引き続きご質問があればフォーラムまたは マイページのサポート依頼からお待ちしています!