はてなブックマーク

React Routerとは React Routerとは、Reactを用いて作成したSPA(Single Page Application)に対して、UIとURLを対応づけるためのライブラリです。 例えばTodoアプリの場合、http://sample.com/loginにアクセスした時にはログインページを表示するLoginコンポーネントをレンダリングし、http://sample.com/todoにアクセスした時にはTodo一覧を表示するTodoListコンポーネントをレンダリングするといった操作が可能になります。 ライブラリ React Routerを使用するためには、作成しているアプリケーションにライブラリのインストールが必要です。React Routerに関係するライブラリにはいくつか種類があるので、用途に合わせてどのライブラリが必要なのか抑えておく必要があります。 ライブラリ

Redux-Thunkとは Redux-Thunkとは、ReduxのAction Creatorに非同期処理を実装するためのミドルウェアです。 何ができるの？ Reduxにおける最も一般的なミドルウェアの使い方は非同期Actionの処理です。 Reduxでは基本的に、Action Creatorによって生成されたActionをStoreにディスパッチすることで単純な同期更新を行っています。そこにRedux-Thunkのようなミドルウェアを導入することでStoreの機能を拡張し、非同期ロジックを記述できるようにできます。 通常Action CreatorはActionオブジェクトを返しますが、Redux-Thunkを使用すると「Thunk」という関数を返すことができるようになります。これによってActionのディスパッチを遅らせたり、特定の条件が満たされた場合のみディスパッチできるようになり

UA偽装できました！ 金曜日に上の人と話し、「自動化するとしたらUA偽装できないと実用価値ないね」という事になり、pythonで偽装できる方法を探したところ、案外あっさり出来ました。 import os from selenium import webdriver options = webdriver.ChromeOptions() #ここにUAを書きます。今回はiPhoneでsafari options.add_argument('--user-agent=Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1') # いつもどおりchromedriverの場所を指定します

業務で扱う(最小)単位でデータとロジックをひとまとめにして整理する技法 ドメインモデルが実現する世界 どこに何のロジックが書いてあるか、(ソースを見るだけで)わかる 改修しやすいプログラム ドメインモデルで解決したい問題 どこに何のロジックが書いてあるかわからない問題 - わからないから適当に書く→適当に書くからわからない → わからないから・・・ - ある修正をしようと思っても、どこまでが影響範囲かわからない - 使用している箇所全grepして調査 - 同じような処理、分岐が重複してしまう これを解決したい。これだけを考える。 なぜ(今までのシステムは)改修は難しいのか 機能クラスと、データクラスをわけてしまうから そのデータクラスを呼べる箇所 = 業務ロジックがかけてしまう どこになにが書いてあるかわからなくなる 共通クラス、Utilクラスを作ってしまうから 誰でも呼べる = そのクラ

はじめに 今回はLambdaでget_cost_and_usage(),get_cost_forecast() のメソッドを使ってAWS利用金額と予測請求金額を取得しSNSで通知するLambdaを作成しました。 各メソッドは以下のように動作します。 get_cost_and_usage() AWSの利用額を取得するメソッドです。 2019年8月24日に8月に利用した金額を知りたい場合は、 STARTを2019年8月1日にしてENDを2019年8月24日にします。 すると2019年8月1日 00:00 ~ 2019年8月24日 00:00 (8月23日 24:00)の間に取得した金額が取得できます。 なので2019年8月全体の金額を知りたい場合は、STARTを2019年8月1日にしてENDを2019年9月1日 get_cost_forecast() AWSの予測金額を取得するメソッドです。

この記事はニフティグループ Advent Calendar 2018の25日目の記事です。ついに最終日です。 昨日は@omasumasuさんの「API仕様書を作らなくてもいい！？簡単にAPIを作成する方法」でした。 Navigation Architecture Componentとは 最近Googleが力を入れて開発しているライブラリ群、Android Architecture Components。 ライフサイクル問題を楽にするLiveDataやViewModel、データ永続化のためのRoomなど提供範囲は多岐に渡りますが、いずれも今までAndroid開発で面倒だった部分を楽にしてくれます。ニフティの提供するアプリでも徐々に採用を広げています。 そんなArchitecture Componentsの中で、画面遷移を担当するのがNavigationです。 従来のアプリ開発ではRouter

WebdriverIO からヘッドレス Chrome を起動してブラウザテストを実施する手順をまとめます。 必要条件 Chrome 59 以降がインストールされていること WebdriverIO およびブラウザテストについて Seleniumアレルギーのための処方箋 - Qiita にとても詳しくまとめられていますので、ぜひご一読ください。 本投稿は、この記事にある、以下の構成図の「Local」という枠の中に関する話です。ここの「PhantomJS」のかわりに「ヘッドレスChrome」を利用する方法について紹介します。 導入手順 ChromeDriver のインストール WebdriverIO から ヘッドレスChrome を起動するには ChromeDriver が必要です。 公式サイトから直接ダウンロードしてもよいのですが、パスを通したり、異なるプラットフォーム（OS）に対応したインス

KVMをWebから操作できるようにする(WebVirtMgr) 我が家では自宅で使用するサーバや、検証のための環境をKVMを使用して作っています。 しかし、今までは仮想マシンを操作するために、ハイパーバイザにログインしてコマンドを打たなければ行けない状況で若干面倒でした。 そこで、Webからそれらの操作を行えるものを探していたのですが、WebVirtMgrが使いやすくていいのではないかと思い、インストールしてみました。 環境 OS: CentOS 7.1 (virtによるKVM環境構築済み) ※ KVM環境に関しては CentOS7上にKVM環境を構築する(CUI環境) を参照 セットアップ手順 Install WebVirtMgrを参照してインストールしてみます。 動作に必要なアプリケーションをインストール $ sudo yum -y install http://dl.fedorapr

と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました） 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi

物理サーバを触っていると OSの再インストールが手軽できない(画面とキーボードを刺して、作業するとか) 新しいOS環境を用意するために、新しいハードウェアを購入する必要がある など、大変なことが多いです。 ということで、もうちょっと手軽にサーバを作ったり潰したりしたいと思い、家のサーバに仮想環境を構築することにしました。 OS: CentOS 7.1 (CUIモード) CPU: Intel VT-x 対応 KVMでの構築 我が家のサーバは、Intel NUC の Intel Celeron N2830 というCPUを積んでいるモデルです。 最初はVMWareのESXiを入れれないかな、と思い調べていたのですが、ちょっと動作しないようでした。 参考: VMware Homeserver – ESXi on 4th Gen Intel NUC CPUの仕様を見るにIntel VT-xのサポート

Ansibleでのパスワードの取り扱い 概要 Ansibleを使っていて、 sambaのユーザパスワード BASIC認証のパスワード など、パスワードを管理して使いたい場合が時たまあると思います。 そんな時にいつも使っている方法を紹介します。 パスワード管理方法 1. Ansible Vaultで暗号化する 基本的にパスワードの類はAnsible Vaultで暗号化して使用します。 ansible_sudo_pass: として SUDOパスワードを入れておくと、SUDOパスワードの省略ができて便利です。 private.ymlにパスワード類を記載し、Ansible Vaultで暗号化する ### sudoパスワードとsambaのパスワードを記載 % vim private.yml + --- + ansible_sudo_pass: sudo_password + samba_user:

先日行われた ng-kyoto Angular Meetup #3 にて、「CSS in JS と CSS Modules」という発表を行いました。 Angular Meetup にも関わらず、React における Component のスタイリングに関する内容で、最後に「React 勢がこんなに頑張っているのに Angular ときたら」と煽るつもりだったのですが、直前の @armorik83 さんの発表で Angular 2 で同じような機能が実装されることを知り、慌ててオチを書き換えたのでした。 というわけでこの記事では、 Angular 2 で Component のスタイルをどのように実装するか、CSS のカプセル化（ローカルスコープ化）がどのように行われるのかについて、見ていきたいと思います。 前提 この記事を執筆した時点での Angular 2 の最新バージョンは 2.0.0

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?