Photo by Valeria Boltneva on Pexels.com

評価するボタンを改修して以前より直感的な操作になりました.#vue3

2024.10.14

Logging

おはようございます.評価するボタンを改修して以前より直感的な操作になりました.以前のUIはこんな感じでセレクトメニューを選択し評価ボタンを押すという形でしたが、改修したUIは★を触れることで評価の値が変わります.

自分としては改修した方が操作しやすいと思っています.

因みにVue3.jsを使用しています.今までVue3.jsやReactの良さがあまり分かっていませんでしたが、なるほどこういう再レタリングする時に便利だよなって気づきました.バニラJSでコードを書くよりも比較的に簡単に書く事ができ再利用性があるそこが利点だと.

最後にVue3.jsのコードを貼っときます.

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const Evaluation = {
    props: {
      defaultActive: {
        type: Number,
        required: true
      },
      totalItems: {
        type: Number,
        required: true
      },
      avgVal:{
        type:Number,
        required:true
      }
    },
    data() {
      return {
        defaultActived: null,
        items: []
      };
    },
    created() {
      // HTMLから渡された値を基に、初期の状態を設定
      this.items = Array.from({ length: this.totalItems }, (v, i) =>{
        return (i + 1) <= this.defaultActive ? '★' : '☆';
      }
      );
    },
    methods: {
      // マウスが触れた時に☆を★に変える
      hover(index) {
        this.items = Array.from({ length: this.totalItems }, (v, i) =>
            i <= index ? '★' : '☆'
        );
        document.getElementById('evaluationVal').setAttribute('data-val',index);
      },
      // マウスが離れた時に元の値に戻す
      onclick() {       
        let i = Math.floor(document.getElementById('evaluationVal').getAttribute('data-val')) + 1;
         (async (i) =>{
            let frm = new FormData();
            frm.append('id',document.querySelector('#evaluation_id').getAttribute('data-id'));
            frm.append('val',i);
            let res = await fetch('/evaluation/index.php',{
                method:'post',
                body:frm
            }).then(result=>result.json());
            alert(res.msg);
            if(Math.floor(res.flg) === 1){
              const roundToDecimal = (number, decimalPlaces) =>{
                const multiplier = Math.pow(10, decimalPlaces);
                return Math.round(number * multiplier) / multiplier;
              } 
              document.getElementById('evaluationAvgVal').textContent = roundToDecimal(res.avgVal,2);
              this.defaultActived = res.avgVal;
              this.reRender();
            }
            
        })(i);
      }, 
      reRender() {
        // HTMLから渡された値を基に、初期の状態を設定
        this.items = Array.from({ length: this.totalItems }, (v, i) =>{
            return (i + 1) <= this.defaultActived ? '★' : '☆';
          }
        );
      }    
    },
    template: `
      <div>
        <span v-for="(item, index) in items" :key="index">
          <span
            @mouseover="hover(index)"
          >
            {{ item }}
          </span>
        </span>
        [<span  id='evaluationAvgVal'>{{this.avgVal}}</span>]
        <button @click="onclick()"
         id='evaluationVal'
         data-val='5'
         class='bbtn'
         title="★に触れることで評価の変更が出来ます."
         >評価する</button>
      </div>
    `
  };
  const app = createApp({});
  app.component('evaluation', Evaluation);
  app.mount('#evaluation');

明日へ続く.

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, app.component, app.mount, async, created, document.getElementById, evaluation, floor, frm, hover, Math.floor, methods, multiplier, onClick, pOW, props, setAttribute, this.totalItems, セレクトメニュー,

PHP言語の素で自分もやってみた🙆

2024.06.16

Logging

おはようございます、素のPHP言語でストリーミングダウンロードしてみました.仕事でつい最近、そのような事をLaravelで行ったわけですけど、素のPHPではどんな感じであろうかと思ったのと株式会社Oさんのブログでもストリーミングダウンロードでメモリ不足解消という記事を見つけたので自分の知見で書いてみました.

<?php

class streamDownload
{
    public $flg = false;
    public $fileName = '';
    public $to_encoding = 'sjis';
    public $from_encoding = 'UTF-8';

    public function __construct($fileName,$to_encoding = 'sjis',$from_encoding = 'UTF-8')
    {
        $this->fileName = $fileName;
        return $this;
    }

    public function checkSplFileInfo()
    {
        if((new SplFileInfo($this->fileName))->getExtension() === 'csv'){
            $this->flg = true;
        }
        return $this;
    }

    public function download($data)
    {
        if(!$this->flg){
            return $this->flg;
        }

        header('Content-Type: application/octet-stream');
        header('Content-Disposition: attachment; filename='.$this->fileName);        
        $stream = fopen('php://output', 'w');
            foreach ($data as $row) {
                $row = mb_convert_encoding($row,$this->to_encoding,$this->from_encoding);
                fputcsv($stream, $row);
            }
        fclose($stream);
        exit;
    }
}

$data = [
    ['テスト1', '高知太郎', 'abc@example.com'],
    ['テスト2', '高知花子', 'def@example.com'],
    ['テスト3', '高知喜多郎', 'dev@example.com'],
];

(new streamDownload('test.csv'))->checkSplFileInfo()->download($data);

このコードはCSVファイルをエクセルで開くことを想定して記載しています.要のデータ処理はあのような配列で渡せば何万件もの処理でも基本落ちません.

なお要のデータ処理はご自身で考える必要があります、あくまでも雛形です.

明日へ続く.

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, abc@example.com, application, attachment, construct, Content-Disposition, def@example.com, download, exit, fclose, filename, fopen, foreach, getExtension, header, Laravel, octet-stream, ストリーミングダウンロード,

素数判定、単純なソース。

2017.06.25

Logging

素数判定、単純なソースを作りましたので
公開します、ちなみに確率的素数判定法ではなく
ほんとに単純明快な方法で作成しましたので自分のパソコンでは
4桁までの処理が限界でした、基本:javascriptで動いています・
ローカルのパソコン性能に左右されます。
ソースを変更して5桁とか試してみるのも良いかもしれません?
サンプルサイト
https://zip358.com/tool/sosu/

function sosu(){
    let sosuno = [2];
    for(let i=3;i<=9999;i++){
        let flg = true;
        if(i%2===0){
            continue;
        }
        for(let ii=2;ii<i;ii++){
            if(ii%2===0){
                continue;
            }
            if(i%ii===0){
                flg = false;
                break;
            }
        }
        if(flg){
            sosuno.push(i);
        }
    }
    document.getElementById("my-textarea").value = sosuno.join(',');
}
document.getElementById("btn").addEventListener("click",sosu);

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

$flg, 0, 2, , 4, 5, 9999, continue, For, function, if, Ii, javascript, let, lt, sosu, sosuno, true, サイト, サンプル, ソース, パソコン, ほんと, ローカル, 作成, 公開, 処理, 判定, 判定法, 単純, 基本, 変更, 左右, 性能, 方法, 明快, 素数, 自分, 限界,