kazumich.log

kazumich.log

LEGO風のMac Miniのケースがヤフオクに！

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

以前、ノート派の私も欲しい！「Mac Mini Pro」というエントリーで紹介した「Mac Mod Lab.」の英さんの作品が出品されています。

欲しい〜！ けど、mini も無ければ、お金も無い！ どちらもお持ちの方は、入札してみてはいかがでしょうか。

更新

Facebookでシェアする Xでシェアする LINEでシェアする

シェアする

Recommendation

macOS対応のタッチパネル液晶ディスプレイがイロイロ出てきている？

最近、Facebook の広告で macOS でタッチパネル液晶ディスプレイがあるっぽい事を知った。Windows 対応のものしか以前はなく、残念に思いつつも諦めていた。 ALOGIC Clarity Pro Touch 27 まずは、最初に Facebook 広告で見かけたモニターを紹介すると、聞いたことがない ALOGIC というメーカーのモニターで、4K タッチスクリーンで、27インチモデル と 32インチモデルがあるようだ。さらにウェブカメラもついてるようです。余裕があったら、これ欲しいですね。 Clarity Pro Touch 27： 179,999円 から今なら 20%OFF 144,000円 Clarity Max Touch 32 ：209,999円 こちらも 20%OFF 168,000円 こういうのがあるのなら、他にも出てるのでは？ と思って探してみると、以下のようなものが見つかりました。 DELL P2424HT こちらは 24インチの フルHD (1920 x 1080) ということで上記に比べるとスペックはダウンではあるが値段は半分以下ということで、27インチ 4K ディスプレイに追加のサブモニターとして導入するのであればいい感じかもしれません。 デル直販 55,033円 税込・配送料込 PC Watch : MacとWindows両対応でタッチもできる！液タブっぽくも使える超高機能モニターがデルから登場 サンワサプライ 400-LCD006 次はモバイルモニターでも見つかりました。お客様と対面で打ち合わせをする際には、このタイプのを持っていけると触ってもらえるので便利ですね。 Amazon 49,980円 EHOMEWEI モバイルモニター タッチペン対応 O156DSR：有機EL 4K 3840x2160 タッチペン対応 77,980円 E160DSL：WQXGA 16インチ 2560x1600 タッチペン対応 42,980円 macOS の場合には筆圧に対応してないようですが、ペンが付属 しているのは他にあまりありません。YouTube で「【ペン対応！】MacでもタッチOKな魅力のモバイルモニター「EHOMEWEI E160DSL」をレビューします」というのもありました。こちらでレビューを見てみるのもオススメ。 その他のモバイルモニターも Google で「macOS タッチパネル」で検索してみると、上記のようなものがヒットしてきましたが、Amazon で「タッチパネル macOS」で検索してもモバイルモニターが沢山ヒットします。 商品名のところに以前は書かれていなかった Mac を追加しただけで、商品の詳しい説明には Mac は何も書かれていないものが多いです。最近の macOS になって、ディスプレイ側は何もしなくても大丈夫になったのでは？と予想しています。 以前は選択肢から外していた タッチパネル液晶 が選べる時代になったのは嬉しいところです。

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

エントリー新規投稿画面で次のエントリーコードっぽいものを 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 よりはいいのでは？という実装になります。 標準に入れてもらってもいい気もしますが、どうでしょうか？

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 の修正分が反映されることになりました。

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

今回は多店舗展開をしているウェブサイトで新店を追加する際にできるだけ簡単にサイトの設定を完了させるための設定を考えてみます。 初期の状態としては上記のようになります。 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 をまとめた一覧を表示させることが簡単に行うことができます。

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

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 は、どんなカスタムを行ってますか？

Contact

お問い合わせはこちら