2019年 2月 の投稿一覧

[Firebase] Authenticationで匿名認証 (Web編) その1

Firebaseの匿名認証はイメージとしてはセッションIDのような物で、ユーザーにログインなど特別な操作をせずともブラウザ(クライアント)を識別する一意のIDを付与してくれます。もちろんメールやSNSなど何らかのログインを行った場合は移行することも可能です。

匿名認証

コンソールで設定

最初にFirebaseのWebコンソールで匿名認証を有効にする必要があります。
コンソールにログインしたら、メニュー「Authentication」→「ログイン方法」とクリック。

下の方にある「匿名」のアコーディオンを開いて、「有効にする」をクリックし「保存」ボタンを押せば完了です。

続きを読む

TwitterのDeveloper登録をする – 2019年2月版

以前はTwitterのAPIを利用するためには所定の項目に入力すればそれで終わっていたのですが、最近は入力した項目をTwitter社の方が問題ないかチェックをしているようです。世知辛い世の中になったもんです(´・ω・`)

今回はTwitterへデベロッパーアカウントとしての申請を行ってみます。

申請する

ログイン

Twitterにログインした状態、または以下のページにアクセスし申請を行うアカウントでログインを行います。

続きを読む

はじめての Font Awesome

いつも使い方を忘れるのでメモ。

公式ドキュメント

Start」と「Basic Use」あたりに一通り書いてありますので、基本的にはこちらを参照するのが最も正確です。

ライセンス

無料版ではアイコン、フォント、コードによってそれぞれ別れています。いずれも一般的なWebサイトなどで利用する分には個人、商用問わず利用できます。GPLのようにコードの公開やコピーレフトもありません。

Icons
CC BY 4.0 License
Fonts
SIL OFL 1.1 License
Code
MIT License

使い方

ライブラリ

Startページでlinkタグを生成し、利用したいページのheadタグ内などに貼り付けます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello FontAwesome</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>

</body>
</html>

続きを読む

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

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

ディレクトリの初期化

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

$ cd miku3net

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

$ firebase init functions

続きを読む

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

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

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

サンプル

実行結果

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

続きを読む

[Firebase] Authenticationでログアウトを実装

以前Authenticationによるログインを取り上げましたが、その際にログアウト(サインアウト)処理をすっぱり忘れていましたw

結論

結論から言うと以下の通りsignOut()メソッドを実行するだけです。成功したらthen()の箇所に好きな処理を書いてあげます。

firebase.auth().onAuthStateChanged( (user) => {
  firebase.auth().signOut().then(()=>{
    console.log("ログアウトしました");
  })
  .catch( (error)=>{
    console.log(`ログアウト時にエラーが発生しました (${error})`);
  });
});

続きを読む

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

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

サンプル

実行結果

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

続きを読む

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

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

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

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

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

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

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

続きを読む

[Firebase] Firestoreで読み書きする (Web編)

今回は最近ベータが取れて正式なサービスに昇格したFirestoreを使ってみたいと思います。まずは基本的なCRUDからやってみます。

Firestoreの準備

プロジェクトの作成

詳しくは過去記事を参照してください。

Databaseの作成

Firebaseのコンソールにログインしプロジェクトのトップページに移動します。
左メニューのDatabaseをクリックすると、右ペインでFirestoreにするか、以前の技術であるRealtime Databaseにするか選択を迫られますが、ここではFirestoreを選択します。

続きを読む

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

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

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

首都高の出入り口

普段首都高を利用しない方であれば、普通に考えればそんなことありえない、そんな風に思っていた時期が自分もありました。ここで自分がいつも利用している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年

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

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

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

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

Appleからのメール: Two-Factor Authentication Required Soon

本日AppleからAppStoreのDeveloper向けにメールが飛んできました。
要約すると、2019年2月27日からDeveloperのアカウントは2段階認証が必須になるから設定してね とのこと。

Dear Makito,

In an effort to keep your account more secure, two-factor authentication will be required to sign in to your Apple Developer account and Certificates, Identifiers & Profiles starting February 27, 2019. This extra layer of security for your Apple ID helps ensure that you’re the only person who can access your account. If you haven’t already enabled two-factor authentication for your Apple ID, please learn more and update your security settings.

If you have any questions, contact us.

Best regards,
Apple Developer Relations

具体的な設定方法は以下のページが案内されています(日本語です)。

この案内って前にありましたっけ?Web上にもソースがなく、青天の霹靂なんですがw 二段階認証を入れるのは賛成なんですが猶予期間があまりに短いのを見ると、乗っ取りがApple社内でも問題になってるんでしょうね。

なお2段階認証の設定を行うと、iTunesConnectのログイン時に、メールアドレスとパスワードを入力後に以下のような確認コードが求められるようになります。Macを利用してアクセスした場合で、Mac自体の認証が完了していると自動的にコードを表示してくれます。

毎回入力するのが面倒な場合は、確認コード入力後に「このブラウザを信頼しますか?」という質問に「信頼する」と答えれば暫くの間、IDとパスワードのみでログイン可能になります。