KAEDE Hack blog

kaede0902 技術ブログ お仕事募集中。

成果物一覧--KAEDE WORKS

KAEDE WORKS

フクダデンキHP(LP)

f:id:kei_s_lifehack:20200917171351p:plain

f:id:kei_s_lifehack:20200917171432p:plain

f:id:kei_s_lifehack:20200917171454p:plain

fesa.netlify.app

  • 勤務していた Fukuda Electick System Arts の ウェブサイト
  • SP 対応に仕上げた。
  • Logo や favicon そして色合いは デザインができる理学部の後輩に任せた

github.com

f:id:kei_s_lifehack:20200918213347p:plain

PageSpeed Insights

  • パフォーマンスはこちら。辛口採点のここで40点出るのはかなり高いと思う

要件。なぜ作ったか。

  • 3 年間バイトしていた フクダ電気六角橋店の 2000 年ごろからアップデートがされていない ホームページビルダー製のページのリニューアル。昔のホームページビルダーで作られたものなので iPhone ではとても見れたものではなかった。
  • まず何よりもスマフォで快適にみて、店舗の「名前、場所、電話、仕事内容」がわかるようにした。
  • お得意様への謝恩セールの情報も載せるようにした。

使用した技術

  • 下記のために HTML のみではなく React.js を使用した

    • html を (header, body, footer)などと 分割するため
    • それを各ページで何度も呼び出すため
    • レイアウトやページの枠組み記述したファイルと店舗情報や作業内容のテキストファイルを分離するため。( テキストファイルは jsx の配列で記述 )
  • 下記のために CSS を最小限にして react-boostrap を使用した

    • 簡単に 両サイドのマージンを取ったメインコンテンツ カードの流し込みをする
    • 簡単にヘッダーメニューを スマフォ閲覧でハンバーガーメニューにする
  • 下記のために Netlify を deploy 先にした

    • GitHub に push するだけで 自動 bulid deploy してくれる

弱点

  • CMS が組み込めてないのでソースコードのテキストファイルを変更しないと更新できない
  • 静的出力ができていないので、npm が動く環境じゃないと deploy できない。Next で作り直したい。

面談予約 定型文メーカー

f:id:kei_s_lifehack:20201014051758p:plain

kaede0902.github.io

  • react-hooks, MUI の練習に作ったおもちゃ
  • 面談の予約の時に実用性がある!

0902ch

f:id:kei_s_lifehack:20200705235417p:plain

2chのクローン React BootstrapでResponsibleに firebaseでCreate + Updateのはずが 追加機能が死んでる。Readしかできない https://kaede-0902ch.web.app/

GitHub2ch/ repoにある

途中で追加ができなくなった...

Ledger

f:id:kei_s_lifehack:20191120003938p:plain

f:id:kei_s_lifehack:20191120004036p:plain

動作確認したクライアント・サーバーOS MacOS Mojave Ver10.14.6/ Chrome

作成した目的

職場の紙のシステム置換するため -> 制作を通じてより言語を使えるようにするため

作成背景

紙の承り台帳で捲って検索するのが大変だった もっと効率がいいブラウザで使える台帳を自分で作ってみたかった

現場のレビュー

  • 今まで紙のシステムで動かしていたんだから,紙のシステムでいい.
  • 文字が小さい,背景の色が文字の白と近い
  • カードの枚数を6から4にして文字を多くした方が疲れてる時に見やすい

使用言語, DB,

CakePHP, CSS, MySQL, (XAMPP)

作成期間

2019.10 ~ 2020.02

工夫した点

f:id:kei_s_lifehack:20191013235817g:plain

レスポンシブにした.

フラットデザインを意識した.

起動, 操作方法,

DBはreadmeの通りに制作,phpの環境構築
XAMPPをstartして、ledgerのdirectlyに入ってbin/cake server
localhost 8256 で起動、追加する

下のボタンで追加,カードをクリックして編集,左上でidを検索

ソースコード解説

github.com

ほぼLedgerController.phpに記載

github.com

viewはTemplate/Element/に分割した

必要な環境

XAMPP, Chrome,

自己評価

ちゃんとDBに値保持できるものがつくれた! UIが紙に近い!見やすい!モダン!! 検索が大変だから作った割にソートが不十分 剥がした青紙のメール送信などの機能が未実装

感想,考察

開発環境の不安定性を感じる backend側は日本語の情報が古く,エラーを英語でググるの大事さを学んだ

どうやってDBを作ってCakePHPで使用するか理解。

しかし直したい点はUI側が殆どで, どうしても埋め込みJSなどになってしまうため、FrontendのFrameworkを使用した方がメンテしやすくシンプルにかけると感じた。

また我流でモダンなUXを実装するのは汚くおかしくなってしまうので, Reactを 勉強してから作ろうと思った.CakePHPは使えるから使ったにすぎない.

サーバーサイドが分からずdeployが出来なかったので、サーバーサービス?の勉強の必要性か感じた。→ firebase家計簿appへ

よってFirebase + Reactを勉強し始めた。

Express, node, などを勉強して公開しなければ

参考文献

ここ

GitHub URL

GitHub - kaede0902/ledger: independent day


Firebase家計簿

動作確認したクライアント・サーバーOS

MacOS Mojave Ver10.14.6/ Chrome Android 10, MIUI 10 Mi9

目的

Freeeの試験

背景

実際に誰でも使えるwebシステムを使いたかった

moneylog-e7c4b.firebaseapp.com

使用言語, DB,

jQuery , Firebase, Bootstrap

スクショ

起動, 操作方法,

ソースコード解説

BootstrapでほとんどcssをかんがえなくてモダンなUIがかけた

必要な環境

ブラウザ,なんでも

自己評価

やっとwebで動く動的のものを作れた. だがfilterなど使いやすい機能は何もない.

足りないもの

  • 複数ページ分割,pagenate

感想

XSS weaknessがあってxvideoがひらくscript開かれたのは笑った

考察

セキュリティの大切さを身を以て実感できた Firebaseでなければqueryのweaknessもあるし,気をつけよう

Validationが昨日していない

jQueryで実装するとやはり汚くなるし,Componentでかけと言われて Reactの勉強を開始した

参考文献

GitHub URL

GitHub - kaede0902/moneylog: firebase

Shooting Game

f:id:kei_s_lifehack:20200917171007p:plain

Shooting Game

  • 一番最初にHTML5Canvas, JSを覚えた時に本のをアレンジして作った
  • 実際遊べるのは評価がたかかった
  • 古い本なので処理がだいぶ時代遅れのものになった
  • Reactで修正したい, そう言い続けて3 年になる (遠い目)
  • ES6も知らず,varだらけで重複コードが多い200Linesのjsになった

実装できなかったもの

  • タマの複数管理
  • ハイスコア保存
  • スマフォ対応

スマフォ対応だけは 後に作った ledger に生かされたと思う

Canvas Animations

kaede0902.github.io

太陽系シュミレーション

f:id:kei_s_lifehack:20200814164318p:plain

kaede0902.github.io

太陽系のシュミレーションアニメ

太陽は少し縮小したが、極力実際の太陽系の惑星にサイズと速度を合わせた.


ランダムな球体の反射計算

kaede0902.github.io

初期の移動方向が固定なのが改善点

摩擦係数シュミュアニメ

kaede0902.github.io

ユーザーインプットから摩擦係数変えられるように作れば

よりシュミレータっぽかった

ハロウィンゴースト

f:id:kei_s_lifehack:20200706002407p:plain

https://kaede0902.github.io/Canvas/Animation/SEASON/HALLOWEEN/HalAn.html

ハロウィンで作ったお化けが動き回るサイト

レスポンシブにできませんでした!

スマフォで開くとガリガリになります!

三色の円が拡大して重なるアニメーション

色の重なりの研究の時に使った

スクリーンセーバー的な使い方ができる

kaede0902.github.io

Rails で routes.rb でルーティングをした

Puma starting in single mode...
* Version 4.3.6 (ruby 2.6.1-p33), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000

f:id:kei_s_lifehack:20201017160655p:plain

Hello rails

guides.rubyonrails.org

rails generate controller Welcome index

Running via Spring preloader in process 80060
      create  app/controllers/welcome_controller.rb
       route  get 'welcome/index'
      invoke  erb
      create    app/views/welcome
      create    app/views/welcome/index.html.erb
      invoke  test_unit
      create    test/controllers/welcome_controller_test.rb
      invoke  helper
      create    app/helpers/welcome_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/welcome.scss
  • view が作成された

Most important of these are of course the controller, located at app/controllers/welcome_controller.rb

and the view, located at

app/views/welcome/index.html.erb.

作成されたコントローラと view を確認

class WelcomeController < ApplicationController
  def index
  end
end
  • これが controllers/welcome_controller.rb
<h1>Welcome#index</h1>
<p>Find me in app/views/welcome/index.html.erb</p>
  • これが views/welcome/index.html.erb

ルーティングをする

guides.rubyonrails.org

Now that we have made the controller and view, we need to tell Rails when we want "Hello, Rails!" to show up. In our case, we want it to show up when we navigate to the root URL of our site, http://localhost:3000. At the moment, "Yay! You're on Rails!" is occupying that spot.

  • rails に route を教えないとさっきのページにはアクセスできない

  • config/routes.rb をかく

Rails.application.routes.draw do
  get 'welcome/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
  • routes.rb はこうなっている

This is your application's routing file which holds entries in a special DSL (domain-specific language) that tells Rails how to connect incoming requests to controllers and actions. Edit this file by adding the line of code root 'welcome#index'. It should look something like the following:

  • Domein 言語で書かれているらしい。
  • ここにルーティングを追加する
 root 'welcome#index'

f:id:kei_s_lifehack:20201017161721p:plain

  • これで welcome/index にアクセスするとさっきの view が見える

f:id:kei_s_lifehack:20201017161820p:plain

  • しかし welcome/ では出ない
  • 普通の index.html の仕様とは違う?

デスク作業環境のバックのラックを最適化した

フロントエンド

f:id:kei_s_lifehack:20201017000609j:plain

フロントが今こうなっている

バックエンド

f:id:kei_s_lifehack:20201017001836j:plain

ラックの構成を引越し前から最適化していなかったので、中途半端な隙間が空いていて、ものが効率的にしまえていなかった。充電もしにくかった。これを今回は改善する

f:id:kei_s_lifehack:20201017000632j:plain

設計図を Miro でちゃんと作って全て外してやり直して、バックエンドを最適化した

f:id:kei_s_lifehack:20201017000656j:plain

整然としている。美しい。

ケーブルやACアダプタ、コスメ、工具などをとりやすいコンテナに入れている。

コンテナが2段入る 35cm + 棚板 2cm を 3カラム、一番下はロボット掃除機が余裕を持って通れる高さ、天井は180cm の私が 苦痛なくモバイルツールをやり取りできる位置に、にMiro を使って設計した。

f:id:kei_s_lifehack:20201017000822j:plain

ラックの天井にはコンセントタワーと6口のコンセント拡張ハブを持ってきて、

Alexa、HMDwimax ルーター、iPhoneSE, 1+5T, を同時に余裕をもって給電し、モバイルツールはいつでも取れるようにしている。

なお、iPhoneSE とAlexa 以外はマグネットケーブルなので本当に簡単に出発時に外し、帰宅時に給電開始できる。

壁のコンセント際のクリーンさ

f:id:kei_s_lifehack:20201017001419j:plain

コンセントケーブルはロボット掃除機のエラーの原因にならないように、壁からラックの天井まで伸ばしてから拡張している。これで 作業環境ではホコリフリー。

以前の記事で紹介したベッドもキャスターが着いてる折りたためるし、完全にホコリフリー。

効率的に作業ができる。

意見

工場っぽい。

倉庫では無いです!!!!

コスメって何!?って気になって開けられるリスクよ笑笑

メンズコスメは人権。開けられない!

mui で Form を綺麗に作る

why

  • 敬語簡易化アプリで CSS が必要になったから興味を持ってた MUI を使ってみる

www.youtube.com

  • この動画が分かり易そうだったので参考にする

material-ui.com

  • これが公式ドキュメント

install

material-ui.com

npm install @material-ui/core

+ @material-ui/core@4.11.0
added 26 packages from 17 contributors, removed 10 packages, updated 6 packages and audited 1985 packages in 11.496s

btn

f:id:kei_s_lifehack:20201014030900p:plain

import Button from '@material-ui/core/Button';

      <Button>PRESS ME</Button>
      <Button variant='contained' color='secondary'>PRESS ME</Button>
  • 使えるのを確認

textfield

  • input とは違うから onChange うまく使えなさそう
  • だがこちらの方がシンプル?未検証

formControl

material-ui.com

  • これを使ってみる
import { FormControl, InputLabel, Input, FormHelperText } from '@material-ui/core';

<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

f:id:kei_s_lifehack:20201014031802p:plain

  • 綺麗。
  • これに onChange, value を仕込めるか確認する

f:id:kei_s_lifehack:20201014031930p:plain

  • 動いた!!!

paper

material-ui.com

  • アウトプットの表示には papaer を使う
import Paper from '@material-ui/core/Paper';

        <Paper>
          お世話になっております {theirName} 様 <br/>
          HOGE 大学の {myName} です <br/>
          以上、よろしくお願い申し上げます。
          HOGE 大学 {myName}
        </Paper>

f:id:kei_s_lifehack:20201014033041p:plain

  • 紙の中で出せた。
<Paper elevation={3}>

f:id:kei_s_lifehack:20201014033248p:plain

  • elevation を加算すると浮き上がりがはっきりする。

MUI 追加まとめ

f:id:kei_s_lifehack:20201014033917p:plain

  • 今までの CSS が邪魔してるけど、割と綺麗に行けた
  • 次はグローバル CSS をつぶす

css 調整

最初はこれを入れていた

.main {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

f:id:kei_s_lifehack:20201014034834p:plain

  • vh を % にするだけでくっついた

Container

import Container from '@material-ui/core/Container';

f:id:kei_s_lifehack:20201014035807p:plain

  • これしてくくるだけでサイドカットされる

f:id:kei_s_lifehack:20201014035918p:plain

  • maxWidth sm でまとまった

material-ui.com

  • spacing も Bootstrap 見たい
      <FormControl my={8}>

これでは聞かない

f:id:kei_s_lifehack:20201014041100p:plain

  • box を噛ませてようやくできた
  • margin などを設定するのにはこれが必要らしい?

再び Textfield

しかくで囲まれた TextField の方が使いやすそう 後でこっちにする

material-ui.com

CSS で中央揃えのカードを作る

why

kei-s-lifehack.hatenablog.com

  • 便利アプリを作りたくなった
  • 中央に全てが寄っていて欲しかった
  • Chrome extension の care your eyes も動いて欲しかった
  • それの中央揃えになぜか苦戦したので書いておく

f:id:kei_s_lifehack:20201010021046p:plain

このテキストのみの html を css で中央に揃える。

gird / justify center / align center

  • 一番最初にヒットした中央揃えの方法

coryrylan.com

section {
  display: grid;
  justify-content: center;
  align-content: center;
}

f:id:kei_s_lifehack:20201010022328p:plain

  • 縦方向には中央にならない
  • align-items でもダメだった

100vh / place-items center center

css-tricks.com

f:id:kei_s_lifehack:20201010041335p:plain

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}
  • これは成功した。
  • grid で、100vh, place-items: center center を使う方法
  • これなら care-your-eyes も効く!!!

Microsoft Edge, which supports CSS grid, doesn’t support place-items yet. You’d have to use align-items: center; and justify-content: center; instead.

  • Edge ブラウザでは grid はサポートするけど place-items はまだ。
  • そっちでは align-items: center; and justify-content: center; を使って

らしい。その 2つは さっき動かなかったが、Chrome だからか? Chrome では逆に align center が対応してないのか?

css のリセットをしていないからか?要検証

とりあえず自分がメインで使うアプリだから Edge の未対応は ヨイカとする


top left 50%/ translate -50% -50%

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

f:id:kei_s_lifehack:20201010035600p:plain

  • position fixed で top, left, を 50% にした
  • これでシンプルに 真ん中 (よりの右下)にいく
  • care your eyes の強制ダークモードを使うと聞かない
transform: translate(-50%, -50%);

f:id:kei_s_lifehack:20201010040147p:plain

  • translate -50%, -50%, をつけると完全に中央に行く。
  • さっきのを幅と高さの半分の分だけ マイナス座標に 動かせば中央にそろう
  • care your eyes があると上に吹っ飛んでいくのがネック

rirekisho.yagish.jp

  • ヤギッシュなどでは上に吹っ飛んでいかないからこれもそうしたい
  • なので top left 50%, translate -50% -50%, の方法は今回は不採用

react-hooks で ビジネス文書作成アプリを作る

理由は README

github.com

branch

仕事のスキルに活かすため、master 一本でやらずに feature ブランチを作る

dev.to

  • feature/integrate-swagger
  • feature/JIRA-1234
  • feature/JIRA-1234_support-dark-theme
  • こうやってつけるらしい
git checkout -b feature/centerize-all
Switched to a new branch 'feature/centerize-all'  
git branch
* feature/centerize-all 
master
  • これで作成
 * [new branch]      head -> feature/centerize-all
  • head に送って PR できるのを確認(この後めっちゃ revert した)

中央揃え

kei-s-lifehack.hatenablog.com

  • 別の記事に分けた
  • 100vh place-items: center center で実現した

Form の作成

rangle.io

  • これを参考に作る

Wiring up the form submit handler is now trivial also:

import React, { useState } from "react";

export function NameForm(props) {
  const [name, setName] = useState("");
  
  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${name}`)
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Frirst Name:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}
  • これを変えて
import React, { useState } from 'react'
import '../styles/global.css'
export default function NameForm() {

  const [name, setName] = useState('their_name');

  const handleOnChange = (event) => {
    setName(event.target.value);
  }

  return (
    <div className='main'>
      <input 
        type="text"
        value={name}
        onChange={handleOnChange}
      />
      <div>output: お世話になっております {name} 様</div>
    </div>
  )
}

f:id:kei_s_lifehack:20201010054913p:plain

  • こうしたら、無事に useState の力で即座に setName して html に書き込む 仕組みができた
  • しかし input と output の マージンが大きい、この CSS じゃダメだ

f:id:kei_s_lifehack:20201010055713p:plain

  • まぁ、完成は見えた

deploy

  • stable/deploy-github-pages ブランチを作る
npm i gh-pages
added 509 packages from 182 contributors, removed 173 packages,
...  in 102.192s  
+ gh-pages@3.1.0 
  • gh-pages でかい

kei-s-lifehack.hatenablog.com

  • この記事の通りに deploy する

kaede0902.github.io

  • 動いた

f:id:kei_s_lifehack:20201010122214p:plain

  • JS 無効化する html escape のも react-hooks が勝手にやってくれてた
  const [theirName, setTheirName] = useState('theirName');
  const [myName, setMyName] = useState('myName');

  const handleTheirNameOnChange = (event) => {
    setTheirName(event.target.value);
  }
  const handleMyNameOnChange = (event) => {
    setMyName(event.target.value);
  }
  • thier と my で setHoge, handle on change をの関数を作った
    <div className='main'>
      <input 
        type="text"
        value={theirName}
        onChange={handleTheirNameOnChange}
      />
      <input 
        type="text"
        value={myName}
        onChange={handleMyNameOnChange}
      />
  • input 2つにそれぞれ連携させた
      <div>
        output: <br/>
        お世話になっております {theirName} 様 <br/>
        HOGE 大学の {myName} です <br/>
        以上、よろしくお願い申し上げます。
        HOGE 大学 {myName}
      </div>
  • 出力部で それぞれの state を 出した

f:id:kei_s_lifehack:20201010124937p:plain

  • 2つとも即時反映してしたに反映されるようにできた

4 input

f:id:kei_s_lifehack:20201014042650p:plain

  • 相手と自分の組織を反映させるようにした

calender input

material-ui.com

  • date picker があった!
import TextField from '@material-ui/core/TextField';
      <Box my={1}>
      <TextField
        label="面接予定時間03"
        type="datetime-local"
        value={mtgDateThree}
        onChange={ e => setMtgDateThree( e.target.value ) }
      />
      </Box>
  • いい感じになった

f:id:kei_s_lifehack:20201014051758p:plain

kaede0902.github.io

できた!!!

残りタスク

  • 面談候補日を減らしたり増やしたりできるようにする
  • 表示領域では T が出ないようにしたり、曜日が出るようにする
  • copy to clipbord のボタンを作る

目標

  • この slack のコマンドジェネレーターみたいに、さくっとコピーできるようにしたい
  • また、ビジネス提携文も選べるようにしたい

Blender で円柱と球を綺麗に合体させる

image.png

基盤となる形の 立方体、円、球、円柱、円錐、ドーナツ型、モンキーなどをオブジェクトモードで置いておいて、 そこから編集モードで作っていくというのが主ですね〜!

  • 横置きの円柱をまず作る

最初の立方体の削除

https://w.atwiki.jp/blender_tutorial/pages/8.html

最初の状態で立方体があるので削除します。 Deleteキーを押すと削除するか聞いてくるので削除します。

https://blender.stackexchange.com/questions/5574/how-to-remove-the-default-cube

Delete the cube: Starting with the unchanged default scene, select the cube (RMB click on the cube) then hit X or DELETE and RMB click the following popup. You may also repeat this step on the camera and light if you wish to start with a completely blank scene.

Screen Shot 2020-10-05 at 3.28.22.png

  • delete は効かないが、x key はきいた
  • 面と点を一つづつ消して行った
  • クリックして Delete Verticle した

Screen Shot 2020-10-05 at 4.10.31.png

  • まとめて消せる

カーソルを中心に

https://xr-hub.com/archives/17090

「Shift + S」キーで3Dカーソルを原点に合わせてください。オブジェクトは3Dカーソルの位置に生成されます。

*[オブジェクト] -> [スナップ] -> [カーソル→原点]の手順でも可能です。

Screen Shot 2020-10-05 at 3.33.03.png

  • 中心におくなんてものは出てこない
  • オブジェクトのメニューもない

https://blender.stackexchange.com/questions/53886/move-3d-cursor-back-to-center-hotkey

Use Shift + S and then "Cursor to center". Or you can use use a direct hotkey Shift+C.

  • shift + c はいけた。ちょっと縮小するけど。

Screen Shot 2020-10-05 at 3.40.59.png

円柱の作成

https://xr-hub.com/archives/17090

Shift + A」キーを押し、[メッシュ] -> [円柱]の順で選択して円柱オブジェクトを生成してください。

Screen Shot 2020-10-05 at 3.42.29.png Screen Shot 2020-10-05 at 3.43.23.png

  • 出た!!!

円柱を回転

Rotation y, z, を 90 に設定

Screen Shot 2020-10-05 at 3.46.27.png

頂点を動かす

  • modeling で動かせる
  • チェンソーの刃は shirink/fatten で作れそう

Screen Shot 2020-10-05 at 3.57.50.png

頭を作る

  • 全て消したレイヤを作って、それをペーストしたnull なレイヤに球を入れた
  • これを動かしてつけてポチタの頭にする

まとめて動かす

レイヤは右上のとこから選んで逆三角形をクリックするとそこが編集モードになる

複数選択でもこんなになるから、レイヤごと動かすしかないみたい

Screen Shot 2020-10-05 at 4.13.50.png

座標は胴体が0,0,0, m

頭を

  • x を加算すると手前
  • y : 右奥
  • z : 上に

なので

  • x: +0.15
  • y: -0.75
  • z: -1.95

でこうなる

Screen Shot 2020-10-05 at 4.23.57.png

よしよし、いぬっぽい(?)

スケール

  • y: 1.25 にスケール
  • 縦長だからね

Screen Shot 2020-10-05 at 4.27.24.png

なんかめちゃくちゃ 調整してこうなった

Screen Shot 2020-10-05 at 4.32.49.png

  • 決して ●ん●ん ではありません!!!!!!

●ん●ん って言われると傷つくから早くとってと足のレイヤを作ろう.....