はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事はOpt Technologies Advent Calendar 2017の11日目です。 概要 EMR、Hadoop、Sparkそれぞれの関係を、試しに動かしてみたりドキュメントに当たることで理解する。 それによって、何が起きているのかをログやメトリクスから把握できるようになることを目指します。 （社内勉強会にて話した内容に修正を加えたものになります。） まず動かしてみる 何はともあれ動かせる状態にします。これをベースに色々実装を変えてSparkに慣れましょう。 最小構成 以前書いた記事はこちら Scala版のSpark J

GoもGAEも不慣れな状態でやってみたら、タイミングもあって色々ハマったのでまとめました。 マサカリやもっといい方法があればぜひコメントください。 変更履歴 ※Go1.8に対応 目的 GAEのアプリをリリースしたい テストも書きたい ローカルでの動作確認もしたい 外部ライブラリ使いたい DataStoreやQueueを使いたい 環境 GAE/Go standard environment (go1.8.3) Google Cloud SDK 167.0.0 app-engine-go サンプルのソースコードはこちら。 https://github.com/uryyyyyyy/GAESample GAEアプリのディレクトリ構成 ディレクトリ構成 色々悩んだ結果こうなりました。 $ tree . . ├── app │   ├── gae_service1 │   │   ├── local.

この記事はOpt Technologies Advent Calendar 2017の17日目です。 概要 11日の記事（Spark on EMRの基礎をおさらいする）にてSpark on EMRの構成はおさらいしましたが、トラブルシュートするためにはSparkの内部処理についても理解しておく必要がある、ということでまとめます。また本記事は上記記事を読んでいる方向けの内容となります。 （本記事は社内勉強会にて話した内容に修正を加えたものになります。） Sparkの処理の内部構造 概要 Sparkはコードでそれと意識していなくても分散処理が出来るのが強みですが、内部的には割とややこしいことをしています。具体的には、「どのロジック・オブジェクトがどこで実行されているか。またそのデータはどこから渡ってきているか」です。 RDD Sparkでは扱うデータをRDDと呼ばれるコレクションのような入れ物

概要 一週間前くらいにSpark2.0が出ました。そして、今日確認したらEMR5.0が既にSpark2.0対応されていました。さすがAWSさんです！ ということで、Spark2.0でイマドキのSpark実行を簡単にメモしておきます。 ゴール Spark2.0が動く Scala2.11ビルドしたjarが動く Java8で動く YARN分散環境上で動く EMR設定 Software Configurationにて以下のように設定 emr-5.0.0 hadoop2.7.2 Spark2.0.0 configurationに以下のjsonを追加 Java8の設定と、sparkに最適化する設定を行っています。 [ { "classification": "spark", "properties": { "maximizeResourceAllocation": "true" } }, { "Cla

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

この記事の目的 React Native公式がまだ対応してないAPIを触りたい場合、既存のライブラリのコードを利用したい場合、あるいはマルチスレッドなどを用いたい場面では、iOSのAPIを直接叩ける必要があります。 そこに対して、React Nativeでサポートしているのですが、公式の説明やコード例が十分でない＆日本語の資料もなさそうなので、まとめてみます。 ※公式が不十分でソースコードを読みつつの理解となるため、正しくない内容になってしまうかもしれない点をご了承ください。（そもそも正解がない） ※筆者はObjective-C/Swift初心者な点もご了承ください。 ※Android版はこちらをどうぞ→react-nativeでAndroidのAPIを扱う（Native Modules編） 必要なこと まずは公式にあるようにObjective-Cのコードを例に取ります。 最終的にはJSコ

となります。 どういうことかというと、modulesの中の1ファイルにReducer, Action Creator, Constants などをまとめて1ファイルで扱ってしまおう（そしてそれをmodulesとして管理しよう）という解決法になります。 なぜコレが嬉しいのか？ Reduxはfluxの実装として筋がよく、一気に普及しました。 そこで用いられているReducer, Action Creatorなどの登場人物は、役割としては別であるものの実際にはお互いにConstantsで紐付けられていて実質的に密結合です。それぞれ単体では存在しえません。 なので１ファイルで扱ってしまっても不都合はないのです。 ちなみにテストはどう書くかというと、上記の通り登場人物は変わらないため、Reduxの定石通りにReducer, Action Creatorの単位でテストを書くことができます。 まとめ r

自己紹介 uryyyyyyy: しばたこ 本業はアドテクでScala/React/TypeScript 副業でReact Native 最近そこそこバズった記事→ReduxでのMiddleware不要論 話すこと React NativeでNative APIを扱ってみる Swift/Kotlinでやってみる お題として今回はFirebase SDKとGoogle認証を扱ってみます。 Firebaseのイベントトラッキングの方ではNative Moduleを扱う話、 認証周りでは、もう少し拡張してView/ViewControllerを扱ってみる話をします。 完成形 iOS Android ところで FirebaseにはNativeのSDKとWebのSDKがあるのは大丈夫ですよね？ ちゃんと調べてないですが、違いはAnalyticsが弱いとかPush通知とかだと思います。 せっかくのRea

はじめに 某案件でしばらくReact Native + Flow を使ってたのですが、やっぱりTypeScriptの方がIDEの補完や型安全性の面で良いなと思い、React NativeをTypeScript化してみました。 それぞれのファイルの意味なども可能な限り説明していければと思います。 この記事のゴール React NativeにTypeScriptを入れる Reduxも入れる それらのテストや動作確認をしやすくする。 環境 react: 15.4.2 React Native: 0.41 TypeScript: 2.2 NodeJS: 7.6~ mocha enzyme 構成 今回の構成は以下です。 基本的には、tscでビルドして生成されたファイルをindex.jsに喰わせる形を取っています。 TSのソースマップをdebug時に引き継げてないのが難点ですが、そこはTS2.2から入

概要 前回（Angular入門: Component/ServiceをTestまで含めて試す）の続きです。 今回は 通信処理の書き方 テストの書き方 動作確認・デプロイ を書いていきます。 作った画面 要件としては、前回分に加えて AsyncIncrementボタンを押すと、サーバーにデータを取りに行って非同期に数字が加算される。 という形です。 環境 angular-cli: beta-32 Angular: 2.4 NodeJS: 6.9 ソースコードはこちら↓ https://github.com/uryyyyyyy/angularSample/tree/async 前提：APIサーバー SPAの場合は、フロントのリソースはS3などのホスティングサービスから配信するかもしれません。 その場合はAPIサーバーのエンドポイントは別のホストになることが有り得ます。 本記事ではそのような配信

import { Component } from '@angular/core'; import {CounterService} from './services/counter.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { point: number; constructor(private counterService: CounterService) { this.point = counterService.point.getValue(); counterService.point.subscribe((v) => this.p

{ "name": "react-redux-sample-js", "version": "0.1.0", "scripts": { "build": "webpack --config ./webpack.config.dev.js", "build:prod": "webpack --config ./webpack.config.prod.js", "flow": "flow", "flow-typed": "flow-typed install" }, "license": "MIT", "dependencies": { "babel-polyfill": "^6.20.0", "react": "^15.4.1", "react-dom": "^15.4.1" }, "devDependencies": { "flow-typed": "^2.0.0", "babel-cor

問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや

自己紹介 uryyyyyyy: しばたこ 本業はアドテクでScala/TypeScript 副業でReact Native(@ CureApp) 今回話すこと 最近のフロントエンドの問題意識 （普通の話をします。。。） フロントエンド間（Redux）でのロジック共有 （そこそこ過激なことを言います。。） サーバーとのロジック共有 （とても無茶なことをして失敗した話をします。。。） まとめ 最近のフロントエンド事情の問題意識 結論を三行で フロントにもドメインロジックが求められている ドメインロジックが散らばるのを避けたい React Nativeでしょ！ フロントでも複雑なロジックを扱うことが求められている （元ネタ：クライアント主権時代にJSのモデルはどう共有すればいいのか） 近年のスマホファーストな時代では、WPAやネイティブアプリのようにスマホのみ（オフライン）でも動作することが求め

こちらの記事の続編です。 React + flow + Webpackの最小構成 ソースコードはこちらになります。 https://github.com/uryyyyyyy/react-redux-js-sample/tree/redux/ この記事のゴール 前回の記事でbabelやflowの導入をしたので、ここではreduxとテストを書いてみましょう。 環境 React 15.4 Webpack 2.2-rc flow 0.37 NodeJS 6.X~ mocha enzyme 構成 今回の構成は以下です。 $ tree . . ├── index.html ├── package.json ├── src │ ├── counter │ │ ├── __tests__ │ │ │ ├── Actions.spec.js │ │ │ ├── Counter.spec.js │ │ │ └

問題意識 reactのコンポーネントのテストは、react-addon-test-utilsをそのまま使うと面倒なことが多いです。具体的には、 コンポーネントを描画するためにdom環境が必要（jsdomやkarmaなどを使うのが一般的） 子コンポーネントも全て描画される 前者は、特にReact Nativeのテストをしたい時に困ります。dom環境ではないランタイムが必要でテストできないので。 後者は、単体テストの原則に反します。また、reduxのconnectなどを子コンポーネントに適用していた場合はテスト環境の構築も面倒になってきます。 そこで登場したのがenzymeです。 shallow renderingを用いることで、jsdomなどのランタイムなしに対象のコンポーネントのみをテストすることができます。 しかし、実際にコンポーネントをmountしているわけではないため、 実際に表示さ

この記事はCureApp Advent Calendar 2016の９日目の記事です。 この記事の目的 まだReactNativeがサポートしていないAPIを使いたい場合、既存のJavaコードを再利用したい場合、あるいはマルチスレッドなどを用いたい場面では、Android-Java APIを直接叩ける必要があります。 そこに対して、React Nativeでサポートしているのですが、公式の説明やコード例が十分でない＆日本語の資料もなさそうなので、まとめてみます。 ※公式が不十分でソースコードを読みつつの理解となるため、正しくない内容になってしまうかもしれない点をご了承ください。（そもそも正解がない） ※iOS版はこちらをどうぞ→react-nativeでObjective-C/SwiftのAPIを扱う（Native Modules編） 必要なこと 最終的にはJSコードからAndroid-J

この記事の目的 React NativeでもNativeのUIを触りたいときってありますよね。例えばこんなやつ（GradientView）を扱いたいとか。 （ちなみに、今回参考にした記事はこちら→http://browniefed.com/blog/react-native-how-to-bridge-a-swift-view/ ） そこに対してもReact Nativeでサポートしているのですが、案の定公式の説明やコード例が十分でない＆日本語の資料もなさそうなのでまとめてみました。 ※ 公式が不十分でソースコードを読みつつの理解となるため、正しくない内容になってしまうかもしれない点をご了承ください。（そもそも正解がない） ※ 筆者はObjective-C/Swift初心者な点もご了承ください。 ※ Android版はこちらをどうぞ→http://qiita.com/uryyyyyyy/i

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

概要 社内勉強会でcookieの仕様（主にRFC6265）やセキュリティ（主にCSRFやセッション乗っ取り）について話した内容をまとめます。 但し書き 手っ取り早い説明用に内容を端折ってまとめているため、厳密には正しくない記述が含まれます。 ちゃんと知りたければRFC読みましょう。（幸い日本語訳があってかなり読みやすいのでオススメ） 以下、RFCに沿って「サーバー」と「UA」という単語を使いますが、UAはブラウザと言い換えていいと思います。 curlやプログラマブルなクライアントは、この枠外の挙動をさせることも容易なので対象外です。 またブラウザ毎の実装については、過去の他の方の記事を参照していて自分で試せてはいないため、現在では実装が異なっている可能性があります。 cookieの仕様 cookie（webでの状態管理メカニズム）についての仕様。 RFC6265 今の最新の仕様っぽい。モダ

概要 python未経験者の自分ですが、機械学習を扱うためにpythonを学習する必要がありました。 しかし、pythonの勝手がわからないせいか、デフォルトだとグローバルにインストールされてキモいのでちゃんと設定しようとして色々ハマリました。 なので一応メモっておきます。 （今だとanacondaを使うのが一般的かもしれませんが、あえて自分でやってみました。） 環境 Ubuntu14.04 pyenv pyenv-virtual 参考になった！ pyenvとvirtualenvで環境構築 python3と科学計算ライブラリ周りをUbuntuにインストール pythonのインストール # 最初の状態を確認 python -V -> 2.7.6 sudo apt-get install git gcc make openssl libssl-dev libbz2-dev libreadlin

概要 「Opt Technologies Advent Calendar 2016」の一日目です。 最近とあるシステムを社内向けリリースしたので、どのように進めたかと実装について書いていきます。 （実際のコードは見せられませんが、参考用の過去記事へのリンクを用意しているので同じように設計で組むことはできるかと思います。） 作ったものの要件的な BtoBな管理画面系アプリ デザイナ不在 進め方は自由だがスケジュールしっかり守りたい フロント実装者は、自分以外は外部のフロントエンジニアと、社内のGUI未経験エンジニア 開発部内のKPIにテストカバレッジがあり、フロントでもカバレッジ取りたい 進め方 package.jsonの抜粋 全体像を掴めるかと思い、最初にpackage.jsonを貼っておきます。 後でそれぞれのライブラリやタスクについて触れていくので、なんとなく見て頂ければと思います。

概要 フロントエンジニアや外部に公開するAPIを用意する時、APIドキュメントを書くのは地味に面倒ですよね。 最近ではswaggerを筆頭に、ドキュメント生成ツール（Mockサーバーも内蔵しているものもある）が充実してきているので、それを使っていい感じにドキュメントを作りたいと思います。 play2もswagger pluginがあるので、それを使ってドキュメント生成をコード側でやってしまいましょう。 （筆者はswaggerを使ったことがなかったので、swagger自体の使い方も含んだ記事になります。） 環境 （執筆時点では、swagger-playがplay2.5対応しきれていなかったので、forkされたものを使用しています） Play 2.5 swagger-play (CreditCardsComがforkしたもの) ソースコードはこちら ゴール （アノテーションベースで）ある程度わ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 cluster-specの内容のまとめ 随時追記していくと思います。 誤訳・認識ミスもあるかもしれません。 （）の部分は筆者のコメントです。 著作者から指摘があった場合は速やかに削除します。 Redis Cluster Specification specへようこそ。ここではクラスタのアルゴリズムやデザイン情報を見れます。 このドキュメントはなるべく最新の実装に合わせています。 Main properties and rationales of the design Redis Cluster goals クラスタの達成したいこと

編集履歴 ※ SessionStorage→LocalStorage（永続化される方はこちらだった） ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 概要 Frontend Meetup vol.1 - SPAを語り尽くす会!のLT資料です。 フロントエンドのガチ勢には当たり前の内容になるかもしれません。 SPA探り探りなので、ご指摘あればコメントなどで頂ければと思います。 自己紹介（後で消す） 名前：しばたこ/uryyyyyyy 所属：株式会社オプト 得意分野：Scala/Play2/Spark/React 最近はReact/Redux/TypeScriptで書いてます。 materializeを導入したのですがjQueryなかなか辛い。。。 この資料で話すこと SPAでのセッション管理 CSRF対策 CORS SPAで

問題提起 React始めたいですよね！ でも今時、型のない言語とか使いたくないですよね！ TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、 とりあえずこれから始めるならTypeScriptでしょう。 ということで、個人的に良いのではと考えている技術スタックをまとめてみました。 内容が膨大なのでシリーズにしています。 環境・技術スタック 基本的には以下のように最新に追従していきます。 NodeJS 7.X~ React 15.5 Redux TypeScript 2.3 wepack 2.5 express(開発用の仮サーバーとして) karma （他、各種ライブラリを都度見ていきます） 記事 導入編 Reactで普通のSPAを作るために最低限必要だと筆者が考える構成を順を追って説明していきます。 React + TypeScrip

概要 こちらの記事の続きです。 SPAの静的ファイルのデプロイの仕方 SPAでも、大体のアプリはユーザー登録やログイン機能があると思います。 その際に、SPAでどうやってログイン済みか否かを判別するか、その際のルーティングをどうするかについて正解がないように思うので、自分なりのやり方を共有します。 環境 NodeJS 5.X~ React 15.1 TypeScript 1.8 全体の構成はこちらをご覧ください。 https://github.com/uryyyyyyy/react-redux-sample/tree/spa-auth ゴール ログイン済みであれば、ログイン画面にアクセスしてもホーム画面にリダイレクトされる ログイン済みでなければ、どのページにアクセスしてもログイン画面にリダイレクトされる ログイン済みでない場合、アクセスしたページがレンダリングされる前にリダイレクトされる

事前に出していた内容と違くてすみません！ とりあえず環境用意しようとしてたら時間かかってしまって。。 申し訳程度にmllibのコード書いてるのでご容赦ください。 自己紹介 名前：柴田 （@uryyyyyyy） 所属：株式会社オプト 開発１部 仕事内容： React/Play2でのWebアプリ開発 Sparkでの分散処理開発 mllibでのリコメンドエンジン開発←New spark系記事まとめ 理系出身ですが、統計や情報系のことほとんどわからない。。 型＆IDEがないとコード書けない。（TypeScript/Scala. JetBrains大好き） Pokemon Go飽きた。。 前置き 筆者は主にアプリケーションエンジニアで、データ分析＆pythonは目下独学で学び中です。 そのへんは温かい目で見ていただけると嬉しいです。 逆にscala/spark/AWSはある程度やってるので、何かあれ