その1Firebaseの機能を順次試していきたいと思います。FirebaseではAuthenticationを利用することで様々な認証を用いることができます。今回実装するメールアドレスの他に各種SNSやSMSなどにも対応可能です。Webの他にiOSやAndroidなどにも導入可能。今回は単純なログイン機能をWebページに実装してみます。メールアドレスとパスワードを入力すると登録やログインできるようになります。Authenticationでログインコンソール上の設定Firebaseのコンソールにログインし、新しくプロジェクトを作成するか、既存のプロジェクトを選択します。プロジェクトのダッシュボードに移動したら、早速Authenticationの設定を進めていきます。左側のメニューの「Authentication」をクリックし、右ペインが切り替わったら「ログイン方法」タブをクリック。「メール/パスワード」の行をクリックし、「有効にする」のスライダーをクリック。その後「保存」ボタンをクリック。この後JSを書き始めるのですが、その前にプロジェクトの情報を取得します。プロジェクトのコンソール右上にある「ウェブ設定」ボタンをクリック。JSの設定部分の雛形が表示されますので、これをコピーします。これでブラウザでのFirebaseの必須の設定はひとまずこれで完了です。簡単でしたねw認証処理をJSで書く今回は認証部部のUIがまるっとセットになったfirebaseui-webを使っていきます。firebase/f...GitHubここでは次の3つのファイルを作成しています。config.js前項でコピペしたコンソールの内容を保存します。静的なWebサイトをホスティングするFirebaseのHostingを利用すれば基本無料で静的なサイトを運用できます。独自ドメインも追加でき、何らならSSL証明書も無料でついてくるという太っ腹。サイトが成長し膨大なアクセスが発生した場合は課金する必要がありますが、こちらがプラン変更しない限り料金は一切発生しません。ドメインやDNSの準備や設定、本番へデプロイ(反映)するにはコマンドを叩く必要がありますが、それさえ乗り越えてしまえばさほど難しくはありません。環境の準備プロジェクトの作成サイトを設置するためのプロジェクトが必要になります。プロジェクトの作成方法は以下のページを参照くださいませ。プロジェクトを新規に作成するhttps://blog.katsubemakito.net/firebase/firebase-make-newprojectしばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。プロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要に...ねこの足跡RNode.jsのインストールHostingの利用は原則としてTerminalなどのCLI上でコマンドを叩いて行いますので、まずはその準備を行います。Node.jsがインストールされている必要があります。公式サイトからダウンロードしインストールしてください。「推奨版」と書かれている方でOKです。engine.Node.jsもしmacOSを利用されている場合で、凝った設定をしたい場合は以下のページを参照くださいませ。Node.jsのバージョンをnodebrewで切り替えるhttps://blog.katsubemakito.net/nodejs/switch_version_with_nodebrewインストールされたNode.jsのバージョンを切り替えたくなるタイミングがありますよね。バージョンアップの際はもとより特定バージョン下での挙動を確認したいとき、バージョンを上げたがうまく動かなくなってしまったので切り戻しを行いたい時などです。実現するため...ねこの足跡RFirebaseのCLIツールをインストールNode.jsをインストールするとnpmという、様々なライブラリやツールを取得できる便利なツールが同時に入るのですが、これを使ってインストールを行います。firebase-tools今回は以下のバージョンが入りました。プロジェクトを新規に作成するしばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。businessesFirebaseプロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要になりますので、Firebaseで利用したいアカウントでログインを行ってください。「プロジェクトを追加」ボタンをクリックプロジェクトの情報を入力する画面になります。「はじめてのReact」一覧に戻る3回に渡ってお送りしたToDoアプリ開発も最終回。今回はAjaxを利用しデータをサーバに保存してみます。Propsのデータ型をチェック以前取り上げたPropsのデータ型のチェックを導入しておきます。#6「Propsのデータ型をチェックしよう」https://blog.katsubemakito.net/react/react1st-6-proptypes「はじめてのReact」一覧に戻る大規模なプロジェクトでは必須?ComponentがどのようなPropsを欲しがっているか、プロジェクトの規模が大きくなればなるほど管理が大変になってきます。そこでReactではPropsのデータ型を定義できる機能を提供しています。指定日ま...ねこの足跡Rプロジェクトも運用段階に入りComponentがどこからどのように呼び出されるか、収集がつかなくなったとしても呼び出し方さえ守ってもらえれば何とかなったりするものです(それが良いかはさて置き)。誤った利用方法をするとテスト段階でエラーを明示的に出してくれるのもありがたいものです。PropTypes.func.isRequired};データをサーバ側で管理するAPIサーバを用意Reactから話がずれますが、学習用に保存や取り出しを行うAPIサーバをNode.jsで準備します。簡易的な物なので本番投入はしないでください。しないとは思いますがwまずは適当な名前のディレクトリを作成しカレントディレクトリを別の場所に移します。今のプロジェクトは全く別の場所に作成してください。その後簡単にHTTPサーバを作成できるexpressを入れます。express詳細は説明しませんが、以下のスクリプトをexpressをインストールしたディレクトリに適当な名前で保存します。ここではserve.jsとしました。「はじめてのReact」一覧に戻る前回に引き続き今回もToDoアプリを作っていきます。目標としてはフォームの使い勝手を向上させつつToDoの削除に対応するところまでとなります。現状、登録フォームのテキストボックスに内容を入力しエンターキーを押した瞬間、再読込されてしまいます。これを防ぐには、formタグにonSubmitイベントを定義してあげればOK。今回はエンターキーを押すと確認用のダイアログを表示し、OKボタンが押されれば追加処理を行う形に変更しました。src/todocreate.jsを以下のように変更します。ToDoCreate;注意すべき点としてはconfirm()ではなく、window.confirm()とする必要があるところでしょうか。Validationを行うもう一つの問題点として、テキストボックスが空でも登録されている点ですね。これも直して置きます。src/todocreate.jsのhandleSubmit()を以下のように変更しました。空文字列または2文字未満であれば何もしません。}テキストボックスにfocusするToDoを入力する際にわざわざテキストボックスをクリックするのも面倒なので、ページが読み込まれたと同時にfocusをしてあげます。src/todocreate.jsを以下のように変更します。}}上記は変更した部分だけを抜き出しています。ReactDOMの機能を利用しますので新たにimportしました。componentDidMount()はLifeCycleの機能。ComponentがDOMツリーに追加された瞬間に呼び出されます。ここで単純にfocus()メソッドを実行してあげればよいのですが、問題はどうやってテキストボックスを特定するかです。ref="newtodo">といった形でref属性を追加しました。この属性をつけておくとReactから簡単に参照することができるようになります。この場合だとthis.ref.newtodoですね。ReactDOM.findDOMNode()は最終的にDOMオブジェクトを返却しますので、これでテキストボックスを検索し、戻り値のDOMオブジェクトに対してfocus()を実行しているといます。Lifecycleについては過去の記事を参照してください。#4「Lifecycleを活用してみる」https://blog.katsubemakito.net/react/react1st-4-lifecycle「はじめてのReact」一覧に戻るComponentのLifecycleReactのComponentは生まれてから死ぬ(破棄される)までの間にたくさんのイベントが用意されており、それらのタイミングで特定のメソッドを実行してくれる機能を自由に使用することができます。「はじめてのReact」一覧に戻る前回準備した環境を使って、早速Webアプリを作ってみたいと思います。いうときはToDoアプリを作るのが伝統となっていますので、それに習いますwなお、本来であればテストコードを書きながら進めるべきだとは思いますが、今回は割愛しております。準備編プロジェクトの作成rtodoという名前でプロジェクトを新規作成しました。好きな名称をつけてください。rtodoGitリポジトリの準備GitHubにもrtodoという名前でリポジトリを準備しました。masterComponentを作ってみる新しいComponentを作るまずは腕鳴らしに簡単なComponentを用意してみます。src/header.jsというファイルを作成し、その中に以下のコードを記述します。render()でタグを描画しているだけですね。h1の中はprops.childrenでもらった文字列をそのまま出しています。Header;最後のexport文を忘れないように気をつけてください。これを記述することで他のファイルからこのComponentを利用することができるようになります。子供の要素にアクセスする方法(this.props.children)については過去の記事を参照してください。/>のようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んで<Foo>Hello!</Foo>のように何らかの要素を挟んでみたいと思います。「はじめてのReact」一覧に戻るここまでご紹介してきたサンプルは学習やちょっとした検証には使えるのですが、実際に本番環境で動かすのには向いていません。いうわけで今回は本番環境で動かすコードを作成するための開発環境を準備してみたいと思います。Reactの開発環境Node.jsのインストールまず最初にNode.jsを入れる必要があるのですが、アップデートに対応しやすくするためバージョン切り替えが手軽に行えるツールをインストールした上でNode.jsの最新版を入れます。MacやLinuxならnodebrewNode.jsのバージョンをnodebrewで切り替えるhttps://blog.katsubemakito.net/nodejs/switch_version_with_nodebrewインストールされたNode.jsのバージョンを切り替えたくなるタイミングがありますよね。バージョンアップの際はもとより特定バージョン下での挙動を確認したいとき、バージョンを上げたがうまく動かなくなってしまったので切り戻しを行いたい時などです。Qiitahttps://qiita.com/satoyan419/items/56e0b5f35912b9374305※この記事はWindowsを前提として書かれています。※Macの場合は、「(http://qiita.com/satoyan419/items/693a84e26a8ad2f0e2...Qiita今回は以下のバージョンで構築を開始します。npmはNodejs用のパッケージマネージャーで、これを使って様々な便利ライブラリやツールをインストールすることができます。--version6.5.0create-react-appのインストールReactの開発環境をゼロから作ろうとすると中々に面倒なのですが、コマンド一発で必要な物を一式揃えてくれる便利ツールがfacebookより公式に提供されているので今回はこちらを利用してみます。GitHub.GitHubでは先ほどインストールしたnpmコマンドを利用してこのcreate-react-appを入れます。npmを利用するとコマンド一発で入ります。create-react-app今回は以下のバージョンが入りました。API等)をAjaxなどで叩きデータを取得する、もしくはデータを保存するといった行為を日常的に行っているわけですが、今回はAjaxでデータ取得し表示するまでに挑戦してみます。ComponentとあるRPGのモンスターの一覧が記録されたJSONファイルをAjaxで取得し、そのままReactで表示するサンプルです。公式ドキュメントの例をちょろっといじったものになります。サンプルデータファイルです。実際にはサーバ側で動的に出力することが多いと思いますが、今回は静的なファイルで試します。ファイル名はdata.json。}実際の処理を行うHTMLです。「はじめてのReact」一覧に戻るこれまで何の前触れもなくチラッと出てきたComponentにCSSを適用する方法について、いよいよ解説したいと思います。ComponentComponent名は前回と同じですが、今回はボタンをクリックする度に文字色が変化するサンプルにしてみました。document.getElementById('root'));</script></body></html>続きを読む2019.01.20Redmineに投稿されたURLからREFERERを送信しないOSSのプロジェクト管理ツールである「Redmine」を利用している方も多いと思いますが、デフォルトのままだと投稿されたURLをクリックするとRedmineサーバのFQDNが参照元(REFERER)として相手方サーバに渡されてしまいます。Analyticsで「参照サイト」の項目を表示したところですが、数は少ない物の社内RedmineのFQDNと思われるREFERERが渡ってきているのがわかります。オープンなプロジェクトであれば問題ないでしょうし、何らかのアクセス制限がされていれば閲覧することはできないのですが、管理者からするとあまり気持ちの良い物ではありませんし、一時的に設定をミスして全公開状態になることも考えられます。今回はそもそもREFERERを渡さない設定を行います。Redmineにプラグインを入れてちょちょいと設定するだけです。/>のようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んで<Foo>Hello!</Foo>のように何らかの要素を挟んでみたいと思います。Componentおもしろサンプルが思いつかなかったので、公式ドキュメントほぼそのまま、ダイアログの作成を行います。#15「Componentの連携」複数同時に処理をする「はじめてのReact」一覧に戻るいよいよReactの真骨頂っぽいところに足を突っ込んでみます。前回はComponentの中にComponentが1つだけ内包されていましたが、これを複数にしてみたいと思います。相互変換Component今年の5月には新しい年号が爆誕するのにちなんで、西暦と和暦を相互に変換するComponentを作成してみたいと思います。今回も公式ドキュメントのサンプルを改変した物になります。実行すると昭和、平成、西暦の3つのテキストボックスが表示されます。いずれか1つに入力すると残りの2つが連動して変化します。コードがちょっと長いのですが、理解のしやすさを優先しただけで実際にやってることは大したことありません。#14「Componentの連携」入力された値を動的に渡す「はじめてのReact」一覧に戻る今回はユーザーが入力した値を別のComponentにリアルタイムに渡すサンプルを作ってみたいと思います。カラーチェッカーComponentテキストボックスに色の名前を入力すると、ほぼリアルタイムに■の色が変化するComponentになります。Reactの公式ドキュメントの水の温度によって表示を変化させるサンプルを改変した物です。「はじめてのReact」一覧に戻るReactでフォームを使ってみようシリーズも佳境に差し迫った第4弾。今回はラジオボタンを触ってみます。時限爆弾の解体ラジオボタンComponentもはら映画で定番となった、時限爆弾の解体シーンで「青と赤どちらのコードを切るか...」を再現するComponentを作ってみたいと思います。3色のラジオボタンが並んでおりハズレを選択(コードを切断)すると爆発します。言語によってインデント幅を変更する昔からの習性でコーディングする際のインデントはタブ派なんですよ、スペースの数は4つ。ところが...GitHubでソース見るとタブがスペース8つ分になるブラウザのデフォルト動作URLの最後に?ts=4とかつけると変更はできるが...JavaScript界隈だとスペース2個が主流っぽいという空気を感じてまして、長いものには巻かれろ精神で、ひとまずJSだけインデントをスペース2個に変更することにしました。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。