のらねこの気まま暮らし

技術系だけど、Qiita向きではないポエムとかを書くめったに更新されないヤツ

ReactNativeにNativeBaseを導入してUIを整える

概要 天気の情報を入れた、が! CloudsとかClearとか言われてもわけわからん! いつの天気!? みたいに思うのでとりあえずUIをそれっぽくしてみようと思った。 前回: mizuki-r.hatenablog.com 情報設計 L2. いつ L1. 天候 L3. 気温, 湿度, 気圧 L4. 更新 対…

React Native に Reduxを加え、ロジックを実装する

概要 React Native入門シリーズその3。 Reduxを導入してAPI通信してViewに引き渡す。 前回: ReactNativeにTypeScriptを導入する - のらねこの気まま暮らし APIについて OpenWeather アプリについて 今回試すことが主軸にあって、 「こういうView」っていう提…

ReactNativeにTypeScriptを導入する

概要 前回の続きです。 できたてホヤホヤのプロジェクトにTypeScriptを導入する。 環境 react v16.3.1 react-native v0.55.2 react-native-cli v2.0.1 依存モジュールのインストール $ npm install -D \ typescript \ node-libs-react-native \ react-native…

初心者がReactNativeを使ってAndroidで起動できるようにするまでの記録

概要 諸事情でReactNative触る機会があるんだけど、 Nativeは経験が薄く、Reactもそんなにガッツリ触ってないのでこれを期に勉強しようと思ったのでまとめ。 実行環境 Mac mini (Late 2014) OS X EL Capitan 2.8 GHz Intel Core i5 8GB 悲しいかな、High Sie…

React+Redux覚書

概要 React+Reduxを使ってアプリを書く機会があったが、 どちらもちゃんと触ったのは年単位昔なので思い出すために軽くコードを書いてみた。 ーーやつの備忘録。 こういうことを思ってこうしたいなって気持ちになったという記録。 基本構成 environment Dock…

Macを外部ディスプレイにつなげた時のWindow配置を記憶したい!

背景 最近の僕は、GoogleChromeのタブを38個とか開いているようです。 Tabs Outliner と Spaces という拡張機能を併用して、 たっくさんあるタブを用途やカテゴリ毎にwindowに分割しているんです。 まあ、ぞれでもWindowは5,6個できるんですけど。 Tabs Outl…

2015年の振り返り

新年早々いろいろあって振り返ってる余裕が無かったので、それっぽいのをハリボテで。 2015年に書いた記事 当ブログ mizuki-r.hatenablog.com 8記事!少ない!! Qiita qiita.com qiita.com 2記事!少ない!! 2015年に発表したトーク(public) 最近のフロン…

#gotandajs でトークしてきました

ブログを書くまでがgotandajsだ!ってことで。 gotandajs 五反田や沖縄で JavaScript の勉強する(conpassから引用)会で、AngularJSにFluxとRiotJSを導入したというトークをしてきました。 gotandajs.connpass.com 発表資料 AngularJSとFluxとRiotJSと1 15/…

MINILA AIR US67 を購入したのでMac用にカスタマイズしたメモ

商品 Majestouch MINILA Air US67キー 茶軸 Bluetoothの奴 茶軸 英語配列 仕様にはWindowsしか記載無いけどOS Xも利用可(OS X 10.10.5) 設定 caps lock ⇔ ctrl 鉄板 [修飾キー設定] cmd ⇔ option Mac Book Airの配置に合わせてみた [修飾キー設定] caps lock…

指定期間でDOMを出し分けてくれるangular-periodを公開しました

angular-periodとは AngularJS のDirectiveで、期間を指定するとその 期間前、期間中、期間後でDOMの表示を切り替えてるようにするものです。 例えば、なんかの応募とかで、以下の様なHTMLをテンプレートエンジンやJavaScriptなどを使って出し分けることがあ…

node-hariko にクリパラメータによってモックデータを割り振る機能を入れた

欲しかった機能をいれたかったので、 hariko を v1.1.0 に更新しました。 更新内容としては、複数のリクエストをExamplesに設定している時に、リクエストパラメータがマッチするやつを優先的にレスポンスさせるような機能を追加しました。 multipe example A…

Introduction to Hariko API Server with API-Blueprint

はい、harikoの紹介です。 harikoとは hariko harikoとはNodeJS製のAPI MockServerであり、APIドキュメンテーションツールであるAPI Blueprintのエコシステムです。 使い方 npmからインストールして下さい。 npm install -g hariko harikoはAPI-Blueprintの…

AngularJS x Webpack を使った構成の紹介

AngularJSとWebpackを上手いこと連携させてメンテナンスしやそうな構成を試行錯誤したので、 現状の記録と整理を兼ねて記事にしてみる。 結構いいかんじなアプローチなのではないかと思いつつ、まだ詰め切れていないところも多いので今後ブラッシュアップを…

NodeJSでSystemJSを使ってES6を試す

SystemJSとは、ES6やAMD等の汎用的なモジュールシステム。 SystemJSを使うとどんなふうにロードされるのかを試した。 インストール npm install --save systemjs 基本的な使い方 良い感じローディングするためには初期設定が必要。 require で呼び出すんだけ…

EC6のimport及びexportを使いたい

jspm関連でEC6を使おうとしたけど、moduleの管理の仕方いろいろあってどうすればいいのかわからなかったので調べた。 SystemJSを使ってブラウザでもEC6のコードを利用できます。 SystemJSのI/Fで利用 ファイルをimportする <script src="system.js"></script> <script> System.import("runtime-hoge"); </script>…

grunt-contrib-connectのmiddlewareの順序による挙動について

grunt-contrib-connectとgrunt-connect-proxyでstubcellを設定したが POST や DELETE のリクエストが method not allowed で弾かれてしまって嵌ったのでメモ。 middlewareの設定順序が不適切 最初に正しい方法。middlewaresの先頭にproxyを挟む必要がある。 …

Dartを使ってみる

Dart Dart: Structured web apps ECMAの標準規格になったらしい jsにcompile可能な汎用言語らしい javaとjavascriptのいいとこ取りらしい ってことで試してみる イメージ DartEditorなるものがあるけど、とりあえずvim使ってみる Botでも書いてみるかー? fo…

CasperJSを拡張したライブラリをローカルに置こうとして苦戦した記録

CasperJSを使っていて大変苦労したのでその記録。 やりたかったコト CasperJSを継承した独自拡張のライブラリを複数のファイルでrequireして個別にプログラムを実行したかった。 grunt-casperのようなライブラリをから使う場合と、単体のファイルをcasperjs…

YAPC::Asia 2014に参加してきました #yapcasia

YAPC::Asiaとは 8/29, 8/30に開催された、世界最大規模のプログラミングカンファレンスです。 Perl界隈のエンジニアからPerlは関係ないけど、プログラミングが好きな人が集まる年に一度のエンジニアの祭典! YAPC::Asia 2014 この記事は わたしく@mizuki_rの…

WindowsでWebアプリ開発

何やるかを考える。 前提 開発機はWindows7 エディタはIDEを主に使っていた ネイティブ言語 バージョン管理はgitではない何か 学んでもらうこと Unixベースの開発 IDEではないエディタ gitによるversion管理 HTTP通信周りの基礎知識と動き WEBアプリケーショ…

node-scheduleという予定を登録して実行するnpmライブラリの紹介

node.jsを使っていて出会った、使い勝手の良さそうなライブラリ(俺基準)を紹介していくシリーズを初めてみました。 node-schedule https://www.npmjs.org/package/node-schedule 指定時間に登録したタスクを実行してくれるライブラリです。 Dateオブジェク…

AngularJSのfactoryとserviceを読み解く(後編)

前編: ngularJSのfactoryとserviceを読み解く(前編) 前回のAngulaJS!(なんちゃらライブ的な) factoryやserviceといったAngularJSの機能をドキュメントを読んだりぐーぐる先生に聞いたりしてもまったくさっぱりよくわからなかったのでAngularJSのコードを追っ…

AngularJSのfactoryとserviceを読み解く(前編)

AngularJSのfactoryとserviceがどうにも覚えられないのでまとめてみた。 まとめ factoryはobjectをキャッシュしておく serviceはインスタンス化してキャッシュしておく providerの謎が深まった factory providerにfunctionらしきものを渡している。 $getはIn…

AngularJSでDOMの更新を監視する with iScroll4

iScrollをAngularJSと使いたい案件があったので、それを使うためにいろいろ調べた。 DOMを動かしてScroll position:fixed等、モバイルでは一部バグがあったり非サポートだったりして、その大体にiScrollやscrollerjs等といったライブラリを用いる。 これらは…

AngularJS x UI-RouterでpushStateを使う

何も考えずにAngularJSを使うと、遷移のURLはハッシュフラグメント(#)を使うことになる。 しかし、ngRouterの$locationProviderにはhtml5Modeという機能があり、こいつを有効にすると、pushStateを使ってURLを構築することができる。 それをUI-Routerで使う…

Angular UI-Routerのviewsの定義を確認してみた

state.viewsの指定方法を理解してなかったので調べた。 基本 viewの名前はビュー名とステート名を@で結合したviewName@stateNameで構成される。 無名のview ui-viewは名前を与えず無名のviewとして定義ができる。 <div ui-view></div> その場合、stateは""でviewを指定する $sta…

AngularJSでdirectiveを作ってみる

2014-03-25っていう文字列の日付をyear, month, dayの3つのフォームに分割して入力したい、と思った。 一つのngModelからフォーマットを変えてinputを並べればいいとおもって、directiveを使ってみた記録。 <input type="date" name="year" ng-model="user.birth_on"> <input type="date" name="month" ng-model="user.birth_on"> <input type="date" name="day" ng-model="user.birth_on"> directiv…

AngularJS x UI-Routerの使い方

UI-Routerはとても強力で、ngRouterよりも多くの事ができるのでとても便利。 しかし、強力すぎてRouterの概念自体を塗り替えてしまっていてなかなかピンと来てなかったのでまとめてみる。 リストページと詳細ページを別々のページとして用意する state-route…

homebrewでperlオプションのついたvimをインストールする術

Macでちょっと複雑な一斉置換を行いたかったのだけれど、perldoが無いって起こられたのでいろいろやった。 perlフラグが立っていない $ vim --version | grep perl +cmdline_compl +insert_expand -perl +user_commands perlのoptionを確認する 試しに打って…

Heimdall.jsを0.0.2にあげたよ #開発二部

金剛改二がかわいすぎて何も考えずにクリックするだけなのが最近の提督業です。 こんばんわ、Heimdall.jsを0.0.2にアプデしました。 いんすとーる? bowerでインストールしとくと管理が楽なのでたとえば、 $ bower install --save 'rymizuki/Heimdall#0.0.2'…