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…

メモ。 AngularJSではselectタグにng-optionsを指定するとIterableオブジェクトの要素からなるプルダウンを作成できますが、その一部をdisable状態にすることができます。 HTML <div ng-app="myApp"> <div ng-controller="NgOptionDisableCtrl"> <select ng-model="num" ng-options='number disable when number === 3 for number in numbers'></select> </div> </div> JS let mod = ang…

Array.from Array.fromメソッドは、配列型オブジェクトや反復可能なオブジェクトをArray型にキャストするために用います。 // 配列 let ary = Array.from([1,2,3]); console.log(ary);// [1, 2, 3] // Set let set = Array.from(new Set(["a",2,{}])); conso…

Virtual DOMとは Virtual DOMは、WebUIライブラリとして有名なReactの持つDOM操作上の概念です。 ReactがDOM要素の更新を高速化するために設けられています。

末尾カンマ JavaScriptでは、配列リテラルの末尾要素後ろに対してカンマを記述することを許容しています。またECMAScript5にてオブジェクトリテラルの末尾カンマが、ECMAScript2017にて関数引数の末尾カンマが許容されるようになっています。 // 配列末尾カ…

メモ。 Angularでは`$rootScope.bind`経由でスクロールやページ遷移等に対するイベントリスナーを登録することができます。 angular.module('myApp', []) .controller('MyController', ['$rootScope', function($rootScope){ $rootScope.bind('scroll', func…

画面遷移時にパラメータを受け渡す AngularJSでは画面遷移が発生する（厳密には画面遷移というよりng-viewによる一部HTMLの差し替え）と、多くの場合Controllerも遷移先のViewに合わせて切り替わります。 このとき、遷移前に利用していたController上のパラ…

<input type="file" multiple> HTMLでは<input type="file">タグを用いることでファイルダイアログを開く機能をページに埋め込むことができますが、デフォルトではファイルを一つしかアップロードできません（ファイルダイアログで一つしかファイルを選択できない）。 HTML <input id="input_file" type="file" /> JS function onChange(event) { /…