Tomoumi Nishimura のアーカイブ

React-NativeでNativeモジュールを使う

2017年8月9日

React-Nativeでは基本的にjsでアプリの動作を記述していくことになりますが、どうしてもjsからは利用できないネイティブ機能が使いたくなることがあります。 そういう場合には、そのネイティブ機能をラップするモジュールを記述することで、利用することができます。 以下の手順は、iOSのネイティブ機能をSwiftを介して利用するための手順になります。 ### 1. Swiftで実装する 以下のように、js側から利用したい機能をまとめたクラスをSwiftで実
続きを読む

React-Native実機テスト中にメニューを出す

2017年8月2日

React-Nativeは、シミュレーターでの実行時に``⌘+D``を押すことでメニューを呼び出すことができ、メニューからはアプリのリロード(ただし、JavaScriptで書かれた部分のみ)や、[Chromeを利用したデバッグ](http://hacknote.jp/archives/28002/)などが可能になります。 実機テスト中は、多くの場合キーボードがつながっていません。そこで、メニューを出すためには、``⌘+D``の代わりに、本体をシェイクします。 ##
続きを読む

yield, Promise, coの話

2017年7月19日

ES2015ではPromiseを使って非同期処理が書けるわけですが、yieldや、Node.jsのパッケージcoと連携させるとうまく使えます。 ### 基本事項 #### Promise Promiseは以下のようにして使います。 ``` const p = new Promise(function(success, failed) { // 処理本体 }); p.then(function(res) { // 成功時の処理 }
続きを読む

React Nativeでトーストメッセージ

2017年6月28日

Androidを使っている際に、画面の下の方に出て来る簡素なメッセージのことをトーストメッセージと言います。 React Nativeでの実装もすっごいシンプル。 ```javascript import ToastAndroid from 'react-native'; // 中略 ToastAndroid.show('これがトーストメッセージです', ToastAndroid.SHORT) ToastAndroid.show('画面に長めに残る
続きを読む

TextInputのmultiline設定がAndroidだとうまく機能しない

2017年6月21日

原因は不明ですが、React-NativeではAndroid版TextInputのmultilineがうまく機能しない場合があるようです。 ### 前提 こんな感じのTextInputを想定しています。 ``` ``` ### 確認できた症例 #### ハードウェアキーボードから改行が入力できない シミュレーターを利用した状況下で、PCのキーボード側からEnterキーを入力しても改行が入力されません。 #### 日本
続きを読む

React Nativeのコンポーネントを詳しく見る

2017年6月14日

React Nativeのコンポーネントは仮想DOMとして表現されていますが、これを見るためにReact Developer Toolsというツールが用意されています。 ### 導入方法 npmを利用します。 ``` npm install -g react-devtools ``` ### 利用方法 どこのディレクトリからでも良いので、以下のように呼び出します。 ``` react-devtools ``` 起動すれば、勝手
続きを読む

Reactotronに詳しめのログを投げる

2017年6月7日

Reactotronを使うと、React Nativeで作ったアプリのログをリアルタイムかつ簡単に確認することができます。 Reactotronを利用してログを飛ばす場合、例えば、 ``` console.tron.log("hogehoge"); ``` みたいな感じでサクッと送信することも可能なのですが、``display``メソッドを利用すれば比較的詳しいめのログを投げることが出来ます。 例えば、 ``` console.tron.displ
続きを読む

react-native-fetch-blobでmultipart-formdataをPOSTする

2017年5月31日

react-native-fetch-blobを利用してデータを送るには、 ``` RNFetchBlob.fetch(method, url, headers, [ { name: 'id', data: id }, { name: 'passwd', data: 'passwd' } ]) ``` みたいな感じに、第4引数にname-data構造を持ったデータの配列を渡します。 multipart-formdata形式でバイナリデータを送るには、ヘッ
続きを読む

iOSシミュレータの動作が遅いとき

2017年5月17日

iOSシミュレーターを使っていると、唐突にアニメーションがゆっくりになりました。 ### 原因 iOSシミュレーターの機能の1つに、``Debug -> Slow Animation``という機能があります。 ショートカットキーが``⌘+T``だったので、タイポしてオンにしてしまっていたようです。 ### 解決方法 同機能をオフにすることで解決しました。 ### その他 Googleで「ios シミュレーター 遅い」で検索すると、自分の環
続きを読む

React Nativeで画像選択を行う

2017年5月11日

React Nativeを利用したアプリ開発で、画像を選択する処理を実現する際には、``react-native-image-picker``パッケージが利用できます。 ### 導入 基本的には ``` npm install react-native-image-picker@latest --save react-native link ``` でOKです。 ### 使い方 画像選択画面を表示するには、``showImagePic
続きを読む

IPアドレスのフォーマットチェック

2017年4月26日

入力されたデータがIPアドレスの形式をしているかチェックするには、``org.apache.commons.validator.routines.InetAddressValidator``が利用できます。 ``` String v4 = "127.0.0.1"; String v6 = "0:0:0:0:0:0:0:1"; InetAddressValidator validator = InetAddressValidator.getInstance();
続きを読む

javascriptのジェネレータ関数と遅延評価

2017年4月21日

ES6で追加された文法としてジェネレータ関数というものがあります。 ### ジェネレータ関数とは ジェネレータ関数とは、処理を離脱したり復帰したりできる関数であり、大雑把にいえばイテレータ(ジェネレーター)を生成する関数です。 具体的には、``function*``と``yield``を用いて以下のように定義します。 ``` function* gen() { console.log('first'); yield; console
続きを読む

無精してSSH Keyを登録せずにPrivate Repositoryをクローンする

2017年4月12日

SSHを発行して自分の鍵として登録して・・・って面倒ですよね。 そんなときは、Personal Access Tokenが代用になるようです。 ### やり方 1. GitHub > Settings > Personal access tokensを開きます。 2. Generate new access tokenから新しいアクセストークンを取得します。 - このとき、権限としてはリポジトリ操作権限だけを与えれば十分です。 3. HTTPSを利用し
続きを読む

React Nativeの基本事項

2017年3月28日

React Nativeの基本的な事柄です。 ### 基本の基本 プロジェクトを新規作成して起動します ``` react-native init hogehoge cd hogehoge npm install react-native run-ios ``` ### Hello, World React Nativeにおける描画の基本単位はコンポーネントです。 アプリケーションは、最も単純には、Viewコンポーネントを作成して登録
続きを読む

create-react-native-appを触ってみる

2017年3月21日

React Nativeのプロジェクトをサクッと作れるcreate-react-native-appを導入する方法です ## そもそも論 React.jsの雛形を作れるCreate React Appというものがありますが、これに着想を得てReact Native向けプロジェクトの雛形をサクッと作るためのツールとして開発されたのがCreate React Native Appです。 コマンド1つでとりあえずアプリとして起動できるプロジェクトが作れるほか、実機テス
続きを読む

パッチのステージング利用時のキーバインド

2017年3月21日

gitは``git add -p``とか``git stash -p``とかで対話的ステージングが使えるというのも便利ポイントの1つです。 しかし、対話的ステージングを利用しているときのキーバインド、``h``を押せばヘルプ出て来るんですが、イチイチ見るのも辛いですし、記述から動作を想像するのも辛い。 そこで、パット見で覚えられるよう、以下にまとめます。 ### ヘルプメッセージ ``` y - stage this hunk n - do not sta
続きを読む

git diffで空白差分を無視する

2017年3月7日

``git diff``で差分を確認するとき、コードフォーマッタの設定がPCどうしで異なっていたりすると特に空白の処理で違いが出てしまい、わずらわしかったりします。 そういう場合は、``-w``オプションや``-b``オプションなどが有効です。 ``` git diff -w # -> スペースを無視した差分が表示されます ``` ``` git diff -b # -> スペースの個数を無視した差分が表示されます ``` ``-b``オプショ
続きを読む

Google Chromeで特定の入力履歴を削除する

2017年2月21日

メールアドレスを入力し・・・タブを押し・・・[ちくしょう!台無しにしやがった!お前はいつもそうだ](https://twitter.com/molgh/status/726854917214879744)。 といった感じで、ログインIDとパスワードを入力する画面で、タブを押し損なうことでログインID入力欄に「ログインID+パスワード」が入力されてしまうことってありますよね。 そのまま放置しておくと、セキュリティ的に碌でもないので、入力履歴から削除しましょう。
続きを読む

shellで引数を1個ズラす

2017年2月16日

「[Shellスクリプトでn番目以降の引数全てを取得する](http://hacknote.jp/archives/17938/)」で、「Shellスクリプトで、第一番目の引数だけを消費して、残りの引数はその先のプログラムに渡したい」ときに使えると書きましたが、そのものズバリ引数を消費する機能があるんですね。 ``shift``を利用すると、引数(``$@``)の中身が、先頭から一個後ろにズレます。 例えば次のような関数を作るとすると、 ```shell ec
続きを読む

gitのユーザーを切り替えるalias

2017年2月14日

複数人で同一PCを利用して開発を行っている場合、gitのユーザーを切り替える必要が生じる場面が多々あります。 そのような場合に、いちいち ``` git config user.name "hogehoge" git config user.email "hoge@fuga.com" ``` なんてやってられません。[プログラマーは怠惰でなければならない](http://itpro.nikkeibp.co.jp/article/Watcher/200610
続きを読む