ktyr report

[React]koa-router備忘録

const Router = require('koa-router');
const router = new Router();
router.get('/', async (ctx, next) => {
    if(エラー条件){
        ctx.status = 400;//500
        return;
    }
    await ctx.render('index', {});
});

[JavaScript]スクロール無効化

window.addEventListener('touchmove', (e)=>{this.cancelScroll(e);}, { passive: false });
window.addEventListener('mousewheel', (e)=>{this.cancelScroll(e);}, { passive: false });

cancelScroll(e) {
    e.preventDefault();
}

[React]State

import { useState } from "react"
export const App = () => {
    const [num, setNum] = useState(0);
    const onClickButton = () => {
        setNum(num + 1);
    };
    return (
        <>
        <button onClick={onClickButton}>Button</button>
        <p>{num}</p>
        </>
    );
};

[PHP]idiorm #7 raw_execute + AES_ENCRYPT

define('DB_ENCRYPT_KEY','aabbccddeeff');
require_once __DIR__ . '/idiorm.php';
ORM::configure('mysql:host=localhost;dbname=xxxx');
ORM::configure('username', 'yyy');
ORM::configure('password', 'zzz');
ORM::configure('driver_options', [
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
]);

$query = "INSERT INTO {$table_name}(`e_id`,`description`) VALUES(:e_id,AES_ENCRYPT(:description,'xxyyzz'))";
result = ORM::for_table('users')->raw_execute($query,['e_id'=>1,'description'=>'あいうえお']);

$query = "UPDATE {$table_name} SET `description`=AES_ENCRYPT(:description,'xxyyzz') WHERE `e_id` = :e_id";
result = ORM::for_table('users')->raw_execute($query,['e_id'=>1,'description'=>'あいうえお']);

[React]Props

blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.message}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green" message="Great" />
        <blueMessage color="red" message="Bad" />
        <button onClick={onClickButton}>button</button>
        </>
    );
}

　
childrenを使う場合
blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.children}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green">Great</blueMessage>
        <blueMessage color="red">Bad</blueMessage>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

[Liquid]ショートコード

ブログ記事内やページ内で特定の記述をした部分を特定のhtmlへ変換する機能。

https://github.com/culturekings/shopify-shortcodes
のshortcode-render.liquidとshortcode.liquidをassetsフォルダへ配置

　
templates/article.liquid の記事部分を下記へ書き換える

{% include 'shortcode' load:article.content %}

　
記事編集で下記コードを入力する。xxxxの部分は商品ハンドル

[product_in_blog handle="xxxx"]

　
「product_in_blog」という名称のショートコードを作成する時は、「shortcode-product_in_blog.liquid」というファイルを作成する。

　
引数「handle」を設定する場合、「shortcode-product_in_blog.liquid」で値を取得する処理は下記。

{%- capture product_handle -%}{%- include 'shortcode-render' render:'handle' default:'' -%}{%- endcapture -%}

　

[React]関数やスタイルの適用

App.jsx

export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

[React]export

App.jsx

export const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}

　
index.js

import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />,document.getElementById("root"));