はてなブックマーク

Reactでアプリケーションを実装していて、 hoge.com/* にはユーザー向けReactアプリ、 hoge.com/admin/* には管理者向けのような構成にしたいと思ったことはないですか？僕はあります。 これらのアプリをnginxをbaseとしたDocker imageとしてデプロイしようとした時、nginxの設定にとても苦しんだのでここに書き記しておきます。 nginx.conf server_tokens off; server { listen 80 default_server; server_name localhost; location /admin { root /usr/share/nginx/html/admin; index index.html; try_files $uri $uri/ /index.html /usr/share/nginx/html/

React Developer Toolsとは Facebookから公式で提供されているデバッグ用ツールです。 React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。 Reactで作ったページの状態をすぐ把握できるため、デバッグが捗ります。 React Developer Toolsは現在、３種類が提供されています。 Google Chrome拡張機能版 Firefox拡張機能版 Standalone版 Safariでデバッグしたい場合やReact Navtieをデバッグしたい場合はこちらを使用 この記事ではGoogle Chrome拡張機能版を元に解説していきます。 インストール方法 こちらからインストールをします。 追加するとアドレスバーの横にRe

create-react-appコマンドを実行すると、React.jsプロジェクトの雛形を作れます。 その雛形のsrcディレクトリ以下にregisterServiceWorker.jsというファイルがあります。 また、ビルドするとservice-worker.jsというファイルが生成がされます。 雛形のコードがService Worker上でしている事と、上記ファイルについてまとめてみました。 Service Workerについて Service Workerとは、リッチなオフライン体験・定期的なバックグラウンド同期・プッシュ通知など、いわゆるPWAの機能を実現するために基盤となる技術です。 （詳しくはGoogleのドキュメントにて解説されています。Service Worker の紹介） Service Workerによって実現できる機能は様々ですが、create-react-appで作っ

この記事について Google Chromeに備わった機能を使ってUserAgentを偽装する方法を2種類紹介します。 特定のOSだったら○○する、特定の機種だったら☓☓するといった処理の動作確認に便利です。 ※Google Chrome 55（2016/12/18現在最新版）で確認した内容になります。 その１：デバイスエミュレータ機能を使う 概要 デバイスエミュレータ機能を使うと、UserAgentの偽装はもちろん、ページの表示領域の再現等もできます。 動作確認の内容が「iPhoneで見た時〜」「Androidで見た時〜」ぐらいの粒度ならこちらの方法で事足ります。 手順 １. Developer Toolsを開く Windowsなら「F12」、Macなら「Control + Option + I」でDeveloper Toolsを開きます。 開くとこんな感じの画面が出現します。 ２. d

Bash on Ubuntu on Windowsについて ざっくり言うとWindows上でUbuntuが動きますよって言うもの。 略してBoWと呼ぶことも。（この記事でも以降BoWで呼びます） 執筆時（2017/05）はUbuntu 16.04.2 LTSが扱える模様。 詳しい解説はこの辺の記事が参考になると思います。 Bash on Ubuntu on Windowsとは？ そのインストールと使い方 Buildで発表された「Bash on Ubuntu on Windows」とは？ ただ、デフォルトのままだと色々と不便な点が多いので、使いやすくなるようカスタマイズしていきます。 環境構築用のメモ ちょっとだけ快適な環境になるまでのメモです。 Windows 10 Creators Updateを適用させる BoWを入れる前にWindows 10 Creators Updateを適用させ

プログラミングしてたら絶対にやるコメントアウト、アンコメント。 それを色々と楽にしてくれるvimのプラグインの紹介です。 プラグインの特徴 コメントの状態（コメントアウト、アンコメント）を切り替えるコマンドや、 行末にコメントの挿入といったコマンドなど、コメントアウト関係のコマンドを提供してくれるプラグインです。 またファイルタイプを見ているため、PHPなら//、htmlなら<!-- -->といった具合に 言語仕様に合わせた適切なコメントアウトを挿入してくれます。 コマンド 多数のコマンドが提供されているが、便利なもの、特徴的なものを抜粋。全てのコマンドはこちらから。 コメントの状態を切り替える <leader>c<space> カーソル位置の行、選択している場合は選択行のコメントの状態を切り替える。 選択行の１行目を見て、コメントされていない行なら全てコメントアウト、 コメントされている

iTerm2の背景色をそのまま適用したいのに、256色のカラーパレット内に背景色と同じ色のパレットが含まれていない…という事がありました。 色々なカラースキームを試してみたいけど、背景色を変えるのは嫌だという気持ちの方は結構居らっしゃるかと思われます。 結論を言うと、背景色を揃えたいグループのctermbgにnoneを与えてあげればターミナルの背景色と同じになります。 # colorschemeより前に記述. autocmd ColorScheme * highlight Normal ctermbg=none autocmd ColorScheme * highlight LineNr ctermbg=none colorscheme 任意のカラースキーム 背景色が違うぞ、というグループに片っ端からctermbg=noneを適用してやりましょう。 どんなグループがあるんだっけ？ と思った