StatefulWidgetを組み込んだFlutterアプリで画面の表示を動的に変更する場合、Stateが持つ変数を更新する（以降、単に変数の更新と言う）必要があり、その更新処理をsetState()メソッドのコールバック関数の中に書くというのが決まりになっています。ところ…

1月なので何か新しいことでもやってみようかと思い、Flutterでのアプリ開発に足を踏み入れてみることにした。ただしその前に、Flutter開発に必要なDart言語が全くの初見だったので基礎の学習から始めた。Dartの自己学習中に引っかかった部分やDart特有の機能…

新年ということで心機一転、普段使っているMacBookのOSを最新のVenturaにアップデートしてみた。 ところが、元々使えていたアプリを起動しようとした時に「開発元を検証できないため開けません」という警告が出てしまい起動できるまで苦戦したので、その発生…

matter.jsで曲がりくねった棒状のBodyを作ろうとすると思った以上に大変である。 Bodies.fromVertices()やSvg.pathToVertices()で座標点を指定して作ると、凹面が含まれる形状の場合は凸包形（凹面が埋められる）に変換されてしまうためdecomp.jsを使う必要…

先日、サッカーのカタールW杯に出場する日本代表のメンバーが発表され、いよいよ開催の気運が高まってきた。ということでW杯に絡めて何かやりたいなと思い、今大会でどこが優勝しそうかを予想するシミュレーションをやってみた。予想とは言っても真面目にチ…

matter.jsはWEBブラウザ上で2次元の物理演算と描画を行うことができるjavascriptのライブラリである。 brm.io 公式リファレンスが整備されているので各モジュールに含まれるプロパティやメソッドなどを確認することができるが、具体的にどのように使っていけ…

WEBブラウザ上でできる物理演算について色々と調べていたら、絵文字で物理演算を実現している方の記事を見つけた。この記事を読んでいるうちにおぼろげながら浮かんできたんです、ポケモンのアイコンでも同じことができて面白いんじゃないかと。 この記事で…

前回の記事で静的なWEBサイトに対するスクレイピングのやり方について書いたが、「静的」があるということは当然ながら「動的」もある。 今回は動的なWEBサイトに対してスクレイピングを行う方法についてまとめた。 静的なページと同じ感覚でスクレイピング…

人は皆ネット上に転がっている様々なデータを利用して何か分析したり作ったりしたいと思う時があるだろう、たぶん。 そういう時に、データベースを公開しているサービスがデータ提供のAPIを用意してくれていればそれを利用すればいいのだが、必ずしもそうな…

Vuexを使ったサンプル色々【前編】からの続きということで、残り一つの機能「天気予報の取得」weatherForecastを作成する。 ディレクトリ構成 3. 天気予報取得機能の実装 実装の準備 weatherモジュールの定義 コンポーネントの実装 おわりに ディレクトリ構…

最近Vuexを使う必要が出てきたので公式ドキュメントなどを読んでいたのだが、習うより慣れろということでVuexを利用した簡単なアプリケーションをいくつか作ってみた。 今回は、二次関数の実数解を計算する機能solveEquation、カウントダウンタイマーtimer、…

ライブラリなどを利用せず自力でVueのページネーション処理を実装したのでその手順や考え方などを書いておく。 特にここでは、数十枚の画像がグリッド状に並んでいるような画面でのページネーションを想定しており、ページ番号ボタンなどをクリックすると表…

ここ最近、はるか昔に勉強していた数学の学び直しをやっている。せっかくだからPythonを使って何か数学的なものに取り組んでみたいな〜と思っていた時に、 『Pythonではじめる数学の冒険』（Peter Farrell 著 / 鈴木 幸敏 訳） という本を見つけて面白そうだ…

最近TypescriptベースのVueで簡単なアプリを色々作ろうとしている。 あるアプリの作成を進めている中で、割と複雑な中身（関数や別のオブジェクトが含まれている）のオブジェクトを返す関数を実装することがあり、Missing return type on function.の警告が…

概要 完成イメージ 実装 CSV出力処理 おわりに 概要 ここまでデジタイザを作ってきたが、そもそもデジタイザというものはプロットによって明らかにした座標の数値データを何かに利用するためにあるのだから、画面上でプロットしたデータをファイル出力して扱…

概要 完成イメージ 実装 パスの描画 プロットの中断、再開 座標点の移動、追加と削除 パスの選択と削除 おわりに 概要 これまで実装してきたのは、Viewの操作や座標変換といった下準備のものである。いよいよ本題の座標点のプロット機能を実装していくことに…

概要 完成イメージ 実装 レイヤー分割 座標軸設定パスの描画 座標軸設定用パスの再描画 基準軸の最大値、最小値の設定 座標値の変換 おわりに 概要 最終的にデジタイザとして機能させるためには、自分で設定した任意の座標系で点をプロット（座標を取得）可…

概要 完成イメージ 実装 拡大縮小処理 ズーム処理 その1（準備） ズーム処理 その2（メイン部分） Viewのリセット おわりに 概要 前回は画像を読み込んでキャンバスに表示するところまでを実装したので、今回は画像の平行移動・ズーム機能を実装していく。開…

散布図や折れ線グラフなどの画像しかない時に、そのグラフの値を数値化（デジタイズ）したい場合がある。大抵の場合、「その画像を読み込む→座標軸を合わせる→グラフの線などに沿って自分で点をプロットする」といった手順を踏んで数値化していくことになる…

ここまで実装してきたパス描画ツールに最後にもう少し機能を追加していく。 パスが既に閉じられた多角形に対して、任意の辺に頂点を追加したり任意の頂点を削除できるようにする。 開発環境やディレクトリ構成は前回、前々回と変わらないので省略する。これ…

前回の記事ではパス描画ツールの基本的な処理を実装した。今回はさらに機能を拡張し、パスの交差制御と頂点マーカーのドラッグ移動を実装していく。 完成イメージ 実装 パスの交差を制限する 頂点のドラッグ移動を可能にする セグメント上でマウスカーソルの…

Angularを利用してパス描画ツールを作成したので実装過程をまとめてみる。 WEBアプリケーションで描画処理といえばHTML5のCanvasを利用することが多いと思われるが、今回はCanvasをベースにPaper.jsというフレームワークを利用して実装した。当初は純粋にCan…