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 イベントページにて紹介しております。各事例のリンクからページをご覧ください。
結果発表
受賞事例の結果は以下となります。受賞事例に選ばれたサイトの関係者の皆様方、この度は誠におめでとうございます!
テクノロジー賞:あしかクッキー
制作:ましじめ株式会社
制作事例の詳細へ
![]()
あしかクッキー | a-blog cms awards 2023 | 応募事例 | a-blog cms
a-blog cms
1. ECテーマで頻繁な改修と気軽なカート導入を実現する通販サイトを制作 あしかクッキーは通販と委託で販売している焼き菓子店です。 元々自社のホームページはあったのですが、ホームペー...
デザイン賞:越後長野温泉 嵐渓荘
制作:ZANMAI株式会社
制作事例の詳細へ
![]()
越後長野温泉 嵐渓荘 | a-blog cms awards 2023 | 応募事例 | a-blog cms
a-blog cms
新潟県三条市の嵐渓荘様は、ミシュランガイド新潟版で2つ星+の宿泊施設として選ばれている格式あるお宿で、昭和初期の料亭旅館を移築した「緑風館」は国登録重要文化財に指定されています...
ユーザビリティ賞:株式会社銭辰堂
制作:フォルトゥナ
制作事例の詳細へ
![]()
株式会社銭辰堂 仏壇・仏具サイト | a-blog cms awards 2023 | 応募事例 | a-blog cms
a-blog cms
1. リニューアルの背景 株式会社銭辰堂様は仏壇・仏具の販売、葬祭ホールを運営している会社です。事業が2つあり、一度にリニューアルできないため、昨年は葬祭ホール、今年は仏壇・仏具の...
アップルップル賞:竹内建設
制作:有限会社リーグラフィ
制作事例の詳細へ
![]()
竹内建設 | a-blog cms awards 2023 | 応募事例 | a-blog cms
a-blog cms
1. 進化したa-blog cmsでパフォーマンス改善 すでに別のCMSを導入しサイトを運用していた竹内建設様。今回のリニューアルにともない、新たな選択肢としてa-blog cmsを採用いただきました。...
副賞の賞品について
制作事例を応募いただいた皆様には参加特典を差し上げておりますが、受賞事例のみなさまには別途副賞の賞品をご用意しております。今年は以下のラインナップの中からお選びいただけるようにいたしました!
- 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 2023 | 応募事例 | a-blog cms
a-blog cms
それでは、今回の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>