翠灯舎 | Suitosha Inc. 翠灯舎 Suitosha Inc.

News|新着情報

【 concrete5 Japan Advent Calendar 2016】page_listブロックとGoogle Maps APIでイベントマップを作るぞい!

2016.12.22

この記事は concrete5 Japan Advent Calendar 2016 の21日目の記事でございます。
昨日はfujigoco2255さんの「concrete5の導入事例をインフォグラフィックにしてみた」でしたね。
マーケターさん目線での非常にためになる記事でした。しびれる記事。読むべし!

 

はい、concrete5並びにそこに携わる皆さんには今年も大変お世話になりました。

飲みに行ったり、エバンジェリストになったり、飲みに行ったり、こないだ京都の皆でconcrete5の日を開催したり、飲みに行ったりとか色々なことがありました。

 

来年もたくさん飲みに行きましょう!

 

去年はconcrete5の思い出的な記事を書いたので今年はちょっとだけ技術tips的なことを。

 

「ページリストブロック + Google Maps APIをカスタマイズしてイベントマップを作る」をやります。

※concrete5中級者?向け記事かと
※ホントはパッケージからページタイプ・ページ属性を登録して〜とかやりたかったんですが、
いかんせん師走につきブロックのカスタマイズのところだけ駆け足で行きます!

 

 

【こんなことします】

 

イベント告知ページを作ってページ属性に緯度・経度を登録してイベント一覧ページにpage_listブロックを設置。イベントリストを表示。
ページリストを使って出力されたイベントリストの上部に登録したイベント開催場所が全部表示されたGoogle Mapを出力する。

 

 

【必要なもの】

 

・concrete5
・Google Maps APIのAPIキー(←取得しといてね)
・concrete5のブロックカスタマイズに関する少しの知識

 

※APIキーの取得手順についてはこちらがわかりやすいです。
『Google Maps の APIキー を簡単に取得する』
https://nendeb.com/276

 

 

まずは一覧表示ページを作ってページリストを設置しておきます。
「場所」は「ここのページ以下の階層」を指定して、このページの配下にイベント情報を投稿していきましょう。

 

 

続いてページ属性を用意します。
「テキスト」タイプで緯度・経度の登録用項目を用意します。

 

 

下準備として、先ほど登録した一覧表示ページ配下に適当な緯度・経度データを入れたページを追加しておきます。

 

 

続いてテンプレートのカスタマイズ準備です。

 

/concrete/blocks/page_list/controller.php
/application/blocks/page_list/controller.php へコピー。

 

viewテンプレートとして

 

/application/blocks/page_list/view.php
/application/blocks/page_list/templates/event_map/view.php へコピー

 

しておきましょう。

 

/application/blocks/page_list/controller.phpのカスタマイズを進めます。
まずはお作法通りファイル冒頭のnamespaceを書き換え。

 

 

このタイミングでカスタムテンプレートが選択できるようになるので
先ほど設置したブロックにカスタムテンプレートを設定しておきます。

 

 

続いてマップの表示に必要なjsライブラリを読み込ませます。
class Controller の末尾にこちらを追加。

 

マップ出力に必要なjQueryとunderscore.jsを読み込ませます。

さらにGoogle Maps API読み込みもここで設定。取得済みのAPIキーを入力します。

 

※underscore使わなくてもできますが、コアに登録されてるjsはconcrete5の処理を通すことで自由に呼び出して且つ重複を気にせず扱えますよーアピールで。
※ホントはAPIキーをブロックの登録時にconfigとかに保存する方が良いと思います。google mapブロックのcontrollerが参考になります。

 

ページリストが1ページ内に複数設置されることも想定して、
設置されたブロックごとにマップ関連の機能が利用できるような判定材料を入れます。

 

viewメソッドにこちらを追加。

 

 

これで生成される文字列をviewテンプレート内の処理でIDの一部として扱います。

続いてviewテンプレートのカスタマイズへ。

 

/application/blocks/page_list/templates/event_map/view.php
6行目に追加

マップの緯度経度を格納する配列を設定しておきます。

 

/application/blocks/page_list/templates/event_map/view.php
8行目に追加

マップ表示用の要素を設置します。
$unique_identifier込みでidを振って同じページに同ブロック同テンプレートが複数設置される場合にも対応します。(後述のjs処理も同様)

 

続いてforeachでページデータを出力する流れでマップ表示用のデータを作っていきます。

 

/application/blocks/page_list/templates/event_map/view.php
141行目に追加

ページタイトルとページURLはページリストの処理から拝借します。
ページ属性から緯度・経度も取得して配列にまとめます。

 

さ、準備は万端。マップの出力処理です。

 

/application/blocks/page_list/templates/event_map/view.php
末尾に追加

 

ポイントはこのあたり。

ページリストの処理に乗っかって作ったマップ表示用データをjsonに変換してます。

このjsonをunderscoreの_.eachで回してマップにピンを立てていきます。

※マップ出力についての説明は割愛します。今回は最低限の設定のみで。

 

完成品はこちら。

 

http://suitosha.co.jp/temporary/c5sample/events

 

登録したページの緯度経度に応じてマップにピンが追加されてます。
マーカーをクリックして詳細ページへのリンク付き吹き出しを出す処理も追加してます。

 

コードの全容は取り急ぎこちらからどうぞ!

 

page_listブロックをカスタマイズしてページ属性で登録された緯度・経度からGoogle Mapにピンを立てるサンプル

 

超駆け足でしたがブロックの処理にちょっと工夫するだけで便利な機能作れまっせ〜ということです!
concrete5はブロック側のphpからjsへの橋渡しをし易くする機能がそこかしこに用意されているので嬉しいです。

 

最近リリースされたconcrete5 version 8に搭載されているExpress Data Objectsでは
より細か〜いデータの管理がしやすくなるので、
サイトに登録されたデータをjsで面白おかしく加工したりとか考えるとわくわくしますね。

 

しますよね??

 

というわけで来年も公私ともにお世話になりますconcrete5!

 

明日22日は、全国数万人のconcrete5erお待ちかね、
今年数多の登壇で各地に笑いとか笑いとか感動とかを巻き起こした
カリスマデザイナーことDJ Kazu氏の出番です。

 

彗星のごとくconcrete5に現れたWebデザイナーの1年

 

Kazuくん、今年は美味しいお店たくさん教えてくれてありがとう。
個人的にconcrete5 T-shirtsのスウェット版欲しいので是非、来年企画にあげてください。

 

みなさま、師走を頑張って生き延びて!良いお年を〜!

【求人!】パート・アルバイトを募集します!

2016.10.27
専務の佐野です。

久しぶりにここへ姿を現します、専務の佐野です。

私がここに現れるということは中々の一大事ですよ・・・。

 

ただ今翠灯舎システムチーム(バンドマンのおじさん2名)の状況はまさに苛烈を極めておりまして、この状況を打破すべくスタッフを新規募集いたします。
(↑お仕事沢山いただいているということなので感謝の気持ちでいっぱいですよ!!そこんとこよろしくお願いします!)

 

下記、募集要項でございます。

 

=====

 

【勤務形態】
・パート
・アルバイト

 

【勤務場所】
弊社
〒604-8226 京都府京都市中京区西錦小路町263番地 ナウティカビルディング C102号室
https://goo.gl/maps/9d4yRTtBv932
※在宅不可です。

 

【勤務時間】
・月~金の間で週3日~、10:00~18:00で応相談

 

【給与】
・毎月末支払
・時給は面談により決定

 

【業務内容】
・HTML/CSSコーディング補佐、その他制作業の補佐

 

【応募資格】
・20代〜30代くらいの方(男女問いません)
・HTML5 + CSS3でのコーディング経験ある方
・Excel、Word、Powerpointなどoffice系ソフトの基本的な操作ができる方
・明るく朗らかで健康、基本的なコミュニケーションが取れる方

※PHP、JavaScript(jQuery)等のプログラミング出来る方、優遇!
※concrete5、WordPress、etc…各種CMSに興味のある方歓迎!
※希望される方は、能力により正社員登用もあります!
※お酒好きな方歓迎!
※福利厚生としてお昼はフリー玄米・フリー味噌汁です!

 

=====

 

我こそは!と思われる方は是非こちらのフォームからご連絡下さいませ。
WEB好き酒好きコード好きな貴兄貴女のご応募、心よりお待ちしております。

 

※お酒のことに触れすぎましたが、飲めない方でも勿論大歓迎です。

夏季休暇のお知らせ

2016.7.20

どうも、代表の田中です。
京都は祇園祭の終わりとほぼ同時に梅雨明けを迎えまして、すっかり夏です。夏になった瞬間からとにかくセミの鳴き声がすごい。
あとうなぎが食べたくて仕方ない毎日です。
 
さて今年もそろそろ夏休みのこと考えなくちゃなあというわけで、いそいそと弊社の夏季休暇のお知らせです。
 
休暇期間:2016年8月11日(木)〜17日(水)
 
休暇期間中は、お電話・メール等はつながらなくなりますので、みなさまには大変ご迷惑をおかけいたしますが、休暇明けのお返事をお待ちくださいませ。
本当に申し訳ありません。
 
それでは、みなさま夏バテにはお気をつけて、楽しい夏をお過ごしください。

第6期目がスタートしました!

2016.6.1

フリー玄米

本日から弊社は第6期に突入いたします。
たくさんの方々に支えられ、なんとかここまでたどり着きました。
誠にありがとうございました。

今期は来期にステップアップできるよう準備する期間としてやっていく所存です。
自社WEBサイトのリニューアルや、実績紹介の充実、新しい会社案内の作成など、なんで今までちゃんとやってなかったの?的なことをちゃんとやろうと思っておりますので、引き続きあたたかく見守っていただけると幸いです。

まだまだ未熟な私たちですがこれまで以上に頑張っていきますので、これからもどうぞよろしくお願い申し上げます。

代表取締役 田中郁后

※写真は、新しく導入したフリーライスからの進化型「フリー玄米」です。健康を意識して変えてみました。うまく炊くのが難しいです。

【UX中級編ワークショップ中編レポ】ペーパープロトタイピングを学びました

2016.4.7

株式会社おいかぜさんとの合同主催のUX勉強会、
UX中級編ワークショップ「構造化シナリオ法・プロトタイピングを活用したサービス開発」。
4/2(土)に、その第2回目が開催されました。

今回のテーマは「ペーパープロトタイピング」。
前回作ったシナリオやサービス概要を、どんどん目に見える形に変換していきます。

_DSC6877
会場はMTRL KYOTOさんの2階。
2階はこんな感じで和室になっているのです。
みんなでちゃぶ台を囲んでワークショップスタート!

_DSC6915

まずはストーリーボードなるものをどんどん作っていきます。
ユーザーの観点から、「どんなときにサービスに触れるのか(タッチポイント)」を見いだし、
タッチポイント1つ1つを絵コンテと簡単なテキストで表現していきます。

_DSC6904
とにかく描いて描いて描きまくる私たち。

このとき注意するのは「できるだけスマホやPCで検索しているところ」というような姿は描かないこと。
どんなふうに感じ、どんなことを考え、どんなふうに行動をとろうとしているのか、
「検索」と一言で片付けるのではなく、より本質に近づいた「ストーリー」に落とし込みます

私達のチームでは、この時点で「このサービスいけてんのかなあ」というもやもやがありました。

ユーザーが求めているものって結局何なのかな?
これ何回も使ってもらえるのかな?
本当に儲かるのかな?

こうしてストーリーボードにしてみると、どうも納得がいかない…

そこで浅野先生がおっしゃったのが、
「ユーザーは便利を求めているのではなく、成長を求めている」
という言葉。

その言葉がヒントになり、どんどんサービスが変容しシンプルになっていきました。
それにともない、ストーリーボードもどんどん変化。
それがとってもおもしろかったです。

_DSC6928
次は、ワイヤーフレームの作成。
こちらももちろん紙に描いていきます。

前編で作ったインタラクションシナリオをもとに、情報を整理し画面上に設計。

「なるほどー」と思ったのは、TOPにあれがあって、下層にこれがあって〜というように
構造をまず考えるのではなくて、ユーザーの行動からワイヤーフレームを描いていくということ。
だから、ストーリーボード1枚に対してワイヤーフレーム1枚が生まれます。

つまり、ストーリーからワイヤーフレームは生まれるのです。

普段は
「全体の構造(サイトマップ)がどうなっているか」
→「それをユーザーがどう使うか」
の順で考えていたので、これは目から鱗でした。

あと個人的に、いつもPC上でワイヤーフレームを作っているので、
手でワイヤーフレームを描くのがすごく難しかったです。
メンバーの方がさくさく描いてくださったので本当に助かった…。

_DSC6931
ワイヤーフレームが描けたら、今度はどんどん切る!

_DSC6939
切って切って切りまくり、
ワイヤーフレームを1枚ずつばらばらにします。

_DSC7007
切ったら並べます。これが遷移図
ストーリーボード(コト)が、ワイヤーフレーム遷移図(モノ)に変換されていきます。

_DSC7025
遷移図ができたら、ユーザーとして実際に使ってみます。
「あのボタンが足りない!」「この機能じゃま!」などとどんどんブラッシュアップしていきます。

_DSC7042
それができたら次はプロトタイピングツール「Prott」への移植。
描いたワイヤーフレームを写真に撮ってこのProttに取り込むと、
手書きのワイヤーフレームにリンクが張れたりクリックして動かしたりできるという
何とも画期的なサービス。これはすごい。

_DSC7083
PCに取り込むとこういう感じですね。
「何だこれむちゃくちゃ便利だなー」と思いました。

中編はここまで!
今回は「コト」を実際に「モノ」にしていく作業でした。

最後の後編は4/23(土)、テーマは「体験プロトタイピング」です。
作った「モノ」を体験してもらう、ということでしょうか??
何はともあれ、各チームからどんなものができあがるのがとても楽しみです。

ご参加された皆様、2日目もどうもありがとうございました。
あと1日、どうぞよろしくお願いいたします!

野田

Photo by  YUMI KURATA

Offer to Us

to Top Page

Contact

Contact