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

1 名前：デフォルトの名無しさん [2015/04/22(水) 01:35:08.20 ID:TQI/XWNo.net] JavaScript を自ら学ぶ人のための質問スレッドです。 >>2-5のテンプレを読んだ上で質問してください。 ■質問を書く上で (1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。 (2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。 　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など) (3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。 (4) 常に自発的に調べる心構えを持ってください。 　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。 　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。 (5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。 (6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。 　　※必ず「問題の事象が再現されること」を確認してください。 　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。 (7) サンプルコードに HTML が含まれる場合は validator.w3.org/ で [Check] してみてください。 (8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。 (9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。 (10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 2 名前：デフォルトの名無しさん [2015/04/22(水) 01:41:28.83 ID:TQI/XWNo.net] ■質問テンプレート 【環境】OS, 実行環境をバージョンと共に記入してください。 【何をしたのか】何をしたら問題の現象が発生するのか。再現手順を具体的に書いてください。 【エラーメッセージ】エラーメッセージがあれば正確に書き写してください。(Windows なら「コピット」を活用) 【期待する結果】最終的にどういう結果を望んでいるのか、を書いてください。 【サンプルコード】現象を再現可能な最小限のコードを書いてください。 　1レスに収まらないならコード投稿サイトを利用してください。 　jsdo.it/　jsbin.com/　jsfiddle.net/　ideone.com/ ■前スレ + JavaScript の質問用スレッド vol.117 + peace.2ch.net/test/read.cgi/tech/1404146244/ ■過去スレ全集（Web制作） www2.atpages.jp/mirror/2ch/javascript/ usamimi.info/~mirrorhenkan/2ch/javascript/ (閲覧のみ) ■テンプレ案（Web制作） fiddle.jshell.net/fH4cC/167/show/light/ ■関連スレ ECMAScript デス 4 peace.2ch.net/test/read.cgi/tech/1325448978/ JavaScript ライブラリ総合質問所 vol.4 peace.2ch.net/test/read.cgi/hp/1400834117/ CSS初心者スレッド＝13th＝(c)2ch.net peace.2ch.net/test/read.cgi/hp/1423959729/ Canvasについて語ろう peace.2ch.net/test/read.cgi/hp/1305093769/ 3 名前：デフォルトの名無しさん [2015/04/22(水) 01:42:40.40 ID:TQI/XWNo.net] ■FAQ fiddle.jshell.net/vSqKr/43/show/ ■開発者ツール(Developer Tools)の基本的な使い方 (全部は fiddle.jshell.net/vSqKr/43/show/#Browser-Developer-Tools ) ◆諸注意 - 本説明では Google Chrome の開発者ツールの名称に従います。他ブラウザで使う場合は適宜読み替えて下さい。 - IE9- でコンソールを使うには予め開発者ツールを起動しておく必要があります(開発者ツールを起動しないと console.log() が機能しません) - Safari はデフォルトで開発者ツールが無効な為、有効に設定する必要があります。 　 https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html ◆要素を検証 1. ページ上で右クリックして [要素を検証] 2. [Elements] パネルが開き、対象のDOMノードが選択される(選択対象が目的の要素でなければ [Elements] パネル上で選択し直す) 3. 右側のサイドバーから知りたいステータス名のタブを選択する 　　- [Styles] タブ … CSSプロパティの指定値を表示 (※カスケードによって上書きされたプロパティは取り消し線で表示される) 　　- [Computed] タブ … CSSプロパティの算出値を表示("font-size: 1em" を指定していても算出後の "*px" で表示される) 　　- [Properties] タブ … 選択したDOMノードのプロパティを表示 ◆コンソール 1. JavaScript コード上で console.log('Hello, World!'); と入力 2. [Ctrl] + [Shift] + [I] キー(IE は [F12])で開発者ツールを開き、[Console] パネルを開く 3. [Console] パネルに "Hello, World!" と表示される (※window.alert() は String 型に変換されますが、console.log() は Object 型の中身をそのまま表示してくれます。) 4 名前：デフォルトの名無しさん [2015/04/22(水) 01:44:12.20 ID:TQI/XWNo.net] ■各種仕様 ( fiddle.jshell.net/vSqKr/43/show/#Link も参照 ) ◆ Standard ECMA-262 bclary.com/2004/11/07/ (ECMAScript 3 HTML版) https://web.archive.org/web/20140715002617/www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/ (ECMAScript 3 和訳) www.ecma-international.org/ecma-262/5.1/ (ECMAScript 5.1 HTML版) tsofthome.appspot.com/ecmascript.html (ECMAScript 5.1 和訳) people.mozilla.org/~jorendorff/es6-draft.html (ECMAScript 6 有志HTML版) kangax.github.io/es5-compat-table/ (ECMAScript 5 compatibility table) kangax.github.io/es5-compat-table/es6/ (ECMAScript 6 compatibility table) ◆ HTML Standard (HTML5) www.whatwg.org/specs/web-apps/current-work/multipage/ momdo.s35.xrea.com/web-html-test/spec/WD-html51-20130528/Overview.html (HTML5.1 部分訳) www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html (Web Storage 和訳) ◆ Document Object Model (DOM) / CSS Object Model (CSSOM) www.hcn.zaq.ne.jp/___/WEB/DOM4-ja.html (DOM Standard (DOM4) 和訳) www.w3.org/TR/DOM-Level-3-Events/ (DOM3 Events) www.w3.org/TR/uievents/ (UI Events) www.hcn.zaq.ne.jp/___/WEB/cssom-ja.html (CSSOM 和訳) www.hcn.zaq.ne.jp/___/WEB/cssom-view-ja.html (CSSOM View Module 和訳) ◆ その他のWeb関連仕様 domparsing.spec.whatwg.org/ (DOM Parsing and Serialization - innerHTML等) www.hcn.zaq.ne.jp/___/WEB/XHR-ja.html (XMLHttpRequest 和訳) www.hcn.zaq.ne.jp/___/WEB/File_API-ja.html (File API 和訳) www.whatwg.org/specs/ (WHATWGの仕様一覧) ◆ MDN (Netscape/Mozilla) https://developer.mozilla.org/ja/docs ◆ MSDN Library https://msdn.microsoft.com/en-us/library/ie/hh828809 (Internet Explorer API) msdn.microsoft.com/ja-jp/library/yek4tbz0.aspx (JavaScript) msdn.microsoft.com/ja-jp/library/cc427807.aspx (JScript) msdn.microsoft.com/ja-jp/library/cc409712.aspx (DHTML) 5 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 08:35:00.62 ID:z+J4CGLI.net] テンプレ多すぎィ 6 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 10:26:00.49 ID:oUgI0BBb.net] 　　　　 　,一-、 　　　　 /￣　l |　　　／￣￣￣￣￣￣￣￣￣￣ 　　　　■■-っ　＜　んなーこたーない 　　　　´∀｀/ 　　　＼＿＿＿＿＿＿＿＿＿＿ 　　 ＿_／|Ｙ/＼. 　Ё|＿_　| /　　| 　 　　　| У..　　| 7 名前：デフォルトの名無しさん [2015/04/22(水) 16:03:41.91 ID:TQI/XWNo.net] ■各種仕様 (続き) ◆ JavaScript Garden (ja) bonsaiden.github.com/JavaScript-Garden/ja/ ◆ JSON (JavaScript Object Notation) www.json.org/json-ja.html ■諸注意 vol.115でlodashを不必要に推奨して啓蒙する行為が多く確認されており、ライブラリ系の質問はvol.116から禁止されました。 vol.115,116ではライブラリ禁止する発言が見られた直後にライブラリを許可する意図で次スレを立てる行為が確認されています。 本スレッドでライブラリ許可を求める発言が確認された場合は不要な争いを避ける為、スルーすることを 8 名前：推奨します。 ライブラリの質問はライブラリスレへ誘導し、誘導行為への反論はスルーしてください。 しかも連投規制食らったまま5個目を忘れてた [] [ここ壊れてます] 9 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 16:09:06.24 ID:iwbaaLY9.net] >>7 いや、もういらねぇよそんなテンプレ。 誰も読んでないし、読む気もしないし。 10 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 16:17:58.88 ID:oUgI0BBb.net] 　　　　 　,一-、 　　　　 /￣　l |　　　／￣￣￣￣￣￣￣￣￣￣ 　　　　■■-っ　＜　んなーこたーない 　　　　´∀｀/ 　　　＼＿＿＿＿＿＿＿＿＿＿ 　　 ＿_／|Ｙ/＼. 　Ё|＿_　| /　　| 　 　　　| У..　　| 11 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 17:00:38.11 ID:xopYwg3O.net] つーかそれライブラリ厨の愉快犯がこっちに立てる前の HP板にあるスレのテンプレだしな 12 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 18:00:14.69 ID:sdnJBf1e.net] ここまで有名になってんだなぁ lodash, あなたが既に使っているJavaScriptライブラリ www.infoq.com/jp/news/2015/04/lodash-utility-library > JavaScriptユーティリティライブラリのlodashがバージョン3.5に達して， > npmパッケージリポジトリの中で最も多く参照されるライブラリになった。 > もはや代用品などではなく，信頼できる選択肢のひとつだ。 13 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 18:22:43.13 ID:lQwgm9jn.net] node.jsとかそんな小さい世界の中で話されても・・ 14 名前：デフォルトの名無しさん mailto:sage [2015/04/22(水) 18:54:54.84 ID:hD+i2F7G.net] >>11 Web制作板からコピペするならライブラリスレでやればいいのに 15 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 08:04:33.64 ID:MOJZs/rD.net] >>10 ろくなことしねぇな。ライブラリ馬鹿は。 そんなにオナニー見て欲しいのかね。質問者はそんなもの期待していないのに。 16 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 11:56:07.65 ID:RLLS8SFj.net] なぜお前が質問者の気持ちを代弁してるんだ？ 質問者が何を期待しているかなんかわかるはずがないだろ。 17 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 12:18:02.71 ID:MOJZs/rD.net] >>15 失せろライブラリ馬鹿。 18 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 12:35:20.77 ID:j3fI+4i+.net] 触んじゃね 19 名前：名無しのプログラマー mailto:sage [2015/04/23(木) 20:48:28.22 ID:tP06eUm0.net] JavaScriptってこの先も生き残るかな?? 20 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 20:49:22.72 ID:RLLS8SFj.net] >>16 痛い所つかれたからって キレルなよｗ 21 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 22:39:53.24 ID:ggn/ga9m.net] 生き残らせるためにどんどんキメラ化してるからな 人が読めなくても構わないレベルまで落ちてきてるし 22 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 22:47:06.65 ID:o7dMQAWl.net] そうか？ 23 名前：デフォルトの名無しさん mailto:sage [2015/04/23(木) 23:40:57.87 ID:ggn/ga9m.net] 言語仕様や周辺環境、そして実装の話をごっちゃにしてすまないが トランスレータはもちろん asm.jsなどコンパイラも出てきてるだろ 24 名前：デフォルトの名無しさん mailto:sage [2015/04/24(金) 08:30:44.51 ID:5wjekFJo.net] >>22 普通は仕様で決まると思うが、実装を出した理由は如何に？ asm.js の普及率はJavaScriptに影響する程のものなのか？ 25 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 01:49:58.38 ID:UaqR1ge/.net] >>16 今はライブラリ馬鹿と言うのか。 26 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 08:51:50.03 ID:AtVl8T9u.net] >>24 ライブラリ使って勝手に回答する奴を馬鹿以外になんと呼べば良いのか。 質問スレッドに来るような奴らは、そもそも初心者なのであって、ライブラリ で書いて回答し、自分に酔ってるような まぬけの三流プログラマ は馬鹿そのものだろｗｗ　 C#で言えば、解答者が質問者無視して、勝手にラムダ式で書いてみたり、 頼みもしないコンストラクタを用意してこう書くべきだなんて言ってるような もの。 標準で実現できるのだから標準で書くのがこの手のコミュニティの原則だ。 海外でも同じ。なのに2chの専門板はｗｗ　そりゃ海外から陰湿なオタクの 集まりって揶揄されるわけだ。 27 名前：デフォルトの名無しさん [2015/04/29(水) 08:51:58.72 ID:X/8/xdqx.net] Javascriptでスタンドアロンアプリはできますか？ 28 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 09:12:52.25 ID:AtVl8T9u.net] >>26 HTML5 + CSS + JavaScriptでアプリで検索すればいろいろ手段が 出てくるだろうよ。 Visual Studioでも作れるしな。 もはや、ネイティブアプリの時代は終わりを迎えつつあるよ。 29 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 10:06:13.38 ID:k4chRKqa.net] 「2015年4月29日(水) 13:00」という文字列を日付型に変換する方法で何か良い方法あれば教えてください。 自分の頭だと「『年』より前に書かれた文字」「『年』と『月』に挟まれた文字」「『月』と『日』に挟まれた文字」を 抜き出してそれぞれ年月日とみなすみたいなやり方しか思いつかないのですが もっとスマートな方法ないですかね 30 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 10:14:34.20 ID:AtVl8T9u.net] >>28 そういう日付の付け方を辞める。 そもそも、表示用とベースになる日付のデータは分けるのが当たり前ですよ。 まさか、その形式でDBなどに格納してるんですか？ プログラミングの基礎がまるでなってませんね。 31 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 10:25:07.67 ID:k4chRKqa.net] >>29 この文字列は外部から取得するものなので、その前提は変えられないんですよ 32 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 11:17:08.00 ID:240jFMt2.net] こう言う役に立たない事書いて「俺マジスゲー！」って悦に入ってる可哀想な人多いから気にしない方がいいよ。 普通に正規表現使って分解してDate型作る、正攻法じゃダメなの？ 33 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 11:22:08.63 ID:AtVl8T9u.net] >>31 だから、それがスマートじゃねぇって言ってんだろ。 文章読めない三流が、正攻法とか言ってんじゃねぇよタコｗ 34 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 11:32:37.74 ID:240jFMt2.net] >>32 じゃあ貴方がその「スマートな」やり方答えてあげては？ 35 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 11:39:53.21 ID:k4chRKqa.net] >>31 レスありがとう 正規表現で分解、、よく考えたら数値と数値以外で分解すれば良かったんですね 自分が最初に考えてたソースよりはよっぽどシンプルに書けました var str = "2015年4月29日(水) 13:00"; var arr = str.split(/\D+/); var dt = new Date(arr[0] + "/" + arr[1] + "/" + arr[2] + " " + arr[3] + ":" + arr[4] + ":00"); console.log(dt); //Wed Apr 29 2015 13:00:00 GMT+0900 (東京 (標準時)) 36 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 11:47:47.47 ID:5jNnBy90.net] >>32 momentjsを使う momentjs.com/ 一応これでパースで来た console.log(moment("2015年4月29日(水) 13:00", 'YYYY年MM月DD日 hh:mm')) 曜日の指定はやらなかったが（なぜか）動いている。 たぶん、水を水曜日としみてなしてちゃんと解析し 不正な文字が入ったらinvalidにするとかちゃんとやるなら localeかCustomizeの設定が必要になるはず。 momentjs.com/docs/#/i18n/ momentjs.com/docs/#/customization/ 37 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 13:21:48.68 ID:i8bdmTNt.net] >>34 通りすがりだけど var str = '2015年4月29日(水) 13:00'; var dt = Date.parse(str.replace(/[年月日]/g,'/').replace(/\([日月火水木金土]\)/,'')); console.log(new Date(dt).toLocaleString()); // 2015/4/29 13:00:00 俺はjavascriptに詳しくないから、細かいところに問題があるかもしれないけど、 見た目動けばいいのならこれでいい。 javascript にはDateTime構造体はなく、変換はお手軽に出来るから、 数値型でもっていた方が取り回ししやすい。 そして>>31の指摘通り、他のjavascriptスレも含めて、雰囲気がおかしい。 38 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 14:02:41.00 ID:i8bdmTNt.net] >>36 （修正） 日曜日、月曜日だとバグるからこれで。 replaceの順番を入れ替えてある。 var str = '2015年4月29日(水) 13:00'; var dt = Date.parse(str.replace(/\([日月火水木金土]\)/,'').replace(/[年月日]/g,'/')); console.log(new Date(dt).toLocaleString()); // 2015/4/29 13:00:00 39 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 17:13:19.14 ID:ei5YAMam.net] 日本語WindowsのJScriptでtoLocaleStringは年月日という文字で区切られるのが普通だから意味がない。 40 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 17:26:46.67 ID:ei5YAMam.net] 確実に yyyy/MM/dd にしておくのが良い。 つまり月日は必ず0先行2桁で。 日時属性があるデータなんて少なからぬ場面でCSV化するだろう。後でADOに処理させる時にデータ型は文字列オンリーなので、ソートに支障なきよう桁を揃えておくのが定石かと思う。 あと、おまえら正規表現がオリジナルすぎてびっくり。 日時なんて、ごくごく簡単に、match(/\d+/g) の戻り値の配列でやるんじゃねえの？ 41 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 18:23:52.12 ID:OOEft19h.net] 質問者は>>34で解決したと言っているけど、今は何が論点なの？ 42 名前：デフォルトの名無しさん mailto:sage [2015/04/29(水) 18:47:25.04 ID:5jNnBy90.net] より良い方法は何か？だろ？ >>39 > あと、おまえら正規表現がオリジナルすぎてびっくり。 > 日時なんて、ごくごく簡単に、match(/\d+/g) の戻り値の配列でやるんじゃねえの？ それはお前オリジナルだろ？ 違うというのなら、オリジナルではないという証拠を書いてくれ 43 名前：質問 mailto:sage [2015/04/30(木) 16:54:41.94 ID:YotAoLtT.net] 訪問したWebページのinput要素を、自分の書いたスクリプトで操作する方法はありますか？ Webページ側で用意されているたくさんのフォームに、csvなどから一括で値を入力したいのです できればラジオボタンなども操作したいため、スクリプトの形で記述できると助かります 44 名前：デフォルトの名無しさん mailto:sage [2015/04/30(木) 17:07:23.85 ID:bhA6qPWK.net] ユーザスクリプト 45 名前：質問 mailto:sage [2015/04/30(木) 17:26:16.95 ID:YotAoLtT.net] ありがとうございます！ やってみます 46 名前：デフォルトの名無しさん [2015/05/01(金) 21:03:56.08 ID:k6ZOfYKO.net] javascriptの学習のため、Windows8.1で他の言語の学習でも使っているVisual Studioをそのまま使おうと思い、 ttp://neue.cc/2010/05/24_260.html を参考にファイル→新規作成→Webサイト→ASP.NET 空のWebサイトを選び、 ソリューションを右クリックから新しい項目の追加でHTMLページを追加しました。 とりあえずそのままデバッグでHTMLのページが表示されるはずだと思い、Internet Explorerを選択してデバッグを開始しましたが以下のエラーが出ます。 >HTTP エラー 403.14 - Forbidden > >Web サーバーは、このディレクトリの内容の一覧を表示しないように構成されています。 IEの、「スクリプトのデバッグを使用しない」のチェックは外してあります。 アドレスがlocalhost:53466/になっているので、サーバーを動かしていることが前提なのでしょうか？ でもサーバーを動かすにしても該当ディレクトリに置く必要があるはずだし、 どこかで大きな間違いをしている気がするんですが・・・ 47 名前：デフォルトの名無しさん mailto:sage [2015/05/01(金) 22:02:13.15 ID:k6ZOfYKO.net] うーん、IIS Expressが自動で起動しているようだけどだめだ コントロールパネルのプログラムと機能からIISを有効化したらlocalhostが表示される(バージョン表示はない) だけどvisual studio 2013のデバッグは同じエラーが表示されたままだ 48 名前：デフォルトの名無しさん mailto:sage [2015/05/01(金) 22:21:46.13 ID:k6ZOfYKO.net] 自己解決しました 新しい項目の追加で右クリックする場所が間違っていたようです 49 名前：デフォルトの名無しさん mailto:sage [2015/05/02(土) 09:04:15.48 ID:pz2OiV6C.net] JS全然関係ないけどまあ解決してよかったな 50 名前：デフォルトの名無しさん mailto:sage [2015/05/02(土) 13:34:21.30 ID:eE6530td.net] Win10に備えて俺も始めとくかな 51 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 13:09:24.27 ID:tYsnvpej.net] Javascriptでwindowsプログラミングが本当にできるのだろうか C++やC#じゃないとだめなこともあるのかな 52 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 13:29:34.44 ID:WcwFSYk5.net] JScript.netやnode.jsなら出来るんじゃね 53 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 14:16:51.26 ID:B4UGt06z.net] nodejsでは苦しいと思われる。 該当する構造体や .dll について隅々まで精読して調べて正しく動作させるまで慣れ次第で数時間から数週間かかるだろうな。 つうかこんな普通の手順が通用するかどうかさえ怪しい。 元も子もない話になるがvc++使えって結論になる。 54 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 14:45:48.66 ID:Itot55/0.net] 今ならNode-WebkitやElectron、ManifoldJS使うのが丸いんじゃない 55 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 15:15:46.81 ID:R8v75Gbn.net] JavaScriptについて質問します。 Webページのスクロールバーを固定するスクリプトをこのページ(allabout.co.jp/gm/gc/446230/)を参考にして作ったのですが、 「本文のところが隠れて見えない場合がある」と指摘されたので、 ボタンを押せばスクロールバーの固定を解除できるようにしたいと考えています。 しかし、ネットで調べたのですが、「押して実行する」ならいくつもあるのですが、 押して停止や無効化させるというのは見つかりませんでした。 どなたかボタンひとつで有効無効を切り替えるスイッチを配置する方法を教えていただけないでしょうか？ よろしくお願いします。 下記が使用しているスクリプトと実行箇所の内容です。 56 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 15:16:34.83 ID:R8v75Gbn.net] <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> // ページの読み込みが完了してから実行 $(function() { // 途中から固定したいボックスの情報を得る var navBox = $("#fixedNavi"); var navOst = navBox.offset().top; // スクロールされた際に実行 $(window).scroll( function() { // 現在のスクロール位置と、固定したいボックスの位置を比較 if( $(window).scrollTop() > navOst ) { // 固定用のclassを付加 navBox.addClass("fixBox"); } else { // 固定用のclassを削除 navBox.removeClass("fixBox"); } }); }); </script> <div id="fixedNavi"> 〜サイドメニュー〜 </div> 57 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 15:26:44.47 ID:c+bvCC5H.net] C#やVB.Netで出来てJscript.NETで出来ない、サポートされてないってことは割とあるな 置いていかれてる感じ 58 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 15:33:17.91 ID:c+bvCC5H.net] コード書けない環境なので考え方だけ 大域変数 var scrollEnable = true; を設け、ボタンを押すとそれがfalse/trueと逐次反転するようにする scrollTopのif文に && !scrollEnable とでも追加 合わせてボタンを押した際にclassの追加、削除もやると良し 59 名前：デフォルトの名無しさん mailto:sage [2015/05/15(金) 15:40:20.89 ID:Itot55/0.net] 横から>>57に補足すると、要は「押して（固定のトグルを）実行する」ものを書けばいい 「押して実行する」もののサンプルがいくつもあるならその辺は大丈夫だよね 次からはなるべくテンプレも読んでね JavaScript ライブラリ総合質問所 vol.4 peace.2ch.net/test/read.cgi/hp/1400834117/ 60 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 01:39:13.60 ID:+UC07Y5W.net] >>57はあまり良くないので訂正する。 その前に、>>55のコードは無駄があるので先に綺麗にしておく。 $(function() { 　　$(window).scroll( function() { 　　　　var enabled = $(this).scrollTop() > $("#fixedNavi").top; 　　　　navBox.toggleClass("fixBox", enabled); 　　} }); まず見た目の話なので、クラスを使う。 ボタンが押された時に、bodyにクラスをつけたり外したりする。 $('#btn').click(function() { 　 $('body').toggleClass('scroll-bar-fixed'); }); fixBoxクラスの有無でCSSでスクロールバーの固定を行っていると思うが、 あとはCSSをちょこっと書き換えて、 fixBox { 省略 } // スクロールバーの固定解除モード scroll-bar-fixed fixBox { 省略 } // スクロールバーの固定モード のような感じで制御できる。 重要なのは、JavaScriptではクラスを使った"モード"の変移のみを行い、 それによって変わる見た目は、CSSを使う言うこと。 これをしないとJavaScriptのコードがすぐに複雑になってしまう。 61 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 01:41:23.31 ID:+UC07Y5W.net] あ、navBox変数が無いｗ まあ適当に修正してくれ。 62 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 01:43:39.73 ID:+UC07Y5W.net] もう一箇所ミスってたんで、書きなおした。 $(function() { 　　$(window).scroll( function() { 　　　　var navBox = $("#fixedNavi"); 　　　　var enabled = $(this).scrollTop() > navBox.offset().top; 　　　　navBox.toggleClass("fixBox", enabled); 　　} }); 63 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 10:56:36.61 ID:l5FsiBnw.net] お返事いただき本当にありがとうございました。 今朝書き込みを見つけ、早速辞書を引きつつ試行錯誤してみたのですが、 JavaScriptが素人な私の力不足のため上手い具合に動いてくれませんでした。 せっかくお返事を頂いたのに申し訳な気持ちでいっぱいです。 テンプレートのCSSが .fixBox { position: fixed; top: 0px; } こんな感じでお返事内容に合わせて書き直すだけなので多分CSSの方は問題無いと思います。 なので、JavaScript本体のところに問題があると思っているのですがどこがどう間違っているのかわからな状態です。 本当にすいません。 64 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 13:07:55.59 ID:+UC07Y5W.net] 動くかどうかは知らん $(function() { 　　var navBox = $("#fixedNavi"); 　　var navTop = navBox.offset().top; 　　$(window).scroll(function() { 　　　　var enabled = $(this).scrollTop() > navTop; 　　　　navBox.toggleClass("fixBox", enabled); 　　}); 　　$('#btn').click(function() { 　　　 $('body').toggleClass('scroll-bar-fixed'); 　　}); }); .scroll-bar-fixed .fixBox { 　　position: fixed; 　　top: 0px; } <div id="fixedNavi"> 〜サイドメニュー〜 </div> <button id="btn">ボタン</button> 65 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 15:34:34.10 ID:TZWgpp9h.net] もうスマホはJSオフ推奨だな。 jQueryソースコードもjQueryユーザーコードも恐るべき循環お気楽コードだから、特にへたったバッテリーの非最新スマホにはブラクラ以上の脅威だから。 どうしてjQuery厨は全く不要な循環ばかり書くのだろうか。悪意を持って嫌がらせをしているとしか考えられない。 66 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 15:40:22.19 ID:P7OgM9Ju.net] はいはいお薬出しておきますね 67 名前：デフォルトの名無しさん mailto:sage [2015/05/16(土) 20:07:10.46 ID:l5FsiBnw.net] >>63 何から何まですみません。 上手く動いてくれています。 ありがとうございました。 失礼致します。 本当にありがとうございました。 68 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 03:21:54.35 ID:1BuEq8g0.net] window.location("...") これがIEだとページジャンプするのにクロムだとしないのですが、仕様ですか？ というか最近JavaScriptの学習を始めて、やたらIEと他のブラウザで動作が違うような ことがあるみたいで、こんなんでマルチブラウザ対応のコーディングなんてできるのかと 心配になってきましたが……それほど心配することでもないのですか？ 69 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 05:58:33.45 ID:6hxjNt+o.net] >>67 マルチブラウザ対応で作るなら、jQuery、lodashあたりを使ったほうがいいよ。 フレームワークを使うって手もあるけど、 こっちは新しいブラウザしか対応していないことが多い。 で、IEと他のブラウザで動作が違う？ 最新のバージョンであれば殆ど変わらないと思うが？ jQuery、lodash使えっていうのは、古いブラウザや 特定のブラウザにあるマイナーなバグ対策。 70 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 06:33:20.08 ID:8cwJfqPk.net] >>67 window.location は関数ではありません。 仕様を知りたいなら仕様書を読みましょう。 https://html.spec.whatwg.org/multipage/browsers.html#the-location-interface > こんなんでマルチブラウザ対応のコーディングなんてできるのかと 仕様書を読んで仕様通りにコーディングすればそれ程、困ることはありません。 仕様の実装度合いに多少差異はありますが、調べれば分かるないようですし、慣れれば大体覚えます。 71 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 06:33:38.14 ID:1BuEq8g0.net] >>68 レスありがとうございます。 jQueryはやっぱり必須なんですかね。 ちなみに他に気づいたのだと、IEの場合document.linksがうまくいきませんでしたね。 getElementById使えば問題ないんですけどね。 72 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 06:37:13.69 ID:1BuEq8g0.net] >>69 レスありがとうございます。 杞憂のようでしたね。 73 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 07:09:44.53 ID:8cwJfqPk.net] >>70 > IEの場合document.linksがうまくいきませんでしたね。 IE のバージョンいくつで document.links のどんな機能が期待通りに動作しなかったのでしょう？ getElementById と比較するところから想像するに document.links.namedItem なんですかね。 www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7068919 jsfiddle.net/atqLjqny/2/ 74 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 07:21:32.05 ID:1BuEq8g0.net] >>72 <a id="hoge" href="google.com"> ... </a> このようなタグからURLを抜き出すのに url = document.links.hoge.href はIE11だとうまくいきませんでした。クロムはできました。 代わりに url = document.getElementById("hoge").href にすると、IE11を含めた主要ブラウザで動くようです。 75 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 07:57:13.51 ID:8cwJfqPk.net] >>70 > url = document.links.hoge.href はIE11だとうまくいきませんでした。クロムはできました。 >>72で出した DOM Level 2 HTML の仕様書は読んでいるでしょうか？ その仕様は DOM Level 2 HTML では策定されていません。 HTMLCollection[name] による参照は DOM 4 で標準化されました。 比較的新しい仕様である DOM 4 を実装していないブラウザでは機能しません。 www.w3.org/TR/domcore/#interface-htmlcollection つまり、DOM Level 2 HTML の範囲内で実装できる document.links.namedItem を提案しているのですが、それでも動作しませんか？ > url = document.getElementById("hoge").href にすると、IE11を含めた主要ブラウザで動くようです。 さすがに getElementById は DOM Level 2 規定で古くからある仕様なので動作します。 www.y-adagio.com/public/standards/tr_dom2_core/core.html#i-Document 仕様には古い仕様と新しい仕様があり、新しい仕様は古いブラウザでは動作しません。 仕様の勧告日、各ブラウザの仕様の実装度合いを予め調べておくことが重要です。 それと仕様書通りに書くことですね。 ブラウザの独自拡張コードを使ったら全てのブラウザで動作しませんから。 76 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 08:33:40.08 ID:1BuEq8g0.net] >>74 namedItemを使うとIE11でもいけました。 勉強になりました、どうもです。 77 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 09:43:31.86 ID:CzRQDZeG.net] >>75 ↓こういう本もおすすめ。 JavaScriptパターン ―優れた� 78 名前：Aプリケーションのための作法 Stoyan Stefanov (著), 豊福 剛 (翻訳) 英語版なら、電子書籍が安い。 [] [ここ壊れてます] 79 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 10:24:27.29 ID:1BuEq8g0.net] >>76 どうもです。 オライリーには他にも開眼やGood Partsなど、良い本が揃ってるようですね。 今読んでるサイ本を終えたら、物色してみます。 80 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 13:58:09.95 ID:6hxjNt+o.net] >>70 わからないからって適当なサイトをググって それをコピペしてるでしょ？ 残念ながら、古い書き方をしているページがたくさんあって参考にならないよ。 >>74みたいにDOMのバージョンまで考えて書いてるページが少ない。 標準の書き方だけをしていれば、たしかに最近のブラウザでは きちんと動くんだけど、なにが標準か分からない。 標準が分かったとしても、それをブラウザが実装しているかどうか調べないといけない。 そこでjQueryなんだよ。jQueryならブラウザのバージョンの違いはほとんど無視できる。 jQueryのバージョンを気にしないといけないことが少しだけあるが、 IE6以降のブラウザで同じように動くことが保証されている。 あと多くの場合jQueryを使ったほうが短くなる。 url = document.links.hoge.href url = $('#hoge').prop('href') その書き方はDOM標準なのか？ 各ブラウザの実装がどうなっているか？を 調べるのとjQueryを勉強するを比べたら、jQueryを勉強するほうが はるかにメリットが多いよ。 81 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 14:05:25.39 ID:6hxjNt+o.net] >>77 jQueryだとこれがいいよ。 コアjQuery＋プラグイン/jQuery UI 開発実践技法 www.amazon.co.jp/dp/4798124281/ あとjQueryの本ではないがこれも良い。 JavaScriptで学ぶ関数型プログラミング www.amazon.co.jp/dp/4873116600 jQueryもlodash（Underscore）も関数型プログラミングを 取り入れたライブラリでね。これを使うと短いコーディングで わかりやすくて不具合が起きにくいコードを書くことができる。 82 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 15:18:03.01 ID:aj4oIMqk.net] 関数型プログラミングの定義が無いようなものだから言うた者勝ちだが、とりあえずjQueryもJSも関数型ではない。 たとえば$はhaskellにインスパイアされて云々などとほざく馬鹿がたまにいるがリアルタイムで見てきた者たちはそれが後付けの妄言だと知っている。 JSを何かにカテゴライズしたければOOPとするのがベストだ。 JSで関数型風に糞コードを書いたら読み難くなるだけ。 俺がそのオライリーの本が命令型に見えるほど狂ったコードを書いて引き継いだら低学歴の後継者は全く理解できずにjQueryで作り直していた。かなり慣れるまでとにかく分かりにくいものらしいから気取って関数型風に書くのは有害だろうな。 83 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 16:03:18.56 ID:aj4oIMqk.net] jQuery厨は馬鹿だからそれが関数型風どころか 逆に関数型風を極力排除する努力の成果物であるという寒々しい現実を 何らかの代表的な例で示してやらなきゃ自力では解決出来ないだろうな。 jQuery厨はEventTargetを起点にMSXMLのnextNode()風な探索をしないよな。 そもそも脳足りんだから出来ないから。 そもそもEventListener外部にそれ用の「素晴らしい」メソッドか何かが提供してあるから。 jQuery厨は馬鹿なのでそれら理由は全て当てはまるだろう。 例えばチェックボックスで意思確認をして後続するサブミットボタンを有効にしたい時、 狂った関数型風にそのボタンへの参照値をidempotentに書けばこうなる。 (f => ((b = n => !n ? null : n.nextElementSibling || b(n.parentNode)) => ((a = n => !n ? null : n.firstElementChild || n.nextElementSibling || b(n.parentNode)) => ((nn = n => !n ? null : f(n) ? n : nn(a(n))) => nn)())())())(n => n.type == 'submit')(e.target) 分かり易くないというか分かり難い、慣れて暗記してしまっている作者の俺を除いて。 繰り返す。こういうのを排除した成果物がjQueryだ。CSSセレクターを読み書き出来る知能までしか要求しないから誰でも使える。 84 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 17:17:57.04 ID:X736iQ2v.net] なるほど、共同開発という面でもjQueryは優れているんだね。 詳しい解説ありがとう。 85 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 18:16:12.96 ID:6hxjNt+o.net] >>80 なんかファビョてるなｗ jQueryと関数型プログラミングの関係はググればすぐわかるから レスする必要はないとして、どうでもいいところにツッコミを入れようｗ > JSで関数型風に糞コードを書いたら読み難くなるだけ。 これ、実は詭弁のテクニックって気づいた？ どこがと言うと、わざわざ「糞コード」と書いてある所。 どんな言語をつかっても良いコードと糞コード両方かける。 だから JSで関数型風に良いコードをかけるのに、 糞コードと限定し、糞コード＝糞なコード・・・反論できない（当たり前） という理屈を持ちだして JSで関数型風に書いたら読みにくくなるとミスリードさせている。 読みにくくなる原因は糞コードであって、JSで関数型風とは無関係なんだよ。 86 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 18:24:46.36 ID:6hxjNt+o.net] JavaScriptだけでも関数型プログラミングは出来るんだよ。 >>81のコードが見にくいのは、>>81が言っているように > 「素晴らしい」メソッドか が、JavaScriptだけでは提供されていないから。 jQueryを使うことで、それが提供されるから 関数型プログラミングでもわかりやすくなる。 という話なのさ。 87 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 18:29:05.43 ID:6hxjNt+o.net] > が、JavaScriptだけでは提供されていないから。 一応補足しておこう。JavaScriptにもわずかに提供されている。 forEachメソッドなどがそう。 だけど本当にわずかだし、DOMに関しては提供されていない。 DOMにはforEachメソッドがないから、JavaScriptのforEachを間借りすることになる。 その分コードは見難くなるわけよ。 本来JavaScriptには関数型プログラミングをする能力はあったんだが、 それを活かすためのメソッドが用意されていなかった。 jQueryやlodashはそのメソッドを完備することで、 はれてJavaScriptで関数型言語の良質なコードを書けるようになった。 88 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 20:54:47.89 ID:Cm/UZXwW.net] こちらに来るとjQuery推しが一人しかいないことがよくわかりますね。 89 名前：デフォルトの名無しさん mailto:sage [2015/05/17(日) 21:04:27.33 ID:0Mm3LM9e.net] 目を合わせちゃダメだぞ 90 名前：デフォルトの名無しさん mailto:sage [2015/05/18(月) 05:47:17.18 ID:ezOKhhiH.net] はい、>>86には目を合わせません 91 名前：デフォルトの名無しさん mailto:sage [2015/05/18(月) 06:55:12.35 ID:UwQvP8mG.net] 意識的に誤読して反論する辺りが相当な負けず嫌いだね 92 名前：デフォルトの名無しさん mailto:sage [2015/05/18(月) 11:33:11.93 ID:xWeJ7/Lw.net] なぜ誤読とわかるのか？ ID変えての自作自演の可能性が高いですなｗ 93 名前：デフォルトの名無しさん mailto:sage [2015/05/19(火) 06:53:30.28 ID:YaWtxR1V.net] 自作自演の根拠薄弱だな 94 名前：デフォルトの名無しさん mailto:sage [2015/05/20(水) 03:30:39.10 ID:EuT6yuDO.net] js始めたいんだけどフレームワークいっぱいでどれ使えばいいのか分からんす リッチなwebページを作れるようになりたいんだが、どのフレームワークだと入りやすいかな? あと分かり易い入門書があれば教えて欲しい、オライリーでおk? 95 名前：デフォルトの名無しさん mailto:sage [2015/05/20(水) 04:41:13.12 ID:Lg9Gjfeh.net] とりあえず無しでやれ 96 名前：デフォルトの名無しさん mailto:sage [2015/05/20(水) 08:16:36.28 ID:7dq/qgPN.net] 既存のフレームワークに頼ると、応用が利かなくなる気がするな。 それにフレームワーク覚えるって、また新しい言語勉強するような感覚でめんどいし。 自分でフレームワーク作れるくらいになりたい。 PHPでは作った。 97 名前：デフォルトの名無しさん mailto:sage [2015/05/20(水) 15:19:04.19 ID:UKJ+96Qh.net] オライリーのは何か他に手続き型現語を習得してる奴向け してるならオススメ 98 名前：デフォルトの名無しさん mailto:sage [2015/05/20(水) 22:56:17.11 ID:Iqf+D3Jd.net] >>92だけど 一応javaとCはそれなりに扱える jsは苦手意識があってなんかなぁ フレームワークなしでやっていく方がいいのk 99 名前：デフォルトの名無しさん mailto:sage [2015/05/23(土) 00:08:30.89 ID:YHGtlbT3.net] 縦長のキャンバスを90度回転させると右上が（0,0）になると思うんだけど通常通り左上から描画する方法ない？ 100 名前：デフォルトの名無しさん mailto:sage [2015/05/24(日) 09:50:03.68 ID:gEBAoLvh.net] もう一個横長の作って中身コピーすりゃいいじゃん 101 名前：デフォルトの名無しさん mailto:sage [2015/05/28(木) 12:58:47.15 ID:mGxcoe2E.net] >>63でクラスを無効にするのは上手くいったが、 ちょっとでもスクロールすると元に戻ってしまう。 $(window).scroll(function());の部分を無効化させたいのだが、 いい方法はあるだろうか？ $(window).scroll(function());をifで囲ってボタンで操作するというのも考えたが 書き方が悪いせいかうまく動かない・・・ きっとこんな感じなんだと思うが、もうわかんない・・・ $(function() { 　　var navBox = $("#fixedNavi"); 　　var navTop = navBox.offset().top; 　　var swicth = ture; 　　if文で囲う・ボタンが押されたら条件をfalseにして無効化する--------- 　　$(window).scroll(function() { 　　　　var enabled = $(this).scrollTop() > navTop; 　　　　navBox.toggleClass("fixBox", enabled); 　　}); 　　if文終わり------------- 　　$('#btn').click(function() { 　　　　if文を無効化するためswicthにfalseを代入する 　　}); }); 102 名前：デフォルトの名無しさん mailto:sage [2015/06/02(火) 23:01:43.46 ID:zeYZnMnE.net] jQueryではなくposition:stickyとポリフィルを使い、ボタンでstickyをtoggleすればいい

---

---

[ 続きを読む ] / [ 携帯版 ]

read.cgi ver5.27 [feat.BBS2 +1.6] / e.0.2 (02/09/03) / eucaly.net products.
担当:undef