ディレクトリトラバーサルとは本来、アクセスして欲しくないファイルやディレクトリの位置を、相対パス指定などでプログラムに表示させて、不正なアクセスをする攻撃手法です。

もし、閲覧されたファイルの中にIDやパスワードが含まれていた場合、システムやサービスそのものを乗っ取られてしまう可能性も考えられます。

U02-build-env

実行環境の構築

https://www.mozilla.org/en-US/firefox/download/thanks/

FireFox

Screen Shot 2020-09-07 at 4.27.40.png

https://www.virtualbox.org/wiki/Downloads

VirtualBox

Screen Shot 2020-09-07 at 4.31.46.png

Screen Shot 2020-09-07 at 4.32.05.png

fail したけど入ったからヨシ！

2020-09-07

Questions and My Answer

f:id:kei_s_lifehack:20200907003228p:plain

why

全て一覧にしようと思って

趣味・特技

自己PR

どうしてエンジニアに？

仕事の影響で IT ツール使いたくて、そのうち作りたくなった
仕事のミスで辛いことで苦しんだから人を楽にしたい。
インストール不要のWeb は最高
少子化で人が足りなくなってくる時代に少ない人数で同じ仕事を回せる Web ツールが必要
スマフォ時代。3万で6インチの大きさの快速な端末がかえて、Webで大体の作業ができる。ソフトウェアがあればなんでもできる。

友人から言われる長所

言われないが？

学生時代頑張ったこと-ガクチカ

街の電気屋で 3 年間頑張った。受付事務、サイト作成更新、
- 来店したお客さんの求めるものを提供するという本質を掴んだ
- 現場で FAX, 紙経理, 紙受付, 紙カレンダー, Excel 在庫管理, Excel 請求書
- などの非効率的なツールなど、現場の問題点、改善できない原因を学んだ

バイト内容

工事の部材などのレシート経費処理
1日の売り上げの経理処理
来客の接客対応, 商品案内, 工事予約受付処理
電話での対応, 工事予約受付処理
ゼロからの react-bootstrap での

バイト先にあればいいと思うアプリ

工事受付台帳、在庫管理アプリ、

自分を一言で

人を楽にするために働きたい

上記の説明

自分の思う社会の問題点

中小ではまだまだデジタル化できておらず、FAX や手書き紙作業、電話ベースでの仕事による情報のロスや間違いなどが多い
安いコストで web ツールに任せられるのに、無駄に人間が担う業務が多くなっている。「記憶力や手作業が早いこと＝仕事ができる」になっている面がある
とにかく新しいものを嫌う傾向にある。権力を握っている高齢の人間がテクノロジーを使うのを避けて、手書き業務からの脱却を絶対に認めない場合がある

上記の解決策

入社後、チャレンジしたいこと

2020-09-04

クリーンアーキテクチャ考察

U00

レンガ、コンクリート、木材、スチール、ガラスからできた建物とは異なり、ソフトウェアはソフトウェアで作られている。大規模なソフトウェアは小規模なソフトウェアから作られ、小規模なソフトウェアはさらに小規模のソフトウェアコンポーネントから作られている。コーディングにおける「親亀の背中に子亀を乗せて、子亀の背中に孫亀乗せて

建築によく例えられるけど崩れやすいと感じていたのはこういうことか…

アーキテクチャの一部であることは確かだが、四角形を全体像（アーキテクチャ）だと思ってしまうと、本当の全体像やアーキテクチャを見失ってしまう。ソフトウェアアーキテクチャは見えない。可視化されたものは選択肢であり、最初から与えられるものではない。

たしかに図形説明に当てはめて理解しようとすると違和感があるのはそういう事か

システム開発で典型的に直面する変更は、コストが高く、変更が難しく、数日や数週間で終わらないプロジェクト型の変更であってはいけない。

変更可能性、これを高くするため、簡単に変更できるように React や Next は設計されているのを感じる

我々が興味を持っているのは、最もクリーンな道のりである。ソフトウェアがソフト（柔軟）であることを認め、それをシステムで最優先すべき財産として保持することを目指している。不完全な知識で運用する可能性があることも認めながら、そうするのが人間であり、人間はそれが得意であることを理解している。

Clean はどういう意味だろう。Soft はわかる。柔軟さを認め、柔軟さを価値として、不完全な人間が運用するのも想定しているソフトウェアだが…

2020-08-30

CMS サービスを試してみる fetch API を使う

why

f:id:kei_s_lifehack:20200922014247p:plain

この React で作った電気屋のサイトの季節のセール情報を、パートの人が vi して build deploy しなくても簡単に web から編集できるようにする必要がある
メディア系の業務委託の仕事で、WordPress CMS を使えるようになることを求められている。
簡易的な DB をアプリに組み込んで、気軽にいろいろ「システム」をリリースできるようになりたい
Twitter で contentFul や microCMS などが流行っているから触ってみたい

CMS とは？

https://www.stackbit.com/blog/what-is-a-headless-cms/

最近ヘッドレス CMS が流行っている。WordPress CMS との対比か？

headless cms とは？

疎結合なデータだけおけるシステム

従来の coupled なWPのようなCMSと異なる

Netlify CMS,Jecky II, などがあるらしい

contentFulはAPI Driven?

Gatsby などの static generation の FW はDBにアクセスする能力がないからデータを置くところに CMS を使う

NextはDockerでMySQL使えるよな？？

JAM Stack , フロントと相性がいいらしい、MVC とは区分が違う

micro CMS を始めてみる

microcms.io

f:id:kei_s_lifehack:20200922015542p:plain

API を作成するらしい。
それを json で Next.js などで持ってくる...?
サービス名は test
サービス id は test-kaede0902 にする

f:id:kei_s_lifehack:20200922020032p:plain

こうやって API が作成できるらしい

f:id:kei_s_lifehack:20200922020115p:plain

リストかオブジェクトから選べる。
今回はリストにする

f:id:kei_s_lifehack:20200922020350p:plain

MySQL みたいに内容をいれる形を作る
画像も入れられる？

f:id:kei_s_lifehack:20200922020939p:plain

とりあえずタイトルと本文だけ入れて一つ投稿してみた
API プレビューから入手して

curl "https://test-kaede0902.microcms.io/api/v1/test-entry/hogehoge" -H "X-API-KEY: hoge-hoge-hoge-hoge"
{"id":"zc4_odmo7","createdAt":"2020-09-21T17:10:12.126Z","updatedAt":"2020-09-21T17:10:12.126Z","publishedAt":"2020-09-21T17:10:12.126Z","title":"API テスト","desc":"これは API  テストです"

確かに作ったものが curl から入手できた
Chrome に打ち込んでもダメだった
これをどう React から読み取るのかは簡単にできなそうだから、記事を調べてじっっくりやる。

f:id:kei_s_lifehack:20200922191233p:plain

投稿が一つしかないからこうなるのかな？

CRA Fetch

とりあえず CRA でローカルに作成

create-react-app get-micro-cms-data

そもそも fetch API の理解が必要だ

developer.mozilla.org

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

基本的な fetch リクエストは、本当に簡単に設定できます。以下のコードを見てください。

これはネットワーク越しに JSON ファイルを取得してコンソールに出力するスクリプトです。 fetch() の最も簡単な使い方は 1 つの引数 — fetch で取得したいリソースへのパス — のみをとり、レスポンス (Response オブジェクト) を含む promise を返します。

これはただの HTTP レスポンスであり、実際の JSON ではありません。 response オブジェクトから JSON を抽出するには、 json() メソッドを使用する必要があります。(Body のミックスインとして定義されていて、これは Request と Response の両オブジェクトに実装されています。)

これに microCMS で GET のところで出た url を入れやって見る
X-API つきの URL 渡すと 404 が帰ってくる
しかし X-API なしでやると....

{message: "X-API-KEY is invalid."}
message: "X-API-KEY is invalid."
__proto__: Object

になる

Promise がわかってないので死亡

  const getData = () => {
    fetch(
      "https://test-kaede0902.microcms.io/api/v1/test-entry/your-id", 
      {X-API-KEY: 'your-api-key'}
    )
      .then(response => response.json())
      .then(data => console.log(data));
  }

Line 7:9: Parsing error: Unexpected token, expected ","

ダメだった

これで済むほど甘くないんですね....

公式のこのコードをヒントにする

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

fetch ( 'URL', 
), 

*  header  が足りていなかったらしい
* GET だと body はいらない？

2020-08-30

「個人開発者クソアプリ発表会」の LT を視聴して得た物

what is this

connpass.com

【第1回】個人開発者クソアプリ発表会を公開しました！ https://t.co/LLkCR0fjgK #個人開発者
— たなかK@Ziz (@tanaka_____k) August 21, 2020

たなかk @tanaka_____k さんが開催した Zoom オンライン LT
個人開発者の作ったクソ？なアプリと言うタイトル

僕はこんな感じで発表します。（時間あまったら複数アプリ発表します）

このアプリのココがダメ！

本当はこうなるはずだった・・・

改善案

大変だったところ

今後の展望

との説明だった

commentscreen.com

を使ってニコニコ動画のようにアプリ内でのコメントが Zoom の画面にリアルタイムに流れた(絵文字が流れると重くなる不具合有り)

result (conclusion)

多くの発表者を見て萎えていたモチベが非常に上がった。
素の Canvas API を活用しているものが多くてまた使う気になった
「今では 10 pv / day で毎月 2k の赤字だけで、案件の面接でのポートフォリオには役立ってる」話がリアルで参考になった。
何よりじゃけぇさんの最新技術を一年かけて使っていき、案件獲得の際の切り札に持っていくという活かし方が凄かった。私もNext.js でやる！！！！！！

why

たなかk さんは少しリプライしたこともあったし React Native のツイートをよく見ていた
個人開発のプロダクトに限ったLTに興味をひかれたし、何よりリモートで申し込み不要で Zoom 視聴できるからシャワー浴びてたけど気軽に開けた

LT review

イイノテン-Pornder

そういえばOGP対応してみたhttps://t.co/CXmVREWTbL
— イイノテン (@ntenten_Q) August 27, 2020

この LT の途中から視聴を始めた
Tinder x Pornhub
Swipe を react-swipy と言うライブラリを使って実装して, 私も使う react-router-dom でページ実装してるのが身近に？感じられて引き込まれた
PornHub でよく見るせいへき単語の訳し方に苦戦してるのが笑えた

八雲ハル-さうんどろっぷ

twitter.com

以前 FF だった。「独習JS」を送っていただいた。
Vtuber にハマっていたのを知っている。

f:id:kei_s_lifehack:20200830003858p:plain

huequica.xyz

自作サイト、ブログも作られている

works.huequica.xyz

Vtuber 御伽原さんのいい声の暴言をボタンで再生できるアプリ
背景で可愛い御伽原さんが動いてるのがすごい楽しい(ループ再生らしい)
ボタンを押して結果が帰ってくると言う、この中では一番シンプルだが楽しいアプリで、実際声がすごい良いし、面白かった
シンプルなボタンしか入力がない設計でもここまで面白く作れるのにモチベが上がった

DE_TEIU-ブロック崩せない

とある仕様のせいで難易度が高いブロック崩しを作りました。PCかスマホのブラウザ上で遊べます。

ブロック崩せないhttps://t.co/MByNHRzSYn pic.twitter.com/NuVJ9wG1UI
— DE-TEIU (@de_teiu_tkg) August 29, 2020

sugoi-unbroken.netlify.app

たまがブロックを避ける斬新な発想力
あの面白かったゲーミング画像ジェネレータ作者
ポートフォリオの作品集のカードがすごく充実しててカッコ良かった
私も前あそんでた Canvas API もしっかり学んで使えばここまで想像的に作れるのに驚愕した。

じゃけぇ.tsx@UdemyでReactコース作成-読み方アンケート

profile

freelance-jak.com

25で独立されているフリーランス。
あかいさんもそうだが、やはりフリーで食っていくにはこれくらいの完成度が高い個人サイトが必要なんだな...
この LT でのコメントスクリーンの採用は彼のアイデア
よく react 系の tips を呟いてくれるのでフォローしている

product-読み方アンケート

yomikata-enquete.com

現場で使える最新技術 Nuxt を使っての開発
一時期バズってみんな使っていたのを知っている
場違いなほど圧倒的なクオリティ。
1年かけてしまったのが彼曰く「クソ」らしい（つまり簡単に作れる既存技術ではなくて、学ぶ技術を優先して始めた？
ユニークアクセスが Tweet 当初からすごく落ちて、今では 10 PV / Day になっているのが辛いらしい
これだけ UI 美しく機能としても完璧なサービスでもそんなに落ち込む
でもこれが技術習得に大きく役立ち、フリーランスで仕事を得ていく際のポートフォリオとして強いカードになったと言う、収益や PV 以外の面での「バリュー」があったのが印象的だった

feeling-感想

#個人開発者タグが LT のタグとしてわかり辛く、外から見ると LT のコメントではなく個人開発する際のツイートに見えてしまうのが少し惜しいと思う
あかいさんのサイトでも思ったが、Canvasの可能性の高さを実感できて HTML Canvas API を再び学んで、今度は記事でしっかりと使い方を残していきたい

ver1000000.com

React 使ってる人多かった
コメントスクリーンのアプリで流せるの面白かった
ただ、記事にするときに遡れなかったのが残念。ドキュメントとして公開して欲しかった
ただ全員 Twitter user だから、検索で内容をおさらいできたのが最高

conclusion

多くの発表者を見て萎えていたモチベが非常に上がった。
素の Canvas API を活用しているものが多くてまた使う気になった
「今では 10 pv / day で毎月 2k の赤字だけで、案件の面接でのポートフォリオには役立ってる」話がリアルで参考になった。
何よりじゃけぇさんの最新技術を一年かけて使っていき、案件獲得の際の切り札に持っていくという活かし方が凄かった。私もNext.js でやる！！！！！！

2020-08-28

個人のホームページにいのちの輝きを実装した

why

みなさんのいのちは輝いていますか？

大阪万博ではいのちは輝いています

www3.nhk.or.jp

https://kaede0902.github.io/profile/

f:id:kei_s_lifehack:20200828024929p:plain

私も流行りに乗って自分のサイトにいのちの輝きを一人実装しました！

この記事を参考にして css で実装しました。

qiita.com

import React from 'react'
import '../css/Inochi.css'

const divStyle = {
  width: '1000px',
  height: '300px',
}

export default function Inochi() {
  return (
    <>
    <div class="inochi" 
      style={divStyle}>ｺﾛｼﾃ</div>
    </>
  )
}

Inochi コンポーネントを作って Inochi.css を適用する

.inochi {
  background: radial-gradient(
    circle at 10.0% 10.0%,
    red 10%,
    transparent 0%
  );
}

x 10%, y 10%,
red で半径10%

f:id:kei_s_lifehack:20200828023108p:plain

元からmargin 当ててるのでずれてるけど、

10% 10% のところにまるができてる！！css だけで作れるんだ！！

.inochi {
  background: 
    radial-gradient(
      circle at 10.0% 10.0%,
      dodgerblue 2.3%,
      transparent 0%
    ),
    radial-gradient(
      circle at 11.3% 16.8%,
      white 5%,
      transparent 0%
    ),
    radial-gradient(
      circle at 10.3% 16.5%,
      red 13%,
      transparent 0%
    );
}

これを上から順番に青、白、黒で調整して書いた。

まずひとりめ

f:id:kei_s_lifehack:20200828024929p:plain

仲間をたくさん増やして行こうね♡

まとめ

css で

.inochi {
  background: 
    radial-gradient(
      circle at 10.0% 10.0%,
      dodgerblue 2.3%,
      transparent 0%
    ),
    radial-gradient(
      circle at 11.3% 16.8%,
      white 5%,
      transparent 0%
    );

を連結していけば各色の円を重ねて Canvas API のように簡単に図を自分のサイトに取り入れられる。

かなり簡単に遊び心を Web サイトに取り入れられることがわかった

今後の課題

一応現時点でもスマフォでも見れるが、明らかに大きいので Mediaquery を使って調整する必要がある
一匹ではいのちの輝きが少ないのでもっとたくさん作る
できればお目目の dodger blue の div を独立させて動かしたい。

本当に可愛い.......

f:id:kei_s_lifehack:20200828030438p:plain

2020-08-28

個人複数ページの実装に React Router で route.js から map していたコードを見て Next への移行を検討

Set react-router-dom to gh-pages site

why

作っている私自身の HP に複数ページが欲しい

前回作った電気屋のサイトでは

index - App (HOME) - Works
                   - Shops
                   - News
                   .....

という構成だった。

今回は index から直接分岐して

import React ,{ Suspense }from 'react';
import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom';
import routes from './routes';

function App() {

let loading = () => <div>Loading...</div>

  return (
    <Container className=''>
      <Header />
      <Row className='leftside'>
        <Router>
        <Suspense fallback={loading}>
        <Switch>
         {
          routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              name={route.name}
              render={props => 
                (<route.component {...props} />)}
            />
          ))
         }
         <Route render={() => <h1>not found!.</h1>} />
        </Switch>
        </Suspense>
        </Router>
      </Row>
      <Footer />
    </Container>
  );
}
export default App;

この App.js と

import React from 'react';

const Home = React.lazy( () => 
  import('./containers/Home')
);
const Works = React.lazy( () => 
  import('./containers/Works')
);
const News = React.lazy( () => 
  import('./containers/News')
);


const Parts = React.lazy( () => 
  import('./containers/Parts')
);
const Airs = React.lazy( () => 
  import('./containers/Airs')
);
const Links = React.lazy( () => 
  import('./containers/Links')
);

const routes = [
  {path: '/', exact: true, name: 'Home', 
    component: Home},
  {path: '/works', exact: true, name: 'Works', 
    component: Works},
  {path: '/shops', exact: true, name: 'Shops', 
    component: Home},
  {path: '/news', exact: true, name: 'NewInfo', 
    component: News},

  {path: '/parts', exact: true, name: 'Parts', 
    component: Parts},
  {path: '/airs', exact: true, name: 'Airs', 
    component: Airs},
  {path: '/links', exact: true, name: 'Links', 
    component: Links},

]
export default routes;

routes.js を...

は？こんなめんどくさいことやってたの私

Next.js とかなら pages/ に書けば直接読み込んでくれるし、

よくあるポートフォリオは実際は 1 page でリンクは id のとこに飛ばしてるだけだし

今回はやめた！！！！！

ただNext.jsの勉強ログを見ると

f:id:kei_s_lifehack:20200830184332j:plain

Next で作ればとても簡単

Nextでやれるかやってみるか？調べてみる