忘備録：香港旅行におけるインフラ周り

交通手段

オクトパスカード

Suica 的なやつ。タクシーを除くほとんどの交通機関で使える。フェリーにも使える。

セブンイレブンでも使えるので Suica 性が高い。

aoitrip.jp

地下鉄

便利。しかし東京と特に変わらないのであまり面白くない。

バス

2階立てのやつ。2階に乗ると結構楽しい。冷房がやたら寒い。

値段的にはバス ≒ 地下鉄で、バスのが少しゆっくりめ。でも楽しい。

路面電車（トラム）

楽しい交通手段その1。お尻が痛くなるけど楽しい。ゆっくりだけど安い。

フェリー

楽しい交通手段その2。ふらっと離島に行ける。マカオにも行けるっぽい。

www.skygate.co.jp

空港 ⇄ 本島間の移動

Airport Express（地下鉄のはえーやつ）を使うとめっちゃ損するので絶対バスを使おうな。

通信手段

プリペイド SIM

Amazon で売ってる。安くて便利。

http://amzn.asia/d/ddWGSok

カルチャー

飯

飲茶と粥と麺をやるといい。蓮香居はとてもおいしかった。

香港の伝統スタイル！ワゴン式飲茶 | Fish & Tips

お土産

ヌガーが安くてうまくてそこそこ数入ってて便利。空港で買った。

カルチャーショック

だいたいここに書いてある。

www.hongkongnavi.com

物価

あんま安いという感じはない。チェーン店が高めで個人でやってるお店は安いような気がした。

忘備録：LP 作る際の OGP 周り

Google Maps の埋め込みくらい地味に面倒な OGP 周りの設定である。
LP 作るときとかにサクサクやりたいので備忘録を書くのだった。

テンプレ

これを埋めるとよい。og:image は 1200 × 630 px で作る。URL は絶対パスで。

<!-- OGP -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:site_name" content="">

<meta property="fb:app_id" content="">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">

Facebook 云々

fb:app_id を取得する

https://hazimaru.jp/2054/
なぜ、こんなことに、、、
まぁ Google アナリティクスの Facebook シェアバージョンみたいな感じだと思うので特に設定しなくてもよい。

デバッガーにかける

https://developers.facebook.com/tools/debug/og/object/
デバッガー - 開発者向けFacebook

よくわからんがデバッガー増えた？

Twitter 云々

カードバリデーターにかける

https://cards-dev.twitter.com/validator

特に必須ではないがやると安心する。

忘備録：Google Maps をカスタマイズして Web サイトに埋め込みたい

Google Maps をカスタマイズして Web サイトに埋め込みたいだけなのによくわかんなかったから忘備録を作ります。忘備録なので雑です。

API キーの取得

API キーを取得する。この辺をわちゃわちゃやっていくと取れる。

nendeb.com

地図を表示する

ここのサンプルコードを改造していくのが個人的に早い。

https://developers.google.com/maps/documentation/javascript/tutorial

JSON でのカスタマイズ

JSON 形式でマップのスタイリングができる。initMap() のとこに突っ込めばいいっぽい。結局これが面倒なんだけど自分なりの定石を見つけてちゃんとまとめたいね…

取り急ぎ公式による概論とリファレンス読むのが早そう。

Start Styling your Map  |  Maps JavaScript API  |  Google Developers

Style Reference  |  Maps JavaScript API  |  Google Developers

ちなみに Styling Wisard は特に使いこなせていない。これもろもろの粒度めっちゃ荒くない？と思いつつ僕が使い方わかってないだけな気もしてよくわからん。

Styling Wizard: Google Maps APIs

あとは Google Maps のカスタマイズ集みたいなやつも見つけた。これ！っていうのは見つかりにくそうだけどいい感じのやつをベースに少し色合いをいじるとか、そういうのが早いかも。

https://snazzymaps.com/

マーカーを立てる

はい

Markers  |  Maps JavaScript API  |  Google Developers

Simple icons のとこ見るとマーカーの画像を変えるやつが書いてある。Complex icons のとこにマーカーのサイズとか位置とか変えるやつが書いてある。マーカーの画像は SVG だと微妙っぽい。

あとがき

そういや API キーなしで埋め込まれた地図は表示されなくなるらしい、こえー。

うまかった酒 2017

うまかった酒を忘れたく…ない‼︎ 

うまかった酒

ロシュフォール 10

トラピスト・ビール。会のとき特にお気に入りだった。

　　

セント・ベルナルデュス・アブト

これもトラピスト？特に味の記憶がないがアマゾンのほしい物リストに入ってたしうまかったはず。

バリスタ・チョコレート・クォード

イベントで飲んだベルギービール。チョコレートやエキスを使わずにチョコの風味が出しているのが特徴で、飲んでみて結構ビックリした。それを差し引いてもとてもおいしい。

　　

シメイ・グランドレザーブ・エイジドオーク

シメイブルーを樽で熟成させたやつ。シメイブルーを樽で熟成させるのズルくない？マグナムと瓶が似てるの紛らわしいぞ。

ドゥシャス・デ・ブルゴーニュ

レッドビールを自分で頼むことあんまないはずだけどラベル覚えてたしうまかったんだと思う。

エヒテ・クリーケンビール

最近飲んだフルーツビール。割と酸味がしっかりしているが好きな味だった。

　  

グーデン・カルロス クリスマス

研究室のクリスマス会用に買ったんだけど気づいたらみなさんに飲まれており一口しか飲めなかったビール。スパイシーでフルーティー。来年度またチャレンジしたいビール。

眠り姫 ア・ラ・シャンパーニュ

梅酒その1。やや甘めで飲みやすい。

木内梅酒

常陸野ネストビールを蒸留したスピリッツを使用しちゃったよくわからない梅酒。よくわからないが安くてうまい。だいたい冷蔵庫に忍ばせておいてちびちび飲んでる。

　　

テテ ヴェネチア

ハーブ梅酒というジャンルらしい。桃とかぶどうの果汁が結構入っている。女子受けがよさそう。

鶴梅 ゆず

年末に実家で買ったら家族にバカ受けしてしまい親戚が集まる日まで持たなかったゆず酒。困ったらこれを買えばいいランキング1位な気がする。ゆずが嫌いでない限り喜ばれると思われます。

　

 

今年の抱負

味を表現する語彙をもうちょい増やしたい。

ハンバーガーボタンに頼らないモバイル UI 考

ハンバーガーボタン 

ハンバーガーボタンについて気持ちがあります。

いい話：「劣った醜い撲滅すべきものである」

なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？ - GIGAZINE https://t.co/9B6zrj3CHw

— ㅤ (@yamatoiizuka) 2016年6月16日

ちょうど Web サイトを好き勝手作れる機会があったので，ハンバーガーボタンを使わない実験的なモバイル UI を組んでみた。

作ったもの

TA をやった授業の引き継ぎ資料的なものを作った。一応内部資料的な扱いになりそうなので URL は載せられません，あと一部名前を隠したり表記を変えたりしています。

まず PC 向けはこんな感じ。Arduino や電子工作がらみの資料なのでモバイルファースト的な発想はなく，ナビゲーションは2階層です。まぁありがちな感じ。

これをベースにモバイル用に落とし込んだのがこちら。さっきと同じ操作をするとこのようになる。ここでハンバーガーに逃げなかったぞというのが主題です。

 

いいところ

ハンバーガーと比較して，

• 現在地が常にわかる
• 大体どんなメニュー画面なのか事前に予想がつく（多分）
• メニュー開いてるときもメインコンテンツがあまり隠れない

あたりですかね。

ダメなところ

• 階層性の明示がイマイチ
• 実装をモバイルと PC で分ける必要があって面倒

「階層性の明示」はアニメーションで多少解決できるかなぁと思った。こんな感じとか。

ただこれやろうとすると書き直す部分が多くなるので今回はやめた（上の動画は AE でそれっぽくしただけです）。まぁ色々と方法はある気がする。

まとめ

自分としては操作性も含めてあんまり悪くない気がした。こういうナビゲーションはあまり見ないし見栄えがどうなのかとかはあまり判断ができない。先行事例があると泣く（少なくとも近いのはあると思う）けど参考にしたいので何かあったら教えてほしい。全体的にフィードバックが欲しい。

あと今回はナビゲーションのタッチ操作まわりで Swiper というライブラリを使ったのだけどめちゃくちゃ高機能な良いライブラリだった。

Swiper - Most Modern Mobile Touch Slider

コリス系のメディアでもあんまり見かけない（か紹介が異様にさっぱりとしている）けどあまりにも機能が多いので公式のリファレンス見た方が早いよねということなんだと思う。

4月だなぁ。

3/23 - 27 那智の滝，伊勢神宮，後楽園 他

写真日記です。伊勢，熊野，香川，岡山，京都あたりをぷらぷらしてきた。

那智の滝はこの位置から見たときが一番震えた。そりゃあ昔の人も感極まって神社建てちゃうだろとおもった。

熊野古道。こいつF値の扱いが全くわかってないなという感じなので適宜本を読みたい。

ウオー

高松の栗林公園の一部

写真はないけど伊勢神宮と後楽園がとてもよかった。 

掘立柱の建築を見るのは多分伊勢神宮が初めてだったのだけど，あんな絶対即座に腐るだろみたいな建築様式なのに全く風化していないという清浄さが，あの空間を神域たらしめてるのかなあと考えたりした。前の遷宮からまだ数年だし綺麗な方なのかな。そういえば授業で遷宮時に引き抜かれた古い方の柱の写真を見せてもらったことがあるのだけど，やっぱり根元はボロボロになっていた。

内宮をまわった後ふらふら駅まで歩いてたら別宮の月讀宮があったので，そこもお参りしてきた。祭神がイザナギイザナミツクヨミとなんか最強な感じだったので剣祓を全クリしそうになった。我慢した。

後楽園はあんだけ広いのに水の流れが停滞しているところがほとんどなくて，すごい設計だなと感心していた。園内の曲水の流れについては記事（後楽園導水）がある。もうちょい詳しいのないかな。下流の方に島と滝のある池があったのだけど，これ島の左右に水を流すための配置だよなあ工夫だなあと勝手に納得していた。下の写真のやつです。写真あるやんけ。でも iPhone で撮ったからノーカンです。それはそれとして Lightroom for iOS マジで便利ですよ。

3/5 偕楽園

写真をどこにアップするか迷いに迷った末ブログに上げていくことにした。下手でもバシバシ撮って上げていくことが大事だろうということで日記も兼ねてやっていきたい。

最近 Lightroom で現像することを覚えつつあるが意外と体力がいる。あと難しい。今回は疲れたので3枚で終了してしまった。

偕楽園はよかった。この日は梅酒まつりというのがやっていて，梅酒を売る人がたくさんいたり150種類以上の梅酒の飲み比べができるイベントがあったりした。飲み比べの方は40分待ちと言われて断念してしまったけれど機会があったらリベンジしたい。

偕楽園っぽさが全然なく，なぜこうなってしまうのか。。