kakakakakku blog

Weekly Tech Blog: Keep on Learning!

インターネットを支える DNS の理解を深めよう /「DNS がよくわかる教科書」を読んだ

2019年10月から2019年12月までの3ヶ月間を「弱点克服期間」と位置付けていて,自分自身「理解が浅いな」と感じる技術領域のインプット/アウトプットを意識的に増やしていく.最近 React 関連のブログを書いているのも,フロントエンド技術に対する弱点克服の第一歩と言える.

今回のテーマは「DNS」にした.DNS の概要は理解できているはずだけど,いざ語ろうとすると,深くは語れないことに気付く.そんな状況を打破するべく「DNS がよくわかる教科書」を読んだ.本書の素晴らしい点は多くあるけど,まず丁寧な図表が多く,初学者でも理解できるように工夫されている.そして,何と言っても「説明の歩幅がとにかく小さく書かれている」ことに驚いた.本書を読み進めながら「徐々にわからなくなっていく...」と感じることがなかった.DNS を基礎から学びたい全ての人にオススメ!

DNSがよくわかる教科書

DNSがよくわかる教科書

  • 作者: 株式会社日本レジストリサービス(JPRS)渡邉結衣、佐藤新太、藤原和典,森下泰宏
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2018/11/22
  • メディア: 単行本
  • この商品を含むブログ (1件) を見る

目次

本書は3部構成になっている.無理に飛ばさず,最初から順番に読むと良いと思う.僕自身は「基礎編」に知らなかったこともあり,本当に学びが多く,本書の読者層に限りなく近そうだなと感じた.さらに補足のために多く用意されている「コラム」もとても良かった.今回の書評記事では,学んだことを全てまとめるのではなく,一部を抜粋して紹介しようと思う.

  • 基礎編
    • Chapter.1 : DNS が作られた背景
    • Chapter.2 : ドメイン名の登録管理の仕組みと管理体制
    • Chapter.3 : DNS の名前解決
    • Chapter.4 : DNS の構成要素と具体的な動作
  • 実践編
    • Chapter.5 : 自分のドメイン名を設計する
    • Chapter.6 : 自分のドメイン名を管理する ~ 権威サーバーの設定
    • Chapter.7 : 名前解決サービスを提供する ~ フルリゾルバーの設定
    • Chapter.8 : DNS の動作確認
    • Chapter.9 : DNS に対するサイバー攻撃とその対策
    • Chapter.10 : よりよい DNS 運用のために
  • アドバンス編
    • Chapter.11 : DNS の設定・運用に関するノウハウ
    • Chapter.12 : 権威サーバーの移行(DNS の引っ越し)
    • Chapter.13 : DNSSEC の仕組み
    • Chapter.14 : DNS におけるプライバシーの概要と実装状況

正誤表は以下にある.本書は「第1刷 → 第2刷 → 第3刷」と積極的に修正していることもあり,書店で買うときには確認しておくと良さそう.

www.sbcr.jp

gTLD

Chapter.2-01「レジストリとは」を読むと,後半に TLD (Top Level Domain) の解説がある.現在 gTLD (Generic TLD) は「1300種類」を超えていて,2012年からは Community TLD / Geographic TLD / Brand TLD という新しい分類の gTLD もある.ICANN から委任された gTLD を以下のウェブページで確認すると,NETFLIXTOKYOBLOG など,良さそうな gTLD も多くあった!

newgtlds.icann.org

スタブリゾルバー / フルリゾルバー / 権威サーバー

Chapter.4-01「3種類の構成要素とその役割」では,DNS の構成要素の役割の違いがまとまっている.全体像を理解するのに最適だと思う.

  • スタブリゾルバー(情報が欲しい人)
  • フルリゾルバー(情報が欲しい人からの依頼を受けて名前解決をする人)
  • 権威サーバー(情報を提供する人)

そして,本書では「名前解決要求(私の代わりに名前解決をして IP アドレスを教えて下さい)」「問い合わせ(IP アドレスを教えて下さい)」という表現を明確に使い分けている.「名前解決要求」「スタブリゾルバーからフルリゾルバーへの問い合わせ」のことで,「問い合わせ」「フルリゾルバーから権威サーバーへの問い合わせ」のことを意味している.本書は全体的に「初学者のための言葉選び」が秀逸だなと思う.

ゾーン転送

Chapter.6-02「権威サーバーの可用性」では,ゾーン転送の仕組みが紹介されている.ゾーン転送をするときに「AXFR (Authoritative Transfer)」「IXFR (Incremental Transfer)」の計2種類の方法があったり,「SOA リソースレコード」を問い合わせて「SERIAL 値」を比較したり,基本的な仕組みを改めて整理できた.正直 BIND を運用した経験がなく,1度 BIND を構築すると良さそう(オープンリゾルバーにならないように注意しつつ).

$ dig +nssearch google.com
SOA ns1.google.com. dns-admin.google.com. 276028539 900 900 1800 60 from server 216.239.34.10 in 48 ms.
SOA ns1.google.com. dns-admin.google.com. 276028539 900 900 1800 60 from server 216.239.36.10 in 51 ms.
SOA ns1.google.com. dns-admin.google.com. 276240212 900 900 1800 60 from server 216.239.32.10 in 77 ms.
SOA ns1.google.com. dns-admin.google.com. 276028539 900 900 1800 60 from server 216.239.38.10 in 145 ms.

dig コマンド詳解

Chapter.8-02「コマンドラインツール」では,よく使う dig コマンド以外にも drill コマンドや kdig コマンドなど,知らないコマンドも紹介されていた.特に dig コマンドのオプション解説と出力されるセクションの解説は素晴らしく,今まで感じていた "もやもや" をスッキリと解消できた.今まで ANSWER SECTION 以外は気にしていなかったけど,今なら dig コマンドの出力が "チョット" 読める!

  • HEADER SECTION
  • QUESTION SECTION
  • ANSWER SECTION
  • AUTHORITY SECTION
  • ADDITIONAL SECTION

HEADER SECTION では statusflags に注目する.status は以下の4種類となる.

  • NOERROR ... 通常応答
  • SERVFAIL ... サーバー側の異常で名前解決に失敗した
  • NXDOMAIN ... その名前とその下の階層にはいずれのリソースレコードも存在しない
  • REFUSED ... アクセス制限や管理ポリシーなどによりリクエストを拒否した

そして flags には「応答にどのフラグビットがセットされているか」を意味している.今まで意識してなく,学べて良かったと思う.

  • qr ... Query Response(応答である)
  • rd ... Recursion Desired(名前解決要求をした)
  • ra ... Recursion Available(名前解決が可能である)
  • aa ... Authoritative Answer(権威を持つ応答である)
$ dig google.com A

; <<>> DiG 9.10.6 <<>> google.com A
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 17477
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

フルリゾルバーになろう!

そして,Chapter.8-04「dig コマンドの応用」では,実際にフルリゾルバーになり,名前解決を試みる.具体的には dig コマンドのオプションとして +recurse+norecurse の違いを理解する必要がある.+recurse は再帰的な問い合わせを要求し,+norecurse は非再帰的な問い合わせを要求するため,スタブリゾルバーからフルリゾルバーへの問い合わせに +recurse を使うことになる.以下は本書を参考に dig コマンドと +norecurse を使って www.jprs.co.jp の IP アドレスを非再帰的に問い合わせてみた.

# status: NOERROR
# ANSWER が 0
# flags に aa なし(委任情報が応答されている)
$ dig +norecurse @A.ROOT-SERVERS.NET www.jprs.co.jp A

# status: NOERROR
# ANSWER が 0
# flags に aa なし(委任情報が応答されている)
$ dig +norecurse @a.dns.jp www.jprs.co.jp A

# status: NOERROR
# ANSWER が 1
# flags に aa あり(権威を持つ応答がある)
$ dig +norecurse @ns1.jprs.co.jp www.jprs.co.jp A

;; ANSWER SECTION:
www.jprs.co.jp.     300    IN  A   117.104.133.165

なお A.ROOT-SERVERS.NET など,ルートサーバーの情報は公開された「ヒントファイル」から取得した.最新のルートサーバーの一覧を得る仕組みを「プライミング」と呼ぶ.

サイバー攻撃

Chapter.9「DNSに対するサイバー攻撃とその対策」では,以下のような DNS に関係するサイバー攻撃の種類と対策を学べる.特に対策を学べるのは素晴らしく,DNS を実際に運用するときに役立つ知識だと思う.

  • DNS リフレクター攻撃
  • ランダムサブドメイン攻撃
  • BIND の脆弱性を突いた DoS 攻撃
  • キャッシュポイズニング
  • ドメイン名ハイジャック

例えば,DNS リフレクター攻撃の影響を緩和するために「RRL (Response Rate Limiting)」の仕組みを導入し.同じ宛先から同じ応答が閾値を超えて発生した場合に制限をするという話だったり,キャッシュポイズニングの影響を緩和するために「ソースポートランダマイゼーション」で,ソースポート番号をランダムに変化させる話だったり,個人的に「理解が浅いな」と感じる部分を整理できて良かった.IP53B (Inbound Port 53 Blocking) の紹介もある.サイバー攻撃の流れも丁寧な図表でスッキリと理解できた.

DNS Over HTTPS

Chapter.14-04「DNS over HTTPS」では,HTTPS の GET / POST メソッドにより DNS に問い合わせをする「DNS over HTTPS」の紹介がある.RFC 8484「DNS Queries over HTTPS (DoH)」をザッと読むと,レスポンス形式はバイナリになっている.

:status = 200
content-type = application/dns-message
content-length = 61
cache-control = max-age=3709

<61 bytes represented by the following hex encoding>
00 00 81 80 00 01 00 01  00 00 00 00 03 77 77 77
07 65 78 61 6d 70 6c 65  03 63 6f 6d 00 00 1c 00
01 c0 0c 00 1c 00 01 00  00 0e 7d 00 10 20 01 0d
b8 ab cd 00 12 00 01 00  02 00 03 00 04

Google の「JSON API for DNS over HTTPS (DoH)」を使うと,RESTful API として使える.例えば「外形監視」などに活用できそう.

developers.google.com

試しに kakakakakku.hatenablog.com を指定して API を実行すると,以下のようなレスポンスだった.

$ curl -s https://dns.google.com/resolve\?name\=kakakakakku.hatenablog.com\&type\=A | jq .
{
  "Status": 0,
  "TC": false,
  "RD": true,
  "RA": true,
  "AD": false,
  "CD": false,
  "Question": [
    {
      "name": "kakakakakku.hatenablog.com.",
      "type": 1
    }
  ],
  "Answer": [
    {
      "name": "kakakakakku.hatenablog.com.",
      "type": 1,
      "TTL": 59,
      "data": "13.115.18.61"
    },
    {
      "name": "kakakakakku.hatenablog.com.",
      "type": 1,
      "TTL": 59,
      "data": "13.230.115.161"
    }
  ],
  "Comment": "Response from 2600:9000:5307:cd00::1."
}

まとめ

  • DNS に再入門するために「DNS がよくわかる教科書」を読んだ
  • 丁寧な図表が多く,説明の歩幅がとにかく小さく,初学者でも理解できるように工夫されていた
  • 「基礎編 → 実践編 → アドバンス編」と進むため,幅広い読者層に学びがありそう
  • 今年読んだ本の中でもトップレベルに「読んで良かった!」と思える1冊だった

DNSがよくわかる教科書

DNSがよくわかる教科書

  • 作者: 株式会社日本レジストリサービス(JPRS)渡邉結衣、佐藤新太、藤原和典,森下泰宏
  • 出版社/メーカー: SBクリエイティブ
  • 発売日: 2018/11/22
  • メディア: 単行本
  • この商品を含むブログ (1件) を見る

React Hooks 入門 : useEffect() を試す

React 16.8 で追加された新機能「React Hooks」は React の機能を効率的に使えるようにする仕組みで,具体的には useState()useEffect() などを使う.日本語化されたドキュメントが非常に読みやすく,以下のドキュメントを読むと React Hooks の概要を学べる.特に「1. フックの導入」を読むと,どんな課題を解決するために React Hooks が登場したのか?という歴史的な背景を学べる.

ja.reactjs.org

また「2. フック早わかり」を読むと,よく使う React Hooks の機能と Custom Hooks の紹介もある.そして「なぜ Hooks という名前なのか?」という意味も学べる.hook into と書かれていて,なるほどー!と思った.

フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。

ja.reactjs.org

副作用フック : useEffect() を試す

ja.reactjs.org

今回は「4. 副作用フックの利用法」を読みながら useEffect() を試す.まず,ドキュメントに載っているコードを create-react-app と TypeScript で書き直すと,以下のようになる.React Hooks 的には count State を useState() で定義し,さらに count State をタイトルに反映する useEffect() を定義している.

import React, { useState, useEffect } from 'react';

const App: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

ボタンを押すと,画面とタイトルを更新できる.React コンポーネント内にある DOM を更新したり,外部データを取得したりすることを「副作用」もしくは「作用」と表現し,英語では「side-effect」もしくは「effect」と表現する.

f:id:kakku22:20191022014857p:plain

クリーンアップ

従来 React でクリーンアップをするために実装していたライフサイクル componentWillUnmount() を React Hooks で実装する場合,useEffect() から関数を返せば良く,シンプルな実装になる.以下のように return で関数を返す.ドキュメントに載っている通り cleanup() 関数を実装して返しても良いし,アロー関数を返すこともできる.

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return (() => console.log('Clean Up 🐤'));
});

useEffect() は画面描画時(初回 render)と画面更新時に実行される.よって render 後に副作用が起きることになり,クリーンアップも毎回実行されることになる.実際にクリーンアップを追加した状態でボタンを押すと,コンソールに繰り返しログが出力されていた.

Clean Up 🐤
Clean Up 🐤
Clean Up 🐤
Clean Up 🐤
Clean Up 🐤

副作用のスキップ

ドキュメントを読み進めると,後半に「ヒント」として「副作用のスキップによるパフォーマンス改善」というトピックがある.render ごとに副作用を起こすとパフォーマンスに影響するため,render 時に「特定の値が更新されていない場合は副作用をスキップできる」構文がサポートされている.

以下のように useEffect() の第2引数に配列を指定する.今回は [count] だけど,[count, count2, count3] のように複数の State を指定することもできる.すると,第2引数に指定した値が更新されたときのみ副作用が起きるように抑制できる.

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return (() => console.log('Clean Up 🐤'));
}, [count]);

副作用を1回だけ起こす

例えば,画面描画時(初回 render)に API を実行して,その後は副作用を起こさないように抑制する場面もある.その場合は useEffect() の第2引数に空配列 [] を指定すると「何の値にも依存しない」ことを意味することになり,結果的に副作用を1回だけ起こせるようになる.

実際に試すため.まず axios を追加し,useEffect() から random.cat API を実行する.ランダムに返ってくる猫画像 URL を meowUrl State に設定する.

const [meowUrl, setMeowUrl] = useState('');

useEffect(() => {
  const fetch = async () => {
    const results = await axios('http://aws.random.cat/meow');
    setMeowUrl(results.data.file)
  };
  fetch();
}, []);

取得した画像を表示すると,期待通りの動作になった.JSX の部分は GitHub 参照!

f:id:kakku22:20191022013733p:plain

試しに useEffect() の第2引数を削除すると,無限ループになり API を繰り返し実行してしまうため,第2引数に空配列 [] を指定する重要さを確認できた.無駄なリクエストを送り続けないように気を付けよう.

f:id:kakku22:20191022013746p:plain

まとめ

  • 最近「React Hooks」を勉強している
  • ドキュメントを読みながら useEffect() を試した
  • ライフサイクル/クリーンアップ/スキップなど,理解しておくべき仕様を学べた
  • useEffect() の第2引数に空配列 [] を指定すると「何の値にも依存しない」ことを意味する
  • サンプルコードは GitHub に置いておいた

github.com

Material-UI の Snackbars コンポーネントを実装する

引き続き Material-UI を使ったプロトタイプ開発をしている.今回は Material-UI の Snackbars コンポーネントをサンプルコードを参考に実装しながら理解を深めていく.スナックバー(Snackbars)は Material Design に定義された UI で,画面上にメッセージを一時的に表示する場面で使う.例えば Gmail でメールを削除すると,画面左下に「スレッドをゴミ箱に移動しました。」と表示される.

material-ui.com

なお,実装したサンプルコードは GitHub に公開してある.TypeScript で create-react-app を実行してから実装を進めた.記事に載せるコードはポイントを限定し抜粋するため,実際にコード全体を見る場合は GitHub を参照して頂ければと!

$ create-react-app sandbox-material-ui-snackbars --typescript

github.com

Snackbars コンポーネント

Snackbars コンポーネントで使えるプロパティ一覧は以下のドキュメントに載っている.最初から多くのプロパティを実装すると混乱するため,Step By Step に整理していく.

material-ui.com

anchorOrigin / message / open プロパティ

まず,anchorOrigin プロパティを使うと,スナックバーを表示する位置を指定できる.以下のように horizontal 3種類と vertical 2種類を組み合わせて指定する.

  • horizontal
    • left
    • center
    • right
  • vertical
    • top
    • bottom

message プロパティは,スナックバーにメッセージを表示するために指定する.そして open プロパティに true を指定するとスナックバーが表示されるため,今回は handleClick() を経由して React State open を更新する.React Hooks を前提にするため useState() を使う.プロパティを組み合わせると,以下のような実装になる.

const App: React.FC = () => {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Open Snackbar 😃</button>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        message={<span id="message-id">This is Snackbar 🎃</span>}
      />
    </div>
  );
}

実際に動作確認をする.画面左上に配置したボタンをクリックすると,画面左下にスナックバーを表示できる.

f:id:kakku22:20191012222129p:plain

anchorOrigin プロパティを以下のように指定すると,今度は画面右上にスナックバーを表示できる.

anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
}}

f:id:kakku22:20191012222142p:plain

onClose / autoHideDuration プロパティ

open プロパティと onClose プロパティを組み合わせることにより,表示したスナックバーを非表示にできる.onClose プロパティには関数を指定するため,今回は handleClose() を経由して React State openfalse に更新する.

ただし,onClose プロパティを発火するためには画面をクリックする必要があるため,自動的に非表示にするために autoHideDuration プロパティを組み合わせる.autoHideDuration プロパティは onClose プロパティに指定した関数を実行する前の待機時間となり,単位は milliseconds となる.プロパティを組み合わせると,以下のような実装になる.今回は「5秒」で自動的に非表示になる.

const App: React.FC = () => {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={handleClick}>Open Snackbar 😃</button>
      <Snackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        autoHideDuration={5000}
        onClose={handleClose}
        message={<span id="message-id">This is Snackbar 🎃</span>}
      />
    </div>
  );
}

onClose プロパティの仕様を読むと,関数の引数に reason があり,「発火理由」を以下の2種類から判断できるようになっている.ドキュメントを読んでも clickaway の意味がわからず,自分なりに調べて挙動を理解できた.

  • timeout : autoHideDuration プロパティにより発火した場合
  • clickaway : スナックバー以外の適当な画面領域をクリックして発火した場合

よって,以下のように clickaway の場合に React State openfalse に更新しないように早期リターンをすると,適当な画面領域をクリックする影響を抑止できる.多くの UI で考慮するべきポイントだと思う.

const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
  if (reason === 'clickaway') {
    return;
  }
  setOpen(false);
};

f:id:kakku22:20191012222200p:plain

action プロパティ

action プロパティを指定すると,スナックバーから発火できる追加のアクションを指定できる.以下に抜粋した実装のように Button コンポーネントと IconButton コンポーネントを指定すると,Gmail などでよく見るスナックバーになる.デザインは今回も makeStyles() を定義している(GitHub 参照).

<Snackbar
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message={<span id="message-id">This is Snackbar 🎃</span>}
  action={[
    <Button color="secondary" size="medium" onClick={handleClose}>取り消し</Button>,
    <IconButton
      key="close"
      aria-label="close"
      color="inherit"
      className={classes.close}
      onClick={handleClose}
    >
      <CloseIcon />
    </IconButton>,
  ]}
/>

f:id:kakku22:20191012222213p:plain

まとめ

Material-UISnackbars コンポーネントを実装しながら理解を深めた.ドキュメントに載っているサンプルコードは TypeScript にも対応しているし,React Hooks にも対応しているため,合わせて学べてお得感もある.まだまだコンポーネントが多くあるため,引き続き使っていこうと思う.

Material-UI 関連記事

kakakakakku.hatenablog.com

多くの解析メトリクスをサポートしたコード解析ツール「SonarQube」に入門した

前から気になっていたコード解析ツールに「SonarQube : Code Quality and Security」がある.25種類以上のプログラミング言語をサポートし,多くの解析メトリクスを出力できる点が特徴と言える.たまに「SonarQube」の話題を聞くけど,個人的に今まで使ったことがなく,概要を理解するために SonarQube に入門することにした.試した結果をまとめておく.

www.sonarqube.org

SonarQube は OSS となり,GitHub で実装を確認できる.Java + TypeScript なんだ!

github.com

環境構築

今回は Mac に SonarQube 環境を構築する.Docker Hub に公式イメージがあり,すぐ使える.

$ docker run -d --name sonarqube -p 9000:9000 sonarqube

Docker コンテナを起動し http://localhost:9000 にアクセスすると,以下のように SonarQube 画面が表示される.

f:id:kakku22:20191008114433p:plain

デフォルトアカウントは admin/admin となり,ログインをするとプロジェクトを作成する画面が表示される.

f:id:kakku22:20191008114452p:plain

プロジェクトを作成する

さっそく SonarQube プロジェクトを作成する.今回サンプルコードとして Ruby on Rails で実装した microposts を対象にする.

  • Project key : microposts
  • Display name : microposts

f:id:kakku22:20191008114510p:plain

プロジェクト作成フローはまだ続く.Token を取得したり,プログラミング言語を選んだり,実行環境 (OS) を選ぶ.今回は Ruby を使うため,プログラミング言語は「Other (JS, TS, Go, Python, PHP, ...)」とした.

SonarScanner を実行する

まず「SonarScanner」という解析ツールを以下のページからダウンロードし,パスを通しておく.今回は Mac を検証環境にしているため sonar-scanner-4.0.0.1744-macosx/bin/sonar-scanner を実行できるようにした.

docs.sonarqube.org

準備ができたら「SonarScanner」を実行する.今回はコードベースが大きくなく,30秒程度で終わった.

$ sonar-scanner \
  -Dsonar.projectKey=microposts \
  -Dsonar.sources=. \
  -Dsonar.host.url=http://localhost:9000 \
  -Dsonar.login=xxx

(中略)

INFO: ------------------------------------------------------------------------
INFO: EXECUTION SUCCESS
INFO: ------------------------------------------------------------------------
INFO: Total time: 29.803s
INFO: Final Memory: 35M/124M
INFO: ------------------------------------------------------------------------

解析結果を確認する

「Overview」画面を見ると,大きく以下の「5種類」の解析カテゴリが表示されている.

  • Reliability : バグの件数など
  • Security : 脆弱性の件数など
  • Maintainability : コードスメルの件数など
  • Coverage : カバレッジの密度など
  • Duplications : 重複コードの件数など

f:id:kakku22:20191008114549p:plain

次に「Code Smells」をクリックすると「Issues」画面に遷移する.今回サンプルコードの中にある「空メソッド」に警告が出ていた.SonarQube Rules は全てドキュメントにまとまっているため,今回は以下の「RSPEC-1186」に該当していたことがわかる.

rules.sonarsource.com

f:id:kakku22:20191008114612p:plain

さらに「Measures」画面を見ると,解析結果を可視化したグラフを多く確認できる.例えば「Maintainability - Overview」は以下のようになっている.可視化の充実度の高さは SonarQube の良さだと思う.

f:id:kakku22:20191008114647p:plain

日本語化をする

SonarQube には多くのプラグインがあり「Administration」「Marketplace」と遷移をすると,プラグインをインストールできる.日本語化をするためにプラグインを検索したところ「Japanese Pack」を発見した.インストールし,SonarQube を再起動すると,部分的に日本語化できた.まだ完全ではなく,l10n (Localization) を管理する OSS にプルリクエストを送ってみると貢献できそうな気がする.

github.com

GitHub 連携

GitHub と連携し,プルリクエストに SonarQube の解析結果を自動的にコメントする仕組みを試そうとしたところ,SonarQube で使える「Pull Request Analysis」機能は「Developer Edition 以上」で使えるように制限されていた.プラグインを検索したところ「GitHub Plugin」を発見したけど,既に Deprecated になっていた.個人利用の範囲なら Deprecated であることを理解し,例えば CircleCI と組み合わせて実現することもできるらしく,事例はありそうだった.

docs.sonarqube.org

docs.sonarqube.org

まとめ

前から気になっていた「SonarQube」を試した.検証用途なら Docker コンテナを使って簡単に試せる.サポートしているプログラミング言語の多さと解析メトリクスの可視化の充実度は SonarQube の良さだと思う.調べていたら VS Code や IntelliJ IDEA で使える拡張機能「SonarLint」もあるらしく,今度試してみようと思う.

www.sonarlint.org

シンタックスハイライトをしたコードを PowerPoint / Keynote に載せる

日頃からプレゼンテーション資料を作る場面が多く,PowerPoint と Keynote をよく使う.さらにプレゼンテーション資料にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せることもある.今まで何度も「どうやってシンタックスハイライトをしてる?」と聞かれたため,毎回同じことを教えるのではなく,サッと URL を渡せるようにブログにまとめることにした.

なお,2017年に公開した 「個人的な Keynote ベストプラクティス 2017」 highlight コマンド と pbcopy コマンドを組み合わせる方法を載せているけど,今回はさらに選択肢を増やして「計3種類」紹介したいと思う.

  1. Visual Studio Code を使う
  2. highlight コマンド と pbcopy コマンドを組み合わせて使う
  3. Carbon を使う

kakakakakku.hatenablog.com

1. Visual Studio Code を使う

最もお手軽に使えるのは Visual Studio Code (VS Code) だと思う.VS Code から直接コピーすると,PowerPoint / Keynote にシンタックスハイライトをしたコードをペーストできる.案外知られてなく,紹介すると驚かれることもある.なお,IntelliJ IDEA / GoLand なども同様に使えるため,慣れたエディタから直接コピーすると良いと思う.以下は A Tour of Go のサンプルコードを Keynote に載せている.

f:id:kakku22:20191001233130p:plain

2. highlight コマンド と pbcopy コマンドを組み合わせて使う

次に紹介するのは highlight コマンド と pbcopy コマンドを組み合わせる方法で,数年前から個人的にずっと使っている.以下のようにファイルを指定してコマンドを実行すると,自動的にクリップボードに保存されるため,そのまま PowerPoint / Keynote にペーストできる.以下は同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf main.go | pbcopy

f:id:kakku22:20191001233156p:plain

また highlight コマンドに --style オプションを設定するとデザインを変えることもできる.以下は Moria スタイルを設定し,同様のサンプルコードを Keynote に載せている.

$ highlight -O rtf --style Moria main.go | pbcopy

f:id:kakku22:20191001233215p:plain

highlight コマンドの詳細は以下に載っている.

www.andre-simon.de

3. Carbon を使う

「Carbon」を使うと,シンタックスハイライトをしたコードを画像に変換できる.GitHub の実装を読むと highlight.js というライブラリに依存していた.Carbon はデザインに限らず,ウィンドウサイズ/行数/背景色など自由度高く設定できる点が良く,以下は同様のサンプルコードを Carbon で調整し,Keynote に載せている.

f:id:kakku22:20191001233234p:plain

まとめ

PowerPoint / Keynote にシンタックスハイライトをしたコード(JSON / YAML なども含む)を載せる方法を「計3種類」紹介した.目的により,自分に合った方法を選ぶと良いと思う.よく聞かれることは今後も積極的にブログに書いていくぞ!

関連記事

以下の記事も「プレゼンテーション中にうまくデモを見せる Tips」をよく聞かれるため,まとめた記事となる.

kakakakakku.hatenablog.com