f@ctor

JavaScript関連のことを調べてみた2021年09月11日

JavaScript関連のことを調べてみた2021年09月11日
目次

p5-matter を使って p5.js での物理演算エンジン（Matter.js）の利用を簡単化する【概要編】

今回の記事の内容は、以下の記事の最後に書いた「[p5-matter](http://palmerpaul.com/p5-matter/)」の話です。

●p5.js と物理演算エンジン「Matter.js」の組み合わせをお試し – Qiita
　https://qiita.com/youtoy/items/0b16f6fb3a1c76d64b68

前回の記事では、p5.js での描画処理に「物理演算エンジン Matter.js」を取り入れるという内容を、[CodingTrain のリポジトリ](https://github.com/CodingTrain/website)の中で公開されていたサンプルをベースにして進めました。
その際に、Matter.js の処理をいろいろ書く必要があったのですが、その処理を簡単化できる [p5-matter](http://palmerpaul.com/p5-matter/)というライブラリがあるらしいです。
（物理演算エンジンのお試しをあれこれやっている中、Twitter で「[@takawo さんが OpenProcessing で過去に公開され

元記事を表示

Markdownのリンクを「別タブで開く」に変換するスクリプト

Markdown記法では、リンクは次のように書きます。

“`markdown
[リンク先の説明](URL)
“`

これを、別タブで開くようにするには（Markdown記法ではHTMLを使えることを利用して）次のHTMLに変換すればOKです。

“`markdown
リンク先の説明
“`

Webブラウザーのエディター上（例えば、はてなブログ）でMarkdownを書くときに、この変換を一発でやってくれるスクリプトを作りました。ブックマークレットにして使っています。

“`javascript
javascript:(function(){
const t = document.querySelector(‘#body’);
t.value = t.value.replace(/\[(.*?)\]\((.*?)\)/g, ‘$1‘);

元記事を表示

社内の複数あるオンライン事務とバッチ事務を可視化してみた

#はじめに
　弊社の汎用機及びそれに群がるシステムでは、オンライン処理、バッチ処理が毎日動作しており、大、中、小合わせるとおよそ１００種類以上の規模になります。その個々の事務はファイルの作成、更新、参照を繰り返して事務を進めるのですが、個々の事務は必ずしも独立していません。更に、全体を俯瞰する資料が存在しないため、システムの全体見直しを行う際に非常に困ります。

#全体システムの見える化
　今回、保守・業務担当にお願いし、各業務ごとに参照しているファイルのうち自業務のファイルではないものについてまとめてもらい、その情報の分析を networkx を用いて有効グラフ化した。なお，見直しにあたり，集約結果から各事務どうしの結合度を求めた。

#作業の流れ
1. 全事務のオンライン、バッチシステムの参照関係
* 方法：人力（機械化も可能だが，今回は業務担当にお願いした）
* 入力：業務知見
* 出力：参照関係ファイル
1. オンライン、バッチ業務の参照関係を記した各々１ファイル（参照関係ファイル）にまとめた。
* 方法：プログラム
* 入力：参照関係ファイル
* 出力：参

元記事を表示

Firebaseのバージョンによるimport記法

[こちら](https://reddest11.com/firebase%e3%81%ae%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%81%ab%e3%82%88%e3%82%8bimport%e8%a8%98%e6%b3%95/)にまとめてみました。

Ver7以降を対象にしてあります。

元記事を表示

jQueryのclickがiPhoneで発火しないと思ったらasyncが原因だった話

## はじめに
こんにちは。ハリモグラ（*Tachyglossus aculeatus*）です。
こう見えてカモノハシと同じく原始的な哺乳類の仲間で、よくハリネズミに似ていると言われます。
ふだんはオーストラリアの草原でのんびりと地中の虫を探しながら過ごしていますが、
ひょんなことからweb屋さんの世界に興味を持ち、自分のサイトを作っています。
今回、サイトを作っていたらある問題にドツボにハマってしまったので、
誰かが同じ轍を踏まないようにQiitaに投稿することにしました。
初投稿です。よろしくお願いいたします。

## 環境
– メインPC：Windows 10 Home ver.10.0.18363.1556（Docker Desktop, VSCode）
– メイン携帯：iOS 14.3 (iPhone 12 Pro Max)
– サブ携帯：Android 11 (UMIDIGI A9 Pro)

## 結論
– **目的**：モバイル専用フッターをクリック/タップしたらメニューを表示するようにしたい
– **事案**：jQueryのClickイベントで発火するプログ

元記事を表示

コントローラーで定義した値をJSに受け渡す

# 開発環境
– OS：macOS Big Sur 11.2.2
– Ruby：2.6.5
– Ruby on Rails：6.0.0
– テキストエディタ：Visual Studio Code

# つまづいたこと
投稿の詳細画面から非同期通信でDB更新をしたいと考えたときに、更新に必要な値を更新アクションを定義しているコントローラーに渡せず詰まった。

コントローラーからビューファイルに値を渡すときはインスタンス変数を定義するが、JavaScriptへはどうしたらいいのだろう？と思い調べてみた。**gon**というgemの導入により実現できるらしい。

# 実践したこと
[gon](https://github.com/gazay/gon)は簡単にJSファイルにデータを受け渡すために作られたgemらしい。（と、いうことは難しい手順を踏めば使わなくてもできるということか・・・）

使い方は、

①まずgemファイルにgonを定義

“` gemfile
gem ‘gon’
“`

②gemをインストール

“`
% bundle install
“`

③includeの記述

元記事を表示

dialogタグを使ってモーダルウィンドウ

html5の`dialog`タグを使ってモーダルウィンドウ実装するとどうなるのか試してみたかった。

#HTML
クラス構文使って以下の通りに。

“`html