ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

vagrant box addしたらエラーが出た

server

vagrant使ってみようと思ってvagrant box add ~したんだけど
出かける用事があってMacbook閉じて、帰ってきて再開したらエラーになってできなかった

==> box: Loading metadata for box 'arnemertz/Xubuntu16.04'
    box: URL: https://atlas.hashicorp.com/arnemertz/Xubuntu16.04
==> box: Adding box 'arnemertz/Xubuntu16.04' (v1.0.0) for provider: virtualbox
    box: Downloading: https://atlas.hashicorp.com/arnemertz/boxes/Xubuntu16.04/versions/1.0.0/providers/virtualbox.box
==> box: Box download is resuming from prior download progress
An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

HTTP server doesn't seem to support byte ranges. Cannot resume.

解決策

$VAGRANT_HOMEを設定していなければ
$HOME/.vagrant.dにあるtmpを削除することで解決した

cd $HOME/.vagrant.d/tmp

# box〜を確認
ls

# boxファイルを削除
rm box〜

これで再度vagrant box add ~すれば再度ダウンロードできました（最初からになるけど）

ReactのコードをBabelとBrowserifyでビルドする

javascript

何番煎じかわからないくらいの内容だけど、人に説明する機会ができそうなので整理するために書く

npm-script派なのでgulpとかは使いません

各ライブラリ、ツールの説明

雑な説明とリポジトリURL
詳しく知りたい場合は別のサイトでたぶん死ぬほど書いてる

Reactとは

facebook製のviewライブラリ
同じStateがあれば同じ結果が出てきて、おかしかったらState見ればわかるの楽だと思って使い始めました

github.com

Babel

ES2015とかのコードをちょっと前の仕様のコードに変換してくれるトランスパイラー
これがあればES2015のコードが動かないブラウザでも動くコードに変換してくれる

JSXを使う場合は、JSXの変換もしてくれる

github.com

Browserify

commonjs方式で書いたjavascriptの依存関係を解決してくれるすごいやつ
これがmodule分割したものをまとめてくれてブラウザで動く状態にしてくれる

github.com

本題

本題のReactのコードをbabelとBrowseify使ってビルドする

インストール

npmで必要なパッケージをダウンロード
今回は面倒なので全部--saveでインストールする

npm i -S react react-dom browserify babelify babel-preset-es2015 babel-preset-react babel-plugin-transform-es2015-modules-commonjs

Reactコードの準備

ES2015のclassで書いたReactのコードを用意する

//a.js
import React from 'react'
const A = (props) => (
  <div>
    <h1>A Component</h1>
  </div>
)
export default A;

//b.js
import React from 'react'
const B = (props) => (
  <div>
    <h1>B Component</h1>
  </div>
)
export default B;

//main.js
import React from 'react'
import ReactDOM from 'react-dom'
import A from './a'
import B from './b'

class Main extends React.Component {
  render() {
    return (
      <div>
        <A />
        <B />
      </div>
    )
  }
}

ReactDOM.render(<Main />, document.getElementById('app'))

browseifyとbabelでビルドする

./node_modules/.bin/browseirfy main.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

という感じになる

でも待って

流石に長いよね。babelの公式には.babelrcにbabel(babelify)の設定は記述する

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

これを作ることによって

./node_modules/.bin/browserify main.js -o bundle.js -t babelify

これだけでbuildできるようになる。
babelの設定は.babelrcに書くのがデフォです。

プロダクションビルド

この状態で作られたbundle.jsは容量も大きいです。
せめてminify化したりしたいですよね

npm i -S uglifyify

uglifyifyを使って圧縮します

こんな感じ

./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify

簡単ですね。
sourcemapを出したいなら

./node_modules/.bin/browserify main.js -o bundle.js -t babelify -g uglifyify --debug

--debugオプションを付けるとsourcemapが出せるらしいです

kindle買いました

FreeTalk

amazonプライムデーの時にkindle paperwhiteを買いました。
購入から1ヶ月くらい経ったのでレビューしてみる。

Kindle Paperwhite Wi-Fi、ブラック

Kindle Paperwhite Wi-Fi、ブラック

買ったもの詳細

他のブログとか見て、散々悩んだ結果wifiのみ、キャンペーン情報無しを選択
使った感想としては4GBしかストレージ無いけど1日で4GB分の本読めないしwifiのみで困ってないです。

使ってみて良かった所

重量

kindleを購入する前は本を持ち歩いていて
地味に重いと思ってたのですがkindleは205gらしくとても軽いです。

更に小さいので気軽にかばんに入れて持ち運べます。

読書時間

通学・通勤時間はずっとtwitterをしていたのですが
kindleを買ってから本を読むようになりました。

最近は漫画もほとんど読まない。読むとしても暇な時に一気見。という生活だったのですが
隙間時間が読書時間になって、読書量が増えました

読んだ本

購入から読んだ本

github.com

漫画

paperwhiteの解像度300ppiのおかげで字が潰れていて読めないってことはなかった。

ページめくる時のチラつき？が気になるという記事を見かけたけど
個人的には別に気にならず、下のツイートのように楽しく漫画読んでる。

技術書

scala教科書をpdfでダウンロードして読んでる。

自分は普通に読めるのですが
母（40代後半）に見せた所「そんな小さい字読むのしんどいわ」と言われたので
自分の感覚以上に文字が小さく、以外と目が疲れてるのかもしれない。

技術書といえばdockerを勉強したくて
scala教科書読み終わったら買って読もうかと思って調べてて、下の商品が気になった

プログラマのためのDocker教科書 インフラの基礎知識＆コードによる環境構築の自動化

プログラマのためのDocker教科書 インフラの基礎知識＆コードによる環境構築の自動化

この商品を見てるとこんな事が書いてた

本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。
文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。
ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください

持ってるkindleで試し読みしてみたら
本文は普通に読めるんだけど、太字の部分？だけ字が潰れて読めない…

辛い所とか

電子書籍読み始めると、紙の本はいいんだけど
持ち運ぶのがしんどい（重さ的に）ので結果的に読む時間が上手く取れない

ipad mini2を友達に貸してもらった時は
字潰れてない！拡大せず字が読める！！漫画なんて見開きで読める！！！って感動したけど
E-Ink使ってみるとやっぱり本読むなら目が痛くならないしE-Inkがいいなと思った。

もうちょっと画面大きいといいなと思うけど（希望的にはipad miniくらい）
E-Inkは線画しんどいって聞いたので、画面大きくなるとやっぱり難しいんだろうか

まとめ

技術書読むのはものによっては厳しいの
Amazonなのか、出版社なのか頑張ってなんとかして欲しい。
せめてkindle paperwriteで見れるものを頼む。

とりあえず漫画読む分には、電車の中でも会社でも気づかれずに読めるし
数十冊持ち運べるので、読み終わってしまって先が見れないとかが無いのでいいと思う。

何より会社で花火ちゃんの可愛さを楽しめるあたり最高のツールだと思ったので
今セールやってるし、みんなもkindleとクズの本懐買って、花火ちゃんの可愛さを味わうといいよ。