+ JavaScript の質問用スレッド vol.125 +

**デフォルトの名無しさん** · 2018/02/18(日) 16:48:01.14

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

前スレ
+ JavaScript の質問用スレッド vol.124 + [転載禁止](c)2ch.net
https://mevius.5ch.net/test/read.cgi/tech/1427008785/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**デフォルトの名無しさん** · 2018/03/18(日) 00:28:09.12

>>219
コテハン付けてくれ

**デフォルトの名無しさん** · 2018/03/18(日) 00:45:19.99

どうでもいい書き込みをしたいだけのやつ
VS
俺は（jQueryで）回答したいだけ

**デフォルトの名無しさん** · 2018/03/18(日) 00:49:32.07

> 末端の関数を小綺麗に書くのと、それらを組み合わせて巨大論理を構成する技術は別物だ。

別物だというのなら、なおのこと、
巨大論理（何そのオレオレ用語？）は今する話題じゃないな

末端の関数を小綺麗に書く話（質問者の質問自体が小さな関数の話なんだからしょうがない）を
している段階で、巨大論理しってるかー、巨大論理しってるかーって言われても
今その話関係ないですよね？で終わり

巨大論理の話したいならネタふれや。俺はそれにも対応できる。
まあオレオレ用語使ってる自体で、経験ないってわかるけどな

**デフォルトの名無しさん** · 2018/03/18(日) 01:06:09.89

> >>196の論理に依れば、どんな大規模コードでも数行の関数の固まりだから読める、とお前は言う。
> ならば、どんな長文でも単文の固まりでしかないわけだから、

↑上記は間違い。

× どんな大規模コードでも数行の関数の固まりだから
○ どんな大規模コードでも数行の関数の固まりにするんだから

お前の超巨大なクソコード関数が、勝手に小さな塊になるわけじゃない
俺を含めたプロは小さな塊に"する" のだから当然読める

**デフォルトの名無しさん** · 2018/03/18(日) 03:54:52.94

巨大論理くんは、明日俺が見るまでに巨大論理のネタフリしておくように

**デフォルトの名無しさん** · 2018/03/18(日) 20:04:10.88

>>222
日本語でおｋ

というかやっぱりお前は馬鹿なんだよ。どうしてそういう話になっているのか、
またそれが明らかに技術用語ではなくてただの日本語だとも理解できないんだろ。
それが君が「長文を読めない理由」だ。君は論理を追えてない。日本語能力にも問題がある。

君がjQueryにこだわるのは君の自由だが、
他の人が怒っているのは、君の回答は質問者の為にならないから。
ピントがずれてるから、長期的には本人の為にならないんだよ。
だから君は邪魔者だとされ、他の人は君を追い出そうとしている。
俺は君の回答する姿勢だけは認めるから、君を有効活用しようとしている。
君がピントがずれている理由は俺には明確に分かるから、修正を試みている。
それで君が有効な回答が出来るようになれば、追い出そうとしていた奴らにとっても利益だろ。

というのは既に俺は言ったし、それ以前に読み返せば分かるだろ。
君は以前から話が複雑になったら定期的にサマリを求めるが、それは君が論理を追えないのを隠す為。
それは君が馬鹿だから。俺の話は終始一貫しているのだが、君はそうだとも気づけない。

プログラミング言語と自然言語は別物だが、この点に関しては同じだ。
君が77から始まる一連の流れ(約150レス）を追えないのは、君の頭の中の論理スコープが150レス分以下だから。
だから話の発端等がスコープ外になってしまって、君にとっては何がなんだか分からなくなってる。
そしてそのたびに君は定期的にサマリを求める。それは例えば以下もそうだろ。
> 長文で読みにくいなｗ (>>134)
日本語を読めないのを隠す為に、読みにくいということにして短く書き直すことを求めている。
実際こう言われたら3行サマリを出す奴が多いから、君はこのやり方を覚えたんだろう。
だけどそれは君が気づいていないだけで、普通に話に付いていける人にとってはウザイだけ。
俺も何度も「それは既に言ったが」と言ってるだろ。
君の頭が悪いのは君の責任だ。話について来れなければ、分かるまで何度でも読み返せ。
それに対して他人の努力を求めるのはお前の傲慢だよ。お前が気づいていないだけでね。

**デフォルトの名無しさん** · 2018/03/18(日) 20:04:34.68

見たところ、お前の頭の中は4レス分くらいしかワーキングメモリがない。
だからそれ以上の論理を組まれると読めなくなっている。
これは普通の人よりはかなり馬鹿で、話が通じないキチガイだと取られて当然だ。
君の戦闘力が4だとすると、俺や他の人の戦闘力は150よりは上って事になる。それくらい差がある。

頭の中で論理を追えなくなったら読めなくなるのはプログラミング言語でも同じだ。
だから「必要論理スコープ」が小さくなるようにコードを書け、というのが最近の作法で、
具体的には「狭いスコープ」「短い関数」であり、上位レベルでやると「粗結合」「OOP」になる。
これ自体は悪いことではないんだが、問題は、この結果、
頭が悪いままのやつが淘汰されないことと、全く鍛えられないことだ。

マラソンを走れる奴がジョギングするから余裕があるのであって、
ジョギングしかできない奴がジョギングしてもそれはいっぱいいっぱいでしかない。
良いコードは能力値に余裕がある状態でないと書けない。
だから上達する為には能力値を上げることも一つの鍵であり、
これには限界近くまで負荷を高めないといけない。
電卓ばかり使っていたら計算能力なんて高くならないのは当たり前の話だ。
自分に計算能力がなかったら、自分で鍛えるしかない。
だから基礎の基礎の部分では敢えて苦労しろというのも当たってはいる。

**デフォルトの名無しさん** · 2018/03/18(日) 20:05:25.33

馬鹿な君が書いたコードは、確かに短くて、君みたいな馬鹿でも読めるコードなのだろう。
これ自体は悪いことではない。
ただ問題は、実は粗結合はオーバーヘッドもかなり伴う、ということ。
俺が思うに、実行効率で10-100%、コード量で20-50%悪化する。
だからどこまで密結合で組み、どこから粗結合にするかはちゃんと設計しないといけない。
全面粗結合で書いたコードは簡単でいいが、逆に言うとそれだけが取り柄なんだよ。

クラスベースのHTMLについて、反対している奴はいないだろ。
これは当たり前の話で、HTML/CSS/JavaScriptの全てが見通し良くなるからだ。
ところがこれは難しいとも言われてるだろ。この理由も簡単で、
クラスを通してHTML/CSS/JavaScriptが密結合してしまうからだよ。

ただ、この程度の密結合なら、常人でも扱える範囲だ。だから「良い」とされているわけであって、
逆に、超人しか扱えないレベルなら、「そんなん使えるかボケ！」となる。
だからHTML/CSS/JavaScriptの世界は緩やかにクラスベースに移行していく。（てか今既にそうだが）
そして君はそれに付いていけない。
理由は君の頭の中のワーキングメモリが一般人比で著しく足りないから。つまり馬鹿だから。
だから俺はまずそれをさっさと増設しろ、それがお前の為にもなる、と言っている。

少なくとも、常人程度のワーキングメモリは持っておかないと駄目なんだ。
いろいろなところで付いていけないから。君が長文を読めないのもこれが理由だよ。
お前は今、淘汰されるべき側にいる。それを自覚しろ。

**デフォルトの名無しさん** · 2018/03/18(日) 20:05:58.50

例えて言えば、お前の脳には400MBのRAMしか積んでないんだよ。
だからお前はその中でやりくりしているし、その世界しか知らないから、不自由を感じれない。
ところが俺たちは15GB積んでいて、400MBじゃ話にならない事も知っている。
それだけの違いがある。これがいろいろ話が通じない根本の理由だよ。

鍛える為には、日本語でなら、長文を何度も読んで読めるように努力することだね。
読んでいるうちから頭の部分を忘れているようでは話にならない。
JavaScriptでなら、「それなりに密結合した」大規模論理を書くことだね。
それは今君がやっている、ただ単にくっつけただけの平べったい論理構成ではだめだ。
とはいえ、JavaScriptのコードは確かにその類が多いのも事実ではあるが。
特にjQuery厨はそうなりやすい。これがjQueryの不味いところでもある。
(ただし既に言ったようにこれは使い方の問題であり、jQuery自体が不味いわけではない）

反jQueryの連中は、jQueryを使ってきていて、その中で様々な問題に遭遇していて、
環境が変わりつつある今、最早メリットよりもデメリットの方が上回る、という判断を自分でしている。
君は自分で判断する能力が無く、単に「みんなが使っているから」と繰り返すだけ。
まだメリットの方が上回るという見方ならさておき、君は何がデメリットなのかも理解できてない。
そこら辺がやっぱりズレてるんだよ。
マウント取りたがったところで、ちぐはぐさが痛いだけ。
もちろんその痛さを垂れ流すのも君の自由ではあるが。

**デフォルトの名無しさん** · 2018/03/18(日) 20:11:12.49

巨大論理くんｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

**デフォルトの名無しさん** · 2018/03/18(日) 21:22:28.27

SPAといい、話が読めてなさすぎるだろ。
話が読めてないのに長文書くから余計に主張の意味がわからん。
せめて話を読んでから長文書こうか。

**デフォルトの名無しさん** · 2018/03/18(日) 21:35:20.52

この長文、例のSPA君だったのかｗ

**デフォルトの名無しさん** · 2018/03/18(日) 22:09:02.91

話が読めていないと言うのは簡単だわな
俺の気に入る話しかするな、受け付けんぞっていってるだけだが
彼はあれだけの分量で誠意をもって話をしてるんだから
今は間違いなく彼が話の中心
話を読めていないのは君>>230
誠意をもって適切な文量で返答しろ

**デフォルトの名無しさん** · 2018/03/18(日) 22:15:46.55

分量を書くのが誠意なの？
小学生の作文の宿題みたいで微笑ましいｗ

**デフォルトの名無しさん** · 2018/03/18(日) 22:36:53.46

凄まじい長文を書いても結局1ミリも世界を変えられてない事に気付いてるかな？
簡潔な言葉でブレイクスルーを生み出そう

**デフォルトの名無しさん** · 2018/03/18(日) 23:48:36.93

確実に言えることは、俺の4レスの意味を取れる奴と取れない奴がいること。
そして、読めない奴に限って「お前の文が悪い」としたがること。
これはプログラミング言語でも同じだ。

大規模プログラムがあったとして、それが読めないとき、
初心者は常に「コードが汚いから」と言うが、実際は「お前の頭が悪いだけ」だ。
今回もしかり。

お前らはそうやってずっと逃げてきているのだろうよ。
ただ、今後ともドキュメントは増える一方だし、読みこなす力も求められる一方だ。
2chの長文なんてリアルの論文なら序文程度にしかならないし、
お前ら普段からどんだけドキュメントを読んでないんだ？
これについてはマジで鍛えた方がいい。
今後のプログラマはドキュメントを読めないと話にならない。
BitCoinとかお前ら向きだと思うぞ。
http://www.kk-kernel.co.jp/qgis/HALTAK/FEBupload/nakamotosatoshi-paper.pdf

**デフォルトの名無しさん** · 2018/03/19(月) 01:30:33.59

この人のコードめちゃくちゃっぽい

**デフォルトの名無しさん** · 2018/03/19(月) 03:44:35.95

>>235
いや、確実にお前の文が悪いだろｗ

**デフォルトの名無しさん** · 2018/03/19(月) 03:48:23.82

誰が見ても文章力も技術力もjQuery厨のほうが上だぞ

**デフォルトの名無しさん** · 2018/03/19(月) 09:22:07.05

自演乙。

**デフォルトの名無しさん** · 2018/03/19(月) 09:35:59.85

>>232
違うよ。
伝わらなきゃ気に入るも気に入らないも無いよって言ってる。
こんな短い指摘も読めないのに長文書かないで。
頭の方で間違ったら軌道修正もめんどくさい。

**デフォルトの名無しさん** · 2018/03/19(月) 13:08:19.65

俺には伝わったけどな

**デフォルトの名無しさん** · 2018/03/19(月) 15:41:28.47

ajaxでロードした部分自体にその部分リロードするボタンを作りたいのですが、
ロードされた自身のアドレスを取得する方法ってありますか？

**デフォルトの名無しさん** · 2018/03/19(月) 16:17:57.23

>>242
アドレスって？

**デフォルトの名無しさん** · 2018/03/19(月) 18:06:01.48

>>242
無いから、ロードするときに変数に取っとくかDOMの属性に追加するか、iframe使うぐらいしか無いと思う。

80 · 2018/03/20(火) 00:29:38.27

>>243
パスのことです不正確ですいません
>>244
ありがとうございます
なんとかしてみます

**デフォルトの名無しさん** · 2018/03/21(水) 08:18:24.90

>>234
JSとつきあってます

**デフォルトの名無しさん** · 2018/03/22(木) 00:42:57.16

あんな長文書く人ってコードも汚そう

**デフォルトの名無しさん** · 2018/03/22(木) 01:17:37.41

巨大論理くんよりもjQueryアニキの方が
何倍も技術力上だと思うわ

**デフォルトの名無しさん** · 2018/03/22(木) 01:49:14.93

出来合いのライブラリ使うしか能がないのに？

**デフォルトの名無しさん** · 2018/03/22(木) 01:52:14.51

出来合いのライブラリを使う = ライブラリを使うしか能がないってことにならないよ
jQueryのプラグインも作れるし、オリジナルのライブラリも作れる。
てかそういう事言ってると、OSのAPI使うしか能がないとか言えてしまうじゃん

**デフォルトの名無しさん** · 2018/03/22(木) 01:54:21.43

javascriptのライブラリって、chromeの特定のバージョンのバグ対策とか、そういう細かい処理が入ってるから
自分で作ってもゴミが出来上がるだけなんだよね

**デフォルトの名無しさん** · 2018/03/22(木) 02:06:39.53

おいおいライブラリなんだから当たり前だろ。
そういうコードが書かれてるんだよjavascriptで。
そのjavascriptレベルの話をするスレで１ライブラリのAPIの話するって頭わいてんのか

**デフォルトの名無しさん** · 2018/03/22(木) 02:24:37.77

1ライブラリだって思ってるからダメなんだよ
お前の基準だとどのライブラリだって同じ1ライブラリ扱いにされてしまう

世の中には世界中で多く使われている品質が高いライブラリもあれば
個人が作ったそいつやその会社でしか使えないような覚える価値のないライブラリも有る

そういうのを取捨選択することも含めて
JavaScriptを使ったプログラミングなんだよ

**デフォルトの名無しさん** · 2018/03/22(木) 03:18:04.61

ライブラリの取捨選択の話はライブラリスレでやれ

**デフォルトの名無しさん** · 2018/03/23(金) 22:47:59.71

動的に追加した要素がその下にある要素
に重なってしまうんだけどこれを解決するには
どうするのが一般的ですか？

**デフォルトの名無しさん** · 2018/03/23(金) 23:55:42.74

zindex

80 · 2018/03/24(土) 09:48:45.54

リンクをポップアップで開く系のjQueryプラグイン使ってるのですが
Biggerlinkでリンクをdiv要素に拡大させた部分をクリックすると通常ウインドウで
開いてしまいます

これをうまく回避する方法はありますか？

**デフォルトの名無しさん** · 2018/03/24(土) 10:09:36.25

jQuery の質問は、web制作管理板のjQuery のスレへ、書き込んで

80 · 2018/03/24(土) 10:18:17.73

わかりました
誘導ありがとうございます

**デフォルトの名無しさん** · 2018/03/24(土) 21:26:58.14

Node.jsについてですが、
変数がとっちらかるのが気になるので、
各種フレームワークみたいにアプリケーション全体を包括するクラスを作って、
(new Application()).start()
みたいな形で全てを起動したいと思います
各種モジュールも、クラスのプロパティに読み込みたいと思います
でも、こういうやり方をJavaScript界ではあまり見ない気がします
何故でしょうか？

**デフォルトの名無しさん** · 2018/03/24(土) 21:30:51.46

const path = require('path');
const url = require('url');
const fs = require('fs');
const os = require('os');

みたいな形に、
いきなりグローバル空間にモジュールを入れた変数をごろごろ転がすのって
何か気持ち悪いです
クラスがしっかり管理して、
pathでなくて、this.pathやthis.modules.pathでアクセスした方がずっといいと思います
でも、何故JavaScript界ではそうしないのでしょう？
あほなのでしょうか？

**デフォルトの名無しさん** · 2018/03/24(土) 21:39:57.05

export覚えてからまた来てね。お疲れー

**デフォルトの名無しさん** · 2018/03/24(土) 21:41:28.85

グローバル空間に転がしたところで同じ物を指すならそれで良いと思うけど。
クラスベースじゃなくてプロトタイプベースだから、それで良いというか良かったというか。
やりたいなら、クロージャ内に持たせればいいんでないの？
nodeの場合はファイル単位のスコープになってるから、別にconstで適当に放り出していいと思うけどね。

ただ、thisが指すものもコンテキスト次第だから、this.modulesはナンセンスな気がするよ。
modules.path = require('path')
とでもすればいいんだろうけど、それも実質
const path=require('path')だよ。

**デフォルトの名無しさん** · 2018/03/24(土) 21:58:22.09

JavaScriptの一般的なやり方は、
コードの中に変数が出てきた時に
その変数がどこで定義したものなのか、
変数を参照しているコードだけでは分からないというところがイケてないのです
アプリケーション側で用意した変数なのか、
モジュールを読み込んだ変数なのか、
それともローカル変数なのか、
変数を参照しているコードだけを見ても分かりません
しかしクラスがアプリケーション全体を管理するやり方だと、
ローカル変数なら単体でそのまま書かれているし
それ以外の特殊な変数ならクラスのプロパティとしてアクセスするので、
変数記述部分からすぐに分かります
イケてますね？

**デフォルトの名無しさん** · 2018/03/24(土) 22:01:57.95

>>261
> みたいな形に、
> いきなりグローバル空間にモジュールを入れた変数をごろごろ転がすのって
> 何か気持ち悪いです

そのコードを書いたのはお前だろ？
つまり気持ち悪いのはお前だよ

**デフォルトの名無しさん** · 2018/03/24(土) 22:02:30.84

>>264
> JavaScriptの一般的なやり方は、

それはお前のやり方だろ？
イケてないのはお前だよ

**デフォルトの名無しさん** · 2018/03/24(土) 22:03:52.55

自分でクソなコード書いておいて
このコードはクソだー！って叫んでる
なんて愚かなのだろうか
ばれないと思ったか？

**デフォルトの名無しさん** · 2018/03/24(土) 22:16:15.36

>>264
何を言ってるかいまいちわからんが、メンバ変数が持てないから悪いって言ってるのかな？
それは、Javaで言うimport xxxx.yyyy.zzzzした、zzzzも同じようなもんだと思うが。
向いてないから辞めたら？

**デフォルトの名無しさん** · 2018/03/24(土) 22:18:35.05

JavaScriptでグローバル変数が使えなくなって
もう何年たつっけ？10年？

**デフォルトの名無しさん** · 2018/03/24(土) 22:27:38.17

>>264
import/export

**デフォルトの名無しさん** · 2018/03/24(土) 22:33:41.82

JavaScriptって今いちばんイケてる言語だよな

**デフォルトの名無しさん** · 2018/03/25(日) 05:49:43.12

>>264の件ですが
モジュールを全てクラスの属性にしてしまうと
jQueryとのバランスが美しくなかったりといまいちなことが分かりました
それに全てを一つのクラスにするのは、
コードをモジュールにするのと大差ないといえばありません
一番不満なのは、変数宣言や初期化の場所がとっちらかってることと
エントリーポイントが分かりにくいことなので
・変数宣言と初期化は、コードの先頭(require処理の後ろ)にまとめて置く
・エントリーポイントはmain関数にまとめる
・main関数はコードの末尾で呼び出す
としたら、
まぁクラス化しなくてもいいかと思える感じになりました
ありがとうございました

**デフォルトの名無しさん** · 2018/03/25(日) 06:04:58.03

「Node.js超入門、掌田津耶乃、2017」を読めば？

実は、Node.js だけでは面倒くさいから、それだけでは作らない。
Express + Express Generator フレームワークを使う

Node.jsは、Ruby で、Sinatra を、full scratch で書くのと同じ。
Express + Express Generatorが、Rails と同じ

だから先に、Rubyをやれば、フレームワークが理解しやすい

**デフォルトの名無しさん** · 2018/03/25(日) 13:04:49.34

>>272
意味不明
jQueryって只のライブラリだよ？

ライブラリをクラスでどう使うよ？
クラスの中で使うでしょ。
単にDOM操作をjQueryで行うだけだよ

あんたが思うバランスの良いコードを
単にjQueryつかえばいいだけだよ

**デフォルトの名無しさん** · 2018/03/25(日) 15:20:48.68

Node.js & Express From Scratch
https://www.youtube.com/watch?v=k_0ZzvHbNBQ&;list=PLillGF-RfqbYRpji8t4SxUkMxfowG4Kqp

YouTube に動画ある

**デフォルトの名無しさん** · 2018/03/26(月) 14:08:14.54

>>264
変数名で特定できるようにすればいいじゃん

**デフォルトの名無しさん** · 2018/03/27(火) 02:13:06.47

今のカーソル形状って取れるんだっけ？

やりたいことは「ポップアップ内の文字選択も出来るようにしたい」なのだけど、
かなり大きめのポップアップも出ることがあるので、今はポップアップ自体の移動を出来るようにしていて、
この結果、ポップアップ内の文字選択が出来なくなっている。（動いてしまうから）
今のカーソル形状が取れれば、テキスト用カーソルの時だけ移動しなければいいだけなのだが。

document.body.style.cursorには反映されてないところまでは確認した。

**デフォルトの名無しさん** · 2018/03/27(火) 19:46:53.41

テキストノードのテキストへの当たり判定って出来ない？

カーソル形状は単純には取れないようなので、（第一のガン）
mousedown でどこで押されたかを確認するようにしたのだが、
そもそもテキストノードは e.target に入らないので、（第二のガン）
親エレメントで受けるしかなく、そこから走査するしかない。
この場合、Element.getBoundingClientRect() を使って e.clientX 等と比較することになるが、
Nodeにはこのメソッドが無い。（第三のガン）
結果、テキストノード上のテキストへの当たり判定が出来ない。
（なおいちいち当たり判定しても、
文字列が行の途中で終わっているときに対応できない。---(A)
この場合、ブラウザは正しく文字の真上だけ文字選択カーソルにするが、
自前で走査すると文字列が終わった画面右の方でも当たりの判定になってしまう。）

これってマジ？
そうならAPIの不備だよね。経緯は色々あるのだとは思うが。
selection API (onselectstart) も試したが駄目だ。これも上記(A)の時に対応できてない。
こちらに見落としや違う方法での実装方法があるならご指摘よろしく。
希望としては、「文字の真上＝文字選択カーソルの時は選択、それ以外は移動」としたい。
ブラウザが当たり判定をした結果の「今のカーソル形状」が取れれば一番いいのだが。

**デフォルトの名無しさん** · 2018/03/27(火) 21:18:01.53

そもそもポップアップのどこでもDnD可能にしていることが大間違い
もしブラウザの画面がそうだったら困るだろ？
ウィンドウには頭の部分にDnD可能なバーを付けるという「常識」があるのだから大人しくそれに従えばいいだけ
全面DnD可能にするのは動画窓くらいのもの

**デフォルトの名無しさん** · 2018/03/27(火) 23:01:45.31

>>279
> ウィンドウには頭の部分にDnD可能なバーを付けるという「常識」があるのだから
ウインドウはそうだが、俺が言っているのはポップアップだ。
ポップアップにタイトルバーを付けたがる馬鹿はいないだろ。

俺はいちいちタイトルバーを触るＵＩはダサいと思ってるんだよ。
カーソルの形が変化するのだから、今どっちのモードかは誰でも分かる。
「文字」の上でDnDすれば文字選択、「余白」でDnDすれば移動、というだけだ。
PDFで言う「選択」と「手のひらツール」の自動切り替えでしかない。

動画窓なんて全面移動でいいのだからタイトルバーなんて付けてる馬鹿はいないだろ。
というか、昔は付いていたが、だんだんと外れて来て、最近は本当に動画部分だけになった。
余分な物は表示するべきではない、というのは当たってる。
確かに今から考えると昔の画面は無駄だったろ。スマホ（画面が狭い)の影響かもしれんが。
まあ、上記俺のＵＩに慣れたら、タイトルバーなんてダサいと思うようになると思うよ。
そして、俺はWindows等も同じ方向に行くと思っている。

とはいえ、結局やっぱり取れないのか？
せっかく当たり判定を全部ブラウザがやってくれてるのだから、結果だけ欲しいんだが。
stackoverflowとかも見たけど、やっぱり出来ないみたいなんだよね。

**デフォルトの名無しさん** · 2018/03/28(水) 06:35:30.31

ダサさでは無く直感的なわかりやすさを重視すべき
それに今回はどちらにせよ動画の話みたいにはできないだろ
動画の件とは逆にどこでもDnDできちゃ不味いという話なんだから
どちらにせよポップアップにDnDできる領域を作らないといけない
まさか文字の隙間でDnDしたいわけではないのだろう？

テキストの部分触ってもDnDできなくて、その周りの空白部分でDnDできるとか分かりにくいし
それなら空白の代わりにDnD可能そうなバーを付けたほうが明らかに良いだろう？
まあ別にそのバーをデザイン上の問題でどうしても透明にしようが何れにせよ
テキストとは別にDnD可能領域をつけることでできるよ

**デフォルトの名無しさん** · 2018/03/28(水) 08:56:15.21

その直感の元ってwinやmacのウィンドウシステムやん。
新入社員がパソコン使えないとニュースになる時代、バーを見てドラッグアンドドロップできそう！って思ってもらえるかね。
スマホアプリにはd&dできるバーなんて無いぞ。

**デフォルトの名無しさん** · 2018/03/28(水) 12:25:42.54

>>280
TextNodeはDOMの仕組み的にElementじゃないからその手のメソッドは持ってないし、持つべきではない
普通に<span>とかのインライン要素で囲めば判定できる

ただ、1行選択する場合とかは余白からドラッグするのが一般的なので、使いにくい人もいるだろうね
スマホでもそんなUIを採用してる例はないし、長押しで移動モードとかの方がわかりやすいかもね

**デフォルトの名無しさん** · 2018/03/28(水) 19:34:04.98

>>281
> まあ別にそのバーをデザイン上の問題でどうしても透明にしようが何れにせよ
> テキストとは別にDnD可能領域をつけることでできるよ
それは分かっているし、実際 autohide のタイトルバーも採用するつもりでいる。
ただし別件でだが。

> テキストの部分触ってもDnDできなくて、その周りの空白部分でDnDできるとか分かりにくいし
これで十分なんだよ。
カーソルが「文字選択」なら文字選択になるし、「それ以外」なら移動になる。
必要なら「移動」カーソルに変えておいてもいい。だったら見たとおりにしかならんだろ。
そもそもこの切り替えも付けるし。（全面移動か、上記自動切り替えか）
なお、デザイン上、余白部分はかなりあるから、つまむのに苦労するということはない。

というか「余白」という曖昧な表現を使っているから不味いのか？
例えば、PDF文書なら、通常左右の端から3cmずつくらいは必ず「余白」になってるだろ。
そして文字選択する場合、必ず当該文字の真上から開始するのだから、あれも単純に、
・文字領域の上からDnDを開始した場合、文字選択
・左右の余白領域の上からDnDを開始した場合、「手のひらツール」で文書そのものの移動
でよかったと思うんだよ。それでカーソル形状を変化させてれば、混乱しようもない。

**デフォルトの名無しさん** · 2018/03/28(水) 19:35:25.71

ポップアップが巨大で１画面の高さを超えることもあるから、タイトルバーでは駄目だというのもある。
例えば2chで同一IDや返信をポップアップするとして、数が多ければ１画面の高さを越えるだろ？
これと同じ。俺も必要なだけ出すから。これに対する解は、

A. ポップアップにタイトルバーとスクロールバーを装備（正規ウインドウ化）
B. ポップアップを元画面に固定、元画面のスクロールによってスクロールさせる…大体の2chブラウザがこれ
C. ポップアップ自体に移動/スクロール機能を付ける…現状だが文字選択が出来ない
D. Cに対して自動切り替え機能を導入し、文字選択できるようにする…これをやろうとしている

なんだよ。君がA推しなのはいいし、実際そうしているアプリもある。
ただ、今俺が試したいのはDなんだよ。多分混乱はしないし、一番いい解だと思うから。
Bは、元画面をそこまでしか読んでいないのに、
ポップアップを読む為にスクロールして、戻ってこないといけないのがウザイ。
Aは、ポップアップとしては不味いＵＩだと思っている。
ポップアップはタイトルバー等がないことによって「不完全なウインドウ」であることを明確にしている。
そしてそれは「不完全」だからこそ、自動消滅するということで辻褄が合っている。
「完全な」ウインドウが自動消滅するようでは不味いんだよ。俺はそこは、

・タイトルバー等を装備した「完全な」ウインドウは永続的であり、明示的消去動作のみによって消去される
・「不完全な」ウインドウは、自動消滅する

という、分かりやすいラインに従うべきだと思っている。
ポップアップを移動させたいが為だけでタイトルバーを付けてこの原則を崩すのは悪手だ。

ということを言い出してもきりがない。
所詮はGUIは感性の産物でユーザー主観でしかない。
だから全部実装してユーザ選択にするのがベストだし、最終的には多分そうする。
そして今回はDを実装して試そうとしているだけ。

**デフォルトの名無しさん** · 2018/03/28(水) 19:36:37.06

>>283
> TextNodeはDOMの仕組み的にElementじゃない
見た目そんな感じだね。

> 持つべきではない
そんなわけない。TextNodeがTextElementであっても何も問題ないだろ。

> 普通に<span>とかのインライン要素で囲めば判定できる
出来ない。正確に言うと、出来ることを保証できない。
<span>で囲んだだけでCSSでは別扱いでき、フォントサイズ等が変更される可能性もある。
だからこの方法では「出来るときもある」だけであり、「出来る」というのは間違い。
ただなるべく無駄なことはしたくないので、DOM変更で対応するのは最後になる。
あと、この方法だと結局長方形としてしか扱えず、
複数行で最終行だけ短いとき等にも対応できない。
ブラウザ自身はこういう場合も問題なく当たり判定して、文字の上の時だけカーソルを変えている。

> 使いにくい人もいるだろうね
どのみちユーザ選択にするから問題ない。

> 長押しで移動モード
これはかなり最悪。ゆっくり選択することが出来なくなる。
右クリックメニューで「移動」「選択」モードの明示的切り替えの方がマシ。

今のところmousemove/downをdispatchEventしてSelectionが変化するか見ようとしているが、
反応しねえ。

**デフォルトの名無しさん** · 2018/03/28(水) 22:56:50.85

Canvasに描画すればmeasureTextできるから、努力すれば各行の幅が取れる

もしくはSVGのforeignObjectにスタイルなどを適切に適応したポップアップ部分の複製を入れて
テキスト背景色などを調整した上Canvasに描画して当たり判定をする

**デフォルトの名無しさん** · 2018/03/28(水) 23:26:57.64

適用な

**デフォルトの名無しさん** · 2018/03/29(木) 01:17:47.41

Range.getClientRects()で出来そうだ。
知恵を貸してくれた皆様ありがとう。

**デフォルトの名無しさん** · 2018/03/30(金) 12:37:48.86

Houdini v2でテキスト周りの処理ができるようになればいいね

**デフォルトの名無しさん** · 2018/03/30(金) 22:24:23.40

いや何のことだ？

Range.getClientRects()では文字単位でピクセル値も出せるから、当たり判定は問題なく出来た。
結局の所、俺がRangeを知らなかっただけだった。最初からこれでよかった。
というか、一般的にテキストの当たり判定は出来ないので、HTMLでもそうだと思いこんでいた。
なんだかんだでHTML周りはよくできている。（他のＧＵＩに比べて）

これについては、これまで何回か聞く人もいて、>>287とずっと言われてたろ。
まあ俺もそう思っていたのだが、実はそうじゃなかった、というわけさ。
互換表を見る限り目新しいAPIというわけではなさそうだが、
普通は使わないから知名度が低いのも致し方無しか。

ちなみにuhyohyoでは解説されてる。
https://uhyohyo.net/javascript/8_1.html
正直俺はこのサイトの書き方は嫌いなのだが、ここの内容はいい。
こいつは少なくともある程度以上の腕だというのが読んでいても分かる。
JavaScriptを解説しているサイトって、初心者が一生懸命やった記録を残しました、
みたいなところばかりで、ポイントがずれているから、ミスリードされる。
この辺を自分で判別できない初心者ならuhyohyoを全部読むのもありだと思うぞ。
（結果的には俺がそうすべきだったわけだが)

RangeはNodeをElementにキャストできる。（意味的に）
だからNodeがElementの親でメソッドが足りない、という点はほぼ全て回避できるはず。
本来の使い方か？といわれたら微妙だが。

**デフォルトの名無しさん** · 2018/03/31(土) 20:30:23.50

残念だけどこれじゃ添字などに完璧に対応できてるわけじゃない
たまたま日本語だから上手く言ってるように見えるだけ

**デフォルトの名無しさん** · 2018/03/31(土) 21:02:26.43

カーソルの形状も文字の選択もマウスに依存したUIだから、タッチデバイスとかで使う人がいるなら相当気をつけて実装しないとまずかったりもする

**デフォルトの名無しさん** · 2018/04/01(日) 12:20:15.96

jplayerっていう動画とか音声を再生するプレイヤーが
再生終了後に広告載ようとしてるのですが、
class名=jp-video-playのとこにリンク付きのimgを入れたんだけど
何故か、クリックしてもa hrefの無効になってるみたい。
a hrefが無効ってvoid(0)とかしかないと思ってるんですが、
jquery.jplayer.jsを読んでもさっぱりわかりません。
jp-video-playがshow()とhide()してるだけでした。
a hrefが無効って何が原因なんでしょうか？

<div class="jp-video-play">
<a href="https://www.yahoo.co.jp/";><img src="C9GWegFV0AA_j_m.jpg" width="150px" id ="a03" class="test2" /></a>
</div>

**デフォルトの名無しさん** · 2018/04/01(日) 14:52:16.87

>>294
とりあえず、開発者ツールでa hrefの実際の値を確認
書き換えられてなければ、イベントでpreventDefaultされてるんじゃない？

**デフォルトの名無しさん** · 2018/04/01(日) 17:34:00.52

>>295
解決しました。ありがとうございました。

a hrefは書き換えはされていませんでした。
preventDefaultがされていたのが原因でした。
preventDefaultって機能の存在を知りませんでした。

jquery.jplayer.js
var handler = function(e) {
e.preventDefault();
};

**デフォルトの名無しさん** · 2018/04/02(月) 21:19:50.07

>>292
どういうケースを想定しているのか知らんが、
字毎のboundingBox(＝マウスでなぞったときに反転するエリアのはず）が取れるから、
全て対応できると思うぞ。

気になるuniコードがあればこちらで試してみてもいいが。

**デフォルトの名無しさん** · 2018/04/03(火) 22:37:13.67

>>297
言語やフォントやモードによっては日本語のぶら下がりのような禁則処理なんかで
ボックスからはみ出す場合もある

**デフォルトの名無しさん** · 2018/04/04(水) 00:42:30.57

>>298
そう信じるのはお前の自由

**デフォルトの名無しさん** · 2018/04/04(水) 06:18:39.49

オートハイフネーションのハイフンも取得できるの？

**デフォルトの名無しさん** · 2018/04/04(水) 07:34:16.45

俺の環境でちょっと試した限り動いているぞ。

ページはMDNのCSSサンプルページからで、ちょっとfiddleで試した。
https://developer.mozilla.org/ja/docs/Web/CSS/hyphens
https://jsfiddle.net/qznatw8y/10/

・chromeではそもそも3例ともハイフンが表示されない
・FFでは3例目(auto)だけ自動挿入されてる (An ex"-"tremely long English word)

なので対象は3例目のこのハイフンであり、結果は以下で、right==93はハイフンを含んでいる。

DOMRect { x: 49, y: 349.1000061035156, width: 44, height: 18, top: 349.1000061035156, right: 93, bottom: 367.1000061035156, left: 49 } _display:108:23
07:20:27.560 DOMRect { x: 49, y: 368.1000061035156, width: 50, height: 18, top: 368.1000061035156, right: 99, bottom: 386.1000061035156, left: 49 } _display:108:23
07:20:27.562 DOMRect { x: 49, y: 387.1000061035156, width: 29, height: 18, top: 387.1000061035156, right: 78, bottom: 405.1000061035156, left: 49 } _display:108:23
07:20:27.564 DOMRect { x: 49, y: 406.1000061035156, width: 51, height: 18, top: 406.1000061035156, right: 100, bottom: 424.1000061035156, left: 49 } _display:108:23
07:20:27.568 DOMRect { x: 49, y: 425.1000061035156, width: 34, height: 18, top: 425.1000061035156, right: 83, bottom: 443.1000061035156, left: 49 }

**デフォルトの名無しさん** · 2018/04/04(水) 20:34:23.73

Androidのテキストレンダリング周りの処理見たことがあるけど
多分アラビア語とかになるんだろうけどマージンがある場合はBOXをはみ出して描画するようになってたと思う
BOX≒選択範囲だけどBOX≒描画範囲ではないからね
続け字が連続してきて何度もフォント設定の置換が入るとBOXがズレる仕様バグが残ってるし

**デフォルトの名無しさん** · 2018/04/04(水) 21:06:00.71

>>302
「続け字」というのは詳しく知らんが、英語の筆記体のようなものだとすると、
それは文字間の区切りが曖昧なだけであって、最終結果のBoundingBoxをはみ出る理由にはならんだろ。
君が何故出来ないことにしたいのか分からんが、
レンダリングしている物(ブラウザ)が返してきている値なんだから普通は問題なく信用できるし、
ブラウザにバグがあるというのならそれはまた別の話だ。

仕様バグ、というのも何が言いたいのか分からんが、
BondingBoxに仕様バグも糞もない。
「表示領域を囲んだ矩形を返せ」以外の仕様なんてないし。

**デフォルトの名無しさん** · 2018/04/04(水) 23:46:26.22

そういやrtlな言語だとどうなるんだろ？

**デフォルトの名無しさん** · 2018/04/05(木) 00:22:41.54

アラビア語かな？

**デフォルトの名無しさん** · 2018/04/05(木) 06:20:49.74

BoundingBoxは表示領域とは違うからな

**デフォルトの名無しさん** · 2018/04/05(木) 19:04:44.78

スレ違いとは思いますがAcrobatのJavascript APIについてこちらで質問してもいいでしょうか？

**デフォルトの名無しさん** · 2018/04/05(木) 21:35:42.76

input要素内部のテキストの幅を知りたいのだが、どうすればいい？

テキストの幅が取れることが分かったので、
ついでに間延びしている<input type="text'>について、
入力後にちょうどいい幅まで縮めようとしている。
前回ググッた時に見かけた覚えがあったのでだいぶ探してみたが、
どうやらcreateTextRange(IE専用）だったようだ。
chromeでやれる方法を知っている人がいれば教えて。
あるいはCSSで出来るというオチある？

見た目これはAPIを整備中、というところかな？
HTMLInputElementの継承とか見ると、オブジェクト指向しようとしている。
https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement
なら内部文字列は textNode 扱いで Range 経由で取得というのが妥当だが、
<input>自体がHTML的に中途半端(終了タグがない等）だから、整備中か？

なおjQueryUI等にこの機能を持っている物があればそれも教えてくれれば助かる。
参考に見に行く。

基本的には、フォーカスが当たったらちょっと伸びて、
フォーカスが外れたら入力文字列をちょうど表示しているところまで縮めたい。
ただし span 等に変更することはなく、inputのままで、だ。
span 等に変更すると、見た目、入力が出来ないのか？と勘違いされそうなので。
なお selection -> range -> getBoundingClientRect等で取得は試したが駄目だった。

**デフォルトの名無しさん** · 2018/04/06(金) 06:28:02.09

こいつほんと馬鹿だな
そもそもinput要素がどのように表示されるか厳密に決まっているわけではない
環境に応じて調整されたUIが表示ができるようにするための専用要素なのだから
それを細かく調整しようと思うこと自体が誤り

**デフォルトの名無しさん** · 2018/04/06(金) 08:53:01.27

訳：わかりませんｗ
分からないなら黙ってればいいのに

**デフォルトの名無しさん** · 2018/04/06(金) 13:51:54.73

裏で不可視状態で同じフォント、同じサイズ、同じ文字列のspan作ってDOMの適当なところに挿入
文字列の幅を取得してすぐDOMから削除でいいのでは

**デフォルトの名無しさん** · 2018/04/06(金) 20:57:34.12

>>309
そんな的外れなことばかり言ってるからJavaScripterは馬鹿なままなんだよ。
お前らは何が正しいかすら理解できていない。
そしてそれすら自覚できてないから間違った情報を拡散し、余計に馬鹿が再生産されてる。
それは本当に止めた方がいい。

環境依存の部分を自動的に隠蔽したいのなら、<span>と同様、自動伸縮すればいいだけ。
手動でやれというのなら、通常のオブジェクト指向のように、統合的に扱えればいいだけ。
<input type="text"></input>で入力が内部textNodeになれば、それが出来るだろ。
Webの場合はこの辺の「統合的」な視点が全く欠けており、三流プログラマのやり方になっている。
そしてそれしか知らないから「jQueryは素晴らしいとか」とか明らかに間違ったことを言い出す。
そもそもjQueryみたいなグルーライブラリが必要なこと自体が間違っているし、
実際他環境ではそんな物は必要ないんだよ。お前らは知らないのだろうけど。
とはいえHTMLは全体的にはよくできているのも事実だが。
(そして俺は今回はscrollWidthで解決できてしまえそうだ)

余談だが、よく言われている「上級者はコードが短い」というのは、これなんだよ。
お前らはjQueryみたいな糖衣構文を使って短くすることしか出来ないからそうだと言い張っているが、
或いは宣言的に書くから短くなる、ということにして関数型()マンセーしているが、
それは自ら馬鹿であると主張しているのと同じだ。
上級者は同じ記述スタイルでも書くコードが少なくて済むんだよ。

ただこれを説明するのは難しかったのだが、Webには分かりやすい例がある事に気づいた。
要するに、上級者のコードには無駄な if が無いんだよ。
よく言われているブラウザの互換性の問題では、無駄に if 文を書く必要があるだろ。
当然、統一しておいてくれよな、と思ったことはあるだろ。余分なコードが無くて済むから。

同じなんだよ。上級者のコードでは内部的な互換性が高く、いちいち処理を分ける必要がない。
余分なコードがないから、コードが短くなる。
糖衣構文で短くなっているわけではない。
ただ、この違いを理解できない馬鹿が一文字一句の「コードの短さ」のみを主張しているだけでね。

**デフォルトの名無しさん** · 2018/04/06(金) 20:58:32.51

>>311
それは回りくどすぎる。というか悪いがその方法なら俺も当然知ってる。
というかな、上記にも絡むが、

・一通り出来ない＝初級者
・一通り出来る＝中級者　←お前ら
・最適なやり方を選択できる＝上級者

なんだよ。
何かお題が与えられたとして、やり方が分からない>>309は初級者。
とにかく実現は出来る>>311は中級者。多分お前らはここが多い。
ただ、本当にそれが最適か考えないと、上級者にはなれない。お前らはこれを怠っているから上達しない。

今回、「本来の」順で考えるなら、
A. CSSに何かプロパティを設定したら、勝手に伸縮する (例；逆だが text-overflow: ellipsis 等）
B. 直接クエリできるメソッドを使う (例: createTextRange、ただしIE専用)
C. input自体の幅を変更して計測する
D. inputをcloneNodeして中身をコピーし、その場に貼り、不可視で計測する
E. spanに中身をコピーし、styleも全コピーし、どこかに貼り、不可視で計測する
だろ。styleのコピーがいる分EはDより面倒で「コードが増える。」
逆に言えばこれがないから「上級者のコードは短い」んだよ。糖衣構文で短いのではなくてね。
ＣはDよりもさらに簡単で、いったん width='0px' にすれば scrollWidth で幅が取れるというもの。
可視状態でやっていいのか？というのはあるが、現実的に問題なさそうだからこれで行く予定。

それとは別に、A, B が存在する可能性もあるから聞いたんだ。俺は仕様に詳しいわけではないから。
ただこれも、環境が整えば当然のごとく A, B が出来るようになるわけだが、
お前らはこれが出来るべきだとも理解できてないからおかしな事になってる。
糞な仕様につき合っており、それで満足してしまっていて、問題を感じていない。
ちゃんと「本来はどうあるべきなのか」を考えるようにしないと上達しない。

**デフォルトの名無しさん** · 2018/04/06(金) 21:00:52.27

IE専用ｗｗｗ

**デフォルトの名無しさん** · 2018/04/06(金) 21:42:16.24

>>312
アホ
input要素が具体的にどのようなUIで表示されるかはHTMLの仕様外なんだよ
内部に入力テキストが表示されている必要も無いのだから
それに依存した動作をしようとすること自体がナンセンス

例えるなら右クリックメニューの内容に応じて何かをしたいと言ってるようなもの
それがどうしてもしたいならむしろ右クリックメニューを作れと言ってるんだよ
当たり前だろ

**デフォルトの名無しさん** · 2018/04/06(金) 21:51:01.44

この長文の人の明後日のモチベーションはどこからくるの？

**デフォルトの名無しさん** · 2018/04/06(金) 22:23:26.95

jQuery兄さんに対抗してるんだろう

**デフォルトの名無しさん** · 2018/04/06(金) 22:26:12.66

jQuery兄さんは黙って実装コードを提示する
いろいろ言い訳してるやつとはレベルが違う

**デフォルトの名無しさん** · 2018/04/06(金) 22:53:48.94

>>315
お前がそう思うのはお前の自由。
俺はそういうお前らが駆逐される日が来ることを願っている。

お前を含めて、JavaScript界隈には間違っていることを平気で垂れ流す奴が多すぎる。
それでお互いの足を引っ張り合っていて、結果的にお前らは本来あるべきレベルにも達していない。
俺は多少でもそれを是正し、結果的に次世代の成長を早め、（というより本来の成長速度に戻し）
結果的にお前らが駆逐される日が来るように誘導している。