2020年10月 – igreks開発日記

Django モデルフォームを使わずにPost値を保存する

モデルフォームはとても便利ですが、すこし複雑な処理をするときはどこまでカスタムするかという問題も出てきます。

カスタム沼にはまり込んでしまうより、むしろモデルフォームを使わない方が楽な時があります。

以下は、チェックされた価格が設定されていない本に、まとめて同じ価格を設定するときの例です。

<form method="post" >
{% csrf_token %}
<p>500円にする本を選んでください</p>
{% for book in form_unpriced_books %}
    <label>
        <input name="checked_book" type="checkbox" value="{{ book.id }}" checked="checked" />
        {{ book.name }}
    </label>
{% endfor %}
<p>
    <input type="submit" value="保存" />
</p> 
</form>

{% csrf_token %}

<p>500円にする本を選んでください</p>

{% for book in form_unpriced_books %}

<label>

</label>

{% endfor %}

<p>

</p>

</form>

同じnameの複数パラメタは、request.POST.getlistで受け取ることができます。

def UnpricedBooks(request):

    # 価格が未設定の本をのクエリセット取得モデルフォーム不使用)
    form_unpriced_books = Books.objects.filter(
        price=None,
    )

    if request.method == 'GET' :
        # Getの時の処理
    else :
        # POSTの時の処理
        # 入力形式によってはここらへんでバリデーションチェックしたほうが良い

        with transaction.atomic() :
           # チェックされた本の価格を500円にする
            Books.objects.filter(
                id__in=request.POST.getlist('checked_book')
            ).update(
                price=500,
            )
        messages.info(request, f'データを保存しました。')

    context = {
        'form_unpriced_books': form_unpriced_books ,
    }
    return render(request, "template.html", context)

def UnpricedBooks(request):

# 価格が未設定の本をのクエリセット取得モデルフォーム不使用)

form_unpriced_books = Books.objects.filter(

price=None,

)

if request.method == 'GET' :

# Getの時の処理

else :

# POSTの時の処理

# 入力形式によってはここらへんでバリデーションチェックしたほうが良い

with transaction.atomic() :

# チェックされた本の価格を500円にする

Books.objects.filter(

id__in=request.POST.getlist('checked_book')

).update(

price=500,

)

messages.info(request, f'データを保存しました。')

context = {

'form_unpriced_books': form_unpriced_books ,

}

return render(request, "template.html", context)

参考サイト）

DjangoでGET／POSTから値を取得する方法

DjangoでSumの集計結果がNoneだった時に初期値を0にする

テーブルの一部のカラムの値をSumしていると、集計対象のレコードが存在しなかった場合、Sumの結果には通常Noneが返されます。

ここで処理が終わりであればよいのですが、その後そのSumした集計値を使っていろいろ計算を続ける場合、数値として認識されないため、その後の計算の結果もすべてNoneになってしまいます。

なので、もしSumした結果がNone（合計する行が存在しない場合も含め）であれば、0としておくと都合が良いことになります。

Coalesceを使います。

queryset = Model.objects.prefetch_related().all(
        ).annotate(
            total_good_weight = Sum('good_weight'), # 良品量の合計 
            total_defective_weight = Sum('defective_weight'), # 不良品量の合計
        ).annotate(
            # 良品率を計算
            # 不良品のSumの結果がNoneになってしまうと計算できないので、Coalesceでデフォルト値を0に指定する
            yield_rate=F('total_good_weight')*100/(F('total_good_weight') + Coalesce(F('total_defective_weight'),0)
        )

queryset = Model.objects.prefetch_related().all(

).annotate(

total_good_weight = Sum('good_weight'), # 良品量の合計

total_defective_weight = Sum('defective_weight'), # 不良品量の合計

).annotate(

# 良品率を計算

# 不良品のSumの結果がNoneになってしまうと計算できないので、Coalesceでデフォルト値を0に指定する

yield_rate=F('total_good_weight')*100/(F('total_good_weight') + Coalesce(F('total_defective_weight'),0)

)

ポイントとしては、annotateが連続する場合、最後のannotateの中でCoalesceを使います。

annotateが連続しない場合、最初のSum時に、

queryset = Model.objects.prefetch_related().all(
        ).annotate(
            total_good_weight = Sum('good_weight'), # 良品量の合計 
            total_defective_weight = Coalesce(Sum('defective_weight'), 0), # 不良品量の合計
        )

queryset = Model.objects.prefetch_related().all(

).annotate(

total_good_weight = Sum('good_weight'), # 良品量の合計

total_defective_weight = Coalesce(Sum('defective_weight'), 0), # 不良品量の合計

)

とやってもOKです。

参考サイト）

JavaScriptでスマホがスリープから回復した時にカウントアップ(ダウン)を調整する

PWAアプリ化した場合でもそうなんですが、スマホをロックしたり自動で消灯した際、SetTimeoutの処理は一旦停止されます。その後画面を復帰させると、SetTimeoutの処理が再度復活します。

つまり、簡易ストップウォッチ機能とか、何かしらの時間測定をJS側で行っていると、スマホがスリープしていた時間はカウントされない場合があります。

今回はこの対策として、SetTimeout処理の中でスリープによってズレた時間を自動補正します。

HTMLには以下のように書いておきます。

    <div id="watch" class="mx-auto text-center h1 text-monospace">00:00:00</div>
    <!-- スマホのスリープなどで時間がずれた時用の記録用 -->
    <span id="last_check" style="display:none;"></span>

SetTimeoutの中で、最終チェック時の経過時間からズレが5秒以上になったら自動的にズレた分を経過時間に追加します。(jQuery利用)

<script type="text/javascript">
    $(function(){
        "use strict";  

    // タイムカウント
    $(window).on('load', function(){
        let watch = null;
        if($("#watch").length){
            // 1秒ごとに秒数カウントアップ
            watch = setInterval(panda, 1000);
        };
    });
    let panda = function() {
        // 経過時間をトータル秒数で取得
        let init_time = $("#watch").html().replace(/\r?\n|\s/g,"");;
        let total_sec = (parseInt(init_time.slice(0,2)) * 3600) +  
                        (parseInt(init_time.slice(3,5)) * 60 )  +
                         parseInt(init_time.slice(6,8));

        let now = Date.now();
        let last_check = $("#last_check").text();
        // ズレをマイクロ秒で取得
        let diff = now - parseInt(last_check, 10);

        // ズレが5秒以上なら経過時間にズレた時間を追加
        if ( diff && diff > 5000){
            total_sec += diff/1000;
        }
        else{
            total_sec += 1;
        }
        let byo = Math.floor(total_sec) % 60;
        let fun = Math.floor(total_sec / 60) % 60;
        let ji = Math.floor(total_sec / 3600) % 60;

        // 時間の表示を更新
        $("#watch").text(
            ('00' + ji).slice(-2) + ":" + ('00' + fun).slice(-2) + ":" + ('00' + byo).slice(-2)
        );
        // 現在時間を記録しておく
        $("#last_check").text(now);
    }

</script>

$(function(){

"use strict";

// タイムカウント

$(window).on('load', function(){

let watch = null;

if($("#watch").length){

// 1秒ごとに秒数カウントアップ

watch = setInterval(panda, 1000);

};

});

let panda = function() {

// 経過時間をトータル秒数で取得

let init_time = $("#watch").html().replace(/\r?\n|\s/g,"");;

let total_sec = (parseInt(init_time.slice(0,2)) * 3600) +

(parseInt(init_time.slice(3,5)) * 60 ) +

parseInt(init_time.slice(6,8));

let now = Date.now();

let last_check = $("#last_check").text();

// ズレをマイクロ秒で取得

let diff = now - parseInt(last_check, 10);

// ズレが5秒以上なら経過時間にズレた時間を追加

if ( diff && diff > 5000){

total_sec += diff/1000;

}

else{

total_sec += 1;

}

let byo = Math.floor(total_sec) % 60;

let fun = Math.floor(total_sec / 60) % 60;

let ji = Math.floor(total_sec / 3600) % 60;

// 時間の表示を更新

$("#watch").text(

('00' + ji).slice(-2) + ":" + ('00' + fun).slice(-2) + ":" + ('00' + byo).slice(-2)

);

// 現在時間を記録しておく

$("#last_check").text(now);

}

</script>

今回は簡易的なストップウォッチなのでこのような方法でやりましたが、欠点としては、ズレ補正の度に、若干（数ミリ秒ずつ）のずれが発生する可能性があります。

正確にズレ補正を行う場合は、計測スタート時に、開始時刻をミリ秒で記録しておくのが一番確実でしょう。