Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Category Archives: ウェブ制作

GoogleマップがAPI必須になってACFをごにょるの巻

  • 投稿日:2016/08/29

クッソ久しぶりに開発話です。
先日とある法人様のサイト制作を担当したのですが、その時の話を備忘録も兼ねて投稿です。

 

 

今回もWordPressを使ったサイト構築ということで、WordPressサイト制作の強い味方であるプラグイン「Advanced Custom Fields(以下ACF)」を使っておりました。投稿タイプ毎に好きな入力項目を設定できるので、対クライアント様用に分かりやすい入力フォームを作れます。とっても便利。甘えちゃう。ちなみに私が使っているのはデベロッパ向けのPRO版です。

ACF – Advanced Custom Fields

Advanced Custom Fieldsの使い方 / KoToRi Blog

 

このACFの中には簡単にGoogle Mapsを設定できる入力項目を作る機能があります。しかし最近はGoogle Mapsを使う様な案件が無かったこともあって、恥ずかしながらこの機能について半分くらい忘れておりました。今回の法人様の案件で久しぶりにGoogle Mapsを使う場面があったので、設定を進めていたら…。

 

なんすかこれ

gmaperror

 

これは何が起きたのかな…?と思って調べたら、そうでしたそうでした。ちょっと前にこの話してました。今年の6月22日以降に新たに制作されたサイトでGoogle Mapsを利用する場合は、APIキーが必須になったのでした。

Google Mapsを利用する場合はAPIキーが必須になったもようです / ねんでぶろぐ

 

Google Maps API v2からv3に変わるときに不要となったAPIキーが復活し、v3でもキーの取得が必要になりました。APIキーの取得自体は簡単で「Google Maps APIs for Web」にアクセスしてウンタラカンタラするともらえます。

Google Maps の APIキー を簡単に取得する / ねんでぶろぐ

 

 

使用する時は従来のAPI読み込み用のタグに「?key=XXXXXX」という風にして取得したキーをコピペするだけです(XXXXXXの部分にキーを入れます。)。

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script>

もし「?sensor=false」とかオプションの値を渡している場合は、「&」を使って繋げてあげればOKです。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=XXXXXX"></script>

 

 

 

さて、これでユーザにお見せする方のGoogleマップは正常に表示されるようになりました。

 

が!

 

WordPressの管理画面で、ACFで設定したGoogle Maps設定項目を見ると…

 

HUUuuuuuuuu!!!!

gmapaerror_admin

 

そうですよな。そりゃそうですよな。だってACFにGoogle Maps APIキーを設定するようなとこないもん…。でもプラグインのコアファイルいじって直すのめんどくせーっす。プラグインのアプデの度に書き換わったら超めんどいっす。

 

でもGoogle Mapsの仕様変更から約2ヶ月位経ってる訳ですし、ACF開発元でも何かあるはず!と思って見たら、ちゃんと書いてました。

Google Map / ACF

 

functions.phpに下記のコードを追加して、取得したAPIキーを突っ込みます。

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

PRO版の場合はこっち。

function my_acf_init() {
  acf_update_setting('google_api_key', 'XXXXXX');
}
add_action('acf/init', 'my_acf_init');

 

いずれも「XXXXXX」の箇所に取得したAPIキーをコピペします。

 

 

これでちゃんと表示できる様になりました。クライアント様も安心です。

googlemap_admin

 

 

 

 

 

 


お知らせ・セッションで登壇させて頂くことになりました

  • 投稿日:2016/05/18

既にTwitterなどでは告知させて頂いてるのですが、縁あって人前で喋らせて頂くことになりました。バンドのライブより緊張する。

 

参加させて頂くのはこちら

CMU#40 ✕ HTML5minutes#11

CreatorsMeetUp(略してCMU)とHTML5minutesのコラボイベントです。

 

私はちょっと前からCreatorsMeetUpの方に聴く側として参加させて頂いていたのですが、主催者のコジコジこと小島さんと話していて、せっかくなら私の好きな服の話で構わないので登壇してみては?という流れになり、今回は話す側としてお邪魔させて頂くことになりました。

 

 

今回の私のセッションのテーマは
「フロントエンドエンジニアにオススメの服装術」

cmu_style01

ということで、普段デスクに向かっている事が多いであろうフロントエンジニアさんをはじめとしたクリエイターさんに対して、こんな風に服装というものを考えてみたらポジティブな未来が見えるんじゃない?って感じの事を話させて頂こうと思っています。

セッション時間は15分ですので、何となくボーッと流し聞きするにはちょうどいい時間じゃないかと思います。

 

 

 

ちなみにCreatorsMeetUpは良い意味でとってもユルくて、例えデザイナー・エンジニアといった職種の方でなくとも興味さえあれば、聴く側はもちろんのこと、話す側も誰でもウェルカムというとってもオープンで勉強にもなる刺激的なイベントです。何年か前から始まって今回で40回を迎えるそうですので、それだけ沢山の人に継続して関心を持たれている魅力あるイベントなんでしょうね。

 

主催者のコジコジも実は私と同い年で小田急沿いっていうね!

 

 

定員は50名で既に参加者が続々と決まってきている様ですので、もし少しでも興味がわいた方は是非遊びにくる感覚でいらして下さい。参加費はワンコインですのでお財布にも優しい(笑)

普段デザイナーやエンジニアと接点すら無いYO!という人にとっても、他人の考えを覗き見るような楽しさがあると思います。特に私のセッションは非デザイナー・非エンジニアでも共通して聞ける内容だと思います!

参加方法ですが、以下リンクのページから参加登録を行って当日会場にて参加費用500円を支払う流れになります。

http://cmu.connpass.com/event/32109/

connpassはFacebookやTwitter・GitHubのアカウントで登録できます。

 

 

会場

株式会社メンバーズ

東京都中央区晴海1-8-10
(晴海アイランド トリトンスクエアオフィスタワーX 37階)

 

 

よろちくび!

 

 

 


東京五輪エンブレムとデザインのはなし

  • 投稿日:2016/04/26

最近は服ネタがずっと続いてましたが、ちょいとデザイナー的なお話。

 

「デザイン」というと、何を思い浮かべますでしょうか。

一般的には見た目の美術的な部分をイメージすることが多いと思います。この洋服のデザイン可愛いよね!とか、このサイトのデザインかっこいいね!とか。もちろんそれは全然間違っていなくて、視覚的な美観というのはデザインが持つ大きな役割の一つです。

それに加えてデザインには「設計」や「計画」の意味合いが含まれてくることがあります。というのも、デザインには「何かの目的を達成する」という役割があって、見た目を美しくしたりカッコよくしたりするのは、その役割を全うする上での一つの結果に過ぎなかったりします。

 

 

 

以前ちょっと話題になった「新宿エルタワー」の案内図デザイン。

エルタワー
[出展] 新宿案内図改修案 / no rule, no theme, but bLog. by 渡邊明生

このデザインはピクトグラムを使用していてパッと見はすごく「カッコイイ」んですが、トイレに行こうと思った時にどの矢印サインに従えば良いのか分かりにくいんですね。

 

そしてこちらは居酒屋さんのメニュー札。

メニュー札
[出展] お店紹介 / 立呑み処 おとくや

失礼ながら「カッコイイ」見た目ではないんですが、品名は黒・価格は赤の文字で同じレイアウトに統一して並べることで、すぐに品名・価格情報が分かるようになっています。更にいうと品目ごとに一つの札にすることで、その商品が終売になった場合に簡単に取り外したり他商品に入れ替えることが出来るようになっています。これは立派にデザインとして成立しているんですね。

 

このように、見た目の優美さとは別の部分でデザインが果たす役割があるということが分かるかと思います。

 

 

 

 

その上で、最近なにかと話題の東京オリンピックのエンブレム問題。
佐野氏のエンブレムは盗用疑惑が持ち上がったことで不採用となり、新しく野老(ところ)氏のエンブレムデザインが選出されました。私は野老氏のデザインを含めた最終候補4案だけ拝見しました。デザイナー的に「これかなー」と思ったのは、選出された野老氏のものでした。私の周りのプロデザイナーさんの多くも野老氏のものを支持しておりました。

tokyo2020
[出展] 東京五輪エンブレム、最終候補4作品が決定 / AdverTimes(アドタイ)

 

しかしネット上の反応を見ていると、どうも「野老氏の案だけは無い」という意見の方がかなりの数いらっしゃる様です。その方たちの意見の中には「プロデザイナーが見ると野老氏のものが良いっていうのが分からない」という旨の意見が多く散見されました。中にはデザイン業界の陰謀だ!とかワンダーな意見もありましたが…。
この辺にプロデザイナーとそうでない人と認識の溝があると思います。

 

 

 

前述のとおり、デザインには「役割」の部分が存在します。オリンピックのエンブレムの場合、大会自体の象徴的シンボルであると同時に、様々な場面での運用が想定されます。
例えば関係者のIDカードや名刺などの印刷物、看板やフラッグ、会場案内の記号などなど…。場合によっては陸上競技場のトラックだとかサッカーボール等にも微妙に改変するなどして流用されるかも知れません。なんせ象徴的シンボルですから…。

 

そうした様々な場面での運用を考えた時に、最終候補4案+佐野氏案を見たらどうでしょうか。見た目の優美さというのはどうしても個々人の主観が入ってきますが、設計・運用という部分でいくと自ずと絞られてくると思います。

 

 

例えば藤井智恵氏のD案は朝顔や菊を想起させる可愛らしさがあると思いますが、モノクロで運用した場合に成立するのか、小さな印刷物で細い線が維持できるのかどうか…という観点でいくと懸念事項が多いように思われます。B案は拡縮に耐えうるデザインではありますが、色彩を取り除いた場合・色覚異常を持つ方が見た時に伝わりやすいかというと難しいと思います。

tokyo2020
個人的に野老氏のA案がなければ後藤崇亜貴氏のC案だったのですが、一色で構成されたA案と比較すると運用しやすさでは少々劣るかなとも思います。佐野氏の案は個人的にはC案と同じくらいかなーという印象。めっちゃ上から目線ですいません…。

 

 

 

そういった観点で見ると、キングコング西野氏の発表したデザインはデザイナーの端くれ的には「無いなあ」と思わざるを得ません。流石に線が細すぎますよね。彼の作品はアートとしては評価されることがあるかもしれませんが、デザインとは別物になります。

s-TOKYO2020-EMBLEM-large300
[出展] キンコン西野、新エンブレム提案「僕ならこうする」→「天才」だと話題に / HUFF POST TOKYO2020

 

 

 

付け加えて、上記でチラッとふれた「色覚異常」ですが、Adobe Photoshopをお持ちの方であれば「表示」メニューの中から「校正設定」で「P型(1型)色覚」「D型(2型)色覚」というシミュレート機能を使うことができます。お持ちの方は実際にやってみると分かりますが、B案・C案は赤と茶の部分の差異がほとんどなくなってしまいます。キングコング西野氏の案に至っては左右の蝶の色の差がほとんど判別できなくなります。
(他の方の制作物を勝手に改変しちゃうとアカンのでこのブログ上には掲載しません)

 

こういった、障害者や高齢者など様々な人に対応するデザインのことを「ユニバーサルデザイン」と呼ぶのですが、オリンピックは沢山の人が参加する祭典ですから当然この部分に配慮しなければいけません。色を使うな・単色にすべきとは言いませんが、ユニバーサルデザインとして成立できているかどうかというのはオリンピックエンブレムを決める上で大事な審査基準になるのではないでしょうか。

 

 

 

なんだか消去法的なことばっかり書いてますが、A案は日本の伝統柄でありつつ海外でもチェック柄として通用する市松模様を採用しており、かつ視認性・運用性も高いと思います。まあ…祭典のシンボルにしては若干地味な印象はありますけどね…(笑)

Web
[出展] 東京2020大会エンブレム / 東京オリンピック・パラリンピック競技大会組織委員会

 

 

 

私は選考委員でも関係者の親戚でも何でもない外野デザイナーですので、選考過程において巷で騒がれている様な不透明性があったかどうかについては全くわかりません。ただ一人のデザイナーとしてA〜D案・佐野案(ついでにキンコン西野案)をフラットに見た時に、野老氏のA案が選ばれたのはそれほど不自然には思いませんし、むしろA案だろうという考えです。

 

もし「A案に納得いかないんだけど、なんで?」という考えをお持ちの方が、上記の文章を読んで少しでも「一理あるかも」と思っていただけたら、世間のデザイナー達は救われます(笑)これだけ説明しても無茶苦茶な要求をするクライアントさn(自粛

 

 

 

 

まあデザインの好き嫌いはさておき。いい加減前に進まないと税金浪費しまくりっす。
2020年に何かいい仕事できる様になってたいなー!オリンピックのエンブレム制作以外で!