a-blog cms 1.6.0 の記事の中にスライダーを実装する簡単な方法

何も設定しないと右側の padding が少し気になりますが、とりあえず簡単にパッとできる方法を紹介してみます。

カスタマイズ管理＞コンフィグ＞エントリー編集設定＞ユニットグループに以下のような設定をしてみます。

クラスに js-bxslider を設定し、ラベルは分かりやすい文字列でいいです。ここでは「スライダー」って書いておきます。

次に、上記のように、ユニットグループでスライダーを設定します。1つ注意しないといけないのは「おまかせ」にしておくと、＜hr＞タグが入ってしまい正しくJSが動作しません。画像については「左」にしておきましょう。

スライダーの画像が終わったところで、1カラムに設定しておくだけです。こんなに簡単にユニット内にスライダーを実装できるなんて！

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

数年前のインターンの課題として「Facebook の複数枚写真をアップロードした際に、写真をレイアウトしてくれる JavaScriptライブラリを作ってみよう！」というお題を出していた時期があります。 3日間コースで、まずは静的な HTML と CSS で、2枚の時、3枚の時のような感じで複数のパターンを作って、その後 JavaScript を利用してターゲットの HTML に Class を振っていくという感じ。 JavaScript が苦手でも CSS と格闘しつつ、いろいろな場合に対応できない感じでも、できる学生さんなら1日5時間で2日目の終わりには、ある程度動く感じまで作ってくる人もいました。その後、長期インターンで何度も作り直して、公開しても大丈夫そうなところまで出来上がったものを「PhotoCollage.js」という名前で公開しています。しかし、インターンの学生さんが作ったもので、あまり公式にどうだろう？ってところもあり使われないままになっていました。 PhotoCollage.js の特徴いろいろな HTML に対応しています。表示している画像とリンク先は別で扱うようにしています。 smartPhoto.js の利用も考慮して設計されています。画像のパスは src なのか data-src なのか指定も可能です。生成されるHTMLソースの各所に Class や attribute の設定が可能です。オプション以下のようなオプションを設定できるようになっています。ダウンロード GitHub に公開されていますので、そちらからダウンロードしてご利用ください。 https://github.com/appleple/PhotoCollage a-blog cms のブログテーマで利用するには CSS と JavaScript のファイルをご自身の blog テーマディレクトリに入れてください。 /css/photocollage.css /js/photo-collage.bundle.js _entry.html に追加 @section("head-link") @parent @endsection @section("head-js") @parent document.addEventListener("DOMContentLoaded", function () { const elements = document.getElementsByClassName('js-photocollage'); Array.from(elements).forEach((element, index) => { element.classList.add('js-photoCollage-' + index) new PhotoCollage(".js-photoCollage-" + index, { srcAttribute: "data-src", gap: "5px", margin: "0px 0px 35px 10px", imgClass: "js-lazy-load", aAttribute: { "data-group": "group-" + index, "data-rel": "SmartPhoto", } }); }); }); @endsection 17行目の margin を margin: "0px 0px 35px 10px" と設定をしました。 21行目の "data-rel": "SmartPhoto" に変更することで、a-blog cms の SmartPhoto が動作します。 css/photocollage.css を修正 a-blog cms のユニットの仕様の関係で左右に 10px 狭くしないといけない関係で、width : 100% のところを -20px 減らすように /css/photocollage.css の .photocollage を修正しています。 calc ってのを使った事なかったのですが、イマドキは便利になってるもんですね。 .photocollage { position: relative; /* width: 100%; */ width:calc(100% - 20px); height:100%; } @media screen and (max-width: 1024px) { .photocollage { width: calc(100% - 20px); height:100%; } } a-blog cms の管理画面の設定編集画面設定のユニットグループにクラスは js-photocollage とし、ラベルは自由ですが photocollage としておきます。投稿画面の指定としてユニットグループ設定で、photocollage を選択します。解除するには、1カラムを選択することで以下のユニットは JavaScript のライブラリの対象外になります。最後にたくさんの写真を撮って、それをブログの記事に、まとめて貼っておきたい。全部みたい時には SmartPhoto の機能でスライドして見ることも可能です。よろしければ使ってみて感想を X の #ablogcms ハッシュタグをつけてお知らせください。 https://github.com/appleple/PhotoCollage

2024年 1月 6日

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

これは a-blog cms Advent Calendar 2023 3日目の記事です。昨日は、Sugar さんのファイルを添付できるフォームのハマりどころ6選でした。上には、エントリーの新規投稿画面のHTMLのソースコードのキャプチャを貼ってみた。なんだか気になるコメント（緑色の部分）を発見した。なぜだか、コメントで次に発番される eid が書かれいる。テンプレート側 /themes/system/admin/_layouts/entry/edit.html を確認してみると、以下のように書かれている。 placeholder に entry-1.html を書いておくのなら、変数を設定したらいいんじゃないかと思うんだが、どうだろうか？結果、以下のような感じになった。この entry- も変更できるので必ず例）の状態にならないかもしれないが、entry-1.html よりはその名前になる可能性があるくらいの例）にはなるのではないだろうか？修正するファイルは、/themes/＊自分のテーマ＊/admin/entry/edit.html を以下のようにする。 @extends("/admin/_layouts/entry/edit.html") @section("apply-file") ファイル名 @endsection これで、次のエントリーコードが分かるようになります。今回の実装では、番号だけ表示をできるような実装になっていますので、エントリーの編集画面設定で entry- の部分をカスタマイズしたところは変えられませんので注意が必要です。 placeholder に表示する例ということで、entry-1.html よりはいいのでは？という実装になります。標準に入れてもらってもいい気もしますが、どうでしょうか？

2023年 12月 3日

a-blog cms のユーザーアイコンに Gravatar を反映するカスタマイズ

a-blog cms のユーザーアイコンは、何も設定しないと user0.png 〜 user9.png で uid の下一桁で 10色のアイコンが自動で振られます。ユーザーの管理画面でアイコンを設定する人も少なくデフォルトのアイコンのままってことが多いんじゃないかと思ったりする部分を識別しやすいように自動でアイコンが設定されたらいいなって思って今回のカスタマイズ「Gravatarのアイコンを反映してみる」という事にチャレンジしてみました。 Gravatar とは Wikipedia によると Gravatar（グラバター）は、サイトを越えて利用できるアバターを作成できるサービス。トム・プレストン・ワーナーが開発した。2007年にAutomatticが買収し、ブログのプラットフォームであるWordPress.comに統合されている。と書かれている。いつ作られたがかかれてないですが、今は WordPress.com のアカウントと統合されているのかな？歴史を感じますね。私の SNSアイコンは 3世代あり、それがこの Gravatar には登録されているようです。（今のヤツ、ルップルちゃん付き、mixi にも設定されているアイコンの順）それでは a-blog cms への実装ちょっと説明を全部書くのが難しそうなので、demo@beginner でテーマを用意してみました。まずはダウンロードください。テーマファイルの説明 demo@biginner/admin.html 管理画面の左側のアイコン部分になります。 demo@biginner/admin/action.html （エントリー作成）ボタンの上にあるアイコン部分の設定になります。 demo@biginner/admin/user/index.html ユーザー一覧のアイコンのテンプレートになります。 demo@biginner/admin/user/edit.html ユーザー詳細ページのアイコンのテンプレートになります。少し悩むのが、Gravatar のものなのかを表示させることができないことです。苦肉の策として、Gravatar のアイコンの時には画像を削除するチェックボックスを表示させないようにしました。この画像は消せないという意味になります。 themes_system__layout/admin.html themes_system__layout のディレクトリにある admin.html は、themes/system/_layout を上書きするようにファイルになります。 3.0.28 のファイルに @section を追加しています。将来的には今後のバージョンに入ったらいいなって思って @extends するように書いています。 extension/acms/Hook.php Gravatar はメールアドレスを md5 で変換した文字列を利用します。 a-blog cms のログインユーザーのメールアドレスは %{SESSION_USER_MAIL} で表示は可能ですが、このメールアドレスを md5 で変換しないといけないので、%{SESSION_USER_MAIL_MD5} のようなものをオリジナルグローバル変数を作成します。 hook.php の最初の方に use ACMS_RAM; を書いて、 public function extendsGlobalVars(&$globalVars) { if ( SUID ) { $globalVars->set('SESSION_USER_MAIL_MD5', md5(ACMS_RAM::userMail(SUID))); $globalVars->set('GRAVATAR',"true"); # この行を消すと Gravatar 利用しないようになります } } とする事で、メールアドレスを md5ハッシュ化することができます。 [email protected] が 28f266d6006293d4b53e365e3f3b57ee になります。ついでに %{GRAVATAR} に true を設定しておいて、場合によってはこの部分を消すとテンプレート上で Gravatar を使わない設定になるように IFブロックを書いてあります。 config.system.php extension/acms/Hook.php をカスタマイズする場合には以下の設定 HOOK_ENABLE を 1 に設定を変更する必要があります。 define('HOOK_ENABLE', 1); 最後に上記の実装をコピーすると、Gravatar のアイコンが表示されるようになります。会員制サイトなどには、効果のある実装になるのではないかと思います。次にリリースする Ver. 3.1 では会員制サイトの機能のテコ入れをしていますので、もしかするとコレも標準的な実装になるかもしれませんね。 Ver. 3.1 で themes_system__layout/admin.html の修正分が反映されることになりました。

2023年 8月 1日

できるだけ簡単に子ブログにコンフィグセットを設定する方法を考える

今回は多店舗展開をしているウェブサイトで新店を追加する際にできるだけ簡単にサイトの設定を完了させるための設定を考えてみます。初期の状態としては上記のようになります。 URL は架空のもので実際には 404 です。ここに bid:5 https://www.appleple.com/nagoya/ 名古屋店を追加していきます。普通に追加する際の手順 1) bid:2 ショップ一覧のブログ管理にある（子ブログを作成）ボタンをクリック 2) 子ブログの設定を行い（作成）ボタンをクリックここで問題になりそうなのは、このコンフィグセットを「店舗用」を選択する必要がある事です。このコンフィグセットを選択せず「デフォルト」のままだった際には正しいテーマが設定されず blog テーマになってしまったり店舗用のコンフィグが設定されない事になります。こうならないようにするためには「店舗追加時の設定マニュアル」を用意する必要が出てきます。できる事なら、このようなマニュアルは作らずに運用できるようにしたい。解決編「最初からコンフィグセットを設定済みの子ブログ設定フォームを用意する」店舗一覧が表示される https://www.appleple.com/shop/ の時に上記を表示させます。実装方法 themes/＊作成しているテーマ＊/admin/action.html を @extends("/admin/_layouts/action.html") @section("extra") 新規店舗： @endsection こんな感じに設定します。4.5行目の 2 は /shop/ のブログID になりますので、環境によって変わってきます。また、13行目の name="config_set_id" value="1" についても、店舗用のコンフィグセットID が 1 なのでこのような設定にしてあります。誰にでも思いつく簡単な管理画面の実装になります。 a-blog cms の管理画面のカスタマイズは、簡単な HTML をどう書くかだけになります。オマケ：グローバルカテゴリーを紹介 https://www.appleple.com/shop/ のカテゴリー設定で、のように設定をするとします。 a-blog cms のグローバル化のチェックは下層の子ブログで利用できるようにする設定になります。店舗毎に自由にカテゴリーを設定するのではなく、店舗毎のブログの1つ上の階層でカテゴリーを作ることで子ブログを作成するだけで、https://www.appleple.com/nagoya/news/ という「お知らせ一覧」のページを作ることができるようになります。このグローバルカテゴリーがあることで、上の階層で店舗の news をまとめた一覧を表示させることが簡単に行うことができます。

2023年 6月 12日

コンフィグセットを利用していない時にコンフィグセット管理を表示させないカスタマイズを考えてみる

a-blog cms の設定をコンフィグと呼び、その設定はブログ単位に設定をすることができます。その設定に名前をつけて複数管理したり、その設定を共有したりすることができるのが「コンフィグセット」です。このコンフィグセットができた事から、同じ設定を複数の子ブログで設定が楽になったりしていますが、1つしかコンフィグを利用しないような時にも現在は、このコンフィグセット管理の画面を表示させて「このブログの初期コンフィグ」をクリックして「コンフィグ管理」の画面を表示させる必要があります。テンプレートのカスタマイズだけで1ステップ減らすには以下の 3つを行うことで実現が可能になる。コンフィグセットを作っていない時にはコンフィグ管理を表示コンフィグセットが作ってある時にはコンフィグセット管理を表示コンフィグ管理の画面に（コンフィグセットの作成）ボタンを追加これらの実装を考える際には、3つのファイルをカスタマイズします。この実装をする際にやるべき事は「このブログの初期コンフィグ」以外の行が無い時に「コンフィグ管理」にリダイレクトするということです。コンフィグセット管理のテンプレートをカスタム themes/system/admin/config/set/index.html を自分のテーマの中に移設して修正します。使ってるモジュール名は Admin_Config_Set_Index というもののようです。 {name}/em] --> どこでもいいので、このページの中に上記の1行を追加してみましょう。 Admin_Config_Set_Index の config_set:loop を繰り返し {name} を表示させる。上記の表示結果に値が何かあるかを IFブロックで判定 <meta http-equiv="refresh" content="0; URL= ... でリダイレクト用のタグを書く SetRendered id="redirect" でメタタグを保存して消すという流れで1つ目のファイルの修正が完了です。管理画面のテンプレートファイルをカスタムテーマの中に admin.html があれば、それを無かったら themes/system/admin.html を自分のテーマの中に移設して修正します。 @section("admin-meta") @parent @endsection これで、コンフィグセット管理のテンプレートを表示した時の SetRendered id="redirect" があったら、その部分がこちらに移動してきます。結果、リダイレクト処理が動くことになります。最後に（コンフィグセットの作成）ボタンを追加この状態だと、コンフィグセットが作れなくなってしまうのでコンフィグ管理のテンプレートファイル themes/system/admin/config/index.html にボタンを追加します。ボタン自体は themes/system/admin/config/set/index.html にあるものをそのまま持ってきたらいいでしょう。コンフィグセットの作成位置は、お好みで構いませんが、</header> の下くらいがいいでしょう。最後にこれで、今回のコンフィグセットが作られていない時に、管理画面の「コンフィグセット管理」の画面を1つ飛ばして「コンフィグ管理」を表示させるカスタマイズは完了です。 a-blog cms の管理画面のカスタマイズは、簡単にテンプレートファイルを修正することで可能です。カスタマイズする人次第で管理画面は自由にカスタマイズが可能です。皆さんの a-blog cms は、どんなカスタムを行ってますか？

2023年 5月 17日

編集者権限でバナーモジュールをフロント側で編集できるような UI を使えるような実装を考える

先日、ネットミーティングの中で「管理者じゃないとモジュールIDの設定を表から変更できないのが困っている」と相談がありました。本来は編集者権限を渡したいのに、この機能を使うために仕方がなく管理者を渡さないといけない状況とのことでした。まず、管理者の時の表示としてはモジュールの右上に「モジュール」というリンクが表示されます。しかし、編集者の時にはこの「モジュール」というものは出てきません。この機能としては、管理者がモジュールIDの設定（条件設定・編集設定・カスタム設定）を変更するためのものなので「モジュール」という表示になっています。サイトの運営をする人たちのためであれば「編集」というラベルでないと「モジュール」と書かれていても分からないかもしれません。 @include("/admin/module/setting.html") 中身を確認してみるとモジュール {admin_module_name} を編集タッチモジュールで権限を見直してみる Touch_SessionWithAdministrationモジュールで囲まれていることで管理者のみ表示されるという事になります。まず思いつく方法とすれば、このタッチモジュールを管理者の設定を編集者以上の設定 Touch_SessionWithCompilation に変えることが思いつきます。場合によっては、管理者にだけ表示しているエリアを編集者以上に表示可能にするということで大丈夫かもしれませんが、権限の問題でこの方法では解決することができませんでした。ショートカット機能を利用してみる a-blog cms の管理画面には、各所に（★ ショートカットに追加）というボタンがあります。これを使うことで、ダッシュボードやショートカット一覧に管理画面をブックマークするようなことが可能になります。フロント側から利用するという目的からすると解決にはなりませんが、どのような URL になるのか確認してみます。モジュールID一覧から http://localhost/bid/1/admin/module_edit/?mid=2&edit=update#acms_box2 ショートカット一覧から http://localhost/bid/1/admin/module_edit/?mid=2#acms_box2 あれ？同じだった。予想では、ココが違っててショートカットの URL を使えばいいと思ったのですが... ショートカット機能を利用してみるその2 このブログの記事では、全部終わってから結論だけ書くということではなく、どうやって実装するかを考えていく部分も共有すべく書いていますので、上記の2つはボツ案になっています。ショートカット機能を利用してみるでは、管理者で確認していたのですが、今回の目的である編集者の時で確認するべきでした。モジュールID一覧（メニューに無いので URL を直接） http://localhost/bid/1/admin/module_edit/?mid=2&edit=update#acms_box2 この URL でアクセスすると表示設定は出てきますが、条件設定はデータが無く正常に保存することができません。ショートカット一覧から http://localhost/bid/1/admin/config_media_banner/?mid=2 URL が変わりました！このURL の時には編集者でも情報を更新が可能になっています。管理者とは違い、編集者では条件設定を触ることができないので、編集者には表示設定のタブのみが表示されます。 a-blog cms しっかり権限によって管理画面が作られていることが確認できます。暫定対応を考える @include("/admin/module/setting.html") の代わりに、以下のようなコードを書くことで Media_Banner モジュールのところだけ希望の動きをするようになります。 develop ・ utsuwa テーマの中で使われている実装を見つけました。編集する config_media_banner の部分が、Navigationモジュールの時には config_navigation であったりする必要があるのですが、この部分を手動で書かないとうまく動かないです。各モジュールの共通変数でモジュール名を表示させるものがあったらいいのですが... 解決編 admin_module_mid の記述をしているプログラムを探して、admin_module_url という便利な変数を見つけました。これを利用すると、そのまま欲しい URL が生成してくれるようです。ということですので /admin/module/setting.html のファイルをカスタマイズすることにし、まずは利用するテーマの中に setting.html をコピーします。 @include("/admin/module/setting.html") そして Touch_SessionWithAdministration の下に、編集者のみ表示の Touch_SessionIsCompilation のモジュールを追加し、{admin_module_url} の変数を活用した記述を追記します。モジュール {admin_module_name} を編集編集するこの時には、モジュールという言葉を知らない編集者の方にも伝わりやすいように「編集する」というラベルにしておくことでバナーを編集できるんだね。ってことが伝えやすくなります。これで、編集者権限でモジュールの表示設定が可能になります。この実装をすることによって全てのモジュールの表示設定が編集者で可能になってしまいます。勝手に Entry_Summary の設定を触られたくないということもあるかもしれませんので、その際にはバナーのモジュールとか触って大丈夫なところだけ /admin/module/setting.html ではなく、/admin/module/editor_setting.html のように違うテンプレートを読み込むような実装をした方がいいこともあるかもしれません。 1時間前には、この実装は標準にするべきでは！っと思って書いていましたが、最終的なこの時点での結論としては、やはりカスタマイズで実装した方がいいかもに変わっています。皆さんは、どう思われますか？

2023年 5月 13日

kazumich.log