金沢、京都、東京大回りの旅 2018(その3: 金沢のごはん編)

金沢のごはん屋さんとカフェを紹介します。

まいもん寿司

駅構内にあるお寿司屋さん(回転寿司ではない)2000円程度で10貫だったかな?お目当の寒ブリが1貫入っていてものすごく美味しかったです。イワシ食べたかったけど今日は仕入れないと言われて残念。

満足度: ⭐⭐⭐⭐

inuwashi

First cabin の1F にある日本酒のお店。老夫婦がやっていて店内が静かでお酒が気持ちよく飲める雰囲気でした。なぜかちょいちょい値引きをしてくれた*1のですが、それがなくてもとても楽しかったです。

最後にうどんを頼んだら、「先ほど頼んだ鍋の残りにうどんと卵いれて食べますか？」と言われてそれにしたら何故か無料だった。

満足度: ⭐⭐⭐⭐⭐

川端鮮魚店

やたら大きい岩牡蠣

この旅のメインコンテンツ寒ブリ

片町にある魚メインのお店。去年金沢に訪れた時に「予約がいっぱい」と言われてお店に入れなかったので17:00ごろに行きました。開店直後のため予約なしでも大丈夫でした。

ここで目的の寒ブリをいただきました。なんですがまいもん寿司で食べた寒ブリのほうが美味しかったような？まあ食べ方違うからかな？

この度で一番の目的地はこのお店だったのですが、実際に食べてみると期待値に届かなかったです。ちょっと自分の中でハードルあげすぎたのかも。

満足度: ⭐⭐⭐

Cafe&Bar 15 金沢百万石通

First cabin の2Fにある BAR。値段も安いですし、眠りにつくまでの時間をつぶすのにバーテンダーとおしゃべりしながらジントニックをすすっておりました。

満足度: ⭐⭐⭐⭐

Blankers Street Cafe

ここは First Cabin から少し歩いたスクエアホテル金沢の1Fにあるカフェです。電源の使える席が結構用意されていて、営業時間も7:00からだったので使い勝手がとても良かったです。

早朝ブッフェ。加賀野菜が美味しかった。

滞在中ほとんどの作業をここでしていたので最終日にスタッフに「3日連続で来てくれてありがとうございます」と言われてしまいました。そういえば毎日いたなあ。ほんと仕事しやすい場所だった。

満足度: ⭐⭐⭐⭐⭐

KISSA & Co.

すごいオシャレで広い店内

KUMU っていうホテルの1Fにあるカフェです。First Cabin のお隣にあります。 ここも仕事がしやすかったです。営業時間が 11:00 からだったので Blankers Street Cafe のほうが便利だったかな。

満足度: ⭐⭐⭐⭐

*1:メニューが間違えていたとか、昆布締めが2/3しか残っていなかったから半額にしますとか

金沢、京都、東京大回りの旅 2018(その2: 京都編)

金沢で美味しい寒ブリを食べた後は京都へ向かいました。

THE MILLENNIALS KYOTO と Andwork

www.themillennials.jp

京都での宿泊施設は THE MILLENNIALS KYOTO にしました。こちらは共有部分がコワーキングスペースとなっています(宿泊者は無料で利用できる)

というわけで京都で仕事をする拠点は基本的には Andwork を利用することになります。バスで30分程度ですので京都についたらホテルに移動して、チェックインの時間まで作業することができます*1

ちなみに就寝場所はこんな感じです。

timer で指定した時間になるとベッドが起き上がります

共有スペースで熱心に働く外国人たち

その共有スペースですが夜遅くまで働いている外国人が大勢いて、中には1ヶ月のロングステイするツワモノがいらっしゃるとか。どうやらこのホテルが remote year というスタートアップと提携しているようです。

prtimes.jp

もしかしたらここで仕事してたら外国のお仕事がゲットできるんじゃないか?という下心が働いたので試しに彼らに話しかけたのですが私の英語が皆無のため撃沈しました*2

ちなみに共有スペースにはオシャレな電化製品が配備されています。

むしろここでは私が外国人

宿泊客のほとんどが英語でやりとりしていて、たぶん日本人は私だけだったんじゃないかと思います。スタッフは日本語が通じます。

そんな訳で国内のカプセルホテルに宿泊しているのに日本人が私だけ？みたいな不思議な体験でした。よくよく考えれば東京のコンビニでも働いているのは大体外国人。いつまでも日本語で生きていけると思っているのは勘違いかもしれない、という危機感を少し覚えました。

今後は英語がメインとなる地域が国内各所で出現するんだろうな、と思いました。*3

あとそれから

京都は何故か立ち飲み屋が多く、そのせいかリーズナブルにお酒とご飯が楽しめます。ごはんの記事は別記事にまとめます。

THE MILLENNIALS KYOTO は私のようなリモートワーカーにはマッチしている宿泊所でした。ですがコインランドリーが一回500円だったりナイトウェアが有料だったりします。私が宿泊したのは平日で特にハイシーズンでもなかったので一泊大体3000円ぐらい。あと京都特有の宿泊税が1日200円かかります。

それから THE MILLENNIALS KYOTO は人によって好き嫌いが別れる気がします。たぶんおじさん世代*4とかはこの雰囲気苦手なんじゃないかな。とはいえこの未来の日本がちょっと垣間見える感じは一度体験したほうが面白いと思います。

*1:宿泊客はチェックイン前でもコワーキングスペースを無料で使える

*2:リベンジしたいと思います。

*3:北海道のニセコなどがそうなっているらしい

*4:まあ私もそうなんでしょうけど

金沢、京都、東京大回りの旅 2018(その1: 金沢編)

というわけで去年に引き続き東京と関西を新幹線で移動すると時に北陸に寄り道する大回り乗車を利用して金沢へ2泊、京都へ2泊、大阪へ1泊して参りました。

寒ブリ美味しかったです

旅の目的

• 金沢で寒ブリが食べたかった
• 京都のThe millennials に宿泊してみたかった
• 大阪でたこ焼きが食べたかった

在宅型のエンジニアの特権を生かしてふらっと行ってまいりました。

大回り乗車について

東京、金沢を新幹線で往復すると28,240円(指定席の場合)なのですが、大回り乗車を利用すると29,200円(京都と山科間の往復料金を含まない)です。ほんの少しの差額でついでに関西へ旅行することができます。

詳しくは去年私が書いたブログをごらんください。 http://okamuuu.hatenablog.com/entry/2017/11/25/182511

旅行の日程

12/2(日)から12/7(金)まで5泊6日

• 12/2(日) 新幹線で東京から金沢へ移動
• 12/4(火) サンダーバードを使って金沢から京都へ移動(京都から山科間を精算)
• 12/6(木) 阪急京都線で京都河原町から大阪梅田へ移動
• 12/7(金) 新幹線新大阪から品川駅へ移動(新大阪から山科間を精算)

日程	宿泊先
12/2(日)	金沢 First cabin
12/3(月)	金沢 First cabin
12/4(火)	京都 The millennials
12/5(水)	京都 The millennials
12/6(木)	大阪 First cabin

とうわけで金沢

さて、働きながら旅をする上で重要になるのは以下の2点

• どの施設に宿泊するのか
• その施設の近辺に作業しやすいカフェかこワーキングスペースがあるか？

前回は東茶屋に近い HATCHi 金沢-THE SHARE HOTELS に宿泊したのですが、今回は近江町市場と片町の中間地点にある First cabin に宿泊しました。

この一帯はおしゃれなホテルがいっぱい建っています。

宿泊料金は2泊で6000円です。部屋のグレードはビジネスクラスで、これはベッドが上下にセパレートされていないのでとても快適です。大浴場とサウナがあってとても清潔でした。

作業した場所

主に以下の2箇所です。特に BANKERS STREET CAFE は最近できた Cafe でとてもいい感じでした。

• BANKERS STREET CAFE
• KUMU

BANKERS STREET CAFE

私が訪れた時期が旅行シーズンと少し外れていた為か、どの時間帯に行っても貸切でした。とっても快適。 どちらの店舗もそもそも席数が多い上にコンセントが利用できる席が多かったのです。

ちなみに Starbucks は勉強している学生がたくさんいました。こんなに素敵なカフェがあるなになぜみんなスタバなんだ??

ついでに金沢城を散策

今回はご飯目当てだったので観光する予定はなかったのですが、途中で疲労がたまってしまったので休憩がてら金沢城へ向かいました。紅葉がきれいでとても癒されました。

金沢でおすすめのホテル

私の個人的な感想だとこんな感じ

• 友人たちとグループで旅行: THE Share Hotels HATCHi 金沢/もしくは the square hotel KANAZAWA
• 出張、もしくは仕事しながら旅行: First cabin
• お二人様: ザ・スクエアホテル金沢／the square hotel KANAZAWA

First cabin は便利な場所の上にサウナや大浴場が完備されているので大変素晴らしいのですが、グループで泊まった場合はおしゃべりしたりする共有スペースがありませんでした。友達と行く場合は THE Share Hotels HATCHi 金沢 か ザ・スクエアホテル金沢 がいいかも

また出張、もしくは仕事しながら旅行するのであれば前述のカフェがあるのと片町に近いので First cabin を選べば間違いないと思います。ナイトウェアがついているのでスーツで来ている人は便利だと思います。

the square hotel KANAZAWA は実際には宿泊していないのですが2018.11.27 にopen したてで4ヶ月間は10%off で宿泊できるので2名以上だったら First cabin よりもいいかも。ただ金沢は少しホテルが乱立しすぎな気がするので探せばもっとお得なホテルが見つかるような気がします。

金沢の旅を終えて

去年金沢を訪れた際はとても風が強く、寒かったのですが今回は割と暖かかったので気軽に外出できてとても快適でした。

寒ブリを食べるという目標は達成し、確かに美味しかったたのですが、正直なところ回転寿司とかで気軽に魚を食べておけばよかったなと思いました。 片町は予約がないと入れない店がいくつかあるのですが、正直そういう店はもういいかなあ。

それよりも現地の人に聞いたお店が気になるので次回はそちらを探索してみようかと思います。

今回訪れた飲食店など

そういった訳で実際に訪れたお店ですが、記事が長くなりそうなので別記事にします。

【第5回】JSフレームワーク(またはライブラリ)× ビアバッシュ 初心者勉強会 in西新宿 に行ってきました

というわけでフロントエンドの勉強会に行ってきました。

https://sakeganaito.connpass.com/event/108628/ https://twitter.com/hashtag/sakenight5

参加する動機

フロントエンドのエンジニアで筋の良さげなエンジニアを見つけてブログなどをフォローしようかなと。 あと人前で発表する経験をこまめに積んでおきたいから。

どんな感じの勉強会なのか

• 到着したらとりあえずお酒を飲む
• 登壇者がLTしている間お酒を飲む
• LTが全部終わったらお酒を飲む

基本的には初心者向けのゆるゆるとした勉強会だと思います。 参加しているエンジニアはフロントとサーバサイドが半々ぐらいじゃないかな。

会場とスポンサー

ありがとうございます。

• 会場: ポート株式会社（PORT INC.）
• お酒: IT/Webエンジニアのための転職・求人サイトForkwell Jobs

トーク一覧

【LT1】「AWS Amplifyで遊んでみた話」

最近 riot.js のコミッタになったそうです。

【LT2】「nuxt-client-init-module」

わたしのトーク。 https://okamuuu.github.io/talks/2018-12-07.js-beer-bash/#1

【LT3】「好きだけじゃ辛いScala.js」

今日は他の登壇者と被らないようにあえて Scala.js の話題にしたそうです。 フロントエンドで Scala が書ける。Scala.js をほめつつ辛いところを自ら突っ込むスタイルでした。

【LT4】「Netlify と Nuxt.js で作る静的サイトはいいものだ」

next generate のお話と Netlify を使って高速ホスティング。私も Blog の一部を Netlify にしていますけど https で静的サイトを公開するのが簡単なんですよね。

そういえば Netlify はいつの間にかネイキッドドメインが使えるようになっています。

【LT5】「仮想DOMで探る、Reactがヒットした理由」

差分検出アルゴリズムがやっぱり秀逸だったというお話。一番最初に「DOMを操作するの重いからJavascriptで先に差分だけ計算すれば良くね？」って考えた人はノーベル賞的なのもらっていいんじゃないかな。

【LT6】「初心者、2週間でサービス作ってみた話」

普段は社内SEインフラをされてるそう。WEB系のエンジニアは初心者と言いながらも上手にキャッチアップしてるなー。という印象がありました。

今回のトークで一番面白そうな人だったので懇親会で色々とお話させてもらいました。気になった人に話しかけられるのは勉強会に参加した人の特権ですね。

【LT7】「Webサービスを作ってみて気づいたこと」

semantice-ui-riot ちょっとできる人。工数が氷山の一角にならないように可視化させた話は参考になりました。

Codesuka https://codesuka.review/ というサービスを公開されてました。認証周りは firebase を使っていて、個人で開発しているWEB開発者は firebase を使っている率高いなあという印象を受けました。

【LT8】「最速でサービスをローンチする」

Qiita のスライドを使っていたのでそれも便利でいいなあ ngrok は クレカ決済において https の検証を手っ取り早くする時に便利と言われて、なるほどと思いました。

まとめ

WEBサービスを作るのに短期決戦を望んでいる人が多い気がしました。 そして firebase がやっぱり手っ取り早そう。個人サイトレベルだと firebase authentication がやっぱり便利なんでしょうね。

5分程度の発表をするだけでOKで、聴いている側はお酒を飲みながらのお手軽な勉強会なので初心者の人におすすめですの勉強会です。

こちらからは以上です

Nuxt.js(2.2.0) で最初の Request 時に Fade in をしたい

以下がサンプルです

mkdir practice-nuxt-loading && cd $_
yarn init -y
yarn add nuxt nuxt-client-init-module
touch nuxt.config.js pages/index.vue store/index.js  

create nuxt.config.js

module.exports = { 
  modules: [
    'nuxt-client-init-module'
  ]
}

create pages/index.vue

<template>
  <div class="main" v-bind:class="{'loading': $store.state.isLoading}">
    <h1>Hello world!</h1>
  </div>
</template>

<style scoped>
.main {
  transition: all 0.3s;
  opacity: 1
}

.loading {
  opacity: 0
}
</style>

create store/index.js

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: () => ({
    isLoading: true,
  }), 
  actions: {
    async nuxtServerInit(store, context) {
      console.log("nuxtServerInit")
    },  
    async nuxtClientInit(store, context) {
      console.log("nuxtClientInit")
      setTimeout(function() {
        store.state.isLoading = false
      }, 200)
    },  
  }
})

export default store

解説

nuxtServerInit で state に対して setTimeout を仕掛けても、 対象となる page で asyncData が実行された段階でレンダリングされてしまいます。その後に setTimeout で state を変化させても、nuxt server からすると「すでにレンダリングしている」ので何もできません。ということで browser 側で state に対して setTimeout を仕掛ける必要があります。

Nuxt.js の SSR は最初に HTML をレンダリングしつつ、直後にブラウザが再びレンダリングしています。このタイミングを利用します。この挙動については以下も参考にして見てください。

qiita.com

こちらからは以上です。

firebase の auth で Uncaught TypeError: this.ta is not a function と言われる

GoogleAuthProvider を使おうとしたら Uncaught TypeError: this.ta is not a function と言われるが、コンストラクターでした。

- const provider = firebase.auth.GoogleAuthProvider()
+ const provider = new firebase.auth.GoogleAuthProvider()

ShiftJIS なサイトをスクレイピングしたい

という要望がいまだにあるとかないとか。とりあえずメタ情報を取得する場合はこんな感じになりました。

const scrapeIt = require('scrape-it');
const got = require('got')
const encoding = require('encoding-japanese')

async function main() {

  const url = "http://okamuuu.hatenablog.com/"  // ShiftJIS なサイトの URL を各自で探して見てください。
  const {body} = await got(url, {encoding: null})
  const detected = encoding.detect(body);
  const unicode = encoding.convert(body, {
    from: detected,
    to: 'UNICODE'
  })
  const html = encoding.codeToString(unicode)
  const result = await scrapeIt.scrapeHTML(html, {
    title: "title",
    metaInfos: {
      listItem: "meta",
      data: {
        name: { attr: "name" },
        content: { attr: "content" },
      }
    }
  })
  console.log(result)
}

main()

このようにhttp.request に {encoding: null} オプションを渡してバイナリのまま取得するとその後の処理が楽です。おしまい。