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
uidev
December 14, 2021
0
33
ふむふむと聞くだけで明日から使える! a-blog cmsの小技集
a-blog cms zoomup 2021/12/14 で発表した内容です。
uidev
December 14, 2021
Tweet
Share
More Decks by uidev
See All by uidev
CMSの現状を知って広がるWordPressだけじゃないWebサイト制作の選択肢
uidev1116
0
73
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
uidev1116
13
5.6k
ここを教えてほしかった!初めての a-blog cms
uidev1116
0
28
Featured
See All Featured
Music & Morning Musume
bryan
46
6.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Become a Pro
speakerdeck
PRO
24
5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
A Modern Web Designer's Workflow
chriscoyier
692
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Testing 201, or: Great Expectations
jmmastey
38
7k
GraphQLとの向き合い方2022年版
quramy
43
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Transcript
ふむふむと聞くだけで明日から使える! a-blog cms の小技集 有限会社アップルップル 宇井 陸登 @poorman_ui
とりあえず自己紹介 2021年4月からアップルップルで働く、新米フロントエ ンドエンジニア a-blog cmsを使用した受託制作を担当している JavaScriptやフロントエンドの周辺ツールについて勉強 中 2021年9月には「assign-holiday」というJSライブラ リをリリース 好きな食べ物はすりおろしたりんご🍎
@poorman_ui
お品書き 自己紹介 a-blog cms の小技を1つ1分以内くらいのテンポ で紹介 自分で考えた編 slackで募集した編 最後に @poorman_ui
サイトのロゴマークをトッ プページだけh1 タグで表示 する Webサイトのロゴマークをトップページだけh1タグ で表示して、その他のページではpタグで表示したい です。 <!-- BEGIN_IF [%{BID}/eq/1/and/%{VIEW}/eq/top]
--><h1 class="p-header-title <a href="%{HOME_URL}"> <img src="%{MEDIA_ARCHIVES_DIR}{site_logo@path}" alt="{site_name}" width="307" height="48" role="img" class="p-header-title__logo acms-img-responsive" > </a> <!-- BEGIN_IF [%{BID}/eq/1/and/%{VIEW}/eq/top] --></h1><!-- ELSE --></p>< @poorman_ui
サイト公開前にはサーバー 環境情報を確認 管理画面チェックリスト及び、サーバーにinfo.php を設置して確認します。 特に max_input_vars は99999 など多めに設定する のがおすすめです。 公式ドキュメント
` ` @poorman_ui
モジュールID や、コンフィグセット、ルールはインポート・エクス ポートできます😚 最初は、インポート・エクスポートできること知らなくて、ローカル環境で設定したモジュールIDやコンフィグセット を本番環境でもう一度設定し直すという非効率なことをしていました…🤔 @poorman_ui
メディアのカスタムフィー ルドでwidth とheight を設 定する メディアのカスタムフィールドには悲しいことに、 画像のカスタムフィールドのように幅と高さを出力 してくれる変数がありません。😂 320×240 のように幅と高さをまとめて出力してくれ
る変数はあるので、split 校正オプションを活用して います。😎 ` ` <img src="%{MEDIA_ARCHIVES_DIR}{sample_img@path}" width="{sample_img@imageSize}[split(' x ', 0)]" height="{sample_img@imageSize}[split(' x ', 1)]" alt="{sample_img@alt}" class="acms-img-responsive" > @poorman_ui
管理ボックスはカスタマイズできます☺️ コンテンツ専用の「エントリー作成」ボタンで、よりわかりやすく。 上記の公式ドキュメントがわかりやすいです。 @poorman_ui
エントリーコードが空の場合はエントリーのタイトルをタイトルタグ に出力しない 一道さんの記事で言及されている通り、a-blog cmsでエ ントリーを作成する際にはエントリーコードを空にして作 成することができます。 エントリーコードを空にしてエントリーを作成すると、そ のエントリーのOGPモジュールによって出力されるタイ トルタグが エントリータイトル
| カテゴリー名 | ブログ名 となってしまいますが、OGPモジュールの設定をするこ とで カテゴリー名 | ブログ名 として出力させることが可 能です。 @poorman_ui
PDF のサムネイル画像に任意のページを選択する メディア機能で登録されたPDFのサムネイル画像はPDFフ ァイルが複数ページある場合、任意のページをサムネイル 表示することができます。☺️ @poorman_ui
Entry_Summary 系のモジュールでecd を表示する Entry_Summary系のモジュール(Entry_Listや Entry_Headline)ではエントリーコードを表示すること ができませんが、Entry_Fieldモジュールとエスケープ、 ctx の機能を組み合わせることで新しくモジュールIDを作 成することなく表示できます。 右のコードでは組み込みJSのscrollToのアンカーリンク先
を設定するために実装しています😯 <!-- BEGIN_MODULE Entry_List id="{{module_id}}"--> <div class="c-local-nav"> @include("/admin/module/setting.html") <ul class="c-local-nav__list"> <!-- BEGIN entry:loop --> <li><a <!-- BEGIN_MODULE\ Entry_Field ctx="bid/%{BID}/cid/%{CID}/eid/ <p class="c-local-nav__title">{title}<span class="text-word-break"> について <i class="fas fa-angle-down c-local-nav__ico"></i> </a></li> <!-- END entry:loop --> </ul> </div> <!-- END_MODULE Entry_List --> @poorman_ui
ページャーの総エントリー数が色々便利な件 🥳 Entry_Summary や Entry_Body などのページャーが使用できるモジュールで表示できる {itemsAmount} という変数が 便利 カテゴリーで絞り込んだときの件数表示に役立つ!
エントリーの件数が〇〇件だった場合〇〇したいといった場合に最適 🤩 ページャーという機能名からは想像がつきにくい使い方ができます 😇 ` ` @poorman_ui
管理画面ではSelect2 というJavaScript が使用できる 選択肢の多いセレクトボックスのカスタムフィールドを実 装するときに便利 🤓 <select name="prefs" class="acms-admin-form-width-mini js-select2">
<option value="" selected> 都道府県</option> <option value=" 北海道" {prefs:selected# 北海道}> 北海道</option> <option value=" 青森県" {prefs:selected# 青森県}> 青森県</option> <option value=" 岩手県" {prefs:selected# 岩手県}> 岩手県</option> ... 省略 </select> <input type="hidden" name="field[]" value="prefs" /> @poorman_ui
select2 を使って複数の値を選択できるselect ボックスを作る HTML <select name="prefs[]" class="js-select2" style="width: 300px;" multiple>
<option value="" selected> 都道府県</option> <option value=" 北海道" {prefs:selected# 北海道}> 北海道</option> <option value=" 青森県" {prefs:selected# 青森県}> 青森県</option> <option value=" 岩手県" {prefs:selected# 岩手県}> 岩手県</option> ... 省略 </select> <input type="hidden" name="field[]" value="prefs" /> CSS .select2-container .select2-selection--multiple.acms-admin-selectbox { min-height: auto; padding: 0; background-color: #fbfbfb; border: 1px solid rgba(0, 0, 0, 0.2) !important; } .select2-container .select2-selection--multiple.acms-admin-selectbox[aria-expanded background-color: #fff; border-color: rgba(0, 0, 0, 0.2); } .select2-container .select2-selection--multiple.acms-admin-selectbox .select2-selecti padding: 2px 5px; } .select2-container .select2-selection--multiple.acms-admin-selectbox .select2-search min-height: auto; line-height: 1; } .select2-container .select2-selection--multiple.acms-admin-selectbox .select2-search
ここで少し一休み 🍵 次は、a-blog cms 公式slack チャンネルでa-blog cms ユーザーの方々が投稿してくださった技を紹介 します。!
グローバル変数の値も表示されます!ベンチマークモード 😎 @poorman_ui
IF ブロックが意図通り動かない時あるある 😱
IF ブロックの値に改行が入るとIF ブロックが動かない たとえば右のような記述は {hoge} に改行(コード)が含 まれているとIFブロックが正常に動作せず、全部表示され てしまいます 😭 <!--
BEGIN_IF [{hoge}/lk/ あいうえお] --> <p> あいうえおが含まれます</p> <!-- ELSE --> <p> あいうえおが含まれていません</p> <!-- END_IF --> ` ` @poorman_ui
IF ブロックの値に演算子が入るとIF ブロックが動かない また、先程のコードで {hoge} にIFブロックで使用するオプション(演算子)が入っている場合も動作しません 例えば、値として /category/field/fuga/lk/ あいうえお が入力された場合、"あいうえおが含まれていません"
というテ キストが表示されてしまいます。 ` ` ` ` @poorman_ui
… その結果 変数に改行が入力される可能性がある場合は、 [delnl] の校正オプション 変数にオプション(演算子)が入植される可能性があ る場合は、 [convert('A')] の校正オプション <!--
BEGIN_IF [{hoge}[convert('A')|delnl]/lk/ あいうえお] --> <p> あいうえおが含まれます</p> <!-- ELSE --> <p> あいうえおが含まれていません</p> <!-- END_IF --> 🙂 ` ` ` ` @poorman_ui
〇〇_Field と〇〇Field の違い 〇〇_Fieldという名前がつけられているフィールドモジュールとEntry_SumamryやEntry_Body といった一部のモジュ ールの中に存在する〇〇Field(フィールドブロック)は名前が似ていることもあり、とってもややこしいことでしょう 🤔 細かい違いはいくつかありますが、実装時にどちらを使用するかの選定基準としては以下になると思います 🧐 フィールドモジュールはモジュールなのでエスケープして使用することができます。逆にフィールドブロックはブロッ
クなので実行順序を操作する事ができません。 @poorman_ui
クエリストリングの値(バリュー)をグローバル変数で取得する たとえば、https://developer.a-blogcms.jp/document/search.html?keyword= テスト&start=1 というURLのページで↓のHTMLを 記述すると <p> クエリストリングを取得:%{start}</p> 出力結果は「クエリストリングを取得:1」 となります。 僕が、最もよく利用するのは、Custom
Search API との連携 して、サイト内検索を実装するときでしょうか 🤔 ` ` @poorman_ui
Field_Search モジュールでカスタムフィールド検索の値を保持する Field_Searchモジュール を使用することで、カスタムフィールドで検索したとき、検索結果のテンプレートで検索 したカスタムフィールドの値を表示できます。 <option value="red" {color:selected#red}> 赤色</option> の
{color:selected#red} の記述を動かすことができます。 また、検索後のURLが https://example.com/field/color/red/ となっているときに↓のようにField_Searchモジュー ルを使うと red のように {color} の値が表示できます。 <!-- BEGIN_MODULE Field_Search --> <p>{color}</p> <!-- END_MODULE Field_Search --> ` ` ` ` ` ` @poorman_ui
最後に slackでの募集に回答していただいた皆様!ありがとうございました 🙇 発表を聞いてくださった参加者の皆様もありがとうございました 🙇 Twitterもよろしければフォローお願いします 🐦 @poorman_ui @poorman_ui