Episopassのアルゴリズム

なんかよくワカランかもしれませんが、ご指摘いただければ直しますので!

プログラムではなく数式で何をしているのかが書いてあったので

問題と回答の組さえあればパスワードを生成できるので、この組をいかに選べるようにするかのインタフェースが重要だと思います

現状と全然違うのも全然アリ

パスワード生成アルゴリズムはCoffeeやめてテストも書くべきだなぁ

問題データのmockさえ手に入れば、テストもすぐ書けます

単一ファイルなので取り替えられますね

インターフェイスに相違があるので、そこを修正する必要がありますが

とは言えその場合は、Nodeとwebpackを捨ててDenoに基盤を置き換えなければならないので、若干コスト高いかもです

それからDenoにはDOMテストがほぼ不可能という致命的な欠陥がある……

あー、npmアカウント作らなきゃー……

まずはそもそも

EpisoPassをブラウザとして使うのが先だと思いますし

npm modulesとして公開する場合は、暗号化のアルゴリズムをnpm経由で利用したい人のため

masuiさんが作ったもので、masuiさん自身もメンテできることも要件として入ると思うので

coffeescriptで書きたいならビルドは必要になるが

js直書きでいいなら、素es modulesが楽

TSほしいのは個人的にもそうだが、masuiさん慣れてなさそうだし

コード自体の規模は小さいから、そんなにTSのメリットはないはず

素のJSで如何?

なるべくビルドとかの手続きがややこしくないいシンプルなもので楽に済ませるのが良さそう

でも読解は時間かければできるとは思うので、暇な人やりませんか

をサッと見ても書かれてなかった

よくみたらgithub読んでねって書いてあった

↓にも言及されてるように、readmeにも書いてあるが2020の方に統合された

画像をbase64で埋め込むと読みづらい

なんかよくわからんがビルドしたjsも入ってる？

結局中身が悪意あるスクリプトを埋め込まれる可能性が残ってしまうので、だったら素直にビルドする前提のコードを見たい

まああくまで現状は検証段階ということか

イマイチ具体例が思いつかなかった

開発コンソールからinjectはどうしようもないだろうし

たとえば、masuiさんのgitアカウントが不正に乗っ取られて、こっそり悪意あるjsが差し込まれたcommitに差し替えられる？

ビルドする手順が素直に入っていれば、素直にそのコードを読めば不正な介入が読めるコードとして把握しやすい

と思った

扱っている対象がパスワードなので、ビルド結果を利用するのはやはりよくないとは思うが

と思ったが、episopass.jsはそれじゃないっぽい

UIも一応TSに書き換えようとはしているが、JQueryが複雑すぎて死んでる

副読としては助かります！

あれ、統合してなかった？

問題作成を超絶簡単にしようとする試み

EpisoPass2020にマージしたのでここは終了する (2021/9/19)

と思ったがCloudFlareで運用するように実験

あー、撤回したのか

ややこしくてすみません

Makefile

index.html.erbをhtmlに

bin/embed.rbでファイル埋め込み

単純なテキストの挿入でやってる

js.erbはbase64の埋め込みをしてる

画像埋め込むとかするくらいなら画像表示しなくてもいい気がする

計算はcryptoとかでやってるっぽい

そんな大変なことはしてなさそう

あとは実際にhtmlビルドして、UIからの入力がどう渡されてるかを把握すれば良さそう

まず動作まで

git cloneした

rubyをインストール

coffeescriptとwebpackをnpmで入れる

makeでscpとかしてるところは消す

distに出来上がった

適当にhttp serverを建てると、webで見たものと同じものができた

目で確認するためにbase64を消す

grepすると4つのファイルで使われてる

全部、なくても機能には問題がなさそうなので、一旦消す

これやらないならjs.erbのerbはいらないかもな

まだ見づらいな

bin/dastemplate.erbで、episodas.html.erbをbase64にして埋め込んでいる？なんだこれ

src/episodas.html.erbとsrc/sampledata.jsonを埋め込んでる？

dastemplate.jsを作ってる

無理してdist見るより、同ビルドされてるかがちょっと分かったので、index.html.erb読めば良くなってきた

webpackみる

src/main.jsから普通にビルドしてるだけ

ファイル内のrequire解決してる

上のタブ

jsでonclickでdisplay:noneを切り替えてるぽい

EpisoPassの機能を提供するためだけにページングとかのなんかいい感じにするイケイケモダンフロント環境入れるのは面倒だともおもう

ruby使わないでnpmとかで完結させたほうがいいようにも思う

でもどの言語で作るかは人の勝手で、完成品がhtmlだからnpmとかのほうが何かと楽というのはある

code:js

// ボタンの挙動設定

$("#descbutton").click(() => lib.lib.show('#description'))

$("#editbutton").click(() => editor.editor())

$("#dasbutton").off() // 何度も登録されて困った

$("#dasbutton").click(() => dasmaker.dasmaker(data,editor.answer()))

$("#episopoolbutton").click(() => episopool.episopool())

lib.lib.show

code:js

show: function(id){

$('#contents').children().css('display','none')

$(id).css('display','block')

}

一旦時間おこ

といってもまだ中途半端ですが……

JQueryとRudy地獄でつらいつらい(増井さんすみません)

UIは1から作り直したほうが早いんじゃないかと考えています……

ただcontributeがとてもやりづらく感じます

TypeScriptの型推論やReactの宣言的UIの恩恵を得られない

require とRudyなにも分からない

現在Rubyは使ってないです

CoffeeScriptは使ってますが最近の人には不評かもですね

requireはnodeのやつをwebpackでブラウザで使えるようにしてるモノです

htmlになったとからしから、jsで書いてビルドしないで素のes modulesで書くのも手かも？

こんなInterfaceのやつ

code:ts

const converter = createConverter(questions, answers);

const seed = "xxxxx";

console.log(converter(seed)); // show the password

assertEquals(converter(converter(seed)), seed);

repoを先に作ってしまうか。

17:35:08 作った

18:37:49 実装しました

code:test.ts

import {

generateCrypt

const qas = data.questions.slice(0,10).map(question => ({question, answers: data.answers}));

console.log(crypt("Episopass2020"));

テストはまだ

文字種を維持して変換されるようになっているが、シャッフルできるようにアルゴリズムを替えてもいいと思う

19:04:33 md5のライブラリが大きすぎるのが欠点だな

web assemblyをまるごと詰め込んでいるから、minifyしても100KBを軽く超えてしまう

これだと単一HTMLに埋め込むのが難しい……

いや、ファイルサイズは問題視していなさそうだし、別にいいか。

Episopass2021のindex.htmlは6MB位ある

生成されるHTMLも800KBくらいある

増井俊之.icon

いろいろ変ですみません

昔開発したところは覚えてないことも多かったり...

これを見ていただければ...

makeしてindex.htmlを作成し、CloudFlareでデプロイしてます

サンプルデータ

code:data.ts

export const data = {

"questions": [

"深尾さんの実家は?",

"高校の頃超美味かった店は?",

"鈴木の家から峠を越えると?",

"布施君の出身は?",

"義父の出身は?",

"義父の大学は?",

"義母の生まれは?",

"廃虚がすごかったのは?",

"高見君の親戚の家は?",

"猫又といえば?",

"コケた公園は?",

"ライブハウスが閉まってたのは?",

"夜中に雀荘を発見したのは?",

"盆は帰省しろと怒られたのは?",

"特急が止まって歩いたのは?",

"電波が通じなくて苦労したのは?",

"額を怪我したのは?",

"前田君と偶然会ったのは?",

"駐車違反でつかまったのは?",

"スピード違反でつかまったのは?",

"眼鏡をなくしたのは?",

"軽トラで走ったのは?",

"メトロノームは?",

"商店街でギターを売ってるのは?",

"短い板でスキーしたのは?",

"山中でひたすら迷ったのは?",

"川で石を投げたのは?",

"ゲンセンカンぽいのは?",

"川で流されたのは?",

"アルゼンチン人と飲んだのは?",

"右足を怪我したのは?",

"床屋でトイレを借りたのは?",

"アバラが折れたのは?",

"営業時間終了で入れなかったのは?",

"のんちゃんと会ったのは?",

"マリアと行った旅館は?",

"水田君と再会したのは?",

"居眠りして追突したのは?",

"電源使わせてもらえなかったのは?",

"伯父が住んでたのは?",

"祖母の出身は?",

"ワイングラスを割ったのは?",

"ベッドの足が折れたのは?",

"店のベランダを踏み抜いたのは?",

"宿のベランダを踏み抜いたのは?",

"裸のオッサンが店に入るのは?",

"段ボールを買うのは?",

"宴会で湯が出るのは?",

"謎の肉屋は?",

"泡が湯船に入る風呂は?",

"ギターを弾いて怒られたのは?",

"コケて小指を怪我したのは?",

"GoogleMapsに騙されたのは?",

"親戚のペンションは?",

"ビフテキをおかわりしたのは?",

"針金作ってるのは?",

"包丁売ってたのは?",

"コヅエの家は?",

"旋盤屋は?",

"バイト屋は?",

"転んで指に土が入ったのは?",

"CatsEyeを見たのは?",

"宴会で仲間はずれにされたのは?",

"デカい蚊がいたのは?",

"意外とカツカレーが美味かったのは?",

"野犬に驚いたのは?",

"ジャンプ肉を売ってたのは?",

"本棚見て怒られたのは?",

"足の踏み場がない研究室は?",

"ヨーコが住んでるのは?",

"泊めてもらえなかったのは?",

"イカサマ麻雀を疑われたのは?",

"友達の従姉妹が美人だったのは?",

"吉田君をハブった奴の出身は?",

"バイクに灰が積もってたのは?",

"朝日ソノラマをみつけたのは?",

"宿の食事が絶望的だったのは?",

"タイル屋は?",

"アランケイがいたのは?",

"風呂で泳いだのは?",

"夜の猿が怖いのは?",

"静御前に会ったのは?",

"自転車が宙返りしたのは?",

"デカい石が割れてるのは?",

"弓を引いたのは?",

"ウナギが意外だったのは?",

"ムヒョーてなるのは?",

"潮干狩りに行ったのは?",

"電車のアナウンスがわからないのは?",

"ミサホちゃんはどこ出身?",

"拾った財布の持ち主は?",

"財布を拾うのは?",

"スピード違反したのは?",

"自転車借りて学会行ったのは?",

"低い山なのに疲れたのは?",

"ワークステーションがあるのは?",

"酷い雷に遭遇した公園は?",

"社長がトランペット吹くのは?",

"アナログオシロが好きなのは?",

"サバ味噌が生だったのは?",

"石投げたらトンボに当たったのは?",

"ラーメンを食べきれなかったのは?",

"バスのために必死で走ったのは?",

"牡蠣であたったのは?",

"鯉に石投げてバチがあたったのは?",

"実は関西なのは?",

"Y氏が踊るのは?",

"ヒカルの出身は?",

"オオバが立候補したのは?",

"洋菓子屋でオナラするのは?",

"M君がバイクで行く蕎麦屋は?",

"デカいナメクジがいたのは?",

"海沿いの道が酷いのは?",

"警察に作文されたのは?",

"無免許運転でつかまったのは?",

"ツキヨタケを見たのは?",

"シャクルトンかと思ったのは?",

"バイクで行った海は?",

"痴漢されたのは?",

"チェロ弾く親戚は?",

"スケート場の親戚は?",

"2段ベッドから滑り落ちたのは?",

"朝からおにぎり作ったのは?",

"麻雀させられたのは?",

"エレベータの段差が怖いのは?",

"VAXが落ちてるのは?",

"床屋と飲んだのは?",

"床の間に小便するのは?",

"土左衛門は?",

"屋根が吹き飛ぶのは?",

"不動産屋に意図がバレたのは?",

"超美味しいケーキ屋は?",

"峠を超えると雪国だったのは?",

"ガラスの家は?",

"けろっぴバッグ持って走ったのは?",

"廃校の宿は?",

"結婚式をすっぽかしたのは?",

"落ちた岩の下じきになるのは?",

"寺田君が足を折ったのは?",

"魚がステーキみたいだったのは?",

"輪ゴムの作り方を勉強したのは?",

"ワインが不味かったのは?",

"雨の中を登山したのは?",

"雨で登山を断念したのは?",

"軽石みたいなのを拾ったのは?",

"黒曜石を拾ったのは?",

"何も釣れなかったのは?",

"女性がみんな美人に見えたのは?",

"空缶を捨てられなくて困ったのは?",

"TV屋に因縁つけられたのは?",

"鈴木の研究所は?",

"鈴木がHするのは?",

"小林がHするのは?",

"三浦の職場は?",

"水田の職場は?",

"BBQが超寒いのは?",

"S君がネカフェに泊まるのは?",

"旅行をキャンセルしたのは?",

"山中で酷いものを発見したのは?",

"肝試しするのは?",

"花火見てたら雨に降られたのは?",

"峠でエンコしたのは?",

"ハチコの出身は?",

"コーヨの出身は?",

"はなまるしか開いてないのは?",

"キャッチが酷いのは?",

"カロロイニは?",

"ヤナギの出身は?",

"ミス君が悪酔いするのは?",

"トランペットを習うのは?",

"ハタノ先生の出身は?",

"従兄弟のペンションは?",

"タケノコを掘ったのは?",

"ベンツが4台並んでるのは?",

"K教授が家を新築したのは?",

"新しく西口ができたのは?",

"臭い湖は?",

"タコがいたのは?",

"終電がヤバいのは?",

"ひとり焼肉が悲しいのは?",

"風呂がヌルいのは?",

"記念スプーンもらったのは?",

"線路に侵入したのは?",

"松沢氏の職場は",

"ヒロシの家は?",

"イビちゃんの家は?",

"サナエの家は?",

"マサコの家は?",

"無限タコヤキしたのは?",

"川で綱引きしたのは?",

"山頂で小便したのは?",

"稜線が恐かったのは?",

"ヘビの坂とは?",

"地蔵の坂とは?",

"日銀の坂とは?",

"ナショナル坊やが立ってたのは?",

"Google道案内に騙されたのは?",

"ポルシェに乗ったのは?",

"旅行に行きそこねたのは?",

"金網を楽々飛び越すのは?",

"股が痛くて歩けなくなったのは?",

"訪問が最後なのは?",

"麻雀で負けて逃げたのは?",

"滝壺に落ちるのは?",

"吊橋が怖いのは?",

"冷蔵庫の酒を勝手に飲んだのは?",

"鉄橋を歩いて渡るのは?",

"高橋徹氏の家は?",

"マトバ氏の実家は?",

"デルタとは?",

"Delta Vistaとは?",

"スーパーでライブしたのは?",

"ドリトル先生の本を借りたのは?",

"超寒いキャンプ/BBQは?",

"フジナガの出身は?",

"蔵といえば?",

"牡蠣にあたったのは?",

"渋柿を食べたのは?",

"アミガサタケは?",

"転んで親指に土が入るのは?",

"松沢氏が移住したのは?",

"カンちゃんが移住したのは?",

"誰もがコケる階段があったのは?",

"帯広ナンバーを追及されたのは?",

"鬼瓦な人の出身は?",

"食い逃げに遭遇したのは?",

"脱輪して助けてもらったのは?",

"車のドアがへこんだのは?",

"K君が川に落ちるのは?",

"コケやすい階段は?"

],

"answers": [

"北海道", "青森", "岩手", "宮城", "秋田", "山形", "福島",

"茨城", "栃木", "群馬", "埼玉", "千葉", "東京", "神奈川",

"新潟", "富山", "石川", "福井",

"山梨", "長野", "岐阜", "静岡", "愛知",

"三重", "滋賀", "京都", "大阪", "兵庫", "奈良", "和歌山",

"鳥取", "島根", "岡山", "広島", "山口",

"徳島", "香川", "愛媛", "高知",

"福岡", "佐賀", "長崎", "熊本", "大分", "宮崎", "鹿児島",

"沖縄"

]

};