コンテンツの読み込みに時間がかかっています

7ページ目

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ハッシュ化することができます。
kazumich@appleple.com が 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年のアップルップルの社員旅行は青森県に

2023年コロナでの行動制限が終わり、世間的にも旅に出ていい感じになってきたという事もあり社員旅行を企画し、1泊2日(2023年7月21.22日)で青森県に行ってきました。

今回の旅の候補としては、青森・富士・沖縄 という候補が出ており、富士なら土日でフラッと行けなくもない、沖縄は暑いという事で、青森になった感じかな。

今回は、1日目をカルチャーの旅、2日目をネイチャーの旅と題した2日間の社員旅行となっております。

1日目:カルチャーの旅

まず、青森空港に到着して、青森に来た!を実感すべく行った先は ねぶた との遭遇するため「ねぶたの家 ワ・ラッセ」に行き、そこから歩きで近所にある「ねぶたラッセランド」で制作中のねぶたにも会ってきました。これで、しっかり青森に来た!という感じに。


そこから出て、「青森県立美術館」で「あおもり犬」との記念撮影の予定でいたのですが、向かおうと思って Google Maps で 休館 の表示を発見! これは少し残念でしたが、次の目的地に。

美術館の向かいくらいにある「三内丸山遺跡」も少し寄ろうという事であったので、行ってみたところ思ってたより面白かった! 現地のガイドさんに縄文時代の暮らしを聞きながら、子供の頃に学んだ事をアップデートしてきました。(自分が学んだ頃と比べると随分変わってきているようだ)



写真ではみたことがあったのですが2つの会場がある「田んぼアート」をハシゴしてきました。あまり、どうやってるのかピンときてなかったのですが、作る側としても用意した時には完成形が見えず、稲が育ってきて思ってたように絵が完成した時には嬉しいだろうなぁってのが感想。


ホテル「星野リゾート 界 津軽」

星野リゾート 奥入瀬渓流ホテル に泊まりたかったのですが、日程的に満室で取れずに「星野リゾート 界 津軽」になりました。部屋のベットがマットだけで足が無いのは少し安っぽい気がして部屋的には大満足ではなかったが、夕飯は美味しかった!


ご飯の写真しか無かった〜。

2日目:ネイチャーの旅

午前中は、青森県と秋田県にまたがる国立公園にある「十和田湖パワーボートクルーズ」体験と「十和田神社」参拝し、午後からは「奥入瀬渓流」を散歩してきました。



十和田神社


奥入瀬渓流


最後のシメは「味噌カレー牛乳ラーメン」


1泊2日でギュッとスケジュールを設定した社員旅行だったので、ゆっくりのんびりは出来なかったが、イイ旅行になったと思います。次は、旅行だけじゃなくて、沖縄で a-blog cms のイベントやりたいですね。


日帰り出張用に innovator INV30 を買ってみたけど、MacBook Air M2 入る?

日帰り出張用に innovator INV30 を買ってみた。今回はフロントオープンで、できるだけ小さいヤツが欲しいというところで探していた。しかし、そのフロントポケットに MacBook Air M2 が入るのか?ってのがネットで探しても見つからない! が、ポチってみました。

MacBook Air M2 入ります

結論からすると入りました。上にある1枚目の写真からするとギリギリ入っています。しかし、ファスナー部分を閉める際には MacBook を気にしながら浮かし気味で閉めないと心配な感じでした。


まぁ、でも入ったという結果をお伝えしておくために書いております。

内側のポケットにもノートパソコン入れれます

内側といってもフロント側からアクセス可能です。こちらに入れると MacBook Air M2 入れられます。また機会があれば、MacBook Pro 14インチもテストしてみようと思います。 (16インチは無理です)


結果としては、フロントポケットには iPad を入れ、内側のポケットにはノートパソコンが入ります。そのパソコンのサイズは、幅 30.41 cm x 奥行き 21.5 cm x 厚さ 1.13 cm になりますので、参考にしてみてください。


机に取り付けてからディスプレイを付けることができる液晶アームを探している

今回、アームと机に設置した後でディスプレイをつけることができるアームを買うのに、いくつか候補を探してみている。

少し前に、HILLPORT 白 モニターアーム PC ディスプレイアーム ガススプリング式 17~32インチ ガス圧式 ディスプレイスタンド クランプ式 耐荷重2~9kg ホワイト M3P を購入したが、Amazon で売り切れになって買えなくなっていた。


写真のように、机に取り付けてからディスプレイだけ後から付けられると取り付けが楽だし、同じアームにしておくとディスプレイを付け替えることもできるかもしれない。そういうことで、同じアームを数台買いたいと思っている。

取り付け部分だけ

アーム部分はバラバラで、取り付け部分だけ共通にするという手もある。

最終的には

上記にイロイロ書き出してみたが、どうやら Sunon 液晶モニターアーム 1画面 アルミフレーム 32インチ 耐荷重9KG 水平垂直可動 ガス圧 pcモニター (ホワイト【シングル】) が、この前買ったアームと同じもののようだ。

と、書き掛けの状態の翌朝に Amazon の在庫が戻っていて HILLPORT 白 モニターアーム PC ディスプレイアーム ガススプリング式 17~32インチ ガス圧式 ディスプレイスタンド クランプ式 耐荷重2~9kg ホワイト M3P も買えるようになっていた。

どちらにしても、このモニターの脱着が簡単なタイプの液晶アームを買うのがオススメです。


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

今回は多店舗展開をしているウェブサイトで新店を追加する際にできるだけ簡単にサイトの設定を完了させるための設定を考えてみます。




bid URL ブログ名
1 https://www.appleple.com/ HOME
2 https://www.appleple.com/shop/  ショップ一覧
3 https://www.appleple.com/tokyo/ 東京店
4 https://www.appleple.com/osaka/  大阪店

初期の状態としては上記のようになります。 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")
<!-- BEGIN_IF [%{BID}/eq/2] -->
<form action="/bid/2/admin/blog_edit/" method="post" class="acms-admin-form">
  新規店舗:
  <input type="text" name="name" value="" placeholder="ショップ名">
  <input type="hidden" name="blog[]" value="name">

  <input type="text" name="code" value="" placeholder="shopname">
  <input type="hidden" name="blog[]" value="code">

  <input type="hidden" name="config_set_id" value="1">
  <input type="hidden" name="blog[]" value="config_set_id">

  <input type="hidden" name="status" value="open">
  <input type="hidden" name="blog[]" value="status">
  <input type="hidden" name="domain" value="%{DOMAIN}">
  <input type="hidden" name="blog[]" value="domain">
  <input type="hidden" name="indexing" value="on">
  <input type="hidden" name="blog[]" value="indexing">

  <input type="submit" name="ACMS_POST_Blog_Insert" value="店舗作成"
    class="acms-admin-btn-admin acms-admin-btn-admin-primary" onclick="javascript:return confirm('新規店舗子ブログを追加します。よろしいですか?')">
</form>
<!-- END_IF -->
@endsection

こんな感じに設定します。4.5行目の 2 は /shop/ の ブログID になりますので、環境によって変わってきます。また、13行目の name="config_set_id" value="1" についても、店舗用のコンフィグセットID が 1 なのでこのような設定にしてあります。

誰にでも思いつく簡単な管理画面の実装になります。 a-blog cms の管理画面のカスタマイズは、簡単な HTML をどう書くかだけになります。

オマケ:グローバルカテゴリーを紹介

https://www.appleple.com/shop/ のカテゴリー設定で、



CID カテゴリー名 カテゴリーコード グローバル化
3 お知らせ news チェック
4 スタッフ紹介 staff チェック
5 アクセス access チェック

のように設定をするとします。 a-blog cms の グローバル化 のチェックは下層の子ブログで利用できるようにする設定 になります。店舗毎に自由にカテゴリーを設定するのではなく、店舗毎のブログの1つ上の階層でカテゴリーを作ることで子ブログを作成するだけで、https://www.appleple.com/nagoya/news/ という「お知らせ一覧」のページを作ることができるようになります。

このグローバルカテゴリーがあることで、上の階層で店舗の news をまとめた一覧を表示させることが簡単に行うことができます。