絞り込み条件を変更する
検索条件を絞り込む
すべてのカテゴリ
新着有料ブログ
【三択タロット】あなたの総合運は？（4/29～5...
占い
500円
鈴森理乃
2024/04/28
自分の信じた人からうまくいく〜目に見えないものシ...
占い
500円
ひすい＠気と...
2024/04/28
「即利用可」 美容系YouTuberマネジメント...
法律・税務・士業全般
4,000円
行政書士三浦...
2024/04/28
.png)
相手を許すことは、自分を許すこと。自分を許せば、...
占い
500円
霊感霊視 リ...
2024/04/28
2024年5月 星読み術 -あなたの運命を好転さ...
占い
500円
願望実現占い...
2024/04/28
魚座（うお座）
占い
500円
占い女神るあ
2024/04/28
水瓶座（みずがめ座）
占い
500円
占い女神るあ
2024/04/28
山羊座（やぎ座）
占い
500円
占い女神るあ
2024/04/28
射手座（いて座）
占い
500円
占い女神るあ
2024/04/28
蠍座（さそり座）
占い
500円
占い女神るあ
2024/04/28
天秤座（てんびん座）
占い
500円
占い女神るあ
2024/04/28
４月２８日のスイーツアイコン
デザイン・イラスト
500円
mohumo...
2024/04/28
10 件中 1 -
10 件表示
簡単にわかる Web サーバーの仕組み？
簡単にわかる Web サーバーの仕組み？Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム（コンピュータとソフトウエア）をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ（これが URL と呼ばれる物です）の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像（写真や動画、イラスト）のファイル、また Javascript のファイルなどが含まれているので、そうした情
0
Reactで作るかNextで作るか？
Reactで作るかNextで作るか？NextでFirebaseのデータベースを利用する場合の方法を紹介してきました。 これまでの投稿では、＊ Nextの機能を利用してバックエンド側とのAPIを使う方法＊ 表示のページを分けて全てサーバー側で処理する方法 を紹介してきました。この記事では通常のReactで利用している方法を紹介します。その上で、WebアプリやWebサービスの実装でReactで作るか、Nextで作るかを考えてみました。 通常のReactで利用している方法これは、ReactやVueでFirebaseを利用する場合のやり方と全く同じです。 「Webブラウザ」で動作するコードでFirebaseのデータベースにアクセスするためのAPIを呼び出せば使えます。設定のやり方も同じです＊ npmを利用する場合は「firebase」のモジュール（パッケージ）をインストールする。＊ npmを利用しない場合は、CDN(Contents Delivery Network)のリンクをHTMLから呼び出す（「Heed」を使ってリンクを呼び出します）＊ Firebaseのプロジェクト情報を元にFirebaseの初期化を行う Firebaseのアクセスは、Webブラウザで動く部分のコードで利用するという感じで、この方法の場合、Nextで特別な事をする必要はありません。注意点は、Reactで利用する場合と同じで、セキュリティルールを別途作成して、アクセスの権限をきちんと管理する事くらいです。これもReactで利用する場合と変わりません。バックエンドとフロントエンドの両方で使えるか？ここで、疑問
0
Nextでサーバー側に処理を集めた実装例
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" />
0
Nextの中のAPIの利用方法
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の例で
0
Next と React は結構違います！
Next と React は結構違います！Next は React で利用している、仮想 DOM を活用しているので似ている部分も多いのですが、設計の仕方は結構違う所もたくさんあります。React の場合、React Router を使うと「ページ」という概念での設計も可能ですが、基本的には、「１ページアプリ」の要素の方が強くなっています。 一方で、Next の場合は、サーバー側で「ページを用意する」というイメージで動作するので、設計は基本的にはページ単位ですることになります。Next の基本的なコンセプトは「ページ」Next で Web アプリや Web サイトを設計する場合、ページ単位での実装を考えると上手くまとめる事ができます。 もちろん、同じページで Web ブラウザ側でレンダリング（描画）する事もできるのですが、別の画面にする場合は、ページごと入れ替えてしまった方が設計上はシンプルでスッキリした実装になります。Web ブラウザで表示を動的に変えるような実装の場合、React などのフロントエンドのフレームワークを中心に作った方が実装もスッキリします。Next でページを設計する上で考えることは、「いつ」ページを作るかです。「いつ」とはどういうことかというと、大きく分けると２つです。＊ Next の公開用のイメージを作る時＊ Web ブラウザがリクエストした時 最初にすることは、Web アプリや Web サイトで必要なページがどちらのタイプなのかを分類する事が最初の作業になります。基準はシンプルで、同じ画面を表示する場合は、Next の公開用のイメージを作成する際に作
0
NextでFirebaseを使ってWebアプリを実装するコツは？
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 がレンダリング（描画）していますが、予め表示に必要な情報は作られているという事になります。動的なページは、ページがリクエストされた時にサー
0
Next/Nuxt で作ったアプリもホスティングできる Firebase
Next/Nuxt で作ったアプリもホスティングできる FirebaseWeb アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。サーバー側のレンダリングとは？最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要がありま
0
Firebase Cloud Firestoreの管理ツールをNextJSで実装する（3）
Firebase Cloud Firestoreの管理ツールをNextJSで実装する（3）前回の投稿では、作成した NEXT のプロジェクトのテンプレートの API を呼び出すやり方を具体的な例を使って紹介しました。この記事では実際に Firebase のデータベースにアクセスする API を呼び出すやり方について紹介します。データベースの管理は基本的に以下の４つの機能があれば実現できます＊ 既存のデータの取得＊ 既存のデータの更新＊ 既存のデータの削除＊ 新規データの追加Cloud Firestore の既存のデータの取得Firebase の Cloud Firestore のデータの更新や削除を行う場合、最初に保存されているデータを取得して、そのデータをもとに処理するのが自然です。データベースのデータは、追加、更新、削除が発生するのが普通なので常に変わる可能性があります。したがって、あらかじめ表示するデータを準備しておくことはできません。基本は毎回データを Firebase Cloud Firestore から取得して表示する必要があります。NEXT の場合、サーバー側でレンダリングを行うので、ページをロードする前にデータを取得しておく必要があります。つまり、サーバー側で動的にページの表示データをレンダリングすることになります。これには「getServerSideProps()」という名前の関数を利用して取得します。export async function getServerSideProps(): Promise<any> { const pendingl
0
Firebase Cloud Firestoreの管理ツールをNextJSで実装する（2）
Firebase Cloud Firestoreの管理ツールをNextJSで実装する（2）前回の投稿では、NEXT のプロジェクト作成と Firebase admin SDK を使うための設定の紹介をしました。今回は、NEXT のページから Firebase admin SDK を利用する方法について紹介します。
Firebaase admin SDK はサーバー側で使う！
もちろん、Firebase の通常の SDK を使えば、NEXT のページから Firebase のリソースにアクセスする事ができます。これは、React や Vue で Firebase の通常の SDK を使う場合と基本的に同じです。
あるいは、Firebase の CDN のを読み込んで使うことも可能です。
しかし、この場合はあくまで Web ブラウザ（フロントエンド）からのアクセスで、Firebase admin SDK を使う恩恵を余り受けることができません。
今回、NEXT を使って Firebase Clud Firestore の管理ツールを作る例を紹介する大きな理由はサーバー側から Firebase のリソースにアクセスするのが大きな理由です。
NEXT のテンプレートにある API の機能を利用する
NEXT のフレームワークはサーバー側のレンダリングに対応するため、バックエンドのプログラムも利用できるのが最大の魅力です。「create-next-app」で作成する NEXT のプロジェクトのテンプレートの中にもその機能がすでに組み込まれています。
まずはテンプレートの AP
0
Firebaseホスティングに必要な容量は？ReactとNextの比較
Firebaseホスティングに必要な容量は？ReactとNextの比較Firebaseの利用料金は使用する容量も関係します。
そこで、サーバーサイドでレンダリングするNextとブラウザでレンダリングするReactでどの程度の差があるのかを実際の実装を基にデータを取ってみました。
最近、Firebaseのバックエンドの実行環境が変わっていろいろなポリシーが変わったようで、使用している容量が大きくなているので調べてみました。
Firebaseのホスティングに関係する容量は？
Firebaseでホスティングする場合に関係する使用容量は2種類あります。
ホスティングで使用している容量
ストレージで使用している容量
です。この内Webホスティングで使用している容量は基本的にWebページ関連の容量で、大きなビデオや写真などのイメージがない場合はそれほど大きくならないのが普通です。
比較の例として、最近運営してる記事の投稿サイトを例にしてみました
＊ Firebase関連の記事のサイト
＊ 趣味の登山のサイト
です。どちらも似たようなサイトにしてあります。
Firebase関連の記事を投稿しているサイト
このサイトは、Nextを利用して実装しています。サーバー側で表示するページを動的にレンダリングして記事を表示するようにしています。
殆どイメージは使用していないので、記事の平均的なサイズはせいぜい数十KBです。従って使用容量を見る際に記事の件数はサイズには余り影響が出ません。
趣味の登山のサイト
このサイトは２つのReactアプリを実装しています。 一つは記事の投稿サイトで
0
10
件中
1 - 10
件
あなたも記事を書いてみませんか？
多くの人へ情報発信が簡単にできます。
ブログを投稿する
多くの人へ情報発信が簡単にできます。