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。

技術同人誌「ネットワークスクランブル TCP編」がめっちゃ分かりやすい

先日の第2回 技術書同人誌博覧会で購入した ネットワークスクランブル TCP編 を読了。

booth.pm

本の発売自体は今年の 5/24 で、ちょっと前だったみたい。

woshidan.hatenablog.com

98ページと手頃な厚さで読みやすく、それでいて TCP について一歩深く掘り下げた内容になっていて、TCP の難しい様々な機能や概念を一気に理解できていい感じ。

自分の場合、スリーウェイハンドシェイクや、そこからの状態遷移くらいは知ってたんですが、

ウィンドウによる送信量制御、遅延ACK、高速再送制御、累積的ACKを改良した Selective ACK (SACK)、パケットロスした場合のリカバリーの方法、NagleアルゴリズムやPUSHフラグの問題点、などなどなど、

よく分かってない概念がいっぱいあったんですよね。知らないことすら知らなかったことも多い。

スリーウェイハンドシェイク知ってた、てさっき書いたけど、そこについても「6章 すこし詳しくハンドシェイク: ソケットAPIとコネクションのステータス遷移」で深堀りしてくれていて、これを読むと俺は何を知っていたというのだ…て気分になりましたよね…

（どうでもいいけど CLOSING ステータスについては一切触れてないのはレアケースだから省いたのかな？ ていうか CLOSING ステータスって両者が同時にFINを送りあった場合にのみ遷移するステータス、で合ってる？ まあどうでもいいけど…）

難解な部分については著者自身の考えも交えつつ、TCP について非常に分かりやすくまとめてくれてると思いました。他の本もこれから読むけど楽しみ。

2019/07/21 gRPC と Golang でブロックチェーンもどきを作って遊んだ

こちらのイベントに参加。

webbench.connpass.com

参加者は主催者含め4人。カフェの一角でもくもく作業していた。もくもく会なので何やっても自由だけど、用意されていた作業内容としては以下のブログ記事の通りにブロックチェーン（もどき）を実装してみよう、というもの。

suga-tech3.hatenablog.com

gRPC は聞いたことあるなあってくらい、Golang も前にちょっと触ったことある、くらいだったので丁度いい機会でした。

gRPC の基礎を公式サイトでざっと学んで、あとはブログ記事を写経。

ブログ記事に間違いが数箇所あって、そのままだと動作しなかったので難儀した。なんとか時間内に動かすところまでたどり着いたのでよかった。間違いの箇所はブログ記事にコメントした。

ブロックチェーンと銘打ってはいるけど、P2P ではないし PoW 等による承認プロセスもないし、ブロックに取り込む物はトランザクションとかではなくただの文字列だし、ブロックチェーンを模した何かに過ぎないなあと思う。まあでもその分短時間でサクッと作って遊べるのはとてもありがたい。Golang や gRPC の勉強になってよかった。

今回作ったものはこちら。

GitHub - monmonmon/pseudo-blockchain-go: ブロックチェーンを模した何か。Golang と gRPCの演習問題として。

Nuxt.js に Materialize を導入＆カスタマイズ

Nuxt.js ではプロジェクト作成時に Bootstrap などの CSS フレームワークを選択すると簡単に導入できて便利ですが、選択肢にない CSS フレームワークを使おうとするとちょっと手間です。マテリアルデザインの CSS フレームワーク Materialize を使いたかったけど選択肢になかったので導入方法を調べてみました。（マテリアルデザインにしたければ Vuetify を使えよコラっていう開発者の意図も感じますがシカトします。）

主なパッケージのバージョンはこんな感じ。

nuxt@2.6.2
materialize-css@1.0.0-rc.2

導入

プロジェクトを作ります。大体デフォルトのまま。

% yarn create nuxt-app materialize-sample
yarn create v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.6.0" with binaries:
      - create-nuxt-app
> Generating Nuxt.js project in /Users/monmon/dev/nuxtjs/materialize-sample
? Project name materialize-sample
? Project description Materialize Sample
? Use a custom server framework none
? Choose features to install
? Use a custom UI framework none    ←UIフレームワークなし
? Use a custom test framework none
? Choose rendering mode Universal   ←UniversalでもSPAでもOK
? Author name monmonmon
? Choose a package manager yarn     ←yarnじゃなきゃやーん

  To get started:

        cd materialize-sample
        yarn run dev

  To build & start for production:

        cd materialize-sample
        yarn run build
        yarn start

✨  Done in 195.34s.

必要なパッケージをインストールします。

% cd materialize-sample
% yarn add materialize-css@next

# pug を使いたいのでこれも入れる
% yarn add pug pug-plain-loader

# sass も使いたいのでこれも入れる
% yarn add node-sass sass-loader

assets/style/app.sass を作って以下を記述。

@charset 'UTF-8'

@import '@/node_modules/materialize-css/sass/materialize.scss'

plugins/materialize.js を作って以下を記述。

import '@/node_modules/materialize-css/dist/js/materialize.min.js'

nuxt.config.js を修正。修正するのは3箇所だけです。

import pkg from './package'

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      // 1. Materialize のアイコンを有効化するcssを読み込み（optional）。
      // `<i class="material-icons">add</i>` のようにアイコンが使えるようになります。
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    // 3. 先ほど作った sass を追加。
    'assets/style/app.sass'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    // 3. 先ほど作った plugin を追加。
    { src: '~/plugins/materialize', ssr: false }
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

これだけで導入完了。簡単なページ (pages/test.vue) を作って確認してみます。

<template lang="pug">
div
  nav.row
    .nav-wrapper.col.s12
      a.brand-logo(href="/") Navbar
  .container
    .row.section
      .col.s12
        p
          button.btn Button
        p
          a(href="#") Link
</template>

開発サーバを起動。

% yarn dev

http://localhost:3000/test にアクセスしてこんな感じに表示されればOK。

色をカスタマイズ

デフォルトの色のままだと少々個性が強いですね。カスタマイズしましょう。

色は node_modules/materialize-css/sass/components/_variables.scss で sass 変数として定義されてるので、これをオーバーライドしてやればいいです。

主なsass変数	デフォルト値	用途
$primary-color	.materialize-red.lighten-2	Navbar, Breadcrumb, Pagination などの色
$secondary-color	.teal.lighten-1	Button などの色
$success-color	.green	フォームフィールド(Email や URL など)の Validation 成功時の色
$error-color	.red	フォームフィールドの Validation 失敗時の色
$link-color	.light-blue.darken-1	リンクの色

ほとんどのコンポーネントの色は $primary-color, $secondary-color を元に生成されます（黒やグレー系の色を除く。一部例外あり）。今回はこの2つに加え $link-color も変更してみましょう。

先ほど作った assets/style/app.sass を以下のように修正します。

@charset 'UTF-8'

// Materialize の red, lighten-1, darken-2 などの色指定を使えるようにするためインポート
@import '@/node_modules/materialize-css/sass/components/_color-variables.scss'

// sass 変数をオーバーライド。color 関数でこのように指定します
$primary-color: color('blue', 'base')           // .blue
$secondary-color: color('green', 'lighten-1')   // .green.lighten-1
$link-color: color('red', 'darken-2')           // .red.darken-2

@import '@/node_modules/materialize-css/sass/materialize.scss'

red やら lighten-1 やら使わねえぜって場合はもっとシンプルに書けます。

@charset 'UTF-8'

// sass 変数をオーバーライド
$primary-color: #42A5F5
$secondary-color: #66BB6A
$link-color: #D32F2F

@import '@/node_modules/materialize-css/sass/materialize.scss'

こんな風にカスタマイズできました。やったね。

コンポーネントごとに色を細かく指定したい場合は、各コンポーネント専用の sass 変数を node_modules/materialize-css/sass/components/_variables.scss から探して、同様にオーバーライドすればOK。例えば Badge の背景色は名前からして $badge-bg-color で設定できるっぽいですね。

以上です。

技術書典6に一般参加してきました

技術書典6に一般参加してきました！

今回から11時～13時の入場は有料（1000円）となったにもかかわらず凄まじい行列でした。

僕は友人たちと、朝10時のチケット販売開始時刻の頃（入場開始の1時間前）に着くように行ったのにすでに長蛇の列。建物の外の、陸橋を渡った向こう側に並びました。（その後にょろにょろ〜っと移動させられたのでずっとそこにいたわけではない）

ちなみに僕のチケットは1500番代。必ずしも並んだ順に配られたわけではないっぽいから僕の前に1500人並んでたかどうか分からないけど。

建物の外で行列待ち中

ツイッターで4600番代くらいのチケットを持ってる方を確認出来たので、課金勢だけで5000人くらいはいたってこと？（参加費だけで500万円以上のアガリってことになるのかな。運営さんが健全に儲かるのだとしたらいいことだけど、金銭面でモメたり金の匂いにつられて変なのに寄って来られたりしたら大変だなあとか余計な心配。しらんけど。それとも次回以降の運営費に回すのかな。しらんけど。）

所感あれこれ。

• サークルリストの見づらさ使いづらさは何とかならんのですかね！？ 検索も出来ないし、情報の粒度もサークルによってバラバラだし、「ソフトウェア全般」とかってカテゴリざっくり過ぎる。せめて本のタイトルをテキストで載せてブラウザ検索出来るようにして欲しい…。「JavaScript」みたいな技術名でタグ検索出来たりしたら最高なんですが。
• チェックしたサークルがサークル配置図でオレンジ色にマークされるのは頑張ってる感ある。ただ、どれがどのサークルなのか分からないので結局あまり役に立たない…＞＜
• 参加費も後払い決済で払いたかった。「技術」書典なのよこれは！
• 参加費払ったのに開始時間まで自由行動出来るわけでもなく、寒空の下（4月は寒いから！）デスマーチの如く歩かされたり立ちっぱで待たされたりは辛かった。寒いようおなかすいたよう。まあ仕方ないかなあとは思うけど。
• それでも文句一つ言わずにおとなしく待ってるエンジニアたち。君たちそういうとこやぞ！（僕もやね！）
• 待たされた分、入場の瞬間分泌されるアドレナリンの量よ。ああ財布の紐がゆるむ音がする。
• サークルさんとの交流楽しい！声かけてもらえるとなんだかんだ嬉しい。そんでうっかり買っちゃう。それ以上いけない！
• 後払い決済に未対応のサークルさんが少数（全体の5%〜10%？）いて、僕が手持ちの現金がないために買えないってことが何度かありました。対応しといて頂けると非常に助かります！「技術」書典なのよこれは！＞＜ 支払いが楽なだけでなく、購入履歴が後から確認出来るのが何気にすごい便利なんですよね。
• 文句多くてごめんなさいだけどm(_ _)mそれでもこういうイベントは楽しいね！楽しい！ウキャー！(∩´∀｀)∩
• 懲りずにまた次回も参加したいです！
• 運営の皆様、本書いてくれた皆様、楽しいイベントをありがとうございました！！！！

13:30ごろの会場内。わちゃわちゃ。

最後に、僕が買った本こちらです。買った順です。見せびらかしたいだけです。（ほとんど後払いで買ったのでサークル名も値段も買った時刻さえも分かるの便利(∩´∀｀)∩）

タイトル	サークル名	値段
Practical TypeScript in bitbank	ビットバンク株式会社	¥500
まんがではじめるKubernetes	おとうふ工房	¥1000
Try PWA	neko-note	¥1000
実践で学ぶ！Electron+Vue.jsでデスクトップアプリ開発	N4+	¥300
現場で使える Django REST Framework の＼薄い／本	あきよこブログ	¥1000
Kaggleのチュートリアル第３版	データリファインメント	¥1000
ちぇい子と学ぶChainer入門	[chug] Chainer User Group	¥500
Nuxt.jsとPythonでつくる『ぬるさくAIアプリ開発入門』	ノルウェイのギーク	¥1000
高校数学からはじめる量子コンピュータ	あいらぶ量子コンピュータ	¥1000
JuliaではじめるWebアプリ開発〜WebアプリフレームワークGenie入門〜	418 I'm a teapot	¥1000
PHPで学ぶはじめてのGraphQL	くろもワークス	¥200
Nuxt.js + serverless + PWA を本番投入して得たノウハウ本	SpaceAgent	¥500
nuxtとvuesaxとDjangoで作るモダンなサービスの作り方。tipsもあるよ！	ω3	¥500
Radare2で学ぶバイナリ解析入門	味噌とんトロ定食	¥500
セキュア旅団お得パック（セキュリティ本4冊セット）	Secure旅団	¥2000
/STUDIOでカンタンにつくる！	6Q.design	¥500
趣味の製麺 第５号	趣味の製麺	¥1000
作ろう！10分ラーメン	趣味の製麺	¥1000
若手Webディレクターとペンギン先輩のマンガ vol.2	パルヒコさん	¥500
旅するエンジニア2	旅するエンジニア	¥1000
量子計算機科学序論 量子計算機と量子プログラミング ーQASM + Qiskit でIBMQを触るー	慶應義塾大学宇宙科学総合研究会LYNCS	¥1000
ファミリーコンピュータ技術　ープレゼンファミコンの作り方ー	engineer.hanzomon	¥1000
Chrome デベロッパーツールを使いこなそう Network 編	Tech The Toaster	¥1000
動的バイナリ解析の基礎 with Intel Pin 電子版	バイナリイーター	¥250
たのしいBAPの歩き方 電子版	バイナリイーター	¥250
コンピュータ言語神経衰弱（基本セット＋拡張パックx2）	揚げピーナッツ	¥2000
	合計	¥21500

このうち何冊積ん読になることでしょう（白目）

すでにBOOTHでオンライン販売してるサークルさんもあるので、行けなかった人も物色してみような！ワイも追加で買うと思います！イ、イベントはまだ終わってへんのやでエー