【Rust】S3のbucketへ画像アップロード

use dotenv::dotenv;
use std::env;
use tokio::io::AsyncReadExt;
use rusoto_s3::*;
use rusoto_core::*;

#[tokio::main]
async fn main() {
    dotenv();
    let aws_access_key = env::var("AWS_ACCESS_KEY_ID").unwrap();
    let aws_secret_key = env::var("AWS_SECRET_ACCESS_KEY").unwrap();

    std::env::set_var("AWS_ACCESS_KEY_ID", aws_access_key);
    std::env::set_var("AWS_SECRET_ACCESS_KEY", aws_secret_key);

    s3_upload().await;
}

async fn s3_upload() -> Result<(), Box<dyn std::error::Error>> {
    let s3_client = S3Client::new("ap-northeast-1".parse().unwrap());
    let mut file = tokio::fs::File::open("./data/test.png").await?;
    let mut buffer = Vec::new();
    file.read_to_end(&mut buffer).await?;

    let result = s3_client.put_object(PutObjectRequest {
        bucket: String::from("hpscript"),
        key: "test.png".to_string(),
        body: Some(StreamingBody::from(buffer)),
        ..Default::default()
    }).await?;
    // do thing with result
    Ok(())
}

データがうまくアップロードされているのが分かります。なるほどね〜

【Rust】base64で画像を文字列に変換

想像以上に文字列のデータ量が多すぎる…

use std::fs::File;
use std::io::Write;
use std::path::Path;

static FILE_NAME: &'static str = "test";

fn main() {

    let path = "./data/img1.png";
    let base64 = image_base64::to_base64(path);
    println!("{:?}", base64);
    
    let img = image_base64::from_base64(base64);

    let file_type = "png";
    let mut output = File::create(&Path::new(&format!("./data/{}.{}", FILE_NAME, file_type))).unwrap();
    output.write_all(img.as_slice()).unwrap();

}


+mQS0RoL4XWkGRlzADREjATCW58eL2T9dzP754iZx5OBzfBHPz51wNvO7sxlwI3lWnIa/An5fSMLuH42HOzfZiABLKqp+KD7hAPsQB9L4eP1gFPJgwPDTUympfvNM9TWq/Z7iX4pAK4463hDa3MXJ4veh2slWxtqowOOXgnUoyHp4H24dllHc5QPw85K0EzUDsE7MjIY5YWH4WMe2ynw7WP0+Het1k3Xn6ReoDw9mo6EY5sccKOU2GADLZaDiBOZF38EDiSclHU0Imzpp7KCNqs9jUGmtGD3drKFe0HEcAGtKAjBmxnFJHgFg2QqCQFHPz6RzMLwzEMP8kUjwkRhB4EWQ7RGUlUzycFSDHCUF/uqs0bdbrPcs4NlPF3JuH46pOBAFj7DHJ5IAP9+fzYLO9dcreXgl8Kj67drmF5dzfzqfA6D9tiQdNfw7BXHgSJ/7NOjkRxsP53jvT/fcnbr6s6RVmMmzI3Y5ZtNujliCEQVbI5duj16GL36atHJ3yuq96R4Hs7xAFyrdGVi+Jxy/7xdFifhxIHwBpH+5tAmleNhSgpv2n2tbMFwIkiQMfgBUA6fx/gCSy/eG38mPwdf/fSEbb5HPYgdDnX61VJjxK3OHIhfkoKQq4WE2SD1gpdPl3WGoQ4D4/bAwvuIAoFdGa87SA/CycQ0D4GBn43A3U2UlBf4NaK7emUxiqOu2HaFlpdlVUH9eUpocIyphAiT5DQbAchnY88L7xj5pGbcO8jgyGNNNDO3qtoMewrODJp9gXQiBG2UDAXjeSALA1ValS7tlF4CpSAlSHMDwq2tbgHPhnu5GEhjDZXuKBFfQwa3hIPCjiFAStkVbKSsB2ou2bBDd/1j0bA/QDpCDWisQF/ofJJolHwfsTlud4jfXf9m0ZTNt3ScNmzDC0MpQC8Kkzp3aKyO5eaMHkvMO7dr069XFRK//mMH6zhMsF7par1s0JdprxvbY5WhtAnQfFCYA+4HKeJ0AaeTW+Cf2BH/e/Ai7hGv7I3JDFy12tzbRU4fdtzQ/FL/IUOMBH86d8K+45XeOxIDejOfBhXEzP6ZCHrJeIQCfAQD71gDANg0AYJwW5mrq52goEOKPJEbQ9QCwZrcOrfkOlMrt20SJTmBAS+ALGV2mWDAAbp6BKnSE6LjPVzsFVegB3dvXXcvCt4DQMJ4VrCM+dK54QwB4/kjtGgD481AZB2AKw1xR+ngygOHl5dyznwaGeriNMNMBXDUc4wC6ipgDsfEDR6SewDDRg4+fnUrBCNuEDXPWvmfvaGsO6OrbQ40IohpxVKI+H/gV6Rah2i6hcc+PrL575w56mr3GDTNYOt02eu1MZNXwzEJXGLYYotvbRc/3ir7eI3r0GX477CGKtqzfGb8yaeMcoHjIKpew1W7xPrNBZt6d5nHqI1/sbzC/D0D+6urmH89nodSM2jvS65syf1XUAcD4vf53AIZoGPbRgjd/gmHvmUPrYm+4D9aYat5XUH82f28iqz/LezAAltcIeHGAVqEVqqrQ+B96Ra6DpXWjpKsJDH0aqqaIm2GxYBQ
….

うーん、これはちょっと無理ですね。。

SassにおけるMedia Query

一般的なmedia query

@media screen and (max-width: 600px) {
  h1 {
    color: red;
  }
}

_breakpoint.scss

$breakpoints: (
    "sm": "screen and (min-width: 400px)",
    "md": "screen and (min-width: 768px)",
    "lg": "screen and (min-width: 1000px)",
    "xl": "screen and (min-width: 1200px)",
) !default;

_mixin.scss

@mixin mq($breakpoint) {
    @media #{map-get($breakpoints, $breakpoint)} {
        @content;
    }
}

style.scss

@import "_breakpoint";
@import "_mixin";

.test {
    color: blue;

    @include mq(sm) {
        color: yellow;
    }

    @include mq(lg) {
        color: red;
    }
}


style.css

.test {
  color: blue;
}
@media screen and (min-width: 400px) {
  .test {
    color: yellow;
  }
}
@media screen and (min-width: 1000px) {
  .test {
    color: red;
  }
}

うわ、これは凄い!!!!

Sassの入れ子/ import

└── scss/
├── _variables.scss ※色、フォントサイズなどの変数を定義するファイル
├── _mixins.scss ※ミックインを定義するファイル
├── _buttons.scss ※ボタンに関するスタイルを定義するファイル
├── _layout.scss ※ページのレイアウトやグリッドレイアウトに関するスタイルを定義するファイル
└── main.scss

モジュールのインポート
_colors.scss

$base-color:#3498db;

_buttons.scss

$base-color:#e74c3c

style.scss

@use 'buttons';
@use 'colors';

.btn {
    background-color:buttons.$base-color;
    color:colors.$base-color;
}


style.css

.btn {
  background-color: #e74c3c;
  color: #3498db;
}

おおおお、素晴らしい!これは使いたい^^

ちなみに、mixinとは、よく利用するCSSスタイルを定義して、他の場所でも使いまわせるようにする機能のこと。
引数を使って、関数のように利用することができる。

Sass基本

### Sassの特徴
– ネスト構造を利用できる
– スタイルシートを分けられる
– 条件分岐を利用できる
– mixin機能の利用

### 変数

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
}

$black: #000000;
$position: left;

.item1 {
    color: $black;
}

.item2 {
    background: $black;
    margin-#{$position}: 30px;
}

### ネスト

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}

.item1 {
    width: 200px;

    .item2 {
        width: 100px;

        .item3 {
            width: 50px;
        }
    }
}

### 条件分岐

$position: left;
$width: 250px;

.item1 {
    @if $position == left {
        padding-left: 10px;
    }
}

.item2 {
    @if $width > 300px {
        margin-right: 10px;
    } @else if $width < 200px {
        margin-left: 10px;
    } @else {
        margin-top: 10px;
    }
}

.item1 {
  padding-left: 10px;
}

.item2 {
  margin-top: 10px;
}

break pointの時に利用したいですね。

gulpでjsの圧縮

$ mkdir gulp_js
$ cd gulp_js
$ npm init -y

$ npm install -D gulp
$ npm install -D gulp-uglify
$ npm install -D gulp-rename

gulpfile.js

var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");

gulp.task("default", function(){
    gulp.src('src/something.js')
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('dest/'));
    done();
});

something.min.js

console.log("hello world!"),console.log("hello world! 2");

minifyされていることが確認できます。
一旦はSassだけでスタートして、JSは後からやりますか…

gulpの初期設定(gulpfile.js)

$ npm init -y
// gulpのインストール
$ npm install gulp –save-dev

gulpfile.js

const gulp = require('gulp');

gulp.task('default', function(){
    console.log('Gulp is running');
});

### sassの導入
$ npm install –save-dev gulp-sass sass

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('default', function(){
    console.log('Gulp is running');
    done();
});

gulp.task('sass', function() {
    return gulp.src('dev/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));
$primary-color: #333;

body {
    color: $primary-color;
}

$ npx gulp

cssファイルはできるんだけど、サーバを動かしながら見たいな…

【Rust】○✖️ゲーム(minmax)

use rand::Rng;
use std::cmp::Ordering;

static goal:[i32; 8] = [ 0b111000000, 0b000111000, 0b000000111, 0b100100100,
            0b010010010, 0b001001001, 0b100010001, 0b001010100];

fn check(player: i32) -> bool {
    for mask in goal {
        if player & mask == mask {
            return true
        }
    }
    return false 
}

fn minmax(p1: i32, p2: i32, turn: bool) -> i32 {
    if check(p2) {
        if turn {
            return 1
        } else {
            return -1
        }
    }
    let board: i32 = p1 | p2;
    if board == 0b111111111{
        return 0
    }

    let mut w = Vec::new();
    for i in 0..9 {
        if board & (1 << i) == 0 {
            w.push(i);
        }
    }

    let mut k = Vec::new();
    if turn {
        for i in w {
           k.push(minmax(p2, p1 | (1 << i), !turn))
        }
        return *k.iter().min().unwrap();
    } else {
        for i in w {
            k.push(minmax(p2, p1 | (1 << i), !turn))
        }
        return *k.iter().max().unwrap();
    }
    

}

fn play(p1: i32, p2: i32, turn: bool) {
    if check(p2) {
        println!("{:09b}, {:09b}", p1, p2);
        return
    } 

    let board: i32 = p1 | p2;
    if board == 0b111111111{
        println!("{:09b}, {:09b}", p1, p2);
        return
    }
    let mut w = Vec::new();
    for i in 0..9 {
        if board & (1 << i) == 0 {
            w.push(i);
        }
    }

    let mut r  = Vec::new();
    for i in w.clone() {
        r.push(minmax(p2, p1 | (1 << i), true))
    }
    let n = r.iter()
        .enumerate()
        .max_by(|(_, a), (_, b)| a.partial_cmp(b).unwrap_or(Ordering::Equal))
        .map(|(index, _)| index).unwrap();
    let j = w[n];
    play(p2, p1 | (1 << j), !turn);
}

fn main() {
    play(0, 0, true);
}

Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.32s
Running `target/debug/rust`
001110010, 110001101

う、なんか違うな…

    let mut rnd = rand::thread_rng();
    let k = rnd.gen_range(1..n);
    let j = w[k];

このようにすると、ランダム性が出る。。

【Rust】○✖️ゲーム

マスを0と1で表現して、2進法の加算で判定する。

fn main() {

    println!("{:09b}", 0b111000000 & 0b000111111);
    println!("{:09b}", 0b111000000 & 0b101100010);
    println!("{:09b}", 0b111000000 & 0b111000010);
}

000000000
101000000
111000000

ちなみに、0b111000000など2進数の型はi32

use rand::Rng;

static goal:[i32; 8] = [ 0b111000000, 0b000111000, 0b000000111, 0b100100100,
            0b010010010, 0b001001001, 0b100010001, 0b001010100];

fn check(player: i32) -> bool {
    for mask in goal {
        if player & mask == mask {
            return true
        }
    }
    return false 
}

fn play(p1: i32, p2: i32) {
    if check(p2) {
        println!("{:09b}, {:09b}", p1, p2);
        return
    } 

    let board: i32 = p1 | p2;
    if board == 0b111111111{
        println!("{:09b}, {:09b}", p1, p2);
        return
    }
    let mut w = Vec::new();
    for i in 0..9 {
        if board & (1 << i) == 0 {
            w.push(i);
        }
    }
    let n = w.len() + 1;
    let mut rnd = rand::thread_rng();
    let r = rnd.gen_range(1..n);
    play(p2, p1 | (1 << r));
}

fn main() {
    play(0, 0);
}

Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.30s
Running `target/debug/rust`
010001000, 001111000

これはさっぱりわからん…