博多電光

技術ブログ

TSG CTF 2020 作問感想

博多市が作問した問題に関する雑記です。ちゃんとしたWriteupは後ほど投げます。

Beginner's Crypto (Crypto)

配布ファイルが単純だし解くのに複雑な式変形も必要ないのでBeginner。

レビュー中にsatos (@satos___jp) が下の桁から合わせていく面白い別解で解いていた。

Sweet like Apple Pie (Crypto)

「こんな問題できないかな~」って投げたらナン氏 (@naan112358) が秒で解いてくれた。すごい。sin(x) = sin(π - x) に関しては博多市も作問する際にめっちゃ悩んだのでみんなにもこの苦しみを味わってもらいたいと思いそのまま出題。

Rubikrypto (Crypto)

CTFにルービックキューブ問は何度も出てるけど、ちゃんと暗号暗号してる良問ってないな~と思っていたので、ちゃんと群と暗号に絡めた形の問題を作りたかった。想定解は Pohlig-Hellman ではなくルービックキューブ群の元の位数がたかだか1260であることを利用する。

Modulus Amittendus (Crypto)

原案はcookies (@kcz146) の「Nの代わりにΦ(N)が与えられたらpとqを復元できないかな~」という発言。その過程で「そういえばHITCONに Lost Modulus Againなんて問題があったね~」ってなって、試しにこの問題から係数を一つ落とした問題をナン氏 (@naan112358) に投げてみたら秒で解いてくれたので出題。

今年もRSA問が出せてよかった。係数一つ落としただけなのにもとの問題と解き方が全く違ってくるのが面白いですね~。

Beginner's Web (Web)

object[key](hoge, fuga) みたいなやつで key がいじれるシチュエーションなら、CTFerでなくても Object.prototype を疑うのが自然かな~と思います。

で、想定ムーブは Object.prototype 以下のメソッド一覧をドキュメントなりなんなりで確認し、(String, Function) という引数を取る関数が __defineSetter____defineGetter__ しか無いことを見つけ、で __defineGetter__ はフィルタの [FLAG] に引っかかるので __defineSetter__ 一択に絞れる。あとは一直線。

Slick Logger (Web)

いや~Side-channel問の作問って難しい。つばめ先生の Blind Regexp Injection の記事にあるとおり、Golangオートマトンを用いたいい感じのRegExpエンジンを実装しているのでexponentialな計算量のReDoSが難しいわけですね。ただオートマトンを用いるConsとしてオートマトンの状態数に比例した時間計算量が必要になり、GolangRegExpには状態数に対する制限がないので重めの線形ReDoSが構築できます。あとはApacheCGIのTimeout設定が1sなのを確認して status code が504か200かで判別できるようにパラメータを調整すれば勝ちです。

Beginner's Misc (Misc)

Base64UTF-8も全人類知ってるしソースコードが実質3行なのでBeginner。

Base64に変換したあと[0-9/+]だけで構成されるようなUTF-8文字列を手で構成するなり全探索するなりしたあと分数にして上の桁から合わせていく。

Poor Stego Guy (Misc)

めっちゃ頑張って作ったのに一行で解かれて泣いちゃった。想定解はJPEGのDCTの係数離散化がそのまま格子と見なせることを利用し、LLLを用いてCVP問題を解きます。

BlindCoder (Misc)

「こんな問題できないかな~」って投げたらCoiL氏 (@coil_kpc) が秒で解いてくれた。すごい。

博多市のアイコンが新しくなります

博多市です。今春の就職に合わせて、6月から渋谷のど真ん中で新生活を送っています。

これまでインターネット上で好んで用いてきたおなじみの黒と赤と青のアイコンですが、新生活にあたって心機一転し、全面的にリニューアルすることにしました。

これまで使ってきたアイコンはこちらです。

f:id:hakatashi:20200621072038p:plain
年季を感じさせる古臭さのぬぐえないクソダサ旧アイコン

そして、新しくなった博多市のアイコンはこちらになります。

f:id:hakatashi:20200621072355p:plain
新しい時代の到来を感じさせるスタイリッシュでエレガントな新アイコン

何が変わったか一目瞭然ですね!!!!

変更点

何が変わったかわからない人のために、旧アイコンと新アイコンを重ね合わせて比較してみました。

f:id:hakatashi:20200621073312p:plain
旧アイコンと新アイコンの比較

赤い部分が旧アイコン、青い部分が新アイコンです。各部の寸法が微妙に変更されています。

新しいアイコンの特徴

実は、これまで使用していたアイコンの寸法はあらゆる意味で「汚い」ものでした。今回のリニューアルはこの寸法の問題を一挙に解決するためのものです。このアイコンは以下のような特徴を持ちます。

1. 各頂点の座標を含め、あらゆる寸法を正確な整数比で表現することができる

画像全体の大きさを480x480としたとき、各図形の頂点の座標は以下の通り規定されます。

  • 黒: (130, 185), (146, 173), (286, 243), (286, 343), (270, 355), (130, 285)
  • 赤: (162, 161), (178, 149), (318, 219), (318, 319), (302, 331), (302, 231)
  • 青: (194, 137), (210, 125), (350, 195), (350, 295), (334, 307), (334, 207)

2. 図形全体を六角形としてみたとき、左右の対角線がその両端の角を正確に二等分する

f:id:hakatashi:20200621075541p:plain

3. 図形全体を回転させると左右対称かつ上下対称となる

f:id:hakatashi:20200621075657p:plain

4. 図形全体の中心が画像の中心と一致する

f:id:hakatashi:20200621081059p:plain

5. 図形を直方体としてみたとき、黒と赤と青のストライプが側面の幅を正確に五等分する

f:id:hakatashi:20200621081307p:plain

これらの特徴のうち、旧アイコンで満たされていたのは4.の「図形全体の中心が画像の中心と一致する」だけでした。

実はこの旧アイコンは、寸法とかそういう難しいことは考えずにIllustratorを使用して雑にデザインしたものだったので、よく見るとあちこちがガタガタです。「博多市」としてのソーシャルアイデンティティーを示すためのアイコンとして、こんな適当なアイコンでは良くないと以前から気になっていたのですが、今回このように改めて図形としての仕様や要件からアイコンをきっちりと定義し直したことにより、旧アイコンの「フリーハンド感」が薄れてデザインとしてもかなりスッキリしたと感じています。

これらの寸法の仕様や派生画像など、アイコンに関する情報は今後こちらのリポジトリに集約する予定です。

github.com

よく見ないと気づかないマイナーチェンジかもしれませんが、スッキリと生まれ変わったアイコンで、どうか今後ともよろしくお願いいたします。

博多市アイコン略史

せっかくなので、このアイコンに至るまでの博多市のアイコンの遷移と歴史について軽く紹介しておきます。

博多市が自分のアイコンというか、アバターについて初めて意識したのは、2010年にTwitterのアカウントを作成した頃です。

当時の博多市のTwitterアイコンは、こんな感じでした。

f:id:hakatashi:20200621083414p:plain
第1世代アイコン (再現)

今となっては懐かしい、「伯方の塩」の非公式擬人化キャラクター「伯方さん」です。

「博多市」というハンドルネームは当時から使っていたので、アイコンもそれにちなんだものにしようと考え、当時流行していた名前の似ているキャラクターをそのまま引っ張ってきました。キャッチフレーズの「!の!!お!」が「はかたし」の4文字を含むこともあって、このキャラクターには比較的愛着があったのを覚えています。

そしてそれから2年ほど経った頃、Twitter「箱ドット」なるアイコンが流行し始めました。こういうやつです。

f:id:hakatashi:20200621084037p:plainf:id:hakatashi:20200621084219p:plain (素体素材: 花屋(oat)さん)

借り物のキャラクターじゃなくて自分オリジナルのアイコンが欲しいと思っていた博多市は、自分でもこれを作ってみることにしました。素体とかよくわからなかったので、ペイントで一から描いてみました。

f:id:hakatashi:20200621084616p:plain

そして頭だけ描いて諦めました。

このままで終わるのもなんなので、元のアイコンの伯方さんのアクセントである赤と青のストライプと、「博多」という文字を前面にあしらってなんとなくそれっぽい感じにしました。これが第2世代のアイコンです。

f:id:hakatashi:20200621084935p:plain
第2世代アイコン

このアイコンはけっこう長く使われましたし、派生アイコンも多く誕生しています。たとえばクリスマスだけ使われた1日限定のアイコンはこんな感じで、

f:id:hakatashi:20200621085138p:plain
第2世代アイコン (クリスマス限定)

Tumblr用に使われたのはこんなアイコンでした。

f:id:hakatashi:20200621085227p:plain
第2世代アイコン (Tumblr)

そして大学に進学したあとの2014年ごろ、Webプログラミングなどを通してSNS以外でのアイコンの使用が増えてくるのにつれて、ドット絵のアイコンというのが古臭く見えるようになってきました。まあ素人が適当に打ったドット絵ですし実際見栄えが悪い。当時フラットデザインというのが流行し始めていたのもあり、デザインの意匠は変更せず、シンプルな図形で構成されたアイコンにリニューアルしようと考えました。このとき作成されたのが第3世代のアイコンです。

f:id:hakatashi:20200621085928p:plain
第3世代アイコン

というわけで、博多市のトレードマークでもあるこの赤と青のストライプは、もとを辿れば伯方さんの衣装、さらに辿れば伯方の塩のパッケージに描かれている赤と青の線に行き着きます (ちなみにこのパッケージの線が何を表現しているのかは未だにわからないままです。誰か教えて)。

ちなみに、このリニューアルしたアイコンを、以前のアイコンを知る当時のNPCAの後輩や同輩に見せたら口を揃えて「え⋯⋯ダサw」って言われたのをよく覚えています。絶対に許さん。

f:id:hakatashi:20200621072355p:plain
第4世代アイコン

以来、実に長い間このアイコンは使われました。目が痛くなるこの原色の黒赤青の配色がもはや自分にとっての「博多市配色」です。リファインされ第4世代となったアイコンにさらに愛着が湧くよう、これからも精進してまいります。

2020年3月のトリビア

この記事は博多市がその月に「へえ~」と思ったことをまとめたものである。詳しくは初回の記事を参照。

2020年2月のトリビア - 博多電光

というわけで、2020年3月に収集した事項を掲載する。

注意事項

  • あくまで博多市が面白いと思ったかどうかなので、いわゆるトリビアっぽくないものも含まれている。
  • 原則として自分の中である程度調査して裏付けが取れたものだけを掲載しているが、ちゃんとソースをまとめるのがめんどくさいので正しい情報かどうかの判断は各位でお願いしたい。

トリビア

  • 1970年代を境に伝書鳩の帰巣能力は世界的に低下している。世界レベルの磁気の変化や生態系の変化などが仮説として挙げられている。
  • 日本において、大麻は所持のみが違法であり使用は処罰されない。そもそも大麻の成熟した実である芥子の実は七味の材料などとして日常的に用いられており、これにも微量の大麻成分が含まれているため現在の検査能力では真に大麻として使用したか立証困難だからである。
  • 軍事用語において「全滅」とは部隊の構成要員の約三割が損耗した状態を指す。
  • 2011年までロシアではビールが酒類として扱われていなかった。当然未成年でも合法に飲むことができた。
  • 「めったに起こらないが、起こらないと思って油断していると壊滅的な被害を与える事象」を Black Swan と呼ぶ。17世紀に「黒い白鳥」が発見されるまで白鳥はすべて白いと考えられてきたことに由来する。
  • フリーマーケットサイトなどで行われるクレジットカード現金化が取り締まられる際の主要な法的根拠は「出資法違反」である。取引を通して紙幣の額面以上の金額を受け取る行為を融資とみなせば超高金利の違法融資となるためである。
  • 海藻類の多くは、陸上に棲息する多くの植物とは反対に、晩秋に芽吹いて、冬から春にかけて成長し、夏になると枯死するというサイクルを経るものが多い。
  • 一般には宇宙は無重力ではない。例えば国際宇宙ステーションの高度は地表から約400kmであり、この距離では地表と比較して約90%もの重力が地球に対して働いている。
  • 「ポン酢」の「ポン」は「フルーツポンチ」の「ポン」と同根である。
  • よく知られている「上を向いて歩こう」の英題「Sukiyaki」の由来は原作の内容と全く関係がなく、一説にはこの曲を欧州に知らしめたイギリスのトランペッター、ケニー・ボールがCDリリースの際、彼が知っていた日本語の単語が「Sukiyaki」と「Sayonara」くらいしかなかったためSukiyakiとプリンティングしたことに由来するという。
  • 人間の毛髪には健康な状態でも数ppm程度の水銀が含まれており、一般的に毛髪水銀と呼ばれる。この濃度は魚介類を多く摂取するほど高くなる。

5年間アルバイトを勤めたピクシブ株式会社を退職します

誰?

博多市 (@hakatashi) です。

主にフロントエンドを好むエンジニアです。

大学4年生です。たぶん今日で学生終了です。

何してた?

アルバイト入社以来いろんなチームを転々としながら、フロントエンドを中心にWeb開発を行っていました。

  • pixiv
  • pixiv小説
  • pixiv小説モバイル
  • pixivコミック
  • pixivノベル
  • pixiv Sketch
  • pixiv Sketch Live

エンジニアとして社のブログもいくつか書きが、こうして並べて見ると何してるエンジニアなのかかなり不明です。

ピクシブはどうだった?

アルバイトとしてのpixivの5年間は、ひとえに「幸福」の一語に尽きます。

5年前アルバイトとして入社したとき、自分は謙遜抜きで未熟なプログラマーでした。当時書いていたコードを今見返してみるとまさに物の道理を知らないプログラマーの児戯といった風情で全く恥じ入るばかりです。

それから5年、pixivでのアルバイトの経験は僕に様々なことを教えてくれました。開発における心構え、プロダクトを作るということの如何を学びました。1人で開発しているだけでは決して得られないイベントの経験を何度も得ました。技術に秀でた貴重な知人を得ました。pixivは僕を育ててくれました。

もしも今の自分を、すごい、優秀だと褒め称してくださる方がいるなら、おそらくその半分以上がpixivという環境のおかげです。感謝が尽きることがありません。

加えて、「創作文化を尊重する」という点にかけても、pixivは自分にとって非常に心地よい空間でした。

「創作活動がもっと楽しくなる場所を創る」という企業理念に違わず、pixivはインターネットの創作文化を支援するにかけて実利的に日本で最も寄与する企業であると考えています。のみならずそれを構成する社員の一人ひとりも一次創作、二次創作を問わず創作文化を愛する同士であり、その証左に「お絵かきブートキャンプ」などの取り組みも積極的かつ自主的に行われています。自分もまたpixivのヘビーな閲覧ユーザーで創作を愛する自負があり、かるが故にpixivでの業務は常に指針として己の欲するところを為すものでした。巷では創作者を理解する心なきようにpixivの運営主体を扱い謗る風評も時として罷り通っていますが、その内実からすればとんでもない話です。

なぜやめる?

大学卒業につき他社に就職を決めたためです。

就職先については大いに悩みました。もちろんピクシブからもオファーを受けていました (それも好条件で) が、最終的に他社を選択したのは、それがより自分にとって厳しいものであると思えたためです。

思えばこれまでの人生の岐路において、自分は常に厳しい道を選択したと思います。大学を選ぶにおいても内部競争の激しいところを選び、学科選択においても一度内定した学科を蹴りわざわざブラックと名高い学科に進学したりしました。

狭き門より入れ、艱難汝を珠にす――とは、敢えて言いません。実際僕はこの選択によって多くの「不利益」を蒙りました。大学の学科振り分けに際しては幾度となく躓き最終的に3回も留年を重ねる羽目になり、一時は真面目に退学を考えました。先日の報告のとおり無事卒業を迎えることができましたが、自己研鑽の意味においても本学を選んだことは必ずしも妥当な選択ではなかったと、今ではそう思います。

しかしそれでも、事ここに至って再度「過ち」を繰り返そうとするのは、自分が安寧な環境において何かを成せる人間だと思えないからです。僕は人より幾分か長い大学生活の中で、深い絶望の底でしか紡げない文学があることを知りました。劈く耳鳴りの中でしか鳴らせない音楽があることを知りました。これはエンジニアリングの道においても同じだと思います。大業成すには死狂いなるべし。水の流れていればこそ鯉が滝を登るように、とりわけ自分のような白面郎には常に自らをタフな環境に置くことこそ重要だと考えました。

創作の庭からは、一旦離れることになります。先に述べたとおり自分にとって創作文化とは著しい傾慕の情を惹起させるところ、その一助に自分も加われないことに後ろ髪を強く引かれる思いですが、またいつかと割り切って差し当たり道を分かつことにします。もしかしたらとんぼ返りなんてことになるかもしれないですし。

今後は?

今春から Google Japan にソフトウェアエンジニアとして就職する予定です。チームは Google Maps 関連になる予定です。と言っても、コロナウイルスの影響でまだしばらく仕事がないようですが⋯⋯。

CTFや同人誌の執筆などの個人活動は継続する予定です。大学は卒業しますが TSG CTF 2 もたぶん開催します。

最後に改めて、pixivでお世話になった多くの方々に感謝いたします。狭い業界、またどこかで会いましょう。ありがとうございました。

2020年2月のトリビア

日常生きているといろんなことに感心したり、なるほどと思ったりする。しかしそんな小さななるほど感は1ヶ月も経てば忘れて知識としては全く定着しないことが多い。そこで、日頃から「へぇ~」と思ったことをメモしておいて、1ヶ月に1回くらいの周期でまとめようと思った。

とりあえず、2020年2月に収集した事項を掲載する。あくまで博多市が面白いと思ったかどうかなので、いわゆるトリビアっぽくないものも含まれている。

原則として自分の中である程度調査して裏付けが取れたものだけ掲載しているが、ちゃんとソースをまとめるのがめんどくさいので正しい情報かどうかの判断は各位でお願いしたい。

トリビア

  • 日本の有効な記念硬貨には10万円の金貨が存在する
  • 「裸の王様」の原案では衣服は「不義の子には見えない」という設定だった
  • 「凶」の部首「凵」は凵繞(かんにょう)である
  • 兜割りは技を極めた剣術家の最高峰の妙技である。明治の天覧兜割りでは榊原鍵吉なる当代一の剣術家が実際に挑戦し鉄兜の頭頂を3寸ほど切り込むことに成功したという
  • e+πが無理数であることは2020年現在証明も反証もされていない
  • 渋谷109の名前の由来は「東急」→「10・9」の語呂合わせである
  • 日本語「かわいい」と漢語「可愛」の関連はよくわかっていない。日本語の語源は「顔映ゆい」とする説が有力だが、表記は漢語に依るという説もある。少なくとも現代中国語で「可愛」は通じる。
  • 人間の脳が仲間と認識できるのは150人が限界である
  • 酒類のCMは自主規制により「25歳以下の出演」「喉元アップの描写」などが禁じられている
  • 1900年前後まで地球の年齢は1億年前後と見積もられていた
  • 酒気帯び運転とは血中アルコール濃度が基準以上の状態による運転、酒酔い運転とは飲酒により判断能力が低下した状態での運転である。後者のほうが重い。
  • 三大ブルーチーズの一つゴルゴンゾーラの由来はイタリアのゴルゴンゾーラなる街名が由来だが、現在ここでチーズは製造されていない
  • ロシア名産とされるマトリョーシカ人形の歴史は意外と浅く、1900年のパリ万博以前の歴史には登場しない。
  • パプリカは唐辛子である
  • どて焼きの名前の由来は最初に鉄鍋の縁に土手状に味噌を盛ることからである
  • キヤノンキユーピーアロンアルフアシヤチハタオンキヨー
  • 予防医学の研究の進展により、現在ではうがいによる感染症の予防効果は認められていない。実際、新型インフルエンザ流行の際の厚生労働省のQ&Aにはうがいの記述があるが、新型肝炎のQ&Aではうがい関連の記述が削除されている。
  • 陸上で最も海から遠い点、ないし海上で最も陸から遠い点のことを到達不能極と呼ぶ。
  • 「ファストフードによくついてくる、ジャムとマーガリンを同時に出せるあの容器」の正式名称は「ディスペンパック」……ではなく、「パキッテ」である。2019年名称変更。
  • 衛生および美容の観点からは、洗髪時のシャンプーはほぼ不要である
  • expectは「当然そうすべきと期待した」、You'd better は「絶対に~するべき」、どちらも強いニュアンスを持つ単語なので注意して使うべきである

TSG LIVE! を支える技術 その1 ~全体構成~

この記事ではTSGが定期的に行っているライブ放送を支える技術をご紹介いたします。

※この記事は TSG Advent Calendar 2019 の2日目の記事です。

TSG LIVE! とは

博多市が所属するサークルでは、近年「プログラミング生放送 TSG LIVE!」と称して、TSG部員がプログラミングを行う様子を実況解説付きの生放送で配信する企画を東大の学園祭で企画しています。つい先月も東京大学駒場祭に合わせて第4回の放送が行われました。アーカイブも配信されているのでぜひ合わせてご覧ください。

この企画の裏側では、見かけによらず非常に多くのコードやインフラが動いています。同じようなライブ放送を行うことを考えている方のために、また TSG LIVE! を支える技術を後輩に継承していくために、このライブを裏側で支える技術を数回に分けて詳細に解説していこうと思います。

TSG LIVE! の表側

まずは TSG LIVE! 自体にどのような機能があるか、順を追って解説していこうと思います。

f:id:hakatashi:20191203191749p:plain

これが TSG LIVE! の放送画面です。

サイドバーを除いた左側の画面が放送のメイン画面であり、実況者のPC画面が映されています。ここにあらかじめ用意したスライドやプレイヤーの画面などを映してライブを進行していきます。

右側のサイドバーには現在放送中のライブの情報がリアルタイムに表示されます。右上には TSG LIVE! のロゴと、現在のライブ全体の対戦状況が表示されています*1

中央辺りにあるのが現在の試合ステータスであり、現在放送中のライブで行われている対戦の様子がリアルタイムで更新され表示されます。その下にあるのが試合の残り時間を示すタイマーです。試合の経過に合わせて刻々と減っていきます。

一番右下にあるのがコメント欄です。ライブに対するコメントが流れていきます。このコメントは、

が全て合わせて表示されます。

画面左下には、試合の経過に応じて、重要な動きがあった場合に通知が表示されます。例えばコードゴルフ大会でプレイヤーからの提出があった場合などです。また同じ場所にプレイヤーのぼやきや戦略についてのコメントが表示されるプレイヤーコメントも表示されます。

f:id:hakatashi:20191203193040p:plain

この企画ではプレイヤーは別室に待機して対戦を行うのですが、ライブでは時折、プレイヤーがプレイしている様子が放送に映し出されます。この画面は実際にプレイヤーが対戦しながら表示しているデスクトップ画面をキャプチャーしたものであり、実況者がプレイヤーの一覧を眺めながら自由に切り替えられるようになっています。

f:id:hakatashi:20191203193549p:plain

また、今回の TSG LIVE! 4 では、オープニングトークで特別企画「たほいや」が行われました。この企画では視聴者がゲームに同時に参加することができ、「単語の意味」を放送中に登録でき、また管理画面で登録された意味をモデレーターがリアルタイムにモデレートできるようになっています。

f:id:hakatashi:20191203193947p:plain
たほいや」管理画面

なお、この放送は YouTube Live とニコニコ生放送の同時配信放送になっており、どちらからも同じ放送を視聴しコメントすることができるようになっています。

TSG LIVE! の全体構成

以上の仕様を満たすシステムを実現するために、多くのサービスを利用するとともに、専用ソフトの開発を行いました。全体の構成図をまとめてみると以下のようになります。

f:id:hakatashi:20191203194106p:plain
TSG LIVE! インフラ構成図

(draw.ioを使って書きました。初めて使ってみましたがなかなか悪くないです)

次回からはこの構成の各部のはたらきについて順を追って詳しく解説していきます。

*1:TSG LIVE! では「本郷チーム」と「駒場チーム」に分かれて戦うというコンセプトになっており、ライブ全体の累積得点で勝敗が決します