Mac導入時にやること #2 バックスラッシュをより簡単に

環境

• mac book pro 2017
• USキーボード
• OS : Sierra(10.12.6)

option + \ でバックスラッシュをタイプするのがめんどくさいです。 キートップに ‘\'が印字されていますが、押すと¥ が出力されます。

うーん。

調べたらありました。 会社で使ってるmacでそんな設定したかな？覚えてない・・・。

スクリーンショットがあったほうがわかりやすいと思うので掲載しておきます。

手順

1. 右上にあるAをクリックして「"日本語"環境設定を開く」を選択

2.　「入力ソース」を選択し、”¥”キーで入力する文字をバックスラッシュ”\”に変更する

以上、めでたし。

参考サイトによると、ほかのIMEをご利用の場合は別の設定が必要のようです。

qiita.com

Mac導入時にやること #1 Sierra ,emacs , metaキー

最近、macbook pro 2017を買いました。

仕事でも使っているのですが、 emacsでのメタキーの位置が悪くて以前に「Optionキー –> Metaキー」に設定したのですが 設定したのが数年前でどうやってるのか思い出せませんでした・・。

見つけたサイトと設定場所は変わってませんでしたが、少し古かったのでスクリーンショットを掲載しておきます。

設定手順

「Terminal」 –> 「環境設定」 –> 「プロファイル」 にある「メタキーとしてOptionキーを使用」にチェックを入れると解決する

playet.jugem.jp

「React Design Patterns and Best Practices」を読んだ

発売日に予約したのに、積読状態だった書籍を消化。

書籍名がステキで思わず購入。先日ようやく読み終わった。

個人的には、とても良書だと思う。 reactを使って開発しているエンジニアにはぜひご一読いただきたい書籍だと思う。

タイトルから想像がつくように初学者向けの書籍ではない。 規模はともかく「すでにreactの開発したことがある」ことを前提にしていると思う。

ただしタイトルの「ベストプラクティス」という表現は適切か分からない。ここ注意

まだ模索中の方法論もあり、この問題を解決をするには今はこんな方法(npm library)があるよ！！っていう紹介が多い。 ただし、使い方の紹介だけでなく技術的な背景が説明されているため机上だけでも十分理解できる内容となっていると思う。

目から鱗が落ちるアイディアも確かにあったり、問題と認識してなかった部分について問題意識を持つことができた。

忘れないうちにまとめてみたい。

HoC ( Higher-order Component)

T.B.D.

Server side rendering –> client side renderingのデータ受け渡し

T.B.D.

Data Fetch を宣言的に書く

T.B.D.

Regular CSSはスケールしない

T.B.D.

React Design Patterns and Best Practices

docker build で 「no space left on device」と出たらやること

docker利用時にタイトルのno space left on deviceが出た場合に下記の２つを実施して解決。

やる前に

• 稼働してるコンテナを止めた方がいいよ。

その1

コンテナの削除

docker ps -aq | xargs docker rm

イメージの削除

docker images -aq | xargs docker rmi

その2 (別のやり方)

2017/09/30追記

docker system prune -a

docs.docker.com

nginx error_pageをS3にしてみる

nginx + rails および AWS の構成。

Route53のDNS failover機能をつかってsorryページをS3 Bucketに用意するようにした。 nginxがダウンした場合はこれでOKだが, railsがダウン場合も同じようなことをしたい。

rails がダウンした場合(502 Bad gateway)のsorryページをnginx のinternalではなく、DNS failover のsecondary になっているS3 Bucketにしてみようと思ったという話。

任意のリージョンに任意のbucketを作成。sorryページを用意。 オレゴン州にXXXXXXXというbucketを作成。

XXXXXXX.s3-website-us-west-2.amazonaws.com

Amazon S3 の指定bucketに用意したSorryページへ nginx でエラー時に飛ばそうとしてみたら 下記のエラーがブラウザに表示された。

404 Not Found

• Code: NoSuchBucket

• Message: The specified bucket does not exist

• BucketName: XXXXXXX

• RequestId: YYYYYYYYYY

• HostId: ZZZZZZZZZZZZZZZZZZZZZZZ

タイポがありミスってた。だから無いと出ていたみたい。

タイポを修正後、再実行してみたら下記のエラーがブラウザに表示された

400 Bad Request

• Code: IncorrectEndpoint

• Message: The specified bucket exists in another region. Please direct requests to the specified endpoint.

• Endpoint: XXXXXXX.s3-website-us-west-2.amazonaws.com

• RequestId: YYYYYYYYYYYYYY

• HostId: ZZZZZZZZZZZZZZZZZZZZ=

原因は下記のURLと同じそう。 https://forums.aws.amazon.com/thread.jspa?threadID=215640

しばらく時間をおいてから確認したら、うまくいった。

設定ファイルの一部は下記の通り。

upstream XXXXXXX {
  server s3-website-us-west-2.amazonaws.com;
}


server {
  .
  .
  省略
   .
   .

  error_page 502 = @fallback;

  location @fallback {
     proxy_pass http://XXXXXXX;
  }
}

webpack-dev-server トラブルシューティング

webpack-dev-serverで以下のようなエラーが出た場合は、 他に開いているターミナル上で npm start (webpack-dev-server)している可能性がある

> app@0.0.0 start /Users/user/workspace/app
> webpack-dev-server --config ./webpack.config.js

events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1262:14)
    at listen (net.js:1298:10)
    at doListening (net.js:1397:7)
    at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.0.0 start: `webpack-dev-server --config ./config/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the app@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2017-06-05T09_24_20_493Z-debug.log

【感想】React Components

React Components

目的

• 現職のポジションで活かせる内容が一つでもあるか？
  • 初学者向けの教材として利用可能な書籍を探してます。
  • 導入可能な情報があるかどうか

感想

内容としては広く浅くな印象。 洋書であるが比較的読みやすいように思える。

初学者向けに書かれてはいるようだが、実際にはもう少しハードルが高いように思える。 よって会社の新人研修向け教材には推薦しにくい。

他の書籍と比べると、少し違った切り口での情報が多い気がする。そのため新鮮な印象。

紹介	切り口
Fluxアーキテクチャ	理解するために自分で作ってみよう
Ajax	socket.io
testing	考え方

*　socket.io:知らなかった。今後もう少し詳しく調べてみよう。

• node.jsについてもちょっとだけ紹介。
• testingは、Jestやenzymeを使ってxxxxというものではなくテストについての考え方を理解しようというもの。
  • ユニットテスト , 機能テストについて
• deep-freeze : 知らなかった。 immutable.jsという選択肢もありそうだが、reduxで使うならこちらの方が親和性が高そうだ。調べてみよう。
• TravisCIについても紹介されていた。

  後で調べたいキーワード

npm

• systemjs

• GitHub - medialize/sass.js: Sass.js - API for emscripted libsass to run in the browser

• react-router hash-history
• server.js node server.js
• socket.io
• deep-freeze

Material design

• Introduction - Material design - Material design guidelines

• Elevation & shadows - Material design - Material design guidelines

• Material motion - Motion - Material design guidelines
• Choreography - Motion - Material design guidelines

customize

• getmdl.io

HISTORY_API

• developer.mozilla.org

others

• Device-independent pixel - Wikipedia