2020-09-29

Docker で Ubuntu bash の特定のコンテナを使い続ける

why

docker-comopse が業務で必要になったが、Docker が Apache と混じるくらい理解が浅いので、基礎の勉強の必要性を感じた
ちょうど Twitter で米国データサイエンティストのかめさんがセールしてた人気の udemy 講座を買っていたのでやった

twitter.com

この人

www.udemy.com

このコース
メニューにはdocker-compose まではない。
これを

結果

Docker コンテナで Ubuntu Bash を動かす
テキストファイルを保存
Docker コンテナから exit
さっきのコンテナに入ってさっき保存したテキストファイルを見る

ここまでできるようになった

Ubuntu を使う

f:id:kei_s_lifehack:20200929042842p:plain

docker run hello-world
docker run -it ubuntu bash

hello-world イメージは別で扱ったので省略
今回は ubuntu bash を動かす。

上記の2つの違いは

-it が bash を起動するのに必要な「おまじない」であり
bash がコンテナ起動時に必要なプログラムになるらしい
bash は Kernel という OS の核の囲い、ユーザーの入力を受け付けるところになる
-iは標準入力を開き続ける
-tは疑似ttyの割り当てで、
お手元の環境で、docker内入力ができるようにする呪文

だそう。実際に試してみる。まずは docker login

id はこのサービスでは kaedeio だった. kaede0902 に統一したい

docker run -it ubuntu bash
root@fbb35a34304c:/#

Ubuntu OS / bash Shell が動いた！やった！

毎回違うコンテナを動かしているのでファイルが保存できない

ただ、毎回これで作成しているとUbuntu 内部のファイルは毎回消える

root@fbb35a34304c:/# ls
bin  boot  dev  etc  home  lib  lib32  lib64  libx32  media  
mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var
root@fbb35a34304c:/# mkdir new_dir
root@fbb35a34304c:/# ls
bin  boot  dev  etc  home  lib  lib32  lib64  libx32  media  
mnt  new_dir  opt  proc  root  run  sbin  srv  sys  tmp  usr  var
root@fbb35a34304c:/# exit
exit
docker run -it ubuntu bash
root@10075622af77:/# ls
bin  boot  dev  etc  home  lib  lib32  lib64  libx32  media  
mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var

root@ の後の id からして別の bash が開いているようだ。

この id はコンテナの id なので、コンテナが毎回別のものになってる

つまり毎回 docker run -it ubuntu bash で Ubuntu Bash を開く方法ではファイルシステムの中にファイルを保存しておくことはできない！

hacknote.jp

このやり方だとイメージがスナップショット、一時的なもの？になっているから exit した時に消えてしまうらしい。

ワーキングスペースと4つのレイヤーについて

どうやら Docker を使う場合、この二種類のワーキングスペースがある。

Host (MBP/bash) にいる場合
Container (Ubuntu/bash) にいる場合

今回の講座での Ubuntu は4つの Layer Images を pull して作られるが、

その 4つのレイヤーの一番上に新しい保存可能な Layer が作成される。

これがコンテナ id になるようだ。

ここがファイルをおくところと解釈する。

1 つの Dockerfile からコンテナは複数作ることができるが、4 つのレイヤのうち、異なるのは一番上の一つだけ ( id 部分？ ) で残りの 3 つの部分は共通となる

この仕組みの利点としては、新しくコンテナB を、同じ Docker イメージから作成した時、下 3 つのイメージレイヤーを再利用できるので、ストレージを圧迫しないで済むらしい

Docker イメージを再起動する

Docker コンテナ id 10075622af77 に aaa.txt を作成して exit

root@10075622af77:/# touch aaa.txt
root@10075622af77:/# exit
exit

id 10075622af77 の Ubuntu コンテナに aaa.txt を touch で作成した

コンテナ 10075622af77 から exit してホストである MBP のシェルに戻る exit したコンテナをプロセス履歴から確認

docker ps -a                                                                                                      
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS                          PORTS
                      NAMES                                                                                                            
10075622af77        ubuntu                           "bash"                   23 hours ago        Exited (0) About a minute ago        
                      elegant_euler

docker ps -a で終了したプロセスをリストアップするさっき終了したこれが確認できた

id 10075622af77
image ubuntu
command bash
exited about a min ago

exit したコンテナを id 指定で再起動

docker restart 10075622af77
10075622af77
docker restart elegant_euler
elegant_euler

しない

docker ps
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS              PORTS                    NAMES
10075622af77        ubuntu                           "bash"                   23 hours ago        Up 16 seconds                                elegant_euler
99529632c371        kaede0902/docker-nextjs:latest   "docker-entrypoint.s…"   4 days ago          Up 4 days           0.0.0.0:3333->3000/tcp   inspiring_gagarin

アクティブなプロセスを出してみると、status が up 16s になっているこれはすでに動いてるから入れないってことだろうか？

プロセスを殺す

docker kill 10075622af77
10075622af77
docker ps
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS              PORTS                    NAMES
99529632c371        kaede0902/docker-nextjs:latest   "docker-entrypoint.s…"   4 days ago          Up 4 days           0.0.0.0:3333->3000/tcp   inspiring_gagarin

id を指定してプロセスを殺した

再び再起動

無事居なくなっているここで docker restart 10075622af77 で...

docker restart 10075622af77
10075622af77

これだけでは入れなかった

docker exec -it 10075622af77 bash
root@10075622af77:/# ls
aaa.txt  bin  boot  dev  etc  home  lib  lib32  lib64  libx32  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var

restart した上で exec する必要があった

違うプロセスが走っています docker start -a で attache MySQLDなどでは attache と exec では結果が違います

しかし、正確には同じコンテナを動かせていても違うプロセスが動いているらしい。これは後で調べる

まとめ

docker run -it ubuntu bash
root@fbb35a34304c:/#

これで ubuntu bash のコンテナを作成して
同時に起動して

root@fbb35a34304c:/# exit
exit

これで exit して

docker ps -a
CONTAINER ID        IMAGE                            COMMAND                  CREATED             STATUS                          PORTS
                      NAMES
10075622af77        ubuntu                           "bash"                   23 hours ago        Exited (0) About a minute ago
                      elegant_euler

プロセスを確認して

docker kill 10075622af77
10075622af77

殺したくなったら殺して

docker restart 10075622af77
10075622af77
docker exec -it 10075622af77 bash
root@10075622af77:/# ls
aaa.txt  bin  boot  dev  etc  home  lib  lib32  lib64  libx32  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var

restart してコンテナを動かして、 exec して入って作業する
これで Docker で Ubuntu を立ち上げて作業できるようになった！

2020-09-26

Blender をやる

f:id:kei_s_lifehack:20200926174116p:plain

why

EVA が Blender を採用したと聞いて
GANTZ やチェンソーマン cyberpunk 2077 をみて

install

f:id:kei_s_lifehack:20200926174251p:plain

450MB くらいしか使わなかった。
とりあえずポチタでも作ってみたい

manual

docs.blender.org

マニュアルを読む

window system

docs.blender.org

Window System Introduction After starting Blender and closing the Splash Screen the Blender window should look something similar to the image below; as Blender’s user interface is consistent across all platforms.

f:id:kei_s_lifehack:20200926182746p:plain

Blender’s default Screen Layout. Topbar (blue), Areas (green) and Status Bar (red).

青のタブっぽいところが Topbar
緑の実際のステージとレイヤ、座標があるところが Areas
下の、VScode だと markdown utf-8 とか書いてあるところが Status Bar

Customization Blender also makes heavy use of keyboard shortcuts to speed up work. These can also be customized in the Keymap Editor.

全部マウスでやらなくても、ショートカットが充実してるし、カスタムもできる

Workspace

Blender’s default startup shows the “Layout” workspace in the main area. This workspace is a general workspace to preview your scene and objects and contains the following Editors:

3D Viewport on top left.

Outliner on top right.

Properties on bottom right.

Timeline on bottom left.

Blender のデフォルトでは Layout のワークスペースがメインエリアになる
このワークスペースが自分の scene, objects, などの一般的な場所になる？
上記の英語の通りに 3D Viewport, Outliner, Properties, Timeline, という名前で設定されている

Blender also has several other workspaces added by default:

Blender は他のワークスペースもデフォルトでついている

Modeling For modification of geometry by modeling tools.

Sculpting For modification of meshes by sculpting tools.

UV Editing Mapping of image texture coordinates to 3D surfaces.

Texture Paint Tools for coloring image textures in the 3D Viewport.

Shading Tools for specifying material properties for rendering.

Animation Tools for making properties of objects dependent on time.

Rendering For viewing and analyzing rendering results.

Compositing Combining and post-processing of images and rendering information.

Scripting Programming workspace for writing script

Modeling が 3D モデル複雑なのを作るやつ
Scripting がコード書くとこかな

UI

Areas

docs.blender.org

The Blender window is divided up into a number of rectangles called Areas.

Blender の窓は Areas と呼ばれる窓に分かれている

f:id:kei_s_lifehack:20200926185358p:plain

簡単に Resize できる

f:id:kei_s_lifehack:20200926185421p:plain

分割することもできる

f:id:kei_s_lifehack:20200926185448p:plain

join 、合成することもできる？？？

f:id:kei_s_lifehack:20200926185534p:plain

location は右のタブになってて引っ込められる

実際の操作

飽きたので触ってみる

Move Button

f:id:kei_s_lifehack:20200926190153p:plain

このボタンをオンにしていると移動モードになって、赤緑青の各方向に今あるオブジェクトを動かすことができる

Rotate Button

f:id:kei_s_lifehack:20200926185957p:plain

このボタンをオンにすると回転モードになって、今あるオブジェクトを回せる。

Scale Button

f:id:kei_s_lifehack:20200926190300p:plain

赤、緑、青、の矢印にカーソルを合わせてドラッグして拡大ができる

Transition Button

f:id:kei_s_lifehack:20200926190532p:plain

オブジェクトの表示されているこれらをマウスで必要に応じて選択することによって

円周
内部の矢印
外部の矢印

選択したものによってモードをボタンで切り替えなくても

回転
拡大
移動

ができる便利なモード。

f:id:kei_s_lifehack:20200926191601p:plain

オブジェクトのプロパティを右下から直接打ち込んでも変更できた

Modeling

f:id:kei_s_lifehack:20200926203739p:plain

適当に引っ張ったらとげがたくさんできた！←

方針

docs.blender.org

f:id:kei_s_lifehack:20200926210022p:plain

Blender はいろんなオブジェクトを合体させるわけではなくて
立方体、円、球、円柱、円錐、ドーナツ型、などの基礎的なオブジェクトを拡張してものを作っていくらしい。ベーシックな楕円から

f:id:kei_s_lifehack:20200926203832p:plain

後日ポチタを作ってみよう。円柱から。

2020-09-24

VScode を久しぶりに使うので設定をまとめておく

why

TS を使う必要性が出てきた

共通設定

    "editor.fontSize": 16
    "files.autoSave": "afterDelay"

文字が12では小さいから16にする
最初は自動保存が有効化されていないから設定をしなければいけない

Vim からの以降

とりあえず簡易的に Vim
setting の GUI で setting.json を右上の{} をクリックした開く

qiita.com

insert jj to normal

考えてやる必要がある？
VScode ないのアプリのページにあるがコピーできない

github.com

GitHub にリポジトリがあった

{
  "vim.easymotion": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  "vim.useCtrlKeys": true,
  "vim.hlsearch": true,
  "vim.insertModeKeyBindings": [
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["<leader>", "d"],
      "after": ["d", "d"]
    },
    {
      "before": ["<C-n>"],
      "commands": [":nohl"]
    }
  ],
  "vim.leader": "<space>",
  "vim.handleKeys": {
    "<C-a>": false,
    "<C-f>": false
  }
}

これにさっきの "editor.fontSize": 16

を追加

2020-09-24

朽ちる技術とその必要性

僕らが食べるために技術は朽ちていく

f:id:kei_s_lifehack:20200924034940p:plain

www.orangeitems.com

衝撃的なタイトルだったから読んでみた
引用しながら感想や自分の理解を添えて書くスタイルを取る。

今もってC++を未だに利用しているプログラマーもたくさんいるとは思いますが、今はPython、JavaScript、C#などの高級言語も盛んです。一方でVisual Basicが相当利用されていましたが、今はMicrosoft OfficeのVBAぐらいでしか仕事では登場しないんじゃないか、と思います

プログラミング言語は大きく変遷している、なるほど

システムを導入したときに、設計はそのときの手堅い構成を行うのが普通です。すごく最新のことを導入すると、未知の課題で大変な目に遭うかもしれないので、ここ二年くらいで最も実績のある技術

2 年で最も実績がある技術、React, Next, もそうなんだろう

ただ5年も経つと入れ替えの話が出始めます。これまではそのソフトウェアを入れていたハードウェアの保守期限が迫ってくるから、でした。

ハードウェアを入れ替えるなら、一緒に上のソフトウェアも新しくするかーと。

でもクラウドの時代で、ハードウェア保守の話が切り離されました。動かしたければずっと動いてくれるのがクラウドです

今まではハードウェア依存で 5年でソフトウェアを更新していたんだ

でもクラウドの時代で、ハードウェア保守の話が切り離されました。動かしたければずっと動いてくれるのがクラウドです（運用事業者が事業終了しなければ・・）。

では、最近はどのタイミングでシステムの入れ替えを行うのでしょう。

やっぱり、保守です。保守は保守でも、ソフトウェア保守です。構成していたソフトウェアが更新されなくなる。新しいセキュリティーホールが見つかっても対処されない。保守料が年々上がって、入れ替えた方が安くなる。などいろいろ。

この業界、上手くできてるなと思うのが、ソフトウェアが朽ちるのです。

クラウド前提の今では

構成ソフトウェア ( npm ライブラリや AWS や Wordpress などのバックエンドサービスかな？) がセキュリティホールの発見と未対応( ちょうど最近 GitHub に node-fetch 2.6.0 を怒られているな)
値段の上昇 (前まではオラクルやオンプレミスが多かったのが安いから AWS に入れ替えられている？)

でソフトウェアが「朽ちる」らしい

この、朽ちていく感じ、を錬成するために、業界挙げて、保守理論、サポート理論を作り上げて来たんだなあって、20数年業界にいて強く思います。

単に業界の僕らが食べていくため、もあるし、化石のような技術につきあってられんのよ、と。それにお付き合いしてしまたら、他の仕事に移れなくなるでしょ？って。

技術者の食い扶持の確保と技術者のスキル更新のために、このライフサイクルは設計されている

パブリッククラウドの世界だと、最近は、データベースなどが特にそうですが、勝手にミドルウェアのバージョンが運営側でどんどん上がっていく、と言う方式も一般化しています。それで不具合起こるなら、アプリケーションの方で適応してね、と。データベースが勝手に新しくなるから、アプリケーションの保守をサボるとアプリケーションが朽ちるよ、って。

Public なクラウドではバージョンが上がっていていくからアプリケーションの保守が必要になる
これは上記のライフサイクルのためだったのか、合理的だ...

技術者はやっぱり未来に向かってモチベーションがあるのであって、過去に向かって行くような仕事は苦痛でしかない。だから、この保守理論、サポート理論は大切にしなきゃいけない

過去に向かって... ホームページビルダーで作られたサイトや COBOL, VBA のメンテは確かに苦痛だ...
先代の技術者が作り上げてくれたこのライフサイクルは大切にしなければいけない、ライフサイクル、寿命を決めて、更新できるソフトウェアを作らなければいけないんだな
母は「家電は10年で壊れるように作られてるなんてセコイわね！電機メーカーは悪質だ！」とよく語っていたが、今になって思うと「10年で壊れるように敢えて設計されている」というのが事実だとしても、それはより便利な家電を未来に作れるようにするための極めて「良いこと」だと理解できた。決して「悪徳」などではなくて。

以上、感想。

2020-09-23

なぜ Excel がダメか

why

よくExcelがクソだという意見は目にするし、私もExcelに殺意を覚える。まとめておく場所を作ろうと思った

Twitter で見た意見

Excelでも郵送でも、たいして作業効率変わらない気もする。絶対良くわからん書き方されたxmlファイル届くよ。故意であるかどうかに関わらず、ユーザがフォーマットを変更可能な形式はよろしくないし、ウイルス的なマクロを仕込まれるリスクだって発生する。Googleフォームで受け付けた方がマシでは。
— Azami@Alexander鯖 (@Azami_Alexander) September 22, 2020

ユーザーがフォーマット変えられるからダメという意見

Excelの良いところはみんながそれを使っている事で、Excelの悪いところはみんながそれを使っている事だよ
— ひさ (@hisagrmf) September 28, 2020

みんなが使ってるから作業環境として採用できるし、みんなが使っているからクソでも変更できないから

Excelの1シートに複数貼り付けた画像をおおおおおおおお形もバラバラなのおおおおおおおおおおなるはやで実装してとかあああああああ言うんじゃねええええクソがアアアアアあああああああああしねえええええええええええええええ！！！！！！！！！！！！！！！！！
— 創造神(ᐧ⏖ᐧ) (@FKML_key) September 28, 2020

バラバラに画像を配置して送ってくる迷惑な人がいる

これは私も体験した。

自分で考えて思いつくデメリット

印刷時にレイアウトが崩れる

Google Sheet の方が全員で編集できて年13k 払わなくて済む

ローカルにしかデータを置けないのは非効率すぎる、勤務してる街の電気屋でパソコンの前に出退勤データ入力のためだけの行列ができるのは明らかに遅すぎる。
ベンチャーはみんな Google Sheet 使ってるし余程の企業秘密以外全て Google Sheet で編集 URL メール送信してスマフォで入力させろ
Excel の方が高機能だとしても大したことやってないなら Google Sheet で全部できるだろ、無駄な年額 13k の課金を辞めろ

データが大きい

多少の文字と画像が入っているだけのに xlsx で作られてるから開くのに5min とかかかる。これにはその現場の PC がクソスペックなのも大きな原因だが...

テキストデータ入れるのにわざわざExcelファイル作るな、重すぎる VSCode 開いて MarkDown 使え

代替案

freee などの web 経理ソフトを使う
Markdown でローカル管理
Spread Sheet で web 管理
Notion でフォルダごと web 管理

2020-09-22

CSS やることリスト

why

kei-s-lifehack.hatenablog.com

これを作っていて全然CSSをrelative にかけなくてやばいと感じた

todos

reset css

    /**
     * Reset CSS
     */
    *,
    ::after,
    ::before {
      box-sizing: border-box;
    }

    html,
    body {
      border: 3px #000 black;
      margin: 0;
      padding: 0;
    }

ブラウザの diff 揃え、取り除くためのリセット CSS

position

developer.mozilla.org

position を覚える、手で試す

とにかく MDN を読む！！！理解を記事にここに描く！！

2020-09-20

いのちの輝きくんをCSSでdivごとにパーツを分けて書いてdeployした

expo2025, css art, CSSアート, 命の輝き, gh-pages,

result

https://kaede0902.github.io/expo2025/

f:id:kei_s_lifehack:20201003021245p:plain

スマフォ版は綺麗にできた

f:id:kei_s_lifehack:20200921204719p:plain

PC 版が吹っ飛んだ....
PC 版とレイアウトが統一できな買った
CSS の基本プロパティを学習する必要性を強く感じた

why-なぜ作ったか

www.expo2025.or.jp

Twitter で話題だったこれを回すやつを作ってみたいと思っていた
CRA と gh-pages の単一ページ公開の練習にちょうど良かった
Profile に載せて遊んだ時はただ div の width , height を大きめにとった後に background に色を追加して動かしただけだから、今回はdiv 自体を変形したい
できればリンクを触れるようにしたい

create react app

kei-s-lifehack.hatenablog.com

ここでやったように、CRA と gh-pages で大枠を作る

npx create-react-app expo2025

✨  Done in 9.06s. 
                                                       
Success! Created expo2025 at /Users/kaede/code/expo2025
Inside that directory, you can run several commands:

cd expo2025/
README.md  node_modules  package.json  public src yarn.lock

CRA で expo2025 が作成できた
GitHub の同名リポジトリは既に作成してある

gh-pages

npm i gh-pages --save-dev

+ gh-pages@3.1.0
added 503 packages from 182 contributors, removed 169 packages, 
updated 1379 packages and audited 1954 packages in 130.269s

gh-pages@3.1.0 がこのプロジェクトに入った。
ついでに CRA のいろいろな packages が整理された

package.json を開いて追記

  "homepage": "http://kaede0902.github.io/expo2025",

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

homepage の欄を新しく作成し、公開することになる URL を記載
scripts に predeploy, deploy のコマンドを追記

push to GitHub

git init
Initialized empty Git repository in /Users/kaede/code/expo2025/.git/

git remote add origin git@github.com:kaede0902/expo2025.git

この後 master に push する必要はなかった。 master から deploy するわけではないので。

 npm run deploy                                                                                        [18/467]
                                                                                                                                       
> expo2025@0.1.0 predeploy /Users/kaede/code/expo2025                                                                                  
> npm run build                                                                                                                        
                                                                                                                                       
                                                                                                                                       
> expo2025@0.1.0 build /Users/kaede/code/expo2025                                                                                      
> react-scripts build                                                                                                                  
                                                                                                                                       
Creating an optimized production build...                                                                                              
Compiled successfully.                                                                                                                 
                                                                                                                                       
File sizes after gzip:                                                                                                                 
                                                                                                                                       
  39.38 KB  build/static/js/2.0e381e2e.chunk.js                                                                                        
  775 B     build/static/js/runtime-main.cd5702c5.js                                                                                   
  644 B     build/static/js/main.b94ebb85.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css

The project was built assuming it is hosted at /expo2025/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy

> expo2025@0.1.0 deploy /Users/kaede/code/expo2025
> gh-pages -d build

Published

publish された。

kaede0902.github.io

f:id:kei_s_lifehack:20200920012643p:plain

マジで手軽！！！

css

global

Next.js Tutorial の記法に剃って、styles/global.css を作った
これを App.js で読み込む

styles/global.css

* {
  background: #000;
  color: #fff;
}

App.js

import React from 'react';
import './styles/global.css'

export default function App() {
  return (
    <div className="App">
    </div>
  );
}

Hatena, js(x) には色つけてくれないのかよ...

f:id:kei_s_lifehack:20200920042221p:plain

これで css を読み込んで黒くしてくれた

container

ここから Boostrap でよくある container を実装する。サイドカットするやつ

css-tricks.com

この記事を参考にする

* {
  background: #000;
  color: #fff;
}
.wrapper {
  background: #aaa;
  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
}

f:id:kei_s_lifehack:20200920043251p:plain

大きさが最大でも 960px
左右マージンが自動、中央揃えになった。
高さは指定しないと文字の分だけになるんだな。

参考にするクマ

codepen.io

このクマを参考にする

f:id:kei_s_lifehack:20200920044252p:plain

回転よりも蠢かせるようにするか？

head

とりあえず頭を一つ作った

styles/body.css

.head {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 100px;
}

これでこうなる。左による。absolute だからか？

f:id:kei_s_lifehack:20200920044931p:plain

absolute をなくすと...

f:id:kei_s_lifehack:20200920045038p:plain

中に入るんですね！

wrapper

ただエリアが小さいので min-h を拡張した。

しかし上下の中央揃えは、marign-auto だけでは無理だ。

saruwakakun.com

次に縦方向に真ん中に寄せる方法をパターン別に紹介していきます。初心者誰もが一度は考えるのが「横と同じようにmargin-top:auto; margin-bottom: autoを使えば良さそう」ということ。しかし、この方法は縦の中央寄せでは使えないのです…。 1つずつ詳しく見ていきましょう。

よくわからんけど PC の wrapper はこれでよし！

  margin-top: 5%;
  max-width: 960px;
  min-height: 700px;

f:id:kei_s_lifehack:20200920050400p:plain

head

頭を増やしていく
まずは 200px to 70 px に
これを margin left top で動かして行って...

.head-one {
  margin-left: 500px;
  margin-top: 50px;
}
.head-one {
  margin-left: 450px;
  margin-top: 50px;
}

f:id:kei_s_lifehack:20200920051253p:plain

は？？？ absolute じゃないとダメか....

大きさのバランス

通常の頭が70px
小さい目なしの頭が 50px
白目が 40px
青目が 15px

f:id:kei_s_lifehack:20200920053746p:plain

https://kaede0902.github.io/expo2025/

.head {
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 70px;
  background: red;
  border-radius: 100px;
}
.whiteEye {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 100px;
}
.blueEye {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  background: blue;
  border-radius: 100px;
}
.head-one {
  background: red;
  left: 1050px;
  top: 100px;
}
.head-two {
  width: 50px;
  height: 50px;
  left: 1015px;
  top: 90px;
}
.head-three {
  width: 50px;
  height: 50px;
  left: 980px;
  top: 110px;
}
.eyeOne {
  left: 1070px;
  top: 110px;
}
.blueEyeOne {
  left: 1070px;
  top: 110px;
}

%表示

px 使ってたら、CSS の理解度がやや低い

「小要素は親要素の半分のサイズにする」のであれば、小要素には width: 50% を指定するわけ親要素が変化すれば、小要素は自動的にサイズが変わると云う寸法

% の相対単位が使いこなせたら、レスポンシブは楽勝

とのことから、% を使って書き直すことにする。

container を 960 -> 730 -> 300 px に

fastcoding.jp

Retinaディスプレイ対応されているiPhone7は、ディスプレイの大きさの2倍である[ 横幅750px ]でWebサイトを作成します。

と書かれているので、それに従い 750px で設計する
padding が 10px ずつあるので、730px にする

.wrapper { background: #aaa; margin-right: auto; margin-left: auto;

margin-top: 5%; max-width: 730px; min-height: 700px;

padding-right: 10px; padding-left: 10px; }

f:id:kei_s_lifehack:20200921035302p:plain

f:id:kei_s_lifehack:20200921035344p:plain

PC はもちろん OK
SP (Mi9) は少し小さいか？ margin のぶん？

f:id:kei_s_lifehack:20200921035556p:plain

300px にしてやっと収まった

f:id:kei_s_lifehack:20200921035714p:plain

PC だとエミュレーター感がある。背景消すけど。
もともと縦長のいのちだし大丈夫！

body

もう一度設計を固める

MainMeat は中に目がある赤い玉
SubMeat は中に目が無い小さい赤い玉
WhiteEye は大きい白目
BlueEye は小さい青目
全て absolute で、% を駆使して描く

container

    <div className="container">
      LIFE IS SHINING...
      <div className="MainMeat MainMeatOne"></div>
      <div className="MainMeat MainMeatTwo"></div>
      <div className="MainMeat MainMeatThree"></div>
      <div className="MainMeat MainMeatFour"></div>
      <div className="MainMeat MainMeatFive"></div>

      <div className="WhiteEye WhiteEyeOne"></div>
      <div className="WhiteEye WhiteEyeTwo"></div>
      <div className="WhiteEye WhiteEyeThree"></div>
      <div className="WhiteEye WhiteEyeFour"></div>
      <div className="WhiteEye WhiteEyeFive"></div>


      <div className="BlueEye BlueEyeOne"></div>
      <div className="BlueEye BlueEyeTwo"></div>
      <div className="BlueEye BlueEyeThree"></div>
      <div className="BlueEye BlueEyeFour"></div>
      <div className="BlueEye BlueEyeFive"></div>
    </div>

Main Meat

まずは大きいあかいたまを 1/5 つ描こうと思う
head というヘッダーと紛らわしい名前を肉にかえる

.MainMeat {
  background: red;
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 70px;
  background: red;
  border-radius: 100px;
}
.MainMeatOne {
  left: 55%;
  top: 10%;
}
.MainMeatTwo {
  left: 60%;
  top: 40%;
}
.MainMeatThree {
  left: 50%;
  top: 45%;
}
.MainMeatFour {
  left: 13%;
  top: 22%;
}
.MainMeatFive {
  left: 13%;
  top: 27%;
}

WhiteEye

.WhiteEye {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 100px;
}
.WhiteEyeOne {
  left: 55%;
  top: 11%;
}
.WhiteEyeTwo {
  left: 60%;
  top: 41%;
}
.WhiteEyeThree {
  left: 50%;
  top: 46%;
}
.WhiteEyeFour {
  left: 13%;
  top: 23%;
}
.WhiteEyeFive {
  left: 13%;
  top: 28%;
}

BlueEye

.BlueEye {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  background: blue;
  border-radius: 100px;
}
.BlueEyeOne {
  left: 55.2%;
  top: 12%;
}
.BlueEyeTwo {
  left: 62%;
  top: 43%;
}
.BlueEyeThree {
  left: 52%;
  top: 48%;
}
.BlueEyeFour {
  left: 14%;
  top: 24%;
}
.BlueEyeFive {
  left: 14%;
  top: 29%;
}

f:id:kei_s_lifehack:20200921204442p:plain

% 表示で、目がついている頭5つの SP ができた

f:id:kei_s_lifehack:20200921204606p:plain

% にしてるのに PC レイアウトが壊れた。基礎がないとできない。諦める。

OGP 対応

npm のライブラリはSSR ようだったのでindex.html の header にかく

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:creator" content="@kaede_io" />
    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:title" content="いのちの輝き" />
    <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
    <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

これで deploy する

f:id:kei_s_lifehack:20201003022550p:plain

index に書いた内容は入ってるが、tw card に反映されない

www.howtonote.jp

これを読むと
tw: title と tw: image がなかった

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:title" content="expo2025_css" />
    <meta name="twitter:description" content="いのち輝く" />
    <meta name="twitter:image" content="../images/PC.png" />
    <meta name="twitter:creator" content="@kaede_io" />

これで行けるか？ npm run deploy

f:id:kei_s_lifehack:20201003023432p:plain

https://cards-dev.twitter.com/validator

そうそう
ここでURL入れて確認するとキャッシュされてOGPの情報が登録されるみたい

入れなくても一度許可されたドメイン配下のページなら、そのうちOGP表示されるようになるとは思うけどね
— AKAI (@Ver1000000000) October 2, 2020

ここでURL入れて確認するとキャッシュされてOGPの情報が登録されるみたい入れなくても一度許可されたドメイン配下のページなら、そのうちOGP表示されるようになるとは思うけどね

これを通さないと出ない!!! 危なかったありがとう誤字あまうs

applica.info

f:id:kei_s_lifehack:20201003023717p:plain

出たが、画像は反映されていない。階層が違うか？

../images/PC.png

public を探してみると画像の public がない

f:id:kei_s_lifehack:20201003023931p:plain

PC.png を index.html に並列させる

これでもダメ

./expo2025/public/PC.png

*これもダメ

画像が出せない

    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:image" content="
https://github.com/kaede0902/expo2025/blob/master/images/PC.png
    ">

OG を入れる

f:id:kei_s_lifehack:20201003030457p:plain

Twitter img はいらなかった
og:img は絶対パスで index.html の隣に入れたものを

    <meta property="og:image" content="https://kaede0902.github.io/expo2025/PC.png">

でいけた

kaede0902.github.io

最終的なコードはこちら

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:title" content="expo2025_css" />
    <meta name="twitter:description" content="いのち輝く" />
    <meta name="twitter:creator" content="@kaede_io" />


    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:image" content="https://kaede0902.github.io/expo2025/PC.png">
<meta property="og:url" content="https://www.example.com/">
    <meta property="og:title" content="いのちの輝き" />
    <meta property="og:description" content="
      EXPO2025, いのちの輝きくんです.
    " />