KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

はてなブログの不満点 -- なぜたまに乗り換えたくなるのか

Hatena Blog はたまに乗り換えたくなる時があるから、不満点をまとめておく

はてなブログの不満な機能

下記の理由からや別のサービスに移行か自作を検討している

アプリでコメント返し出来ない

Android App で記事についたコメントを返せない。まぁコメント殆どつかないけど

PC で書く時に左に寄りすぎて辛い

もっと左の padding ほしい

アプリでダークモードがない

目が疲れやすいかも

アプリで記事リストが 15程度までしかスクロールできない

地味にちょっと前の記事を書き直すのが不便

アプリで URL 貼り付けの時に OGP が出せない

Notion にはある機能。

画像のアップロードが遅い

Qiita や Notion や Medium はかなり早い


自作すれば作れるであろう機能

URL の階層分け

linuc101-linux-command-grep-seq

linuc101-linux-command-ls-cd

のように毎回コピペして書くのは面倒だし、ディレクトリを切りたい。

過去記事リストのカード or リスト表示

テーマでいけるかもしれない

カードで記事を並べたり、リストにしたり切り替えられるようにしたい


はてなブログの素晴らしい機能

アプリがかなり読みやすい

記事ページがかなりデザイン良い

デフォで公開

Notion だと公開する手間がある

画像が楽に置ける

画像を簡単に upload する機能とマークダウン両立するのは今の私では作れそうにない

Qiita の方が速いが、こちらは GUI のサムネで画像履歴が保存され、1度上げた画像をまとめて再度置き直したりできる

MD 使える

はてなのサービスとして置かれるからの検索流入などがある

タグ機能がある

Linuc 101 Linux プロセス プログラム メモリアドレスの概念

プロセスとプログラムとの違い

devconnected.com

この記事がわかりやすかった。

プロセスとは

processes are running programs on your Linux host that perform operations such as writing to a disk, writing to a file, or running a web server for example.

プロセスは Linux のホストコンピューターで動いている、ディスクに書き込んだり、ファイルに書き込んだり、web サーバーを動かすようなプログラムのこと

processes can be started, stopped, interrupted and even killed.

プロセスは 開始、停止、(望まずに)中断されること、強制的に止められること?がある

kill の解釈はまだ曖昧。

プログラムとは

programs are lines or code or lines of machine instructions stored on a persistent data storage.

www.geeksforgeeks.org

en.wikipedia.org

ファイルシステムに入っている普通のコードや、機械語の塊のファイルと解釈する

プロセスを実行するのがプログラムのようだ。

プログラムからプロセスへ

devconnected.com

最初にみたこの記事によれば、プログラムはデータと指示がまとまったもので、それを実行してメモリでロードされることで、Heap と Stack を持つらしい

メモリの中の何かを入れておくところとして、ヒープとスタックがあると解釈する

https://www.atmarkit.co.jp/icd/root/80/34958380.htm

ヒープ ( Heap ) はメモリの中のさらにプロセスが動的に動く場所を確保する為のもの

www.atmarkit.co.jp

スタック ( Stack ) はデータを積み重ねるところで、紙を積み重ねるように、取り出すときは最後に置いた紙からとりだす為、最初に入れたものを出すためには それより後に入れたものを全て取り出さないと出せないものらしい。

まんま紙じゃん...すごい使いにくそう。

プロセスがどう動くか。

まずカーネルがうごく...?

カーネルとメモリと物理アドレス

As we already stated, processes are managed by the Kernel on Linux.

プロセスを管理するところ

ja.wikipedia.org

CPU や 物理メモリ、デバイス(キーボードやディスプレイか?)を抽象化し、ソフトウェアで扱えるようにするところらしい。

カーネルが実際に使う物理メモリの特定のサイズで使える場所である「メモリアドレス」を (シェルに?)与えて、その与えられたアドレス空間をプログラムを実行することを「プロセスが走る」というらしい

image.itmedia.co.jp

メモリアドレス空間はこんなかんじらしい

空間といっても xy 座標があるわけではなく、byte 単位で一列にならんでいる

このメモリだと 0x00000000 to 0xFFFFFFFF が メモリの長さで 私たちがよく使う単位でいう 4GB らしい。

最初のプロセス

systemd

eng-entrance.com

これが init プロセスといわれ、ここから分岐されて他のプロセスが動き出すらしい。

pstree
init─┬─init───bash───pstree
     └─{init}

WSL で pstree しても init と bash 以外のプロセスが動いてなかった... WSL だからか?

カーネルスペース

devconnected.com

初期化が起こるところ?ユーザースペースよりも先にわけられるものと解釈する

共有パソコンで言う ユーザーフォルダの上の階層をイメージしている

上記の Heap と Stack のメモリのわけかたよりも先にわけられるものと解釈する

Linuc 101 Linux systemd - sytemctl コマンド、target, isolate reboot, shutdown -10,

systemd

systemd とは

システム D

www.freedesktop.org

www.designet.co.jp

コンピューターが起動するときに、必要な様々なプログラムを並列して動かすプログラム。

PID ( Process ID ) が 1 である原初のプロセス。

カーネルの次に起動する。

sysVinit と違って シェルスクリプトを使わない。

Service, Socket, Mount, Target, などの unit によって管理する。

equj65.net

これらは拡張子にもなっているらしい。

Target は sysinit, basic, multi-user, graphical, の順番で動く。

Cgroup ( Control Group ) を使っている

ls -l /sbin/init
lrwxrwxrwx 1 root root 20 Jul  7  2020 /sbin/init
 -> /lib/systemd/systemd

最初のプロセスである init プロセスの位置にデフォルトでシンボリックリンクがある。

つまり init として systemd はうごく!!!

systemctl とは

SYSTEM ConTroL の略かな?

milestone-of-se.nesuke.com

systemd をターミナルで動かすためのコマンド。

サービスやターゲットなどのユニットを表示したり変更したりできる。

サービスとは

linux.k-sakabe.com

サービスとはコンピュータが開いてから閉じるまで裏で動き続けるプログラムで

別名を デーモン ( Daemon ) というらしい

ターゲットと管理

equj65.net

ターゲットとは、複数のユニットを機能ごとにグルーピングしているものらしい

デフォルトターゲットの表示と変更

systemctl get-default でデフォルトのターゲットを表示し

systemctl set-default your-target で デフォルトを your ターゲットに変更できる

実例

root@DESKTOP-8G3A2F8:~# systemctl get-default
graphical.target
root@DESKTOP-8G3A2F8:~# \
systemctl set-default multi-user.target
Created symlink /etc/systemd/system/default.target → 
/lib/systemd/system/multi-user.target.

現在のデフォルトになっている graphical.target を表示し

システム D の sytem/ の default.target に multi-user.target へのリンクが追加された

isolate - 稼働状態のままターゲット変更

systemctl isolate your-target で稼働状態のままターゲットを your ターゲットに変更できる

普通に変更すると一度落ちるのかな?要検証

また poweroff.target, reboot.target, を指定して isolate で動かすことで

電源オフや再起動ができる。

systemctl isolate reboot.target
System has not been booted with systemd as init system (PID 1). 
Can't operate.
Failed to connect to bus: Host is down

実際に isolate で reboot を売ってみたが、 WSL だからか systemd が PID 1 になっていなくて打てなかった。

なお poweroffreboot と直接打ち込んでも実行される

shutdown

shutdown +10 で 10min, shutdown +0 で即時 シャットダウンされる。

shutdown -r で reboot される

これも WSL では上記のエラーがでて実行できない。

centos での実例

qiita.com

centos 6 では init プロセスの 3 か 5 で CUI モードか GUI モードを決定するが

centos 7 では systemd が動いているので、multi-user.target か graphical.target に切り替える

成果物一覧--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

Win10 Home VMware で centOS の Installation Source の setup が終わらず挫折

why

ssh で遊べる remotehost が欲しい

無料サーバーでは無理そうだった

X Server に月額 980 払いたくない

VMware でマシンの中に仮想マシン作れば無料でやれるらしい!!

eng-entrance.com


VMware Workstation を win に download

f:id:kei_s_lifehack:20210330060935p:plain

vmware から 無料のを選んで DL

www.vmware.com

215 MB

f:id:kei_s_lifehack:20210330061234p:plain

Hypervisor も入れる。入った。

f:id:kei_s_lifehack:20210330061445p:plain

VMware のショートカットがデスクトップに出てる

f:id:kei_s_lifehack:20210330061602p:plain

VMware Workstation 16 の起動を確認!!!


centOS 8 Stream の ISO を DL する

つぎに VMware にいれる OS を取ってくる

www.centos.org

f:id:kei_s_lifehack:20210330070750p:plain

CentOS 8 Linux を... 最新でも 2021 で寿命がつきる!??

いくらなんでもみじかすぎないか!??

https://academy.gmocloud.com/qa/20210129/11154

CentOS Stream の branch が主流になるから Linux は打ち切られるらしい。

名前変わるのわかりにくいな...

www.centos.org

f:id:kei_s_lifehack:20210330071050p:plain

Stream のページをみると、2024 まで生きていると書いてある。こっちを使おう。

x86 を 選択

ftp.tsukuba.wide.ad.jp

つくばのサーバーから USB メモリに DL する

723MB


VMware で New Virtual Machine を作成する

最初に インストールした VMware で Virtual Machine を作成する

f:id:kei_s_lifehack:20210330224748p:plain

ここから 作成

f:id:kei_s_lifehack:20210330071920p:plain

この時点では USB メモリの iso を 検知することができない。

f:id:kei_s_lifehack:20210330072122p:plain

「OS を後から install する」を選択する。

すると枠として? Linux/CentOS 8 が選択できる

f:id:kei_s_lifehack:20210330225029p:plain

VM の名前を決定

f:id:kei_s_lifehack:20210330225142p:plain

20GB の割り振りで、バーチャルディスクをシングルファイルとして置くことにする。

f:id:kei_s_lifehack:20210330072201p:plain

そうすると OS の入れ物としての Virtula Machine が完成する。


VM の 参照先を USB メモリの iso にする

Play を押してみると

OS が見つからないとでて、先に進めない。なので

Edit を押して

f:id:kei_s_lifehack:20210330230003p:plain

USB メモリの CentOS iso ファイルを参照させる

これで CentOS の起動の準備が整った。

CentOS を 起動する

ISO を指定したうえで Play を押すと起動する

f:id:kei_s_lifehack:20210330230149p:plain

起動するのを60 sec 待つ。

f:id:kei_s_lifehack:20210331043027p:plain

M.I.P みたいに文字が流れて、設定画面に映る。


設定画面のエラーを確認

f:id:kei_s_lifehack:20210330230722p:plain

Root Pass, Install Destination, Network, Install Source

ここでエラーが出る

Install Source 以外はすぐ解決できる。

Root Password

適当に 1234 とかにするだけ

Install Destination

www.itcore.jp

この記事の通りに やる

Manual Patition で

/boot 1024 MiB

/ 17 GiB

ともに ex4 で format


Network

物理回線必要なのかと焦ったが、そういうことではなさそう。

www.itcore.jp

f:id:kei_s_lifehack:20210330235340p:plain

hostname を centos8 にして Ethernet を on にする


インストールソースにミラーサイトを手打ちして実行

f:id:kei_s_lifehack:20210331040903p:plain

永遠に終わらん、なんで?

www.itcore.jp

ここを参考に設定する

公式ではなく、理研ミラーサイトを使う。ちゃんと deprecate されてないやつをね!!

コピペができないので手打ち。

f:id:kei_s_lifehack:20210331045758p:plain

一番上の main のところに手打ちする

Done を押しても終わらない。

DVD1.iso まで URL に含める

https://ftp.riken.jp/Linux/centos/8/isos/x86_64/CentOS-8.3.2011-x86_64-dvd1.iso

終わらない

isos を os に

isos が os になります

さっきの記事にあった

https://ftp.riken.jp/Linux/centos/8/os/x86_64

にする

これでも終わらない

Locale を日本で

f:id:kei_s_lifehack:20210331050654p:plain

アメリカのリージョンだから遅いのでは?

Region "Asia/Tokyo にする

しかしそれでもはいらない。挫折


原因の候補

もともと記事では DVD がはいる PC で、そこの Z ドライブを参照しているが、 私は USB を参照したり、ローカルファイルを参照させているのに問題があるのかもしれない

これから

X Server に課金して作ってもらって SSH でつなぐか

完全に座学としてやるか

月 14k のサブスクの整理 ( 2020-03 )

why

月額 980 円の X server を SSH と公開鍵認証を試すために契約する必要がでた

これ以上追加するのが怖くなって、何を減らそうか検討した

サービスたち

Prime, Apple Music, YT Music, Netflix, Wimax ルーター, friday, qs, kk,

を契約している

Amazon Prime 500

何か買うときに便利。引越しでいろいろ買うようになる時まで手放してもいいかもしれない。pending

Apple Music 980

580円だった が値上げしてる... 学生卒業をきっちりと検知していますね!!

Bille とかよく聞くのでこれは使い続ける

YT Music 1200

f:id:kei_s_lifehack:20210418064208p:plain

Youtube でも無料で聴けるが、UI が良いので使っていたい。

Netflix: 1,490

進撃を見たいし欠かせない。

話題に追いつくために呪術や Dr.stone もみるかもしれない

リンクライフ Wimax 3756 - 解約予定

解約が 20k するらしい。

出先の wifi のために使っている

Y! の iPhone 月 6GB の回線のデザリングと役割がかぶるが、あっちはすぐ外れるのでこっちの方が便利。

楽天スマフォ回線契約して切り替えようと思ったが、免許もマイナンバーカードも作ってないのでできず、そのまま

FlydayGold 1650 - 解除

グラビアよかったが、そんなに見ないし年齢層違うから解除する....

Epoch QS 3976

Epoch で来てますが QS のサブスクですね...

まぁまぁ高いのでちゃんと使いましょう

cybernet kk 2101

kk のサブスクですね...

これから DMM より優先して使いましょう!!! Model とメーカーごとに!

total

980 + 1490 + 3756 + 1650 + 3976 + 2101 = 14,453

サブスクだけで 15k 近く...

Flyday 1650 と Wimax 3976 を抜けば 8827 に納まりますね...

QS も高いから 2-3 ヶ月に一度にした方がいいのかもしれないです...

Linux ホスト関連のコマンドを WSL で試すが 接続先がない...

why

Linuc 101 で出たコマンドを動かしたくなった

whoami

root@DESKTOP-8G3A2F8:~# whoami
root

Who am I? のユーザー名を聞くコマンドを打つと 現在のユーザー名がわかるらしい

ここでは WSL だからか root になっていた

hostname

root@DESKTOP-8G3A2F8:~# hostname

どうようにして hostname では 今使っているホストコンピューターの名前がわかるようだ

ここでは私のゲーミング PC の DESKTOP-8G3A2F8 がでた

ssh コマンドで使えるホストコンピューターのアドレスとパスワードがわかると接続できて名前がかわるらしい。

ssh

S-Sh、セキュア、シェル。

ssh yourRemoteHost

で リモートの環境にログインできるらしい。

しかし 使えるホストがないので試せない...

なにかしらのサーバーを契約する必要がありそう

完全無料の X domain のサービス、 X FREE ではだめだった。

X Server

X FREE の上位版らしい

f:id:kei_s_lifehack:20210329234353p:plaint

たかい...

www.xserver.ne.jp

だが、借りれば公開鍵の学んだやり方が実際の環境で試せそう!!!

借りるしかないのか...

サブスク整理したら 14k だったので、1650 のを外したとはいえ追加するのは怖い。

VM 使えばいい?

win10 home なら VMware Workstation Player を使えば無料でやれると聞いた

cent OS で別の hostname, ip adress を作り

普段なら同一端末で直接接続、外で家の PC に当てたいなら NAT にする

eng-entrance.com

これで vmwarecentOS の仮想環境が作れそう