「技術」カテゴリーアーカイブ

【ANDROID】【実質北海道一周】UIの実装

さて、

このUIを作成していきます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/startCity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/endCity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.425"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.528" />

    <TextView
        android:id="@+id/endCity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.425"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.591" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="↓"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/endCity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.402"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/startCity"
        app:layout_constraintVertical_bias="0.525" />

    <TextView
        android:id="@+id/distanceSection"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="280dp"
        android:textAlignment="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/distanceFromStart"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="364dp"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>

レイアウトとか、細かいところよくわかっていないので、適当です。

もしかしたら、機種によってレイアウトが崩れるとかもあるかも。

次回は実際に表示する処理を作成していきます。

【北海道大戦】ターンを飛ばされる都市がある問題を修正する。

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/HokkaidoWar

さて、現在のソースでは、ターンが飛ばされる都市がある事が分かりました。

https://github.com/takishita2nd/HokkaidoWar/blob/03569e0b8728860e73d11e38eeade24a0aafef9c/HokkaidoWar/Battle.cs#L15

原因はこの_citiesを一つで存在する都市と行動する都市を管理していたためです。

https://github.com/takishita2nd/HokkaidoWar/blob/03569e0b8728860e73d11e38eeade24a0aafef9c/HokkaidoWar/Battle.cs#L78

ここで行動済みの都市を削除すると(図の真ん中)、

図の右のように行動順が二つズレてしまうんですよね。

なので、次に行動するはずだった都市が飛ばされてしまいます。

なので、存在する都市と行動する都市を分けて管理する必要があります。

        List<City> cities = null;
        List<City> aliveCities = null;

必要になるのは、List<City>をコピーする処理。

このとき、Listの部分だけを複製して、中の都市オブジェクトは共有で管理します。

        private List<City> copyCity(List<City> cities)
        {
            List<City> ret = new List<City>();
            foreach(var c in cities)
            {
                ret.Add(c);
            }
            return ret;
        }

こんな感じで修正してみました。

これで、順番が飛ばされることはなくなるはず。

Let’s EncryptのSSL証明書の有効期限が切れていました。(解決済み)

いやー焦った焦った。

ブログの様子を見ようと思ったらこれだよ。

ERR_CERT_DATE_INVALID

というメッセージから読み取るに、

エラー、証明書、日付、不正。

ああ、証明書の日付がおかしな事になっているのね。

このサイトのSSL証明書はLet’s Encryptというツール(?)で発行しているので

ただ、自動更新する設定になっているはずだが、それがたまたま上手くいっていないのだろう。

SSHでサーバにログインし、証明書の日付を確認する。

コマンドはこれ。

$ sudo openssl x509 -in /etc/letsencrypt/live/【ドメイン名】/fullchain.pem -noout -dates

notAfterが証明書の有効期限が切れる日付です。

なるほど、8月20日午前7時11分(標準時刻)で期限が切れていたみたい。

$ sudo letsencrypt renew

で、手動による証明書更新を試みたものの、なぜかスキップされたので、

強制的に更新させました。

$ sudo letsencrypt renew --force-renewal

11月19日午前11時32分(標準時刻)に更新されました。

あ、標準時刻だから、日本時間はこれに+9時間する必要があるからね。

そして、忘れてはいけない、nginxの再起動。

$ sudo systemctl restart nginx.service

エラーは解消されました!!

光センサーをもう一度試してみる。

昨日、札幌狸小路にある梅沢無線に行ってきまして、

部品を仕入れて参りました。

この抵抗を使って、

この回路の抵抗を、

こんな感じに変えてみました。

120Ωの抵抗、売り切れやったんや・・・

これで光センサーに光を当てたときの感度が変わるのかなって思いまして。

というのも、前回は10kΩの抵抗しか持ってなかったので。

結果は、よく分かりませんでした。😋

というのも、光量云々の前に、フォトトランジスタに光を当てるときの向きが重要だったらしい。

向きを変えれば、部屋の蛍光灯でも反応してくれました。

【ダイエット支援】【食事管理】データ削除ダイアログ処理を作成する。

前回までの状況はこちら

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

データ削除処理を作成していきます。

まずはDeleteをクリックしたときの処理。

やり方はEditと同じです。

EatingDetailComponent.vue

        onClickDelete: function(timezone, id) {
            var deleteData = {};
            this.datalists[timezone].forEach(element => {
                if(element.id == id){
                    deleteData.id = id;
                    deleteData.date = this.date;
                    deleteData.item = element.item;
                    deleteData.timezone = timezone + 1;
                    deleteData.protein = element.protein;
                    deleteData.liqid = element.liqid;
                    deleteData.carbo = element.carbo;
                    deleteData.calorie = element.calorie;
                    return true;
                }
            });
            this.$refs.deleteDialog.dataSet(deleteData);
            this.showDeleteDialogContent = true;
        },

ダイアログ処理は体重管理のものを流用しています。

EatingDeleteDialogComponent.vue

<template>
    <div>
        <div id="overlay" v-show="show">
            <div id="content">
                <p v-if="error_flg == true" class="error">
                    <ui>
                        <li v-for="error in errors">{{ error }}</li>
                    </ui>
                </p>
                <table class="edit">
                    <tbody>
                        <tr>
                            <td>日付</td>
                            <td>{{contents.date}}</td>
                        </tr>
                        <tr>
                            <td>品名</td>
                            <td>{{contents.item}}</td>
                        </tr>
                        <tr>
                            <td>時間帯</td>
                            <td>{{contents.time}}</td>
                        </tr>
                        <tr>
                            <td>タンパク質</td>
                            <td>{{contents.protein}}</td>
                        </tr>
                        <tr>
                            <td>脂質</td>
                            <td>{{contents.liqid}}</td>
                        </tr>
                        <tr>
                            <td>炭水化物</td>
                            <td>{{contents.carbo}}</td>
                        </tr>
                        <tr>
                            <td>カロリー</td>
                            <td>{{contents.calorie}}</td>
                        </tr>
                    </tbody>
                </table>
                <p id="command">
                    <button @click="clickDelete">削除</button>
                    <button @click="closeModal">閉じる</button>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['show'],
    data() {
        return {
            errors: [],
            error_flg: [],
            param: {},
            contents: {},
        };
    },
    created: function() {
    },
    methods: {
        dataSet: function(data) {
            this.contents = data;
            switch(this.contents.timezone) {
                case 1:
                    this.contents.time = "朝";
                    break;
                case 2:
                    this.contents.time = "昼";
                    break;
                case 3:
                    this.contents.time = "夜";
                    break;
                case 4:
                    this.contents.time = "間食";
                    break;
            }
        },
        clickDelete: function() {
            var self = this;
            this.param.contents = this.contents;
            axios.post('/api/eating/delete', this.param).then(function(response){
                self.closeModal();
                self.$emit('update');
            }).catch(function(error){
                self.error_flg = true;
                self.errors = error.response.data.errors;
            });
        },
        closeModal: function() {
            this.$parent.showDeleteDialogContent = false;
        },
    }
}
</script>

次はAPIの処理です。

これも体重管理の処理とほぼ同じ。

ApiController.php

    /**
     * データを一件削除する
     */
    public function delete(Request $request)
    {
        $this->eatingManagement->delete(Auth::user(),  $request->contents['id']);

        return response()->json();
    }
EatingManagementRepository.php

    /**
     * データを一件削除する
     */
    public function delete($user, $id)
    {
        $model = $user->EatingManagements()->where('id', $id)->first();
        $timezone = $model->timezones()->first();

        $this->detachToUser($model, $user);
        $this->detachToTimezone($model, $timezone);
        $model->delete();
    }

違いはtimezoneテーブルとのリンクを削除する処理が増えたぐらいで、やっていることはそんなに難しくないです。

すんなり完成しました。

これでCURD処理一通り完成したので、次回はグラフ処理を作成していこうと思います。

【ANDROID】【実質北海道一周】UIの検討。

さて、そろそろUIにも着手しようと思うのですが、

まずはどういった情報を表示するか、を整理した方がいいのかな、と思います。

ピックアップしてみると、

  • 現在の始点と終点(どの町と、どの町の間を移動しているか)
  • その区間の現在位置(何km中のkmの位置にいる、現在何%なのか)
  • 札幌(スタート地点)からの距離、全体の何%か

これらの情報が必要かな。

あと、表示をもっとシンプルにさせたいので、画面タップで表示を切り替えるとかも良いかもしれない。

北海道地図で位置が分かるのが一番良いけど、難易度が高そうなので、今回は見送ることにする。

まずは、こんな感じで行ってみましょうか。

【北海道大戦】戦闘結果表示、ゲーム終了動処理を実装する。

前回までの状況はこちら。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/HokkaidoWar

以前作成したこれ。

status=4、5の処理を作成していきます。

とは言っても、特に難しいことはしていません。

なので、一気に作成します。

ついでにゲームオーバーの処理も作成します。

    class HokkaidoWar
    {
        enum GameStatus
        {
            SelectCity,
            ActionEnemy,
            ActionPlayer,
            ShowResult,
            GameEnd,
            GameOver
        }

        public void Run()
        {
中略
            while (asd.Engine.DoEvents())
            {
                asd.Vector2DF pos = asd.Engine.Mouse.Position;

                switch (gameStatus)
                {
                    case GameStatus.SelectCity:
                        cycleProcessSelectCity(pos);
                        break;
                    case GameStatus.ActionEnemy:
                        cycleProcessActionEnemy(pos);
                        break;
                    case GameStatus.ActionPlayer:
                        cycleProcessActionPlayer(pos);
                        break;
                    case GameStatus.ShowResult:
                        break;
                    case GameStatus.GameEnd:
                        cycleProcessGameEnd();
                        break;
                    case GameStatus.GameOver:
                        cycleProcessGameOver(pos);
                        break;
                }

                if (asd.Engine.Mouse.LeftButton.ButtonState == asd.ButtonState.Push)
                {
                    switch (gameStatus)
                    {
                        case GameStatus.SelectCity:
                            onClickMouseSelectCity(pos);
                            break;
                        case GameStatus.ActionEnemy:
                            break;
                        case GameStatus.ActionPlayer:
                            onClickMouseActionPlayer(pos);
                            break;
                        case GameStatus.ShowResult:
                            onClickMouseShowResult();
                            break;
                        case GameStatus.GameEnd:
                            break;
                        case GameStatus.GameOver:
                            break;
                    }
                }
                asd.Engine.Update();
            }
        private void cycleProcessGameEnd()
        {
            var gameinfo = Singleton.GetGameProcessInfomation();
            gameinfo.ShowText(_player.City.GetPosition(), string.Empty);
            var info = Singleton.GetInfomationWindow();
            info.ShowText(cities[0].GetPosition(), "ゲームが終了しました\r\n");
            info.ShowText(cities[0].GetPosition(), cities[0].Name + "の勝利です\r\n");
        }

        private void cycleProcessGameOver(asd.Vector2DF pos)
        {
            var gameinfo = Singleton.GetGameProcessInfomation();
            gameinfo.ShowText(_player.City.GetPosition(), string.Empty);
            var info = Singleton.GetInfomationWindow();
            info.ShowText(pos, "敗北しました\r\n");
        }

        private void onClickMouseShowResult()
        {
            _battle.MyTurnEnd();
            cities = _battle.GetCityList();
            if(cities.Count <= 1)
            {
                gameStatus = GameStatus.GameEnd;
            }
            else
            {
                gameStatus = GameStatus.ActionEnemy;
            }
        }
    class Battle
    {
        public void MyTurnEnd()
        {
            if (lastDeffece != null)
            {
                lastDeffece.ClearPaint();
                lastDeffece = null;
            }
            if (lastAttack != null)
            {
                lastAttack.ClearPaint();
                lastAttack = null;
            }
            cityCnt++;
            if (cityCnt >= _cities.Count)
            {
                _cities = cityRandomReplace(_cities);
                cityCnt = 0;
                turn++;
            }
        }

その他、微調整も加えています。

これで一応一通り完成しました。

次は、ちょっとした不具合とか、微調整を行って行きます。

接触確認アプリCOCOAが個人情報を収集していないことをプログラマー視点で解説する

ニュースとかでもいろいろ言われてきましたが。

https://twitter.com/afoolahoo/status/1294277259545571328

COCOA=すれ違い通信

という説明が一番わかりやすいかもしれないけど。

そもそもの話、アプリは勝手に個人情報に関わるデータを参照することができない用になっています。

これはiPhoneでもAndroidでも同じ。

ここでいう個人情報に関わるデータとは、GPS、電話帳、カメラ、外部ストレージなどを指します。

例えば、あるアプリが、他のアプリの情報を勝手に参照する、ということも出来ません。

これらの個人情報データを参照するには、「必ず事前にユーザーの了解を得ないとアクセス出来ない」仕様になっています。

例えば、GPSを使用するアプリを起動したときに、こんな画面が表示されることありませんでしたか?

この画面で「許可」をタップして、アプリはようやくGPSのデータにアクセス出来ます。

この手順というのもOS側で決められた手順で行わなければなりません。

例えるなら、

アプリが個人情報にアクセスしたい場合、アプリはOSが用意した正式フォーマットをユーザーに提示します。

ユーザーはそれに「OK!」とサインして、初めてアプリは個人情報にアクセス出来るようになります。

(通じたかな・・・)

これは逆に考えることも出来まして、

例えば、みなさん、上のダイアログの内容、確認しないでOKポンポンタップしたりとかしていませんか?

その行為、個人情報抜き取られているかもしれませんよ?

ストアアプリは大丈夫だと思うけど、野良アプリ(ストア外のアプリ)は注意した方が良いよ。

【ラズパイ】【いろいろ計測モニター】CPU温度をWindows側で表示する

前回の記事で、ラズパイのCPU温度を取得できることが分かったので、

これをいろいろ計測モニターに表示させるところまでやっていきたいと思います。

PythonでLinuxコマンドを実行し、結果を得るには以下の様にプログラミングします。

import subprocess

args = ['vcgencmd', 'measure_temp']
res = ""
try:
    res = subprocess.run(args, stdout=subprocess.PIPE)
except:
    print("Error.")

print(res.stdout)

参考記事

https://qiita.com/tdrk/items/9b23ad6a58ac4032bb3b

これを実行すると出力はこうなります。

これを色々と加工して、Windows側に渡すパラメータにします。

実際に組み込んだコード。

def getCPUTemp():
    args = ['vcgencmd', 'measure_temp']
    res = ""
    try:
        res = subprocess.run(args, stdout=subprocess.PIPE)
    except:
        return "Error."
    return res.stdout.decode().split('=')[1].strip().replace('\'C', '℃')
        data = {
            'datetime' : datetime.datetime.now().strftime('%Y:%m:%d %H:%M:%S'),
            'temperature': Temperature,
            'humidity': Humidity,
            'cputemp' : getCPUTemp()
        }

えっと、何をしているかというと、

まずは、res.stdoutの値はバイト文字なので、これをdecode()で文字列に変換します。

その後、split(‘=’)で=で文字列を分割し、後方の文字列([1])を取得します。

しかし、その文字列の中には不要な改行文字(\n)が入っているので、strip()で削除。

そして、「’C」と表示させているところをreplace()で「℃」に置き換えています。

これをJsonのパラメータに追加します。

ここまで出来ればWindows側は表示するだけなので、Windows側コードは割愛。

【ラズパイ】raspberry PI4には冷却用ファンを取り付けよう!

人が触れない温度。

https://qiita.com/BearcubThaw/items/070be8be8dc14e5837f4

$ vcgencmd measure_temp

というコマンド、ラズパイ専用コマンドがありまして、

このコマンドでCPUの温度を出力することが出来ます。

上のスクショはファン無し、アイドル状態で放置した状態でコマンド打った結果。

この温度、お風呂だったら入れないね。

この状態のまま重たい処理を実行させると、さらにCPU温度が上がって、ラズパイは確実に壊れます。

なので、ラズパイ専用のファンを買いました。

ネジが一本どっか行ったけど気にするな。

こっちは老眼で小さい部品見えないんだよ。

部品の中にはヒートシンクも入っていました。

これをCPUに貼り付けると、熱を吸い取って、表面積の多い凸凹部分に熱を伝え、これをファンの風で冷却します。

ファンを回した結果はこちら。

37℃まで下がりました。

人肌レベルですね。

まぁ、ラズパイ4はお勉強用のマシンなので、常時起動しておくことは少ないと思いますが、これで安心です。

ちなみに。

ラズパイZeroの方ですが、

ちょっと温度高め?

触っても熱くないですが。

(ラズパイ4は明らかに手で触れないくらい熱かった。)

うーん、今走らせてるサービス処理、もう少し軽くするか。

こういった温度をWindows側でモニタリングするツールを作ってもいいね。