rennnosukesann.hatenablog.com 前回の記事では、iOS上でGoogle MapアプリをReact Native+Expoで作成しました。 今回はAndroid verを作成してみたいと思います。 Usage 環境構築環境は Mac OS X High Sierraです。 プロジェクトの作成 例によってcreate-reac…

React NativeでGoogleマップを使いたい場合、 プレーンなreact-native initからのプロジェクトだと導入が大変でした。 一方、Expoをサポートするcreate-react-native-appでプロジェクトを作成したところ googleマップの導入がスムーズにできたのでメモしてお…

Accelerometer React Nativeでの加速度実装ですが、ネイティブで標準実装できる範囲内なので特別なパッケージを入れずとも実装できます。 Expoパッケージの加速度計測モジュールが簡単だったので、今回はこちらを紹介します。 Accelerometer - Expo Document…

react-native-modalbox github.com react-native-modalboxはアニメーション付きモーダル表示を手軽に実装できるUIコンポーネントです。 モーダルは使えるシーンが多いので、表示の仕方でユーザー体験を向上させたいときに使うと良いかもしれません。 （細か…

メモ。 AngularJSではコントローラやサービスの定義をDI（依存性注入）によって初期化します。 具体的には、['サービス名1','サービス名2'...,'コントローラ関数']のように、サービス名とコントローラの挙動を定義する関数オブジェクトの配列を作り、AnguraJ…

react-native-textinput-affects github.com react-native-textinput-effectsはReact Nativeアプリ上で使用できるTextInput UIコンポーネントです。 豊富な種類の入力フォームが用意されており、デモを見るだけでも楽しめます。 普通のTextInputと同様のプロ…

TextInputがキーボードで隠れてしまう問題 スマホ画面でブラウザ・ネイティブの入力フォームをクリックすると、入力フォームが隠れてしまうことがあります。 import React from 'react'; import { StyleSheet, View, ScrollView, TextInput } from 'react-na…

エディタを乗り換えよう 今までatomを雑に使っていたのですが、 重い プラグインがやけにバグる Code Completeが雑 などの理由から、新しくVSCodeに乗り換えてみました。 今回の記事は、自分用のVSCode乗り換え時のセットアップメモになります。 適宜更新し…

firebaseによる認証 firebaseはアプリ開発に必要な機能を一通り備えていますが、Webサービスに必須な認証ももちろん備えています。 メールアドレス・パスワードによるベーシックな認証を始め、各種SNS連携を用いたOAuth認証をサポートしています。 Firebase …

React Native + Firebase + Expo 前回の記事では、React NativeにFirebaseを導入する方法を紹介しました。 rennnosukesann.hatenablog.com しかしながら、通常のreact-native initによる開発は、実機デバッグをしたい場合に億劫です。一方、Expoを使った実機…

React Native + Firebase環境を構築する際のメモ。 Firebase firebase.google.com FirebaseはGoogleが提供するモバイルプラットフォームであり、クラウドDBや認証、アナリティクス、クラッシュレポートなど多くのサービスをサポートしています。今回はReact …

react-native-swiper React Nativeでスワイプ画面遷移が可能になるreact-native-swiperを試してみました。 github.com Usage 1. 前回の記事に従い、create-react-native-appをインストール rennnosukesann.hatenablog.com 2. create-react-native-appプロジ…

最近React Nativeの開発を始めたのですが、いろいろなReact NativeのUIコンポーネントが配布されているようなので 適当にいじって遊んでみることにしました。 今回は、チャットUIとして提供されているreact-native-gifted-chatを試してみました。 react-nati…

非同期処理 JavaScriptでは非同期処理を行うような関数を実行するとPromiseオブジェクトが返ってくることパターンが多いです。 返ってきたPromiseオブジェクトに対してthenメソッドを読んで非同期処理終了後の処理も記述できるので、呼び出す側がコールバッ…

メモ。 AngularJSのng-repeatによってHTML内の繰り返し要素を生成できますが、 HTML <div ng-app="myApp"> <div ng-controller="MyAppCtrl"> <div ng-repeat="msg in messages"> <p>{{msg}}</p> </div> </div> </div> JavaScript let mod = angular.module('myApp',[]); mod.controller('MyAppCtrl', ['$scope', function($scope){ $scope.messages =…

<input type="file" /> <input type="file" />は手軽にファイルアップロード機能を提供できるタグですが、安易に設定してしまうことで脆弱なアプリケーション・システムを作成できてしまいます。安易にファイルアップロード機能を実装するのではなく、予め潜在するリスクについて知り、その対策を出来る…

メモ。 HTMLでファイルダイアログを開いて指定したファイルを操作するとき、 以下のように<input type="file" />にonchange属性をつけ、そこにイベントハンドラ関数を設定します。 HTML <div ng-app="myApp"> <div ng-controller="MyAppCtrl"> <input type="file" onchange="onChange(this)"/> </div> </div> JavaScript function onChange(e) { console.log(e.value); } codepen.io 通常であれば…

はい $ brew install lolcat

Material-UI material-ui.com Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleのマテリアルデザインを踏襲したアプリケーションを作ることができます。 Install…

redux-logger ReduxではRedux Middelwareという様々な機能拡張が有志の手によって提供されています（プラグインのようなものです）。これから紹介するredux-loggerもRedux Middlewareの一つであり、これを使えばRedux上のActionディスパッチやStateの変化を…

前回の記事でJSXについて書いたので、今回は簡単なUIコンポーネント作成の流れをメモします。 前準備 create-react-appをインストールし、Reactプロジェクトを作成します（アプリの立ち上げも行っておきます）。 $ brew install node $ npm install -g creat…

蒸気機関車とは 蒸気機関車（じょうききかんしゃ）とは、蒸気機関によって動く機関車のことである。日本では Steam Locomotive の頭文字をとって、SL（エスエル）とも呼ばれる。また、蒸気機関車、または蒸気機関車が牽引する列車のことを汽車とも言う[1]。…

※ここで述べるJSXはReact.jsで利用されるものを指します。 JSXとは JSXはFacebook社が開発した、Reactの内部でHTML記述をより簡潔に書くためのJavaScript拡張構文です。 ReactではHTMLの出力を主にJavaScript上で定義します。というのも、Reactはコンポーネ…

AngularJSのイベントハンドリング JavaScriptでは多くのイベントをハンドリングする手段がありますが、AngularJSも独自にイベントハンドリングするための機能を備えています。 例えば、AngularJSでのスクロールイベントのハンドリングは以下のように行います…

React ReactはFacebook社が開発するWebUIに特化したJavascriptのライブラリです。WebアプリケーションのアーキテクチャをMVCで構成した場合、ReactがサポートするのはViewの部分になります。Reactを用いることで効率的にUIコンポーネントを描画したり、UIコ…

java.util.Base64 Base64.Encoder (Java Platform SE 8) Java8より、Base64によってバイトデータをエンコードできるBase64クラスが実装されました。 このUtilityクラスを利用することで、Java上で容易にBase64エンコード/デコードが利用できます。 Usage imp…

Jacksonとは github.com JacksonはJavaで使えるJSONライブラリです。 JSON形式の文字列をJavaのオブジェクトに直接マッピングしたり、逆にJavaオブジェクトをJSON文字列に変換できたりします。 HTTPレスポンスをパースしたりオブジェクトをBase64エンコーデ…

Google/Facebook/Twitter のOAuth API Using OAuth 2.0 to Access Google APIs | Google Identity Platform | Google Developers ウェブ - Facebookログイン - ドキュメンテーション - 開発者向けFacebook Oauth with the Twitter API — Twitter Developers …

テンプレートのちらつき AngularJSのHTMLテンプレートを用いたページを表示したときに、一瞬だけ元のテンプレート表記がちらついてしまう場合があります。 例えば、以下のようなコードでHTML上の{{message}}に動的に文字列を挿入しようとしたとき、下の画像…

$httpのタイムアウト AngularJSではHTTPリクエストを投げるためのサービス$httpが提供されていますが、 引数configのプロパティtimeoutを設定することで、HTTPリクエストをタイムアウトさせることができます。 timeout – {number|Promise} – timeout in mill…