いなにわうどん

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

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

あけましておめでとうございます。新年早々から昨年の話になってしまうのですが、去る 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 ベースの独自組版エンジンを採用しました。ただし本エンジンではグラフィカルな装飾を行うことはまだ難しいため、各記事 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」に関するリポジトリ

前々日

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

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

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

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

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

https://x.com/kino_king_1996/status/2005399210301219012

前日

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

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

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

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

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

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

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

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

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

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

当日

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

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

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

サークルチケット

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

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

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

開場

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 有明店様本当にありがとうございます。

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

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

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

え

……なんか列できてるな

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

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

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

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

各種まとめ

タイムライン

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

日付 できごと
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 円赤字が出るというのはちょっと考えものです。改めて振り返ると売価をもう少し上げても良かった気がしますし*17、最初から 100 部単位で製本する or 早めに入稿する等でも防げた気はします。

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

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

むすびに

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

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

inaniwaudon.booth.pm

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

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

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

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

*3:京極夏彦氏みたい

*4:筑波大学の学園祭

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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:春に軽く書いたエントリと被る点もあるので、物好きの方はそちらも参照してみてください

続きを読む

雙峰祭でそば焼いたらやきそばになってワロタ

本記事は、mast Advent Calendar 2023*1 の 23 日目の記事です。22 日目はびきさんの記事「こういうところ、好き！｜びき」でした。横浜近辺のエモい写真が沢山出てくるので必読です。彼はめちゃくちゃ良い写真を撮るな〜と一年次の頃から思っていて、気が付けば自分も富士フイルムのカメラをポチっていました。

 

年の瀬ですね。こんにちは、いなにわうどんです。突然ですが、今年の 11 月 3, 4 日に開催された筑波大学学園祭「雙峰祭」にて、私は有志団体として模擬店「驚額の殿堂」を出店し、友人らとやきそばを調理して 150 円で販売しました。

企画を実施するにあたって、我々は「美味しいやきそばを焼いて、とにかく安く売ること」を第一の目標に定めて準備を進めてきました。その結果、当日は大盛況のうちに幕を閉じ、目標は十分に達成されたと思います。本記事では、雙峰祭にやきそば屋を出店するまでの経緯や準備過程、当日の様子、得られた反響などを企画代表者の視点からお伝えしていきます。

続きを読む