翠灯舎 | 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.12.19

どうも、代表の田中です。
あと2週間で今年が終わりますね…。早い早すぎる!
年が明けるとまた年を取るので心底震えてますが、その前に弊社の年末年始の休暇のお知らせです。
 
休暇期間:2016年12月29日(木)〜2017年1月4日(水)
 
休暇期間中は、お電話・メール等はつながらなくなりますので、みなさまには大変ご迷惑をおかけいたしますが、休暇明けの返信をお待ちくださいませ。
本当に申し訳ありません。
 
それではみなさま風邪などお召しにならぬよう気をつけて、楽しい年末年始をお過ごしください。

【レポート】777塾@京都_season1_2

2016.11.1

777塾

 

10/27(木)に開催された777企画塾@京都 Season1「リデザインの思考法」の第2回目。
1週間以上あいてしまいましたが、今回のレポートは第1回目のレポートをしていた下川が熱を出して休んでしまったので、社長の田中がお送りしております。

この日はリデザインについてと、「なんだっけカルテ」についての実例を上げての講義でした。

「新しい」とはどういうことなのか?
ただ単に新しくすること、変えることを目的にしたリデザインに意味はあるのか?

うちの会社でもよく「〇〇を新しくしたい」というご依頼をいただくのですが、まず最初の課題として上記のことはよく話し合います。お客様はやはり「変える!新しくしたい!」ということが大前提なわけですし、ゴールがそこに設定されています。でも、そのリニューアルってほんとに必要?どんな風に何が変われば本当に新しくなるの?ということが問題になります。
そういった事をとてもわかりやすい言葉で解決していく事例も踏まえての講義でした。
すぐに業務に活かせるだけにかなり前のめりで聞く私。

30050547784_334ce22939_z

その後は、この3回を通した課題でもある「なんだっけカルテ」のさらに詳しい説明。
福田先生のおにぎりについての「なんだっけカルテ」を見せていただきました。
この「なんだっけカルテ」は、デザインをたくさんの人に届けるためのあと一押し(意味の設計)を作り出すカルテなのだということがよくわかります。

なぜそのデザインが正しいのか?
意味を問うて答えを出す。言語化する。

それが大切だとわかっていても中々うまく組み立てられないものなんですが(特に私はデザイナー上がりなのでつい感覚的に物事を動かしがちです)、なんだっけカルテを使うとできちゃうんですよね。ほんとにすごい。

30565331582_b6250f2e48_z

と言うわけで、昨日(11/6)が課題の提出日でした。なんとかどうにか提出したけど、どうなるかなー。一人じゃやっぱりおもしろいアイデアってなかなか出なくて難しかったです。
でも何の責任もなく、実現可能かどうかもそんなに気にせず、浮かんだアイデアをとにかく好き勝手に話し続けるという作業がめちゃめちゃ好きなのでとにかく楽しかった。

さて、今週木曜日(11/10)がいよいよ最後の講義です!頑張るぞー。

text by 田中郁后

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

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好き酒好きコード好きな貴兄貴女のご応募、心よりお待ちしております。

 

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

【レポート】777塾@京都_season1_1

2016.10.26

10/20(木)にMTRL KYOTOさんでおこなわれた777企画塾@京都 Season1「リデザインの思考法」の第1回目を受けにいってまいりました。

以前弊社野田がレポを書いておりました「出張777塾 /「なんクリ」の著者が届ける企画仕事の『考え方の考え方』」の実践講座編です。

 

まずは講師である株式会社777interactive代表取締役の福田敏也さんの自己紹介からはじまりました。

CMプランナーとして活躍されたのち博報堂電脳体の設立とともにデジタルクリエイティブの世界へはいられ、以降インタラクティブメディアにとどまらずいろんな方面でご活躍されています。

 

福田さんはご自身を、
「美大を出ていないのにデザインを仕事にしていて、美大のデザインの教授にもなり、デザイナーでもないのにたくさんの国際デザイン賞を受賞し、国際賞から審査を依頼される変種」
だとおっしゃっておられました。専門教育を受けずにその分野の権威になるってすごいことだなと思います。

さて、今回の企画塾のテーマはリデザインの思考法ということで福田さんが12年にわたってまとめていかれたリデザインのためのメソッド「○○ってなんだっけカルテ」を学びます。

この「○○ってなんだっけカルテ」というのは、福田さんがこれまでの経験から生み出された「脳みそマネージメント(考えるクセ付け)」をするための重要な手順(メソッド)です。

 

この日の第1回は、そもそもデザインとは何か?というお話から、切手のリデザインをサンプルとして「○○ってなんだっけカルテ」の概要まで。

 

と、詳しい説明の前にいきなりこんな課題が!

02_10203016

 

20分ほど経ったところで「じゃあだれか発表したいひと」と言う流れに…。

 

会場に早く着き、置いてあったペーパーで予習をしていたにもかかわらず「ホチキス」「クレカ」というありきたりな答えしか用意できず、何十年かぶりに「下を向きすぎず前も向きすぎない当てられないためのメソッド」を実践していると、一緒に来ていた弊社社長が当てられ思いつきのリデザインをあげていました。本人は楽しそうに発表してたけど、ちょっとずれてる気が…。

 

その後メソッドの詳しい説明があったのですが、まず何も知らない状態で考えて、その後詳しく知るというのもサボり人間の「脳みそマネージメント」に良いということでした(よかったですねえ社長!)。

 

詳しい説明のあと、改めて手順を追ってみていくうちに、自分ではしっかり考えていると思っていても、全然想定できていなかったことなどに気づいたり自分の考え方のクセが見えてきたりして、考え方が深まっていっていることを実感しました。

 

メソッドに沿って考えることももちろんですが、メソッドを基に枝葉末節を自分に合わせて付け足ししていく作業も「脳みそマネージメント」につながるのだと思います。漠然と考えているのでは多分同じところをグルグル回転しているだけで、こんなに要領よく考えが深まることもないんでしょうね。

 

僕自身ほんとにもうとにかく考えることだけでなく何でもサボるし、論理的組み立てにものすごく不安があるので、「こりゃ相当いい学びになる!」とわくわくしています。あと2回がんばります!

 

 

下川

 

 

 

03_10203016

オシャレ感漂い緊張し、かなり脳みそを使い緊張する講座の様子です。

Offer to Us

to Top Page

Contact

Contact