読者です 読者をやめる 読者になる 読者になる

何にゃふ

何がにゃーんだふざけるな

osxでsphinxのmake latexpdfjaを実行するまで

ソフトウェア開発

技術書典2の原稿をsphinxで書こうと思いsphinx入れたはいいけどpdfのビルドで早速つまったのでメモ

前提条件

  • osx10.11
  • python3.5

準備

sphinxインストール

pip install sphinx

プロジェクト作成

sphinx-quickstart

設定は適当に入力

MacTex2016インストール

homebrewでMacTeXいれようとしたら404 not foundになったので公式から拾ってきて入れた。

以下のWikiを見ながらインストール MacTeX - TeX Wiki

tugの方は繋がらなかったので、以下のミラーサイトより適当に選んでDL https://texwiki.texjp.org/?MacTeX#mirror

(今回はこちらを使わせてもらいました。 http://ftp.riken.go.jp/pub/CTAN/systems/mac/mactex/MacTeX.pkg)

ダウンロード終了後、pkgファイルをクリックしてインストールするとlatexが利用できるようになる。 (PATHが追加されるので、一度ターミナルを開き直す等で環境変数を読み込み直す必要あり)

pdf作成

sphinxのドキュメントルートで以下のコマンドを実行

make latexpdfja

以上でbuild/latex/下にpdfが出力できるようになった。

原稿がんばるぞい

実践実践DDD

ソフトウェア開発 DDD

DDD本を買って初めて読んでから5年くらい。 実務で実験的に導入を始めて3年くらい。 チームメンバーとDDD本の輪読を始めて5ヶ月くらい。 実験プロジェクトでドメイン層の実装を始めて3ヶ月くらい。 実践DDDを読み始めて2ヶ月くらい。

「何となく良さそうな気はするけど、本当に実務で使えるのかよ」みたいな気持ちを抑えながらもDDDの勉強を続けて、 最近ようやく中規模のプロジェクトで導入するチャンスを迎えた。

まだまだ設計段階だけど、既存プロジェクトと新規サービスのシステム境界の設計に「境界づけられたコンテキスト」を使ったところ 思った以上にスッキリした設計になって驚いた。

実験的に戦術的DDDの導入には成功してたので、チームメンバーにコンテキストマップを見せたところかなりの共感を得られた上、 明確なサービス境界と実装イメージまで持てたので、今までやってたことが無駄じゃなかったということが実感できてかなりテンションが上がった一日だった。

明日からシステム設計がんばるぞい。

create-react-appが生成したファイルを読む

ソフトウェア開発 node webpack react

今更ながらreact入門をしてるんだけど、webpack周りとか分からないことが多いのでちょっとずつ勉強している。

今日は簡単にreactアプリの雛形が作れるcreate-react-appが生成してくれたプロジェクトで

npm run eject

した時に生成されるファイルを読んで、何をやってるのかを調べた。

準備

npm i -g create-react-app
create-react-app react-app
cd react-app
npm run eject

上記を実行すると以下のようなファイルが生成される。

~/D/s/react-app ❯❯❯ tree -I node_modules
.
├── README.md
├── config
│   ├── env.js
│   ├── jest
│   │   ├── CSSStub.js
│   │   └── FileStub.js
│   ├── paths.js
│   ├── polyfills.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

これらを一つずつ眺めていく。

ディレクトリ構成

config

その名の通り設定ファイルが置いてある。

public

そのまま公開する静的コンテンツを配置するところ。

scripts

npm runコマンドで実行するスクリプトの実体が置いてある。

src

ビルド前のcssやjsファイルが置いてある。

logo.svgがなぜここにあるのかは今のところ不明。

package.json

依存ファイル、scriptsコマンドの設定や、babel, eslint, jestの設定が書いてある。

あんまり特筆すべきことは無さそう。

configファイル

config/env.js

環境変数設定用。

localの環境変数にREACT_APP_*, NODE_ENV, PUBLIC_URLという名前の環境変数があればハッシュマップに詰めて返す。

config/jest/

単体テストで使うファイルモックか何かの設定っぽい。 よくわからなかったので、おいおい調べる。

config/paths.js

webpackで使うモジュールやindex.js等のパスを設定している。

module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/index.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  ownNodeModules: resolveApp('node_modules'),
  nodePaths: nodePaths
};

resolveApp(path)はアプリのディレクトリからの相対パスに変換してくれる関数。 webpack.configではここで設定したパス変数を使って設定を行っている。

config/polyfills.js

実行環境にPromiseとかFetchとかObject.assignがなければpolyfillを設定してくれる。

config/webpack.config.dev.js, config/webpack.prod.js

webpackの設定が書かれたファイル。

NODE_ENVで切り替えられるのかと思ったけど、デフォルトでは

  • npm run start - > config/webpack.config.dev.js
  • npm run build -> config/webpack.config.prod.js

で決め打ちっぽい。(要検証)

scripts

scripts/start.js

npm run startで呼び出されるscript。

開発用ビルドと開発用サーバの起動を行う。

真面目に読んで一個一個書こうかと思ったけど思ったより長かったので割愛。

主にコンパイル結果のハンドリング(メッセージ出力等)、historyApiFallbackやhttpProxy等のミドルウェアの追加、webpackサーバの起動を行っている。

前述の通りstartはdevelopmentモードで決め打ちになっているので、webpack.config.dev.jsに記載された設定でビルドされる。

scripts/build.js

npm run buildで呼び出されるscript。

productionに配置するためのファイルをビルドする。

実行するとbuildディレクトリ下に本番デプロイ可能な静的ファイルが出力される。

scripts/test.js

npm run testで呼び出されるscript。

実行すると以下のようなpromptが表示される。

Watch Usage
 › Press a to run all tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
  • a: 全てのテストを実行
  • o: 変更されたファイルのみテストを実行
  • p: 正規表現でフィルタされたファイル名のテストのみを実行
  • q: ウォッチモードを終了
  • Enter: 最後に実行したテストを再実行(?)

一度実行するとwatch状態になるので終了したいときはqを押す。

scriptの中ではNODE_ENV='test'でjestを実行してるだけのよう。

全部読みきれてないけど、webpackやnodeの作法が学べるので良い勉強コンテンツだなと思った。

JIRAの親子チケット

ソフトウェア開発

JIRAの親子チケットが作れなくてはまった。

サブタスクっていう課題タイプが気持ち悪くて使ってなかったんだけど、システム設定でサブタスクに設定してる課題タイプしか子チケットになれないらしい。 しかもそのプロジェクトの課題スキーマにサブタスクになれる課題タイプが登録されていないとサブメニューも出てこないので、親子はrelationでやるしかないのかと思ってた。

サブタスクを追加したところ、無事親子チケットが作れるようになり、カンバン上でもスイムレーンを"ストーリー"にすると親子でグルーピングできるようになった。

スクラムチックにやるなら2階層でも何とかなると思うけど、ちょっと違った使い方をしたいなら上記のプラグインに頼る必要があるかもしれない。

便利なカラーピッカーツール

color.adobe.com

なんとなく適当にWebサイトとかアプリのデザインで色を選びたいときにadobeのカラーピッカーツールを使ってるんだけど便利。

webサイト開くとそれっぽい感じのピッカーが出てきて、ポインタをドラッグするといい感じの色を選んでくれる。 パレットのパターンも補色とかトライアドとか選べるんでサイトの雰囲気を決めるのにも良い。

syncer.jp

こっちのサイトはCMYKとかRGBとかHSLみたいな色空間ごとに成分調整をしたり、色んなテーマのカラーパレットから色を拾ったりできるので、色選びに迷った時に重宝する。

ある程度カラーパレットが決まればsassの色関数を使って明度や色相いじってあげるだけでそれっぽい色が作れるので、この辺のツールを上手く活用するとうっかりクソダサカラーチョイスをせずに済むので同じように色彩センスが無い方には是非オススメ。

モチベ

ブログ作ったはいいけど相変わらずやる気ナッシングっぷりが酷かった。 毎日ギッハブに草生やすとか毎日ブログ書くとか絶対続く気がしないけどモチベが低すぎていかんのでとりあえずなんか書こ。

テスト

何か思いついたときに気軽にポストする先が無いので取り敢えず作った。