ゴン

フェデレーションプロバイダを使ったログイン処理

ViteのReactを使ってFirebase フェデレーションIDプロバイダのログイン処理について解説

GoogleアカウントやFacebookアカウントなどを利用したログイン処理を作成するのは、Firebaseを利用するとカンタンに実装することができます。 この記事では、ViteのReactを使ったプロバイダのログイン方法を解説しています。 create-react-appコマンドオプションで作成されたReactとは環境変数などの読み込みなど若干違うので、create-react-appでReactを作成した方は、参考程度にご覧ください。 フェデレーションとは Firebaseのドキュメントでは、フェデレ ...
Firebaseで認証処理

ReactとTailwind CSSを使ってFirebaseのWeb認証処理を解説

Firebaseではお手軽にログインなどの認証処理を作ることができます。 認証処理では、メールやパスワードの他にも電話番号やGoogle認証、Microsoft認証といった様々な認証方法があります。 この記事では、Reactを使ってFirebaseのWeb認証処理について解説しています。 Firebaseの認証処理とは Firebaseの認証処理は、Firebase Authenticationのサービスを利用します。 Authenticationでは、FirebaseUIを使用するか、Firebase ...
ReplitのReactを使ってFirebaseのHosting

ReplitのReactを使ってFirebaseをHosting

ブラウザ方IDEのReplitを使ってFirebaseのHostingを行うことは可能なのか?ってことで実際に試してみました。 結論から言うとFirebaseを利用することは可能なんですが、月額プランじゃないとキビしい感じです。 この記事では、Replitを使ってFirebaseのHostingまで行った内容を解説しています。 ローカルで行った方法と若干違うので、気になる方はぜひご確認ください。 Replitについては、こちらの50以上のプログラミンが利用できるIDEで解説しています。 ReplitでRe ...
Vite+Firebase+React

Firebaseを使ってViteのReactをHosting

ViteのReactで、サーバレスのFirebaseを使ってHostingを行ってみる事にしました。 正直に言うとサーバレスって、普通に利用するよりお金がかかるイメージがあるし、管理できる技術あればサーバレスじゃなくても良くね?って思います。 でも利用せずにコストについてとやかく言うより、まずは実際に試してみて感じた良い点などをこの記事では解説します。 Viteを使ってReactのプロジェクトの作成は、こちらの記事で解説しています。 サーバレスとは サーバレスとは、サーバの構築や保守メンテナンスなどを考え ...
Viteを使ったReact入門

Viteを使ったReact入門

Reactの開発は、IntelliJ IDEAのプラグインを利用して作成していたので特に気にしていませんでした。 しかし、Viteという高速開発を目的としたビルドツールが気になったので、インストールからビルドのやり方について、この記事では解説しています。 Viteとは Viteとは、クイックのフランス語から来ている様です。 高速でスリムな開発を目的としたビルドツールになります。 Viteを利用することで、ReactはもちろんPreactも利用する事ができ、Vue.jsなどのフレームワークを使った開発もでき ...
JavaScriptの基本的な使い方を解説

JavaScriptの基本的な使い方を解説

JavaScriptの基本的な変数の定義方法からループの書き方、開発するために必要なブラウザでの確認方法について解説しています。 他にもJavaScriptを外部ファイルにした際のImportやExportによる注意点についても解説しているので、ご確認ください。 JavaScriptとは JavaScriptは、Webサイトやサーバサイドの技術で使われています。 Webサイトでは、ページのボタンに動きをつけたり、表示する際にアニメーション表示させたりすることもできます。 サーバサイドでは、APIやSock ...
Seleniumの基本的な使い方を解説

PythonによるSeleniumの基本的な使い方を解説

PythonのSeleniumを使って、ChromeやFirefox、Edgeを操作しました。 各ブラウザで利用できるものと出来ないもので違いがあるのか、この記事ではSeleniumの基本的な使い方からちょっとした違いについて解説しています。 また興味があれば、こちらのSeleniumで日本株一覧エクセルの取得記事もご覧ください。 構成 今回解説するために下記の構成で進めます。 各Pythonファイルがあり、同じ位置にdriverディレクトリ(フォルダ)を作成し、その中にChromeDriverやFire ...
Python Selenium

PythonのSeleniumを使って日本株一覧表を取得してみた

Pythonでエクセルの操作をして、集計表や分析するために色々作っていました。 今回、日本取引所が出している日本株一覧表のデータを自動で取得するために、GolangのSeleniumで作るのがめんどくさかったのでPythonで作ることにしました。 正直、SeleniumじゃなくてScrapyやもっとカンタンにできるのですが、PythonのSeleniumは使った事がなかったので試しに作成してみました。 この記事では、PythonのSeleniumについて解説しています。 ちなみに、GolangでSelen ...
レイアウトボックス

【CSS入門】レイアウトとボックスモデルについて解説

CSS入門の第2弾として、レイアウトとボックスモデルについて解説します。 今回解説するのはディスプレイプロパティの種類と変更の仕方、絶対位置や相対位置のスタイルについてです。 ちなみに第1弾ではCSSの基本的な書き方から、セレクタや擬似クラスなどについて解説しています。 第1弾について興味があれば、こちらの記事になります。 CSSボックスモデル HTMLの要素には、ボックスと呼ばれる領域が生成されます。 その中には、marginやpadding、コンテンツの領域があり、下記がその図になります。 margi ...
CSS入門 基本的な書き方

【CSS入門】基本的な書き方を解説

Webサイトを制作するにあたって、CSSは必須のスキルになります。 他にも最近のモバイルアプリなどでは、CSS構造を利用したフレームワークも多くあります。 そのため、WEBアプリからモバイルアプリまでCSSを利用することが多い為、アプリ開発をするにはスキルを習得していたほうが良いでしょう。 この記事ではWEBページを作る上で、CSSの基本であるHTMLにスタイルをあてるための3つの方法と、CSSの使い方までを説明します。 動画などで勉強したい方は、下記のUdemy講座もオススメです。 CSSとは CSSと ...
HTML入門

HTML開発の入門!VSCodeのオススメプラグインと基本的な書き方を紹介

私はプログラミング開発を行う時に、VSCodeとIntelliJを併用して使っています。 理由としては、IntelliJがちょこっとしたメモやコードで利用する場合、使い勝手が悪いからです。 カンタンなコードで1ファイルしか開かない場合には、VSCodeを利用しています。 今回、VSCodeを紹介する理由は、HTML開発をする際にIntelliJだと有料エディタの為、初心者からすると痛い出費になるからです。 VSCodeでも、プラグインを入れることでIntelliJのIDEAとほとんど似たような開発が出来る ...
PythonでEXE化

【まとめ】PythonをEXE化する方法について

Pythonを使ってEXEファイルを作成する方法をまとめました。 使うならPyInstallerを使った方が良いです。 しかしWindowsだけやMacだけといった場合は、Py2exeやPy2appといったライブラリもあります。 Py2appは私の環境の問題なのかうまく動作しなかったので、オススメはしません。 この記事では、PyInstallerやPy2exeとPy2appについて解説しています。 PyInstallerとは PyInstallerは、Pythonアプリとそれに依存するライブラリなどをまと ...