はてなブックマーク

はじめに 年の瀬ですね。X（旧 Twitter）のタイムラインが組版の話で盛り上がっていたため、自分も軽く参画したところ思いのほかアツくなってしまい、今なお組版への熱が失われていなかったことを再確認した 12 月初旬です。 さて、春先に TypeScript 上にてプログラマブルに作動する日本語組版処理システム（以下、仮称として minitype を用います）を構想し、数週間掛けてプロトタイプの実装を行っていました。ところが、今年度に入って個人開発にリソースを割く余裕がなくなり、宙ぶらりんな状態のまま年末を迎えてしまいました。まだ開発途中ではありますが[1]、折角なので「日本語組版処理システムの夢[2]」としてアイデアを供養するとともに、具体的なプロトタイプの実装を示したいと思います[3]。 実装についてはソースコードを見ていただくとして、本記事では特に「ユーザがどのような記述をするとどの

はじめに 近年，TikTok や YouTube Shorts，Instagram のリール等で散見される縦動画が流行しています．これらのアプリケーションでは，縦にスワイプをすることで動画が次から次へと流れるようになっており，なかなかに UX が良いです．多くの場合，この UI はネイティブアプリとして実装されますが，Web においても scroll-snap-type プロパティおよび Interaction Observer API を用いることで，簡単に実装することができます． 実装 Vite，TypeScript，React，Emotion を用いて実装します． 縦スワイプでスナップさせる CSS 複数の Content を包含する Wrapper を想定します．全画面で表示させるため，どちらの要素もサイズは 100vw, 100dvh に設定します．Wrapper は overf

日々生活するにつれゴミが溜まるのは日常も PC も大差ないのですが，特に macOS は不要なキャッシュファイルが溜まりやすいと感じます．ディスク容量が逼迫し続け 10 GB を切り，いよいよ Photoshop も開けなくなってきたので，不要なファイルを 60 GB 分削除しました．以下メモです． 便利コマンド # ルートから 5 個下の階層までに存在する，100 MB 以上のファイルを検索 sudo du -x -m -d 5 / | awk '$1 >= 100{print}' # 現在のディレクトリ以下に存在する，50 MB 以上のファイルを検索 du -x -m | awk '$1 >= 50{print}' # ディレクトリを削除する rm -rf

halt と hmtx を見る Windows に標準搭載される Yu Gothic UI や游ゴシックには、GPOS テーブルに halt 機能タグが含まれている。 halt 機能タグの正式名称は「字幅半角メトリクス」であり、全角の約物を半角として扱う際などに位置を補正する役割を持つ。text-spacing-trim プロパティの実装においても、この halt の値を見て文字詰めを決定している。 TTX（fontTools が提供する解析ツール）を用いて、Yu Gothic UI／游ゴシック の halt と hmtx（水平方向のレイアウト情報）を値をダンプしてみる。 ttx -t GPOS YuGothicUI-Regular.ttf ttx -t GPOS YuGothic-Medium.ttf ttx -t hmtx YuGothicUI-Regular.ttf ttx -t h

Chrome の挙動を見てみる 百聞は一見に如かずと言いますので、実際の挙動を見てみます。以下の図では、text-align: justify を指定したテキストボックスに対し、上段には space-first を、下段には従来の挙動である space-all を設定しています。上段は下段に比べて、自然な組版が実現されていることが見て取れます。 文章は 京葉線 - Wikipedia を改変して使用。CC BY-SA 画像からは、以下の挙動が確認できます。 行頭の括弧（橙色） 1 行目のみアキが残り、2 行目以降は行頭のアキが詰まる（space-first であるため） 連続する約物（ピンク色、青色、緑色） 読点→句点、閉じ括弧→閉じ括弧ではアキなし、中黒→括弧、閉じ括弧→開き括弧では二分（1/2）–全角程度のアキに調整される 行末の閉じ括弧（青色） 必要に応じて行末のアキが詰まる 行末の

TL;DR Branch protection rules として「PR のマージ前に code owner からのレビューを必須」に設定しているリポジトリを想定します。このリポジトリにて GitHub Actions から PR を作成し、テスト通過後に自動でマージしたい場合に、以下の手順を踏むと上手く作動しました。 ワークフローから以下の操作を実行する GitHub Actions として PR を作成する PAT（Personal Access Token）を介して、code owner として auto-merge を有効にする 作成した PR に code owner としてラベルを付与する labeled をトリガとする別のワークフローから、code owner として当該 PR を approve する 経緯 我々が運用するシラバスのミラーサイト（KdB もどき）では、Git

最近 Web 上で写真をサッと管理するためのアプリケーションを Cloudflare 上で構築しているのですが、その際に Cloudflare Workers, KV を用いて GitHub アカウントを用いたアクセス制御を行う機会があったのでそのメモです。 認証の流れ GitHub アカウントと連携する場合は OAuth 2.0 を利用するため、クライアント側では次の流れを踏みます。 state パラメータを生成し、https://github.com/login/oauth/authorize?client_id=<id>&state=<state>（認可エンドポイント）へ遷移 GitHub 上の認可画面で、ユーザにアカウント連携の承認を求める。これが許可されると、事前に指定した（Workers 上の）コールバック URL にリダイレクトされる Workers：state パラメータを

はじめに 年の瀬ですね。何かと話題の mast Advent Calendar 2022 も 21 日目を迎えました[1]。 20 日目の記事は AMY🌮 さんの「University of Wisconsin-Madisonってどこ！」でした。続く 23 日目の記事はしょあさんの「プログラミング課題不正回答を防ぐ手法の提言」です[2]。 さて、mast というのは筑波大学[3]情報学群情報メディア創成学類[4]の略称です。 筑波大学の情報系は入学して 1 年間は殆ど情報系の実習を行わないのですが、2 年次になると春先から唐突に C 言語を書かされる授業が乱発[5]し、その結果「インターネットの大海原から拾ってきたコードを継ぎ接ぎで合わせてみたら大量のエラーが出てきたよ〜〜たすけて〜〜」みたいな人が跡を絶ちません。 本稿ではそうした状況を回避するべく、プログラミングの初学者でも取り敢えず

年の瀬ですね。こんにちは、いなにわうどん（@kyoto_mast21）です。 11 月 5, 6 日に、筑波大学では雙峰祭（そうほうさい）と呼ばれる学園祭が開催されました。私は雙峰祭 Web サイトのフロントエンドのデザインや実装を主に担当したので、その工夫や裏話的なものを少しお話しできればと思います。 Web サイトの開発光景 本稿は 学園祭非公式 Advent Calendar 2022 の 14 日目の記事です。12 日目の担当は issy さんでした[1]。 背景 学園祭の運営を担う筑波大学学園祭実行委員会には、情報メディアシステム局[2]（以下、jsys）と呼ばれる部門が存在しています。jsys では、学園祭で使用する映像の制作・生中継[3]等に加え、学園祭運営に必要な各種システムや Web サイトの内製を担当しています。 例年、雙峰祭の前後 1 ヶ月程度は、その年のテーマに合わ

フォントのパスデータはどこにある? 前回の拙記事にて解説したとおり、OpenType は内部構造として PostScript をアウトライン構造に持つものと、TrueType を由来とするものの 2 種類に分かれ、前者の場合は OpenType 形式の中に CFF (Compact File Format) 形式のデータが内包される形となるため、解読に多大な労力が必要となります。 CFF 形式において、フォントの中核であるパスデータは CharStrings に格納されているのですが、この CharString はさらに、CFF と併せて使用することを想定した Type 2 と呼ばれる別のフォーマットにて記述されています。 本稿では Type2 の仕様を概説した上で、OpenType フォントからをパスデータを実際に描画してみることを目的とします。OpenType 及び CFF のファイル

Adobe Illustrator でルビ振りを行うスクリプト illustrator-ruby を公開しました。 Illustrator は標準でルビ機能に対応しておらず、ルビを振るには手動で一文字ずつテキストを調節するなど、極めて煩雑な作業が要求されます。本スクリプトを用いることでルビのサイズや揃え位置、進入処理・アキ挿入の自動実施や熟語ルビといった高度な指定を交えながら、ルビ処理を一括で実施することができます。 図 1：illustrator-ruby で夏目漱石「夢十夜」にルビを自動で振った例 主に、以下の機能に対応しています。 縦書き・横書きテキストでのモノルビ、熟語ルビ、グループルビ ルビの揃え位置の調整（肩付き、中付き、JIS(1-2-1)、右・下揃え） ルビの長体・平体による自動調整、進入処理・アキ挿入の有無 ルビのサイズ、オフセット、フォントの指定 捨て仮名への自動変換

この記事も例に漏れず、Web における組版は 1 段組みを基本としており、テキストが延々と下に伸びていく単調なレイアウトが主流です。 しかしながら新聞や雑誌等の組版を見つめ直すと、ブラウザでは実装されることのない縦横無尽に動き回るグリッドの配置、テキストの流し込みが当たり前のように実現されています。こうした自在な組版、Web でぜひ実現してみたいと感じませんか……？ できたもの 図 1: Web で新聞のような組版が実現されたスクリーンショット 図 1 の通り、新聞風のレイアウトを実現しています。 Web で自在なテキストレイアウトは不可能？ CSS3 にて導入された columns プロパティ は、ブラウザ上で段組みを用いたコンテンツの表示を実現します。論文のスタイルでよく見かけるアレですね。ところが、CSS3 の段組みの仕様には「段の高さが揃っていなければならない」[1]と規定があるこ