投稿

3月, 2021の投稿を表示しています

Nextでサーバー側に処理を集めた実装例

イメージ
ホーム ブログ Firebase情報 Nextでサーバー側に処理を集めた実装例 2021年3月31日 Nextでサーバー側に処理を集めた実装例 Nextでサーバー側に処理を集めた実装例を紹介します。 実装内容は、前回紹介したAPIを利用したものと機能的には同じものです。 ページの「Get」ボタンを押したら、Firebaseのデータベースのデータのリストを表示するというシンプルなものです。 ２つのページで実装 今回は、Webブラウザー側のコードを最小限にしてシンプルな実装にしています。 実装は２つの別々のページで実装します。 ボタンだけのシンプルなページ Firebaseのコレクションデータを表示するページ に分けて実装します。実際は、ボタンではなくリンクを使って別のページを読み込むようにしておいて、Firebaseのコレクションデータを表示するページがリクエストされたら、バックエンド（サーバー）側でFirebaseのデータを取得してリストを表示するページを作ってWebブラウザーに送るという仕組みにします。 最初のボタンのページの例です import * as React from "react"; import Head from "next/head"; class Sample extends React.Component { render() { return ( <React.Fragment> <Head> <title>Create Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> <a className="btn btn-primar
コメントを投稿
続きを読む

Nextの中のAPIの利用方法

イメージ
ホーム ブログ Firebase情報 Nextの中のAPIの利用方法 2021年3月30日 Nextの中のAPIの利用方法 Nextのフレームワークの中に、バックエンドとのカスタムAPIを実装する事ができます。 便利なのは、フレームワークの中に、フロントエンドとバックエンドを一緒に実装する事ができる事です。当たり前ですが、呼び出しは基本的にフロントエンド（Webブラウザで動作しているJavascript）が行って、処理はバックエンド（Webサーバー）側で行います。 前回の投稿で触れていますが、コードが動作する場所を意識して設計する必要があります！ APIの定義は？ Nextのテンプレートのプロジェクトを「create-next-app」を使って作成した場合、各ページのファイルを入れるフォルダとして「pages」というフォルダが作成されます。 この下に、「api」というフォルダも作成されていて、サンプルのファイルとして、「hello.js」というファイルが作成されています。このフォルダのファイルでAPIを定義します。 サンプルの「hello.js」の場合、「/api/hello」というURLがAPIのURLになります。 ファイル名のベース（拡張子の「.js(.ts)」）を取り除いた名前がAPIのURLになるという事になります。 従って、「backend.ts」というファイルを「api」フォルダの下に作った場合は、「/api/backend」というURLを指定するとAPIを呼び出すことができます。 APIの実装 APIの実際の処理は、「backend.ts」に記述します。 今回は、例としてFirebaseのデータベースからデータを取得するという処理紹介します。 backend.tsの例です。このAPIが呼び出されると、サーバー側でFirebaseのデータベースの「test」というコレクションにアクセスしてデータを取得してそのデータをフロントエンド（Webブラウザ）に返します。 今回はコマンド（command）
コメントを投稿
続きを読む

NextとReactは結構違います！

イメージ
ホーム ブログ Firebase情報 NextとReactは結構違います！ 2021年3月29日 Next と React は結構違います！ Next は React で利用している、仮想 DOM を活用しているので似ている部分も多いのですが、設計の仕方は結構違う所もたくさんあります。React の場合、React Router を使うと「ページ」という概念での設計も可能ですが、基本的には、「１ページアプリ」の要素の方が強くなっています。 一方で、Next の場合は、サーバー側で「ページを用意する」というイメージで動作するので、設計は基本的にはページ単位ですることになります。 Next の基本的なコンセプトは「ページ」 Next で Web アプリや Web サイトを設計する場合、ページ単位での実装を考えると上手くまとめる事ができます。 もちろん、同じページで Web ブラウザ側でレンダリング（描画）する事もできるのですが、別の画面にする場合は、ページごと入れ替えてしまった方が設計上はシンプルでスッキリした実装になります。Web ブラウザで表示を動的に変えるような実装の場合、React などのフロントエンドのフレームワークを中心に作った方が実装もスッキリします。 Next でページを設計する上で考えることは、「いつ」ページを作るかです。 「いつ」とはどういうことかというと、大きく分けると２つです。 Next の公開用のイメージを作る時 Web ブラウザがリクエストした時 最初にすることは、Web アプリや Web サイトで必要なページがどちらのタイプなのかを分類する事が最初の作業になります。 基準はシンプルで、同じ画面を表示する場合は、Next の公開用のイメージを作成する際に作って仕舞えば、リクエスト時はその情報を Web ブラウザに提供するだけなので高速に表示が可能です。例えば、入力フォームなどは、予め作成しておく事が可能です。 一方で、表示画面が変わる場合は、Next の公開イメージを作成する際には
コメントを投稿
続きを読む

NextでFirebaseを使ってWebアプリを実装するコツは？

イメージ
ホーム ブログ Firebase情報 NextでFirebaseを使ってWebアプリを実装するコツは？ 2021年3月28日 Next で Firebase を使って Web アプリを実装するコツは？ Next で Firebase を使って Web アプリを実装する場合、ちょっとした注意が必要です。大きな理由は、Firebase admin SDK は、Web ブラウザ内では動作しないようにできているからです。 Next で実装する場合、サーバー側で Firebase のデータベースなどにアクセスするケースが多いのですが、サーバー側で Firebase のデータベースにアクセスする場合は、Firebase admin SDK を使ってアクセスする必要があります。 ところが、この Firebase admin SDK を使って、Web ブラウザから Firebase のデータベースにアクセスしようとするとエラーになります。 サーバー側で HTMl ページを作る Next 一番のポイントは、Next の仕組みをよく理解して置くことにつきます！ 特に、記述したプログラムのコードがどこで実行されるかをきちんと理解しておく必要があります。 基本は、Next のアプリの場合、HTML のページはサーバー側が作っているということです。Web サイトの原理を考えれば当たり前なのですが、通常の静的なページ（HTML ファイルなど）はサーバーがリクエストに合わせて Web ブラウザに提供します。 また、事前に準備可能なページは Next の公開用のイメージをビルドした段階で作られています。つまり、Next がレンダリング（描画）していますが、予め表示に必要な情報は作られているという事になります。 動的なページは、ページがリクエストされた時にサーバー側で作って Web ブラウザに送られます。この時、表示に必要な情報は、サーバー側で取得して、サーバーが表示データを作る場合が殆どです。 ここで、ポイントとなるのは、Firebas
コメントを投稿
続きを読む

NuxtアプリをFirebaseでホスティングするには

イメージ
ホーム ブログ Firebase情報 NuxtアプリをFirebaseでホスティングするには 2021年3月25日 NuxtアプリをFirebaseでホスティングするには 前回の投稿で紹介したように、NextやNuxtのようなサーバ側でレンダリング（描画）をするアプリの場合は、インターネットに公開するための設定方法が少し面倒になります。これは、通常のWebサーバーの機能である、リクエストされたURLの情報を提供する以外に、リクエストされた「ページを作る」という処理が必要になるためです。 この記事では、NuxtのアプリをFirebaseでホスティングするための設定方法の詳細を紹介します。 必要な手順 NuxtアプリをFirebaseで公開する手順です。前提条件として、公開したいNuxtのアプリはすでに開発済ということでその後の手順について紹介します。この例では、Nuxtのテンプレートのプロジェクトを公開するという形で紹介していきます。 Nuxtのアプリを作る 公開用のフォルダを作成 Firebaseの設定 テスト 公開（deployment） Nuxtのアプリを作る 今回は、Nuxtのアプリの実際の実装は行いません。テンプレートのアプリをそのまま公開するという前提ですすめます。テンプレートのアプリは、「create-nuxt-app」を使って作成します。開発用のPCにインストールされていない場合は、まずこのパッケージをインストールします。 $ sudo npm install -g create-nuxt-app $ npx create-nuxt-app nuxt-sample (*)Windowsの場合「sudo」は必要ありません。 コマンドを実行すると、プロジェクトの設定について聞かれるので必要に応じて答えながらプロジェクトを作成してください。プロジェクトができたら、プロジェクトフォルダに移動して一応動作確認をしてください。 $ npm run dev で開発用のサーバーが起動されて、「localho
コメントを投稿
続きを読む

Next/Nuxtで作ったアプリもホスティングできるFirebase

イメージ
ホーム ブログ Firebase情報 Next/Nuxtで作ったアプリもホスティングできるFirebase 2021年3月24日 Next/Nuxt で作ったアプリもホスティングできる Firebase Web アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。 理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。 この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。 サーバー側のレンダリングとは？ 最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。 Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。 シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要があります。 これに対して、React や Vue は何をやっているかというと、Web ブラウザで動いているプログラムが、表示のための「HTML」をプログラムで作っているというのが、フロントエンドフ
コメントを投稿
続きを読む