yuw27b’s blog

技術メモと雑記

JavaScriptでクリップボードにコピー(2022年版)

※ 2017年に書いた記事が、2022年現在では非推奨になっているAPIを使っているので、改めて。 変わったところ document.execCommand('copy')が仕様からなくなり、非推奨になりました(MDN)。今のところどのブラウザでも動作しますが、今後も動く保証はありま…

ElectronでPuppeteerを使う場合の複数プラットフォーム対応

Electronで作っているデスクトップアプリ内で、Puppeteerを使った時のメモです。 結果的には、各プラットフォーム用のChromiumを手動でダウンロードして追加し、Puppeteerに対してChromiumのパスを明示的に指定する必要がありました。npm install puppeteer…

Web上のExcelファイルからデータを読み取る(Node.js)

備忘録。 const request = require('request'); const Excel = require('exceljs'); const getBuffer = (url) => { return new Promise((resolve, reject) => { request(url, {encoding: null}, (error, response, body) => { if (error !== null) { reject(…

CSS: overscroll-behavior

CSS

端までスクロールした時の振る舞いを、CSSで指定できる、というものです。仕様:CSS Overscroll Behavior Module Level 1 対応状況:Can I use... Support tables for HTML5, CSS3, etc MDNが分かりやすいです: overscroll-behavior - CSS: カスケーディン…

CSS:画面にぴったり収まる碁盤の目を作りたい

こういうものを作りたい: 画面にぴったり収まってほしい(background-sizeのcontainみたいな) 画面が横長なら縦の余白がゼロ、縦長なら横の余白がゼロ 画面リサイズに応じてこちらもサイズが変わる 作ったもの: See the Pen Square grid by Yu Watanabe (…

MySQL:外部キー制約のあるカラムを削除する

いつもカラムが消せない!って調べることになるのでメモ。FOREIGN KEYが設定されたカラムを削除しようとするとエラーが出る。 ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constraint failsまずFOREIGN KEY を削除する必要が…

Code Climateのテストカバレッジが「?」になった

GitHubに、Code Climateのテストカバレッジのバッジを貼り付けていたのですが、気付いたら「?」になっていました。この部分: (「?」の状態をスクショし忘れてしまったけど、左のMaintenabilityは表示されてて、テストカバレッジだけ「?」に)CircleCIで…

HTMLのprogress要素を使ってプログレスバーを表示する

HTMLにはprogress要素があり、HTMLのみでブラウザ上にプログレスバーを表示することができます。2020年7月時点では、どのブラウザでも問題なく利用できそうです。 ブラウザ対応状況:https://caniuse.com/#feat=progress WHATWG仕様(Living Standard): ht…

CSSでコンテンツのトグル表示を実装する

CSS

チェックボックスを使ってます。 JavaScriptを使ったほうが表現力は高いですが、他にJS使う予定もないしとりあえず隠せればいいか…みたいなページでたまにやるやつです。 See the Pen Toggle content by CSS by Yu Watanabe (@yuw27b) on CodePen. 補足みた…

MySQLのJSON型を使ってみる

MySQLは、バージョン5.7からJSON型がサポートされています。 MySQL :: MySQL 5.7 Reference Manual :: 11.5 The JSON Data Type5.7のリリースは2015年なのでだいぶ前ですが、今さらながら使ってみました。 こういう入力フォームがあって: しかも増やせる: …

ReactでModal windowを実装する

汎用コンポーネントも存在しますが、自作のミニマル実装コードです。ひとまずコード(スタイルなどは簡略化しています) import React from 'react'; import PropTypes from 'prop-types'; class ModalWindow extends React.Component { constructor(props) …

videoタグのダウンロードオプション

HTMLのvideoタグで動画を表示すると、Chromeで右下のメニューをクリックすると「ダウンロード」という項目があります。(他のブラウザでは確認できませんでした。) これは、controlslist属性に"nodownload"というパラメータを指定すると非表示になります。c…

GETで見られたくないものを送信するときはヘッダーに入れる

HTTPSで通信していても、GETのクエリパラメータは暗号化されないので、見られたくないものを送信するときは、POSTで送るか、HTTPのリクエストヘッダーに入れるようにしています。クエリパラメータはURLの一部なので、https://example.com?page=1みたいな平文…

PHPがセッションIDを発行しなくなった

突然PHPのsession_id()が空白を返すようになってしまった もちろん本当に「突然」なのではなく、何かいじってしまったからですが。 PHPのセッション情報は、デフォルトではファイルに保存される ので、そのファイルの読み書きができなければセッションIDも発…

letter-spacingとtext-align: center(とcalc())

CSS

letter-spacingとテキストの中央揃えを併用すると、左右の空白がずれて見えるのでpaddingで調整することがよくある。例えばこんな見た目のボタンを作るのに、 padding: 5px; font-size: 16px; letter-spacing: 1em; text-align: center; /*〜略〜*/ とする。…

GCP Cloud FunctionsでPuppeteerを使う

1日1回スクレイピングしてきてSlackに流してほしい、みたいな簡単なやつなので、Firebaseまではいらない。Cloud FunctionでランタイムにNode.jsを選択→package.jsonとindex.jsを登録しておき、Cloud Scheduler->Pub/Sub経由で呼び出せばOK。 プチハマりどこ…

2019年の振り返り

もう22時だ…簡単に振り返り。(あれ、去年は書いてない) 今年も引き続き、大学の研究室でエンジニア業をしていました。ほぼ1人チーム開発です。 (昨年度からは副業しづらい契約なので、フリーランス業はお休み中) Webアプリ開発 フロントはReact、バック…

CSSカウンターを使って変則的な番号付きリストを実装する

CSS

久しぶりにCSSカウンター便利だな、と実感したのでメモ。CSSカウンターとはこういうものです: CSS カウンターの使用 - 開発者ガイド | MDN こんな感じの文書をWebページに掲載するときに(あくまで例ですがこういう構造)、 マークアップにはOL要素を使うの…

改行入りのテキストをReactでレンダリングする

改行が含まれてると分かっている時は、component内に関数を用意して、行ごとにpタグで囲む。または、brタグを挿入する const textWrap = (text) => { if (typeof text !== 'string') { return null; } return text.split('\n').join('<br />'); } 改行が2連続の場…

ボタンを押したことが伝わるCSS

CSS

a要素やbutton要素のボタンのCSSは、最近よくこんな感じにします。 :active属性でボタンを押下した状態のスタイルを指定できますが、1px下に動かすだけでもユーザーに「ボタンを押した」ことが伝わります。 See the Pen button:active by Yu Watanabe (@yuw2…

INSIDE FRONTEND #3に行ってきました

INSIDE FRONTEND #3に行ってきました。#1以来、2回目の参加でした。タイトル見て興味を持っていたのは、 大規模なフロントエンド開発の話 BFF・TypeScriptあたりの現場の話 あたりでした。Webサービス(主にフロントエンド開発)の機能の取捨選択や技術選定…

Let's Encryptの証明書更新コマンドは、月1回実行ではダメ

TL;DR Let's Encryptが発行するSSL証明書の有効期間は90日 ただし時計のずれを考慮して発行(更新)手続きの1時間前を"issue date"として発行される(つまり有効期間は発行時点からだと90*24-1時間) なので、cronで「毎月x日」の設定で月に1回更新コマンド…

RMagickでよく使う画像処理

準備 Rubyで画像を編集するのにRMagickというgemを使う。 ※ImageMagickという画像操作ソフトウェアをRubyから使えるようにするものなので、そもそもOSにImageMagickをインストールしておく必要がある。OSごとの詳細はRMagickのGitHubリポジトリにある: GitH…

HighchartsをReactで使う

ReactなWebアプリケーション内に、Hightchartsでグラフを描画するときのメモ。基本的には、Hightcharts公式のReact用ラッパーライブラリを使えば良い。 GitHub - highcharts/highcharts-react: The official Highcharts supported wrapper for Reactnpmにあ…

NDS第59回勉強会に行ってきたよ

参加&発表して来ました!nagaoka.techtalk.jp・・・次でちょうど60回なんですね! いつもどおりいろいろな発表が聞けて、良いインプットになりました。 テーマが「学習・AI・入学」ということで、機械学習について発表もさせてもらいました。 私の働く研究…

TDDBC 長岡 に参加してきました

TDDBC 長岡 2019-02 - connpass に参加してきました。 参加の動機 私は普段、業務で主にWebアプリケーションを作っていますが(フロント・サーバ両方)、機能もユーザーも限定的で小規模なものが多く、あまりテストを書くことはありません。 テストを書いた…

GCEでGPUを使うとメンテナンスで止まることがある

Google Compute EngineではインスタンスにGPUを追加することができます。 これを利用して、数日かかるDeep learningの計算をしていたのですが、途中で止まってしまうケースがありました。突然終了するらしく、プログラムから出力していたログ(テキストファ…

カレンダーUIを実装するReact component

<Airbnb謹製のReact用カレンダーUIコンポーネントの紹介です>Reactで作っているWebアプリケーションにカレンダーUIが必要だったので、どんなのがあるかな、と検索したところ、いろいろありました。 例えばこんな: GitHub - clauderic/react-infinite-cale…

NDS第57回勉強会に行ってきたよ

第57回勉強会(2018/09/29) - 長岡 IT開発者 勉強会(NDS)に参加してきました! 前回(7月)は行かれなかったので、半年ぶりでしたが、今回もとっても充実した時間になりました。 主催のcivicさん、みなさまありがとうございました! (あっ、半年前は行ったの…

npmのoptionalDependenciesの使いどころ

npmのpackage.jsonの依存パッケージの定義には、よく使うdependencies、devDependenciesの他に、optionalDependenciesというのもあります。今まで存在を知らなかったのですが、「optional」という名のとおり、なくても問題ないとか、特定の環境でだけ必要と…