teratailもりあがっtail？ 22問目 ->画像>1枚

teratail
https://teratail.com/

■前スレ
teratailもりあがっtail? 21問目
http://2chb.net/r/prog/1541649918/

■ユーザ名の略称、用語
http://fiddle.jshell.net/17zs2rmp/1/show/light/

■次スレ用テンプレ
http://fiddle.jshell.net/17zs2rmp/1/show/light/#thread-template
上記URLの「テンプレ案」を元に次スレを立てて下さい。
1行目の」「!extend:」から始まる行は必ず入れて下さい。

---

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:----: EXT was configured

>>1
次スレのテンプレ案
http://fiddle.jshell.net/17zs2rmp/2/show/light/

スレ立て＆テンプレ乙
一気に高度になったな

これあだ名とかつけくわえてもいいのん？

ヲチね

>>4
誰でも編集できるように、jsfiddleにしたから好きに変えてくれ

本文が画面端に寄りすぎていたので、CSSを調整してみた
http://jsfiddle.net/17zs2rmp/3/

テンプレ案のユーザ名の略称見てて思ったんだが
爺(Zuishin)とパパ(episteme)とママ(asm)とオカン(mts10806)とペット2匹(犬(Chironian)、スヌーピー(YouheiSakurai))で一つの家族みたいだな

> matsuzakaq (URL不明)
> MG1986JP (URL不明)
> zzzzz (URL不明)

名前は一字一句合ってるのかね？
合ってるなら退会済、間違っているならまだアカウントが生きている可能性があるが…

マジゲイは改名した
https://teratail.com/users/kuzurotto

松坂はもともと複垢多過ぎてどれが本体かわからない

いびきはBANされた

おいおいIP表示かよ。マイナーなプロバイダーを使っていたらほぼ特定されるじゃん！
インターネットマルチフィードのtransixサービスを使ったDS-Lite通信なんて使っている奴なんて
俺以外におるんか？

>>9
ありがとう、反映しておいた
http://jsfiddle.net/17zs2rmp/5/

その前に誰かが更新したみたいだが、何が変わったのか分からなかったので/5/に反映していない
http://jsfiddle.net/17zs2rmp/4/

バブみ、ガッテンランキングを追加しといた
http://jsfiddle.net/17zs2rmp/7/

http://jsfiddle.net/17zs2rmp/6/ というのがいつの間にかできてるが、用語が追加されてるみたいだな

こっちにホイ

https://teratail.com/questions/159810#reply-239432
いつものアヒルの名（迷）言でた

>>12
乙

- dl>divのHTML文法違反が気になったので、別の実装法に変えた
- 目次を追加した
- /6/の用語を一部加えた(「クラッシュポイント」は真偽不明なので入れなかった)
http://fiddle.jshell.net/17zs2rmp/8/show/light/

＞こっそり修正してくれる人へ
修正してくれるのは有り難いんだが、何の報告もなしにこっそりやられると修正されている事実に気が付かず、俺や>>12のように更新後にナンバリングが飛んで気が付く事になる
自分で更新した内容を反映してほしければ、ここで報告してくれ

次はワッチョイだけでIP要らんと思うが
>>1乙

フォークして色々変えた。内容的には8と一緒のはず。
(フォーク後に追加された分のコピペをミスしてなければ)
https://jsfiddle.net/zhvLes43/21/show

変更点
・CSS -> SCSS
・PureなJavaScript -> Babel + JSX
・リストはYAMLで管理できるようにした。説明とかはMarkdownを使えるようにしてる。
　Reactにしようかなと思ったけど、<template>をクローンしながら足すようにした。
・IEは捨てた。意識高い系の寺尾ラーにIE使いなどいない！

YAML知らない人のためにJSONも考えたけど、JSONって追加するのに","とか考えるの面倒だから、
人の手であつかうフォーマットじゃ無いんだと思うんだよね。
codepenだったら、趣味全開でpug+sass+coffeescriptのインデント3姉妹にしていたかもしれん。

ランキング部分は一つのリストから自動生成とかしたいね。
明日の朝までに妖精さんがやってくれるような気がする。

JSFiddleってつかったことないんだが

- 更新ってSign inせんと出来ないのん？
- {Update]押したらええのん？
- 更新は勝手にやってこっちには報告のみでええのん？

>>15 からの変更。
dl要素直下ではdiv要素を使えるはず( https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl#Wrapping_name-value_groups_in_HTMLElement(div)_elements )
なので、とりあえず、項目ごとにdiv要素でグルーピングしておいて、少しCSSをすっきりさせた

http://jsfiddle.net/17zs2rmp/9/

>>19

- Sign inする必要なし
- ヘッダーのUpdateボタンを押す
　⇒「Update anonymous (public) fiddle?〜」的なドロップダウンがでてくる
　⇒ドロップダウンの下部にある「Update fiddle」ボタンをクリック
　⇒URLの後ろについてる数字(http:~~/1/←ｺﾚ)がスレに出てなければ更新完了。更新後のURLを添えて変更点を報告
- 今のところいいんじゃね？いずれルール作らないとどうにもならなくなりそうだけど

>>21
ありがと。あとで気が向いたらやってみる。

Git使いたいとこだが匿名性消えるのよな

https://jsfiddle.net/zhvLes43/22/
新規ユーザーの追加、既存ユーザーのあだ名追加。

いまのとこ
http://jsfiddle.net/17zs2rmp/9/ 　と
https://jsfiddle.net/zhvLes43/22/ 　があるのか

どっちを使っていくかね(個人的には後者推し)。

見比べるの面倒だから丸投げ質問するけどどう違うの？

>>26
内容的にはほぼ一緒
17zs2rmpからzhvLes43への変更でJS等をどう弄ったのかは>>17にだいたい書いてある。

代わりに答えちゃうけど、２番目は１番目をforkして改良したもの。(>>17)
だから２番目が本流だと思うよ。

自己解決しました！(解決法の記述無し)

【至急】初心者　スクレイピングについて

### 前提・実現したいこと

レートとランキングのデータ取得ツールを作ろうと思っています。
スクレイピングを行うのに、おすすめの言語とライブラリを教えてください。

### 発生している問題・エラーメッセージ

teratail APIに総合ランキングを取得するパラメーターが見当たりません。

### 該当のソースコード

```
var request = require('request');

request('https://teratail.com/api/v1/users', function (error, response, body) {
console.log('Status:', response.statusCode);
console.log('Headers:', JSON.stringify(response.headers));
console.log('Response:', body);
});
```

### 試したこと

総合ランキングのページネーションでajaxが取得するデータを見ましたが、
JSONに生HTMLを入れているだけでした。

### 補足情報（FW/ツールのバージョンなど）

Windows

寺尾APIは糞だから、スクレイピングするしかない

>>20
> dl要素直下ではdiv要素を使えるはず( https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl#Wrapping_name-value_groups_in_HTMLElement(div)_elements )
知らなかった
教えてくれてありがとう

俺としては、CSSの為にHTMLを書き換えるのはしっくりこなくて、元のCSSの方が「HTMLがすっきりしていていい」と思うが、好みの問題だろうな…

>>26
使用言語の違いが大きい

http://jsfiddle.net/17zs2rmp/9/
- HTML
- CSS
- JavaScript

https://jsfiddle.net/zhvLes43/22/
- HTML + YAML (tableデータをYAMLで管理)
- SCSS
- Babel + JSX

/zhvLes43/はYAML,SCSS,JSX,markdownを理解していなければ、コードを書けないという点で要求される技術レベルが高い
俺としては、ハードルを上げすぎない方が編集者が増えていいと思うが、どうしたものか

>>18
> ランキング部分は一つのリストから自動生成とかしたいね。
それが理想だが、リンキングを更新してくれる人が参照している元データが分からんと対処しようがない状態
とりあえず、zhvLes43のtable生成コードは汎用性を上げる余地があるので、改善してみる

> それが理想だが、リンキングを更新してくれる人が参照している元データが分からんと対処しようがない状態
よくよく考えたら、「順位,ユーザ名,総スコア,回答総数,BA数」を基に計算しているだけだな
やってみる

そもそもこっちじゃないとそれ置けない理由がないから

IP非表示をもとめるこえがそれなりにあるけど、逆に非表示に反対する奴はどれくらいおるん？
とくにいないようならテンプレ変えちゃうけど（IP非表示・ﾜｯﾁｮｲ表示・id表示）

>>37
IP表示賛同派
IP表示が下手な書き込みが出来ない抑止力になる事が期待できる

>>37
どっちでもいい。
俺のIPアドレスはどのGeolocationサービス使っても正確な場所が表示されないからな。

ここまで全員回答者

質問者がこんなところ見るんかいな

途中経過(11はBabelに変更してみただけ)
http://jsfiddle.net/17zs2rmp/10/

- HTML + CSS + JavaScript(Pure)
- 全ての表をYAMLから出力するようにした
- 目次を自動生成するようにした
- IE未対応になってしまった(Babel+JSXに変更するだけでは上手くいかんのね)

本題の「ランキング部分は一つのリストから自動生成」について
技術的には可能だが、総合スコアの元データが出ていないから、集計データを貰えないと作れない事に気がついた
「集計対象ユーザ 総合TOP30、もしくは月間TOP10」もあいまいで集計手順が不明瞭なのが困る

バブみ率とガッテンレートの用語辞典には何も記載がないが、どっちかが総合集計でどっちかが月間集計なのかね…

IE11に対応させた
http://fiddle.jshell.net/17zs2rmp/12/show/light/

>>42
たぶん<template>についてIE対応が無理だとと思う。
もうIEはきっぱり諦めてばりばりのES2015+で行こうぜ。

>>45
バリバリのIE11対応にしてしまったZE!

正直、IE11対応よりもYAMLの扱いを覚えるのに時間がかかった
YAML自体は読みやすくて良いフォーマットだと思うが、表形式に変換するならハッシュとの相性が最悪
YAMLはオブジェクトとして解釈するから順番制御ができない
だもんで、列名の順番を定義しなくてはならなかったのだが、知らない人から見たら「なんでこんな面倒な事を...」ってなるよな
YAMLが気を利かせてMapを返してくれればよかったんだが

本音を言えば、二次元配列にすれば綺麗にまとまるんだが、>>17は読みやすさ重視でハッシュを採用したのであろうからそこは変更しなかった

>>47
そういやJavaScriptのMapについてQiitaに記事を書いた時に、
YAMLの連想配列をMapとしてくれるようなライブラリを探したんだけど、なかったんだよなー。
おっと、これ以上は身バレするからこの話はやめとこう。

CSVは編集しづらいだけなので、採用しなかった。
JSONは最後のエントリーに余計なカンマを付けられないなど制限が多すぎるので、採用したくはなかった。
CSONはさらに知っている人少なそうだから論外として、JSON5の方が良かったかも知れない。
その他の候補としては使ったことないけどTOMLとかかな。

ランキングのスクレイピングツールはNode.jsでつくるかRubyでつくるか未だ悩んでいて、一行も書けていない。
とりあえず、teratail APIが何の役にも立たないと言うことだけがわかった。
人の手で編集するわけではないので、こっちの出力はCSVでいいのでは無いかと思っている。

>>48
https://qiita.com/raccy/items/816a322fb330193e788b

これで一人埋まったな
ラッシーは日本ネットワークインフォメーションセンター
場所は東京あるいは大阪
多分東京

テンプレに追加よろ

>>48
YAMLでMap出力はやはり無理なのか
CSVは表計算ソフトを使えば、YAMLよりはよっぽど二次元データの編集しやすいと思うが、そんなに編集しづらいかね？

クライアントJSでスクレイピングは無理だが、HTMLソースから情報をひっぱるだけなら<textarea>で入力して貰えばいい気がしてきた
というか、あなた(>>30)は絶対に初心者ではないと思う

おうコピペミスしてる
日本ネットワークインフォメーションセンターじゃなくてインターネットマルチフィード株式会社だ

>>51
表計算ソフトを開くのが面倒でしょ？
というか、このPCにMS OfficeもLibreOfficeも入っていないことに今気付いた。
Google SpreadsheetsやOffice Onlineでも使えばいいやって思って入れてなかったわ。

>>52
インターネットマルチフィード株式会社は個人向けプロバイダーじゃなくて、
プロバイダー間のバックボーンの会社から、個人が直接契約結ぶことはないよ。
まぁ、transixサービスを提供しているプロバイダーはごく少数だと思うので、
ググっていればいつかは辿り着くと思うぞ。
ついでに、DS-Liteはマジで速いからお勧め。MTU1500の力は偉大。

>>53
表は表計算ソフトで編集してこそ真価を発揮すると思う
ぶっちゃけ、一から入力するならYAMLは面倒くさくて仕方ない
元からあるデータを少し、修正する程度なら良いが、セルのコピーできんし、他のデータを読むために表よりも長く縦スクロールしなければならない…とデメリットが大きい

ずっとNintendoの話をしてるのかと思ってた
はずかしい・・・

らっしーはそもそも大阪-京都圏だぞ
もっと言うと祝日だし、NTT系列の会社内部から5chに書き込めるわけ無いだろう
情報漏えいとして即刻クビが飛ぶわ

まあ重要なのはそこじゃない

プロバイダはともかく、そのドメインから接続してんのがラッシーと特定できたんだからラッシーは今後コテハンで書き込んでんのと同じことになったってことだぞ

つまりこのスレは隔離スレと
解散

ガッテン、バブみ率ランキングを作る時のために使っているブックマークレットくんを晒しておく
なんかの参考になればいいな（はーと）
https://codepen.io/anon/pen/yQjNgN

できることは
- 月間10位+総合30位以内のユーザを抽出
- 指定したユーザのスコアを取得
- 指定したユーザの総回答数を取得
- 指定したユーザの総BA数を取得
- 指定したユーザの総合評価回数を取得

https://teratail.com/users?tab=ranking-total のHTMLソースをコピペして「総合ランキング」を生成するようにした(ガッテンレートまでOK)
http://jsfiddle.net/17zs2rmp/13/
後はtable sort系スクリプトを取り込めばいいわけだが、既製品だと何がいいだろう？

>>60
BA数を得る方法がないか探していたのだが、やはりプロフィールページまでたどる必要があるのね
有難く参考にさせてもらう

流れを読んでみて、煽り、冷やかしが分かりやすいのはIPのメリットだと思った
携帯から書き込んでも地域程度は特定できるのね

色々試したんだがjsfiiddleのbabelがそもそもIE11では動いてくれないっぽい。
今更ES5文法なんて使いたくないんだけど、IE11は捨てる方向でだめかな？

ｱｳｱｳｴｰ Sadf-A3/R
http://hissi.org/read.php/ff/20181123/TFV6QjBvaldh.html
http://hissi.org/read.php/ff/20181124/cXZBK0UyMTBh.html
http://hissi.org/read.php/twwatch/20181124/UlVYallzZnVh.html

>>63
一応、JSBINならBabelが使えるようだ
https://jsbin.com/pepuqidimo/1/edit?html,js,output
plnkrもBabelのPackageはあるようだが、使い方が分からなかった
https://plnkr.co/edit/

>>64
わざわざ探してきたところ悪いが、どれも俺の書き込みではないな

IE11対応のままES2015+でかけるようにやっとできました。
https://jsfiddle.net/17zs2rmp/14/show

HTMLの最後の方にあるscriptタグ二つは消さないようにしてください。
polyfillはIE11以外は不要なので外出ししてbabel-polyfill読み込んでいます。
JS自体はアロー関数とfor-ofに変更したぐらいしか、直していません。
ぶっちゃけ、IE11だと表示遅いですが、情弱にはこれぐらいがちょうどいいでしょう。

ほんと、jsfiddleのバグだろ、これ。老舗のサービスなのにcodepenに勝てなくなったわけだわ。
やる気があったら、Qiitaにでもどう対応したかを書いておくよ、たぶん。

>>65
移るんならCodePenの方が俺好みなんだけど、
本格的にやるなら、CodeSandboxを勧めておくよ。

アウアウはなー
ワッチョイもIPもかぶるんよ
その上IPコロコロ変わるんよ

おかげでしょっちゅう規制食らう
多分荒らしとかぶってるんだろう

面倒くさい回答者と、面倒くさい質問者
どっちがより面倒くさいか

個人的には前者

単に自分に関わってくる奴が一番面倒くさいというだけだろ

面倒くさい質問者は放っておけばいいがmtsとzuiはそういうわけにはいかない
まあ二人とも自分がすることちゃんとしてれば大丈夫よ

# テンプレ案更新
https://jsfiddle.net/17zs2rmp/15/show

## 更新内容
* 前のバージョンや次のバージョンのリンクが作られるようにした。
* もし、新しいバージョンがあったら、メッセージを出したりするようにした。

## TODO
* [x] IE11対応。
* [x] ES2015+が可能にする。
　* [ ] ES2015+っぽいコードにする。
　* [ ] TypeScriptに移行する。
* [x] 次のバージョンへのリンク。
　* [ ] 最新バージョンへのリンク。
* [ ] iPhoneのSafariだと途切れてスクロールもできない問題の対応。
* [ ] 適当なCSSフレームワークを採用する(レスポンシブ対応など)。
* [ ] ランキングデータ(BA数含む)を取得するブックマークレット登録用リンクを用意する。
* [ ] 現行スレとか、なぜ誰も足さない。

## その他
とりあえず、CSSフレームワーク使おうぜ。
誰でも知っているならbootstrapだけど、なんか案あればよろしく。

>>74
乙

TODOについて突っ込むが、jsfiddleは最新バージョンの取得はできないはずだぞ
Set as baseを使えば不完全ながら実現できそうだが、Set as baseを使うにはユーザ登録しなきゃいけなかったはず

>>74
skeletonに一票
bootstrapは身長がでかくてこわい

>>74
乙。Babelだけでも結構ES2015+な文法を使えるんだな。

> * [x] ES2015+が可能にする。
> 　* [ ] ES2015+っぽいコードにする。
もう少し、「ES2015+っぽいコード」の具体案が欲しい。

> とりあえず、CSSフレームワーク使おうぜ。
CSSフレームワークは詳しくないので他の人の判断に任せる。

>>75
nextと同じように fetch() で再帰して取得するのではないか。
バージョンNo分だけ fetch() する必要があるが、技術的に不可能ではないと思う。

https://teratail.com/questions/164498
https://teratail.com/questions/164503

トリオプログラミング