『Androidアプリ開発超入門』という本を読んでアプリ作成しました。基礎的な内容ですが、一応メモしたので記事としてまとめます。
SDK・・・software development kit
gradle・・・ビルドする役割
ビュー・・・Android画面上に表示できる部品の総称
ウィジェット・・・何らかの表現を行うためのビュー TextView, ImageView, Button, ProgressBar, Switch
ビューグループ・・・1つ以上のビューをとりまとめて、所定のルールで並べることができるビュー ConstraintLayout, LinearLayout, TableLayout
最初のアクティビティー ⇒ MainActivityアクティビティーが起動すると、onCreateメソッドが呼び出される最初に呼び出される処理のことをエントリーポイントと呼ぶ。
デバッグログ ⇒ Log.d(tag, msg) LogCatでログを表示できる
Android Studioでは、自動インポートによって、import文を書かなくても自動で追記される。
リテラル・・・プログラム内に値を直接記述する表現
宣言では、型と変数名を記述
・変数名には、数値から始まる文字は使えない
・また、慣例としてキャメルケースで命名することが多い
データ型・・・数値型、真偽型、文字列型
キャスト・・・型変換
拡大変換・・・狭い型から広い型へ変換
縮小変換・・・広い型から狭い型へ変換
Vue.js ComputedとDataの違い オブジェクトを代入したときに元のオブジェクトへの影響の違い
Vue 2.5.17
ここのところ、Vueに取り組んで3か月強の私です。
Vueを書くときによく出てくる「Computed」と「Data」ですが、Computedは「算出プロパティです。」、Dataは「UIの状態となるデータのオブジェクトです。」という説明があります。
正直、この説明だと「なるほどね！理解した。」というには北海道と横浜ぐらい遠かったです。特に、Computedはキャッシュがあるとか、リアクティブではないデータの検知はしない、というのもよくわかりませんでした。(>_<)
そこで、いろいろ試してみました。特に、元のオブジェクトに対する影響、表示がどうやって更新されるか、ComputedとDataの違いについて調べています。
次のようなサンプルを作りました。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
<div id="app">
<p>【Data】{{ lancerEvolotionData.type }} {{ lancerEvolotionData.color }} <br>
ドライバー：{{lancerEvolotionDriver()}}</p>
<p>【Computed】{{ rx7Computed.type }} {{ rx7Computed.color }} <br>
ドライバー：{{rx7Driver}}</p>
<button @click="changeColorOfCar">車の色を変える</button>
</div>
<script>
class Car {
constructor(type, color) {
this.type = type
this.color = color
}
setColor(color) {
this.color = color
}
}
let lancerEvolotion = new Car('ランサーエボリューション', '白')
let rx7 = new Car('RX7', '黄色')
var vm = new Vue({
el:'#app',
data:{
lancerEvolotionData: lancerEvolotion,
lancerEvolotionDriver: function (){
if(lancerEvolotion.color ==='白'){
return lancerEvolotion.color + 'は岩城清次'
}else if(lancerEvolotion.color ==='黒'){
return lancerEvolotion.color + 'は須藤京一'
}
},
},
computed:{
rx7Computed() {
return rx7
},
rx7Driver() {
if(this.rx7Computed.color ==='黄色'){
return this.rx7Computed.color + 'は高橋啓介'
}else if(this.rx7Computed.color ==='白'){
return this.rx7Computed.color + 'は高橋涼介'
}
}
},
methods:{
changeColorOfCar() {
lancerEvolotion.setColor('黒')
console.log(lancerEvolotion)
console.log(this.lancerEvolotionData)
console.log(this.lancerEvolotionDriver)
rx7.setColor('白')
console.log(rx7)
console.log(this.rx7Computed)
console.log(this.rx7Driver)
}
}
})
</script>
</body>
</html>
内容は、まず最初にシンプルに車のオブジェクトがあります。
画面は次の通りです。
「ランサーエボリューション」という「白い車」と「RX7」という「黄色い車」があります。
ランサーエボリューション は主にVueの中ではDataで扱われ、RX７は主にComputedで扱われます。
それぞれ、車の色によりドライバーが変わります。
ランサーエボリューションの白 → 岩城清次
ランサーエボリューションの黒 → 須藤京一
この移り変わりは、Data→lancerEvolotionDriver で行っています。
RX7の黄色 → 高橋啓介
RX7の白 → 高橋涼介
この移り変わりは、Computed→rx7Driverで行っています。
というようになっています。（頭文字Dを知らない人にはわかりにくいネタで申し訳ありません。）
先程も書いたように、最初は次のような画面ですが
「車の色を変える」ボタンをクリックします。すると、次のようになります。
ランサーエボリューション（長い…変数名も長かった💦）は黒に変わり、ドライバー名も変わっているのに対して、RX7は白に変わりましたが、ドライバー名が変わっていません。
consoleを見てみますと次のようになっています。
Dataは何やら複雑なオブジェクトですね。
これ、一番最初のconsole.logで出力されている もともとのlancerEvolotion は
let lancerEvolotion = new Car('ランサーエボリューション', '白')で宣言したシンプルなオブジェクトのはずが、Vueに変換されて何やら複雑なオブジェクトになってますね。中身を展開してみると、次のようになっています。
そうでなければ、 オリジナルのオブジェクトである、lancerEvolotion の変化をVueが感知することができませんもんね。
これが、リアクティブってことなんですね！！（しゅごい）
一方のComputedに代入されたrx7のほうはなんの変化もありません。
最初に作った
let rx7 = new Car('RX7', '黄色')と同じ、シンプルなオブジェクトです。また、computedのrx7DriverをConsoleで見ると、
黄色は高橋啓介
というシンプルな文字列が入っています。( ˊᵕˋ )
「え？そしたらComputedってなんなん？よく、文房具の数とか単価とかを入力していくらか計算するやつあるじゃん。」
となると思います。
これ、Computedが参照するデータがリアクティブであれば、Computedがリアクティブに計算してくれるようです。
試しに、さっきのコードのrx7をComputedからDataに移します。
//★変更ポイント(⋈◍＞◡＜◍)。✧♡
って書いてあるところだけが変更ポイントです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
<div id="app">
<p>【Data】{{ lancerEvolotionData.type }} {{ lancerEvolotionData.color }} <br>
ドライバー：{{lancerEvolotionDriver()}}</p>
<p>【Computed】{{ rx7Data.type }} {{ rx7Data.color }} <br>
ドライバー：{{rx7Driver}}</p>
<button @click="changeColorOfCar">車の色を変える</button>
</div>
<script>
class Car {
constructor(type, color) {
this.type = type
this.color = color
}
setColor(color) {
this.color = color
}
}
let lancerEvolotion = new Car('ランサーエボリューション', '白')
let rx7 = new Car('RX7', '黄色')
var vm = new Vue({
el:'#app',
data:{
lancerEvolotionData: lancerEvolotion,
lancerEvolotionDriver: function (){
if(lancerEvolotion.color ==='白'){
return lancerEvolotion.color + 'は岩城清次'
}else if(lancerEvolotion.color ==='黒'){
return lancerEvolotion.color + 'は須藤京一'
}
},
rx7Data:rx7 //★変更ポイント(⋈◍＞◡＜◍)。✧♡
},
computed:{
rx7Driver() {
if(this.rx7Data.color ==='黄色'){ //★変更ポイント(⋈◍＞◡＜◍)。✧♡
return this.rx7Data.color + 'は高橋啓介' //★変更ポイント(⋈◍＞◡＜◍)。✧♡
}else if(this.rx7Data.color ==='白'){ //★変更ポイント(⋈◍＞◡＜◍)。✧♡
return this.rx7Data.color + 'は高橋涼介' //★変更ポイント(⋈◍＞◡＜◍)。✧♡
}
}
},
methods:{
changeColorOfCar() {
lancerEvolotion.setColor('黒')
console.log(lancerEvolotion)
console.log(this.lancerEvolotionData)
console.log(this.lancerEvolotionDriver)
rx7.setColor('白')
console.log(rx7)
console.log(this.rx7Data)
console.log(this.rx7Driver)
}
}
})
</script>
</body>
</html>
すると「車の色を変える」ボタンをクリックした後の動作が次のように変わります。
ちゃんと、RX7の白に乗っているのは高橋涼介、と表示されました！！！
パチパチ。
以下は余談ですが、色々とほかにもわかったことがあって、最初に紹介したコードの
lancerEvolotion.setColor('黒')をコメントアウトしてみると、そもそもボタンをクリックしても何も起こりません。Console.logで出力されるオリジナルのオブジェクトの中身もComputedの中身も変わってはいますが、画面が更新されません。
Dataはリアクティブなので、画面の更新をしてくれますが、Computedだけ更新しても、画面の更新はしてくれないのです。
Dataを更新すると、画面の更新をしてくれるので、Computedも新しい値でついでに表示の更新がされる、という仕組みのようです。
＜参考＞
リアクティブの探求 Vue3 Vue2のドキュメントよりわかりやすい
MySQL DOUBLE型について
入力項目の桁数についてデータベースの構造を確認しました。
その中で、DOUBLE型について分かりづらかったため内容をまとめてみました。
上のスクショはテーブルの構造ですが、
INT型などであれば桁数制限が設定されていますが、DOUBLE型だとその設定がありません。
そこで実際に桁数の多い数字をDOUBLE型の項目に入れてみたところ、下記のような表示になりました。
1e24とは、1×10の24乗を表します。
表示上これでいいのかという問題はありますが、このような形式になるため桁数をあまり気にしないで扱えますね。（無制限なわけではないですが、、）
Ghost Inspector 動的に年を取得（年を跨いでも大丈夫）
システムの動作テストにGhostInspectorを活用しています。
自動でテストしてくれるのは非常に便利ですね。
そのGhostInspectorで自動テストしていたのですが、年を決め打ちしていると年月が経ってその決め打ちした年ではうまくテストできなくなるということが起こりました。
決め打ちしている値を変更することでも対応はできるのですが、また年月が経ったときにテストがうまくいかなくなってしまいます。
そこで、動的に年を取得するよう修正を加えました。
これでいつまでも安心してテストし続けることができます。
WP自前のルート証明書を更新する
発端
ある日、WPから外部システムへ連携するプラグインが動いていないことに気が付きました….
正直、そこら辺を変更した記録もないし、タイミングがよくわからず…..
該当のプラグインでAPIの設定をテストできる項目があったので、ありがたくテストしたところ下記メッセージが表示されていました。
「cURL error 60: SSL certificate problem: certificate has expired」
内心「なんでー？？この前の2021/10/1で終わりじゃなかったのかよ」と叫びながら調査しました。
いろいろ調べた結果、WordPressには内部に独自のルート証明書を持っているそうです….とんだお節介野郎め….
なので、OSレベルのルート証明書を更新してもWP内のプラグインで利用されるcURLではそちらは利用されません。なので「
/wp-includes/certificates/ca-bundle.crt 」を更新する必要があります。
対処
① 新しい 「ca-bundle.crt」を取得
→ このca-bundle.crt が古いためエラーが出ているので新しくする。
wget https://raw.githubusercontent.com/WordPress/WordPress/master/wp-includes/certificates/ca-bundle.crt② 「 /wp-includes/certificates/ca-bundle.crt 」を①でダウンロードした「
ca-bundle.crt 」に更新する
→単純にコピーで上書きする
cp -b -i ca-bundle.crt /wp-includes/certificates/ca-bundle.crt -b：上書きの場合、上書き前のファイルのバックアップを作成
-i：本当に上書きしますか？と注意してくれる(必要性はないが、何となく)
③ 完了！
最後に
WPも奥が深いでござる…