カジバ技研

ドローンとか飛行機とか

2次元配列をfor文で初期化[Vue3]

はじめに

あけましておめでとうございます。

昨年末よりVue.jsでプログラミングを始めまして、 配列の初期化周りでつまづきまして記事を書いてます。

 Vue3でfor文を使った配列の初期化をしようとしましたがうまくいかず 記事もあまりなかったのでメモを置きます。

目次

やりたいこと

乱数を適当に入れた配列をつくって VueのSFC(単一ファイルコンポーネント)で表示させる。

問題

とりあえず、まずは中身は0だけの1次元配列を出力する関数を script setupタグに書いてみましたが動きませんでした。

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
            arr1.push(0);
        }
        return arr1;
    }
</script>
<template>
    <div>
        <p>{{ createArray }}</p> 
    </div> 
</template>

解決策

Vueの公式サイトを巡回していた際 サンプルコードのページを初めて見つけまして、Vueの関数の動かし方がやっとわかりました。

公式サイトのhttps://ja.vuejs.org/examples/#timerで 13行目でupdateメソッドを定義した後、20行目で呼び出すことでメソッドが動くようでした。 つまりやりたいことに反映するとこう↓

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
            arr1.push(0);
        }
        return arr1;
    }
+  let array=ref([])
+  array=createArray();
</script>
<template>
    <div>
        <p>{{ array }}</p> 
    </div> 
</template>

以下が表示され成功しました。

[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

乱数を入れる

配列内に乱数を入れるには以下のような変更でできました。

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
-            arr1.push(0);
+            arr1.push(Math.floor(Math.random()*10));
+           //0~9の値を配列に入れる。
        }
        return arr1;
    }
  let array=ref([])
  array=createArray();
</script>
~以下省略~

Math.random()は0以上1未満の値を生成するため 整数の値を出すために10倍しています。 Math.floor()で小数点以下を切り捨ててます。

2次元配列に拡張

関数内を2重ループ化して2次元配列に拡張します。

<script setup>
    const createArray=()=>{
        let arr1=[];
+       let arr2=[];
        for( let i=0 ; i<10 ; i++){
+          for( let j=0 ; j<10 ; j++){
                arr1.push(Math.floor(Math.random()*10));
               //0~9の値を配列に入れる。
+          }
+          arr2.push(arr1);
+          arr1=[];
        }
-       return arr1;
+       return arr2;
    }
    let array=ref([])
    array=createArray();
</script>
~以下省略~

以下が表示され成功しました。

[ [ 9, 3, 4, 2, 8, 4, 2, 5, 5, 6 ], [ 2, 5, 2, 2, 7, 2, 9, 3, 5, 8 ], [ 6, 3, 9, 2, 3, 8, 0, 7, 5, 7 ], [ 5, 9, 1, 5, 4, 2, 7, 6, 8, 4 ], [ 4, 7, 9, 7, 7, 8, 6, 4, 5, 5 ], [ 3, 1, 5, 6, 8, 4, 9, 2, 2, 2 ], [ 8, 3, 3, 2, 7, 5, 6, 6, 6, 1 ], [ 6, 6, 5, 5, 8, 7, 6, 1, 0, 6 ], [ 3, 0, 1, 1, 8, 3, 5, 5, 6, 1 ], [ 9, 2, 5, 1, 5, 1, 8, 7, 4, 5 ] ]

おわりに

公式のサンプルコードがすごい豊富にあったので、どんどん使っていきたいですね。

更新

初:2023/1/1

Mbed OS 5,6でシリアル通信

はじめに

 Mbed OS 5(OS5), Mbed OS 6(OS6)に手を出し沼りました。 今回紹介する沼はシリアル通信です。 そのままではコンパイルを通りませんでした。

 今まで使ってたものはMbed OS 2でした。 よくサンプルがあるのはMbed OS 2を使ったものが多いため、 躓いた備忘録も兼ねて公開します。

試す際は自己責任で試してください。

シリアル通信

 Mbed OS 2のシリアル通信のサンプルコードは ライブラリをmbedos5,6にするとコンパイルが通らなくなります。 それぞれの原因を述べた後、サンプルコードを載せています。

OS5

問題点

 Serialクラスを使った従来のサンプルコードそのままで試すと実行中にエラーで止まりました。 シリアル通信の受信に使う関数getcあたりで止まっているのはほぼ確実そうです。 原因不明のためこのエラーは無視ししてアプローチを変えることにしました。

 そのため使えそうなクラスを探したところ、 RawSerialを使うとほぼそのまま移行できそうだったので試して成功しました。

 変更点は最初の宣言をSerialからRawSerialに変えただけです。 https://os.mbed.com/docs/mbed-os/v5.15/apis/rawserial.html

ソースコード

//リビジョンmbed-os-5.15.7
#include "mbed.h"
// Blinking rate in milliseconds
#define BLINKING_RATE_MS        
//シリアル通信の初期設定
RawSerial pc(USBTX, USBRX);//Serial->RawSerial
// Initialise the digital pin LED1 as an output
DigitalOut myled1(LED1);
DigitalOut myled2(LED2);
void pc_rx();
int main()
{
    //Start
    pc.printf("Start\r\n");  
    //シリアル通信の割り込み処理
    pc.attach(pc_rx, SerialBase::RxIrq);
    //Lチカ
    while (true) {
        myled1=1-myled1;
        myled1 = !myled1;
        ThisThread::sleep_for(100);
    }
}
void pc_rx(){
    myled2=1-myled2;
    //char getc=pc.getc();
    char getter;
    //読み取り
    getter=pc.getc();
    //頭文字に"re,読み取ったエコー"
    pc.printf("re:%c\r\n",getter);  
    return;
}

mbedos6

問題点

 OS5ではRawSerialクラスを使うことで解決しましたが、 OS6ではRawSerialクラスはなさそうなので別のクラスを使用しました。

 OS6は調べた限りシリアル通信のクラスが2つありましたが、 特に受信割り込みを使う必要があったためUnbufferedSerialクラスを使いました。

https://os.mbed.com/docs/mbed-os/v6.13/apis/unbufferedserial.html

 BufferedSerialクラスは割り込み処理に必要な関数attachがprivateで面倒だったので不採用です。

ソースコード

//リビジョンmbed-os-6.13.0
#include "mbed.h"
// Blinking rate in milliseconds
#define BLINKING_RATE_MS                                                    500
#define BUFFERDSIZE 5

static UnbufferedSerial *pc;

// Initialise the digital pin LED1 as an output
DigitalOut myled1(LED1);
DigitalOut myled2(LED2);
void pc_rx();
int main()
{
    char send[7]={'S','t','a','r','t','\r','\n'};
    //シリアル通信の初期設定
    pc= new UnbufferedSerial(USBTX, USBRX,9600);
    //Start
    pc->write(send,7);  
    //シリアル通信の割り込み処理
    pc->attach(pc_rx, SerialBase::RxIrq);
    //Lチカ
    while (true) {
        myled1=1-myled1;
        myled1 = !myled1;
        thread_sleep_for(BLINKING_RATE_MS);
    }
}
void pc_rx(){
    myled2=1-myled2;
    int err;
    char getter2[2]={'\r','\n'};
    //char getc=pc.getc();
    char send[3]={'r','e',','};
    char getter[10]={0,0,0,0,0,0,0,0,0,0};
    //読み取り
    pc->read(getter, BUFFERDSIZE);
    //頭文字に"re,"
    pc->write(send,3);  
    //読み取ったエコー
    pc->write(getter,BUFFERDSIZE);    
    pc->write(getter2,2);//改行
    return;
}

更新履歴

R30817 初稿公開

技術書展11の活動記録

初めに

 初のサークル活動でわからないことも多かったですが何とか終えられました。 期日通りに発行でき良かったです。 運営の皆様楽しいイベントありがとうございました。

書籍URL techbookfest.org

やったこと

  • データ収集
  • 技術書のPDF作成
  • 入稿用のデータ作成
  • 第3回 刺され!技術書アワードへのエントリー

データ収集

 技術書作成の上で必要な実験結果や書く予定の範囲だけど記憶があいまいな技術知識の再確認を行いました。

技術書のPDF作成

 LATEXのTexWorksを使用してデータを作成しました。PDFデータだけなら十分に対応できたこととstyleファイルを流用できたことが大きかったです。

入稿用のデータ作成

 後から印刷を利用することを考えて、電子+紙セットも出しました。 このプランでは日光企画さまが印刷すると公式サイトにあったので対応ファイルの拡張子を確認すると PSDやEPSというデータ形式にする必要があるようでした。(PDFで行けると思ってた。) ライセンスを持っていたphotoshopでPDFからPSDに変換できるようでセーフでした。

 また表紙は別データにするそうなので日光企画さまのHPでテンプレートをダウンロードして表紙を再作成(元データからコピペ)しました。 注意として左開きなら表紙が右で裏表紙が左の点です。(イメージは本のカバー) ノンブルはよくわからなかったので、本文に1から付けました。

第3回 刺され!技術書アワードへのエントリー

 公式サイトからGoogleフォームへ移り項目を入力しエントリーしました。 その後運営様が読まれて公式Youtubeの生放送(7/15)で感想をいただきました。

 この放送のアーカイブがリンクから見れます

<リンク:【書籍紹介】技術に出会える - 技術書典11スペシャルオンラインイベント - YouTube

スケジュール

  • ~7/6執筆、マイページから審査へ提出

  • 7/9深夜にミスを見つけ改稿し再審査、深夜のうちに運営さんからOKの連絡来ました。

  • 7/10開催時刻とともに公開できた。

  • 7/12?第3回 刺され!技術書アワードへエントリーしました。

  • 7/15公式Youtubeの生放送の書籍紹介で紹介していただきました。

  • 7/16Twitterの「推し祭り」タグに投稿しました

  • 7/23実験動画をTwitterで公開しました。

  • 7/25閉会

販売記録(R3 7/10-7/25)

 販売結果は電子版21冊、電子+紙版6冊を買っていただきました。 ありがとうございます。

f:id:kajiyaken:20210726162013j:plain
図1.日毎の売り上げ冊数
どの日に売れたのかを棒グラフで表したのが図1です。 初日と15日、最終日がよく買われています。スケジュールと見比べてみると以下のことがわかります。

  • 初日は宣伝から事前に買うことを決めていた方に買っていただいたと思います。

  • 15日は技術書典の公式Youtubeで技術書アワードへエントリーした書籍紹介で紹介された直後に4冊購入されました。かなり宣伝効果大きかったです。

  • 最終日は駆け込みで一気に伸びました。

最終日に一気に伸びた要因は駆け込み需要くらいしか思い浮かびませんが、電子+紙セットが最終日前まで3冊で印刷が10冊で余りが多くあまりそうだったため、すごくうれしかったです。

やってよかったこと

  • 開催前に#技術書典でツイートしたこと

  • 公式の書籍紹介のアーカイブのURLと紹介されている時間をツイートしたこと

  • 「推し祭り」に参加したこと(桁違いの人数に見ていただけた)

  • 製作記録で製作したドローンの実験動画をツイートしたこと

    最後に

     買っていただいた方、本当にありがとうございます。 次回も頑張るのでご期待ください。

備忘録

 Latexで用紙の設定と入稿用にトンボを付けるように変えるにはdocumentclassに\documentclass[11pt,a5paper,papersize,,tombow,titlepage,twoside,dvipdfmx]{jsarticle}で設定します。ここで重要なのはa5paperだけでは用紙の設定が変わりませんでした。正しくはa5paper,papersizeの2つを設定しないとちゃんと反映されていませんでした。トンボ(四隅に着ける断裁目印)はtombowを入れることでつきました。

更新履歴

R3/07/26 初稿公開

R3/07/29 書籍URLを初めにに追加

はじめに

//はじめに

本ブログではドローンやラズパイなどのプログラミングを 備忘録や普及目的で記事を書く予定です。

技術書典11に出すこと目標として技術書を製作きっかけに活動紹介用としてスタートします。 (2021/05/22)