<div class="container">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
</div>

:root {
  --width: 300px;
}
/* カルーセルのcontainerの領域を指定 */
.container {
  width: var(--width);
  height: var(--width);
}
.items {
  /* スクロールを停止するとスナップポイントにスクロールする */
  scroll-snap-type: x mandatory;
  display: flex;
  overflow: scroll;
  /* スクロールバーを非表示にする */
  &::-webkit-scrollbar {
    display: none;
  }
}
.item {
  /* スナップ位置 */
  scroll-snap-align: start;
  /* スナップ位置を通過しない。一旦ストップする */
  scroll-snap-stop: always;
  flex: 0 0 100%;
  width: var(--width);
  height: var(--width);
  /* 以降装飾に関するスタイル */
  font-weight: bold;
  font-size: 30px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item:nth-child(1) {
  background-color: red;
}
.item:nth-child(2) {
  background-color: green;
}
.item:nth-child(3) {
  background-color: blue;
}

ページネーションもつけたい

ページネーションは JS ないと無理っぽい

<div class="container">
  <div class="items">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
  </div>
  <!-- ページネーションとなるボタンの設置 -->
  <nav>
    <button type="button"></button>
    <button type="button"></button>
    <button type="button"></button>
  </nav>
</div>

.items {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow: scroll;
  /* ナビゲーションをクリックしたときに smooth scroll させるために追加 */
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
}
/* ページネーションボタンの装飾 */
button {
  width: 15px;
  height: 15px;
  background-color: grey;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

const buttons = document.querySelectorAll("button");
const items = document.querySelector(".items");

buttons.forEach((button, index) => {
  // 先頭要素をアクティブとする
  if (index === 0) {
    button.style.backgroundColor = "black";
  }
  // ボタンをクリックしたときに同じ順のアイテムのボタンの色を変更する
  button.addEventListener("click", () => {
    [...buttons].findIndex((tmp) => {
      if (tmp === button) {
        tmp.style.backgroundColor = "black";
        return;
      }
      tmp.style.backgroundColor = "grey";

      // スクロール位置を変更
      items.scrollLeft = width * index;
    });
  });
});

const width = parseInt(
  window.getComputedStyle(document.querySelector(".item")).width
);
// スクロール終了時に該当アイテムのボタンの色を変更する
items.addEventListener("scrollend", (elm) => {
  const scroll = elm.target.scrollLeft;
  const num = scroll / width;
  buttons.forEach((button, index) => {
    button.style.backgroundColor = "grey";
    if (num === index) {
      button.style.backgroundColor = "black";
    }
  });
});

アクティブ状態のプロパティが多い場合は classList を操作したほうが楽かも

CodePen

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

最後に

scroll-snap-type にずっと proximity を指定してて、スナップ部分で止まるのは無理なんだと諦めて JS で実装した俺の無駄な努力を供養させてくれ

// スクロール終了時、起点で止まっていない場合に表示領域が多い方にスクロールさせる
document.querySelector(".items").addEventListener("scrollend", (elm) => {
  const width = parseInt(window.getComputedStyle(document.querySelector(".item")).width);
  const max = document.querySelectorAll(selector).length;
  const scroll = elm.target.scrollLeft;
  for (let index = 0; index < max; index++) {
    const point = index * width;
    if (scroll > point && scroll < point + width) {
      const half = point + (width / 2);
      if (scroll < half) {
        elm.target.scrollLeft = point;
        return;
      }
      elm.target.scrollLeft = point + width;
    }
  }
});

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

2024-11-27

【CSS】線形・放射・扇形・反復グラデーションまとめ

CSS

線形グラデーション

.linear-1 {
  /* orangeからblueにグラデする。orange 0%, blur 100% と同じ挙動 */
  background: linear-gradient(orange, blue);
}
.linear-2 {
  /* 左から右にグラデする。to right = 90deg or 0.25turn と同じ挙動 */
  background: linear-gradient(to right, orange, blue);
}
.linear-3 {
  /* 45度回転した状態でグラデする。45deg = to right top or 0.125turn と同じ挙動 */
  background: linear-gradient(45deg, orange, blue);
}
.linear-4 {
  /* グラデ軸の開始点を10%, 終了点を50%にする。 */
  background: linear-gradient(orange 10%, blue 50%);
}
.linear-5 {
  /* 複数グラデ&各色の開始を指定 */
  background: linear-gradient(orange 10%, blue 50%, deeppink 100%);
}
.linear-6 {
  /* グラデ軸の開始と終了点が同じのため変化が急になる。指定数値が昇順じゃない場合も開始＞終了となるので変化が急になる */
  background: linear-gradient(orange 30%, blue 30%);
}
.linear-7 {
  /* 変化の中心点を30%にする */
  background: linear-gradient(orange 0%, 30%, blue 100%);
}
.linear-8 {
  /* 左下に向かって複数グラデ */
  background: linear-gradient(to bottom right, orange 0% 20%, blue 20% 40%, deeppink 40% 60%, lime 60% 80%, yellow 80% 100%);
}
.linear-9 {
  /* 複数レイヤー(?)でのグラデ。透過箇所がない場合は最初に指定した色が表示される */
  background: linear-gradient(orange, transparent, transparent),
              linear-gradient(transparent, blue, transparent),
              linear-gradient(transparent, transparent, deeppink);
}
.linear-10 {
  /* 背景画像に対してのグラデ */
  background: linear-gradient(transparent, orange), url("https://i.imgur.com/djkvTYX.png") center no-repeat;
  background-size: contain;
}

放射グラデーション

.radial-1 {
  /* デフォルトはellipse（楕円） */
  background: radial-gradient(deeppink, lime);
}
.radial-2 {
  /* 正円 */
  background: radial-gradient(circle, deeppink, lime);
}
.radial-3 {
  /* 左始点で正円のグラデ */
  background: radial-gradient(circle at left, deeppink, lime);
}
.radial-4 {
  /* 末端がボックスの中心から一番近い辺に隣接するように描画される */
  background: radial-gradient(circle closest-side, deeppink, lime);
}
.radial-5 {
  /* 末端がボックスの中心から一番遠い辺に隣接するように描画される */
  background: radial-gradient(circle farthest-side, deeppink, lime);
}
.radial-6 {
  /* 末端がボックスの近い頂点（角）に隣接するように描画される */
  background: radial-gradient(circle closest-corner at 20px, deeppink, lime);
}
.radial-7 {
  /* 初期値。末端がボックスの中心から最も遠い頂点（角）に接する */
  background: radial-gradient(circle farthest-corner at 20px, deeppink, lime);
}
.radial-8 {
  /* 正円の大きさを指定 */
  background: radial-gradient(circle 50px, deeppink, lime);
}
.radial-9 {
  /* 楕円の大きさを指定 */
  background: radial-gradient(ellipse 10px 50px, deeppink, lime);
}
.radial-10 {
  /* 複数グラデ */
  background: radial-gradient(ellipse, deeppink, lime, yellow, darkviolet);
}
.radial-11 {
  /* グラデ変化なし正円 */
  background: radial-gradient(circle, deeppink 0% 10%, lime 10% 20%, yellow 20% 30%, darkviolet 30% 40%, transparent 40%);
}
.radial-12 {
  /* xy軸20px起点の正円グラデ */
  background: radial-gradient(circle at 20px 20px, deeppink, lime);
}
.radial-13 {
  /* 複数レイヤーのグラデ */
  background: radial-gradient(circle at 0px 0px, deeppink 40%, transparent 0%),
              radial-gradient(circle at 100px 200px, lime 40%, transparent 0%);
  background-color: white;
}

扇形グラデーション

.conic-1 {
  /* yellowからdarkvioletに変化する扇型のグラデ */
  background: conic-gradient(yellow, darkviolet);
}
.conic-2 {
  /* x, y軸の指定 */
  background: conic-gradient(at 0% 40%, yellow, darkviolet);
}
.conic-3 {
  /* 複数グラデ */
  background: conic-gradient(yellow, darkviolet, orange, blue);
}
.conic-4 {
  /* 起点・終点を指定した複数グラデ */
  background: conic-gradient(yellow 0% 20%, darkviolet 20% 40%, orange 40% 60%, blue 60% 80%, deeppink 80% 100%);
}
.conic-5 {
  /* 90度回転を起点としたグラデ*/
  background: conic-gradient(from 90deg, yellow, darkviolet);
}

反復グラデーション

.repeating-1 {
  /* 4分割のグラデ */
  background: repeating-linear-gradient(crimson, deepskyblue 25%);
}
.repeating-2 {
  /* 90回転して変化が急なグラデ */
  background: repeating-linear-gradient(90deg, crimson 0% 10%, deepskyblue 10% 20%);
}
.repeating-3 {
  /* 複数レイヤー */
  background: repeating-linear-gradient(crimson 0% 10%, transparent 10% 20%),
              repeating-linear-gradient(90deg, deepskyblue 0% 10%, transparent 10% 20%);
}
.repeating-4 {
  /* 開始・終了が同じ色で終わる */
  background: repeating-linear-gradient(crimson 0% 5%, transparent 5% 20%, crimson 20% 25%),
              repeating-linear-gradient(90deg, deepskyblue 0% 5%, transparent 5% 20%, deepskyblue 20% 25%);
}
.repeating-5 {
  /* 4に続くグラデ */
  background: repeating-linear-gradient(crimson 0% 5%, transparent 5% 20%, crimson 20% 25%),
              repeating-linear-gradient(90deg, deepskyblue 0% 5%, transparent 5% 20%, deepskyblue 20% 25%);
}
.repeating-6 {
  /* 放射グラデ */
  background: repeating-radial-gradient(crimson 0% 10%, deepskyblue 10% 20%);
}
.repeating-7 {
  /* アニメーション付き放射グラデ */
  background: repeating-radial-gradient(deepskyblue 0% 10%, crimson 10% 20%);
  animation: 0.3s linear 0s infinite normal moving;
}
@keyframes moving {
  from {
    background: repeating-radial-gradient(crimson 0% 10%, deepskyblue 10% 20%);
  }
  to {
    background: repeating-radial-gradient(deepskyblue 0% 10%, crimson 10% 20%);
  }
}
.repeating-8 {
  /* 扇形グラデの反復 */
  background: repeating-conic-gradient(deepskyblue 0deg 20deg, crimson 20deg 40deg);
}

CodePen

線形グラデーション

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

放射グラデーション

See the Pen radial-gradient by m1y474 (@m1y474) on CodePen.

扇形グラデーション

See the Pen conic-gradient by m1y474 (@m1y474) on CodePen.

反復グラデーション

See the Pen repeating-gradient by m1y474 (@m1y474) on CodePen.

感想

スプラ4は赤×水色の配色が来ると思います！

参考

developer.mozilla.org

ics.media

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

2024-11-21

【Googleドライブ】ファイルの最終更新者を取得する【GAS】

GAS

前提

Google Workspace のアカウントで検証・実装しています。
API によっては個人アカウントと挙動が異なる可能性があります。多分。

やりたいこと

Google ドライブに保存しているファイルの最終更新者を取得したい。

ググった感じ、古い情報しかなかったり最終更新日時しか取得できなかったりで自分の環境で動かなかった。
インターネッツによると、Drive.Files.get() でlastModifyingUserNameが取得できるらしいんだけど、ワイがアクセスしたときのレスポンスがこれ↓だったからググってコピペでイッセンマンにはなれませんでした。

{ "name": "XXXXX", "mimeType": "XXXXX", "kind": "XXXXX", "id": "XXXXX" }

ドキュメントに記載されてるリソースと違いすぎて笑えてきまちゅわ〜（泣）
（多分Google Workspaceのアカウントだったりファイルの共有設定とかの環境のせいもあると思うけど、単純にワイのドキュメントに対する読解力がないだけ）

やったこと

ということでできないもんは仕方ない！別の方法でやっていこう！

GAS の設定周り

1. 必要なサービスを追加する

以下の使用するAPIをサイドバーのサービスから追加する。

Drive
DriveActivity
People

サイドバー->サービス->＋ボタンのサービスを追加をクリックすると以下のようなモーダルが出てくるので該当 API を選んで追加する。

IDはプロジェクト内の他の定義と重複していなければこのままでOK

2. `appsscript.json` に `oauthScopes` を定義する

プロジェクトの設定->全般設定にある「appsscript.json」マニフェストファイルをエディタで表示するにチェックを入れる。

サイドバーのエディタにappsscript.jsonが出てくるからoauthScopesを定義して、以下の権限を記述する。¹

"oauthScopes": [
  "https://www.googleapis.com/auth/userinfo.profile",
  "https://www.googleapis.com/auth/contacts.readonly",
  "https://www.googleapis.com/auth/drive.readonly",
  "https://www.googleapis.com/auth/drive",
  "https://www.googleapis.com/auth/drive.activity",
  "https://www.googleapis.com/auth/drive.activity.readonly"
],

GAS が用意してる API は基本的に設定しなくても使えるはずなんだけど、People API の以下の 2 つだけは明示しないと呼び出せないみたいだった。

https://www.googleapis.com/auth/userinfo.profile
https://www.googleapis.com/auth/contacts.readonly

と同時に、oauthScopesを定義すると設定しなくても使えるはずの他のサービス（Drive, DriveActivity…etc）の権限が死ぬみたいで、最終的に使うサービスのスコープはすべてoauthScopesに記述しないと動かなかった。（だったら最初から全部明示的に記述しないと動かないようにしとけ！！！）

このへんは実行したときに必要なスコープをログに出してくれるから指定値がわからなくなることはないと思う。Google ちゃん優しいね。

3. コード.gs の実装

3-1. ファイル情報を取得する

const activities = DriveActivity.Activity.query({
  itemName: "items/XXXXXXX", // items/ファイルID の形式でファイルを指定
  pageSize: 1,
}).activities;

再現性取れてないけど、たまにactivitiesが空で返却されることがあるけどなんでだ？ファイルが存在する以上は履歴が空になることはなくない？？

3-2. ファイル情報から最終更新ユーザーの識別子を取得する

const personName = activities?.[0]?.actors?.[0]?.user?.knownUser?.personName;

3-3. 識別子からユーザー情報を取得する

const lastModifyUser = People.People.get(personName, { personFields: "names" })
  ?.names?.[0]?.displayName;

うん、済まないがoptional chaining アレルギーの人は帰ってくれないか（´・ω・｀）²

コード全体（一例）

フォルダ内のファイル数が多い場合とか再帰的にアクセスしてく場合は、多分レートリミットにすぐ引っかかるから API にアクセスする直前に 1,2 秒の sleep 入れたほうがいいと思う。（10行目）

組織外のユーザーの情報も取得したい場合は多分 GAS 以外の設定もいるっぽい。多分。知らんけど。

4. GAS に対して権限を許可する

実行したらGASへのアクセス権限を聞かれるから許可してあげて完了。

トラブルシューティング

`Exception: Specified permissions are not sufficient to perform the action. Required permissions: (https://www.googleapis.com/….)`と表示される

appsscript.jsonに必要なスコープが記述されていない可能性があります。
記載されている URL をoauthScopesに設定してあげましょう。

`Quota exceeded for quota metric 'Critical read requests (xxxxx)' and limit 'Critical read requests (xxxxx) per minute per user' of service 'xxxxx.googleapis.com' for consumer` と表示される

短時間に複数のファイルにアクセスし続けている場合、API のレートリミットに引っかかっている可能性があります。
上限を引き上げる申請をするか、API へのアクセスの直前で 1,2 秒のスリープを入れてあげましょう。

最後に

いろんな条件が重なって lastModifyingUserName で最終更新者が取得できてないだけだと思ってるんだけど、本当にここまでしないと取れないんか…？
ファイルが持ってる公開情報だからもっと簡単に取得できても良さそうなんだけど…
誰かもっと簡単に取得できる方法知ってる人がいたら教えてくだちい。

参考

rikoubou.hatenablog.com developers.google.com developers.google.com developers.google.com

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

ちなみにoauthScopesにhttps://www.googleapis.com/auth/drive.metadata.readonly, https://www.googleapis.com/auth/drive.appdata とかを追加してもlastModifyingUserNameは取得できなかった。↩
キメラ文章になっちまった↩

2024-10-26

育休中に基本情報技術者試験を受験した話

開発以外

※ 本記事は2024年9月時点での情報です。

	科目A	科目B
試験時間	90分	100分
出題形式	四肢択一式	多肢選択式
合格基準	600点以上 / 1000点	600点以上 / 1000点

2. なんで今更？

育休中で割と時間があって暇だった
未経験でIT業界に入り、自分にはITに関する基礎知識がないと常々コンプレックスに思っていたから
運転免許以外の何かしらの国家資格が欲しかった
転職を考えていて採用において有利になると思った（※後述あり）

3. 勉強方法

3-1. 科目A

3-1-1. 過去問道場

みなさんご存知、過去問道場を以下の手順で2周した。

過去問道場に掲載されている過去問を全年分1周
（→自分は基礎知識をつけることも目的だったから全年分を1周したけど、シラバス外もやることになるので基本情報の受験対策としては全年分をやる必要はない）
過去問道場の [試験回を指定して出題] 機能で、過去10年分の問題のうち、間違えた or 理解が浅い問題を中心に2周目

www.fe-siken.com

3-1-2. YouTube

育児でどうしても手が空かないときには以下の動画を流してた。（けど正直、自分は動画学習には向いていないみたいで、あまり身につかなかった。）

www.youtube.com

3-1-3. Newmonic（暗記アプリ）

主にストラテジ系の頭字語の暗記が苦手で Newmonic っていうスマホアプリを使ってスキマ時間で覚えた。
単語をPCから編集できて、CSVインポートもできるから自分には使いやすかった。

play.google.com

Newmonic

baton Inc.
教育
無料

apps.apple.com

3-2. 科目B

3-2-1. 過去問道場

過去問道場にも掲載されている、IPAが出しているサンプル問題を2,3周した。

3-2-2. 参考書

アルゴリズム×擬似言語トレーニングブック を3周くらいした。
ただ、サンプル問題もそうなんだけど1周目で解けた時点で解き方&解答を覚えてしまうので2周目以降はあまり意味なかったなと思う。
参考書自体はページ数が多くない割にオリジナル問題が多いからおすすめ。

［改訂新版］基本情報技術者【科目B】アルゴリズム×擬似言語トレーニングブック

作者:大滝みや子
技術評論社

Amazon

3-2-3. その他

IPAが出しているサンプル問題以外の問題を解きたかったから、YouTubeでオリジナル問題を出している動画を探したり、過去問道場の掲示板やLINEのオプチャで他の人がヘルプを出してる問題を解いてた。¹

3-3. セキュリティ対策

IPAが出してる 情報セキュリティ白書 とか 情報セキュリティ10大脅威 を漁った。（多分、試験対策にはサンプル問題と科目Aをやるだけでだけで充分だと思う。）

www.ipa.go.jp

4. 試験当日

4-1. 受験1回目

「1回目」という見出しがあるということは…？
そうだね！不合格でした(^_-)-☆

受験3日前くらいに科目Bのサンプル問題を解いて「この感じなら余裕じゃん！！コード読むだけとかｗｗｗ経験者ナメんなし！ｗｗｗｗｗｗｗ」とか思って受けたら、本番で全然時間足りなくて草でした。

なるべく参考書を買わずに合格することを目標としてたけど、翌日速攻買いに行ったよね。

4-2. 受験2回目

リテイクポリシーの関係²で1ヶ月後に再受験して合格できた。

科目A 745点 / 科目B 725点 — 合格ではあるけど勉強した割に点数低くね〜〜？？？
科目Aに関しては1回目より点数下がってんの何でだよ

5. 反省点

5-1. 電子版の参考書を購入した

本番と近い感じでPC見ながら問題を解きたいと思って、電子版を購入したけど、使い捨てみたいなもんだし後々のことを考えて紙にすればよかったと後悔。

5-2. テストセンターはすぐ確保できると思ってた

「CBTって毎日開催してるからすぐ予約取れるっしょｗ」って思ってて、いざ予約取ろうとしたら近所のテストセンターが悉く1ヶ月先まで埋まっててワロタ＼(^o^)／
地域差あると思うけど、予約の変更は（3日前までなら）何回でもできるからとりあえず早めに予約すべきだと思う。

5-3. 勉強から資格取得までの時間をかけすぎた

予約がすぐに取れなかったのもあるけどもう少し短期間で取得したかった。
育児の合間とはいえ、5ヶ月も使ったのは掛かりすぎだと思う。

子どもが4ヶ月くらいのときに勉強し始めたけど、月齢が進むにつれて寝返りしたり、つかまり立ちしたりで益々目を離せなくなるから勉強時間を確保するのが難しくなってた。もう少し早く取りかかればよかった。（というか時間がフルに使える産前休暇のうちに始めるべきだった。³）

5-4. 科目Bの時間管理が雑魚すぎた

1回目の受験時では、出題されたコード全文を把握しようとしてたから回答時間が圧倒的に足りなかった。

2回目はコードすべてを把握せずに、問題文と選択肢から予想して回答した。
体感「落ちててもおかしくないな〜」って感じだったから合格できたのは運もあったと思う。

6. よかったこと

シラバスが変わる前に滑り込みで合格できた⁴
受験料が2回まで会社負担で受けられるので自己負担がなかった（2回目で受かってよかった…）

7. 基本情報は採用において有利なのか

受験した理由 に「採用において有利になると思った」って書いたけど、実際に勉強してみて基本情報を持ってるくらいでは有利にはならないなと思った。特に、経験者が持っていても別にプラス要素ではないと思う。（自分は採用担当でもなければ面接官をやったこともないので、マジでガチのめちゃくちゃ超超超個人的感覚による感想です。）

IT業界に身をおいていて、受けるかどうか迷ってる方は基本情報は飛ばして、応用技術者試験を受けるだけでいいと思う。

ただ、今まで曖昧だった分野の基礎知識はついたし、応用技術者試験にも活かせるから自分的には受けてよかった！

8. 最後に

次は応用技術者試験とデータベーススペシャリストを取得したいけど、保育園も始まってフルタイムで復帰したらオデはいつ勉強したらいいんだ？？？

参加したのが夏休みだったからかわからないけど、オプチャの民度は終わってた☆（オプチャ自体そんなもん？）↩
前回の受験日の翌日から30日以内は再受験できない。↩
スプラやってたら気付いたら産休終わってた。↩
2024年10月の試験からシラバスが変更になった。↩

2024-10-11

🤰妊娠・出産レポ👶

開発以外

Illustration by Storyset

※ 出血、嘔吐、💩の話が出ます ※

妊娠期🤰

つらかったこと

6月〜8月あたまくらいまでつわりがあって、これがとにかく辛かった。

世の中のありとあらゆる酸っぱいものと糖なし炭酸を欲しては嘔吐
「これはつわり酷くても食べられる！」を数日ごとに繰り返しては嘔吐
歯磨きするときに嘔吐
浴室に入るたびに浴室のニオイで嘔吐

現代医学で未だにつわりの原因が解明されてないとか意味がわからないもぅﾏﾁﾞ無理
あとは食事制限で約10ヶ月の間、生ものとかカフェインが摂取できないのも結構ツラかった；

反省点

タクチケを余らせた

市から妊婦用のタクチケがもらえるんだけど、もったいないオバケが発動して数千円分余らせた。通院時にもっと贅沢して使えばよかった。

妊娠線ができた

保湿できればいいと思ってニベアとかヴァセリン使ってたら、普通にガッツリ妊娠線できた。専用のクリーム買えばよかった。

母子手帳ケースをケチった

無料でもらえる応募者全員プレゼント的なものを使ってたけど、使い勝手が悪くて中期頃にちゃんとしたやつを買った。通院時はもちろん出産後も使うものだからマジで最初からちゃんとしたものを買ったほうがいい。

出産👶

時系列

2024/01/05(火) - 38w1d

検診日に予告なしで内診ぐりぐりとやらをやられる。
あるとは聞いてたけど予告なしでやられるとは思わなかった。もちろん痛すぎて汗だく。（当たり前だけど出産はこれより痛いと聞いてビビり散らかす）
子宮口は指一本分空いてたらしいけど出産はまだ先らしい。

その日の夜中に腹痛があるも陣痛は来ず。

2024/01/10(水) - 39w0d

この日も夜中に腹痛あり。（前駆陣痛ってやつ？）
一日一回以上は💩出る快便マンだけどこの日は便秘でなんとなく覚悟するも当てが外れる。

2024/01/11(木) - 39w1d

💩快便＆下痢💩

2024/01/12(金) - 39w2d

検診にて子宮口2センチとのこと。
内診後に微量の出血があったけど、その後は出なかった。
これがおしるしってやつ？！って思ったけど粘液栓も出てないし違った。

2024/01/13(土) - 39w3d

記憶がない。

2024/01/14(日) - 39w4d

06:30頃

下痢のときみたいな腹痛のあと、10分間隔で陣痛あり。
粘液栓っぽいのが出る（多分これがおしるしだった）
病院に電話するも7~5分間隔になったらまた電話してと言われたから朝ご飯食べてゆっくり過ごす。

09:00頃

7分間隔になったから病院に電話するも、痛みがまだ我慢できるレベルなことを伝えたら5分間隔になったら連絡してと言われる。（もちろん破水したり、胎動が少なくなった場合も）

スプラフェス参加するも途中で陣痛が酷くなってきたから、ホラガイ消化とフェスTクリーニングして断念。（2023年の卵巣腫瘍の手術のときも病院でスプラフェスしてたの思い出す）

ゴカム実写化のCM見てて、玉木宏の鶴見中尉めっちゃ合ってるね〜とか話してたんだけど、今日出産するだろうからふと01/14生まれの有名人調べたら玉木宏が出てきて「ワイの勘すげ〜！！」ってなる。（何が？）

14:00頃

2回目の粘液栓出る。

17:00頃

陣痛が限界になってきたから病院に電話したら所見によっては自宅に帰されるかもだけど来院してもいいとのこと。
「体力つけるために夜ご飯しっかり食べてから来てね〜」と言われたのでガストで定食を頼むも食後に吐き気MAXでトイレ直行。
間に合わなくて食べたものを全部トイレの壁にマーライオンする。
掃除するも陣痛が限界だったから中断して定員さんに平謝りx100

18:00頃

病院に着いてNSTとやらをやったけど見る余裕なし。（本来は次の検診でやる予定だった）
陣痛を和らげる呼吸法を教えてもらうも、息を吐くたびにマーライオン。

初産婦なこともあり、まだ出てこないだろうとのことで帰宅を勧められる。
一旦帰るのを決意して会計を済ますも、会計してる間に5分未満間隔になってきたから入院をお願いする。

22:00頃

トイレ行ったら股から大量出血してて、子宮口が全開だったみたいでそのまま分娩台へ。
出産直前の記憶があんまないけど「💩する感じでいきんで」と言われて3、4回全力でいきんだら出てきたっぽい。
出てくる瞬間を見てないし、出した感もなかったけど助産師さんが取り出したのを見て、ほんとに中に人が入ってたんだ〜って思った記憶だけある。
カンガルーケアしながら母乳もあげたけど初産婦なこともあり、あんまり出ず。（ちな出産までに名前を決めきれなくてずっと「赤ちゃん」って呼んでたｗ）

18:00頃に帰そうとしたのは、初産婦だったから陣痛が長丁場になると踏んでたからみたいだけど結果帰らなくて良かったらしい。

陣痛のたびに何でワイは無痛分娩にしんかったんや…って思ってたけど、経験したことでこの世のあらゆるコンテンツの出産の例えが理解しやすくなるから結果オーライ✌️
「鼻からスイカ」が一番よく使われる表現だと思うけど、個人的にはピンと来なかった…
何で鼻からなのかがわからんし、スイカも大袈裟すぎる。でっかい💩出すって感じ。

会陰切開

会陰切開後の縫合と縫合跡が痛かった。（分娩中に会陰切開されたけど、切られたときはそれどころじゃなくて痛みを感じなかった。）
特に縫合跡がずっと痛くて、ドーナツ椅子も円座クッションも役に立たなかった。
というか初産婦で会陰切開しなかった人、前世でめちゃくちゃ徳積んできたとしか思えない。

入院生活

夜勤

前半はとにかく休みたいから預けまくって、後半で夜勤マスターした。

導尿されまくった

便通は問題なかったけど、とにかくおしっこが出なかった。
尿意はあるのに出ない、出たとしてもちょろちょろ＆残尿感MAXって感じで毎回導尿してもらってた；；（後日明細見たら16回も導尿されてた☆）
総合病院での分娩だったからそのまま泌尿器科で診察もしてもらって、なんとか退院前日（出産後6日目）には改善して自己導尿は回避した。総合病院万歳🙌
自己導尿は回避したからちょっと違うけど導尿の流れはほぼ↓この方の漫画と同じだった。

niwatorisanno.blog.jp

最後に

出産から9ヶ月くらい経つけど、20kg近く増えた体重はいつ戻るんだ？？？まだ産後だよね？？？？？？

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も出そうな

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

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

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

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

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

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

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

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

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

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

まとめ

参考

はじめに

コード

ページネーションもつけたい

CodePen

最後に

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

CodePen

線形グラデーション

放射グラデーション

扇形グラデーション

反復グラデーション

感想

参考

前提

やりたいこと

やったこと

GAS の設定周り

1. 必要なサービスを追加する

2. appsscript.json に oauthScopes を定義する

3. コード.gs の実装

3-1. ファイル情報を取得する

3-2. ファイル情報から最終更新ユーザーの識別子を取得する

3-3. 識別子からユーザー情報を取得する

コード全体（一例）

4. GAS に対して権限を許可する

Exception: Specified permissions are not sufficient to perform the action. Required permissions: (https://www.googleapis.com/….)と表示される

Quota exceeded for quota metric 'Critical read requests (xxxxx)' and limit 'Critical read requests (xxxxx) per minute per user' of service 'xxxxx.googleapis.com' for consumer と表示される

最後に

参考

1. 基本情報技術者試験って何？

2. なんで今更？

3. 勉強方法

3-1. 科目A

3-1-1. 過去問道場

3-1-2. YouTube

3-1-3. Newmonic（暗記アプリ）

3-2. 科目B

3-2-1. 過去問道場

3-2-2. 参考書

3-2-3. その他

3-3. セキュリティ対策

4. 試験当日

4-1. 受験1回目

4-2. 受験2回目

5. 反省点

5-1. 電子版の参考書を購入した

5-2. テストセンターはすぐ確保できると思ってた

5-3. 勉強から資格取得までの時間をかけすぎた

5-4. 科目Bの時間管理が雑魚すぎた

6. よかったこと

7. 基本情報は採用において有利なのか

8. 最後に

妊娠期🤰

つらかったこと

反省点

タクチケを余らせた

妊娠線ができた

母子手帳ケースをケチった

出産👶

時系列

2024/01/05(火) - 38w1d

2024/01/10(水) - 39w0d

2024/01/11(木) - 39w1d

2024/01/12(金) - 39w2d

2024/01/13(土) - 39w3d

2024/01/14(日) - 39w4d

06:30頃

09:00頃

14:00頃

17:00頃

18:00頃

22:00頃

会陰切開

入院生活

夜勤

2. `appsscript.json` に `oauthScopes` を定義する

`Exception: Specified permissions are not sufficient to perform the action. Required permissions: (https://www.googleapis.com/….)`と表示される

`Quota exceeded for quota metric 'Critical read requests (xxxxx)' and limit 'Critical read requests (xxxxx) per minute per user' of service 'xxxxx.googleapis.com' for consumer` と表示される

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!`というエラーが出る