メイン

javascript アーカイブ

2022年12月16日

Friendly Chat

FriendlyChat Firebase チャットアプリケーション「Friendly Chat」チュートリアルの紹介記事
https://www.topgate.co.jp/blog/google-service/6495
他ツールに一切依存せず Firebase + javascipt だけで動作しそう。試してみると残念ながら 記事通りとはならない。本家「AngularFire Web コードラボ」(以前は「easy chat」だった?)
https://firebase.google.com/codelabs/firebase-web
は、現時点でクローン元
https://github.com/firebase/friendlychat-web

https://github.com/firebase/codelab-friendlychat-web
にリダイレクトされ、webpack? AngularFire に依存、完成ソースフォルダも無い。
 当時のシンプルな「Friendly Chat」を再現。前提は、
■Google アカウント
https://accounts.google.com
■Firebase
https://console.firebase.google.com/
 Authentication (Google認証のみ)
 Storage
 Firestore Database (Cloud Firestore)(元々Realtime Databaseだった)
 Hosting
■Google Cloud Shell (ブラウザだけで完結、エミュレータ等インストール不要)
https://console.cloud.google.com/cloudshelleditor

 手順はこちらから

2022年12月15日

Firebase Authentication By Google

 "Firebase Authentication" で Googleアカウント認証を使う備忘録。 前回同様、自前のデータベース無しで ユーザー認証できる。Sign-in method メール/パスワードに比べ、表示名・アイコン等 新規登録の実装が不要でシンプル。React,webpack,Visual Studio Code(VS Code),Vue Router,jquery などに一切依存しない実装サンプル。

▼ログイン ▲ログアウト

前提は以前の「メール/パスワード認証」同様に
●以前の「Firebase Functions 1」 で「プロジェクト」と「ウェブ(web appli)」まで作成済。
●firebasejs 10.1.0 (Firebase v10)
...▼

続きを読む "Firebase Authentication By Google" »

2022年12月14日

Try running "npm install" in your functions directory before deploying.

 Firebase Functions デプロイ時のエラー。前提
$ node -v
v18.12.1 (Node)

$ npm -v
9.7.2 (Node Package Manager)

$ firebase --version
12.4.0 (Firebase CLI)
...▼

続きを読む "Try running "npm install" in your functions directory before deploying." »

2022年12月12日

Firebase Realtime Database

Firebase Realtime Database Google の Firebase Realtime Database を使えば、自前の Web Socket サーバー無しでプッシュ通信できる。いずれかのブラウザから送信した文字列が他のブラウザに表示される。必要最小限の実装(html,javascript)で動作確認する備忘録。
 前提は
●以前の「Firebase Functions 1」 で「プロジェクト」と「ウェブ(web appli)」まで作成済。
●firebasejs 10.1.0 (Firebase v10)
●ブラウザ
Google Chrome 116.0.5845.96 (64 ビット)
Firefox 116.0.3 (64 ビット)
Microsoft Edge 115.0.1901.203 (64 ビット)
...▼

続きを読む "Firebase Realtime Database" »

2022年12月11日

Google Cloud Shell で firebase init エラー

Realtime Database を使う Firebaseプロジェクトで、これまでのように Google Cloud Shell
$ firebase init
したところエラー。
$ npm -v
9.8.1

$ firebase --version
12.4.6
...▼

続きを読む "Google Cloud Shell で firebase init エラー" »

2022年12月10日

Firebase Authentication

 Google の Firebase Authentication を使えば、自前のデータベース無しで ユーザー認証できる。React,webpack,Visual Studio Code(VS Code),Vue Router,jquery などに一切依存しないシンプルな実装サンプル。スタティックファイルだけの既存サイトに javascriptだけで 新規登録・ログイン・ログアウトを追加する備忘録。

▼新規登録・ログイン ▲ログアウト

前提は
●以前の「Firebase Functions 1」 で「プロジェクト」と「ウェブ(web appli)」まで作成済。
●firebasejs 10.1.0 (Firebase v10)
...▼

続きを読む "Firebase Authentication" »

2022年12月09日

Firebase で BBS

Firebase BBS  Firebase Functions + Firestore の応用で チャット や ツイッター サンプルが見つかるが 古く不完全。 BBS として完成させる備忘録。

前提環境
●Google Chrome 114.0.5735.199(Official Build)(64 ビット)
●FireFox 115.0.2 (64 ビット)
「Firebase Functions」 の Functions 利用登録済。関数名 「a」。[Google Cloud Shell] を利用。
「Firebase Functions + Firestore」 の Firestore 利用登録済。コレクション名「bbs」。
●v18.12.1 (Node)
●9.7.2 (Node Package Manager)
●12.4.4 (Firebase CLI)
●BBS のURL
https://remix.asia/bbs.html
...▼

続きを読む "Firebase で BBS" »

2022年12月08日

Screen Code Analyzer から firebase へデータ送信

 前回の「Firebase Functions + Firestore」の具体的応用例。
 画面上表示されたQRやバーコードをスキャンする「スクリーンコードアナライザー」が標準装備するデータ送信先を、サーバー設置することなく簡単に firebase に出来る。

...▼

続きを読む "Screen Code Analyzer から firebase へデータ送信" »

2022年12月07日

Firebase Functions + Firestore

 Google の Firebase Cloud Functions スタートガイド(第2世代)前回に引き続き 手元PCのブラウザだけで 動作を確認する手順備忘録。 サンプルは、

●HTTPSリクエストしたメッセージをネット上のデータベースに登録
●データベース登録時に大文字変換した列を追加
するもの。
...▼

続きを読む "Firebase Functions + Firestore" »

2022年12月06日

Firebase Functions 1

 Web や Android アプリから ネット上のサーバーでデータ共有したい。 OS、DB、HTTP通信なら httpdソフトウェア、HTTPS通信ならドメインと証明書・・・等が必要。これらのサーバーサイド機能を Firebase で代替する備忘録。
 今回は 手元PCのブラウザだけで Firebase 動作を確認する手順。 クラウド上で提供される [Firebase Functions]、[Google Cloud Shell] を利用。
 HTTPSリクエストすると「Hello from Firebase!」と応答するサンプル。
[Google Cloud Shell] は Firebase 管理ツールが含まれる為、PC非依存。

前提
■Google アカウント
https://accounts.google.com
...▼

続きを読む "Firebase Functions 1" »

2020年12月23日

Style Sheets + javascript でダークモード

 Webページをダークモードに対応。既存のスタイルシートと新たなダークモードスタイルシートを javascript で切り替えるアプローチ。
 デフォルトでシステム設定に従い、閲覧者の操作でライトモード・ダークモードを選択可能にする最小限の実装例...▼

続きを読む "Style Sheets + javascript でダークモード" »

2015年12月27日

EUCなフォームをjavascriptでPOST

 UTFに移行されることなく10年以上経過するレガシーシステム。既に画面遷移の設計が破綻ぎみ。やむを得ず、EUCで生成されているフォームをクライアントからバックグラウンドで送信することに。
ajax で POST するフォームの全てのデータをエンコードする
$('formname').serialize();
は、UTF8 前提の javascript なので EUC-JP や ShiftJIS なフォームであっても UTF8 として送信してしまう。

●前提環境
PHP Version 5.6.15
default_charset = EUC-JP
mbstring.language = Japanese
mbstring.encoding_translation = Off
mbstring.detect_order = auto
jQuery JavaScript Library v1.6.2

今回は、
http://polygon-planet-log.blogspot.jp/2012/04/javascript.html
encoding.js を利用させていただく場合の具体的な実装例...▼

続きを読む "EUCなフォームをjavascriptでPOST" »

2010年03月30日

チェックボックスのようなラジオボタン

 項目の中から1つだけを選択するなら、ラジオボタンかセレクタ。
要件
・未選択状態がある。
・選択状態を解除できる(誤操作に対応)。
・リセットは使えない。
selectタグは見栄えの点で除外するが、未選択項目を含めればjavascriptを使わずhtmlだけで実現できる。
 「排他的なチェックボックス」、「解除可能なラジオボタン」はjavascriptを使わざるをえなさそう。
 javascript ラジオボタン・・・等で検索すると、項目配列を全件捜査し参照・更新する例が多い。
 ラジオボタン名に依存しない汎用版を試みる。javascriptはこちら↓

続きを読む "チェックボックスのようなラジオボタン" »

About javascript

ブログ「Remix.asia」のカテゴリ「javascript」に投稿されたすべてのエントリーのアーカイブのページです。過去のものから新しいものへ順番に並んでいます。

前のカテゴリはjavaです。

次のカテゴリはOSです。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。