Nuxt.js + Netlifyで404 Not Foundをトップページにリダイレクト

動作環境

$ node -v
v13.2.0
$ npx nuxt -v
@nuxt/cli v2.10.2

Nuxt.js で 404 をトップページにリダイレクト

Nuxt.js 製のサイトで存在しないページへアクセスすると、デフォルトでは画像のような 404 Not Found ページが表示されます。

Nuxt.js のデフォルトの 404 エラーページ

これをトップページ / にリダイレクトするように変更するのは超カンタンです。

pages/*.vue という名前のファイルを作って、 / にリダイレクトする処理を書くだけ。

特殊なファイル名なので、ターミナル上で操作する際は \ で * をエスケープしてやりましょう。

$ vi pages/\*.vue

内容はこれだけ。

<script>
export default {
  asyncData({ redirect }) {
    return redirect('/')
  }
}
</script>

http://localhost:3000/hogehoge のような存在しないページへアクセスして確認しましょう。 http://localhost:3000 にリダイレクトすればOK。

Netlify でも 404 をトップページにリダイレクト

ところが、これを Netlify にデプロイすると、今度は Netlify の 404 ページが表示されてしまいます。

Netlify のデフォルトの 404 エラーページ

これも / へリダイレクトするように設定しましょう。ドキュメントルートに _redirects というプレーンテキストファイルを置いて設定してやるだけです。（参考: Redirects and rewrites | Netlify Docs）

$ vi static/_redirects
/*  /   200
/*  /   404

デプロイして、存在しないページへアクセスして確認しましょう。/ にリダイレクトすればOK。

ハッピー？

macOS に capybara-webkit をインストールする

Catalina に capybara-webkit をインストールしようとして手間取りました。

こちらを参考に解決しました。

Installing Qt and compiling capybara webkit · thoughtbot/capybara-webkit Wiki

capybara-webkit のビルドに必要な QtWebKit が Qt 5.6 で削除されてしまったため、 Qt 5.5 をインストールする必要があるのですが、brew のパッケージ qt@5.5 もすでに削除されているため、brew のリポジトリの過去の歴史を紐解いて qt@5.5 を無理やりインストールする、ていう荒業を使います。

Catalina, High Sierra, Sierra, El Capitan, Yosemite で同じ手順で出来るようです。 Mojave だけ手順が違うようですので、上記リンク先を参照下さい。

環境

$ uname -a
Darwin MonBP.local 19.2.0 Darwin Kernel Version 19.2.0: Sat Nov  9 03:47:04 PST 2019; root:xnu-6153.61.1~20/RELEASE_X86_64 x86_64
$ brew -v
Homebrew 2.2.2
Homebrew/homebrew-core (git revision 47102; last commit 2019-12-23)
Homebrew/homebrew-cask (git revision 4f1da; last commit 2019-12-24)

手順

brew のリポジトリの qt@5.5 が削除される直前のコミットから Formula/qt@5.5.rb というファイルをサルベージします。

$ brew update
$ cd $( brew --prefix )/Homebrew/Library/Taps/homebrew/homebrew-core
$ git checkout 9ba3d6ef8891e5c15dbdc9333f857b13711d4e97 Formula/qt@5.5.rb
fatal: reference is not a tree: 9ba3d6ef8891e5c15dbdc9333f857b13711d4e97

fatal: reference is not a tree というエラーが出たかもしれません。これは brew がリポジトリを shallow clone しているためです。git の全履歴を取得します。

$ git fetch --unshallow
remote: Enumerating objects: 664813, done.
remote: Counting objects: 100% (660680/660680), done.
remote: Compressing objects: 100% (226471/226471), done.
remote: Total 655516 (delta 431659), reused 650038 (delta 426185), pack-reused 0
Receiving objects: 100% (655516/655516), 261.95 MiB | 5.65 MiB/s, done.
Resolving deltas: 100% (431659/431659), completed with 3945 local objects.

もう一度サルベージ実行。

$ git checkout 9ba3d6ef8891e5c15dbdc9333f857b13711d4e97 Formula/qt@5.5.rb
Updated 1 path from 741af0285f

無事取得出来たようです。では qt@5.5 をインストールしてみます。

$ brew install qt@5.5
Error: qt@5.5: unknown version :mountain_lion

上記のようなエラーが出て失敗した場合は、サルベージした Formula/qt@5.5.rb の25行目をコメントアウトします。

$ vi Formula/qt@5.5.rb
  # OS X 10.7 Lion is still supported in Qt 5.5, but is no longer a reference
  # configuration and thus untested in practice. Builds on OS X 10.7 have been
  # reported to fail: <https://github.com/Homebrew/homebrew/issues/45284>.
  depends_on :macos => :mountain_lion
↓
  # OS X 10.7 Lion is still supported in Qt 5.5, but is no longer a reference
  # configuration and thus untested in practice. Builds on OS X 10.7 have been
  # reported to fail: <https://github.com/Homebrew/homebrew/issues/45284>.
  #depends_on :macos => :mountain_lion  # この行をコメントアウト

再度インストール。

$ brew install qt@5.5
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/cask).
No changes to formulae.

==> Downloading https://homebrew.bintray.com/bottles/qt@5.5-5.5.1_1.high_sierra.bottle.tar.gz
==> Downloading from https://akamai.bintray.com/30/30c5a19c4c18737d40ab072d27a1b5220e746eb7a549812ceb1799eb07cfd58f?__gd
######################################################################## 100.0%
==> Pouring qt@5.5-5.5.1_1.high_sierra.bottle.tar.gz
==> Caveats
We agreed to the Qt opensource license for you.
If this is unacceptable you should uninstall.

qt@5.5 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have qt@5.5 first in your PATH run:
  echo 'export PATH="/usr/local/opt/qt@5.5/bin:$PATH"' >> ~/.zshrc

For compilers to find qt@5.5 you may need to set:
  export LDFLAGS="-L/usr/local/opt/qt@5.5/lib"
  export CPPFLAGS="-I/usr/local/opt/qt@5.5/include"

For pkg-config to find qt@5.5 you may need to set:
  export PKG_CONFIG_PATH="/usr/local/opt/qt@5.5/lib/pkgconfig"

==> Summary
🍺  /usr/local/Cellar/qt@5.5/5.5.1_1: 7,330 files, 329.7MB

インストール出来ました。

qt@5.5 は keg オンリーパッケージなので、パッケージ中の qmake などのファイルが /usr/local 以下にリンクされておらずそのままでは使えません。強制的にリンクします。

brew link --force qt@5.5

リンクされてるかどうかチェックします。

$ which qmake
/usr/local/bin/qmake
$ ls -l /usr/local/bin/qmake
lrwxr-xr-x  1 monmon  admin  34 12 24 15:56 /usr/local/bin/qmake -> ../Cellar/qt@5.5/5.5.1_1/bin/qmake

サルベージしたファイルは削除しちゃいましょう。

$ git reset Formula/qt@5.5.rb
$ rm Formula/qt@5.5.rb

これで capybara-webkit がインストール出来るはずです。

$ bundle install -j4 --without production --path vendor/bundle
（略）
Installing capybara-webkit 1.15.1 with native extensions
Bundle complete! 72 Gemfile dependencies, 185 gems now installed.
Gems in the group production were not installed.
Bundled gems are installed into `./vendor/bundle`

やったね。

テックレジデンスはいいぞ

いい…

いいぞ…

（これは TechResidence Advent Calendar 2019 の24日目の記事です） adventar.org

某レジデンスが全然テックじゃなかった件

これはギークハウス界隈 Advent Calendar 2019の11日目の記事です。Webエンジニアのモンモンといいます。よろしくお願いいたします。

ギークハウスには（ときさば系ばかり）3件連続で住んでいたのですが、今年の初旬ごろちょっとした気まぐれでギークハウスを出て某レジデンスに引っ越してみました。何かトラブったりした訳ではなく、ギークハウス以外の空気を吸ってみたかったとか、風に誘われたからとか、そんな理由です。

そのレジデンスはエンジニア向けのシェアハウスと謳っているという点で、ギークハウスとコンセプトは似てるのですが、中身は大きく違いました。

9ヶ月ほど住んでつい先日（というか昨日）退去したところで、思いの丈を語りたいと思います。

エンジニア少ない。テックな会話が少ない

エンジニア向けを謳っている割にエンジニア少ないです。僕がいた期間でいうと最盛期でも半分くらいでしょうか。

そのためリビングに人が集まってもテックな話題になることは少なかったです。

じゃあリビングで何してるかといえば、テレビでスポーツ見て騒いでたり、バラエティ見て騒いでたり、テラスハウス見て騒いでたり、タレントがどうこうって話してたり、なんか恋バナしてたり、まあそれはそれで楽しいですけども、エンジニア向けシェアハウスとは言い難いよね。もっとジャバスクがどうとかエディタ論争とかそういう話がしたいんだよ俺たちエンジニアは！

僕の入居前の話ですが、エンジニア同士でテックな会話をしてたらそこにいたキラキラスイーツ系頭ゆるふわ女子が「私のよくわからん話をするな」みたいなこと言ってチーズを投げつけてきたこともあったそうです。面白すぎるやんけ。いったいお前はここを何レジデンスだと思ってるんだ。

追記：チーズを投げつけられたご本人登場のようなのでリンク貼っときます → floatとflexboxで盛り上がっていたらキラキラスイーツ系頭ゆるふわ女子にチーズを投げつけられた話 - kanuu123’s diary

管理会社は非エンジニアだろうが誰彼かまわず入居させてるのかというと、そうではなく「プログラミングに興味ある人」を入れてるんだ、ということらしいですけど、興味だけならだれだってあるわけでやはり誰彼かまわず入居させてるみたいです。

エンジニアばかりでなくビジネスサイドの人もいた方が発想が膨らむのでは？　みたいな狙いもあったようですが、いや別にみんなでプロジェクト立ち上げるわけでもないからその配慮不要だよね。エンジニアがキャッキャウフフ技術トークしてるところに技術わかんねービズサイド()の人間が割り込んできて欲しくないんだよ。

入居させる住人はちゃんとフィルタリングして欲しいものです。

シェアの文化がない。育つ土壌もない

ギークハウスの場合、住人同士で色んなものをシェアする文化が根付いていると思います。

例えばドライバーとかの工具類、自転車の空気入れ、市販薬や絆創膏、などなど。こういうものを気軽にシェアしあえると金銭的な負担も減るし場所や時間の節約にもなるし、いいことだらけですよね。

某レジデンスでは「共用部に個人の物を置くのは原則禁止」というルールがあります。工具類やら空気入れやらが必要になって、それが共用部に用意されていない場合、住人それぞれが買って、そんなに広くない自室に保管する必要があるんです。

お金と場所の無駄ですよね。必要になってから買って手に入れるまでのタイムラグも考えると時間の無駄でもあります。

また、誰が何を持ってるか可視化されにくいため、気軽な貸し借りもしづらいです。

必要なものは管理会社にお願いすれば割と買ってくれたりするんですが、①これ買って！ てお願いする　②他の人も必要としてるどうか管理会社がアンケートを取る　③集計結果をもとに管理会社が判断、購入　④やっと届く　て手順を踏むため、非常にまだるっこしいです。買ってもらうよう「お願いする」心理的ハードルもどうしてもありますしね。

どうもシェアハウス慣れしてない住人が多い…

キラキラしてるシェアハウスにはそういう人が集まるんでしょうか。

あんまり絡んでこなかったり（会わなすぎて存在すら疑わしい人も数名）、物をシェアすることに慣れしてなかったり、せっかくシェアハウスに住んでるのにもったいないです。なんのためにシェアハウス住んでんだお前ら。

なんか気取っちゃってる住人が多い…

キラキラしてるシェアハウスにはそういう人が集まるんでしょうか。

リビングのテレビで英語の番組をこれみよがしに観てたりするよね。

テレビの YouTube 再生機能で流す BGM は当然クラシックですよね。

技術的な話題もブロックチェーンだったりXRだったり。キラキラしたカッコイイ技術を聞こえよがしに語りますよね。

意識高い感じ。イキってなんぼの世界なのかな。

一方その頃ギークハウスのリビングでは、技術的な話で盛り上がってたり、ゲームやって奇声上げてたり、アニメ見てたり、ボカロ曲がエンドレスで流れてたりしますよね。ゆるくてよいと思います。

（別にブロックチェーン＝キラキラしてて胡散臭い、て言いたい訳ではなく、僕自身も住人とブロックチェーン談義はちょいちょいしてたしそういう技術談義は楽しいのですが、ブロックチェーン界隈に (ちらほら|たまに|いっぱい) いる「ブロチェンで仕事してるオレカッコイイ」と言いたげな輩が聞えよがしにブロックチェーントークしてるの鬱陶しいよね、くらいのことです。槍玉にあげてごめんねブロチェンとXR。なんであれイキりは鬱陶しいっすね。）

リビングに Alexa はあるけど誰も使ってなかった

以前住んでたギークハウス四ツ谷ではリビングに Google Home Mini が設置されていて、タイマー機能やリマインダー機能など、住人はみんなカジュアルに使っていました。

某レジデンスにもリビングに Alexa がいたので、入居当初からいつものノリで話しかけてたんですが、なぜか他の住人にびっくりされるんですよね。き、き、機械とお話してるー！？　みたいなリアクション。

揃いも揃って使ったことないんかい。テックに興味持っていこうな。

自室のルーターがくそしょぼい

各部屋に Wi-Fi ルーター備え付けなのですが、なんと 2.4GHz 帯しか繋がりません。ISP からもらったやつをそのまま使ってるそうです。

全居室で 2.4GHz 帯で繋ぐため電波が干渉しまくりです。まともに繋がることの方がレアな状況でした。（もしかしたらこれは僕の部屋の位置が悪いとかもあるのかも。似たような苦情はあまり聞かなかった。）

しょうがないから自腹で買いましたよねルーター。高いやつじゃないけどなんと 5GHz 帯が使えるというスグレモノをチョイス。とたんに接続が安定して下り 500Mbps くらい出たので大満足です。

エンジニア向けシェアハウスならネット環境はこだわって欲しい…。

知的好奇心の欠如。あるいは多様性に対して不寛容

自分は最近宗教施設巡りにハマってまして、あちこちのモスクやら寺院やらを訪ねては儀式に参加したり施しの食事を頂いたりしてます。ディープな異文化を体感するのはとても面白いです。（その様子は別ブログのプログラマ飯の方で書いているのでよろしければご覧ください）

その話を住人の女性に話したら「キモーい！」って一蹴されましたよね。

宗教＝キモいですよ。失礼なやっちゃ。知的好奇心の全否定だよね。オシャレでキラキラしたものでないと受け付けないんでしょうかね。

この件はあくまで1例ですが、全体的にオシャレでキラキラしたものを好む人達が多くて、だからマニアックな話とか出来ないんですよね。エンジニアって好奇心強くて変なものを面白がる人が多いと思うんですが、そういう人たちはカルチャーマッチしづらい空間なんではないかと思いました。

僕は野食、奇食、昆虫食といった類の話も大好きなんですが、こんな環境じゃー話題に出来ようはずもありません。結局、一部の人を除いて最後までこれ系の趣味は隠し通してしまいました。冷凍庫の蝉のストックを食べる機会もなかったなあ…。（野食、奇食、昆虫食についてもプログラマ飯の方で書いているので興味あればどうぞ）

そういえばキッチンでイノシシの骨付きモモ肉を捌いてるだけで気味悪がられたことも思い出した。枝肉まるごとならまだしもモモ肉だぜ。何も出来やしねえ。

あ、住人のエンジニア勢の中にはこういう話を面白がってくれる人たちもいましたよ。やっぱエンジニアってそうだよね。

「やるって言ったな？ あれは嘘だ」

耳障りのいいことを言うだけで、実際はやらない。管理会社の基本ムーブです。

空き部屋を作業部屋にするって言って一切やらない。催促してもやっぱり進展がみられない。部屋の片付けに1ヶ月以上かかるってなにやってんだろ。

入居者を紹介してくれたらちょっとキックバックしますよって言ってしない（僕じゃないですが）。えーそれって詐欺くさくね。

「テック化会議」やるだけで結局何もしない

全然テックじゃないことにやっと気付いてか、管理会社が「テック化会議」というのを企画してくれたことがありました。僕は用事があって参加できなかったのですが、管理会社も交えてリビングに集まって座談会のように話し合いが持たれたようです。いいことですね。

出た案としては、洗濯機の利用状況がWeb上とかで分かるようにしたい、リビングがうるさくなりすぎたら Alexa に注意させる、などがあったようです。僕もテック化会議に先立って、リビングにスマートリモコン設置して Alexa と連携してテレビや照明を音声操作出来るようにしましょう、て提案してました（て敢えて書くほどでもない普通の提案ですが）。

で、その結果を踏まえて何もやらないのが某レジデンスですよね。

ふざけとんか。

お願いしても無駄っぽいから、結局自腹切ってスマートリモコン買って勝手にリビングのスマートホーム化を進めましたよね。こんな風に便利になりますよ、てデモンストレーションしたらようやくスマートリモコン買ってくれましたけど。どないやねん。まー世の中往々にしてそんなもんかもしれませんが。

それ以外の、洗濯機の利用状況チェックとかの提案は結局なかったことにされたようです。

コミュニティが育たない

ギークハウス界隈ではゆるく繋がるコミュニティが形成されてます。

同じギークハウスの住人同士はもちろん、異なるギークハウス間でも交流があったりするし、過去に住んでた人ともなんとなく繋がってるし、住んだことないけどたまに遊びに来る人たちもいます。

コミュニティ形成に大きく貢献しているのは、各ハウスでのイベント、Facebook や Twitter などの SNS、ギークハウス Slack、などでしょうか。

各ハウスで内覧会、飲み会、ゆるめし（ゆるく集まって飯を食べながら話す会）といった名目でイベントを定期・不定期に開いてくれて、交流する機会を作ってくれてたりします。会って話した人同士が Facebook などで繋がるので、自然とコミュニティが形成されていきます。リアルで会って話すの大事。特に僕の住んでたギークハウス新宿やギークハウス四ツ谷ではそれぞれ隔週でゆるめし会が開催されていて、毎回大勢の人が集まる場になってます。（逆にイベントを開催しない、情報をオープンにしてないギークハウスは何やってるかよく分からないので開催してください！）

また、ときさばさんが作ったギークハウス Slack では日々技術的な情報のやり取り、相談や雑談、お仕事募集や人員募集、などなどがやり取りされていて、とても有用な場になってます。公式 Slack って訳じゃないのでギークハウスの名前を冠したオンラインコミュニティは他にもありそうだけど。

一方、某レジデンスでは Slack は「住人専用」で、退去したら追い出されてしまいます（僕も追い出されちゃいました😢）。繋がりが絶たれるわけです。元住人が気軽に遊びに行く雰囲気でもあまりないし、実際退去後に遊びに来てくれた人は僕の入居中にはいなかったです。

外部の人を招いてのホームパーティーは、たまーに誰かがやってたりしましたけど（僕も開催しましたけど）、単発っぽいし繋がりが出来る感じではなかったですねえ…なんでだろ…。お互いに興味ないからなのかな…。

友達をシェアハウスに招く際には3日以上前に教えてね、てルールもあります。これもちょっとしたハードルではあります。

良い点

良い点も書いときます。

リビングは2階まで吹き抜けで、めっちゃ広くて綺麗です。広いリビングってやっぱり居心地がいいです。

リビングの一角のキッチンもとても広くて料理がはかどります。3口コンロが２セット、シンクも2つあり、なんなら3人位同時に料理出来ます。お料理好きなのでこれは嬉しかった。

ギークハウスではずっとドミトリー部屋（2段ベッド2つで4人部屋とか）だったんですが、某レジデンスは全室個室です。みんな個室にこもってしまうとリビングで交流が生まれづらくなるという欠点はあるものの、なんだかんだ個室は気楽でよいです。（そのぶんお値段もよいのですけど。）ドミトリーだけのシェアハウスも、交流が盛んで好きですけど。

週2でハウスキーパーさんが掃除してくれるのありがたい。共用部のメンテを住人でやろうとすると負担が一部の人に偏りがちで、全然手伝おうとしないやつらに殺意沸いたりして、無駄に精神を消耗します。そういう悩みはほとんどありませんでした。

あっあと文句ばっか書いちゃいましたが「きもーい」って言ってくれた女性も含め住人とは割と仲良く楽しく暮らしてましたよ！ 一緒にテレビ見たり料理したりご飯食べたり雑談したり、楽しかったです。みんなありがとな！

追記：某レジデンスラブな人のレジデンス愛溢れる記事からもリファレンス頂いたのでリンクしときますね。レジデンスはいいとこだぞ！ → 全然テックじゃない某レジデンスのアドベントカレンダーを作って見た – ちくちゅうブログ

EngineMaker に引っ越しました

件のときさばさんが新シェアハウス「EngineMaker（エンジンメイカー）」を作るというので、内見もせずにオープンほぼ初日に引っ越してきました。

まだ色んなものが足りてないし、引っ越しの荷物運びこみっぱなしで散らかってるし、ネットも繋がってないし、人もあまりいなくて寂しいけど、だんだん面白い場所にしていければいいなーと思ってます。

Nuxt JS に Bootstrap 4 / Bootstrap Native を導入

バージョンこんな感じ

$ node -v
v12.8.0
$ npx nuxt -v
@nuxt/cli v2.9.1

パッケージをインストール

yarn add node-sass sass-loader bootstrap bootstrap.native bootstrap.native-loader

Bootstrap の css をロードする設定を assets/sass/common.sass に記述（ファイル名はなんでもOK。既存のファイルに追記してもOK）

@import "~~/node_modules/bootstrap/scss/bootstrap.scss"

Bootstrap Native を Vue に注入するプラグインを plugins/bootstrap-native.js に作成。Nuxt の mounted() などから this.$bs で Bootstrap の機能にアクセス出来るようにします

import Vue from 'vue'
import * as bs from '~~/node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js'
Vue.prototype.$bs = bs

nuxt.config.js を修正、先ほどの css とプラグインを導入する

export default {
  css: [
    '~assets/sass/common',
  ],
  plugins: [
    '~plugins/bootstrap-native',
  ],
}

動作確認用のページを pages/bs.vue に作成

<template>
  <div id="modalID" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          Welcome to Bootstrap 4!
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">× </span></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    const el = document.getElementById('modalID')
    const modal = new this.$bs.Modal(el)
    modal.show()
  }
}
</script>

開発サーバを（再）起動

yarn dev

確認用ページにアクセスしてみる。 http://localhost:3000/bs

このようにモーダルが表示されればOK。