さすがに、カンで終わらすのは。と思い、前回の続き。
android studioで
ツール(T)→Firebase
と押すと、下の画像のようなViewが出てくる。
ここで②のところ(すでにやっちゃってますが)を押すと、build.gradleに必要な設定が入ってくれる!
何てことだろう。。。みんなコレやってるんだよね。きっと。
カンでやったのとは、一味違いますね。参考にするならこっちでお願いします。
GDD Blog
GDDとは「Gut's Driven Development」の略です。簡単にいうとガッツ駆動方式のシステム開発です。
えぇまぁ、私の開発スタイルです。このBlogでは、そんなシステム開発の作業で発見したことを記録していきます。
(Google Developer Daysとはなんの関係ありません。)
2022年3月8日火曜日
[Android]Android Studio(2021.1.1 Patch2)でFirebase Cloud Firestoreを使う
ちょっと古めのAndroidStudioを使っていて、ま、Firestoreを使うならアレね。というのは覚えた。血反吐を吐きながら。
時は流れ、AndroidStudioのバージョン新しめにして、同じことをやってみる。っという感じでbuild.gradleを編集。
ということで、build.gradle(プロジェクト)を開いてみる
ということで、直感を信じて適当に直してみる。
で、build.gradle(モジュール)のほう。こちらもいつも通り、依存を追加してみる。
お、コンパイルった。じゃあ、ランタイムエラーかな?と思ったらコイツ動くぞ。
ということで、理屈はわかりませんが、firestoreでbuild.gradleに困ったら参考にしてください。
時は流れ、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に困ったら参考にしてください。
2021年8月13日金曜日
[JavaScript]Mapを使う(連想配列)
JavaScriptは、ちょっとくらい変な実装をしてもそれっぽく動くことがあります。
コンパイルする形式の言語である、C#やJavaに慣れていると、むずがゆくなることがあります。
ということで、間違えから偶然見つけて、調べてみると普通に連想配列だった話。
JavaScriptでMapを使うには、以下のようにする。そう、何も考える必要はないのです。なぜならば、objectに連想配列の機能が混ぜ込まれているからです。
コードはこんな感じ。
・・・mapというか、属性を動的に増やす。という考え方。 ちなみに、objectなら何でもOK。こんなこともできる。
コンパイルする形式の言語である、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使えというのが結論。
■varとletの組合せ
constもletと同じ特性。consutは、値の更新もできない。↓のような場合エラーになる。
ちなみに、varの上書きパターンこういうのが正常終了しちゃう。意味の分からない障害が出そう。
理由は、letを使っておけば、動作時に変数宣言の上書きに気が付けるから。です。
あと、定数はconstを使うのが結論。値を書き換えることができないからね。
以下、それぞれ組合せでの検証結果。
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#でいうと、↓のような感じ。
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というソースにたどり着き、中身が見れる。
プラグインがいろいろ入っているからかもしれないけどね。
2021年1月9日土曜日
[Other]コードのシンタックスハイライト
コードをハイライトするために、SyntaxHighlighterを使っていたんですがリンク切れで遅くなていました。
で、とりあえずスタイルやJSのリンクを消したものの、コードのサンプル表示がかっこ悪かったので、これを機に修正しました。
で、使ったのが、「highlight.js」です。
SyntaxHighlighterとくらべ軽量で言語の対応も多いらしいです。 ということで使い方。
↓のコードを<head>に埋め込めばOK
使い方はhttps://highlightjs.org/usage/を参照。
当サイトは、VisualSutudio風のデザインを使っていますが、このデザイン枠がなんです。
デモサイトがあり、こっちも便利。分かりやすい。参考になる。
取り合えず、チョットやな感じで何とかしたいこと。
・・・こいつら何とかしたい。
で、とりあえずスタイルや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>
デモサイトがあり、こっちも便利。分かりやすい。参考になる。
取り合えず、チョットやな感じで何とかしたいこと。
- 1行目の空行<pre><code>の後ろに改行入れると、改行されちゃう
- <と>。コードをそのまま貼り付けれない。1行に1個までなら何とかなるっぽいけど、理由がわからない。js内に変換してそうなコードはあるんだけど。。。うまく動いていないのだろうか
登録:
投稿 (Atom)