kazumich.log

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

13ページ目

イベント用のモジュールの仕様を妄想してみた

これは a-blog cms Advent Calendar 2020 の6日目のエントリーです。今回は、こんなモジュールがあったらいいなって妄想を書いてみようと思います。

標準提供の範囲内での実装を考えてみる

a-blog cms には、スケジュールをサイト上に掲載するためのモジュールとして

と、2種類のモジュールが用意されています。

スケジュール ( Schedule ) モジュール

こちらは、管理画面の「スケジュール」より1ヶ月分をまとめて管理するような UI で簡単な休日カレンダーなど作ることができるようになっています。

このモジュールでは、縦に1ヶ月分を表示させるリスト表示と 七曜表表示ができ、さらに指定ヶ月分や年間表示など機能が満載です。

お店の休日カレンダーや月間イベント情報など、手軽に休日など日のステータスや、イベントのタイトルくらいをお伝えするのに向いています。アップルップルでは、毎年この時期には「年休日カレンダー」をスケジュールモジュールで作って社内で共有 しています。

エントリーカレンダー ( Entry_Calendar ) モジュール

a-blog cms はエントリーのカタチで情報を持たせておくと、いろいろな方法で情報が表示可能です。 その中でも、エントリーカレンダー は面白い使い方ができるモジュールになっています。

スケジュールモジュールのようなカタチでカレンダーを表示させる事ができ、その日付の中にエントリー情報を表示ができるようにしたものです。スケジュールと大きく違うところはカレンダーに表示されるエントリーリンクから詳細ページを用意できる事です。

妄想で仕様を考えてみる

ここからは「こんなのがあったらいいな」を書いていきます。

エントリーカレンダー ( Entry_Calendar ) モジュール の弱点 を共有しておきます。 例えば、今日から3日間は「臨時休業」とするとします。その際には、3日分のエントリーを作ってタイトルに「臨時休業」というエントリーを作る必要があります。 繰り返し同じ情報を表示する際には複製が必要になります。

日付の管理の仕方を変える

これを解決しようと思うと、日付を複数設定できるようにする必要があります。 システム自体の管理を変更するには大事ですが、a-blog cms では管理画面を自由にカスタマイズが可能ですから、まずはカスタムフィールドグループで複数の日付を設定できるようにしてみてはどうでしょうか？

都度、日付を登録するフォームの場合

この場合、1週間とか1ヶ月毎日になったりすると設定が大変そうです。

また、入力欄には class="js-datepicker" を設定する事で日付の選択画面が出るようになります。

FROM - TO で日付を設定する場合

FROM - TO を設定できるようにする事で長いスケジュールも設定手軽に登録ができるようにできますね。

カスタムフィールドの日付に対応するモジュール

エントリー日付ではなく、上記のようなカスタムフィールド {event_date_from} と {event_date_to} を利用して情報を表示するモジュールを作ります。

  • イベントカレンダーモジュール ( Event_Calendar )
  • イベントサマリーモジュール ( Event_Summary )
  • イベント七曜カレンダーモジュール ( Event_Calendar7 )

イベントカレンダーモジュール ( Event_Calendar )

Entry_Calendar 互換で、カスタムフィールド日付で情報が表示できるモジュールになります。複数の日付の場所に同様のエントリーにリンクがはられるイメージです。

イベントサマリーモジュール ( Event_Summary )

表示設定としては Entry_Summary 互換っぽいが、Entry_Calendar のような

  • 週の始まり
  • 表示モード 月表示 / 週表示(その日から) / 週表示(週の始まりから)
  • ページ送り数

が、必要だと思う。 そして、エントリー自身は同じエントリーは表示させずに、Summaryっぽい日付の場所には日付をFROM - TO で表示させる。

イベント七曜カレンダーモジュール ( Event_Calendar7 )

七曜表示で画像のような表示ができるようにする。

こんなの作りました。ではなく、こんなのあったらいいね。って事を書いてみました。

明日は、ウェビングスタジオ 口田さん が「 コンテキスト（URLコンテキスト、ctx属性）について解説記事 」を書いてくれるそうです。なんとか、今年も毎日続けたいですね。

PICKUP記事をお知らせ一覧の最初に出しておくための実装のポイントはソート順の設定

このところブログを書くのをサボっていましたが、今年も a-blog cms Advent Calendar 2020 のトップバッターという事で a-blog cms のカスタマイズについて書いてみようと思います。

  1. モジュールを2つ用意して通常のお知らせ一覧の上に PICKUP一覧を置く
  2. モジュールは 1つで並び順で対応する

よくあるカスタマイズの依頼で「お知らせの一覧に最初に出しっぱなしにしておけるようにして欲しい」というもの。この実装を皆さんは、どのように実装しますか？

1. モジュールを2つ用意して通常のお知らせ一覧の上に PICKUP一覧を置く

先日、受託の制作で同様の依頼があった時に、サクッとこんな実装をしました。

えっ！ 貴方が受託の案件で実装してるのって思う人もいるかもしれませんが、そんな時もあります。

管理画面には、チェックボックスで「最初に表示させる場合にはチェックを入れてください」とでもしましょう。しかし、これには弱点があります。

  • PICKUP の件数が複数件になる事もあるし無い事もある。
  • PICKUP と通常のエントリーの合計の件数は固定がいい。

こう言われると、2つのモジュールの合作はうまく行きません。 この 合計の件数は固定 というのがハードルが高いことになります。最初のキャプチャ画像のように縦に積むような場合には「5件が6件になってもいいじゃないですかー！」と逃げる事もできますが、以下のような横に数件並ぶ場合には個数は大事になってきます。

2. モジュールは 1つで並び順で対応する

この方法は、CTO の伊藤さんに教えてもらいました。

エントリー系のモジュールは、ソートのキーが2つ設定できるようになっています。 なので、1つ目のキーをカスタムフィールドにして、2つ目のキーを日付にする事で簡単に実現 できます。

モジュールID の表示設定を見るとこんな感じで

フィールドの昇順・降順は、データに入っている内容によっては逆順にしないといけない事もありますが、

上記を書いている時に ソートフィールド名 という項目を見つけました。 あれ？ いつこんな項目ができたんだろう？ 知りませんでした。なので、今回紹介しようと思っていた実装よりも簡単に済ませる事ができてしまいます。

field-pickup.html

themes/beginner2020/admin/entry の中にある field-pickup.html の「サブカラムに表示させる...」の部分を「最初に表示させる...」にテキストだけ修正しておきます。

<div class="acms-admin-form-checkbox">
	<input type="checkbox" name="pickup[]" value="true"{pickup:checked#true} id="input-checkbox-pickup" />
	<label for="input-checkbox-pickup"><i class="acms-admin-ico-checkbox"></i>
　　　最初に表示させる場合はチェックを入れてください。</label>
</div>
<input type="hidden" name="field[]" value="pickup" />

モジュールID 表示設定

表示順 フィールド順（降順）
第2表示順 日付（降順）
ソートフィールド名 pickup

あとは IFブロックで {pickup} の値によって、PICKUP と出したり、日付を出すようにして少し違った表示にしています。

<!-- BEGIN_IF [{pickup}/eq/true] -->
<p><span class="acms-label acms-label-danger">PICKUP</span></p>
<!--ELSE -->
<p>{date#Y}年{date#m}月{date#d}日( {date#week} )</p>
<!-- END_IF -->

もう少し面倒な事をして実装した事を紹介するつもりだったのですが、これを書くのにキャプチャして説明を書こうとしている時に ソートフィールド名 という存在を知って、より簡単にできるという説明になってしまいました。

どう面倒に実装したのかは、分かりにくくなるので書かないでおきます。

明日は、井斉さん が「 運用視点で嬉しい管理画面の設計とa-blog cmsを使った実践の方法 」を書いてくれるそうです。なんとか、今年も毎日続けたいですね。

スパ西浦モーターパークに行ってきました

幸田はフリー走行で行ってないけど、走ってきたという意味では愛知県の5つあるミニサーキットの最後になる スパ西浦モーターパーク に行ってきました。

残りの4つのコースに行ってきた記事

スパ西浦モーターパークとは

愛知県蒲郡市の海の側にあるサーキットです。多くのミニサーキットは山の中にあることが多いですが、海の見えるサーキットっていいですよね。 全長 1,561m でコース幅は 12m ストレートは 416ｍ あります。さらに特徴的なのは鈴鹿サーキットのように立体交差もあります。

日本自動車連盟(JAF)と日本モーターサイクルスポーツ協会(MFJ)の公認サーキットであり、エスケープゾーンも広くミスってガードレールにぶつかるようなことは、よっぽど無いのではないコース作りになっていると思われます。

サーキットのコース図のPDFにリンクしています

パドックの上から撮った写真で、ストレートエンドから左コーナーでぐるっと回ってストレート下にいくコースの写真を貼っておきます。

今回は初めてということもあり 1コーナーは無理をせず 140km/h くらいでしたが、まだまだ頑張ると最高速は出ることでしょう。

1人で行くと、走ってる写真が無いのが残念ではありますが、今回はドラレコで撮った動画を用意できましたので最後に貼っておきます。

結果報告

正直なところ速いタイムではないのですが、今後のためにも晒しておきます。ベストは 12周目の 1'07"102 でした。最初の10周は VSA がオンで様子見な感じで、その後からが本番で、3回しかタイムアタックできてないことになります。

どちらかと言えば、50分で20周しかできてない体力が、タイムが遅いよりもダメな気がします。

ドラレコで撮影した動画

次回は、フリー走行をしたことがない 幸田サーキット に行ってみようと思っていますが、S2000 を走らせるのには、このスパ西浦の方がいい気もしています。

リモートワークで使う MacBook Pro は何がいいのかを考えてみる

仕事で使う MacBook を考えると、処理速度・画面サイズ・重さ の3つでどこを重視するかで検討することになってくるのではないかと思います。あと 価格 というのもありますが、仕事ってことで考える際には一括償却ができる金額をベースに考えることにしましょう。

MacBook Pro 13インチと 16インチの全体比較

まず 13インチと 16インチのスペックを比較してみます。安いモデルを買うということではないので 13インチの下位モデルは比較検討から外しています。

13インチMacBook Pro(2020) 16インチMacBook Pro(2019)
画面サイズ 13.3インチ 16インチ
画面 広色域(P3) True Toneテクノロジー
解像度 2,560 x 1,600ピクセル(227ppi) 3,072 x 1,920ピクセル(226ppi)
Touch BarTouch ID ○
ストレージ(SSD) 512GB/1TB/2TB/4TB 512GB/1TB/2TB/4TB/8TB
プロセッサ 第10世代 Intel Core i5 (2.0GHz/4コア)
・TB使用時最大3.8GHz・6MB L3キャッシュ
第10世代 Intel Core i7(2.3GHz/4コア)
・TB使用時最大4.1GHz・8MB L3キャッシュ		 第9世代 Intel Core i7 (2.6GHz/6コア)
・TB使用時最大4.5GHz・12MB L3キャッシュ
第9世代 Intel Core i9 (2.3GHz/8コア)
・TB使用時最大4.8GHz・16MB L3キャッシュ
第9世代 Intel Core i9(2.4GHz/8コア)
・TB使用時最大5.0GHz・16MB L3キャッシュ
メモリ 16GB/32GB 16GB/32GB/64GB
グラフィック(iGPU) Intel Iris Plus Graphics Intel UHD Graphics 630
グラフィック(dGPU) – AMD Radeon Pro 5300M
・4GB GDDR6メモリ
AMD Radeon Pro 5500M
・4GB GDDR6メモリ
AMD Radeon Pro 5500M
・8GB GDDR6メ‍モ‍リ
AMD Radeon Pro 5600M
・8GB HBM2メ‍モ‍リ
本体サイズ 30.41 × 21.24 × 1.56 cm 35.79 × 24.59 × 1.62 cm
重量 1.4kg 2.0kg
通信 Wi-Fi 802.11a/b/g/n/ac / Bluetooth 5.0
カメラ 720p FaceTime HDカメラ
ポート Thunderbolt 3(USB-C)ポート × 4 / 3.5mmヘッドフォンジャック
スピーカー 6スピーカーシステム（フォースキャンセリングウーファー内蔵）Dolby Atmos再生 ハイダイナミックレンジステレオスピーカーDolby Atmos再生
マイク ビームフォーミングを内蔵したスタジオ品質の3マイクアレイ 3つのマイクロフォン
キーボード バックライトMagic Keyboard(シザー構造/1mmのキーストローク/逆T時型の矢印キー)
トラックパッド 感圧タッチトラックパッド
バッテリー容量 58.0Wh 100.0Wh
バッテリー持ち ブラウジング：最大10時間ムービー再生：最大10時間 ブラウジング：最大11時間ムービー再生：最大11時間
電源アダプタ 61W USB-C電源アダプタ 96W USB-C電源アダプタ
カラー シルバー/スペースグレイ
価格(税別) 188,800円〜 248,800円〜

税込30万円で買える MacBook Pro を比較してみる

残念ながら 16インチの上位モデル「第9世代の2.3GHz 8コアIntel Core i9プロセッサ」については標準構成で 317,680円 になってしまうことから今回の検討から外れています。どうしても Intel Core i9 がいい！ってことであれば 6コアモデルの MacBook Pro 15インチを中古で探してみると予算内で買うことができます。

MacBook Pro 16 / 295,680円（税込）

  • 第9世代の2.6GHz 6コアIntel Core i7プロセッサ（Turbo Boost使用時最大4.5GHz）
  • 16GB 2,666MHz DDR4メモリ
  • AMD Radeon Pro 5500M（8GB GDDR6メ‍モ‍リ搭載）
  • 512GB SSDストレージ
  • ベンチマーク マルチコア：22263 / シングルコア：4931

MacBook Pro 16 / 295,680円（税込）

  • 第9世代の2.6GHz 6コアIntel Core i7プロセッサ（Turbo Boost使用時最大4.5GHz）
  • 16GB 2,666MHz DDR4メモリ
  • AMD Radeon Pro 5300M（4GB GDDR6メ‍モ‍リ搭載）
  • 1TB SSDストレージ
  • ベンチマーク マルチコア：22263 / シングルコア：4931

購入時には、[2013-2020年] MacBook 74台のCPUベンチマークを一覧比較！[Air・Pro・無印] – beizのノート を、普段チェックしています。定期的にメンテナンスされていて、中古で買う際に現行モデルとの性能比較に便利です。

MacBook Pro 13 / 295,680円（税込）

  • 第10世代の2.3GHzクアッドコアIntel Core i7プロセッサ（Turbo Boost使用時最大4.1GHz）
  • 32GB 3,733MHz LPDDR4Xメモリ
  • Intel Iris Plus Graphics
  • 1TB SSDストレージ
  • ベンチマーク マルチコア：20025 / シングルコア：5762

次にリモートワークで大事な部分を考える

以下のどちらが重要になりますか？

軽さ

やっぱり持ち歩くことが増えることから重量って大事かもしれません。 車での移動が多い場合には重さはあまり関係ないかもしれませんが、電車での移動が多い場合には大事なところになりますね。

画面の広さ

オフィスに外部ディスプレイがある場合には、本体のディスプレイサイズの重要度は下がりますが、外で利用する際にはメインの本体のディスプレイのサイズでの利用になることも多いかと思います。この場合には画面の広さは大事ということに。

思っていたよりも選択肢が少ない今の一括償却可能な MacBook Pro

これを書く際にもう少しバリエーションがあって、選択肢も多いと思って調べながら書いてみると MacBook Pro 13 の一択ですね。

MacBook Pro 13 / 295,680円（税込）

  • 第10世代の2.3GHzクアッドコアIntel Core i7プロセッサ（Turbo Boost使用時最大4.1GHz）
  • 32GB 3,733MHz LPDDR4Xメモリ
  • Intel Iris Plus Graphics
  • 1TB SSDストレージ
  • ベンチマーク マルチコア：20025 / シングルコア：5762

ここからは 13インチの弱点を補っていく策を

画面の広さを解決

会社と家で仕事をする前提で考えれば、どちらにもディスプレイを置くということで解決できます。スペースの問題もあるでしょうから私のオススメは会社には27インチ4K、自宅には24インチ4Kディスプレイをオススメしています。

USB-C 給電できる高価なものは買ったことがないので欲しいなって思っていますが、その部分に費用をかけるのなら Thunderbolt3 ドックの方がいい派です。

GPU性能を解決

「MacBook Pro 13 + eGPU は快適でオススメ」と書いていますが、Thunderbolt3 接続の外付けGPUを使うのがオススメです。とっても大きいですけど、MacBook Pro 16 の内蔵 GPU より高速なります。

プラスアルファの軽量化

今、リモートワークをしていると MacBook Pro を家と会社を持ち歩いていることになる。少しでも軽くしてあげることを考えて最近ACアダプタを買い増しして家には1つ置いておき鞄にACアダプタを入れないようにすることで 200-300g ほど軽量化が可能になります。ちなみに 15.16インチの ACアダプタは 295g で、13インチは 208g になります。

最終的なところでは

MacBook Pro 13 + α

  • 第10世代の2.3GHzクアッドコアIntel Core i7プロセッサ（Turbo Boost使用時最大4.1GHz）
  • 32GB 3,733MHz LPDDR4Xメモリ
  • Razer Core X Chroma + AMD Radeon RX5700XT
  • 1TB SSDストレージ
  • 外部 4K ディスプレイ (3840x2160) + Thunderbolt 3 ドッキングステーション

こんな感じなのが理想ではないかと考えます。どうでしょうか？

MacBook Pro 13 + eGPU は快適でオススメ

MacBook Pro 15 と MacBook Pro 13 で大きく違うのは GPU が載ってるかどうかというところが大きいと思っていますが、これを克服するために外付けのGPUを買ってみたので報告しておきます。

ベースキャンプ名古屋の会議室に Zoom Rooms を導入テストしてみました

ベースキャンプ名古屋 の会議室に Zoom Rooms を利用できるようにしました。 通常の Zoom Meeting と Zoom Rooms との違い、用意した設備についてを紹介します。

結果としては Zoom Rooms は、導入しないことになりましたが、その理由も書いておきますね。

最新記事

アーカイブ

年間カレンダー

ハッシュタグ

Login