baserCMSの新しい管理画面テーマを使用すると、FontAwesomeのアイコンが出なくなる不具合が解消されました


すでに解決していただきましたが、旧バージョンの管理画面テーマを使用している人が検索するかもしれませんので、ログとして残しておきます。

私が制作したbaserCMSのテーマ「ratio_3_2」に、バージョン4.2から選択できるようになった新しい管理画面テーマを適用すると、SNSアイコンが出なくなってしまいました。

調べたところ、以下の原因が判明しました。

  • baseCMSはログイン中、ヘッダに常時ツールバーが表示される
  • ツールバーでは、FontAwesomeの5系が使用されている
  • FontAwesomeは、4系と5系を同時に使用すると、4系のアイコンが正常に表示できなくなる(クラス名が重複しているため)。

ratio_3_2だけでなく、FontAwesomeの4系が使用されているテーマはすべてこの不具合が発生する可能性がある、ということで、FontAwesomeをツールバーに使用しないように修正していただきました。ありがとうございます。

2019年7月20日時点では、まだ公式サイトのダウンロードファイルは更新されていません。気になる方は、baserCMSの公式リポジトリから、最新バージョンをダウンロードしてください。

https://github.com/baserproject/basercms

テーマだけ差し替えたいという場合は、 /app/webroot/theme/admin-third/ 以下を差し替えればOKです。

まだベータ版ですが、baserCMSの新しい管理画面用テーマは、デザインやカラーリングのバランスが取れていて、旧テーマよりもかなり使いやすいと思います。日常的にbaserを使用している方は試してみてください。


投稿者名 うぇびん 投稿日時 2019年07月20日 | Permalink

a-blog cmsの一時的なテンプレート差し替えについて考える


地味なTIPSなのですが。
a-blog cmsのインクルードは、themesからのパスで記述すると、他のテーマのファイルを参照することができます。

冒頭の図のように、theme_a から theme_b にある file_b.html を参照する場合は以下のとおりです。

@include("/themes/theme_b/file_b.html")

これを利用すると、テーマの関係を無視することができます。

と書いた時点で、CMSの構築に慣れている人は悪い予感しかないと思います。実際、これの多用はおすすめできません。なんのために「テーマ」という概念があるのかわからなくなります。

ですが、これを活用できる状況もあります。

  • 期間限定で、特定のページを大幅に差し替えたい
  • サイト公開後の一定期間だけ、ティザーサイトを公開したい

などで、一時的に退避する本来のページも、別URLで閲覧できるようにしたい場合 です。

実際の手順とともに解説します。

※本来のページを移動する必要がない、かつ、一部のユーザーだけ見られれば良い場合は後述します

テーマ間インクルードの使用例

まず、ティザーサイト用の子テーマを作成し、本来のページと同じファイル名で差し替え後のページを作成します。
ここではわかりやすくするために親テーマ名を公式の site2019 、トップページを _top.html にします。
本来のページは top_02.html に退避させます。

teaser@site2019
  ├ _top.html
  └ top_02.html

一般的な親子テーマの継承を考えると、この構成にした時点で、親テーマの _top.html はティザーサイト用のテーマに上書きされ、参照できなくなります。
このため、退避した top_02.html には親テーマと同じコードを書かなければなりません。

もしもティザーサイトを公開中に top_02.html だけを編集して、それを忘れたままテーマをもとに戻すと、トップページに巻き戻りが発生してしまいます。

ここで、テーマを超えたインクルードを使います。

top_02.html のファイルを空にして、冒頭の、他のテーマを参照するインクルードを書きます。

@include("/themes/site2018/_top.html")

これで、ティザーサイト用のテーマ側で、親テーマのトップページを編集することはなくなるので、期間が終了したらテーマをもとに戻すだけで済み、安全な撤収ができます。

一時的な差し替えへの様々な対処

ウェブ制作に最適化されたa-blog cmsは、一時的なページ差し替えには、テーマ間インクルードの他に様々な対処法が用意されています。

参照テンプレートを変更するURLコンテキストを使う

退避前のページが非公開で良い場合、改修後のページをチェックしてほしい場合に使えます。URLの末尾に /tpl/(テンプレートファイル名) を追加すると、指定したテンプレートに同じデータを反映したページを見ることができます。

条件分岐を使う

ログインしているときだけ退避前のページを表示したいときに使えます。ただし、更新担当者は常時ログインしているので、この方法だと難色を示されるかもしれません。

ルールを使う

cookieや端末で動的にテーマを差し替えたい場合に使えます。期間も設定できるので自動終了できますが、管理画面から設定するので、a-blog cmsの構築に慣れていないとルールが適用されていることに気づきにくいです。しっかり情報共有をしなければなりません。

以上、いろいろな手段が考えられるのですが、ファイル1点くらいの入れ替えであれば、テーマ間インクルードが一番共有もしやすいように思います。ファイルを見たら、一行しか書いていないので、親テーマをそのまま読み込んでいることがすぐわかります。

いつもの手法や、開発元が推薦している手法にこだわらず、現在のプロジェクトの状況でもっとも良い方法を選定したいものです。


投稿者名 うぇびん 投稿日時 2019年07月20日 | Permalink

ふたたび愛知県へ戻ります

刈谷ハイウェイオアシスの観覧車が好きです


2019年も半年を過ぎました。来年のお話をいただくことも多くなりましたので、早めにお知らせをいたします。

二年半ほど拠点としていた愛知県へ、ふたたび戻ることになりました。
今度は一時的な移住ではなく、永住をするつもりです。
年内を目処に、10月か11月頃を予定しておりますが、どのあたりに住むかなどは、まだ非公開とさせてください。

札幌へ戻った主な理由は、2016年当時の記事に書いたとおりですが、無理をして体調を崩してしまったこともありました。一番ひどいときは、夜中まで働いても全然仕事が進まないし、寝てもよく眠れないような状態でした。

その後、治療の甲斐あって以前より元気に明るく働けるようになりました。一年ほど前から、機会があればもう一度、大好きな愛知県で暮らしてみたいと思うようになり、この記事を書いています。

「前も暮らしていたから勝手はわかるし、なんとかなるさ」というノリですが、ぶっちゃけアテはありません。
名古屋周辺の皆様、冬季、来年度の案件がありましたらご相談ください。特に、a-blog cms・MovableType.net案件だととても喜びます。

引っ越して落ち着いたら、また車に乗ってお城を見に行きたいです。


投稿者名 うぇびん 投稿日時 2019年07月02日 | Permalink

a-blog cmsでシステムで処理できない曜日表記に対応する

2019-07-06追記
文中で「a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。」と書いていましたが、できます。死にたい。訂正してお詫び申し上げます。
いずれにしても、SetRenderedで変数化しておいた方が、サイト内の複数箇所で利用しやすいことは代わりありません。


曜日が丸囲み漢字になっている


画像のようなカンプを受け取りました。曜日が「丸囲み漢字」になっています。

丸囲み漢字はユニコードで表示できないことはありませんが、CMSで扱うのは困難です。かといって、画像を書き出してimg要素にしたり、CSSの:after疑似要素で丸を重ねたりすると工数が増えます。
カッコ囲みに変更させてもらおうかと思ったのですが、全体のデザインとのバランスを考えるとデザイナーさんの希望を叶えたいところでした。

実装した経緯を記事にしておきます。
お急ぎの方は「解決方法」からどうぞ。
WordPressでの解決方法もあります。こちらへどうぞ。

※文章の都合上「日付型カスタムフィールド」と書いていますが、普通の文字列です。a-blog cmsは、Y-m-d形式であれば日付フォーマットを適用できる仕様です。

マークアップ

望ましいと考えられるマークアップは以下です。
この記号は「日本語表記の略語」ですから、abbr要素でマークアップして、title属性に国際表記を付与します。lang属性も入れようかと思いましたが、文書自体が日本語だと宣言しているのでやめました。

<p>
<abbr title="Monday">&#12938;</abbr><br>
<abbr title="Tuesday">&#12939;</abbr><br>
<abbr title="Wednesday">&#12940;</abbr><br>
<abbr title="Thursday">&#12941;</abbr><br>
<abbr title="Friday">&#12942;</abbr><br>
<abbr title="Saturday">&#12943;</abbr><br>
<abbr title="Sunday">&#12944;</abbr>
</p>

上記のコードを表示すると以下のようになります。







a-blog cmsの「共通設定」を試してみる

a-blog cmsの「コンフィグ>共通」設定には、曜日をどのように表示するかという設定があります。通常は「日〜土」の普通の漢字表記ですが、任意の文字列に変更可能です。
この文字列は、エントリー関連モジュールの {date#week} 変数で表示できます。



じゃあ下のように書けばいいよね、と思ったのですが…

<p>
<abbr title="{date#l}">{date#week}</abbr>
</p>

ここで問題が発生しました。
今回は、日付型カスタムフィールドで日程を表示している箇所があったのです。

{entry_sample_date}[date('l')] → Sundayなどの英語表記

{entry_sample_date}[date('week')] → PHPのdate関数にはないので何も表示されない

a-blog cmsの日付型カスタムフィールドの場合、使えるフォーマットは「PHPのdate関数と同じ種類」となっています。このため、先程のa-blog cms独自のフォーマット変換は適用されません。

改めて、プログラムでの処理を考えることになりました。

出し分け方を考える

プログラムでの処理の流れを考えるとこのようになります。

  • エントリーの曜日を取得
  • PHPのDateフォーマットの「N」に変換し、1〜7の数値を取得
  • 数字を条件にabbrでマークアップした記号を出力

WordPressの例

WordPressであれば、get_post_time関数を利用することになるでしょうか。ifを使おうかと思いましたが、配列をそのまま呼び出した方がスマートですね。

<?php
    $week_mark = array(
        '<abbr title="Monday">&#12938;</abbr>',
        '<abbr title="Tuesday">&#12939;</abbr>',
        '<abbr title="Wednesday">&#12940;</abbr>',
        '<abbr title="Thursday">&#12941;</abbr>',
        '<abbr title="Friday">&#12942;</abbr>',
        '<abbr title="Saturday">&#12943;</abbr>',
        '<abbr title="Sunday">&#12944;</abbr>'
    );
    $week_number = get_post_time( 'N' ) + 1;

    // 番号に該当する曜日記号を出力
    echo $week_mark[$week_number];

?>

同様の処理をa-blog cmsのIFブロックで行おうとしたのですが…また、カスタムフィールドならではの問題が発生してしまいました。

<!-- BEGIN_IF [{date#N}/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{date#N}/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。

できます。失礼いたしました。

<!-- BEGIN_IF [{entry_sample_date}[date('N')]/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{entry_sample_date}[date('N')]/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

さすがにちょっと悩みましたが、先月の合宿のハンズオンでやった、SetRenderedの利用が参考になりました。

カスタムユニットを動的化してみよう | 2019春合宿 | ハンズオン | a-blog cms developer
https://developer.a-blogcms.jp/hands-on/camp2019spring/entry-3132.html

解決方法

最終的に、以下のように構築して解決しました。これであれば日付でもカスタムフィールドでも対応できます。

1. 曜日用のテンプレートを作成する

vars_week.html」というテンプレートをテーマ内に作成し、以下の通り記述します。それぞれの変数名は「label_week_(数字)」で、数字は月曜日から日曜日まで、1〜7とします。

<!-- BEGIN_SetRendered id="label_week_1" --><abbr title="Monday">&#12938;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_2" --><abbr title="Tuesday">&#12939;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_3" --><abbr title="Wednesday">&#12940;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_4" --><abbr title="Thursday">&#12941;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_5" --><abbr title="Friday">&#12942;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_6" --><abbr title="Saturday">&#12943;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_7" --><abbr title="Sunday">&#12944;</abbr><!-- END_SetRendered -->

2. テンプレートを読み込む

曜日を使用する可能性があるテンプレートの冒頭で、この変数群テンプレートを読み込みます。

@include("/vars_week.html")

3. 変数を呼び出す

通常のエントリーの日付であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{date#N}" trim="1" -->

Y-m-d形式のカスタムフィールドで、フィールド名が「entry_sample_date」であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{entry_sample_date}[date('N')]" trim="1" -->

補足:校正オプションの自作

今回はやりませんでしたが、a-blog cmsは校正オプションを自作できますから
「Y-m-d形式の文字列を渡すと、先述のWordPressの場合の処理を通して、丸囲み漢字を返す」
という校正オプションを作ってしまう手もあります。

ただし、拡張を自作する場合は将来のバージョンアップやサーバー移転の際に漏れが出ないよう注意が必要です。

まとめ

こうして、丸囲み曜日を文書的にもシステム的にも問題なく表示できるようになりました。今回はたまたま丸囲み曜日でしたが、「弥生」とか「神無月」のような日本の古い月表記、a-blog cmsがサポートしていない言語の曜日表記にも使えますね。

なお、今回の場合、解決までに30分程度だったので問題なかったですが、時間がかかりすぎるようならカッコ囲みにさせてもらうなどの相談をしたほうが良いと思います。どのくらいかかりそうか、詰まったときに解決のヒントになりそうな引き出しがどのくらいで出てくるかで、そのあたりのバランスを考えています。

a-blog cms Traning Campのハンズオンは、毎回参考になることが多いので助かってます。アーカイブがあるのでぜひ見てみてくださいね。

https://developer.a-blogcms.jp/hands-on/


投稿者名 うぇびん 投稿日時 2019年06月30日 | Permalink

Qiitaで書いていたCMSの技術情報をこのブログに戻します

2019年6月30日時点のQiitaのマイページ


二年ほど、CMS関連の技術情報はQiitaで書くようにして、このブログは考え方や雑記としていましたが、今日からこのブログに戻します。

私のマイページはこちらでした。
https://qiita.com/webbingstudio@github

Qiitaで書いていた記事は、技術の散逸を防ぐ必要があるので、惜しいですがサービス終了まで残します。Qiitaへリンクを貼るだけのエントリーを作ることも考えましたが、Googleにスパム扱いされるかもしれませんし…

戻す理由

記事と著者が結びつかない

私もQiitaを利用していて感じたことですが、どんなに役に立つ情報を見つけても、記事の著者を意識することができません。
ブログ記事から情報を見つけた場合は、メインビジュアルや目立つところにある運営者のプロフィールを見てフォローなどを考えるのですが、Qiitaはそれができませんし、まったくしてもらえることもありませんでした。

技術情報をオープンソースのように扱うという理想をQiitaが追っているのであれば、これは理想的な設計かもしれませんが、私は技術者である前にフリーランスの個人事業主です。私を知ってもらえないと困るのです。

継続性が低いコンテンツしか読んでもらえない

以下は、私のQiitaのいいねランキングです。ほとんどがトラブルシューティングです。

まあこれも予想はしましたが、jQueryとWordPressばかりで、a-blog cmsとMovable Typeは一件もありません。一位に至ってはHomebrewです。よほどでない限り一回しか参照しないし、あと数年で不要になりそうな知識です。

私自身も、こういった継続性が低いコンテンツにはお世話になっているのですが、本業とは関係がないトラブルシューティングばかりいいねされるとテンションが下がります。
本業と関係ないけど、困っている人のお役に立ちたい記事だけQiitaに書く手もあるかもしれません。

「ブログ見てます」に応えたい

a-blog cmsのイベントへ行くと、「うぇびんさんのブログ見てます」「うぇびんさんのブログに助けられました」と何人かの人に言われます。お世辞ではなく本当にそう思ってくださっているようです。

a-blog cmsは国内の主要CMSのひとつとなりましたが、まだまだユーザー数は少ないです。Qiitaの記事を見に来た人と比べると微々たるものでしょう。ですが、そういう人たちのために記事を書き続けたいなと思っていますし、CMSブランドを問わない構築上の知識なども後進のために残したいと思っています。

というわけでQiitaに書いてもいいねされそうにない、マニアックな記事をまた一本書きます。


投稿者名 うぇびん 投稿日時 2019年06月30日 | Permalink