生活の跡

個人的な備忘録

Web

GatsbyJSで Runtime Error「Cannot read property 'pagetitle' of undefined」が発生した

経緯 $ gatsby develop で開発サーバを起動したところ、ブラウザでRuntime Error「Cannot read property 'pagetitle' of undefined」が表示されてしまいました。 環境 macOS Big Sur gatsby 3.3.0 エラー画面 Runtime Error 解決方法 エラーが生じたファイル…

GatsbyJSで「warning Anonymous arrow functions cause Fast Refresh to not preserve local component state.」が表示された

経緯 $ gatsby develop で開発サーバを起動したところ、警告「warning Anonymous arrow functions cause Fast Refresh to not preserve local component state.」が表示されました。 警告に対処したら今度はエラーが発生して苦戦したので、警告もエラーも出…

yarnのプラグインのバージョンを確認する

経緯 Gatsbyでエラーが解消できず、ひとまず怪しそうなプラグインのバージョンを調べたかったのであります。 環境 macOS Big Sur(11.2.3) yarn 1.22.10 確認方法 ターミナルで以下のコマンドを実行します。 $ yarn info [プラグイン名] versions 私が調べた…

gatsby develop で[Syntax Error: Unexpected Name "implements"]が発生した

経緯 GatsbyでWeb制作をしており、CMS(※)にはContentfulを使っています。Contentfulのデータを扱うために必要なプラグイン gatsby-source-contentful をインストールし、環境変数を渡して開発サーバを$gatsby developで起動したらエラーが発生しました。 (※)…

少人数の組織用のポータルサイトを、Gatsby+XFREE(エックスフリー)で構築する

経緯 ポータルサイト作成の動機 有期雇用のメンバーが多い少人数のチームで働いています。新しいメンバーが加わっても事業の理念や目的を共有しやすくするために、内部向けポータルサイトを作成することにしました。 共通部分は外部ファイルとして作成したい…

Linux環境(WSL)のファイルが、Windows10にインストールしたBracketsで編集できない

経緯 Windows10にLinux環境(WSL)を構築し、GatsbyJSでWebページを作成していました。 しかし、Windows10にインストールしたエディタ「Brackets」でCSSのファイルを編集しようとすると、「ファイルを変更する権限がありません。」というエラーが出てしまって…

HTML+CSSで素因数分解の筆算を書く

概要 十進数を二進数に変換する手法をブログで取り上げるため、Webページで素因数分解の筆算を書きたいと思いました。イメージはこんな感じです。 方針 はじめに考えたこと 数式といえばTeX(テフ)だろ!(※)と思ってWeb検索したところ、Yahoo知恵袋で似たよ…

mathjaxで掛け算の筆算を記述する

Web

概要 HTMLで掛け算の筆算を記述します。筆算はTeX記法で記述し、mathjax(2.7.0)のCDNを利用して変換します。 やりたいイメージ コード(HTML) <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> \begin{array}{rr} & 21 \\ \times) & 32 \\ \hline & 42 \\ & 63 \hspace{0.5em} \\ \hline & 672</body></html>…

Chart.jsの散布図で、データを一つずつプロットする

やりたいこと こういう感じで、一定時間間隔でデータを一つずつプロットしたい。 横軸が時間のデータではアニメーションにする必要性を感じませんが、媒介変数表示の場合などは時間に沿ってプロットすることで理解しやすくなる気がします。 ライブラリ ・Cha…

Chart.jsで(x, y)以外の変数名で計算したデータをグラフに描画したい

やりたいこと 物理法則に従う運動の時間発展を計算し、時間t-位置x のグラフとしてプロットしたい。 前提 グラフはChart.js(2.7.3)で描画します。 課題 データが描画されない。。 原因 Chart.jsの描画処理に渡すデータを配列に格納するとき、キーを(x,y)にす…

div要素の左側に、90度回転させた文字列を配置したい

概要 つまり、こんな感じのことがしたい。 縦書きにしたいのではなく、横書きの文字列を90度回転させたいのである。 手順 CodePenを使って試します。 1. 文字列もdiv要素で用意し、横並びにする まずは、display: flex;を設定した親要素を用意し、div要素を…

CSSで台形を描く手順と仕組み

概要 div要素にCSSを適用するだけで、台形を描くことができます。仕組みを理解していなかったので調べました。 台形を描く手順 CodePenで作成した画像を使って紹介します。 1. borderを設定したdiv要素を用意する width=100px; height=100px;のdiv要素を、50…

Chart.js で指定した横軸の範囲を塗りつぶす

やりたいこと イメージは次のキャプチャの通りです。 使用したライブラリ jQuery 3.4.1 Chart.js 2.9.3 コード HTMLのbody部分 <div class="canvas-wrapper"> <canvas id="chart"></canvas> </div> javaScript(jQuery) Chart.js のプラグイン機能を使います。ここでは、1985年〜1990年の範囲を塗りつぶすように設定します…

Chart.jsで、横軸の閾値を境にデータの色を変える

概要 例えば、年ごとの時系列データがあったとして、平成元年以降は色を変えて強調したいというような場合を想定した処理です。 完成イメージ 閾値が変更されたら、閾値を境にデータの色を変更します。 使用したライブラリ jQuery 3.4.1 Chart.js 2.9.3 コー…

画面幅より広い親要素内で、画面に表示されている両端の子要素を取得する

img { border: 1px solid #000; } 概要 年表のWebアプリを作っています。すべての期間が画面幅に収まらないため、横スクロールで一部の期間のみ表示させています。 画面に表示されている両端の年を取得する必要が出てきたので、jQueryでの実装方法を調べまし…

FuelPHP の as_array() で取得したDBデータを、1次元の連想配列に変換する

概要 FuelPHPでは、クエリビルダを使ってDBのデータを取得できます。結果に対してas_array()を使うと2次元の連想配列で取得できます。取得したすべてのレコードをループで処理する場合は、扱いやすい形です。 一方、ある条件に一致するレコードの特定のフィ…

position: absolute; を適用すると、次のDOM要素が重なってしまう

困ったこと あるブロック要素に対してposition: absolute;のスタイルを適用したところ、その次のDOM要素が重なってしまいました。 回避策 position: absolute;を適用したブロック要素と同じ高さのダミー要素を間に挟みます。

西暦と和暦の表示を切り替えるラジオボタンを設置する

概要 システム開発において、整数の連番である西暦は扱いやすいです。しかし、元号も令和になりましたし、日本人の感覚としては和暦の方が捉えやすいことも多いです。 消費税の導入やベルリンの壁が崩壊したのは平成元年です。1989年と言われるより印象に残…

FuelPHP の DBUtil::create_table に含めるフィールドに、on update CURRENT_TIMESTAMP 属性を付与する

概要 FuelPHP のマイグレーションにて、テーブル作成と同時に初期データも追加します。更新日時のフィールド「updated_at」にon update CURRENT_TIMESTAMP属性を付与するための方法を記します。 環境 FuelPHP 1.8.2 方法 公式ドキュメントだけではわからなか…

FuelPHP で ParseError: syntax error に悩んだ結果、原因は全角スペースだった

img{ border: 1px solid #000; } 概要 表題でオチまで述べていますが、エラー内容から原因を特定するまでに時間がかかったので一応メモしておきます。 環境 FuelPHP 1.8.2 エラー内容 キャプチャ テキスト ErrorException [ Fatal Error ]: Method Fuel\Core…

php composer.phar update したら 「Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.」と言われた

概要 FuelPHPで単体テストの学習がてら PHPUnit の導入を試みていたのですが、その過程で composer.json に記載したパッケージを更新しようとしたら何やら表題の警告が出ました。 環境 Mac OS Catalina ターミナルに打ち込んだコマンド composer.json ファイ…

Chart.jsのグラフをボタン押下時に更新する

概要 縦軸が金額になるグラフを作っていて、単位を千円とか百万円とかに切り替えるボタンが欲しくなりました。両方作って表示すればいいのですが、Chart.jsの学習がてらやってみました。 作成したサンプル 更新ボタンを押す度にAの値が2倍になるグラフです。…

Chart.jsの描画処理を関数で共通化して、データセットを引数にする

/img{ border: 1px solid #000; width: 50%; }/ 概要 Chart.jsで同じページに複数の箇所にグラフを描画したいとき、Optionsが同じであればグラフごとに描画処理を書くと冗長になります。 そこで、描画処理を関数で共通化して、データセットは引数として渡し…

FuelPHPでe-StatのAPIから国勢調査の人口集計を取得する

img{ border: 1px solid #000; } 概要 FuelPHPに慣れてきたので、外部APIからデータを取得する処理を書いてみたいと思います。 試しに、e-Stat の APIから国勢調査の人口集計を取得してみます。前半ではFuelPHPを使わずに、e-Stat の APIの使い方を確認して…

FuelPHPで外部APIから取得した結果がデコードされていない

img{ border: 1px solid #000; } 概要 FuelPHPのコントローラから外部APIにアクセスしてみました。結果は取得できましたが、日本語の部分がデコードされていませんでした。例えば、「石井」なら「\u77F3\u4E95」になってる状態です。日本語でおk! 環境 Fuel…

FuelPHPで作ったWebアプリを、さくらのレンタルサーバで公開する

概要 タイトルの通りです。「FuelPHP さくら」とかで検索すると似たような記事が見つかるのですが、次の4点が気になったので私も記事を書くことにしました。 専門用語が多い(初学者向けではない) 最近書かれた記事が少ない(不要な手順があった) ファイ…

FuelPHPでフォームの共通項目をモジュールで作成する

img{ border: 1px solid #000; width: 50%; } 概要 FuelPHPで似たようなフォームを作っていたので、共通の項目をモジュール化しました。 次のようなケースを想定しています。 * データの新規作成と更新で、一部の項目を分けたい(設定するバリデーションなど…

FuelPHPで処理の異なる2つのボタンをもつフォームを作る

概要 FuelPHPでWebアプリを作っています。ある商品のデータを編集する画面にて、更新と削除のボタンを用意する方法がわかったので記事に残します。画面のイメージは次の通りです(カクカクしててすみません)。 どちらのボタンも同じフォームの要素にしてい…

FuelPHPのフォーム項目に、DBのコードマスタを参照したプルダウンメニューを付与する

img{ border: 1px solid #000;} .w50{ width: 50%; } .w30{ width: 30%; } 目的 次のような商品テーブルと種別コードマスタを考えます。 ・商品テーブル(products) ・種別コードマスタ(categories) FuelPHPで商品テーブルの編集を想定した画面を作り、コ…

FuelPHP で拡張した Validation のルールを適用したフォームを作成する

img{border: 1px solid #000; width: 50%} 概要 FuelPHPでユーザ登録をする画面にて、メールアドレスなどを入力するフォームを作成しています。 POSTされたメールアドレスがDBに登録済みでないか確認するため、Validation のルールを拡張します。Validation …