2022-01-01から1年間の記事一覧

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

前提 Dockerイメージにはphp-apacheを使用 ディレクトリ構成 . ├── docker/ │ ├── Dockerfile │ ├── apache2/ │ │ └── sites-available/ │ └── ssl/ └── docker-compose.yml 証明書の作成 作成前に秘密鍵たちを格納しておくディレクトリを作っておく $ mkdir…

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

やりたいこと 会員情報を複数取得したい 会員情報を複数取得できるAPIが存在しない 実装 APIへアクセスするファイル export default class Sample { public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> { return Promise.al…

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

やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30);…

canvasに表示した画像を丸で囲って表示する

やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい(丸型にトリミングされたように表示させたい) やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜!?!?!?!数学できないよ〜!!」(数学関係あるかもわからな…

canvasで正円を描画したいのに楕円になってしまう

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…

API Blueprintでパラメータにハイフン(-)が含まれる場合にハイフン以降が出力されない

はじめに API Blueprint でクエリパラメータをつけるエンドポイントを定義したかったけど、出力されたフォーマットが想定していたものと違っていた時の備忘録 修正前 http://example.com/api/example?date=2000-01-10 みたいなURIを想定して、以下のように書…

React Nativeでフォアグラウンドを検知する

はじめに アプリがフォアグラウンドにあるタイミングで特定の処理を実施したかった 検証環境 $ 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 exte…

Rect Nativeでダークモードを無効にする

検証環境 $ 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:(…

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 co…

【GoogleAppsScript】SESAME API を使ってGASから施錠・解錠する

はじめに この記事は過去に投稿したSlackからNatureRemoのAPIを叩く記事の延長編です。 iliiliiiliili.hatenablog.jp 外出時に電化製品の電源オフったあとに、そのまま鍵の解錠→再施錠を実施するためにSESAME APIを使用します:) やること SESAME APIの準備 G…

【GoogleAppsScript】朝に雨が降っていたら傘を持って帰るのを忘れないようにSlackに教えてもらう

(最近SlackとGASの記事ばっか書いてる気がする...) はじめに 以下を解消するのが目的です 朝に雨が降ってると退勤時に雨が降ってようが降ってまいが、会社の傘立てに傘を忘れる確率が100%(降ってるときは傘立てが事務所にあるから取りに戻る必要がある) …

【GoogleAppsScript】Slackに投稿したらNature RemoのAPIを使って照明とエアコンを消す

はじめに 外出時にいつも同居人に外出する旨のメッセージを送ってるんだけど↓の3つをやらなくちゃいけないのがめんどい Nature Remoで照明を消す Nature Remoでエアコンを消す Slackでメッセージを送る 「Slackにメッセージを送るのが前提としてあるんだった…

はてブロの記事が投稿から1年以上経過している場合にアラートを表示する

経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書き…

MySQLのDELETE文をEXPLAINで確認する

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 fo…

MySQLで連番のカラムを作成する

いつ使うの? AUTO_INCREMENTのidとは別に仮の連番をMySQLで生成したいとき 前提 ↓みたいなテーブルにMySQLで生成した連番のidを追加する id category 4291 アニメ 11 映画 9302 漫画 322 ドラマ SQL SELECT category, @tmp_id := @tmp_id + 1 tmp_id FROM (…

コンストラクタで非同期処理を実施しているクラスのテストをJestで書く

constructor()で非同期処理を実施しているクラスのテストを書きたかったときの備忘録 ↓みたいにconstructor()で非同期処理を実施していて、Promiseをreturnしていない export default class A { private readonly list: any; constructor() { new Repository…

TypeScriptでJestを使う

必要なパッケージのinstall *1 $ npm install --save-dev @babel/preset-typescript babel.config.js に追記 module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript" // 追加 ], }; テストの…

Slackの投稿を1ヶ月単位でスプレッドシートに書き込む【GoogleAppsScript】

現状・やりたいこと やること 1. Slackでユーザーbotの作成 2. SlackAPIでSlackに投稿した1ヶ月分の投稿の取得 3. スプレッドシートにシートの作成と書き込み 4. GASのトリガー設定 コード全文 感想 参考 現状・やりたいこと プライベートで使ってるSlackが…

特定のファイルを後からgitignoreに追加する方法

Git

.gitignoreに追加してもリモートリポジトリにまだ残ってるやんけ!って毎回ググってるからいい加減覚えような .gitignoreに除外するファイル(ディレクトリ)を追加してから以下を実施する $ git rm --cached ファイル名 $ git add . $ git commit -m "chore…

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, …

Slackbotからの通知メッセージをattachmentsでリッチにする

通常のテキストはこんな感じ↓ これを↓にする GASのコード 感想 最初attachmentsに渡す値を配列にしてなかったから送信されなくてハマった。。。 個人的な用途としてはcolor, title, title_linkだけで十分かも。(footer_iconとかいらんくね?) 参考 api.sla…

【TypeScript】Graph API を使って Instagram の投稿を取得する【2022年6月版(v14.0)】

React x TypeScriptでInstagramの投稿をサイト上に表示したかったときの備忘録 使用したGraph APIはv14.0だけど12.x, 13.xあたりも同じっぽい(多分)(未検証) 全体的な流れのうち、1, 2は書くのめんどいので割愛 Instagramをプロアカウントに変更する fac…

hoverしたときにテキストの枠線を左から右に引く

See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする

ボタンをhoverしたときに背景色をスライドさせる

これのこと 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 { posit…

スプレッドシートで列名のアルファベットを取得する

B2セルで=COLUMN()したときにBじゃなくて2が表示される 俺がほしいのはBなんだよ!! ということで完成形 =SUBSTITUTE(REGEXEXTRACT(ADDRESS(ROW(), COLUMN()), "\$.+?\$"), "$", "") 長すぎる...... セル確認したときにぱっと見でどこ参照しているのか分か…

Cloud Firestore で collection の基本操作

Cloud Firestore使ったときのメモ 検証用のメモだからダブルクウォートとシングルクウォートが混ざってるのは気にするな Create const docRef = await addDoc(collection(db, "collection"), { title: "title", description: "description", created_at: new…

Atomフィードで取得したRedmineのチケット情報をSlackに通知する

いつ使うの? 以下の状態のRedmineを使用しているとき チケット操作時にメール通知が来ない APIアクセスキーが発行されていない 管理権限を持っていない Slack App のRSSインテグレーションも使ったんだけど新規チケットの通知しか来ないし思いの外役立たず…

Toggl の作業内容を Redmine に登録する

弊社では作業管理ツールに Redmine を使用しています。 チケットと呼ばれる各タスクに作業時間を入力して、↓みたいに退社時に Slackbot で1日の作業内容がわかるようになっています。 (ちなみに上記のSlackbotは弊社代表の自作です。) ただ、これが死ぬほど…

GitHubにpushしたらHerokuへデプロイする

Herokuデビューしたときの備忘録 結構前のだから手順抜けてるかも 前提 GitHubとHerokuのアカウントが作成済み GitHubとHerokuのアカウントが連携済み App作成 App nameは空欄にしとけばHeroku側で勝手に作ってくれるのでそのままCreate appを押す 名前つけ…

textareaの入力文字数によって高さを可変にする

こういうやつ コード <textarea></textarea> <script> const textarea = document.querySelector('textarea'); textarea.addEventListener('input', () => { textarea.style.height = null; textarea.style.height = `${textarea.scrollHeight}px`; }); </script> 改行の数をカウントしてtextareaの…