イージングって何？ 開始とか終了地点に近づくにつれて速度が変わるアレのこと。 今更感満載なので詳しくはググってね。 実装 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)…
お題「2023年に読んだおすすめ漫画」 「2023年に出版された漫画」ではなく、「2023年に自分が読んだ漫画」を挙げています。 一部ネタバレを含みます。 順番は思いついた順であって順位ではないです。 アフィリンクとかないから全員読め。 おすすめ漫画10選 1. ダイヤモンドの功罪 2. 住みにごり 3. 子育てアフロ田中 4. ぬらりひょんの棲む家 5. 君と宇宙を歩くために 6. タヌキツネのゴン 7. ムムリン 8. あらくれお嬢様はもんもんしている 9. ザシス 10. 俺たち ただの おすすめ漫画10選 1. ダイヤモンドの功罪 「オレは野球だったんだ！」 運動の才に恵まれた綾瀬川次…
はじめに PC整理してたらメモに卵巣腫瘍の入院レポが出てきたから供養。 （※ 生理とか💩とか下の話が出ます。） 時系列 2023/01/03（水） 生理予定日+1 子宮が時折ズキズキ痛む。 その後も01/08（日）までほぼ毎日軽い痛みがあったけどいつもの生理前症状と思って放置する。 2023/01/08（日） 生理予定日+9 21:00頃、風呂入ってるときに痛みで立つことができなくなる。 湯船に浸ると回復したから、そろそろ生理来るかなと思ってまた放置。 2023/01/09（月・祝） 01:00頃 生理予定日+10 横になっててもズキズキ痛むようになってきた。 体を動かすたびに痛くて仰向けにも…
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ディレクトリが作成され、…
動作確認環境 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} 名称はAn…
ReactNativeのTextInputに指定できるkeyboardTypeの一覧
毎回「テンキーレイアウトって何がどう違うんだっけ・・・？」ってなって実機で確認してる記憶喪失だから画像と一緒にまとめとく 検証環境 デバイス 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-p…
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.…
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 fo…
1. 必要なパッケージのインストール $ npm i react-native-svg 2. SVGアイコンとなるコンポーネントファイルの作成 import React from 'react'; import { View } from 'react-native'; import Svg, { Polygon, Line } from 'react-native-svg'; const AlertOctagon = (props) => ( <View> <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={…
検証用に触ってみた記録 完成形 <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', // 表示する…
はじめに 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)" V…
Venturaにアップデートしてから$ react-native iosがエラーを吐くようになった TOC TOC やったこと コマンドラインツールの再インストール エラー 対策 Xcodeのversionの切り替え エラー 対策 ライセンスへの同意 エラー 対策 エラーは出てないけどやったこと キャッシュ系 シミュレーター系 最後に やったこと コマンドラインツールの再インストール エラー xcodebuild: error: An error occurred establishing a connection to the installation service. 対策 $ sudo …
前提 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を指定…
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<{ …
やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…
やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった 実装 一部抜粋 const image = new Image(); image.src = "表示したい画像"; image.onload = () => { ctx.beginPath(); // 半径40pxの正円 ctx.arc(50, 50, 40, 0, 2 * Math.…
Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録 canvas描画部分 const ctx = this.canvas.current?.getContext('2d'); if (!ctx) { return; } ctx.fillStyle = "black"; ctx.fillRect(30, 0, 290, 450); ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(100, 50, 15, 0, 2 * Math.PI); ctx.fill(); 修正前 <canvas style={{ widt…
API Blueprintでパラメータにハイフン(-)が含まれる場合にハイフン以降が出力されない
はじめに API Blueprint でクエリパラメータをつけるエンドポイントを定義したかったけど、出力されたフォーマットが想定していたものと違っていた時の備忘録 修正前 http://example.com/api/example?date=2000-01-10 みたいなURIを想定して、以下のように書いた（一部抜粋） ## サンプル [/api/example{?date}] ### 取得 [GET] + Parameters + date: 2000-01-10 (string) - 対象年月日 aglio を使って出力されたもの 2000で切れてる....!!!! 修正後 値をバックク…
はじめに アプリがフォアグラウンドにあるタイミングで特定の処理を実施したかった 検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 コード import React from 'react'; import { AppState } from 'react-native'; class App extends React.Component { componentDidMount() { AppState.addEventListener('change', () => { if (AppState.curre…
検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 iOS ios/{project}/AppDelegate.mを以下のように修正する @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 省略 // ↓追加 if (@available(iOS 13, *)) { self.win…
nodeのversionを切り替えるときに `Use of uninitialized value $b1 in numeric comparison (<=>) at ...` と表示される
nodeのversionを切り替えたときに以下のメッセージが表示された nodebrew use v16.8.0 Use of uninitialized value $b1 in numeric comparison (<=>) at /Users/XXX/.nodebrew/current/bin/nodebrew line 678. Use of uninitialized value $a1 in numeric comparison (<=>) at /Users/XXX/.nodebrew/current/bin/nodebrew line 678. use v16.8.0 ググっ…
【GoogleAppsScript】SESAME API を使ってGASから施錠・解錠する
はじめに この記事は過去に投稿したSlackからNatureRemoのAPIを叩く記事の延長編です。 iliiliiiliili.hatenablog.jp 外出時に電化製品の電源オフったあとに、そのまま鍵の解錠→再施錠を実施するためにSESAME APIを使用します:) やること SESAME APIの準備 GASの作成 過去記事の延長線なのでSlackとの連携部分は省略します。 1. SESAME APIの準備 https://partners.candyhouse.co/login から SESAME に登録済みのメールアドレスでログイン ログインしたらメールが来るので認証などを済ませる…
【GoogleAppsScript】朝に雨が降っていたら傘を持って帰るのを忘れないようにSlackに教えてもらう
（最近SlackとGASの記事ばっか書いてる気がする...） はじめに 以下を解消するのが目的です 朝に雨が降ってると退勤時に雨が降ってようが降ってまいが、会社の傘立てに傘を忘れる確率が100%（降ってるときは傘立てが事務所にあるから取りに戻る必要がある） 傘を一つしか持ってないから2日連続で雨のときに無事死亡する 2つ目はずぶ濡れ出勤すれば済む問題なので1つ目を解消します:) あと、スマホと傘を常時一緒に持っているわけではないのでスマートタグは使いません どうしたか 弊社では退勤時、Slackの#timecardに「お先に失礼します。」という投稿をする慣習があります。 その慣習を使って、投稿…
【GoogleAppsScript】Slackに投稿したらNature RemoのAPIを使って照明とエアコンを消す
はじめに 外出時にいつもパートナーに外出する旨のメッセージを送ってるんだけど↓の3つをやらなくちゃいけないのがめんどい Nature Remoで照明を消す Nature Remoでエアコンを消す Slackでメッセージを送る 「Slackにメッセージを送るのが前提としてあるんだったら他のフローは省略できるのでは...？」って思ったのがきっかけです （過干渉すぎん？っていうツッコミはなしでお願いします！） Nature Remoとは？ nature.global やること Slackにメッセージを投稿する SlackからGASにイベントを投げてもらう GASからNature RemoのAPIを叩…
はてブロの記事が投稿から1年以上経過している場合にアラートを表示する
経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書きを画面上に表示させたかった 注意 ブログデザインのテーマははてブロ公式のEpicを使用しています。本記事で紹介するコードはあくまで左記テーマに限ったものになります。 カスタマイズで編集するCSSやJSのコードについては利用上の注意をご確認の上、編集ください。 詳しくはヘルプをご確認ください。 カスタマイズ 1. CSSを追加 管理画面からデザイン＞カ…
MySQL5.5でDELETE文をEXPLAINで見ようとしたらエラーになった mysql> EXPLAIN DELETE FROM samples WHERE title = "title"; ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'DELETE FROM samples WHERE title = "title"' at l…
いつ使うの？ AUTO_INCREMENTのidとは別に仮の連番をMySQLで生成したいとき 前提 ↓みたいなテーブルにMySQLで生成した連番のidを追加する id category 4291 アニメ 11 映画 9302 漫画 322 ドラマ SQL SELECT category, @tmp_id := @tmp_id + 1 tmp_id FROM ( SELECT @tmp_id := 0 FROM DUAL ) tmp, samples 結果 id category tmp_id 4291 アニメ 1 11 映画 2 9302 漫画 3 322 ドラマ 4 こんな処理を使わなきゃい…
コンストラクタで非同期処理を実施しているクラスのテストをJestで書く
constructor()で非同期処理を実施しているクラスのテストを書きたかったときの備忘録 ↓みたいにconstructor()で非同期処理を実施していて、Promiseをreturnしていない export default class A { private readonly list: any; constructor() { new Repository().fetch().then((res) => (this.list = res)); } public b() { return this.list; } } テストしたい部分をasync()で囲ってあげればOK test("sam…
必要なパッケージのinstall $ npm install --save-dev @babel/preset-typescript ts-jest @types/jest babel.config.js に追記 module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript" // 追加 ], }; テストの実施 $ npm run test > xxxxxx@1.0.0 test > jest PASS __tests__/sam…
Slackの投稿を1ヶ月単位でスプレッドシートに書き込む【GoogleAppsScript】
現状・やりたいこと やること 1. Slackでユーザーbotの作成 2. SlackAPIでSlackに投稿した1ヶ月分の投稿の取得 3. スプレッドシートにシートの作成と書き込み 4. GASのトリガー設定 コード全文 感想 参考 現状・やりたいこと プライベートで使ってるSlackがフリープラン 過去の投稿を残しておきたい 保存する投稿はDMのやりとり やること 1. Slackでユーザーbotの作成 試してないけどアプリbotだとできなさそうだからユーザーbotにした （てかDMにアプリbotって追加できないよね。。。？） メッセージ取得に必要な権限を設定してユーザーbotの作成 ch…
.gitignoreに追加してもリモートリポジトリにまだ残ってるやんけ！って毎回ググってるからいい加減覚えような .gitignoreに除外するファイル（ディレクトリ）を追加してから以下を実施する $ git rm --cached ファイル名 $ git add . $ git commit -m "chore: .gitignoreに追加" ディレクトリを除外する場合は$ git rm --cached -r ディレクトリ名でOK いちばんやさしいGit&GitHubの教本 第2版 人気講師が教えるバージョン管理＆共有入門 （いちばんやさしい教本） [ 横田紋奈 ]価格: 2420 円楽天…
webpackのbuildでmain.js.LICENSE.txtを出力させない
webpackでproduction buildしたときdist/にmain.js.LICENSE.txtを生成させたくなかった const TerserPlugin = require("terser-webpack-plugin"); module.exports = { // ...省略 optimization: { minimizer: [ new TerserPlugin({ extractComments: false, }), ], }, }; extractCommentsがデフォルトでtrueになっているのでfalseにする。 デフォルトは@preserve @licens…
Slackbotからの通知メッセージをattachmentsでリッチにする
通常のテキストはこんな感じ↓ これを↓にする GASのコード 感想 最初attachmentsに渡す値を配列にしてなかったから送信されなくてハマった。。。 個人的な用途としてはcolor, title, title_linkだけで十分かも。（footer_iconとかいらんくね？） 参考 api.slack.com
【TypeScript】Graph API を使って Instagram の投稿を取得する【2022年6月版（v14.0）】
React x TypeScriptでInstagramの投稿をサイト上に表示したかったときの備忘録 使用したGraph APIはv14.0だけど12.x, 13.xあたりも同じっぽい（多分）（未検証） 全体的な流れのうち、1, 2は書くのめんどいので割愛 Instagramをプロアカウントに変更する facebookとInstagramをリンクさせる facebook developerアカウントでアプリの作成 Graph APIで使用するアクセストークンの有効期限の延長 instagram business idの取得 instagramの投稿の取得してサイトに表示する 1. facebo…
See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする
これのこと HTML <button type="button">Button</button> ボタン部分 button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; } ボタン背景部分 button::before { position: absolute; top: 0; right: 0; bottom: 0; lef…
B2セルで=COLUMN()したときにBじゃなくて2が表示される 俺がほしいのはBなんだよ！！ ということで完成形 =SUBSTITUTE(REGEXEXTRACT(ADDRESS(ROW(), COLUMN()), "\$.+?\$"), "$", "") 長すぎる...... セル確認したときにぱっと見でどこ参照しているのか分かりづらすぎるんだけどもっと簡単に取得できる方法ない?? やってること ADDRESS()でセル参照を文字列で取得 $B$2が取得できるのでREGEXEXTRACT()で$で囲まれている文字列を検索 SUBSTITUTE()で$を空文字に変換 実際はBだけを使うことは…
Cloud Firestore で collection の基本操作
Cloud Firestore使ったときのメモ 検証用のメモだからダブルクウォートとシングルクウォートが混ざってるのは気にするな Create const docRef = await addDoc(collection(db, "collection"), { title: "title", description: "description", created_at: new Date(), }); console.log("Document written with ID: ", docRef.id); Read // 単一の取得 const ref = doc(db, "collect…
Atomフィードで取得したRedmineのチケット情報をSlackに通知する
いつ使うの？ 以下の状態のRedmineを使用しているとき チケット操作時にメール通知が来ない APIアクセスキーが発行されていない 管理権限を持っていない Slack App のRSSインテグレーションも使ったんだけど新規チケットの通知しか来ないし思いの外役立たずでした 前提 Googleアカウント作成済み Slackbot作成済み コード Slackへのリクエストは以下のライブラリを使用しています github.com function myFunction() { // Redmine のチケット情報を取得する const feedURL = 'https://{Redmineのドメイン…
弊社では作業管理ツールに Redmine を使用しています。 チケットと呼ばれる各タスクに作業時間を入力して、↓みたいに退社時に Slackbot で1日の作業内容がわかるようになっています。 (ちなみに上記のSlackbotは弊社代表の自作です。) ただ、これが死ぬほどめんどくさいんです。 作業開始時の時刻を覚えておいて作業が完了したら終了時の時刻から逆引きして時間を出すっていう、算数の引き算でつまずいた人間からすると地獄です。冗談抜きに引き算だけで30分くらい取られます。 ということでめんどくさいことはプログラムにやらせよう！ 事前準備 Toggl アカウントの作成 toggl.com こ…
Herokuデビューしたときの備忘録 結構前のだから手順抜けてるかも 前提 GitHubとHerokuのアカウントが作成済み GitHubとHerokuのアカウントが連携済み App作成 App nameは空欄にしとけばHeroku側で勝手に作ってくれるのでそのままCreate appを押す 名前つけたい場合は使われてない名前なら任意でつけてOK Deploy設定 App作成後にDeployの画面が表示されるのでDeployment MethodにGitHubを選択する Connect to GitHubが表示されるので対象のRepositoryのConnectを押す Automatic de…
こういうやつ コード <textarea></textarea> <script> const textarea = document.querySelector('textarea'); textarea.addEventListener('input', () => { textarea.style.height = null; textarea.style.height = `${textarea.scrollHeight}px`; }); </script> 改行の数をカウントしてtextareaのrowsに入れたりしたけど, それだと文字の折返しのときに高さが取れなかったのでtext…
直近死んだ犬2匹を素材にしてLINEスタンプを作りました。 store.line.me これでトークの中でレオンとネネは生き続ける。嬉しい。 一気に2匹も死んでペットロス半端なかったけどこれで少しは緩和されるといいな 多分またいつか作るから備忘録というか忘れそうな部分をまとめておきます 作り方 [方法1] LINEスタンプメーカーを使って作る [方法2] LINEクリエイターズマーケットを使って作る 申請から承認までの時間 申請がリジェクトされた。再申請から承認までの時間は？ 承認されたけどリリースされない リリースしたけど購入用URLに反映されない スタンプのタグはなにを設定すればいいの？ …
hoverでbackground-imageを切り替えたときの画像のチラつきが気になる
↓これのこと*1 See the Pen preloadなし by miyata (@m1y474) on CodePen. なんでチラつくの？ レンダリングのときは読み込まれなくて、hoverのときに初めて画像を読み込んでるから Networkタブを見てみるとhoverのタイミングで読み込んでるのがわかる 対応策 ① preloadで読み込んでおこう headタグの中にpreloadを指定する <link rel="preload" href="./images/hover.png" as="image"> あらかじめ読み込んでくれてるので初回hoverでもチラつかない！ See the P…
PHPUnit の --log-junit オプションでxmlを出力する # ./vendor/bin/phpunit tests/Feature/SampleControllerTest.php --log-junit output.xml PHPUnit 9.5.10 by Sebastian Bergmann and contributors. . 1 / 1 (100%) Time: 00:00.901, Memory: 24.00 MB OK (1 test, 1 assertion) xsltproc を使用して html に変換する # xsltproc phpunit.xslt…
Markdown でリストの中にコードブロックを含めると連番がリセットされる
問題 下記のようにリストの中にコードブロックが含まれる場合、リスト3 の番号が1になってしまう。 Markdown 1. リスト1 1. リスト2 \```php <?php echo 1; ?> \``` 1. リスト3 *1 実際の表示 リスト1 リスト2 <?php echo 1; ?> リスト3 解決策 リスト内のコードブロックにインデントを設定しよう！ Markdown 1. リスト1 1. リスト2 ```php <?php echo 1; ?> ``` 1. リスト3 実際の表示 リスト1 リスト2 <?php echo 1; ?> リスト3 ※コードブロック前に3スペース入れて…
Mac でアプリケーションウィンドウ全体のスクショを撮ったときの影、邪魔じゃねって思ったときの備忘録 defaults write com.apple.screencapture disable-shadow -boolean true Before After 影ありに戻したいときはfalseにすればOK defaults write com.apple.screencapture disable-shadow -boolean false
Mac に Xdebug をインストールして VSCode でデバッグする
経緯 ちょっとしたサンプルプログラムをホストマシンで試すときに、いつも var_dump() デバッグ使ってたけどちょっとしたサンプルプログラムだろうが何だろうが Xdebug 使ったほうがもっと楽になるよね、ハム太郎。 手順 Debug Build が no になっていることを確認 $ php -i grep 'Debug Build' Debug Build => no ついでに Xdebug がインストールされていないことも確認 $ php -m grep xdebug 何も表示されなければOK Xdebug のインストール 下記のダウンロードサイトから Xdebug をDLする…
Laravel でアクセストークンを header に含むときのAPIのテストを書く
いつ使うの？ SPAではないプロジェクト(アクセストークンの取得タイミングがMPAでのログイン時) 一部画面でアクセストークンを含むAPIを叩いている コード <?php use Tests\TestCase; class SampleControllerTest extends TestCase { public function setUp(): void { parent::setUp(); // ログイン処理 $res = $this->post('/login', [ 'email' => 'hoge@example.jp', 'password' => 'password' ]);…
Laravel で画像をアップロードする Controller のテストを書く
Laravel で画像アップロードのController周りのテストを書いたことがなかったので備忘録 <?php use Tests\TestCase; use Illuminate\Http\UploadedFile; class SampleControllerTest extends TestCase { public function test画像アップロードができる() { $res = $this->post('image/upload', ['images' => UploadedFile::fake()->image('hoge.jpg')]); $res->assertRed…
親のチェックボックスに紐付けたチェックボックスを全てチェックする
親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい ↓こういうやつ これをピュアJSで書いたときの備忘録 コード 解説 HTML 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける (親であることを判別できるのであればclass名などで管理してもOK) <label>親チェック1<input type="checkbox" data-id="1" class="check-parent"></label> 親に紐付ける子供となるチェックボックスに親のid(data-parent-id="1")を紐付ける <label>…
Carbon の diffInDays() は時間まで見ている
みんな大好きCarbonで対象日が今日の何日後かを知りたいときに, 想定していた挙動と違っていたのでメモ 対象日が本日の何日後かを知りたい 2021-11-15が本日(2021-11-14)の何日後かを知りたいとき >>> now()->diffInDays(Carbon\Carbon::parse('2021-11-15')) => 0 期待値は1だったけど, 0が返ってきた 実装を見てみる Carbon\Traits\Difference を見てみると, 継承元の DateTime クラスの diff() を見に行ってたので DateTime での挙動も確認してみる >>> (int) (…
530000 → 53万みたいに漢数字の単位を付けたかった。 タイトルに漢数字って書いてあるから詐欺ってるみたいだけど五三万への変換は今回はやりません。🙇🏿 早速コード <?php function convert($value) { // 1000以下の場合は単位を付けずに返却 if ((int) $value < 1000) { return (string) $value; } $units = ['', '万', '億', '兆', '京']; // 右から桁数を分割していく $splits = array_reverse(str_split(strrev($value), 4));…
電卓使いたいときにブラウザの Console 使う人間なので、タイマーも Console で完結させたかった 1秒ごとに Console に秒数を表示する let minutes = 0; const intervalId = setInterval(countMinutes = () => { ++minutes; console.log(minutes); }, 1000); 特定の秒数になったらカウントを停止する let minutes = 0; const intervalId = setInterval('countMinutes()', 1000); const countMinu…
Bootstrap を使ってテーブルの行をクリックした時にコンテンツを展開したい
テーブルの各行をクリックした時に行の下にコンテンツを表示する。 一覧に表示する列数が多いけど横スクロールしたくないときに使う。 tr > td の中に div を書いてたりするのでマークアップ警察は見るな 要点 ① クリックする行の tr タグに開閉トリガーをつける <tr data-toggle="collapse" data-target="#collapse-1"> ② クリックする行の tr タグの直下に tr > td でラップした開閉コンテンツを設置する td 要素は1つだけにして, 開閉トリガーの列数分の colspan で結合する <tr> <td colspan="4" cl…
Laravel で SELECT * FROM samples ORDER BY column1 DESC, column2 ASC みたいに ORDER BY を複数指定したい場合の書き方 <?php App\Models\Sample::orderBy('column1', 'desc')->orderBy('column1', 'asc')->get(); もしくは <?php App\Models\Sample::orderByDesc('column1')->orderBy('column1')->get(); 何故か毎回連想配列でできると思いこんでApp\Models\Sample…
Vue.js というより axios でファイルアップロードをしたかった 保存ボタンがなく、アップロード時にサーバーに送るのを想定 サーバーサイドのFWは Laravel を想定 <template> <div> <!-- ファイルアップロード用の input --> <input type="file" ref="image" accept="image/*" name="image" @change="uploadImage" /> </div> </template> <script> import axios from "axios"; export default { name: "…
(割とやりつくされたネタだから今更感すごいけど。。。) [ドラえもん CSS] とかでググると実装方法がわかってしまうため今回は終始ググらないようにして実装 できたもの 実装 感想 所詮丸と直線の組み合わせだし position とか使わんくても Flexbox だけでモダンなドラえもん作ってやるぜ!!!って思って手を出したけど意外とムズかった。position 使いまくって結局泥臭いコードになってる。(HTML構造のせいかもだけど) 完成後に他の方のドラえもんも見て回ったけど↓このドラえもんの完成度が圧倒的だった。体もあるし shopdd.jp 後これも。 俺の想定してたドラえもんの口がまさ…
(function () { if (!navigator.geolocation) { console.warn("Geolocation APIを利用できない環境"); return; } navigator.geolocation.getCurrentPosition( (positions) => { // 位置情報の取得成功時の処理 console.log(positions.coords.latitude, positions.coords.longitude); }, (error) => { // 位置情報の取得失敗時の処理 const errors = { 1: '位置情報の…
PHPで言うところの range(1, 20) をやりたかったけどJSにはそれらしき機能がなく毎回調べているのでメモ [...Array(5).keys()] // [0, 1, 2, 3, 4] Array.from(Array(5).fill().keys()) // [0, 1, 2, 3, 4] indexを0以外から始めたいときはmapで足してあげる [...Array(5).keys()].map(row => row+3) // [3, 4, 5, 6, 7] 単純に個数分だけ作成したいときはArray(5).fill()でOK
array_chunk() みたいに全部均等ではなく, 3個, 2個, 2個, 6個, 1個, 1個 ... みたいに分割数が可変な配列を作りたかったときに地味にハマったのでメモ <?php $src = range(1, 15); $chunks = [3, 2, 2, 6, 1, 1]; // 分割したい個数 $offset = 0; $values = []; foreach ($chunks as $chunk) { $values[] = array_slice($src, $offset, $chunk); $offset += $chunk; } 結果 array(6) { [0…
Terminal 起動時に ｢You have new mail.｣ と表示された場合の対処法
ホストマシンに設定したテスト用の cron が失敗してた時にメールが届いてた 放置してたけど地味に鬱陶しかったので対処したときのメモ $ mail >U 1 # 未読のメールが件数分表示される >N 2 >N 3 >N 4 ? d* ? q mail コマンドで未読メールの一覧を表示 適当に件名で判断して全削除OKの場合はそのままd* qで終了 削除オプション command 意味 d1 1だけ削除 d1 2 1と2を削除 d1-10 1~10を削除 d* 全削除 先頭のアルファベットの意味 alphabet 意味 N 新着 U 未読 参考 linux.just4fun.biz pc-karu…
Laravel でQueryBuilderで組み立てられたSQLを確認する方法
QueryBuilder(or Eloquent ORM)で組み立てたSQLを確認したい時に使う いずれも tinker で実施 ①QueryBulderから確認する場合 >>> App\Models\User::where('id', 1)->toSql() => "select * from `users` where `id` = ?" ②複数のQueryBuilderから確認したい場合 >>> DB::enableQueryLog() # ログの出力をONにする => null >>> App\Models\User::find(1) # SQLを確認したい処理分だけ実行する => A…
Selenium 童貞捨てたのは Python だったけど使い慣れてる PHP でも Selenium を使いたかったので備忘録 以前やった内容を後日まとめてるのでもしかしたら手順に抜けがあるかも。。。 前提 手順 1. ChromeDriver のダウンロード 2. chromedriver のパスを通す 3. selenium-server-standalone のダウンロード 4. selenium-server-standalone をホームディレクトリに移動 5. composer で php-webdriver/webdriver のインストール 6. 適当なプログラムの作成 7.…
※この記事にはUSJのアトラクションである 鬼滅の刃 XRライド や スーパー・ニンテンドー・ワールド に関するネタバレがあります。 知人の誕生日＆鬼滅コラボを目当てにユニバ行ってきたので備忘録 エクスプレス・パスの購入 入場券付きホテルの予約 入場待ち 入場 アトラクションとか 持っていってよかったもの 持っていかなくてよかったもの エクスプレス・パスの購入 目当てが「鬼滅の刃 XRライド」だったから絶対待ち時間エグいだろうと思って事前に購入(購入にはClubユニバーサルへのアカウント登録が必要) 9/21のチケットを購入できるのが8/18~だったから8/18の0時になった瞬間にオンライン購…
前からやってみたいと思いつつ後回しにしていた。。。 文字列をLeet文字に変換するっていう使い所がないパッケージだけど作れたことに満足:) <?php use Leet\Leet; Leet::generate('shinazugawa sanemi') // 5h1n42u64w4 54n3m1 今は数字への変換しかできないけど記号への変換も今後対応する予定 そして Travis CI 童貞をやっと捨てた いまいち使い方をよくわからんまま使ってるけどテスト通ってるのでヨシ！ packagist.org 【再販】【コンプリート】仕事猫現場ラバーキーチェーン 現場猫 ★全6種セット価格：1700…
「ブログリーダー」を活用して、前科さんをフォローしませんか？
イージングって何？ 開始とか終了地点に近づくにつれて速度が変わるアレのこと。 今更感満載なので詳しくはググってね。 実装 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)…
お題「2023年に読んだおすすめ漫画」 「2023年に出版された漫画」ではなく、「2023年に自分が読んだ漫画」を挙げています。 一部ネタバレを含みます。 順番は思いついた順であって順位ではないです。 アフィリンクとかないから全員読め。 おすすめ漫画10選 1. ダイヤモンドの功罪 2. 住みにごり 3. 子育てアフロ田中 4. ぬらりひょんの棲む家 5. 君と宇宙を歩くために 6. タヌキツネのゴン 7. ムムリン 8. あらくれお嬢様はもんもんしている 9. ザシス 10. 俺たち ただの おすすめ漫画10選 1. ダイヤモンドの功罪 「オレは野球だったんだ！」 運動の才に恵まれた綾瀬川次…
はじめに PC整理してたらメモに卵巣腫瘍の入院レポが出てきたから供養。 （※ 生理とか💩とか下の話が出ます。） 時系列 2023/01/03（水） 生理予定日+1 子宮が時折ズキズキ痛む。 その後も01/08（日）までほぼ毎日軽い痛みがあったけどいつもの生理前症状と思って放置する。 2023/01/08（日） 生理予定日+9 21:00頃、風呂入ってるときに痛みで立つことができなくなる。 湯船に浸ると回復したから、そろそろ生理来るかなと思ってまた放置。 2023/01/09（月・祝） 01:00頃 生理予定日+10 横になっててもズキズキ痛むようになってきた。 体を動かすたびに痛くて仰向けにも…
はじめに 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ディレクトリが作成され、…
動作確認環境 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} 名称はAn…
毎回「テンキーレイアウトって何がどう違うんだっけ・・・？」ってなって実機で確認してる記憶喪失だから画像と一緒にまとめとく 検証環境 デバイス 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-p…
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.…
エラー #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 fo…
1. 必要なパッケージのインストール $ npm i react-native-svg 2. SVGアイコンとなるコンポーネントファイルの作成 import React from 'react'; import { View } from 'react-native'; import Svg, { Polygon, Line } from 'react-native-svg'; const AlertOctagon = (props) => ( <View> <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={…
検証用に触ってみた記録 完成形 <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', // 表示する…
はじめに 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)" V…
Venturaにアップデートしてから$ react-native iosがエラーを吐くようになった TOC TOC やったこと コマンドラインツールの再インストール エラー 対策 Xcodeのversionの切り替え エラー 対策 ライセンスへの同意 エラー 対策 エラーは出てないけどやったこと キャッシュ系 シミュレーター系 最後に やったこと コマンドラインツールの再インストール エラー xcodebuild: error: An error occurred establishing a connection to the installation service. 対策 $ sudo …
前提 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を指定…
やりたいこと 会員情報を複数取得したい 会員情報を複数取得できる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<{ …
やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…
やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった 実装 一部抜粋 const image = new Image(); image.src = "表示したい画像"; image.onload = () => { ctx.beginPath(); // 半径40pxの正円 ctx.arc(50, 50, 40, 0, 2 * Math.…
Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録 canvas描画部分 const ctx = this.canvas.current?.getContext('2d'); if (!ctx) { return; } ctx.fillStyle = "black"; ctx.fillRect(30, 0, 290, 450); ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(100, 50, 15, 0, 2 * Math.PI); ctx.fill(); 修正前 <canvas style={{ widt…
はじめに API Blueprint でクエリパラメータをつけるエンドポイントを定義したかったけど、出力されたフォーマットが想定していたものと違っていた時の備忘録 修正前 http://example.com/api/example?date=2000-01-10 みたいなURIを想定して、以下のように書いた（一部抜粋） ## サンプル [/api/example{?date}] ### 取得 [GET] + Parameters + date: 2000-01-10 (string) - 対象年月日 aglio を使って出力されたもの 2000で切れてる....!!!! 修正後 値をバックク…
はじめに アプリがフォアグラウンドにあるタイミングで特定の処理を実施したかった 検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 コード import React from 'react'; import { AppState } from 'react-native'; class App extends React.Component { componentDidMount() { AppState.addEventListener('change', () => { if (AppState.curre…
検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 iOS ios/{project}/AppDelegate.mを以下のように修正する @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 省略 // ↓追加 if (@available(iOS 13, *)) { self.win…
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.…
エラー #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 fo…
1. 必要なパッケージのインストール $ npm i react-native-svg 2. SVGアイコンとなるコンポーネントファイルの作成 import React from 'react'; import { View } from 'react-native'; import Svg, { Polygon, Line } from 'react-native-svg'; const AlertOctagon = (props) => ( <View> <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={…
検証用に触ってみた記録 完成形 <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', // 表示する…
はじめに 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)" V…
Venturaにアップデートしてから$ react-native iosがエラーを吐くようになった TOC TOC やったこと コマンドラインツールの再インストール エラー 対策 Xcodeのversionの切り替え エラー 対策 ライセンスへの同意 エラー 対策 エラーは出てないけどやったこと キャッシュ系 シミュレーター系 最後に やったこと コマンドラインツールの再インストール エラー xcodebuild: error: An error occurred establishing a connection to the installation service. 対策 $ sudo …
前提 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を指定…
やりたいこと 会員情報を複数取得したい 会員情報を複数取得できる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<{ …
やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30); const results = []; let tmp = ""; src.split("").map((row) => { tmp = tmp + row; // 16文字の場合に配列に入れる if (tmp.length === 16) { results.push(tmp); // 文字カウント用の変数をクリ…
やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい（丸型にトリミングされたように表示させたい） やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜！？！？！？！数学できないよ〜！！」（数学関係あるかもわからない）って思ってたけど全然使わなかった 実装 一部抜粋 const image = new Image(); image.src = "表示したい画像"; image.onload = () => { ctx.beginPath(); // 半径40pxの正円 ctx.arc(50, 50, 40, 0, 2 * Math.…
Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録 canvas描画部分 const ctx = this.canvas.current?.getContext('2d'); if (!ctx) { return; } ctx.fillStyle = "black"; ctx.fillRect(30, 0, 290, 450); ctx.fillStyle = "orange"; ctx.beginPath(); ctx.arc(100, 50, 15, 0, 2 * Math.PI); ctx.fill(); 修正前 <canvas style={{ widt…
はじめに API Blueprint でクエリパラメータをつけるエンドポイントを定義したかったけど、出力されたフォーマットが想定していたものと違っていた時の備忘録 修正前 http://example.com/api/example?date=2000-01-10 みたいなURIを想定して、以下のように書いた（一部抜粋） ## サンプル [/api/example{?date}] ### 取得 [GET] + Parameters + date: 2000-01-10 (string) - 対象年月日 aglio を使って出力されたもの 2000で切れてる....!!!! 修正後 値をバックク…
はじめに アプリがフォアグラウンドにあるタイミングで特定の処理を実施したかった 検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 コード import React from 'react'; import { AppState } from 'react-native'; class App extends React.Component { componentDidMount() { AppState.addEventListener('change', () => { if (AppState.curre…
検証環境 $ react-native -v react-native-cli: 2.0.1 react-native: 0.67.3 iOS ios/{project}/AppDelegate.mを以下のように修正する @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 省略 // ↓追加 if (@available(iOS 13, *)) { self.win…
nodeのversionを切り替えたときに以下のメッセージが表示された nodebrew use v16.8.0 Use of uninitialized value $b1 in numeric comparison (<=>) at /Users/XXX/.nodebrew/current/bin/nodebrew line 678. Use of uninitialized value $a1 in numeric comparison (<=>) at /Users/XXX/.nodebrew/current/bin/nodebrew line 678. use v16.8.0 ググっ…
![[Firmware Bug]: TSC_DEADLINE disabled due to Errata｜Proxmox/Debian](https://img.blogmura.com/sites/1153993/post-images/62709645.webp/crop/120x120)
