TAの日々ブログ（＋α）: Webサイト

ラベル Webサイト の投稿を表示しています。すべての投稿を表示

2024年11月5日火曜日

【JavaScript】画面の座標に関するものCSSだけで吹き出しをつくる

仕事で、吹き出し用の部品を作らなければならなくなったので、実装方法しらべてみました。以下の参考URLが分かりやすかったので、これを参考にしたら対応できました。

【参考URL】

https://pico-cre.com/wp-memo/post-4925/

https://blog.codecamp.jp/css_balloon

2024年11月4日月曜日

【JavaScript】画面の座標に関するもの

要素の幅、高さや他のジオメトリの特徴を関する情報を読み取ることのできる JavaScript のプロパティがたくさんあります。

JavaScript では、要素を移動したり配置するときに、座標を正しく計算するためにしばしばそれらを必要とします。

以下が参考にした情報です。

https://www.buildinsider.net/web/jqueryref/021

(1) 位置情報・要素の位置座標を取得する（「position()」と「offset()」） https://www.sejuku.net/blog/65040 　

⇒「position()」は、特定のHTML要素の位置座標を取得することができるメソッドで、画面上の座標ではなくあくまでも親要素から見た位置座標である　

⇒「position()」が親要素からの位置座標なのに対して「offset()」は画面上の位置になる

(2) サイズ

https://taneppa.net/jquery-size/

ページ全体のサイズは

$(document).width();

$(document).height();

ブラウザサイズは

$(window).width();

$(window).height();

(3) スクロール

どれだけページをスクロールしたかは「scrollTop」関数を使用します

var vScrollDistance = $(window).scrollTop();

また、横方向にどれだけスクロールしたかも「scrollLeft」関数で取得出来ます。

var hScrollDistance = $(window).scrollLeft();

①スクロール位置を取得・設定する方法

・画面のスクロール位置取得設定

// 画面の水平方向のスクロール位置を取得

var x = window.scrollX;

// 画面の垂直方向のスクロール位置を取得

var y = window.scrollY;

// 画面の左上にスクロール位置を設定する

window.scroll(0, 0);

// 画面の左から50ピクセル、上から100ピクセルにスクロール位置を設定する

window.scroll(50, 100);

// scrollTo()も動きは同じ

window.scrollTo(50, 100);

②要素のスクロール位置取得設定

// 要素を取得

var ele = document.getElementById('ele');

// 要素の水平方向のスクロール位置を取得

var x = base.scrollLeft;

// 要素の垂直方向のスクロール位置を取得

var y = base.scrollTop;

// 画面の左上にスクロール位置を設定する

ele.scrollLeft = 0;

ele.scrollTop = 0;

<a href="https://usagidoki.com/js-get-set-scroll/">https://usagidoki.com/js-get-set-scroll/</a>

(4) ジオメトリ

参考URL：

https://ja.javascript.info/size-and-scroll

(5)getBoundingClientRect()

要素の寸法と、そのビューポートに対する相対位置に関する情報を返します。

var element = document.getElementById('myElement'); var rect = element.getBoundingClientRect();

console.log('要素の幅:', rect.width); console.log('要素の高さ:', rect.height); console.log('要素の上端からの距離:', rect.top); console.log('要素の左端からの距離:', rect.left); console.log('要素の下端からの距離:', rect.bottom);

console.log('要素の右端からの距離:', rect.right);

https://developer.mozilla.org/ja/docs/Web/API/Element/getBoundingClientRect

(6) マウス座標系

https://qiita.com/yukiB/items/31a9e9e600dfb1f34f76

2023年9月19日火曜日

ASP.NET Web アプリケーションをプリコンパイルする方法

ASP.NET Web アプリケーションでは、
最初の待機時間を避けるために、Microsoft .NET Framework は ASP.NET アプリケーションをプリコンパイルすることができます。

プリコンパイルをすると、

初回アクセス時にビューのコンパイルが行われない為、デプロイ直後でも高速に動作してくれます。

詳しい説明は、

https://atmarkit.itmedia.co.jp/fdotnet/asp2review/asp2review01/asp2review01_03.html

のサイトを一読すると理解しやすいです。

コンパイルの仕方については、

https://esrij-esri-support.custhelp.com/app/answers/detail/a_id/2636/~/asp.net-web-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%83%97%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

に書いていあるコマンドラインツールをつかってみたがうまくいかなかった（原因分からず、下の設定で作成されるFolderProfile.pubxmlがあやしそう（このファイルを開くと、<PrecompileBeforePublish>True</PrecompileBeforePublish>の設定があるので、この設定次第でかわりそうです））

aspnet_compiler -v /

こちらのサイトで書いてあるように、VSの発行設定（メニュー「ビルド」「***(プロジェクト名）の発行」をおこなうとうまくいくのでこちらを使った方がよさそうです。

https://blog.shibayan.jp/entry/20130914/1379146598

仕事では、実際にはJenkinsを通して、プリコンパイルモジュールを作成してまして、設定としては、以下を行うことでプリコンパイルモジュール作成することができました。

・Jenkinsのノードのサーバで、VS立ち上げて、「発行」で「プリコンパイル」設定してビルドする

・VSのコンソールに出力される内容をJenkinsの設定に追加する

（aspnet_compilerを追加（引数に注意）、Web.configコピーの追加）

・コンパイルするブランチの修正（FolderProfile.pubxmlなど更新）

【追加設定】

del %WORKSPACE%\プロジェクト\obj\Release\AspnetCompileMerge\TempBuildDir /Q /s

COPY %WORKSPACE%\プロジェクト\Web.Release.config %WORKSPACE%\プロジェクト\obj\Release\TransformWebConfig\transformed\Web.config

C:\windows\Microsoft.NET\Framework\v4.0.30319\aspnet_compiler.exe -v / -p %WORKSPACE%\プロジェクト\obj\Release\AspnetCompileMerge\Source %WORKSPACE%\プロジェクト\TempBuildDir

2023年1月22日日曜日

【WEBサイト】Chromeのブラウザキャッシュ

モジュール更新して、WEBサイトみたら、jsファイルが古いものを使っていることがありました。

以下のサイトにかいてありますが、よくある問題なのですが、困ったものです。

https://www.magical-remix.co.jp/magicalog/archives/3020

「更新したはずのサイトがお客さんのパソコンブラウザからは更新されてない…ということはよくある話です。そのたび、「キャッシュが原因ですのでキャッシュをクリアしてください。」と言ってきました。
大体最近は「原因はキャッシュです。Ctrl+F5してください。」と言ってます。。。」

原因はキャッシュファイルを見ているので、その対策検討するのにChromeのキャッシュファイルについて調べてみました。

①キャッシュファイルの場所

以下のサイトみるとキャッシュファイルの場所が記載されています。

実際みると暗号化されているようで中身は正しくみれませんでした。

https://www.tipsfound.com/chrome/01001

場所→C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\Cache

②キャッシュファイルの場所

ブラウザのキャッシュ無効化

→ChromeであればデベロッパーツールのNetworkタブにある「Disable cache」にチェックを付けることでキャッシュを無効にすることができます。

https://magazine.techacademy.jp/magazine/39352

後はIISの設定か、HTMLにタグ追加とか行う方法もあるようです

他のブラウザは以下サイト参考にするといけそうです。

https://blanche-toile.com/tools/webdev-browser-cache

2022年5月26日木曜日

gitとjenkinsの参考サイト

会社でソース管理でgit、モジュール作成はJenkinsを使っています。

勉強する際に、使ったサイトをメモりました。

【Jenkinsの勉強用サイト】
１、入門
https://www.atmarkit.co.jp/ait/articles/1104/07/news111.html
古い情報だが、簡潔にまとめている
⇒自分のPCをビルドマシン(ノード）にする場合は、JDKが必要
⇒「Jenkinsで継続的インテグレーションを始めてみよう」で簡単な手順が書いてあるので一読
⇒「ビルドを自動化」も、一読

https://qiita.com/wryu/items/de3767f231e690fb4e7d
⇒「新規ジョブ作成」「ビルド」「ビルド後の処理」を一読

２、バッチコマンド
http://cointoss.hatenablog.com/entry/20111213/1323702126
⇒Winodowsのバッチコマンド実行時の処理を作成するのに参考

https://qiita.com/yasuhiroki/items/daff66ab18b315ae4298
⇒パラメータ定義方法など

【git勉強用サイト】
１、入門
https://qiita.com/KosukeSone/items/514dd24828b485c69a05
https://www.atmarkit.co.jp/ait/articles/1311/18/news017.html
⇒git flowのイメージ

２、gitコマンド参考
https://eng-entrance.com/git-clone
⇒クローンはよく使うので覚えておくと便利

2022年3月1日火曜日

【node】Error: Node Sass does not yet support your current environment

nodeが8.11.3のプロジェクトを使っていて、他プロジェクト(node 14.17.1)作業に切り替えた時に、

また8.11.3のプロジェクトで起動(yarn start)で、表題のエラーがでました。

外プロジェクト使った時に、nodeのバージョンインストール、環境バージョン変更などおこなったので、その影響のように思います。

ネットで調べて試してみました

https://dev.classmethod.jp/articles/node-sass-could-not-find-a-binding/

⇒うまくいかなかった

npm rebuild node-sass

https://akizora.tech/node-sass-version-support-4278

⇒うまくいかなかった

npm install sass-loader@10.0.5

npm install node-sass@5.0.0

npm install sass-loader@10.0.5
npm install node-sass@5.0.0

npm install sass-loader@10.0.5
npm install node-sass@5.0.0

わたしは、以下の手順でえらーなく起動できました。

＄nodist 8.9.4　// 使用するバージョンを指定
＄node -v //Node.jsのバージョンを確認

＄npm uninstall gulp-sass
＄npm install gulp-sass --save-dev

【参考URL】

https://qiita.com/n0bisuke/items/7c683fd70e398ad678b9

2022年2月10日木曜日

WebSocket API をテストするためのツール

WebSocket API をテストするための便利なツールがありました。

https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/apigateway-how-to-call-websocket-api-wscat.html

上記サイトで記載してありますように、wscat は以下のようにインストールして使用できます。

npm install -g wscat

使い方などは以下サイトに記載してありました。

https://www.npmjs.com/package/wscat

（例）$ wscat -c wss://matsui.co.jp/Push/socket.io/

　　⇒Connected (press CTRL+C to quit)　⇒接続成功

2021年11月5日金曜日

【JavaScript】入力エリア(Text)でのIME問題

テキスト入力エリアで、数値入力を全角で行うと、おかしな動作（入力した値と異なる）が発生する場合があります。

その場合は、「compositionend イベント」を使うとうまく行くかもしれません

【参考URL】

https://developer.mozilla.org/ja/docs/Web/API/Element/compositionend_event

2021年10月20日水曜日

【node】The engine "node" is incompatible with this module. Expected version ">=10". Got "8.11.3"

yarn installを行うと「The engine "node" is incompatible with this module. Expected version ">=10". Got "8.11.3"」のエラーがでて困ってました。

調べてみると、

yarn install --ignore-engines

で行うとうまく行きました。

【参考URL】

https://juejin.cn/post/6844903785710485518

【node】 Sorry, there's a problem with nodist. Couldn't resolve version spec %s: %s 14.17.1 Couldn't find any matching version

上記エラーでの対応方法を調べてみました。

(1) nodistでバージョン確認

　 14.17.1がない場合は(2)でnodeインストール

(2) nodist + 14.17.1

node -v で14．17．1であることを確認

(3) nodist npm match

npm -v でバージョンを確認

【参考URL】

https://qiita.com/rnnrn/items/c36b57d20aa374a0e46f

Sorry, there's a problem with nodist. Couldn't resolve npm version spec match : Couldn't find any matching version

上記メッセージの場合は、下記サイトに記載している「nodist npm match」でnpmインストールで解決できました。

https://teratail.com/questions/349087

module not found can't resolve

エラー内容的には、ディレクトリがないというエラーなので、importで指定したディレクトリを確認する（誤字）

https://teratail.com/questions/288380

2021年10月10日日曜日

【HTML】POSTリクエストを実行する

HTMLファイルで、POSTリクエスト実行するサンプルです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Post Test</title>
</head>
<body>

<form name="f1" method="POST" action="https://aaa.co.jp/web/Login">
clientCD<br>
<input type="text" name="id" value="00000225"><br>
passwd<br>
<input type="text" name="passwd" value="zUT0cOtED5ifg3NkY7LAAA==" ><br>
keyLifeTime<br>
<input type="text" name="lifeTime" value="20221020202923"><br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>