[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その4

今回はチャットで発言する内容にNGワードのチェックを入れたいと思います。
特定のキーワードが含まれている場合、「？」など伏せ字に置換する機能です。

実装方法を考える

方針

この実装方法は2つのパターンが考えられます。

クライアントでチェック
中身を覗かれるとNGワードのリストが漏洩しますし、サーバ側のAPIを直接リクエストされると機能しません。ただし高速に動作する可能性が高い。
サーバ側でチェック
NGワードのリストが漏洩する心配もなく、サーバ側APIを直接叩かれても機能する。ただしクライアント側で処理する場合に比べると低速。

あくまでFirestoreで実装した前提ですが、いずれも一長一短ありますがここはひとまずサーバ側で実装してみたいと思います。
続きを読む

[Firebase] はじめてのCloud Functions

FirebaseのCloud Functionsを利用すると巷で話題のサーバレスなシステムを構築することができます。外部にURLを公開してRESTful APIなども作成できますし、Firebase内のイベントに合わせて特定の処理を実行することが可能です。もちろんFirestoreやRealtimeDatabaseなどと連携することもできます。

functionsはNode.js上で動作するプログラムを記述することになりますので、すでにJavaScriptやTypeScriptの経験がある方なら特別な言語仕様を覚える必要が無いのも魅力でしょう。

CloudFunctionsでHelloWorld

準備

Firebaseのコンソールからプロジェクトを作成します。すでに利用しているプロジェクトがある場合はそちらを使用しても大丈夫です。

[Firebase] プロジェクトを新規に作成する
https://blog.katsubemakito.net/firebase/firebase-make-newproject
しばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。プロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要になりますので、Firebaseで利用したいアカウントでログインを行ってください。「プロジェクトを追加」ボタンをクリックプロジェクトの情報を入力する画面になります。プロジェクト名半角英数字と、スペース、一部の記号で適当な名前を入力します。プロジェクト ID自動採番...
ねこの足跡R

その後CLIツールのインストールを行います。詳しくは以下のページの「1 環境の準備」の項、Googleアカウントでログインするまでの部分を参照ください。

[Firebase] 静的なWebサイトをホスティングする
https://blog.katsubemakito.net/firebase/firebase-hosting
FirebaseのHostingを利用すれば基本無料で静的なサイトを運用できます。独自ドメインも追加でき、何らならSSL証明書も無料でついてくるという太っ腹。もしサイトが成長し膨大なアクセスが発生した場合は課金する必要がありますが、こちらがプラン変更しない限り料金は一切発生しません。ドメインやDNSの準備や設定、本番へデプロイ(反映)するにはコマンドを叩く必要がありますが、それさえ乗り越えてしまえばさほど難しくはありません。環境の準備プロジェクトの作成サイトを設置するためのプロジェクトが必要になります。プロジェクト...
ねこの足跡R

ディレクトリの初期化

すでにFirebaseで利用しているディレクトリがあればそちらに、無ければ新規にディレクトリを作成しカレントディレクトリを移ります。今回はすでに使ってるプロジェクトがあったのでそちらに移動しました。

$ cd miku3net

ではおもむろに初期化コマンドを叩きます。

$ firebase init functions

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その3

前々回でFirestoreを利用してリアルタイムな通信が行えるチャットを、前回はユーザー認証を導入しました。

今回は自分が書き込んだログを削除する機能を追加してみます。

サンプル

実行結果

Firestore Chat3
https://miku3.net/db/firestore4/
miku3.net
  • 書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
  • 自分が書き込んだログは背景がピンク色になり、クリックすると削除できます。
  • 自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
  • 適当なタイミングでお掃除します。

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その2

前回、Firestoreを利用してリアルタイムな通信が行えるチャットを作成しましたが、今回はこのチャットに書き込みためにはログインが必要な状態に仕様変更したいと思います。

サンプル

実行結果

Firestore Chat2
https://miku3.net/db/firestore3/
miku3.net
  • 書き込むためにはログインが必要です。閲覧は未ログイン状態でも行えます。
  • 自由に投稿していただいて問題ありませんが、公序良俗に反する書き込みはご遠慮ください。
  • 適当なタイミングでお掃除します。

続きを読む

[Firebase] Firestoreでリアルタイムなチャットを作る (Web編) その1

今回はFirestoreでリアルタイムに情報のやりとりをしてみます。こういったときのサンプルは概ねチャットと相場が決まっていますので、ひとまずデータの授受ができる最低限のコードを書いてみます。

Firestoreの準備と基本的な使い方

詳しくは以下のページをご覧くださいませ。

[Firebase] Firestoreで読み書きする (Web編)
https://blog.katsubemakito.net/firebase/firestore_readwrite_1
今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。まずは基本的なCRUDからやってみます。Firestoreの準備プロジェクトの作成詳しくは過去記事を参照してください。Databaseの作成Firebaseのコンソールにログインしプロジェクトのトップページに移動します。左メニューのDatabaseをクリックすると、右ペインでFirestoreにするか、以前の技術であるRealtime Databaseにするか選択を迫られますが、ここではFirestoreを選択します。今回は学習が目的だったので一旦「テストモード」を選択しました。誰...
ねこの足跡R

今回はひとまず動くものを作るのを目標としますので、ユーザー管理は行わず一つの部屋にひたすらメッセージがたまっていく作りにします。

また「ルール」は今回も全開放しています。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

続きを読む

[時事] なぜチャリは首都高に突撃するのか

首都高にチャリが突撃したというニュースを時々見かけますよね。つい先日も話題になっていました。

首都高に自転車進入、時速５０キロで走行（TBS系（JNN）） - Yahoo!ニュース
https://headlines.yahoo.co.jp/videonews/jnn?a=20190217-00000021-jnn-soci
東京の首都高速に自転車が進入し、およそ５０キロのスピードで走る様子を、ドライブレ - Yahoo!ニュース(TBS系（JNN）)
Yahoo!ニュース

高速道路を走る１台の自転車。自転車が高速を走ることはもちろん禁止されていて、非常に危険な状態です。これは、１４日午後１１時すぎ、首都高速の霞が関トンネル付近を自転車が走る様子を捉えたドライブレコーダーの映像です。映像を提供した男性によりますと、自転車は時速およそ５０キロで走っていたということです。

首都高の出入り口

普段首都高を利用しない方であれば、普通に考えればそんなことありえない、そんな風に思っていた時期が自分もありました。ここで自分がいつも利用しているICの動画が手元にあったのでアップしてみました。

荏原IC(入り口)

続きを読む

[GAS] はじめての Google Apps Script

Google Apps Script(以降GAS)は、多少語弊がありますが雑に言うとGoogleDrive上で動作させるプログラムの実行環境です。今回は初歩的な利用方法についてメモしておきます。

特徴

GASはEXCELやWORDなどMS Officeで言うところのVBAのGoogle版だと思えばイメージしやすいと思います。GoogleSpreadSheetやDocumentなどGoogleのOfficeSuiteはもちろん、その他のGoogleのサービスと連携することが簡単にできるのが強みですね。またGASの開発言語はJavaScriptとなっており、すでにJSが使える方にとっては新たに言語仕様を学習するコストがないのも魅力です。

  • Google SpreadSheets, Docs, Slides, Forms内に埋め込むことが可能
    • もちろん単独のスクリプトとして動作させることも可能
  • GMail, GoogleDrive, Calender, YouTubeなどGoogleの様々なサービスとの連携が可能
  • RESTfull APIの作成が可能
    • 何ならHTMLを出力してちょっとしたサイトの構築も可能
  • 指定時間に起動させることが可能(cron)
  • 外部のURLにリクエストを飛ばすことが可能
  • 専用の開発環境(エディタ)付き

制限はありますがこれらがすべて無料で利用できる点も大きいですね。

続きを読む

確定申告の混雑予報 2019年

今年は初日に確定申告してきたのですが、税務署の壁面に混雑予報が貼ってあったのでパシャリ。

これはあくまで川崎北税務署の見解のようですが、他の地域でも参考になるかもしれません。
やっぱり最終週はアルマゲドン状態みたいですねｗ

自分の場合は11:30に到着し、すべて終わるまで90分程度でした。
昨年は開始してから数日経過してから訪れたので待ち時間は5秒くらいでしたがｗ あと午前中よりも午後の方が空いてそうです。みなさん午前中に税務署に直行し午後から仕事という思考ではないかと。

行列に並んでる時間は長いのですが、実際に窓口の方に書類を渡してからは1分もかかりませんでした。逆に不安になるから少しくらいチェックしてほしいｗ あとは税務署から電話がかかってこないことを祈るのみです。
続きを読む

[時事] 自動運転ソフトウェアのチェックがお役所すぎる問題

こちらのニュースが話題になってますね。

自動運転　修正に規制…搭載プログラム　国が安全確認し許可　 : テクノロジー : 読...
https://www.yomiuri.co.jp/science/20190204-OYT1T50108/
　国土交通省は、自動車メーカーが車に搭載されたシステムのプログラムを更新する場合、国の許可制とする方針を固めた。今後、自動運転技術による高速道路での車線変更といったプログラムの更新が想定されるため、国が事前に安全性を確認
読売新聞オンライン

国土交通省は、自動車メーカーが車に搭載されたシステムのプログラムを更新する場合、国の許可制とする方針を固めた。今後、自動運転技術による高速道路での車線変更といったプログラムの更新が想定されるため、国が事前に安全性を確認できるようにする。今年３月にも、開会中の通常国会に道路運送車両法の改正案を提出し、２０２０年の施行を目指す。

個人的に何かしらのチェック機構は法整備も含めて必要だと思ってます。
実際に自動車の制御プログラムのセキュリティチェックなどを依頼されている企業の方と会議をする機会があり、割と簡単にハッキング出来て勝手に動かすことができるというエピソードを耳にしました。こういった脆弱性や何かしら内部の人間が悪意を持ったコードを埋め込む可能性が今後出てくる可能性は非常に高いと思います。

クルマがネットワークにつながり、それらの情報をモトに制御される未来がやってくると、命に関わるリスクが高まると言わざるを得ません。特に自動制御プログラムが乗っ取られた日には、大量の自動車を同時に操作した自爆テロなどハリウッド映画的な展開が現実の物になることが簡単に想像できます。そこまで行かなくてもGPSなどと連動すれば位置情報などプライベートな情報も抜き放題です。

それら悪意のあるコードが混入しやすいのは新車として購入する段階よりも、運用フェーズに入ってからだろうと考えればこの対策は当然と言えば当然かもしれません。

続きを読む

[サーバ] お行儀の悪いアタック国ランキング

前回の続きです。
狙われやすいアカウント名ランキングに続きまして、どこの国からアタックを受けているかも調査してみました。…まぁなんとなく結果はわかっていましたが、数値化するのが大事ですよね！（虚空を見つめがら）

結果発表

IPアドレス単位

#カウントIPアドレス国CD国名
143,148218.92.1.163CN中国
243,14758.242.83.7CN中国
343,147218.92.1.174CN中国
443,147218.92.1.173CN中国
531,139112.85.42.196CN中国
627,063218.92.1.181CN中国
721,800112.85.42.238CN中国
820,223112.85.42.197CN中国
913,908218.92.1.172CN中国
1010,678112.85.42.232CN中国
119,605112.85.42.233CN中国
128,584112.85.42.151CN中国
136,73558.242.83.17CN中国
146,666193.201.224.216UAウクライナ共和国
153,559122.194.229.49CN中国
163,359112.85.42.231CN中国
173,228112.85.42.193CN中国
182,558101.91.215.199CN中国
192,548101.91.215.80CN中国
201,818188.92.77.235LVラトビア共和国
211,505122.194.229.18CN中国
221,483106.13.34.94CN中国
231,209188.92.75.248LVラトビア共和国
2498059.46.135.42CN中国
25828146.0.228.106DEドイツ連邦共和国
26719206.189.149.126SGシンガポール
27606112.85.42.235CN中国
2857554.169.36.191SGシンガポール
29408185.246.128.25SEスウェーデン王国
30402103.207.38.197VNベトナム

国単位

#行ラベル合計 / カウント割合
1中国353,34187.5079%
2アメリカ合衆国8,1282.0130%
3ウクライナ共和国6,9391.7185%
4フランス共和国4,7291.1712%
5ラトビア共和国3,0390.7526%
6シンガポール2,8930.7165%
7ドイツ連邦共和国2,2700.5622%
8インド1,9750.4891%
9ロシア1,6290.4034%
10大韓民国1,5040.3725%
11ブラジル連邦共和国1,4430.3574%
12イギリス1,3460.3333%
13オランダ王国1,1760.2912%
14カナダ9220.2283%
15ベトナム8990.2226%
16インドネシア共和国8570.2122%
17イタリア共和国6880.1704%
18ポーランド共和国6340.1570%
19コロンビア共和国6260.1550%
20スウェーデン王国5250.1300%
21日本4940.1223%
22メキシコ合衆国4830.1196%
23香港4450.1102%
24中華民国4410.1092%
25アルゼンチン共和国4280.1060%
26タイ王国3880.0961%
27スペイン2760.0684%
28イラン・イスラム共和国2220.0550%
29南アフリカ2150.0532%
30マレーシア2110.0523%

結論

中国からのアクセスをブロックすれば80%以上のアタックを防げる結果になりました＼(^o^)／

ちなみに日本からのアタックは494件、0.1223%でした。
続きを読む

[サーバ] 狙われやすいアカウント名ランキング8000

専門学校の生徒用にAWS(Lightsail)でサーバを一台用意しているのですが、(乗っ取られてはいない物の)意図せずハニーポット状態になっていたので、どのアカウント名が狙われていたか軽く集計してみました。

前提

サーバ自体は2018年12月16日に立ち上げたのですが、現存する最古のデータが1月6日となっていたためざっくり1ヶ月間(27日程度)のデータと思っていただければと。

この間の/var/log/secureを集計すると約45万件のアタックを受けていた計算になります。

$ sudo grep -c 'Failed' /var/log/secure*
/var/log/secure:18982
/var/log/secure-20190113:127392
/var/log/secure-20190120:46130
/var/log/secure-20190127:132703
/var/log/secure-20190203:78543

403,750件

$ sudo grep -c 'Invalid' /var/log/secure*
/var/log/secure:1849
/var/log/secure-20190113:10378
/var/log/secure-20190120:11506
/var/log/secure-20190127:9932
/var/log/secure-20190203:14927

48,592件

続きを読む

[Firebase] 静的なWebサイトをホスティングする

FirebaseのHostingを利用すれば基本無料で静的なサイトを運用できます。
独自ドメインも追加でき、何らならSSL証明書も無料でついてくるという太っ腹。もしサイトが成長し膨大なアクセスが発生した場合は課金する必要がありますが、こちらがプラン変更しない限り料金は一切発生しません。

ドメインやDNSの準備や設定、本番へデプロイ(反映)するにはコマンドを叩く必要がありますが、それさえ乗り越えてしまえばさほど難しくはありません。

環境の準備

プロジェクトの作成

サイトを設置するためのプロジェクトが必要になります。
プロジェクトの作成方法は以下のページを参照くださいませ。

[Firebase] プロジェクトを新規に作成する
https://blog.katsubemakito.net/firebase/firebase-make-newproject
しばらく見ないうちにFirebaseでできることが驚くほど増えていたので、今回からしばらくFirebaseを触ってみたいと思います。Firebaseが何たるかは公式サイトをご覧ください。プロジェクトを作成するFirebaseのコンソールへログインします。Googleアカウントが必要になりますので、Firebaseで利用したいアカウントでログインを行ってください。「プロジェクトを追加」ボタンをクリックプロジェクトの情報を入力する画面になります。プロジェクト名半角英数字と、スペース、一部の記号で適当な名前を入力します。プロジェクト ID自動採番...
ねこの足跡R

Node.jsのインストール

Hostingの利用は原則としてTerminalなどのCLI上でコマンドを叩いて行いますので、まずはその準備を行います。

Node.jsがインストールされている必要があります。公式サイトからダウンロードしインストールしてください。「推奨版」と書かれている方でOKです。

Node.js
https://nodejs.org/ja/
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Node.js

もしmacOSを利用されている場合で、凝った設定をしたい場合は以下のページを参照くださいませ。

Node.jsのバージョンをnodebrewで切り替える
https://blog.katsubemakito.net/nodejs/switch_version_with_nodebrew
インストールされたNode.jsのバージョンを切り替えたくなるタイミングがありますよね。バージョンアップの際はもとより特定バージョン下での挙動を確認したいとき、バージョンを上げたがうまく動かなくなってしまったので切り戻しを行いたい時などです。実現するためのツールはいくつかあるのですが今回は「nodebrew」をmacOSに入れてみます。nodebrewのインストールbrewで一発です。$ brew install nodebrew$ nodebrew --versionnodebrew 0.9.8setupを実行しディレクトリを作成した後に、作成されたディレクトリにパスを通します。こ...
ねこの足跡R

FirebaseのCLIツールをインストール

Node.jsをインストールするとnpmという、様々なライブラリやツールを取得できる便利なツールが同時に入るのですが、これを使ってインストールを行います。

$ npm install -g firebase-tools

今回は以下のバージョンが入りました。

$ firebase --version
6.3.0

続きを読む

フリーランスが経費にする際の勘定科目メモ

確定申告終了まで残り68日となりました（執筆時点）
みなさん順調に入力進んでますか？こちらは地獄ですｗ

今回は自分でも時々わからなくなる勘定科目についてメモ代わりにまとめました。
定期的に思いついたら更新したいと思います。

前提のお話

私は大きく2つの事業を行っております。

  • ゲーム関係の企画、コンサル、技術的なサポートと一部開発及び運用
  • 専門学校の非常勤講師

あくまでこちらの範囲で登場するの勘定科目のうち、私が利用している物に限定されます。

免責事項

  • ここでいうフリーランスとは「個人事業主」のことを指しています。
    • 会社会計の場合はまた異なりますのでご注意を。
  • ここにある物が100%の正解というわけでありません。あくまで個人的な知識と見解でメモしておりますので最終的にはご自身の考え方で仕訳をなさってください。ご不明な点は税理士の先生や税務署にご相談ください。
  • 「経費」とタイトルに書いてありますが売上など収益についての勘定科目も登場します。
  • 一定額を超える物を購入した場合は資産として計上する必要があるのでご注意ください。

それでは張り切ってどうぞ。
続きを読む

AWS Organizationsでアカウント管理してみる

過去、AWSを大きな組織や複数のプロジェクトで利用する場合、AWSのアカウント自体を複数用意して利用していたわけですが、2017年2月に登場した「AWS Organizations」を利用すると、請求先の一元化や、ユーザーの権限管理が一括して行えます。

考え方

これまで

それぞれのアカウントが独立して存在しており、請求情報やユーザー管理もそれぞれ行う必要がありました。

AWS Organizations導入後

図はイメージですが、AWSアカウント内に「組織」を作成することで、独立した世界を用意することができます。

請求情報は「親」で一元管理できます。
また必要があれば各ユーザーに対し制限をまとめてかけることもできます。

「子ユーザー」はルートユーザーと同じ権限が与えられますので、組織内のユーザーから見ても、使い勝手はこれまでと変わりません。また各組織が影響を与えることもありませんので万が一の場合の影響範囲を心配する必要がないのもこれまでと変わらないポイントです。

続きを読む