いなにわうどん

うどんの話に見せかけて技術的な話をしたい（できない）

未踏を越えて

今年の 1 月から 8 ヶ月間にわたって取り組んできた未踏アドバンスト事業の契約期間が本日をもって終わりました。一つの区切りとして、雑多な文章ではありますが未踏期間の振り返りを残したいと思います。自分は 6 年前に未踏 IT 人材発掘・育成事業にも採択されたため、当時の経験も交えながら書いていきます。

未踏事業とは

独立行政法人情報処理推進機構（IPA）が実施する、ソフトウェア開発等の支援を目的とした公的事業です。自分が作りたいソフトウェア*1を提案して、そのプロジェクトが採択された場合には 8–9 ヶ月間程度、お金をもらいながら開発に取り組むことができます。大枠としては以下のページ等にまとまっています。

未踏事業は 25 歳以下の若手を対象とした未踏 IT 人材発掘・育成事業（未踏 IT）*2、事業化や社会実装を主な目的とした未踏アドバンスト事業（未踏アドバンスト）、量子コンピュータを対象にした未踏ターゲット事業の 3 つ*3から構成されていて、私は高校 3 年次、修士 1 年次の時点で 2020 年度未踏 IT、2025 年度下期未踏アドバンストにそれぞれ採択されました。

2020年度 未踏 IT 人材発掘・育成事業

はじめに時を遡ること 6 年前、2020 年度の未踏 IT について、採択まで → プロジェクト期間中 → 期間終了後の順に振り返っていきます。

採択まで

未踏事業は公募という形を取るため、一次審査（書類）→ 二次審査（面接）を経て採択プロジェクトが決定します。一次審査にはプロジェクトに関する 10 ページ程度の提案書が用いられ、二次審査では 15 分程度のプレゼンテーション + 質疑応答が行われました。当時の公募倍率は 6.6 倍でした*4。

未踏は高 1 の頃から知っていて、高 2 で別の内容*5を提案して不採択となり、高 3 で提案したプロジェクトが採択に至りました*6。プロジェクト内容としては、元々プログラミングやデザインが趣味だったこともあって、その融合領域ともいえる組版処理システム（文書を作るために文字や図版を配置するソフトウェア）を提案しました*7。主観ですが、誰かに与えられた（研究室で与えられた等）テーマよりは、内発的な動機に由来するプロジェクトが多く採択されている印象があります*8。

プロジェクト期間中

期間中は、まずソフトウェアを作ります。未踏 IT の作業時間上限は 1,440 時間*9であるため、それを 9 ヶ月（270 日）で消化しようと思うと一日あたり約 5.3 時間、平日だけ（21 日）で換算すると一日 7.6 時間の作業が要求され、社会人並の作業量が求められます。採択当時は高校に通っており、毎日 3 時間程度の睡眠でプログラムを書いていましたが*10、18 歳の体力とは恐ろしく全然耐えられたものです*11。もともと興味のあった内容に取り組んでいたため日々の開発は面白く、進捗もするすると出たので全体的に想像ほどの大変さではありませんでした。

進捗報告としては月一程度でミーティングが設定されたほか、プロジェクトが始まってまもなくの 7 月頭にキックオフ会議（ブースト会議と呼ばれる）が、10 月末に中間報告会（八合目会議と呼ばれる）が設けられました*12。当時はコロナ禍の最中であったため、対面で行われたミーティングは 3 回で、残りはオンラインでの実施でした。

対面ミーティングが行われた IPA（東京都文京区）、ロゴが古い
八合目会議での発表。組版という地味なプロジェクトで成果を目立たせるにはどうすればよいかを考え、提案システムで組まれた出力物を発表前夜に大井町のコンビニで A3 プリントして貼り合わせた

9 月下旬には、当時プロジェクトマネージャ（PM）としてご担当いただいた首藤先生のご紹介で、SATySFi の開発者である gfn さんとともに印刷会社の三美印刷さんの見学に連れて行っていただき、大変楽しかった記憶があります（参考ページ）。

プロジェクト期間終盤の 2 月中旬には、成果報告会が開催されました。これは例年秋葉原で行われていたのですが、当時は東京都に緊急事態宣言が発出され、直前になくなくオンライン開催に切り替わってしまいました。とはいえ発表のウケはかなり良かったので、秋葉原のスターバックスで桜フラペチーノ*13を飲みながら小躍りしていたのを憶えています*14。また、最後に成果報告書（卒論程度の分量）を提出してプロジェクトは無事に完了となりました。

成果報告会のようす
ミーティング終わりは毎回フラペチーノを飲んで帰っていた。左からゴロッと イチゴ フラペチーノ、大学芋フラペチーノ、さくら さくらんぼ フラペチーノ

期間終了後

その名の通り、未踏 IT は人材を「発掘」することを目的とした事業であるため、優れた成果を挙げた採択者（クリエータと呼ばれる）を「スーパークリエータ」（スパクリとよく略される）として表彰する仕組みがあります。自分も有り難いことにスーパークリエータに選出されました。手前味噌ですが、このスパクリは情報系だと結構知られた称号で、経済産業省のプレスリリースや情報処理学会の note に掲載されたりします。

また、未踏の採択実績を使って受験可能な大学がいくつかあったため*15、それを活用して筑波大学の情報学群*16に進学しました。受験勉強は苦手だったので、こうした制度はかなり助かりました。

なにをつくったか

Twight という日本語組版処理システムを開発しました。LaTeX や SATySFi といった従来の組版システム*17はテキストベースでの文書生成を実現する一方、雑誌やポスターといったグラフィカルな組版を不得意としています。そこで、XML + CSS + JavaScript という Web ベースの技術を組み合わせた組版言語とその処理系を開発することにより、グラフィカルな文書も作成可能な最強の組版処理システムを実現しようとした内容でした。開発内容は以下のページによくまとまっています。

Twight は夢のようなシステムだったと思います。グラフィカルな組版が Illustrator や InDesign なしに、テキストベースで効率的に実現でき、さらにライブラリを通じて自由自在に拡張できるというものを目指していました。デモも良く出来ていたと思います。

しかしながら、ソフトウェアに関する知識も乏しかった当時に書いたプログラムは到底公開できるようなものではなく、実利用には程遠い状態でした。未踏期間後も 2 年ほど断続的に開発を進めて*18、様々なお力添えをいただいたりもしたのですが、残念ながら公開には至らず、実用化にも至りませんでした。今思うと様々な出し方があった（未完成でもソースコードだけ出してしまう、もっとミニマムにして出す、ソフトウェア論文にする、等）と思うのですが、様々な事情もあって継続を断念することにしました（詳細は後述）。

2025年度 未踏アドバンスト事業

こうして 5 年ほど後悔を抱えて生きてきたのですが、ちょうど 2025 年度の未踏 IT に組版のプロジェクト*19が採択され、縁あってその方々にお話を伺う機会もあり、もう一回やってみたいなと思ったことから 6 年ぶりに公募に出すことにしました*20。

採択まで

公募のフローは未踏 IT と概ね同じで、9 月下旬頃に書類応募 → 10 月下旬に一次審査通過 → 11 月中旬に二次審査 → 12 月上旬に採択通知という流れを経ました。二次審査の前々日まで学会でカナダに行っていて、カルガリー空港で徹夜でスライドを錬成したのも良き思い出です。

カルガリー空港で買ったモンスターエナジー。マミーみたいな味がした

採択通知が来た日もちょうど WISS という学会に参加していて、ポスター発表を見て回っている最中に採択通知が来て、後輩と大いに喜んだことを記憶しています。採択倍率は 16.1 倍でした*21。

研究室 Slack で報告。めでたい

プロジェクト期間中

契約作業を経て、1 月 16 日からプロジェクト開始となりました。担当 PM は藤井 PM です。作業時間（8 ヶ月で 1,600 時間！）も時給も未踏 IT からパワーアップして再始動です！

1 月末には、有明の某施設でキックオフ会議が行われました。未踏 IT では開発や技術がメインであったのに対して、当然ながら未踏アドバンストでは事業化や社会実装を主眼に置いたプロジェクトが多く、他の発表を聞いてかなり圧倒された憶えがあります。

キックオフ会議の 2 日目はうららかに晴れた日で、有明から豊洲を経由して、東京駅まで散歩して帰りました。海辺を歩きながらもっと頑張らなきゃなあとぼんやりと考えていました

期間中は、学会でスペインに行ったり学振の申請書を書いたりと割込みタスクに苛まれつつも、粛々と開発を進めていきました*22。自宅の回線は何故か ChatGPT にも Claude にも接続できないため、研究室で日夜コードを書いていました。

進捗報告としては、オンラインを主体としつつ、月 1–2 程度の頻度で定例ミーティングが開催されました。未踏 IT での「とにかく自分が作りたいものを作っていく」という方針*23に対して、未踏アドバンストでは、どんなユーザがいるか、ペルソナは……ユーザーストーリーは……と無限に考慮する事項があり、自分はそうした点は知見がなかったため毎回大変勉強になりました。加えて 5 月中旬には中間報告会が、7 月初旬には全体ミーティングが開催されました*24。

ミーティング終わりには東京タワーを眺めながら芝公園付近を散歩して帰った。暖色（冬季）の電飾が好きです

最後、8 月末の成果報告会*25と 9 月前半成果報告書の執筆を経て、未踏アドバンストでのプロジェクトも無事に終了となりました。成果報告会では技術の詳細よりも、開発したシステムで組版のワークフローやユースケースがどう広がるか、というデモに重点を置いた発表を行いました*26。成果報告会当日と翌日の日記を以下に示します。

2026/8/29
徹夜で資料をなんとか仕上げ、東京へ移動。11 時から浜松町で未踏アドバンスト事業の成果報告会。デプロイや発表練習等の諸々が間に合っていなかったのでひやひやしながら準備して、14 時前から発表（15 分発表，13 分質疑）。結構ウケが良かったと感じた。デモで Wikipedia を綺麗に組版し直す、だとか、ChatGPT から成果報告書をノールックで書き上げる、というシチュエーションが良かったのと、あとは流行りの生成 AI に絡めつつも、技術のところを取り組んだのが良かったのかも。17 時半頃から懇親会。ワインを飲んだ。懇親会でも激励を貰えたので良かった。20 時に解散して、東京タワーを眺めつつ田町まで散歩した後、実家に帰った。8 ヶ月間お疲れ様でした。


2026/8/30
久しぶりに 10 時間ほど寝て 11 時頃に起床。未踏の成果である組版エンジン minitype を公開すべく、Web サイトを整えて、解説記事を書いた。解説記事も背景からユースケースまで 17,000 文字の内容を長々と書き、22 時前にようやく書き終えたところで公開した。前回の未踏 IT で組版に取り組んでから 6 年、今回の組版エンジンのアイデアを思い付いてから 2 年 8 ヶ月、未踏アドバンストの公募に出してから 1 年、契約開始から 7 ヶ月半……と大分時間が経ってしまったが、自作組版システムを世に出すのは長年の悲願だったので、これが達成できてよかったです。

なにをつくったか

minitype という組版エンジンを開発しました。未踏 IT での Twight が失敗した理由の一つとして、開発要件が大きすぎたために実装が追いつかず、使い勝手も悪くなったことが挙げられます*27。そのため、minitype では名前通りミニマムな組版エンジンを目指し、独自のドメイン固有言語（DSL）や構文解析器（いわゆるフロントエンド）を持たず、JavaScript オブジェクトとして文書構造やスタイルを表現するとともに、PDF や OpenType の処理は既存ライブラリに一任することにしました。社会実装や事業化といった観点ではまだまだ道半ばですが、組版システムの公開は 6 年越しの悲願であったため、ひとまずなんとか公開まで至ったのは良かったと感じています。

未踏をやると／やってよかったこと

お金がもらえる

未踏 IT の場合は 302 万円（2020 年当時は 273 万）、未踏アドバンストの場合は 800 万円（2 人以上のプロジェクトの場合は 1,600 万円）の委託金が支払われます。この委託金は開発経費ではなく﹅﹅﹅﹅作業実績に対する委託費として発生する（すなわち作業した分に対して時給が発生して、その用途には制限がない）点がポイントで、ゆえに未踏をやっている期間は他にアルバイト等をせず、開発等に専念することができます。これは我々のような学生にとってはかなり有難い支援です。

人々と交流できる／進捗が出る

未踏の PM はどの方も産業界や学術界の第一線で活躍されている方々ですし、採択者にも高い技術力を持った方が集まっていると感じます。そうした人々と触れ合うだけで十分に刺激になります。加えて、未踏コミュニティには異様な熱量を持った人々が多く集まっていて、その空間にいるだけで驚くほどの進捗が出ました。自分は 10 年ほどコードを書いてきたのですが、やはり未踏期間中が最もコードを書いていたと思います*28。また、未踏事業では累計 2,000 人以上が採択されているため、情報系で生きていると未踏関係者に遭遇する機会もそれなりに多いです*29。

知名度がある

未踏は 2000 年度にミレニアム事業として始まったらしいのですが、四半世紀以上続いているだけあって結構知名度があります*30。最近だと情報系の若手人材を対象とした支援プログラムは充実している印象を受けますが*31、個人的には未踏が公的事業として実施されていることによる信頼感は大きいと思っています。世間の趣味に対する風当たりは強いため、個人で好きなものを作るとなると「受験勉強／就活／研究 etc……したほうがいいんじゃない？」と逆風に晒されることもあるわけですが、未踏に採択されれば「この開発は国の事業の支援を受けて行っている」と示すことができ、開発を続けるうえでの大きな後ろ盾になります。

雑感

2 度の未踏期間を経て、反省も含め、諸々感じたことを書いていきます。

出来過ぎたデモをすると後々苦しくなる

未踏期間（特に未踏 IT）での一番の学びです。期待値は常にコントロールする必要があります*32。

自発的に発信をしない限り、未踏期間に開発内容が外に出ることはないため、最後の成果報告会で初めてその成果を公開することになります。特に未踏 IT のときにはスパクリ認定を意識していたこともあり*33、成果報告では嘘ではないものの、少し背伸びをした発表やデモをしてしまったように感じています。

成果報告会での Twight のデモはよく出来ていたと思います。論文組版、雑誌組版、辞書組版と様々な文書作成を網羅するような内容で、これが実用化されたら本当に凄いものになるんだろうな〜〜と未来を予感させるようなデモでした。Twitter の TL でも肯定的なコメントが散見されていました。

一方、「デモが良く出来る」ことと「実際に使える」ことには大きな隔たりがあります。当時の Twight は、無理をすれば面白いことができる一方で、誰でも自然に使える状態からはほど遠いものでした*34。別件もあって Yahoo! ニュースに載ったりもして期待値がますます高まると、一層世の中には出しにくくなります。今振り返れば、多少無理をして派手なデモを作るよりも、その時点で無理なくできる範囲を等身大に見せるべきだったし、公開もスモールスタートから始めるべきだったと反省しています。

良いソフトウェアは人々の熱意から生まれる

これも強く感じました。ソフトウェア開発に限った話ではないですが、折に触れて、最後に物事を動かすのは人々の熱意や情熱であることを実感します。好きこそものの上手なれという言葉は良い表現で*35、自分こそ良いものを作れる！と信じ続けることが重要なのだと思います*36。

生成 AI の台頭

6 年間で大分景色が変わったなーと思います。一応 10 年程度プログラムを書いてきた私も最近はもっぱら Claude Code 一辺倒です。未踏 IT（高校生）の頃は、雑でもいいのでとにかく自分でコードを書くことで腕がメキメキと上がり、生み出されたソフトウェアには愛着を持てていた気がします。一方、現在だと能力が上がっている感覚はあまりなく、生成されたコードも自分の手から乖離してしまっているように思えます。とはいえ、近年では自前で書くよりも何倍も品質の高いコードを Claude が生成するようになってしまったので、感情的にはなかなか難しいところがあります。

また、採択プロジェクトを見ても、生成 AI（特に LLM）の利活用を掲げたテーマはやはり増えていて、時代の変遷を体感します。

上手く行かなかったことを記録に残すことも価値がある

前述の通り、Twight は結局世の中に出せず、後悔と禍根を残すプロジェクトになってしまいました*37。とはいえ、世の中には上手く行かなかったソフトウェアや開発が無数にあるわけで、それらを単に失敗として死蔵させてしまうのは勿体ないように感じます。言い訳がましくはありますが、成功した成果だけでなく、失敗した経験についても、上手く行かない原因が何で、その過程はどうであったかを記録として後世に残しておくことには一定の価値があるのだと思います。

ソフトウェアは薄く小さく

ソフトウェアは薄く小さく作るべきでした。未踏 IT の頃はすべてを自前で実装することが正義であると確信していて、確かに当時の気合いの実装は現在のプログラミングの基礎力に繋がっていますが*38、ソフトウェアの保守や継続の面からはかなりマズかったと感じています。大生成 AI 時代に突入した現在、大きなソフトウェアは取り回しが悪いので、様々なツールやワークフローに接続可能で、必要十分な部分を薄く使えるソフトウェアの設計がますます重視されてきているように感じます。

むすびにかえて

未踏期間の経験は本当に価値があったと思うし、その経験はその後の人生にも大いに活きていると感じます。特に自分の場合、筑波大に進学したのは間違いなく未踏 IT 採択があったからで、未踏アドバンストの採択は博士進学を選択した一因にも繋がっています*39。現在も未踏アドバンスト事業（2026 年度下期）が公募期間中のようですので、本稿を読んで興味を持たれた方がいればぜひ応募をおすすめします。出すだけならタダですよ*40！！

最後に、これまでにお世話になった首藤先生、藤井 PM、IPA の方々、その他関係者のみなさまに感謝を申し上げて、本稿のむすびとさせていただきます。

成果報告書。提案システムで執筆した

*1:ハードウェアも可

*2:単に「未踏」と呼ぶ場合、未踏 IT を指すことが多い

*3:その他に 18 歳以下を対象とした未踏ジュニアがあります。こちらは IPA ではなく未踏社団が実施

*4:倍率は年々上がっていて、近年は 10 倍越えらしい

*5:教育用アプリケーションの開発とかだった気がする

*6:大抵の採択者は大学生 or 大学院生なのですが、2020 年度では高校生が 3 人採択されていました。うち一人は HCI 界隈で活躍されている Bluemo さんで、一昨年の WISS（学会）で数年ぶりに邂逅を果たしました

*7:組版処理システムの開発は、単純そうでありながら予想以上に複雑な技術が要求されたり、よく使われる割には取り組む人が少なかったりと面白い領域です。

*8:逆説的に言えば、採択には「自分が遂行する必要がある！」と主張することが重要であるとも考えられる

*9:後述の通り作業時間に対して時給が発生する。すなわち採択金額の満額を受け取るためには上限作業時間まで作業を行う必要がある

*10:コロナ禍で休校等を挟みつつではあったのですが……あと受験期だったため年明けからは通学の必要がなくなり大分楽でした

*11:耐えられておらず授業中は連日爆睡していた気もする

*12:週次提出の進捗管理自体は Google カレンダーに大まかな日報（「〇〇の実装」程度）を書くというものでした

*13:未踏 IT は春先に成果報告会を行うのが良いと思っています。街中の梅の花も綻び始めて、心も晴れやかなので

*14:成果報告会自体はオンラインに変更されたものの、発表は自宅 or 現地（秋葉原の会議室からリモート）を選択することができた

*15:当時では筑波大、慶應 SFC、東京都立大等。これらの大学では筆記試験等が免除になる（いわゆる AO 入試）

*16:国際科学オリンピック入試。所属学類でこの入試方式を受験したのは後にも先にも自分だけだったのですが、その 2 年後から未踏の枠が消されてしまったのでそんな……という気持ちになった

*17:2020 年度当時だとまだ Typst がなかった

*18:Twitter（現 X）上で from:kyoto_inaniwa Twight で検索すると細々と続いていたことが分かり、春休みのほぼ丸一ヶ月をリファクタリングに費やしたこともある

*19:未踏では組版は伝統芸能とされている

*20:未踏のリベンジは未踏で果たせればベストだなとも思っていました

*21:2025 年度から下期が開始されたこともあり、採択件数が絞られていたぶん倍率は高めでした

*22:学会投稿や学振の締切と未踏の進捗報告が重なった時期は本当に大変でした……。当初は休学も考えていたのですが、修論のテーマを未踏のそれ（組版）に一本化することになったことと、様々な人々から休学を止められたこともあって休学は取りやめることにしました。社会からの孤立は避けたほうが良いです（未踏 IT 時代の IPA 担当者の方も仰っていた）

*23:多くのプロジェクトにもおそらく該当

*24:6 年の時を経てコロナ禍もどこ吹く風になったため懇親会が復活していた

*25:非公表。後に発表動画は公開される予定です

*26:世間受けを狙ったデモに昔はゆるやかな抵抗を持っていたのだが、最近は HCI 界隈にいることもあって慣れてきた気はする

*27:組版処理システムをフルスクラッチで開発した場合、言語処理系（パーサ、型システム等）+ PDF/OpenType の処理系 + 組版アルゴリズムの実装……とかなり要件が大きくなります。TeX は凄いのです

*28:特に未踏 IT のときは 10 代の体力も相まって顕著でした。ステップ数やコードの品質だけでいえば、技術力や知識、生成 AI の性能向上も相まって未踏アドバンスト期間の方が出たとは思うのですが……

*29:例えば後輩が採択されたり、採択者が研究室に編入してきたり……。この縁で組版関連の仕事を得たりもしたので、予想以上に世界は狭いんだなあとも思います

*30:大学の先生や企業の人々にも結構知られている印象

*31:ラボユース、SecHack、異能、覚醒……等，それこそ大学で行われている enPit や COJT といった授業もその類ですよね

*32:例えば、必要以上に凄そうに魅せないことなど。これは結構落とし穴だと思っていて、生きていると往々にして誇大な表現を求められ、強い言葉を使わざるを得ない場面も多いと思うのですが、そういうのは本当にためにならないのでやめたほうが良いです

*33:もちろん成果発表の出来だけではないと思いますが

*34:例えば、雑誌のような組版を行うにはテキストボックスを手動で配置したりする必要があり、グラフィカルな版面がパッと出てくる、みたいな状態からは離れたものでした。組版システムの開発では、可能な限り少ない記述に対して見栄えのする成果物が出てくることが理想的なわけですが、そんなシステムが存在すれば今頃覇権を取っているはずで、そこには埋まることのないトレードオフがあります

*35:かつての首藤先生のメッセージにも「人がなかなかやらない、できないことを成し遂げるために必要なものは、何より、情熱です。」と記載されている

*36:もちろんそのために手を動かし続けることは重要で、人事を尽くして天命を待つ的な考えに近いのかと思います

*37:Twitter 等を観測していると時々言及している人がいて、意外にみんな憶えているんだなと思います

*38:ゆえに人材育成という観点での効果は大きかったと思います

*39:このあたりは葛藤があったのですが、本稿の趣旨から外れるのでまたの機会に

*40:当然ながら出した後もタダで、不採択の場合にもフィードバックは返ってくるので基本的に応募しどくな事業ではあると思います

バタバタの冬コミ初サークル参加記

あけましておめでとうございます。新年早々から昨年の話になってしまうのですが、去る 2025 年 12 月 30–31 日 に東京ビッグサイト（東京都江東区）で開催されたコミックマーケット 107（C107）に参加し、文字・組版に関する同人誌を頒布してきました。念願の初サークル参加です！！ 予想以上に面白い体験だったので、備忘録がてら当日までの準備や当日の様子を書き残しておきたいと思います。

長いので先に目次を貼っておきます。個人的には当日の様子あたりが面白いと思います。

サークル申込まで

コミケの存在を認知したのは中 2 の頃*1、アニメ「冴えない彼女の育てかた」を観たときが初めてでした。高校に入ると同級生のコミケ参加の様子が TL 上で散見されるようになり、いつかは行ってみたいな〜と思いを抱くようになります。その後新型コロナウイルスが猛威を振るい、同人誌即売会を含む様々なイベントが中止に追い込まれたわけですが、大学 1 年の冬にコロナも一段落し、2 年ぶりに冬コミ（C99）が開催されるということで、そこで初めて一般参加を果たしました*2。完全予約制で入場時間も区分されており、会場内の移動もスムーズにできたことを記憶しています。

以降夏・冬ともに毎回参加していたのですが、8 回目の参加となる前回の夏コミ（C106）帰りに、新橋の牛角で高校同期の国際単位系（@Units_SI）と打ち上げをした際にサークル参加を勧められ、初めてのサークル申込を試みることにしました。

私がいつも持ち歩いているぬいぐるみのキロロくんとあずきちゃんからサークル名を「キロロとあずき」と名付け、サークルカットにはそれらを描きました。また、頒布する内容は文字や組版に関する同人誌に定めました。ジャンルは評論島と迷ったのですが、どちらかというとコンピュータやアルゴリズム寄りのことを書きたかったため、「（ＰＣ及びＩＴ関連）評論・情報」を含む同人ソフトを選びました。

11 月 7 日に当落発表があり、晴れてサークルスペースを貰えることになりました！ みんなやっているスペースもらえました！みたいなツイートもしてみます。同人誌、作っていき！！

同人誌づくり

早速同人誌制作に取り掛かれば……よかったのですが、11 月から 12 月上旬に掛けて学会参加や諸々の準備といった行事が目白押しで、あろうことか 12 月上旬まで一切の準備を放置してしまいました。

記事執筆

気が付けば忘年会等も始まっていて、もう師走やばということで取り敢えずネタ出しから初めていきます。最終的に出たアイデアは以下の通りです。

  • 採用案
    • 絶対フォント感を身に付けるには？
    • 二段組の組版技術
    • LaTeX で「どの単語・行を削ればページ内に収まるか」を可視化するスクリプト
    • スマートウォッチと日本語入力
    • JL/CL/KLreq 読み比べ
    • 組版システムがみた夢
  • 没案
    • 「な」見比べ
    • 独自組版システムで同人誌作ってみた！
    • OpenType 概説
    • ExtendScript で初める組版効率化
    • Webと組版系で一本
    • 海外で見つけたサインシステム
    • 次の組版規格 JLReq-d を紐解く
    • 寄稿？

どれも興味のあるテーマだったのですが、執筆時間等も考慮して、書きたい／書きやすそうなテーマで優先順位をソートして、上から 6 本の記事を書くことにしました。寄稿等も募ってみたいところではありましたが、本が出るかも分からない状態 & タイトスケジュールで声を掛けるわけにも到底行かず、今回は独力ですべてを用意することにしました。

後はひたすら記事を書いていきます。12 月も折り返しに差し掛かった 15 日頃から執筆を始め、21 日：（合計）15 ページ、23 日：19 ページ、24 日：31 ページ、25 日：34 ページと無限執筆編に突入し、27 日にようやく全記事（46 ページ）を書き上げて脱稿しました。しばらくはその他のすべての作業を放置して原稿作業に勤しんでいたため、「耳をすませば」で受験よりも小説執筆を優先して詰められていた女の子（月島雫）さながらの様子だなあと思っていました。

完成した記事のうち、長め（10 ページ超）の 3 記事を「特集」または「技術記事」として、短め（2–3ページ）の記事を「コラム」として掲載しました。

組版作業

記事執筆と並行しながら組版作業も行っていました*3。組版に使用したソフトウェアは以下の 3 つです。

  • CLI ベースの独自組版エンジン
  • Adobe Illustrator
  • Adobe InDesign

特集・技術記事の本文組版には、以前から開発していた CLI ベースの独自組版エンジンを採用しました。ただし本エンジンではグラフィカルな装飾を行うことはまだ難しいため、各記事 1 ページ目の装飾部分は Illustrator で作成しました。また、まえがき／あとがき、コラムに関してはすべてを Illustrator で組みました。具体的には、以下の手順を踏みました。

  1. 各記事の本文を独自組版エンジンから PDF で出力。ノド・小口や柱の位置はこの時点で考慮して配置する
  2. 本文 PDF を Adobe Acrobat で Dot Gain 25％ に変換してグレースケール化
  3. グレースケール化した本文 PDF を InDesign に張り込み、ノンブルを付与
  4. 装飾部分については Illustrator から PDF で出力し、グレースケール化した本文 PDF の上に重畳して配置
  5. InDesign でトンボ付きのデータを出力

多分大丈夫だろうとは思いつつも、独自組版エンジンに関しては印刷時にエラーが生じないかが不安要素ではありました。InDesign に PDF を張り込む形で入稿データを作成したのは、以前、雙峰祭*4にて頒布する同人誌を作成した際に、Typst を用いて作成した PDF を InDesign に張り込んだところ問題なく入稿できたという経験に基づいています。

入稿データ。トンボが付くとそれっぽく見えていいですよね

装丁

C104 帰りにビッグサイト前で撮影した写真を加工して表紙にしました。グリッチは Nano Banana Pro に写真を投げて加工してもらったものです。また、表 1*5 の Typesetting、表 4 の「山路を登りながら……」のベジェ曲線の表現は、Gemini に書いてもらった ExtendScript を適用したものです。AI も使い方によってはかなり有用であることを実感させられます。

表紙のタイトルにはナール（写研）、石井ゴシック（写研）、Gotham（Monotype）の 3 書体を使用しました。また先日、横浜駅周辺の地下街でバナナスリップ（ヤマナカデザインワークス）を用いた POP を見掛けて良さげな印象を受けたので、記事一覧の部分にも採用しました。ベタ打ちだとバラバラした印象を受けますが、きちんと文字詰めや級下げをしてあげればポップながらも締まった印象を与える面白いフォントです。

街中で見かけた POP（左）、文字詰めをしたタイトル（中央）、ベタ打ちのタイトル（右）

入稿

こうして入稿データが完成したのが 12 月 28 日でした。12 月 28 日から入稿可能な印刷所を探したわけですが……

終わった（画像はグラフィックのサイト）

どの会社もほぼ受付終了になっていて*6*7、コピ本にするか瀬戸際のかなり厳しい状況にまで追い込まれていました（言うまでもなく 3 日前入稿を試みている私に 100% 非がある）。

ここで困ったときのアクセア！という言葉を信じて ACCEA EXPRESS のサイトを見たところ、中綴じ冊子印刷が納期 1 日未満で 400 円／部程度で発注できるとのことだったので迷わず発注しました。部数はサークル初参加だったことと、ニッチなジャンルだったことに鑑みて 30 部に設定しました。店舗は 12 月 29 日まで 24 時間営業を行っていたアクセア 五反田店様にお願いしました。入稿は結局 28 日中には間に合わず、日も回った 29 日の 0:04 に完了しました。

痛恨のミス

翌朝起床してから気が付いたのですが、部分的に古いデータを入稿していたことが発覚しました。前述の通り、1) 独自組版エンジンから PDF 出力 → 2) PDF をグレースケール化して InDesign に張り込み、という手順を踏んだのですが、グレースケールされた本文 PDF のリンク更新を忘れて入稿データを作成してしまいました……痛恨のミスです。このあたりは CI 等を上手く回して古いデータは破棄するような仕組みを構築していきたいです。

正誤表は以下のページに公開しています*8。

GitHub - inaniwaudon/c107-typesetting: コミックマーケット 107 にて頒布した同人誌「組版処理 Vol.1」に関するリポジトリ · GitHub

前々日

入稿後爆睡して、目が覚めると 12:17 に製作完了のメールが届いていたため、早速五反田に受け取りに向かいました。都内から近いって便利ですよね。

五反田、実は初めて降り立った土地かも

こうして無事に受取が完了しました。印刷品質もかなりのもので、仕上がりも十分な結果でした。年末であるにも関わらず迅速にご対応いただき頭が上がりません。朝から何も食べておらずフラフラしたので、見本誌をパラパラ眺めつつ、スターバックスで玉露フラペチーノを一人飲んで帰りました。

また、以下の小物や什器を用意しました。準備にあたってはたまたま流れてきた超有益ツイートを参考にさせていただきました。大感謝です。

品目 購入店 金額 備考
ポップスタンド MENGLIN（Amazon） ¥746
布（92 cm × 120 cm） ユザワヤ ¥898
表紙を飾れるブックスタンド × 2 ダイソー ¥220
A4 サイズファスナー × 3 ダイソー ¥330
ネームプレート ダイソー ¥110 当日は未使用
スケッチブック ダイソー ¥220


前日

12 月 30 日、冬コミ 1 日目です！ 一般参加もしたかったのですが、事前にリストバンドを購入していなかった & ポスター等の準備が間に合っていなかったため、当日券を買って午後入場にしました。

ポスターのデザインは以下の通りです。改めて思い起こしてみると他人のサークルのポスターをあまり憶えていないもので、「コミケ ポスター」等で検索してデザインを見ていきます。傾向としては 1) スペース番号を最も大きく、2) サークル名はそれほど主張しなくても良い*9、3) 頒布内容はあると良い という感じでした。したがって、没案になった表紙のデザインを流用しつつ、追加でサークル番号やサークル名を入れていく方針で制作しました。

当初は同人誌の表紙もこういうテイストのタイトルで行く予定だったが、親から「デザインセンスが進化していないね」と言われたので取りやめてシンプルなものにした

このデータをアクセアの大判ポスター印刷（A2）で発注します。また、ツイートが若干伸びていたので同人誌も追加で 10 部発注しました。今度の製作はアクセア TOC 有明店様にお願いしました。

16:00 過ぎまで企業ブースを見て回った後、TOC 有明に向かいます。

冬コミ 1 日目。冬のビッグサイトは夕暮れが綺麗
TOC 有明。門松が来たるべき新年を祝賀

無事にポスターと同人誌を受け取って帰宅します。ここ数年、冬コミ 1 日目終わりは北品川の天神湯で入浴した後、大崎の六厘舎で生七味つけ麺を食べて帰ることを恒例行事にしています。天神湯は通常の銭湯価格（550 円）であるにも関わらず天然温泉があり、内装もモダンかつ綺麗であるためおすすめです。

……おや！？ ツイートのようすが……！

ここで、ツイートが結構伸びてきていることに気が付きます。10 部受け取ったよツイートに対して 1,100 を超えるいいねが付いていて、その係数は 110 です。他にもそこそこ反響があったため、追加でもう 20 部発注することにしました。

夜にはおしながきツイートもしておきます。

当日

大晦日、遂に当日です！！ 出展サークル専用通行証（いわゆるサークルチケット）が余っており、中学の友人を誘った*10ところ快諾してくれたため、8:15 頃に国際展示場駅で待ち合わせにしました。

当日は 6 時過ぎに起床し「BIG みそか」等と余裕でツイートしていたのですが、気付けばいつのまにか 7 時を回っていて、そこから大慌てで荷造りをして自宅を出ました。さらにおしながきを大至急ネットプリントして、8:20 頃にようやく最寄り駅に到着し、国際展示場駅への到着は 9:00 を回るという大遅刻を犯す事態に。友人に詫びモンスターを買っていったところ彼も当然のようにモンスターを持っていたので、自分で飲みました*11。さらに慌てて会場に向かおうとしたところスマートフォンを落としてしまう*12という失態を犯し +10 分……焦りは禁物です。

友人に先に入場してもらい、私は追加発注した分を受け取って 9:21 に西南地区に入場しました。サークル入場時間は 9:30 までだったのでギリギリです。

サークルチケット

その後、見本誌として新刊と既刊（雙峰祭で頒布した同人誌）を 1 部ずつ提出します。封筒の在処がわからずあたふたしていたところを隣のサークルさんに助けていただきました。

参加登録封筒。この中に見本誌を入れてボックスに提出する

机に布を引き、本を並べ、ポスターも飾ってようやく設営完了です。「設営完了しました！」と遂にツイートできる日が来るとは…… 配置されたスペースが大きな通路沿いだったため、シャッター*13から風が結構吹き込んできました。当初はブックスタンドで見本誌を立てていたのですが、風で四方八方に倒れたため平置きにしました。

開場

10:30、拍手とともに開場です。早速「Twitter で見ました」「これ買ってきてと頼まれていたんです！」と声を掛けていただき、10 部ほど頒布して幸先の良いスタートでした。その後はフォントに反応された方、LaTeX に反応された方、逆に LaTeX は知らないけど InDesign はご存知だった方等々、様々な方々の手に取っていただきました。フォロワーや高校同期、大学の後輩等も来てくれました。

これがサークル側の景色か……

こうして 11:18 には早くも 58 部が完売します（提出用 + 店頭に置いていた見本誌 2 部を除いた数）！ 開場から 1 時間も経過しておらず、想定を大きく上回るスピードです。流石に早すぎたのでどうしたものかと再び ACCEA EXPRESS を開くと、今発注すれば 14:30 には中綴じ製本が完了するとのことでした。乗るしかない、このビッグウエーブに……と思いつつ、14:30 といえば人の波も引き始める頃だとは思ったため、11:36 時点で +50 部を発注しました。入稿データは 84.7 MB あり、輻輳したモバイル回線経由で入稿するには厳しいものがあったのですが、Tokyo-BigSight_Wi-Fi に接続して無事に入稿完了しました。これこそ真のオンデマンド印刷です。

ツイートも破竹の勢いで伸びていき、2,700 いいねにまで到達しています。もはやお祭り騒ぎです。

既刊 10 部も捌けてしまったため、1 部のみ見本誌を店頭に置いて、スペースに来ていただいた方には見本誌を見てもらいつつ「14:30 頃になると追加で刷れるかもしれないです……」とお伝えしました。その後、11:49 にはデータチェックが終了し製作を開始したとの連絡が入ります。そしてなんと 12:51 には製作が完了し、発注から 1 時間半を経ずして 50 部の本が出来上がったのです！ 中綴じとはいえ凄まじいスピードです。アクセア TOC 有明店様本当にありがとうございます。

※ 追記：「○ 時に〜」と謳うのは時限頒布にあたるため避けるべきであったとのご指摘をいただきました*14。具体的な時間を明言せず、「製本が完了次第頒布します」のような表現に留めておくべきでした。お詫びして訂正します。

取りに行くために貴重品だけ片付けて、隣のサークルさんにひと声かけて離席しました*15。

アクセア TOC 有明店で 3 回目の受け取りを完了させます。ビッグサイトに戻る頃には午後入場の列も解消されており、スムーズに入場することが出来ました。そうして 14:00 過ぎにサークルスペースに戻ると……

え

……なんか列できてるな

友人に尋ねたところ、彼がサークルスペースに戻ってきてからまもなく急速に列形成が始まったとのことでした。

列を放置するわけにはいかないので、一人一部限定（いわゆる一限）で頒布を始めました。途中で部数が足りなさそうだったのでコミケットスタッフの方にその旨をお伝えしました。こうして僅か 10 分足らずで 50 部を頒布し、大盛況のうちに増刷分も完売となりました。当初出来ていた列だけでも 50 人以上は並んでいたことになります。本当にありがとうございます。並んでいただいたにも関わらず頒布できなかった方々には大変申し訳ないです。

その後、取り置いていた分も無事に渡すことができ、15:00 過ぎには撤収しました。撤収後は西ホールをぶらぶらと巡り*16、鉄道島の近辺で閉会を迎えました。コミケの三本締めを初めて見て感動しました。

帰路は激混みのりんかい線に揺られ、大井町の一竜で打ち上げがてら豚骨らーめんを食べて帰りました*17。いやーお疲れさまです。

各種まとめ

タイムライン

タイムラインとしては以下の通りです。表題の通りかなりバタバタな年末進行で進んでいることが解ります。

日付 できごと
12/28 入稿データ完成
12/29 00:04 中綴じ冊子入稿 (1)
12/29 12:17 (1) 製作完了
12/29 15:00 頃 (1) 受け取り
12/30 11:55 中綴じ冊子入稿 (2)
12/30 13:32 ポスター入稿 (2)
12/30 13:58 (2) 製作完了
12/30 16:40 頃 (2) 受け取り
12/30 20:46 中綴じ冊子入稿 (3)
12/31 04:21 (3) 製作完了
12/31 09:00 頃 (3) 受け取り
12/31 09:21 サークル入場
12/31 10:30 開場
12/31 11:18 新刊完売
12/31 11:36 中綴じ冊子入稿 (4)
12/31 12:51 (4) 製作完了
12/31 13:40 頃 (4) 受け取り
12/31 14:00 頃 サークルスペースに戻る
12/31 14:16 新刊増刷分完売
12/31 15:00 頃 撤収

収支

気になる収支は……！？ マイナス ¥19,040 でした！！！ 赤字！！！

収入の部

品目 金額 備考
同人誌頒布分 ¥43,200 ¥400 * 108 冊（2 冊は提出用見本誌 + 知り合いに無料配布）

支出の部

品目 金額 備考
サークル参加費 ¥7,000
同人誌印刷費 ¥50,556 中綴じ冊子印刷（B5、表紙：コート110 kg カラー + 本文：上質紙 70kg モノクロ、48P）× 110 冊
ポスター印刷費 ¥1,540 大判ポスター印刷（フォト半光沢紙、A2）
おしながき印刷費 ¥160 セブンイレブン ネットプリント（A3 + A4、カラー）
什器・小物類 ¥2,524 上記参照
交通費 ¥460 どのみちコミケには参加していたので東京ビックサイトまでの移動費は計上せず
合計 ¥62,240

感想

夢のような時間でした。コミケに限った話ではないですが、何かしら同人誌を作って同人誌即売会に出ることを目標にしてきたので、まずは達成できてよかったです。赤字は出てしまいましたが、（想定よりも）多くの方に本を頒布できたことは感慨無量でした。数々の助言をいただいたみなさんや当日手伝ってくれた友人、アクセアの店員の方々、当日買いに来てくださったみなさまには感謝してもしきれません。本当にありがとうございます。

よかったこと

無事に頒布できた
本当にギリギリの進行だったのですが何とか間に合ってよかったです。

当日増刷できた
結果として中綴じでオンデマンド印刷にしたことが功を奏し、当日も僅かながら増刷することができました（勝手がわからないのですが、Twitter の反応を見ている限りどうも珍しいことっぽい？）。アクセアは本当に神です。

独自組版エンジンを使用できた
トラブルなく使えてよかったです。追い込み処理（文字の約物（句読点や括弧類）の前後を詰める処理）には対応していないのですが、それでもそこそこ綺麗な組版が実現されたと考えています。

ツイートが伸びた
コミケと Twitter の相性が良いのは自明だと思いますが、結構ツイートが伸びた印象があります。具体的には、コミケ関連のツイートで 100 いいね超が 8 ツイート（1、2、3、4、5、6、7、8）、1,000 いいね超が 6 ツイート、（1、2、3、4、5、6）、5,000 いいね超が 1 ツイート でした。実際買いに来てくださった方にも「ツイートを見た」「おしながきを見た」と話してくださる方がかなり多かったです。

反省

部数を読み間違えた
実質的な頒布時間は 1 時間程度で、それ以外のほとんどの時間は暇をしていました。体感としては 200 部くらい刷っても全然売れたんじゃないかなーと思います。ただ、フォントも組版もニッチジャンルだと思っているのでこればかりは読めないところです（初サークル参加だと 50 部も売り切れない場合がほとんどと聞いていた）。

余裕を持った行動
入稿周りもそうですし当日も危うく遅刻になるところでした。2026 年は余裕を持って行動します。

古いデータを入稿してしまった
結構校正とか頑張ったので地味にショックでした。ヒューマンエラーは防ぎようがないため、システム的に対策していきたいところです。

赤字になった
赤字は出ても良いと思うのですが、原価（印刷費）を割ってしまい、1 部売る度に 60 円赤字が出るというのはちょっと考えものです。改めて振り返ると売価をもう少し上げても良かった気がしますし*18、最初から 100 部単位で製本する or 早めに入稿する等でも防げた気はします。

会話ができなかった
コミュ障的な話はさておき、並びすぎると頒布するだけで精一杯で会話する時間が取れないのは残念でした。逆に空いた時間には、適宜内容について説明したり議論したりする機会を取れたと思います。

回れなかった
サークル参加すると他の同人誌が買えない*19*20！！

むすびに

委託はないんですか？と聞いてくださった方が相当数いらっしゃったため、遠からず（おそらく本日中に）BOOTH でも頒布すると思います。来年は年明け直ぐに修論締切があるためサークル参加は難しいと思うのですが、また機会があればぜひサークル参加に挑戦してみたいと思います。改めて、この度は本当にありがとうございました。よい 2026 年をお過ごしください！

追記（2026/1/3）：
BOOTH で頒布開始しました！今回は赤字にならないのでぜひ買ってください

inaniwaudon.booth.pm

追記（2026/1/7）：
BOOTH 頒布分について、増刷した 500 部が完売しました！ PDF 版は絶賛頒布中です

追記（2026/8/16）：
PDF 版を無償公開しました！
inaniwaudon.booth.pm

表 3 には年越しキロロ（とあずき）を書いた

*1:♭ から観たので 2017 年らしい

*2:同人誌即売会自体は 2021 年 9 月のコミティア 137 が初でした

*3:京極夏彦氏みたい

*4:筑波大学の学園祭

*5:表計算の「表」ではなく表紙の「表」

*6:どうも事前に予約する必要があったっぽい。次回の教訓にします

*7:プリントパックはギリ行けそうな雰囲気があったものの、年末の物流遅配を考慮して見送ることにしました

*8:印刷所の表記が「アクセア 五反田店」となっている冊子が対象です

*9:言われてみると人名やペンネームで憶えていてサークル名はあまり憶えていない

*10:コミケ初参加

*11:なんなら差し入れまでしてもらった、ありがとうございます

*12:友人の携帯から落とした携帯宛に電話したところ、拾得した方に出てもらえて何とか事なきを得ました

*13:斜め前のシャッターにはバキ童がいて開場前から早くも列を作っていました

*14:コミケットアピール等は拝読していましたが、時限頒布が避けるべき事項であるということは初めて知りました。不勉強につきご迷惑をお掛けして大変申し訳ありません

*15:暇だったので友人には自由に回ってもらっていました

*16:東まで行きたかったが到達できなかった

*17:友人はアルコールに弱い + 夜勤があるとのことで飲まなかった

*18:え、400 円って安くないですか？と聞かれる機会が結構あった。情報系の同人誌は実はあまり買ったことがないため適正価格がわからず……

*19:時間的な制約もある上、同人誌制作に無限にリソースを取られて他の頒布情報まで追いきれなかった。宝の地図も今回作れていないです…… それでも一般参加以上に楽しかったんですけどね！

*20:サクチケを知ってしまうと一般入場できなくなるみたいな言説を見て確かにそうだなと同意を示しつつも、サークルの方が大変で全然回れなくないですか？と今回感想を抱きました

Dock やタスクバーは右側に置くべきかもしれない

macOS には Dock（Windows ではタスクバー）という名前で，ウィンドウを切り替えたり，頻繁に使うアプリを一発で開いたりするためのバーが存在します．標準では，Dock は画面下部に配置されますが，ふとこれは非効率なように感じました*1．

下側に置いた場合

最も一般的な配置です．初めて見た設定を親だと思って長らくデフォルトのままで使っていましたが，以下の問題が生じます．

まず，一般的なディスプレイは横に長いですが，タスクバーに並ぶアイコンは高々 15 個程度でしかなく，Dock を下側に置くと画面下部の左右に無駄なスペース（図のピンク部）が空いてしまいます．利用可能な画面面積（図の緑部）も，Dock を左右に配置した場合と比べて少なくなります．

また，ほとんどのテキストの書字方向は横書きで表現されます．文章の行長は長すぎても読みにくくなるため*2，多くの Web サイトでは max-width 等によって幅が広がりすぎないように調整されています．ゆえに，利用可能な画面幅が狭くなること自体はそれほど問題でもなさそうです．一方，高さが狭くなると，一度に表示可能なテキストの量が減ってしまいます．


左側に置いた場合

操作感的には左に置くのが最も良い気がしますが，階層型の UI を持つアプリや Web サイトと干渉することに気が付いたのでやめました．

ユーザインタフェースの世界にはフィッツの法則（ポインティングの速度はターゲットまでの距離が長いほど遅くなり，またターゲットサイズが大きいほど速くなる）という有名な法則があって，画面端にターゲットを置くと実質無限大のサイズと見なせる*3ためにポインティングが早くなることが報告されています．また，ポインタはマウスや指の移動量に対して常に等速なわけではなく，加速度を用いて制御されています（すなわち，指を早く動かせば遠距離でも一瞬で移動できる）．ただし，画面端には高速に移動できても，画面端の少し手前まで移動することは難しいです．

多くのアプリやサイト（例：Finder, Arc, Notion, Overleaf*4, ChatGPT）では画面左端にファイルやページを選択するためのサイドメニューが配置されています．あるいは，私の個人サイトではウィンドウ左端までポインタを移動させると，通常時は非表示のメニューが表示されるという実装を行っています．左側に Dock を置いた場合，Dock 自体は容易に選択できますが，ウィンドウ内の左端のメニューを高速で選択することは困難になります．


右側に置いた場合

右端には重要なメニューが置かれることも少なく，最も合理的なように思えます．16:9 の動画を表示した際に表示領域が少なくなるという課題はありますが，多くの場合フルスクリーンモード（Dock が隠れる）にするので問題はなさそうです．

というわけで今日から Dock は右側に置きたいと思います．

*1:ちなみに私は友人に勧められていつからか右側に Dock を置き始め，現在は左に配置している

*2:Material Design のタイポグラフィのページには 40–60 文字程度が適切と定義されている

*3:無限大のサイズをもつターゲットのポインティングに関する調査

*4:Overleaf を使っている際に画面が狭すぎるのでメニューを自動開閉させる拡張機能を作っているときに本記事のネタを思い付いた

独自のプレゼンツールと卒論の進捗を共有する仕組みを作った

年の瀬ですね。先週は週に 4 回も忘年会があり、かなり良い年末を過ごしています。

さて恒例となった mast アドカレに関して、本当は銅鑼を鳴す度に NISA 口座*1へ S&P500 かオルカンが 100 円ずつ投資されるシステム*2を作り、煩悩の数だけ銅鑼を鳴らしまくってたのしく忘年！みたいな記事を書こうと思っていたのですが、諸々に忙殺している間に担当日を迎えてしまいました*3。そういうわけなので、最近軽く作ったものを紹介してお茶を濁したいと思います。

本記事は mast Advent Calendar 2024 の 23 日目の記事です。22 日目は iorin__io さんの記事「iorin.io | 未踏ITに採択された話」でした。未踏事業は本当に良い事業なのでぜひ皆さんも応募してみてください！

プレゼンツールを自作した

12 月中旬に開催された WISS（インタラクティブシステムとソフトウェアに関するワークショップ）という学会（ワークショップ）に参加してきました。苗場に 2 泊 3 日泊まり込みで HCI 分野の研究が発表されるというもので、登壇発表、デモ発表、夜の懇親会のどれを取っても非常に興味深く、楽しい経験になりました。また、有り難いことに卒研として取り組んでいる文字入力手法の開発を報告した論文が採択され、登壇発表を行うことになりました。

さて、プレゼンはプレゼンツールから作ると良いとされているため、簡易的なプレゼンツールを実装して実際に活用してみました。本ツールは Web アプリケーションとして作動するため、他の PC からも簡単に利用できるほか*4、localhost で起動すればオフライン環境でも作動します*5。以下の URL から実際に動くスライドを閲覧することができます。
https://slide.yokohama.dev/wiss2024

基本的な操作を以下に示します。

操作 内容
スクロール、[←][→] キー ページ戻し／送り
[F] キー 全画面表示
[W] キー 原稿（発表者ツール）を開く
[C] キー ポインタを表示
[L] キー ページ一覧を表示

実装

お馴染みの技術構成である Vite + React + TypeScript を用いて実装し、Cloudflare Pages にデプロイします。

スライド自体は Illustrator で予め作成しておき、webp 形式の画像として出力しておきます*6。また、.ts ファイル（以降、マニフェストファイルと呼称）に以下のインタフェースを満たすオブジェクトとしてスライドのメタデータを記述します。

import wiss2024 from "./wiss2024";

export interface Manifest {
  aspect: number; // アスペクト比
  count: number; // ページ数
  displaysPageIndex: boolean; // ページ番号を表示するか
  movies: Record<number, Movie[]>; // 動画（後述）
  manuscripts: string[]; // 原稿（後述）
}

export const manifests: Record<string, Manifest> = {
  wiss2024,
};
スライドの遷移

横方向にスライドを並べ、①矢印キー ②横スクロール ③ページ一覧 のいずれかで遷移できるようにします。実装としては flexbox で並べて overflow-x: scroll を指定しつつ、scroll-snap-type: x mandatory; scroll-snap-align: start; によってスクロール位置を強制しています。

また、表示中のページを JS 側で管理する必要があったため、onscroll イベントの発生時に scrollLeft から現在ページを算出しています。ページを遷移させたい際には、画面幅 × ページ数 までスクロールさせます（あくまで状態はスクロール位置によって決定され、JS 側で持つページ番号はそれに付随して決定される）。

const scrollPage = useCallback((i: number) => {
    if (!listRef.current) return;
    listRef.current.scroll({
      left: window.innerWidth * i,
    });
  }, []);

const onScroll = useCallback(() => {
    if (!listRef.current) return;
    const index = Math.round(listRef.current.scrollLeft / window.innerWidth);
    setIndex(index);
    // 後略
  }, []);
全画面表示

Web 標準の API に、画面表示*7を全画面（フルスクリーン）にする Fullscreen API が存在しています*8。[F] キーの押下時に document.body.requestFullscreen() を呼び出すことで、ウィンドウを最大化しています。

developer.mozilla.org

動画を埋め込む

動画はマニフェストファイルに以下の通りに定義されます。角丸を指定できるのがポイントです。

type Movie = {
  width: number;
  height: number;
  borderRadius?: number;
  src: string;
  loops: boolean;
  autoplay?: boolean;
} & ({ top: number } | { bottom: number }) &
  ({ right: number } | { left: number });

これを video タグに落とし込んで再生しています。ページ遷移時に ref を探索して動画の再生時間を冒頭に移動させるとともに、autoplay 属性が true の場合は自動再生するようにしています。

for (const [i, videos] of Object.entries(videoRef.current)) {
  for (const video of videos) {
    if (!video.current) continue;
    if (parseInt(i) === index) {
      video.current.currentTime = 0;
      if (video.current.autoplay) {
        video.current.play();
      }
    } else {
      video.current.pause();
    }
  }
}
発表者ツール

苗場に行く前日に発表練習をしたところ、10 分の発表時間に対して 11 分半も掛かっていたことに気が付いたため、急遽徹夜で原稿と発表者ツールを用意しました。[W] キーを押すことで、サブウィンドウが開いて原稿の内容が表示されるようにします。また、[S] キーを押すことでサブウィンドウ内で時間計測を行います。

これができます

以下に示すコードのように、原稿の内容をマニフェストファイルに定義します。

const wiss2024: Manifest = {
  manuscripts: [
    `1. ページ目の原稿`,
    `2. ページ目の原稿`,
  ],
  // （省略）
}

この際、Window.postMessage() 関数を使用するとウィンドウ間でメッセージを送信することができるため、window.open() 関数を用いてウィンドウを開いた後、親ウィンドウからページ番号を子ウィンドウに送信します。子ウィンドウ側は、受信したページ番号に応じて対応する原稿を表示します。

// 親ウィンドウ側
const [childWindow, setChildWindow] = useState<Window | null>(null);
setChildWindow(window.open(`/manuscript/${name}`));

// 子ウィンドウにメッセージを送信
if (childWindow) {
  childWindow.postMessage(
    {
      action: "SyncMessage",
      message: index,
    }, "*");
}

// 子ウィンドウ側
window.addEventListener("message", (e) => {
  switch (e.data.action) {
    case "SyncMessage":
      setIndex(parseInt(e.data.message));
    }
  });

感想／改善点

当日は特にバグもなく無事動き、発表もそつなく終わりました。内心ヒヤヒヤしていた*9ので良かったです…… 気づいた改善点としては、以下の点があります。

  • ページ番号は Web 側で表示するではなく元スライド側に埋めておくと良い
    質疑応答等の際に資料を参照して「何ページ」と指し示したい場合があるため
  • 画面の背景は白ではなく黒にすると良い
    アスペクト比が合わなかった際に誤魔化せるため
  • 資料を更新したら Cloudflare のキャッシュをパージする必要がある
発表

卒論の進捗を共有する仕組みを作った

続いての話題です。表題の通り、卒論（修論も含む）の進捗を共有する Web サイトを作りました。下記の URL からアクセスできます。実装には Hono を使用しています*10。

https://sotsuron.yokohama.dev/

トップが 31 ページで早くも圧力を掛けられている

私も学部 4 年となり、来春には筑波大学を卒業*11する運びとなりました。ところで卒業をするには卒論を書かねばならず、年末年始も休みなく LaTeX とにらめっこしています（メ創の卒論締切は 2/3）。この苦行を少しでもエンタメ性のあるものにしたいと着想したのが理由です。

とはいえ、進捗を生む度に逐次 Web サイトを GUI から更新するのは面倒なので、情報更新用のエンドポイントのみを用意し、API を叩いて更新してもらうことにしました*12。理系であれば LaTeX を使用すると思うので、latexmk や Git Hooks に curl コマンドをにゅっと忍ばせておけば更新も自動化できます。DX ですね！

忘年会の場で sotsuron.yokohama.dev！と連呼することで既に何人かの友人に使ってもらえたのですが、「Docker 環境には pdfinfo がないので動かない」「章ごとに分割して書いているので数ページしか進捗がないと勘違いされてしまう」といった問題も発生しているようです。これらについても、空いた時間に対応していければと思います。なお、ソースコードは以下の GitHub に公開しています。

github.com

むすびにかえて

今年は卒研に追われて個人開発に取り組む時間があまり取れず、加えて研究領域も実装がそれほど重視されない分野に進んでしまったため、全体的に開発から遠ざかった一年となりました。最近は（特に書き捨てるようなプログラムの場合）ChatGPT にコードを生成してもらうことも多いのですが、それでもやはり自分でコードを書く行為は楽しいので、来年は上手く時間を捻出しつつ、自分で使いたくなるもの*13を楽しく作っていきたいなと思っています。

2024 年も残すところ僅かとなりました。みなさん、どうぞ良いお年をお迎えください！

*1:今年、NISA は 63 万円ほど投資して 7,000 円程度の利益しかでていない

*2:銅鑼はインタフェースとしての役割を担っているため、投資先は叩く位置によって当然変わる

*3:学部 4 年になってから本当に余裕がなく個人開発に手が回っていない

*4:発表あるある：手元の PC と HDMI 端末の相性が悪い

*5:発表あるある：ネットが繋がらなくなる

*6:PDF に書き出して PDF.js で読み込んでも良かったかも

*7:Fullscreen API は当該タブを最大化するのみならず、要素を全画面にすることもできます

*8:恥ずかしながら初めて知った

*9:自作ツールあるある：デモで動かない

*10:アカウント登録ページだけ静的アセットとして配信しており、SPA もどきの謎構成になってしまった

*11:卒業のモチベは「筑波大学を卒業しました」というエントリを書くこと以外にない

*12:curl を叩けるかの試金石になっている

*13:先程話題に上がった WISS の記念講演で増井先生（フリック入力や Scrapbox の開発者）がお話をされていました。増井先生の有名なエントリに「自分が使わないものを発表するな」というエントリがあり、まさしくその通りだなと感じています

スライドに適した「ニュートラルでデフォルト感のない」フォントを考える

先日，深夜に友人と話している際に「スライドのフォントに結局 Noto Sans（≒ 源ノ角ゴシック）を選んでしまう」という話題が出ました*1．Noto Sans がオープンソースであり，Google スライド等のアプリケーションで最初から使用できるという理由も勿論あるのですが，個人的にはそれだけが理由でないように感じます．

ときに，プレゼンテーション用のスライドにはどのような書体が適しているのでしょうか？ 遠くから見えるように，視認性が高いフォントを使いましょう！ ――という教科書的な回答はさておき，これは結構難しい問題に思えます．というのも（特に，洒落た発表ではなく研究発表のようにお堅い）スライドは，視認性のほかに，ある主の無味乾燥さが求められるように感じるからです．個人的には，「視認性」「ニュートラルさ」「デフォルト感がない」の 3 つを兼ね備えた書体が適切であると感じています．このあたりに関して雑感を書いてみます．

*1:Morisawa Fonts，LETS，Adobe Fonts の書体群も使用可能な環境の中，あえて

続きを読む

「安達としまむら」聖地巡礼記（岐阜編）

聖地巡礼

先月に旅行がてら「安達としまむら」の聖地巡礼に行ってきました。同作では女子高生である安達としまむらの尊き日常が、岐阜県本巣市を舞台に描かれます。岐阜・名古屋の聖地を一日掛けて丁寧に取材してきたので、写真とともにお伝えしていければと思います。

続きを読む

2023 年を振り返って

年の瀬ですね。今年も 12/30、31 と東京ビッグサイト（東京都江東区）で開催されたコミックマーケット 103 に参戦してきました。忘年会と冬コミ参戦が連続する非常に良い年末を過ごせたと感じています。

――2023年が終わります。大晦日は一年の振り返りをするのが恒例*1となりつつあるので、待機列に並びながら昨年同様、本エントリを書き上げています。振り返り記事を後で見返す機会は意外にも多く、折に触れて自分は昨年末に何を考えて／何を目標としていたかを参照する際の便利な道標となるものです*2。

*1:どうも私は例年同じ行動を取りたがる傾向にあるらしい

*2:春に軽く書いたエントリと被る点もあるので、物好きの方はそちらも参照してみてください

続きを読む