a-blog cms awards 2023 の結果が発表されました
先日開催した a-blog cms LIVE Vol.16 にて、2023年5月16日(火)〜 2023年6月13日(火)の間募集していた a-blog cms awards 2023 の結果発表をおこないました。
a-blog cms LIVE 内では、受賞事例の制作者の方からのセッションを各賞10分ほどを行っていただき、カスタマイズ方法の紹介や、a-blog cms の機能を使ってどんなサイトを提供しているのかご紹介いただきました。
受賞事例の詳細は a-blog cms awards イベントページにて紹介しております。各事例のリンクからページをご覧ください。
結果発表
受賞事例の結果は以下となります。受賞事例に選ばれたサイトの関係者の皆様方、この度は誠におめでとうございます!
テクノロジー賞:あしかクッキー
制作:ましじめ株式会社
制作事例の詳細へ
デザイン賞:越後長野温泉 嵐渓荘
制作:ZANMAI株式会社
制作事例の詳細へ
ユーザビリティ賞:株式会社銭辰堂
制作:フォルトゥナ
制作事例の詳細へ
アップルップル賞:竹内建設
制作:有限会社リーグラフィ
制作事例の詳細へ
副賞の賞品について
制作事例を応募いただいた皆様には参加特典を差し上げておりますが、受賞事例のみなさまには別途副賞の賞品をご用意しております。今年は以下のラインナップの中からお選びいただけるようにいたしました!
- BALMUDA The Toaster Pro
- BALMUDA The GreenFan
- DELL S2721QS 27インチ 4K ディスプレイ
- Apple HomePod mini x 2
- Apple Watch SE スマートウォッチ
- Amazon Echo Show 15 15インチスマートディスプレイ
- SONY WF-1000XM4 ワイヤレスノイズキャンセリングステレオヘッドセット
トロフィーについて
受賞者の皆さまにはトロフィーをお作りし、後日お送りしております。
この度はご参加いただき、誠にありがとうございました!
受賞事例をご応募していただいた4サイトのみならず、今回の企画にご応募いただいたすべてのサイト、また携わった制作者のみなさま、誠にありがとうございました。
その他の応募事例につきましても a-blog cms awards 2023 のページにてご覧いただけます。今年もすばらしい事例がたくさんありましたので、ぜひご覧ください。
それでは、今回のa-blog cms awards が今後のみなさまの発想のきっかけや、よりよい刺激になれたら幸いです。
次回も開催できるように進めて参りますので、応募した方も、応募されなかった方もぜひ奮ってご参加いただけたら幸いです。
OpenStreetMapのカスタムフィールドの作成
a-blog cmsの組み込みJSを使えば、下の図のようなOpenStreetMapのインターフェースを使って、緯度・経度・ズームの値をカスタムフィールドとして登録することができます。ここではその方法について、登録側(管理画面)と表示側に分けてご紹介します。
登録側(管理画面)の記述
OpenStreetMapのインターフェースのカスタムフィールドのサンプルHTMLになります。
<table class="entryFormTable acms-table-entry">
<tr class="js-open-street-map-editable">
<th>地図</th>
<td>
<div class="acms-form-group">
<input type="text" name="" value="" class="js-osm-search" size="40" />
<input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
</div>
<div class="acms-form-group">
<div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
</div>
<div class="acms-form-group">
緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-osm-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-osm-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-osm-zoom" />
</div>
<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />
</td>
</tr>
</table>記述の説明
まず、js-open-street-map-editableというクラスでOpenStreetMapのインターフェースを適応したいエリア全体に記述してください。
<tr class="js-open-street-map-editable">
次に以下のようにjs-open-street-map-pickerというクラスをdivなどの要素に記述することによってピン付きのマップを表示することができます。
<div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
緯度・経度・ズームの値を入力箇所は以下のように記述します。緯度のフィールドにはjs-osm-latを、経度の情報にはjs-osm-lng、ズーム値のフィールドにはjs-osm-zoomを記述してください。そうすることで、OpenStreetMapのピンの位置とフィールドの値を紐づけることができます。
緯度 <input type="text" name="mapLat" value="{mapLat}" size="9" class="js-osm-lat" />
経度 <input type="text" name="mapLng" value="{mapLng}" size="10" class="js-osm-lng" />
ズーム <input type="text" name="mapZoom" value="{mapZoom}" size="10" class="js-osm-zoom" />
<input type="hidden" name="field[]" value="mapLat" />
<input type="hidden" name="field[]" value="mapLng" />
<input type="hidden" name="field[]" value="mapZoom" />また、下のようなHTMLを記述すれば、スポットの位置を住所やスポット名で検索するための入力エリアを作ることもできますが、検索の精度はそれほどよくないので、検索結果の緯度経度が実際のものとずれている場合もあります。その場合は手動でピンを動かして緯度経度を設定してください。
<input type="text" name="" value="" class="js-osm-search" /> <input type="button" name="" value="検索" class="js-osm-search-btn acms-btn-admin" />
表側の記述
緯度 {mapLat}、経度 {mapLng}、ズーム {mapZoom} という変数の場合は以下のように記述します。エントリーのカスタムフィールドで作成した場合はEntry系モジュールのentry:loop内に記述してください。
<div class="js-open-street-map" data-lat="{mapLat}" data-lng="{mapLng}" data-zoom="{mapZoom}" style="width: 100%; height: 300px;"></div>