2023-12-12

イージングの公式を使って要素をなめらかに動かす

JavaScript

イージングって何？

開始とか終了地点に近づくにつれて速度が変わるアレのこと。
今更感満載なので詳しくはググってね。

実装

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

const div = document.querySelector("div");
const span = document.querySelector("span");
let left = 0;

move();

function move() {
  // 求める値 += (目標値 - 現在の値) * 0.02
  left += ((500 - 16) - left) * 0.02; // 目標値に到達した時点でspanが見切れるため横幅の16を減算
  span.style.left = `${left}px`;

  requestAnimationFrame(move);
}

linear（速度変化なし）との比較

See the Pen Untitled by m1y474 (@m1y474) on CodePen.

まとめ

単純に加算していく（linearな動き）より、イージングの公式とやらで実装したほうが動きがなめらかになるらしい。
カーソルの動きに沿って要素を動かしたいときとかインタラクティブなことに使ってあげると良さげ。
UIアニメーションむずい。

株式会社エイルシステムではWebエンジニア・モバイルアプリエンジニアを募集しています。
実務経験がなくてもOKです。ご興味のある方は弊社HPよりご連絡ください。

2023-12-07

2023年に読んだおすすめ漫画10選

漫画開発以外

お題「2023年に読んだおすすめ漫画」

「2023年に出版された漫画」ではなく、「2023年に自分が読んだ漫画」を挙げています。
一部ネタバレを含みます。
順番は思いついた順であって順位ではないです。
アフィリンクとかないから全員読め。

おすすめ漫画10選

卵巣腫瘍で入院したレポ

開発以外

はじめに

PC整理してたらメモに卵巣腫瘍の入院レポが出てきたから供養。
（※ 生理とか💩とか下の話が出ます。）

時系列

2023/01/03（水）

生理予定日+1
子宮が時折ズキズキ痛む。
その後も01/08（日）までほぼ毎日軽い痛みがあったけどいつもの生理前症状と思って放置する。

2023/01/08（日）

生理予定日+9
21:00頃、風呂入ってるときに痛みで立つことができなくなる。
湯船に浸ると回復したから、そろそろ生理来るかなと思ってまた放置。

2023/01/09（月・祝） 01:00頃

生理予定日+10
横になっててもズキズキ痛むようになってきた。
体を動かすたびに痛くて仰向けにもなれないし、起き上がることもできない。
生理痛がひどい人は生理前から生理痛がある、って聞いたことがあったから「これが生理痛がひどい人の痛みか・・・？」って思いながら我慢してた。（元々自分は生理痛がほとんどないタイプ）
あと、どのくらい自分が生理痛に我慢できるのか挑戦したかったのもある。
ちなみに同居人は私が痛みに耐えてる隣でいびきかいて寝てた。まじかコイツ。

ひどい生理痛に耐えている＋こんなに痛いのに誰にも看病されない自分の状態に悲劇のヒロインムーブをカマしつつも、我慢できなくなって02:30頃にロキソニン服用。
その後、起きた同居人に救急車呼ぶ？って聞かれたけど「生理痛で救急車呼ぶとかｗｗｗ」って思って断った。
今思えば7119を使うべきだったけど痛みでそれどころじゃなかったしそもそも選択肢に出てこなかった。

あとからクリニックの先生に聞いてわかったことだけど、この時点で救急車呼んで良かったらしい。判断ムズすぎ。

生理が毎月定期的に来る自分にとって9日も生理が来ないのはおかしいから近々クリニック行こうと思ってたけど、生理来ても来なくても連休明けにクリニック受診しようと決意してその後は熟睡。ロキソニンすごい。

2023/01/09（月・祝） 15:00頃

外出中、夜中ほどの痛みじゃないけど立って歩くと痛くなってきた。
祝日だったし明日会社休んで病院行こうと思ってたのでとりあえずまた我慢する。¹

帰りの車内（助手席）でお尻をつけて座るのも痛くて、ふと「もしかして今日の夜中も昨日と同じ痛みを我慢する必要があるのか？」って考えたときに怖くなったからそのまま車内で祝日やってるクリニックを探して電話。
とにかくちゃんと座ることができなかったから片方の尻を持ち上げて斜めに座っている状態だった。

クリニック着くも痛みが酷くて待合室で座ることができず、直立に立つこともできないから中途半端な下半身ジョジョ立ちで問診票を記入する。

診察してもらうと「排卵出血で血が溜まってるのかも」と言われる。
内診後に色々話したけど動揺しすぎて↓以外のことは覚えてない。

右の卵巣が腫れ上がってる
通常2cmが8cmまで腫れ上がってる
卵巣が捻れてる（捻転）可能性がある

「腫れてる」「捻れてる」「2cmが8cm」のワードは入ってきたけど正直内容は理解できてなかった。
腫れてるなら腫れを抑える薬出してくれればいいし、捻れてるなら元に直せばいいんじゃない？って考えてたと思う。

先生が席を外して、看護師さんたちが救急車・タクシーが云々って話してるのが聞こえてきたけど診察室の奥で話してたから他の患者さんのことかな？って思ってた。
戻ってきた看護師さんに「今話してるのって私のことですか？」って聞いたら「そうだよ」って言われる。
クリニックじゃなくて大きい病院で処置が必要らしい。
とりあえず「車で来ているので車で行きます」と伝えた。

クリニック側がいろんな病院に電話してくれてる間、また待合室で待つことに。
待合室で先生に言われたことを軽率にググって検索結果に冷や汗が止まらなくなる。

Google先生を完全に信用してるわけじゃないけどクリニックの先生に口頭で医療用語ばっか言われても正直理解できんかった。
ここでネットの情報を完全に鵜呑みにして冷や汗が止まらんくなって吐き気が出る。

吐き気が限界になって16:26~16:45の間にトイレに駆け込む。ゲボ出ず。
隣の薬局で水を買ってがぶ飲み。16:45くらいからもう一回検索しようとしたけど冷や汗が止まらんかったから途中でやめた。ネット断ちえらい。

もう一度呼ばれて先生のとこに行くと紹介状を渡される。
水を持ってる私を見た先生に「緊急手術になると思うから水はもう飲まないで。固形物も食べないで」と言われる。水持って先生の前に出てよかった。

手術って言われてびっくりしたけど今まで手術・入院したことがないから、手術（しかも緊急）の響きにちょっとテンション上がってた。²

車で大きい病院ついて診察・内診。
ここで初めて卵巣腫瘍疑いと判断され、クリニックの先生の言う通りそのまま緊急手術になる。

手術するまではわからないけど多分良性
良性の場合はとって終わり
卵巣がすでに壊死してたら卵巣を取る必要がある

って話をされた。
他にも色々説明されり、身体に色々されたりしたけど正直記憶にない。
CT（MRI?）やったのと点滴つけられたのは覚えてる。

腹腔鏡³でやるとか言われたけどよくわからんかった。
そのまま手術室に入って麻酔打たれてからは記憶にない。

結果としては良性の卵巣腫瘍で卵巣は取らずに済んだ。
卵巣残って本当によかった；；

2023/01/10（火） 01:00頃

目が覚めたら個室に一人の状態。
腹付近が痛すぎて起き上がることもできず酸素マスクつけられてた。

術後の状態としては以下

痰が絡まるから咳したいけど腹にある手術痕が痛くて咳ができない
痰が絡みすぎると限界突破して咳が出るも、腹圧で痛すぎて死にそうになる
朝まで水が飲めない
手術痕から血が出てたらしいけど、起き上がれないので見れず（咳のタイミングで出血したのかは不明）
屁すると腹が痛いからすかしっ屁に調整してから出す必要がある

起き上がれないから何もできなかったけど、唯一スマホが触れたからひたすらYouTubeやらTVerやらみて過ごした。

夜の病院で個室に一人っていうシチュに霊的なものを期待しつつも霊感ゼロの自分には何も感じることができず。
足元になにかいると感じても毎回自分の鼻（視力0.1以下）

朝頃に酸素マスクは取れた。
「鼻くそピロピロしてるからゴミ箱とってほしい」って看護師さんに伝えたら足でゴミ箱渡されて軽く泣きそうになる。
医療従事者は生理現象に寛容という一方的な幻想を壊される。⁴

起きてるうちにSlackで社内向けのメッセージをスケジュールしておく。

ちな緊急だったから化粧したまま手術室入ったはずなのに起きたらすっぴんだった。
クレンジングまでしてくれて感謝ァ☆

2023/01/10（火） 10:00頃

起き上がることができて水も飲んでいいと言われる。
ベッドのまま大部屋に移される。
窓際で日光直当たりの配置に萎えつつ、このあたりで術後はじめてちょっと寝る。

この日には同居人がPC・タブレット・Switchを持ってきてくれて娯楽系は充実してた。

記憶に薄いけど多分この日に尿道カテーテルも取ったと思う。
入院中の痛みベスト1は間違いなく尿道カテーテル取る瞬間だった。
手術痕より圧倒的に痛かったし、取ったあとの小便でも毎回尿道が痛かった。
痛みが一日で終わったことがせめてもの救いだった。

病院食

2023/01/11（水）

3日ぶりの💩
3日も出てなかったのにこんだけ？ってくらいウサギ💩だった。

平日は朝抜き・土日は昼過ぎまで寝てるダメ人間だから08:00頃に朝ごはんが来て12:00頃に昼ごはんが来ると「さっき食べたばっかなのにもう？！？！！」って思っちゃう。

昼頃から点滴が取れた。

病院食

2023/01/12（木）

同居人に持ってきてもらったPCで映画を見ようとするもウォッチリストが救いようのない陰鬱な映画まみれ。（登録したのは自分）
とてもじゃないけど入院中のメンタルじゃ見る気になれず悩んだ挙げ句、全然興味ないス◯サイド・スクワッドをみた。時間返せ。

昼過ぎに内診してもらったら、内膜が薄くなってるから今出てる血が経血とのこと。ずっと術後の血だと思ってた。
内診終わってから入院後初のシャワーを浴びて、HxH読んで頭パンクして寝る。

病院食

2023/01/13（金）

午後には無事退院。
トータル9万ちょい。
緊急入院だったけど同居人と病院の方が限度額なんとかは申請してくれたから適用済みの金額のはず。

病院食

まとめ

⚠あくまでも自分が入院した病院の話です⚠

病院は金の亡者

マジで病院は金の亡者だと思った方がいい。

病院によるかもだけど自分が入院した病院はそうだったから、入院中に借りるもの・もらうもの全部に「これはお金がかかりますか？」って聞くようにしてた。（貧乏人）

個人的あって助かったものベスト3は、

箸・スプーンフォークなどのカトラリー類
箱ティッシュ
フェイスタオル

身内の携帯番号は電話帳に登録しておこう

入院時に緊急連絡先を記入する必要があったんだけど、血の繋がりがある身内じゃないとダメだった。
身内で唯一携帯番号がわかる、ばあちゃんの番号書いて事なきを得た。
連絡手段がLINEでも身内の携帯番号くらいは電話帳に入れとこうと思った。

総合病院の病院食に期待するな

時系列の病院食参照。

院内のコンビニには行けない

コロナの影響で院内のコンビニに行くにも看護師さんに頼まないとだめだった。⁵
院内コンビニのラインナップを把握してない状態で看護師さんをパシらせるのは難易度高すぎるだろ。

面会

面会（荷物の受け渡し）については看護師さんによって回答が違ってて「看護師さんを介してだったらOK」っていう人もいれば、「入院階から出なければ直接受け渡しOK」っていう人もいた。
めんどくさかったからその時の看護師さんの言うことに従った。

アクセは全部外せ

今考えたら当たり前なんだけど、手術前には身につけてるアクセ類を全部外す必要がある。
自分は十数個のアクセ（ほとんどピアス）をつけてたからめちゃくちゃ手間だった。
数年前に空けて以来、ファーストピアスのままだった眉ピを外したら術後には穴塞がってた。治癒力すげー。
にしてもピアス穴くせ〜〜〜〜んだよな。

貴重品の管理は自分で責任を持て

手術前にアクセ類を外して看護師さんに渡す→退院時にアクセ類見つからず紛失騒ぎ→結局自分のポーチの中に入ってた
（手術前の記憶が曖昧で今となっては看護師さんに渡したのかさえ怪しい）

っていう迷惑極まりない騒ぎがありました。貴重品の管理は自分でしっかりしよう。
というか手術・入院関係なく社会で生きていく上で当たり前のことだよね。関係者の皆さんマジでごめんなさい。

その他

入院中にどうしてもアルフォートが食べたくて同居人に密輸⁶してもらったんだけど、多分看護師さんと仲良くなってれば密輸なんかしなくても諸々許容してもらえるんだろうなという雰囲気を感じた。

あと、アルフォート含め入院中に必要なものは同居人が都度持ってきてくれたんだけど、親が遠方にいる一人暮らしだったら確実に詰んでたと思う。
同居人には感謝しかない。

最後に

我慢はよくない！迷ったら7119を使おう！

ちな年イチの健康診断に子宮がん検診は含まれてた上で入院になったんだけど、これって健康診断の先生の見逃しなのか、卵巣が腫れるスピードが早かったのかどっちなんだろう・・・？卵巣腫瘍は超音波検査（エコー）じゃないとわからないっぽい。鴻鳥サクラ先生が言ってました。

ららぽの食料品売場にいたんだけど未だに売場に行くと当時の痛みを思い出す。↩
過去に入院したいがために4本同時の親知らずの抜歯を予定してたけどコロナの影響で中止になった。↩
臍と下腹部あたりに数センチ程度の穴を開けてする手術。詳しくはggってね。↩
まぁでも足元にあったらわざわざしゃがまないか。↩
今はどうか知らないけど少なくとも2023年1月時点では行けなかった。↩
受け渡しの荷物の中にアルフォートを忍ばせること。↩

2023-11-07

React Nativeでnode_modules/のコードを修正したい

React Native

はじめに

React Nativeを使っていると依存パッケージのバグや、特定の処理をカスタマイズしたいことがたまにあるのでメモ
ただし、あくまで応急処理的な使い方に留めよう（自戒）

手順

1. パッチ当てに必要なパッケージのインストール

$ npm i --save-dev patch-package postinstall-postinstall

2. 対象のファイルを修正する

ex. node_modules/<package name>/<file name>

3. パッチを適用

$ npx patch-package <package name>

patchesディレクトリが作成され、patches/<package name>.patchのようなdiffファイル(?)が作成される

4. `package.json`に`scripts.postinstall`を追加

  "scripts": {
    "postinstall": "patch-package"
   }

これを追加することで自分以外がnpm iしたときにもパッチが適用される

最後に

パッチ当てで終わるんじゃなくてPRも出そうな

2023-07-07

aabファイルからapkを取り出す

Android

動作確認環境

macOS Ventura 13.2.1

手順

1. bundletool の install

$ brew install bundletool

2. aabからapkのセットを生成

$ bundletool build-apks --bundle={.aabファイルまでのフルパス} \ 
                       --output=app.apks \
                       --ks={Key store path} \
                       --ks-pass=pass:{Key store password} \
                       --ks-key-alias={Key alias} \
                       --key-pass=pass:{Key password}

名称はAndroid Studioでそれぞれ該当する箇所

Android Studioでの設定

補足

--outputはapp.apksじゃなくて任意の名前でもOK
指定必須なのは--bundleと--outputのみ

3. zipにして解凍

--outputで指定したapp.apksというファイルが生成されるのでzipにしてから解凍

$ mv app.apks app.apks.zip
$ unzip app.apks.zip -d app.apks

app.apksディレクトリにsplits/とtoc.pbが展開されるのを確認

$ ls 
splits  toc.pb

4. apkを端末にインストール

※ Android端末にファイル転送を許可してPCと接続している前提

$ bundletool install-apks --apks=app.apks

エラーが出ず、Android端末にアプリがインストールされていれば成功

トラブルシューティング

`bundletool install-apks --apks=app.apks`をしたときに`Error: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package xx.xx.xxxx signatures do not match previously installed version; ignoring!`というエラーが出る

すでに端末にインストールされているアプリのBuild Variantsが異なる場合に出るっぽい
自分の場合はdebugアプリがすでに入っている端末にreleaseアプリを入れようとして上記エラーが出た
端末に入ってるアプリを消してから再度bundletool install-apks --apks=app.apks をして解決

参考

developer.android.com

apprili.com

2023-04-28

ReactNativeのTextInputに指定できるkeyboardTypeの一覧

React Native

毎回「テンキーレイアウトって何がどう違うんだっけ・・・？」ってなって実機で確認してる記憶喪失だから画像と一緒にまとめとく

検証環境

デバイス	OS version	キーボード
iPhone 14	iOS 16.2	標準キーボード
TORQUE 5G	Android 12	Gboard

keyboardType一覧

keyboardType	iOS	Android
default
email-address
numeric
phone-pad
number-pad
decimal-pad
ascii-capable
numbers-and-punctuation
url
name-phone-pad
twitter
web-search
visible-password

twitterとか限定的すぎだろ・・・
email-address,numeric, phone-pad, number-padあたりさえ抑えときゃいい気がする
iOSもAndroidもnumericとdecimal-padのレイアウトは同じっぽい

playground

参考

reactnative.dev

2023-04-20

M2 MacにHomebrewでPHP7.4を入れてXdebugを有効にする

PHP Mac

Homebrew経由でM2 MacにPHP7.4を入れようとしたら以下のエラーが表示された

$ brew install php@7.4
Error: php@7.4 has been disabled because it is a versioned formula!

M1 Macのときからなるっぽい
ググったら同じ現象の記事が山ほど出てきたので以下で解決

$ brew tap shivammathur/php
$ brew install shivammathur/php/php@7.4
# 省略
$ echo 'export PATH="/opt/homebrew/opt/php@7.4/bin:$PATH"' >> ~/.zshrc
$ echo 'export PATH="/opt/homebrew/opt/php@7.4/sbin:$PATH"' >> ~/.zshrc
$ source ~/.zshrc

7.4が入っていることを確認

$ php -v
PHP 7.4.33 (cli) (built: Feb 15 2023 06:33:21) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.33, Copyright (c), by Zend Technologies

Xdebugがないから入れる

$ /opt/homebrew/opt/php@7.4/bin/pecl install xdebug
pecl/xdebug requires PHP (version >= 8.0.0, version <= 8.2.99), installed version is 7.4.33
No valid packages found
install failed

Xdebugの最新バージョンが7.4に対応してないから失敗する
原因は以前と同じ

iliiliiiliili.hatenablog.jp

Xdebugのバージョンを指定してinstallする

$ /opt/homebrew/opt/php@7.4/bin/pecl install xdebug-3.1.6
# 省略
Build process completed successfully
Installing '/opt/homebrew/Cellar/php@7.4/7.4.33_1/pecl/20190902/xdebug.so'
install ok: channel://pecl.php.net/xdebug-3.1.6
Extension xdebug enabled in php.ini

確認してXdebugが有効になっていればOK

$ php -v
PHP 7.4.33 (cli) (built: Feb 15 2023 06:33:21) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Xdebug v3.1.6, Copyright (c) 2002-2022, by Derick Rethans
    with Zend OPcache v7.4.33, Copyright (c), by Zend Technologies

$ php -m | grep xdebug
xdebug

zsh使ってるけど.zshrcで$になるようにしてるからbash使ってるみたい☆キショ☆☆☆

2023-04-12

php:7.4-apacheを使ったDockerfileでXdebugのインストールが失敗する

Docker PHP

エラー

#0 179.0 pecl/xdebug requires PHP (version >= 8.0.0, version <= 8.2.99), installed version is 7.4.33
#0 179.0 No valid packages found
#0 179.0 install failed

原因

Xdebug 3.2.0がPHP7.2~7.4をサポートしなくなった

This is the first release of Xdebug 3.2. This release adds support for PHP 8.2, and drops support for PHP 7.2 through PHP 7.4.

Xdebug - Xdebug 3.2.0 is out!より

対応策

DockerのXdebugのインストールの部分でバージョン指定してあげる

Before

FROM php:7.4-apache

RUN pecl install xdebug && docker-php-ext-enable xdebug

After

FROM php:7.4-apache

RUN pecl install xdebug-3.1.6 && docker-php-ext-enable xdebug

Xdebug 2.6.0 x PHP5系のときも同じことやってるから最初からバージョン指定しとこうな！

2023-03-24

React NativeでSVGを使う

React Native

1. 必要なパッケージのインストール

$ npm i react-native-svg

2. SVGアイコンとなるコンポーネントファイルの作成

import React from 'react';
import Svg, { Polygon, Line } from 'react-native-svg';

const AlertOctagon = (props) => (
  <Svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke={props.color} // アイコンの色をpropsから受け取る
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round">
    <Polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></Polygon>
    <Line x1="12" y1="8" x2="12" y2="12"></Line>
    <Line x1="12" y1="16" x2="12.01" y2="16"></Line>
  </Svg>
);

export { AlertOctagon };

※アイコンはFeather Iconsを使用

要点

使いたいSVGのタグをアッパーキャメルに変更する
ex. <svg></svg>→<Svg></Svg>, <path />→<Path /> ...etc
xmlns・xmlns:xlink属性は削除する

3. アイコンを使用したいファイルで読み込む

import React from 'react';
import { AlertOctagon } from './components/Icons';

export default function App() {
  return (
    <>
      <AlertOctagon color="red" />
      <AlertOctagon color="blue" />
      <AlertOctagon color="green" />
      <AlertOctagon color="purple" />
      <AlertOctagon color="yellow" />
    </>
  );
}

サイズとか色を可変にしたかったらpropsで渡してあげればOK

2023-03-02

JS で Lottie のアニメーションを表示する

JavaScript HTML

検証用に触ってみた記録

完成形

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script>
<div></div>
<script>
  lottie.loadAnimation({
    container: document.querySelector('div'), // 表示領域
    path: './data.json', // ローカルに用意したLottieのJSONファイル
    renderer: 'svg', // 表示する方法 svg, canvas, htmlのいずれか
    loop: true, // ループさせるか
    autoplay: true, // 自動表示させるか
  }).setSpeed(2); // 2倍速で表示
</script>

jsonをサーバーから持ってくる場合はpathにhttps://assets2.lottiefiles.com/...から始まるjsonファイルを指定してあげればOK

Animation By Thomas Kiguru

Animation By Abdul Latif

KAWAII！！！！

思ったより簡単すぎてやることなかった・・・

今回はCDNでやってるけどnpmもあります

www.npmjs.com

アニメーション作れる人すごいなぁ〜〜〜〜

補足

これ書いてるときに見つけたんだけど埋め込みも用意されてるから JS すらいらないっぽい・・・すごいぜLottie・・・

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_WaQ8yMJuKt.json" background="transparent" speed="2" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

参考

lottiefiles.com

github.com

lottiefiles.com

2023-02-28

mysqlのバイナリログが削除できないときにやったこと

MySQL

はじめに

Dockerで開発中に以下のエラーに遭遇

General error: 3 Error writing file '/tmp/MYtPTBrC' (OS errno 28 - No space left on device)

はじめましてのエラーだったから解決方法の備忘録

発生環境

Docker / mysql:8.0.26

OS

# cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

MySQL

# mysql --version
mysql  Ver 8.0.26 for Linux on x86_64 (MySQL Community Server - GPL)

原因調査

ググった感じmysqlのバイナリログの肥大化が原因っぽい
mysqlに入ってログの確認

mysql> show master logs;
+---------------+------------+-----------+
| Log_name      | File_size  | Encrypted |
+---------------+------------+-----------+
| binlog.000001 |    3117966 | No        |
| binlog.000002 | 1073800265 | No        |
| binlog.000003 | 1073776277 | No        |
| binlog.000004 |  862945125 | No        |
+---------------+------------+-----------+
4 rows in set (0.00 sec)

ログを削除する

mysql> purge master logs to 'binlog.000001';
ERROR 3 (HY000): Error writing file './binlog.index_crash_safe' (OS errno 28 - No space left on device)

消えないんだが〜〜〜？？？？？

てかmysqlのデータって/var/lib/mysql/の中にあるんじゃねと思いながら確認

# ls /var/lib/mysql/ | grep binlog
binlog.000001
binlog.000002
binlog.000003
binlog.000004

いた・・・！
後は削除してあげればOK

rm /var/lib/mysql/binlog.*

（開発環境は削除でいいけど本番環境は退避とかのほうがいいかも）

2023-01-27

VenturaにアプデしたらXcodeが動かなくなった

Mac Xcode

Venturaにアップデートしてから$ react-native iosがエラーを吐くようになった

やったこと

コマンドラインツールの再インストール

エラー

xcodebuild: error: An error occurred establishing a connection to the installation service.

対策

$ sudo rm -rf /Library/Developer/CommandLineTools
$ xcode-select --install

Xcodeのversionの切り替え

マイナーバージョンを切り替えて複数の13.xのXcodeをrenameして使ってて、アプデのタイミングで13系を削除したから出た

（Venturaへのアプデには無関係で、アプリをrenameしたり消してない場合は出ないと思う）

エラー

xcrun: error: active developer path ("/Applications/Xcode_13.2.1.app/Contents/Developer") does not exist
Use `sudo xcode-select --switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, or use `xcode-select --install` to install the standalone command line developer tools.
See `man xcode-select` for more details.

対策

エラーメッセージの通りにアプリを切り替える

$ sudo xcode-select --switch /Applications/Xcode.app

ライセンスへの同意

エラー

You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode license agreements.

対策

$ sudo xcodebuild -license
Password:

パスワードを入れたら同意文が表示されるので脳死agreeする

By typing 'agree' you are agreeing to the terms of the software license agreements. Type 'print' to print them or anything else to cancel, [agree, print, cancel] agree

You can view the license agreements in Xcode's About Box, or at /Applications/Xcode.app/Contents/Resources/en.lproj/License.rtf

エラーは出てないけどやったこと

キャッシュ系

$ rm -rf $HOME/Library/Caches/com.apple.dt.Xcode/
$ rm -rf ~/Library/Developer/Xcode/DerivedData/*

シミュレーター系

$ sudo xcrun simctl shutdown all
$ sudo xcrun simctl erase all

2022-12-20

Dockerの開発環境を自己証明書でSSL対応する

Docker

前提

Dockerイメージにはphp-apacheを使用

ディレクトリ構成

.
├── docker/
│   ├── Dockerfile
│   ├── apache2/
│   │   └── sites-available/
│   └── ssl/
└── docker-compose.yml

証明書の作成

作成前に秘密鍵たちを格納しておくディレクトリを作っておく

$ mkdir docker/ssl
$ cd docker/ssl

1. 秘密鍵の作成

$ openssl genrsa -out server.key 2048

2. CSRファイルの作成

Common Nameにlocalhostを指定、それ以外はEnterでOK

$ openssl req -new -sha256 -key server.key -out server.csr

You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) []:
State or Province Name (full name) []:
Locality Name (eg, city) []:
Organization Name (eg, company) []:
Organizational Unit Name (eg, section) []:
Common Name (eg, fully qualified host name) []:localhost
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:

3. 証明書の作成¹

$ echo "subjectAltName = DNS:localhost" > server.txt

$ openssl x509 -req -sha256 -days 3650 -signkey server.key -in server.csr -out server.crt -extfile server.txt

証明書作成後はserver.txtは削除してOK

4. default-ssl.confファイルのコピーとマウント

dockerのコンテナに入ってdefault-ssl.confをコピーする

$ docker exec -it container-name bash

$ cp /etc/apache2/sites-available/default-ssl.conf docker/apache2/sites-available/

5. default-ssl.confの修正

- SSLCertificateFile  /etc/ssl/certs/ssl-cert-snakeoil.pem
- SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key
+ SSLCertificateFile    /etc/ssl/certs/server.crt
+ SSLCertificateKeyFile /etc/ssl/private/server.key

6. docker-comose.ymlの修正

  # 省略
  web:
    # 省略
    volumes:
      # 省略
      - ./docker/apache2/sites-available/default-ssl.conf:/etc/apache2/sites-available/default-ssl.conf # 追加
      - ./docker/ssl/server.crt:/etc/ssl/certs/server.crt # 追加
      - ./docker/ssl/server.key:/etc/ssl/private/server.key # 追加
    ports:
      - {http通信で使いたいport番号}:80
      - {https通信で使いたいport番号}:443 # 追加
# 省略

7. Dockerfileでsslを有効にする

# 省略
RUN a2enmod ssl && a2ensite default-ssl
# 省略

buildし直してhttpsで接続できればOK

$ docker-compose build --no-cache && docker-compose up -d

参考

qiita.com

10年で作成しています。↩

2022-11-07

TypeScript x axios で配列を非同期で処理する方法

TypeScript

やりたいこと

会員情報を複数取得したい
会員情報を複数取得できるAPIが存在しない

実装

APIへアクセスするファイル

export default class Sample {
  public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> {
    return Promise.all(
      [1, 2, 3].map(async row =>
        axios.get(`http://example.jp/api/member/${row}`),
      ),
    ).then((results: AxiosResponse<{ username: string, /* ...適当な型定義 */ }>[]) =>
      results.map(res => ({
        username: res.data.username,
        // ... レスポンスの整形
      })),
    );
  }
}

※適当な型定義の部分は*.d.tsからimportするのを想定

配列で行うことがaxiosじゃなかったりして、レスポンスの整形とかが必要なければそのままawait Promise.all()で返却してOK

会員情報を取得するファイル

const users = await new Sample().fetchUsers();
console.log(users); // [{username: "レスポンス1(res.data.username)", /* 整形した戻り値 */}, {username: "レスポンス2", /* 整形した戻り値 */}]

TSで書いたコードをブログに書くときって型情報とか消すから、これくらいならJSで書いたほうがスッキリしていいな...タイトル詐欺ごめんなさい...

2022-11-06

canvasで特定の幅で文字を折り返して表示する

HTML JavaScript

やりたいこと

canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。
何も処理しないと↓みたいに文字が詰まって表示される

canvasで表示される文字列

実装

①文字を任意の文字数ごとに分割して配列に入れていく

// 表示したいテキスト
const src = "あ".repeat(30);
const results = [];
let tmp = "";
src.split("").map((row) => {
  tmp = tmp + row;
  // 16文字の場合に配列に入れる
  if (tmp.length === 16) {
    results.push(tmp);
    // 文字カウント用の変数をクリア
    tmp = "";
  }
});
// 16文字に満たなかった残りの文字を配列に追加する
const length = results.join("").length;
results.push(src.slice(length));

②配列の文字列をfillText()で描画していく

ctx.fillStyle = "black";
ctx.font = "16px serif";
results.map((result, index) => {
  // 16px*インデックス でY軸を指定する
  ctx.fillText(result, 0, 30 + (16 * index));
});

canvasで表示される文字列（おり返しあり）

コード全文

See the Pen Untitled by miyata (@m1y474) on CodePen.

イージングって何？

実装

まとめ

おすすめ漫画10選

1. ダイヤモンドの功罪

2. 住みにごり

3. 子育てアフロ田中

4. ぬらりひょんの棲む家

5. 君と宇宙を歩くために

6. タヌキツネのゴン

7. ムムリン

8. あらくれお嬢様はもんもんしている

9. ザシス

10. 俺たち ただの

はじめに

時系列

2023/01/03（水）

2023/01/08（日）

2023/01/09（月・祝） 01:00頃

2023/01/09（月・祝） 15:00頃

2023/01/10（火） 01:00頃

2023/01/10（火） 10:00頃

病院食

2023/01/11（水）

病院食

2023/01/12（木）

病院食

2023/01/13（金）

病院食

まとめ

病院は金の亡者

身内の携帯番号は電話帳に登録しておこう

総合病院の病院食に期待するな

院内のコンビニには行けない

面会

アクセは全部外せ

貴重品の管理は自分で責任を持て

その他

最後に

はじめに

手順

1. パッチ当てに必要なパッケージのインストール

2. 対象のファイルを修正する

3. パッチを適用

4. package.jsonにscripts.postinstallを追加

最後に

動作確認環境

手順

1. bundletool の install

2. aabからapkのセットを生成

補足

3. zipにして解凍

4. apkを端末にインストール

bundletool install-apks --apks=app.apksをしたときにError: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package xx.xx.xxxx signatures do not match previously installed version; ignoring!というエラーが出る

参考

検証環境

keyboardType一覧

playground

参考

エラー

原因

対応策

1. 必要なパッケージのインストール

2. SVGアイコンとなるコンポーネントファイルの作成

要点

3. アイコンを使用したいファイルで読み込む

完成形

補足

参考

はじめに

発生環境

OS

原因調査

やったこと

コマンドラインツールの再インストール

エラー

対策

Xcodeのversionの切り替え

エラー

対策

10. 俺たちただの

4. `package.json`に`scripts.postinstall`を追加

`bundletool install-apks --apks=app.apks`をしたときに`Error: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package xx.xx.xxxx signatures do not match previously installed version; ignoring!`というエラーが出る

3. 証明書の作成¹