トップページは常に最新記事にしたい、つまりビルドするごとに内容が変わる（かも）という状態にしたい。 WordPressなんかでトップページを「最新の投稿」にする、みたいな設定がある思うんですが、ああいうイメージです。 Routing -> Rest parameters -> un…

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

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

備忘録。 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で指定できる、というものです。仕様：CSS Overscroll Behavior Module Level 1 対応状況：Can I use... Support tables for HTML5, CSS3, etc MDNが分かりやすいです： overscroll-behavior - CSS: カスケーディン…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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