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

イージングって何?

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

実装

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年に読んだおすすめ漫画10選

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

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

おすすめ漫画10選

1. ダイヤモンドの功罪

「オレは野球だったんだ!」 運動の才に恵まれた綾瀬川次郎は何をしても孤高の存在。自分のせいで負ける人がいる、自分のせいで夢をあきらめる人がいる。その孤独に悩む中、“楽しい”がモットーの弱小・少年野球チーム「バンビーズ」を見つける。みんなで楽しく、野球を謳歌する綾瀬川だったが…。

ヤンジャン!より引用

主人公が天才の漫画は読んでて楽しいんだけど、この漫画の主人公は見てるとツラい。
周りの登場人物に感情移入してまう。
円の『同じ学年にコイツずっとおんのか』の台詞、ツラすぎるだろ。

ほんで3巻で出てきた大和くんは何なん?
お前が綾を救ってくれる感じだよな・・・?
早く綾と邂逅して救ってくれ

ynjn.jp


2. 住みにごり

実家には怪物が暮らしていた。兄貴という名の──

29歳、夏。会社から長めの休みをもらった僕は、久しぶりに実家に帰省した。住んでいたのは父母、そして35歳、無業無言の兄だった。この家族は怪物なのか?それとも家族とは怪物なのか?新ホームドラマ、襲来。

ビッコミより引用

これはね、もう優勝です。
ここ数年で読んだ漫画の中でダントツおもろいです。
今までたかたけし先生を存じ上げなかったのが悔やまれるレベル。

とにかく登場人物全員ヤバくて読み進むにつれて感覚がバグってくるから今は「この作品、もしかして兄貴が一番マシな人間なんじゃねーか?」って思い始めてる。いやそんなわけないんだけど。

ギャグとシリアスのミックス具合が古谷実ライクで信者の自分には好物すぎました。

ブログ書いてて気付いたんだけど「住みにごり」の命名って「清濁せいだく併せ呑む」の「清濁」が「すみにごり」って読めるところから来てたりする・・・?

bigcomics.jp


3. 子育てアフロ田中

あの田中がついにパパに! 『結婚アフロ田中』から、共感の声が続々の育児エピソードをセレクション! 妻のナナコの出産、そして育児に初めて向き合う田中の、戸惑い、驚き、発見、そして喜びを1冊にまとめました。

小学館コミックより引用

昔さすらいの途中で読むのやめた自分にとって久々のアフロ田中シリーズ。

漫画内のインタビューでも触れてるけど、鼻からスイカ出る表現って今まで聞いたことあっても視覚でみたことなかったからめちゃくちゃ笑った。

そのまま結婚アフロ田中全10巻買いました。

shogakukan-comic.jp


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

不眠症により体調不良になっている大学生の小山田和宏は、夏休みを利用して療養するため実家へ帰郷した。実家に着くと、居るはずの祖父母の姿が見えない。違和感を感じた和宏は両親にそのことを尋ねるが、不審な反応をされてしまう。そして和宏は、家族の異変の『正体』に気づいてしまった…。

ピッコマより引用

ハイハイ、洗脳系クライムね。青年犯罪漫画は洗脳系事件を題材にするの好きね〜!その展開、読者は飽き飽きしてんだけど出版社は気付いてないのカナ〜〜〜????って思ったら全然違いました。過保護シスコン漫画でした。

piccoma.com


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

勉強もバイトも続かないドロップアウトぎみなヤンキーの小林。ある日彼のクラスに変わり者の宇野が転校してくる。小林が先輩から怪しいバイトに誘われているところを宇野に助けられ、その出来事をきっかけに2人は仲良くなる。宇野のことを知れば知るほど彼の生き方に惹かれ、自分も変わろうと行動する小林だったが…。〝普通〟ができない正反対の2人がそれぞれ壁にぶつかりながらも楽しく生きるために奮闘する友情物語。

コミックDAYSより引用

小学校の2桁の割り算で挫折するの超わかるし、バイト続かないのも超わかるからボロボロ泣いちゃった。

comic-days.com


6. タヌキツネのゴン

タヌキの父とキツネの母を親にもつタヌキツネのゴンは、家族の愛をたくさん受けてすくすくと成長中!もうすぐ学校も始まり、日々新しい事の連続にどう立ち向かう…!?そんなゴンの成長を描いた『スライムライフ』著者最新作のハートフルストーリー!!

少年ジャンプ+より引用

メンタル安定してるときはほっこり読んでられるのに、メンブレしてるときに読むと普通の日常回で泣いてまうんだけどこの漫画マジで何???

とにかく真っ直ぐなゴンが眩しすぎてハンターハンターのキルアの気持ちになれる。
ゴン・・・お前は光だ

shonenjumpplus.com


7. ムムリン

ポコムー星人のムムリンは、宇宙旅行の帰り道、宇宙船が故障してしまい、緊急離脱をすることに。たどり着いた先は地球、日本の小学生・コウタの部屋だった。珍妙ながら愛くるしいルックスと、持ち前の愛嬌で、快く歓迎されるものと信じていたムムリンだったが、想定外に、コウタはムムリンを邪険に扱い、取り付く島もなく‥‥。なんやかんや居候を許されたムムリンと、口を開けば人をズバッと斬る正論が飛び出す、大人びた小学生コウタの奇妙な共同生活が始まる!

ヤンマガWebより引用

原作がハライチ岩井の漫画なだけあって主人公が毒吐きまくりなんだけど、日頃の理不尽とかモヤッとしたことを言語化してくれててめちゃくちゃ好きです。

3巻で終わるのは早すぎる。もっと読みたかった。

yanmaga.jp


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

たとえばの話だけど、嫌いなヤツに発情しちゃうとしたら――どうする? 学園の女王様はいつもどおりハニートラップするだけ……のハズでした。色欲から学ぶ恋愛事始めラブコメ爆誕!!!

ヤンマガWebより引用

あらもんって略称は聞いたことあったのに絵柄で敬遠してたんだけど(ごめんなさい)読んでみたら椿様が可愛いのなんのって。
こんなに可愛いヒロインみたことねえよ。

ちなみに自分は千原くんと槍野さんが好きです。(椿様じゃねえのかよ)

comic-days.com


9. ザシス

中学教師・山内海はある日、殺人事件のニュースを目にする。殺されたのは鈴木侑己、中学時代の同級生だった。数日後、山内の恋人で文芸書の新人編集・八木沢珠緖は、公募小説の落選作に事件と酷似した内容が描かれた作品を見つける。『ザシス』――作者名は佐伯遥人。やがて小説と同じように、旧友に同窓会の案内状が届いて…。

グランドジャンプ公式サイトより引用

今まで森田まさのり作品を通ってこなかったんだけど、この人本当にサスペンスホラーのジャンル初めて?ってくらいおもしろい。高すぎる画力も相まってグロシーンの迫力もすごい。

2巻が待ち遠しい。

grandjump.shueisha.co.jp


10. 俺たち ただの

【モーニング月例賞2023年6月期】佳作受賞作品

コミックDAYSより引用

わざわざノートの表紙に『佐々木×中島』なんて書くなバカ。

comic-days.com


卵巣腫瘍で入院したレポ

はじめに

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

時系列

2023/01/03(水)

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

2023/01/08(日)

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

2023/01/09(月・祝) 01:00頃

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

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

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

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

2023/01/09(月・祝) 15:00頃

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

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

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

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

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

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

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

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

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

当時の検索履歴

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

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

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

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

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

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

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

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

2023/01/10(火) 01:00頃

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

術後の状態としては以下

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

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

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

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

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

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

2023/01/10(火) 10:00頃

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

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

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

病院食

12:00頃 昼食
初の病院食。不味いお粥が存在することにびっくりした。

18:00頃 夕食
夕食からは普通の白米

2023/01/11(水)

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

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

昼頃から点滴が取れた。

病院食

08:00頃 朝食

12:00頃 昼食
18:00頃 夕食

2023/01/12(木)

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

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

病院食

08:00頃 朝食

12:00頃 昼食
バナナだけ残した

18:00頃 夕食

2023/01/13(金)

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

病院食

08:00頃 朝食

まとめ

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

病院は金の亡者

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

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

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

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

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

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

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

時系列の病院食参照。

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

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

面会

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

アクセは全部外せ

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

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

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

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

その他

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

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

最後に

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

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


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

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

はじめに

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.jsonscripts.postinstallを追加

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

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

最後に

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


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


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

動作確認環境

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での設定

補足
  • --outputapp.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


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


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

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

検証環境

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

keyboardType一覧

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

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

playground

参考

reactnative.dev


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


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

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使ってるみたい☆キショ☆☆☆


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


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

エラー

#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系 のときも同じことやってるから最初からバージョン指定しとこうな!


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

React NativeでSVGを使う

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
  • xmlnsxmlns: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

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

検証用に触ってみた記録

完成形

<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をサーバーから持ってくる場合はpathhttps://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

lottiefiles.com

lottiefiles.com

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.*

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

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

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

TOC

やったこと

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

エラー

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

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

前提

  • 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 Namelocalhostを指定、それ以外は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. 証明書の作成1

$ 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


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



  1. 10年で作成しています。

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

やりたいこと

  • 会員情報を複数取得したい
  • 会員情報を複数取得できる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で書いたほうがスッキリしていいな...タイトル詐欺ごめんなさい...

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

やりたいこと

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.