- 1お1◆AI/w/GutN622/08/08(月) 00:33:49
1がプログラミングの勉強がしたいから
ならば興味ある題材にしたいと思い
血統表を作ろうと頑張る姿を
日記程度にメモっていくスレ
やりたいこと
・ウマ娘の元ネタとなった馬の血統表のデータベースを作る(データ配列でもなんでもいい)
・それを表示する
・5代血統表で何がクロスしているのか自動で表示されるプログラムを作る
・血統表の中をクリックすると関連するウマ娘を表示する
(例:サンデーサイレンスをクリックすると他のSSの血を持ったウマ娘との血統相関図が出てくる)
しかし、この1、プログラミングはズブの素人で右も左も全くわからないのである
誰に何を教えて貰ったらいいのか本当にわからないのでスレを建てた次第である
画像は保存してあったnetkeibaの血統表のスクショ - 2二次元好きの匿名さん22/08/08(月) 00:35:30
なんの言語で作るん?
- 3二次元好きの匿名さん22/08/08(月) 00:35:40
HTML
CSS
JavaScript
多分使う言語はこの3つかな?
HTMLとCSSがプログラミング言語かどうかってのは置いておいて - 4二次元好きの匿名さん22/08/08(月) 00:36:04
流石にパソコン持ってないなんてオチはないよな?
- 5二次元好きの匿名さん22/08/08(月) 00:37:02
データ構造なら、馬の父と母がわかる2分木みたいなの作ればいいのでは?
- 6お1◆AI/w/GutN622/08/08(月) 00:38:22
- 7お1◆AI/w/GutN622/08/08(月) 00:41:17
- 8お1◆AI/w/GutN622/08/08(月) 00:47:20
- 9お1◆AI/w/GutN622/08/08(月) 00:53:49
- 10二次元好きの匿名さん22/08/08(月) 00:54:18
- 11お1◆AI/w/GutN622/08/08(月) 00:56:35
- 12お1◆AI/w/GutN622/08/08(月) 02:12:06
vue.jsが楽って聞いたからvue.jsを使おうと思うんだよね
Vue.jsで配列や連想配列を出力する方法LaravelMixで自分はVue.jsを使ってます。同じようにやりたい場合は、前回の記事を参考にしていただければスムーズに作業できると思います。HTML上にVue.jsを読み込んでる人は、impormikaduki.infoひとまずこんな感じでいいのかな…?
- 13二次元好きの匿名さん22/08/08(月) 06:48:15
こりゃまた大変だ…
- 14二次元好きの匿名さん22/08/08(月) 07:36:46
データ構造の話に戻るけど、JRAではウマ固有のIDとして血統登録番号でウマを区別している。全ての情報(父のID、母のID、自身の競走馬名、厩舎、成績など)は血統登録番号に紐づけられる。
TARGET frontierJV(ターゲット) | 使い方マニュアル当マニュアルでは、JRA-VAN TARGET frontierJV(ターゲット)の使い方をキーワード検索や各競馬用語一覧から調べる事ができます。100超のヘルプ項目が疑問を解決します。targetfaq.jra-van.jp以下血統登録番号のことを単にIDと書く。(もちろん自分だけのプログラムだから、血統登録番号をIDとして採用する必要はない。)
他のウマとの関係はIDの関係で表現される。血統であれば、IDの二分木になる。(二分木というのはデータを読み出して使う側のアルゴリズムの中で意識されるべき話であって、データを作る段階では別に二分木であることは意識する必要はない。データベースの各行に自身のIDのほかに父のIDと母のIDが含まれてればいい。)
血統表を表示するなら、あるウマの名前が入力されたら、名前からIDを逆引きし、そのIDの行から父IDを見つけ、父IDの行から父の名前と父父IDと父母IDを見つけ、を必要な世代数繰り返すプログラムになる(もちろん父だけじゃなく母についても)。
- 15二次元好きの匿名さん22/08/08(月) 07:40:15
あくまで想像だから間違ってる可能性も結構あるけど、netkeibaなど商売でやってるデータサイトはJRA(JRA-VAN)のデータベースをそのまま使っていて、イッチがやろうとしているような表示プログラムを自前で用意してるんじゃないかな
- 16二次元好きの匿名さん22/08/08(月) 07:40:54
まあ開発者ツールとか使って勝手に既存の血統表を改造るという手もあるのでは…?(本末転倒)
特に写真以外は公開しないだろうし - 17お1◆AI/w/GutN622/08/08(月) 09:21:25
IDって
スペちゃんのnetkeibaのURL
スペシャルウィーク | 競走馬データ - netkeiba.comスペシャルウィークの競走馬データです。競走成績、血統情報、産駒情報などをはじめ、50万頭以上の競走馬、騎手・調教師・馬主・生産者の全データがご覧いただけます。db.netkeiba.comでいう1995103211の部分
JBISでいう
スペシャルウィーク|JBISサーチ(JBIS-Search)日本軽種馬協会が運営する国内最大級の競馬情報サイトJBISサーチの、スペシャルウィークに関するページです。競馬に関する膨大なデータを手軽に検索・入手できます。www.jbis.or.jp0000293624の部分
になるのかなぁ?
スタッドブックはURLのパラメータがしょっちゅう変わるのでよくわかんないです
とりあえずウマ娘だけなのでそんなに桁はいらないだろうから、ウマ娘にいるか実馬なのかを判別する桁番号とキャラクター番号で何とかなるのかな
- 18お1◆AI/w/GutN622/08/08(月) 13:07:49
試しにnetkeibaの配列がどうなってるのかざっと覗きに行ったけどソースがどれなのか分からなかった
indexのコードの時点で既に綺麗に生成されてるしPHPやサーバーの中なんだろうか…? - 19二次元好きの匿名さん22/08/08(月) 14:00:17
URLからAPIで動的にコンテンツが生成されて、APIがデータベースから取得した情報が埋め込まれたページが生成されているように見えるね。データベースの中身はサーバーにしかないと思う。
- 20お1◆AI/w/GutN622/08/08(月) 20:41:18
とりあえずやりたいことと作業することを一旦整理するね!
・ウマ娘の配列を作ってウマ娘一覧リストを生成する←⭕️
・各ウマ娘にIDを作って振り分ける←これから
・各ウマ娘の親のIDを決めて配列に両親のIDを記入する
・親の単体の配列を作ってIDを記入し親の親のIDを決める
・それを最低限5代、もしくは必要であればそれ以上その作業を繰り返す
・ウマ娘に記載された親IDと親馬の配列IDを繋げる?完全一致?検索する?プログラムを作る
(父母両方5代までのループ設定にする)
・それを表示させるプログラムを作る(画面上で選択されたウマ娘に限る)
・5代内でクロスしている場合はそれを判定するプログラムを作る
血統表の部分はこうかな…?
まだ作業してたら出てきそう - 21お1◆AI/w/GutN622/08/09(火) 01:55:29
結局ずっとあにまんやってた
まあ明日休みなんで明日から本気出すモンニ - 22お1◆AI/w/GutN622/08/09(火) 09:06:55
メモ
ウマ娘の公式サイトはhtmlを見る限りNuxt.jsを採用している
Nuxt.jsはVue.jsの上級者向け版 - 23お1の方◆AI/w/GutN622/08/09(火) 09:39:41
- 24お1◆AI/w/GutN622/08/09(火) 10:55:43
メモ
ウマ娘公式サイトのIDの振り方
htmlを見てもId属性は存在してないがdata-src属性に記載されたURLにそれっぽい振り分けの記述が
スペちゃんの場合
2021/01/(謎の文字列).png
多分何かが暗号化?されたものなんだと思うけど素人にはわかんないのでIDの参考にはしないでおく
アプリリリース前からいるキャラは基本的に2021/01で、1番最近のワンダーアキュートは2022/07になっている
data-srcは一体なんの属性なのかというと、
data属性はカスタムデータ属性と呼ばれ、JavascriptやjQueryで値を取得するために使われるものらしい
それに画像のソースに使われるsrc属性を合体させたものなので
つまり画像遅延読み込みのソースを参照するためである
最近のブラウザにはLazy Load機能が標準で搭載されているようだが、一般的な遅延読み込みを判別する属性の記述がloading="lazy"なのに対し
公式サイトはlazy="loaded"になっている(よくわかんないッピ) - 25お1◆AI/w/GutN622/08/09(火) 13:43:56
- 26二次元好きの匿名さん22/08/09(火) 14:03:01
これスマホでやるの苦行そうだな…と思う本職民であった。実にマゾい。
- 27二次元好きの匿名さん22/08/09(火) 14:06:17
ここらへん全然知らんのでググってみたが
連想配列から値を取り出す方法としてこういうのはどうだろう
javascript vue.js object 配列を検索 - Qiitavue.jsで配列を検索したい。しかし、なぜか find を使うと googlebot が エラーを吐く。
これはSEO的にまずい。
ということで、 filter を使って要素を取得したり、存在チェックしたりします。
まずは元...qiita.com - 28二次元好きの匿名さん22/08/09(火) 14:09:52
phpMyAdminとか使わずにdata()に配列ぶっこむのか
書くの面倒そうだけど頑張れ
ちょうど仕事で使ってるから親近感 - 29お1◆AI/w/GutN622/08/09(火) 14:19:29
みなさんありがとうございます!!!!!
phpMyAdminってなんですか!!!!!(無知)
あー…サーバーにインストールするのか…
MySQLってあれか…?高校時代に情報の時間にエクセルと一緒に筆記問題だけやらされてたやつか?
古のアップロードが無理な携帯サイト縛りで携帯サイトでこれだけ出来るんだぞ!ってscriptタグでいろいろやろうとしてます(アホ)
参考になります、またその時が来たら参考にします
- 30二次元好きの匿名さん22/08/09(火) 16:59:09
謎の文字列について
リソースのURIから察するにサイトの管理はWordPressでやってるらしく、WordPressにはファイル名から情報を推測されることを防ぐためにファイル名をハッシュ様の無意味な文字列に変換する機能があるらしいので、それっぽい。ほえ〜
(同じようにアプリの変数も難読化をしておけば解析されにくくなるのにね)
- 31二次元好きの匿名さん22/08/09(火) 17:09:16
製品やサービスなんかのサイトで画像をベタな連番管理にするとですね、見に来た人に漁られるんですよ。
ティザーサイトでこれやってしまうと、まあ情報リークに繋がるわけですね。古来から続く伝統的やらかし事例です。 - 32二次元好きの匿名さん22/08/09(火) 17:34:08
暗号化大事(n敗)
- 33お1◆AI/w/GutN622/08/09(火) 19:56:51
やはり暗号化はリークから守る為にも必要なんですね〜!
そういえば>>25の配列詰み詰み問題なんですけど、初心者すぎて配列の書き方が下手くそなだけでした
このサイトの配列を見て全てを理解しました…
Vue.jsのv-forでネスト(入れ子)したい - QiitaはじめにVue.jsを学習している中でv-forをネストする方法でつまづいたので今回記事としてまとめてみました。
基本的なv-forの使い方
dataの値が配列の場合、v-forを使用することでリスト形式で表示することが...qiita.com - 34お1◆AI/w/GutN622/08/09(火) 20:09:28
【今までのダメダメな下手くそ配列❌】
data:{
umamusume:{
{character:〜}
〜
},
horse:{
stallion:{
{name:〜}
〜
},
broodmare:{
{name:〜}
〜
}
}
} - 35お1◆AI/w/GutN622/08/09(火) 20:11:29
【これからの配列】
data:{
{Race: umamusume,
list:{
{name:〜}
〜
}
},
{Race: horse,
gender:stallion,
list:{
{name:〜}
〜
}
},
{Race: horse,
gender:broodmare,
list:{
{name:〜}
〜
}
}
}
}
多分これでいい…はず… - 36お1◆AI/w/GutN622/08/09(火) 20:21:27
あとテキスト量が長くなりすぎるのでもう外部にjsファイルかテキストファイルか置いてそこから引っ張って読み込ませようと思います
- 37お1◆AI/w/GutN622/08/09(火) 20:27:25
jsonするか…
- 38お1◆AI/w/GutN622/08/10(水) 07:06:28
保守です
たいして進んでないです - 39二次元好きの匿名さん22/08/10(水) 07:09:16
genderとnameの階層を変える必要性は低いような?
data:{
{id:0, gender:'牡', name:'スペシャルウィーク', is_umamusume:'yes', father_id:10, mother_id:1, ...},
{id:1, gender:'牝', name:'キャンペンガール', is_umamusume:'no', father_id:-1, mother_id:-1, ...},
...
}
みたいなイメージ。(改行とかクオーテーションとかは適当です) - 40二次元好きの匿名さん22/08/10(水) 11:13:31
なんとレスしていいのかわからんけどがんばえー
- 41いち◆AI/w/GutN622/08/10(水) 17:31:24
- 42いち◆AI/w/GutN622/08/11(木) 00:19:25
しばらく あにまんいっしゅうねん おいわいすれのじゅんびを
この けっとうひょうと へいこうして さぎょうするので ていそくしんこう します - 43二次元好きの匿名さん22/08/11(木) 10:11:26
保守
- 441◆AI/w/GutN622/08/11(木) 11:52:14
- 45二次元好きの匿名さん22/08/11(木) 14:07:36
ちなみにデータはいくつぐらい登録する予定なの?
フロントだけで作成するとなるとDB使えなくて大変そうね - 461◆AI/w/GutN622/08/11(木) 15:25:03
フロントってなに!?!??!?(無知)(検索)
はぇ〜、フロントエンドとバックエンドってのがあるのかぁ
データはとりあえずnetkeibaやPOGinfoとか見ながら各キャラの10代血統表をちまちまコピペして収集するかな…
…2の10乗って1024なんですか!?
…じゃあそれを87(ハニバでさらに増える)人分やったら89088…!?(クロスとかもあるので実際は少ないが)
2の5乗×87で2,784で収まる5代血統表から作り始めます…
- 47二次元好きの匿名さん22/08/12(金) 01:41:38
保守
- 481◆AI/w/GutN622/08/12(金) 12:45:41
- 49二次元好きの匿名さん22/08/12(金) 13:24:22
- 50二次元好きの匿名さん22/08/12(金) 18:35:10
かっけー…
- 514922/08/13(土) 00:25:43
チュートリアル仕立てで、とりあえずそれっぽい表示まで。
ソースにそこそこコメント書いといたんで、読んでみてください。
スマホ横向きにしてResultタブ押してプレビュー非表示にしないと読みづらいやも。
1、個体情報の基本部分作成
codepen.io2、基本部分をコンポーネント化
codepen.io3、親世代を表示(コンポーネントの再帰呼び出し)
codepen.io4、5世代分の情報入れてなんかそれっぽい表示確認
codepen.io5、任意の世代分表示制御
(まだ)
6、インブリード判定して情報を表示させる
(まだ)
おまけ、データの管理方法
(まだ)
- 52二次元好きの匿名さん22/08/13(土) 01:45:03
すげー
- 53二次元好きの匿名さん22/08/13(土) 11:53:19
世代数制限が未実装な分、データがあれば6世代以上も表示されるのが逆に再起処理を体感できていいね
- 541◆AI/w/GutN622/08/13(土) 13:00:59
ありがとうございます!!
Tailwind CSSいろいろググッてみます
TailwindCSSって何?なんで流行ってるの?|F Lab|Fixel株式会社fixel.co.jp知らないことばかりだぁ
ほんとうにワクワクする
- 551◆AI/w/GutN622/08/13(土) 18:20:25
なーるほど?cssフレームワークはvueとか動的なやつを採用してる時に使えば便利だよ…ってコト?!
Tailwind CSS で最初に思う疑問、Bootstrap との違いとは?こんにちは、森田です。今回は CSSフレームワーク Tailwind CSS についてのお話です。 弊社の案件…www.gaji.jp - 561◆AI/w/GutN622/08/13(土) 23:19:59
- 574922/08/14(日) 00:22:26
- 581◆AI/w/GutN622/08/14(日) 07:41:41
- 594922/08/14(日) 10:14:05
- 601◆AI/w/GutN622/08/14(日) 16:16:18
- 611◆AI/w/GutN622/08/14(日) 18:20:23
自分が打つページと
ウマ娘血統関係図 | ナノnanos.jp見本をダイレクトに打つページをわけました
試し打ち用 | ナノnanos.jp(↑見本動作確認は完成したら削除するかも)
理由は「これ独善的な自動リセットCSSの影響で使用サーバーの文字列の広告リンクが目立たなくなって利用規約に反しそうで嫌」だからTailwind CSSを本採用しないけど
でもせっかくだしTailwind CSSに慣れたいと思ったからです
- 62二次元好きの匿名さん22/08/15(月) 01:14:43
このレスは削除されています
- 63二次元好きの匿名さん22/08/15(月) 01:16:24
このレスは削除されています
- 64二次元好きの匿名さん22/08/15(月) 12:36:31
保守だよ
- 654922/08/15(月) 23:57:19
ちょっとこれ書き直すんで一旦消しときます。
- 661◆AI/w/GutN622/08/16(火) 08:32:19
おはようございます
昨日は眠くてあれだったので本日は出かけるまで頑張ります
というかここ鯖落ちしてたから保守間に合ってるのに驚いた - 671◆AI/w/GutN622/08/16(火) 19:18:45
帰ってきた後普通に眠くて寝てたから進んでないねぇ
- 684922/08/16(火) 19:25:06
保守がてら今後の投稿予定を。
一旦実装説明を挟んだ上で判定の方に移る方向で行きます。
emitは初見だとそこそこややこしいと思うので。(※ 主観)
- - - - - -
5.5、コンポーネントの親 ← 子・子孫の方向でのデータの渡し方について(emit)
6、インブリード判定:下準備編(親に子孫コンポーネントの情報を集める)
7、インブリード判定:本編(※ 可読性優先で分割するかも) - 694922/08/16(火) 19:45:41
そういえばだけど、cdn使う時は基本的にバージョン固定させといた方がいいです。
固定しない(= 常に最新版を取る)でいると、バージョン上がったときにバグ入ってた場合にモロ被害喰らってしまうためです。Vue.jsのv2みたいにもうアップデートが無いと見込めるなら問題ないんですけどね。
- - - - -
< バージョン指定記述例 >
・Vue.js
cdn.jsdelivr.net・TailWind
cdn.tailwindcss.com - 704922/08/16(火) 19:47:59
無精して書いたら変換されてしまった...
・Vue.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
・TailWind
<script src="https://cdn.tailwindcss.com/3.1.8"></script>
- 711◆AI/w/GutN622/08/17(水) 03:54:26
ひょえ〜いつもありがとうございます!!
本体の方はバージョンついてるのに書き換えました! - 721◆AI/w/GutN622/08/17(水) 12:59:41
- 73二次元好きの匿名さん22/08/17(水) 13:01:26
なんか…なんかよく分からんが凄い事やってる…
- 744922/08/17(水) 22:44:36
ちょっと仕事がバタついてきたので、次上げるの週末くらいになりそう保守
- 751◆AI/w/GutN622/08/18(木) 07:04:11
- 76二次元好きの匿名さん22/08/18(木) 18:48:30
保守
- 77二次元好きの匿名さん22/08/18(木) 23:16:29
- 781◆AI/w/GutN622/08/19(金) 08:04:59
- 791◆AI/w/GutN622/08/19(金) 18:49:37
日頃の鯖落ちとかに備えてこの時間に保守する癖をつけます
- 80二次元好きの匿名さん22/08/20(土) 01:01:47
寝る前の保守
- 811◆AI/w/GutN622/08/20(土) 08:05:55
おはようございます
今日も出かけるまで頑張ります - 82二次元好きの匿名さん22/08/20(土) 19:14:42
保守
- 83二次元好きの匿名さん22/08/21(日) 04:45:39
ほしゅ
- 841◆AI/w/GutN622/08/21(日) 15:07:03
試し打ちの方のcssのレイアウト凝り始めたら時間たってました
なんか板書でめちゃくちゃ色ペンつかってノートカラフルにしてたら授業に毎回間に合わなかった中学時代を思い出して
今もやってる事変わんねぇなってなった - 851◆AI/w/GutN622/08/21(日) 19:49:05
ぱかライブ前の保守だねぇ
- 861◆AI/w/GutN622/08/22(月) 07:17:07
保守 新キャラ追加しました
- 87二次元好きの匿名さん22/08/22(月) 19:19:56
保守
- 881◆AI/w/GutN622/08/23(火) 00:57:39
今日はサボった明日は頑張りたい…
- 89二次元好きの匿名さん22/08/23(火) 12:26:37
ほしゅ
- 901◆AI/w/GutN622/08/23(火) 22:21:05
今日はいつの間にか寝てた…
しばらく試し打ちページの方でTailWindの練習も兼ねて49さんのチュートリアル進めていきます - 911◆AI/w/GutN622/08/24(水) 07:40:02
保守
- 921◆AI/w/GutN622/08/24(水) 19:01:40
今日も今日とてねむい
- 931◆AI/w/GutN622/08/25(木) 07:01:08
おきた
- 941◆AI/w/GutN622/08/25(木) 18:13:22
- 95二次元好きの匿名さん22/08/26(金) 01:45:04
あしたのためのほしゅ
- 961◆AI/w/GutN622/08/26(金) 06:49:21
おはようごさいます
昨日は夜遅くまで作業してたからねむい… - 971◆AI/w/GutN622/08/26(金) 13:01:56
- 98二次元好きの匿名さん22/08/26(金) 13:15:37
えぇw
- 991◆AI/w/GutN622/08/26(金) 21:10:52
きょうは ねむい
- 100二次元好きの匿名さん22/08/26(金) 21:11:45
生産地表示は大事だよな(混乱)
- 1011◆AI/w/GutN622/08/27(土) 07:03:58
おはようございますの保守
- 1021◆AI/w/GutN622/08/27(土) 17:31:53
退勤の保守
ねむいから寝るかもしれん - 1031◆AI/w/GutN622/08/28(日) 04:33:53
おきた
がんばるぞーの保守 - 1041◆AI/w/GutN622/08/28(日) 14:11:38
普通に2度寝してた!今度こそ本気出す(フラグ)
- 1051◆AI/w/GutN622/08/28(日) 21:35:06
これ…大幅に書き直すかもな(血統表全く関係ないとこ)(超!時間のロス!!)
- 1061◆AI/w/GutN622/08/29(月) 00:18:24
コードを書き直したら書き直す前よりめちゃくちゃコンパクトになった…
これが"学習"ってヤツかァ… - 107二次元好きの匿名さん22/08/29(月) 00:43:10
目覚めたか
- 1081◆AI/w/GutN622/08/29(月) 07:01:34
いつのまにか寝てた
- 109二次元好きの匿名さん22/08/29(月) 18:26:26
ほ
- 1101◆AI/w/GutN622/08/29(月) 19:23:49
- 1111◆AI/w/GutN622/08/29(月) 23:15:04
今日は目が疲れたからここまでにしよう…
- 1121◆AI/w/GutN622/08/30(火) 08:10:58
おはようの保守
ねむーい - 1131◆AI/w/GutN622/08/30(火) 17:45:10
今日は月末でテンションサゲサゲなんだワ
こういう時は寝るに限るべ