モンモンブログ

技術的な話など

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。

f:id:ymdsmn:20190422003243p:plain

色をカスタマイズ

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

色は 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'

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

f:id:ymdsmn:20190422003225p:plain

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

以上です。

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

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

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

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

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

f:id:ymdsmn:20190416010947j:plain
建物の外で行列待ち中

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

所感あれこれ。

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

f:id:ymdsmn:20190416011124j:plain
13:30ごろの会場内。わちゃわちゃ。

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

タイトル サークル名 値段
Practical TypeScript in bitbank ビットバンク株式会社 ¥500
まんがではじめるKubernetes おとうふ工房 ¥1000
Try PWA neko-note ¥1000
実践で学ぶ!Electron+Vue.jsでデスクトップアプリ開発 N4+ ¥300
現場で使える Django REST Framework の\薄い/本 あきよこブログ ¥1000
Kaggleのチュートリアル第3版 データリファインメント ¥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
趣味の製麺 第5号 趣味の製麺 ¥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

f:id:ymdsmn:20190414163548j:plain
このうち何冊積ん読になることでしょう(白目)

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

「セキュリティコンテストチャレンジブック」はクラッキングの基本を広く&結構深く学べる良本

セキュリティコンテストチャレンジブック CTFで学ぼう!情報を守るための戦い方 を読みました。

セキュリティコンテストチャレンジブック -CTFで学ぼう! 情報を守るための戦い方-

セキュリティコンテストチャレンジブック -CTFで学ぼう! 情報を守るための戦い方-

  • 作者: 碓井利宣,竹迫良範,廣田一貴,保要隆明,前田優人,美濃圭佑,三村聡志,八木橋優,SECCON実行委員会
  • 出版社/メーカー: マイナビ出版
  • 発売日: 2015/09/30
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (4件) を見る

サブタイトルの CTF とは Catch The Flag の略で、 用意されたシステムの脆弱性を突いたりデータを解析したりして Flag と呼ばれるキーワードを盗み出すセキュリティコンテストのことです。 オンラインやオフラインであちこちで開催されてます。(例:ksnctf

自分はプログラミングの世界にはC言語から入ったためか昔から低レイヤーが好きで、 学生時代はバイナリ解析やらパケット解析やらの真似事をしてキャッキャ遊んでたわけですが、 最近になってまた低レイヤーいじりたさが再燃し、 よし CTF というものに挑戦してみようと思い立ち、この本を手に取ったわけです。

内容紹介

5章からなります。

  • Part 0: イントロダクション
  • Part 1: バイナリ解析
  • Part 2: pwn (これのステップ1〜3 だけ無料で読めます
  • Part 3: ネットワーク
  • Part 4: Web問題
  • Part 5: SQLインジェクション

以下、各章それぞれ内容を軽く紹介。

Part 0: イントロダクション

そもそもCTFって何? どうやって参加するの?

Part 1: バイナリ解析

主に ELF 形式のバイナリ解析のためのあれこれを解説。

  • file, strings, strace, ltrace, objdump といったLinuxコマンドの紹介
  • OllyDbg, IDA といったツールの紹介
  • gdb による動的解析の基礎
  • レジスタ、スタック構造、バイトオーダ etc の解説
  • x86アセンブリの基本的な読み方

Part 2: pwn

pwn とは英単語 own の typo で、システム権限を奪取するって意味のスラングです。Part 1 の応用編のような内容。 スタックオーバーフロー攻撃や書式文字列攻撃について、実例を挙げながら丁寧に解説してくれているのが嬉しい。 これらの攻撃手法をここまで詳細に説明してくれてるドキュメントってあまりないかも。

  • checksec.sh, gdb-peda などのツールの紹介
  • RELRO, SSP, NX bit, ASLR, PIE といった pwn にあたって必要となる知識の解説
  • スタックオーバーフロー攻撃の解説。ローカル変数の書き換え、リターンアドレスの書き換え、Return to PLT, Return to libc, Return Oriented Programming, etc
  • 書式文字列攻撃の解説。スタックの値の読み出し、任意のアドレスからの値の読み出し、任意のアドレスへの書き込み、GOT Overwrite, etc
  • ASLRの回避方法

Part 3: ネットワーク

主に Wireshark (パケットキャプチャツール) や Python の Scapy ライブラリを用いたパケット解析について解説してくれてる。 あと Netcat(ncコマンド)便利。

Part 4: Web問題

ブラックボックスであるWebサービスに様々な入力(単純なGETアクセスを含む)を与えて脆弱性を探っていくのがWeb問題。

  • PHP の system 関数や Perl の open 関数を利用したOSコマンドインジェクション
  • アップロードファイルの権限不備をついた攻撃

Part 5: SQLインジェクション

Web問題同様、Webサービスに様々な入力を与えてエラーメッセージやHTTPステータスコードから判断する。

  • MySQL か PostgreSQL か SQLite か?
  • SELECT文へのインジェクションの解説。シングルクォート (') などを入力して探っていく。UNION による任意のデータの窃取。information_schema.columns を読んでデータベース構造を調査。
  • INSERT, UPDATE文へのインジェクションの解説。パスワードなどの秘密情報を username などに書き出させたりとか。

感想

広く浅くCTFが概観できる本だと思って軽い気持ちで読み始めたんですが、初心者にとっては決して浅くなく、各テーマごとに結構詳しく掘り下げてくれていてかなり骨太な内容でした。

これをネット上の記事で勉強しようとすると、前提知識が必要だったり、内容が古すぎたり紹介されてるツールが開発終了してたり、システム構成が違うために動かなかったり、英語の記事しかなかったりと、ただでさえ初学者には難しい内容なのにトラップが多くて途方に暮れちゃうことが多かったです。

本書は使うべきツールや基本的な概念を示した上で、実例を通して詳細に解説してくれているので、いやそれでもまだ難しくて全部は理解出来てないですけども、今後勉強を進めていくための道しるべとなってくれる良本だと思いました。

「フリーランスエンジニアでプロジェクトを進めることについて考える会」イベント参加メモ

フリーランスエンジニアでプロジェクトを進めることについて考える会 - connpass

こちらのイベントに参加しました。会場は日本橋サイボウズさんのところ。 15分くらい遅刻しちゃったので最初の安藤さんの発表は途中からになります…m(_ _)m

フリーランサーのインバウンドマーケティング / 安藤真衣子さん

発表資料 フリーランサーのインバウンドマーケティング

どんな人?

遅刻して自己紹介聞き逃しましたがm(_ _)m、
クソアプリ Advent Calendar 2017 では「カタカタカタッターン」を可視化するクソアプリを作ったりしたそうです カタカタカタッターンを可視化した - Qiita

以下発表

フリーランスとして楽しくお仕事していくにはインバウンドマーケティングが大切。

ていっても大げさなことではなく、

  • 自分の好きなこと、得意なことをやって、
  • ブログとかで見て見てー!って発信してるだけでOK。

何らかのアウトプットをしていると意外とあっさり声をかけてもらえる。

声をかけられるフリーランスエンジニアになるには / 渡邊 達明さん

どんな人?

渡邊さん作の niconicocoa というサービスに質問や感想を投げると、発表中のスライドにニコニコ動画よろしくコメントが流れるというインタラクティブな発表でした。楽しい。

以下発表

たくさん声がかけられるようになると

  • 安定収入!
  • 仕事が選べる!

発注する側はどうやってエンジニアを探すか?

  1. 知り合い
  2. 知り合いの知り合い
  3. クラウドソーシング
  4. ググってみる

知り合いベース(1, 2)で受発注出来るとなにかとやりやすい。知り合い増やすの大事。

3, 4 の受注を増やすためにも
ポートフォリオを充実させよう!

  • 実績としてブログ等に掲載させてもらえる仕事を出来るだけ選ぶ。
    実績掲載できないなら割増するくらいの勢いで
  • 仕事じゃなくてもメディアに取り上げられるようなものを作るとマル
  • 技術スタックがはっきりわかるプロフィールにする
  • ブログで発信!
  • 「この技術ならこの人」ってなってると強い。本を執筆したりとか。

注意点

  • 過去の案件と似たようなものばいかりになりがち。新しい技術を積極的に使っていくのマスト

まとめ

  • 知り合いを増やすの大事
  • 強みを作っておくと話が早い
  • ポートフォリオやブログでアウトプット
  • スキルの切り売りにならないよう新しい技術もやっていく

石橋を叩いて渡るフリーランスのなり方 / 今佑介さん

どんな人?

以下発表

大学出てすぐとか、新卒1年目とかでいきなりフリーになるの大変。
バンジージャンプするまえにロープがあるかどうか確認しよう

段階踏んでフリーランス化していく

  1. 副業
    • 本業と掛け持ち。ちょっと大変だけど。
    • twitterとかで「副業募集」って発信してみる。反応がなかった場合精神的ダメージ受けるけど、そのくらいでへこたれるならフリーランスは向いてないかも…
  2. 元の会社と業務委託契約
    • 元の会社の仕事は週3くらいにしてもらって、週2で別の仕事
  3. 完全フリー

どうやって仕事とる?

  • 営業活動はしたことない。FBメッセとかで来る
  • 信頼ポイントを貯めよう

最近のフリーランス事情(発注側視点)

  • リードエンジニアの採用が難しくなってる
  • いいエンジニアはみんなフリーランスになってる。特に都内。

良いフリーランスエンジニアの見分け方

  • 本質的にやりたいことをヒアリングできる人
  • 工数が少なくなる案を提案できる人。
    工数積んで稼ぐより、良いものを作ろうという人
  • 知り合いの信頼できるエンジニアに相談しよう
  • 短期(1ヶ月とか)での契約を渋るエンジニアはあまりいいエンジニアではないかも?(仕事へしがみつきたさが出てる?)

その他

  • 準委任契約がいい。一括請負だと揉めやすい
  • 契約期間はまずは1ヶ月から。実際仕事してみるとダメなパティーンを回避

kintoneなどを活用することで正社員リソースを一切使わずにフリーランス協会のシステムを構築した話/ 西小倉宏信さん

発表資料 20180904_kintoneなどを活用することで正社員リソースを一切使わずにフリーランス協会のシステムを構築した話 - Google スライド

どんな人?

これまで

  • 大学卒業と共に起業
  • 外注するお金ないから内省で開発
  • クラウドソーシング始める。外注すると寝れる時間が増えることに気がつく
  • 案件を見積もって受注するのに苦戦 -> 時間課金にした

お仕事の進め方

  • 週次で原価をお客さんにシェア
  • 月次でその1.5倍を請求
  • 1週間毎にお客さんと一緒に振り返る

ってやり方で2年くらいやってるそう。そのために作ったサービスがこちら↓

時間管理ツールTimeCrowd

  • タスクごとにスタート・ストップ
  • 誰がどのタスクをどれくらいやってるか分かる

2017年から フリーランス協会 を開発

フリーランス協会で使ってる技術

  • kintone (database, 画像とか)
  • heroku(インフラ)
  • SendGrid(メール)
  • Google認証
  • stripe(課金)
  • ChatWork(チャット)
  • cloud 9(開発環境)

kintoneはいいぞ…!(よさをいっぱい語ってくれてたけどメモれず><

そんなわけで

素敵なイベントをありがとうございました!m(_ _)m

CentOS で man が見れない場合は man-pages パッケージを再インストール

環境こんな感じ。vagrantcentos/7 です。

% uname -a
Linux localhost.localdomain 3.10.0-693.11.6.el7.x86_64 #1 SMP Thu Jan 4 01:06:37 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
% cat /etc/redhat-release
CentOS Linux release 7.4.1708 (Core)

CentOS で man がなぜか見れない場合、

% man ls
No manual entry for ls

まずは man-pages パッケージがインストールされてるかチェックして、

% rpm -q man-pages
man-pages-3.53-5.el7.noarch

もしなければインストールで解決。

% sudo yum -y install man-pages

man-pages パッケージはインストールされてても、含まれてるべきファイルが存在しない場合があるっぽい。

% rpm -ql man-pages | grep -w ls
/usr/share/man/man1p/ls.1p.gz
% ls /usr/share/man/man1p/ls.1p.gz
ls: cannot access /usr/share/man/man1p/ls.1p.gz: No such file or directory

パッケージを再インストールしてやればOK。

% sudo yum reinstall -y man-pages

それでも man が見れないコマンドがあったら、

% man ionice
No manual entry for ionice

そのコマンドのパッケージを特定して

% rpm -qf $(which ionice)
util-linux-2.23.2-43.el7_4.2.x86_64

再インストールしたら見れるようになりました。

% sudo yum reinstall -y util-linux