[Android]Android Studio(2021.1.1 Patch2)でFirebase Cloud Firestoreを使う その2

さすがに、カンで終わらすのは。と思い、前回の続き。
android studioで
　ツール(T)→Firebase
と押すと、下の画像のようなViewが出てくる。
ここで②のところ（すでにやっちゃってますが）を押すと、build.gradleに必要な設定が入ってくれる！
何てことだろう。。。みんなコレやってるんだよね。きっと。

カンでやったのとは、一味違いますね。参考にするならこっちでお願いします。

[Android]Android Studio(2021.1.1 Patch2)でFirebase Cloud Firestoreを使う

ちょっと古めのAndroidStudioを使っていて、ま、Firestoreを使うならアレね。というのは覚えた。血反吐を吐きながら。
時は流れ、AndroidStudioのバージョン新しめにして、同じことをやってみる。っという感じでbuild.gradleを編集。
ということで、build.gradle(プロジェクト)を開いてみる

plugins {
    id 'com.android.application' version '7.1.2' apply false
    id 'com.android.library' version '7.1.2' apply false
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

・・・ずいぶんシンプルになったなぁ。と思いつつ、いつも通りのアレを追加してみる。

plugins {
    id 'com.android.application' version '7.1.2' apply false
    id 'com.android.library' version '7.1.2' apply false
}

// 追加
buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository

  }
  dependencies {
    ...
    // Add this line
    classpath 'com.google.gms:google-services:4.3.10'

  }
}
// 追加


task clean(type: Delete) {
    delete rootProject.buildDir
}

で、syncnowを押してみる。いつも通りいけるかなぁ。。。と甘くはない。公式サイトの「Firebase SDK の追加」の手順なんだけどね。
ということで、直感を信じて適当に直してみる。

plugins {
    id 'com.android.application' version '7.1.2' apply false
    id 'com.android.library' version '7.1.2' apply false
    // 追加
    id 'com.google.gms.google-services' version '4.3.10' apply false
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

こんなんでいいはずないしー。と思いつつsyncnowを押してみると、正常終了。
で、build.gradle(モジュール)のほう。こちらもいつも通り、依存を追加してみる。

dependencies {
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    //追加した記憶がない...
    implementation 'com.google.firebase:firebase-firestore:23.0.2'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    //追加
    implementation platform('com.google.firebase:firebase-bom:29.1.0')
}

こんな適当でうまくいくなら苦労はないわー。と思いつつサンプルを実装。


お、コンパイルった。じゃあ、ランタイムエラーかな？と思ったらコイツ動くぞ。
ということで、理屈はわかりませんが、firestoreでbuild.gradleに困ったら参考にしてください。

[JavaScript]Mapを使う(連想配列)

JavaScriptは、ちょっとくらい変な実装をしてもそれっぽく動くことがあります。
コンパイルする形式の言語である、C#やJavaに慣れていると、むずがゆくなることがあります。

ということで、間違えから偶然見つけて、調べてみると普通に連想配列だった話。
JavaScriptでMapを使うには、以下のようにする。そう、何も考える必要はないのです。なぜならば、objectに連想配列の機能が混ぜ込まれているからです。
コードはこんな感じ。

let map ={};
map["aaa"] = "aaa";
console.log(map["aaa"]);
//"aaa"と表示される

//ちなみに↓のようにもアクセスができる
console.log(map.aaa); // aaaと出力される

//メンバ変数のように代入もできる
map.bbb = "bbb"
console.log(map.bbb); // bbbと出力される

JSONをオブジェクト化するとこもこんな感じでやってるんだろうね。
・・・mapというか、属性を動的に増やす。という考え方。 ちなみに、objectなら何でもOK。こんなこともできる。

let list =[1,2,3];
list.bbb = "bbb";
console.log(list.bbb)；// bbbと出力される
console.log(list)；(3) [1, 2, 3, bbb: "bbb"]と出力される

JavaScript。。。何でもありですね。

[JavaScript]変数宣言の仕方(var let const)

JavaScriptの変数宣言。書き方いろいろある。制限(コーディング規約等)がないならlet使えというのが結論。

理由は、letを使っておけば、動作時に変数宣言の上書きに気が付けるから。です。

あと、定数はconstを使うのが結論。値を書き換えることができないからね。 

 以下、それぞれ組合せでの検証結果。

■varとletの組合せ

	var	let
var	var a="a"; var a="b"; aの値は"b"になる！	var a="a"; let a="b"; 実行時エラー
let	let a="a"; var a="b"; 実行時エラー	let a="a"; let a="b"; 実行時エラー

constもletと同じ特性。consutは、値の更新もできない。↓のような場合エラーになる。

const b = "b";
b="B"; //エラー

let c ="c";
c = "C";// こっちはOK。というか普通の使い方。

ちなみに、varの上書きパターンこういうのが正常終了しちゃう。意味の分からない障害が出そう。

var aaa = "aaa";
var aaa = 100;

ということでletがおすすめ。

[JavaScript]Listを使う(動的に要素を増やすことのできる配列)

C#やJavaはクラスライブラリで様々な機能が提供されているけど、JavaScriptで同じようなことをしようとすると、外部のライブラリをインクルードする感じで使うのが一般的かな。と思います。
と、前置きが長くなりましたが、Listを使いたかったのです。
C#でいうと、↓のような感じ。

var list = new List<string>();

で調べてみたら、JavaScriptでは、[](Arrayというクラス)を使う。使い方は以下の通り。
JavaScriptの型については、闇が深そうなので、今日は割愛。

let list = [1,2,3];
//初期値不要なら
//let list = [];
//要素の追加
list.push(4);
console.log(list);
//(4) [1, 2, 3, 4]　と表示される

つまるところ、変数に[]を代入すると、そいつは、Listになる。ってことですね。そしてなんでも入れれてしまいます。

let list = [1,2,3];
//要素の追加
list.push("あ");
console.log(list);
//(4) [1, 2, 3, "あ"]　と表示される
list.push({name:"hoge"});
console.log(list);
//(5) [1, 2, 3, "あ", {…}] と表示される

genericsがなかったころのjavaを思い出します。。。 ちなみに、pushがあるならpopもあるだろと。そうあるんです。さっきの続き。

list.pop()
//戻り値→{name: "hoge"}
console.log(list);
// (4) [1, 2, 3, "あ"] 最後に突っ込んだ要素がなくなっている。
list.pop()
//戻り値→"あ"
console.log(list);
// (3) [1, 2, 3]　その前の要素がなくなっている

スタックがあるならキューもあるだろーと。そうあるんです。さらに続き。

list.shift()
//戻り値→1
console.log(list);
// (2) [2, 3]　先頭の要素がなくなっている

JavaScriptなんでもありっすね。

[JavaScript]confirmやalertをオーバーライドする

sliniumun等を使って、Webサイトの自動操作をすることがあります。んーあんまりないか。

自動操作しない場合でも、デバッグの時は、alertを出し、本番環境では、ログ出力。みたいなことをしたいことがあります。んーあんまりないか。console.log使うもんね。

ということで、強制的にalertやconfirmを何とかする方法ないかな。と思って調べてみると、alertやconfirmを上書き(オーバライド？)する方法がありました。

実装は↓のような感じ。以下は、chromeのconsoleで実行しているけど、htmlに入れれば、そのまま実現できる

window.confirm = (text) => { console.log(text); return true; }

常に「はい」ボタンを押した状態と同じになっちゃいますが、自動運転中に入力不要になりいい感じ。

ちなみに、alertも同じように、window.alert = function(text){}でOK。

で、chromeのconsoleで確認してみると、↓みたいになっている。

//chromeのconsoleで↓を入力
> window.confirm

//こんなのが表示された。edgeでは表示されなかった。。。
ƒ (text) {
    recordedConfirmation = text
    if (document.body.hasAttribute('setConfirm')) {
      document.body.removeAttribute('setConfirm')
      return nextConfirmationResult
    } else {
      l…

よくわからないけど、prompt.jsというソースにたどり着き、中身が見れる。 プラグインがいろいろ入っているからかもしれないけどね。

[Other]コードのシンタックスハイライト

コードをハイライトするために、SyntaxHighlighterを使っていたんですがリンク切れで遅くなていました。
で、とりあえずスタイルやJSのリンクを消したものの、コードのサンプル表示がかっこ悪かったので、これを機に修正しました。
で、使ったのが、「highlight.js」です。
SyntaxHighlighterとくらべ軽量で言語の対応も多いらしいです。 ということで使い方。
↓のコードを<head>に埋め込めばOK

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

サポートしている言語は、GitHubのほうを参照で。
使い方はhttps://highlightjs.org/usage/を参照。


当サイトは、VisualSutudio風のデザインを使っていますが、このデザイン枠がなんです。

ということで、スタイルの一部を改変。現状はこのスタイル(.hljs)が必ずセットされるので、それをチョット改変。

<style type='text/css'>
.hljs {
  display:block;
  border:1px solid #ffa500;
}
</style>

デモサイトがあり、こっちも便利。分かりやすい。参考になる。


取り合えず、チョットやな感じで何とかしたいこと。

• １行目の空行<pre><code>の後ろに改行入れると、改行されちゃう
• <と>。コードをそのまま貼り付けれない。１行に1個までなら何とかなるっぽいけど、理由がわからない。js内に変換してそうなコードはあるんだけど。。。うまく動いていないのだろうか

・・・こいつら何とかしたい。