2008年の論理ドリルプログラムLogiColaのリバースエンジニアリング

オリジナルの処方箋に戻る

2008年のオリジナル版をリバースエンジニアリングして見つけたものを基に、LogiColaの新しいデザイン言語を構築しています。

2年前、私はGensler教授の功績を維持し、あらゆるデバイスやオペレーティングシステムを使用する学生が利用できる、よりアクセスしやすいソリューションを導入することを目標に、LogiColaのアップデート版のデザインとリリースに着手しました。オリジナル版はWindows向けに構築されていたため、多くの学生が利用できませんでした。

今日、多くの学生がChromebookやモバイルデバイスを使用しています。8月には、アジアの100台以上のデバイスが1週間でLogiCola 3にアクセスし、そのうち72台が少なくとも1つの演習を行いました。そのうち66台はフィリピンからのものでした。その半数以上がスマートフォンやタブレットでした。これは私が熱意をもって受け止めているシグナルです。この製品は、2024年に私が立てた当初の約束を果たしているようです。

本日、Hacker Newsのディスカッション、GitHubのイシュー、およびメールを通じて共有されたフィードバックに応える新しいバージョンをリリースします。このリリースでは、無限の翻訳ドリルによる「マスタリーラーニング」を復活させ、オリジナルのソフトウェアの遊び心に私自身のタッチを加えて組み込んでいます。

ソウルを吸い取るデザインについて

ランディングページは間違った目標を優先し、論理ドリルよりもメール購読フォームを通じたユーザー獲得に重点を置いていました。

他のコメント投稿者も、デザインが「あまりにもモダンで場違い」だと指摘していました。私の最初の再設計は、LogiCola 3をエンタープライズソフトウェアのように感じさせ、古いインターフェースの活気からかけ離れたものにしていました。

ポートをモダンなルックでモダンに見せるのは理にかなっています。それが生み出すソウルを吸い取るような感覚は、モダンなルックの動機から来ており、それは作者だけのせいではなく、私たちが現在生きている「すべてを市場に出し、売る」という時代のせいなのです。

リフレッシュごとに変わるカラフルな背景は、オリジナルのブランドの決定的な要素の1つでした。オリジナルの色使いを借用しましたが、各セットにユニークなパレットを割り当てました。三段論法と命題論理は異なる色を帯びています。これにより、常に自分がどこにいるかがわかります。

2008年のプログラムにあったカラーダイアログは、9つのカラーテーマを表示し、それぞれに3つの深度（パステル、モデレート、ディープ）があります。ここでは6つのテーマを、背景、パネル、フッターに沿ったダークバンドとともに示します。サイコロを振ってランダムなものを見て、3つの深度を試してみてください。

深度

テーマ

前の画面と比べて、各演習を開くために使用されていた画面はこちらです。スライダーをドラッグして比較してください。

［画像: 演習を開く画面 — 現在］

［画像: 演習を開く画面 — 以前］

古い見出し「Ready for a challenge?」と説明は、カーンアカデミーから直接引用したものでした。各セットは同じ画面を特徴としていましたが、それは論理演習の提供に焦点を当てたリリースのアフターソートでした。新しいクイズウィンドウは、進む前に、どのセットでどのような種類の論理ドリルを行っているかというコンテキストを提供します。

ドリルは現在フロントページにあるため、1つ選んですぐに開始できます。

［画像: LogiColaのフロントページ — 現在］

［画像: LogiColaのフロントページ — 以前］

オリジナルはどのように色を作成したか

前のセクションの小さな各画面は、プログラムが実際の画面を構成する方法と同じように、手作業で選ばれたのではなく計算された色で構成されています。各パステルは、飽和した色相を明るくしたものです。各ペアは、RGBカラーホイール上で補色を設定します：アクアとローズ、ブルーとクリーム、ライムとマゼンタ。そして、下部のダークストリップは、背景色をInvertRect（長方形の各ピクセルの色値を論理NOT演算するWindows描画関数）に通したものです。すべてのビットが反転します。バイト単位では、FFから引くのと同じです：FF - CD = 32、FF - 00 = FF。ストリップは、それ自体の背景の完全な補色であり、黒いタイトルテキストは同じ規則で白になります。

デコンパイルされたルーチンから再構築された、全体のスキームを以下に示します。

level      = 0xCD                    # Pastel (0xB9 Moderate, 0x91 Deep)
background = rgb(level, 0xFF, 0xFF)  # Aqua
panel      = rgb(0xFF, level, level) # Rose
band       = ~background             # InvertRect

深度を変更すると、levelのみが変更されます。固定されたFFチャンネルは移動しないため、より深いスキームは濁るのではなく、より鮮やかになります。バンドは背景の動きに合わせて追従します。

新しい色はどのように選ばれたか

友人と話しているときに、私はGensler氏ではないため、LogiCola 3にオリジナルのような全く同じ声を与えることは決してできないことに気づきました。そのため、カーボンコピーを作る代わりに、遺産を尊重しながら、私自身の印を残すことにしました。昨冬は、Gucci、Chanel、Dior、Louis Vuittonのような、同名のファッションハウスに関する本を読みました。シャネルにはわずか3人の公式な後継者がいました。彼らがどのように運営し、元のソースからどのようにインスピレーションを得ながらブランドを関連性を保ち、新しい製品を著したかを読むことは、私が同様の帽子をかぶることを emboldened させました。

オリジナルの雰囲気を醸し出しつつ、新しい興奮をもたらす色を選びたかったのです。そして、各セットが韻を踏むようにしながらも、区別できるほど十分に異なるものにしたいと思っていました。カラーテーマは、全体として、また単独でうまく機能する必要がありました。

Ruxandra Duruは、2つの色の組み合わせがどれだけの刺激を生み出すかに基づいて、2つの色を組み合わせるための素晴らしいツールキットを著しました。後に、Brian Liと共に、選択した刺激量に基づいて色のペアを提案するツールを開発しました。これはまさに私がやろうとしていたことだったので、その背後にあるモデルを移植し、実験を開始しました。

刺激は3つの項から成り立っています：全体の強度、2つの色の間の明るさのギャップ、およびそれらの色相間の距離。最終結果は、睡眠昏睡から超興奮までの範囲で、ペアがどれだけの視覚的興奮を生み出すかを示します。私は、両極端の中間のペアを作成することを目指しました。

各セットのカラーテーマを関連性があるようにするために、0.45〜0.58の刺激間隔内のペアを選択しました。すべての色相に白を加えて柔らかくし、プラットフォームを遊び心がありながらも重すぎないようにするために、暗い表面よりも明るい表面を好みました。セット間のより強い結束を作成するために、他のセットの色を表面に表示するパターンでペイントしました。以下のカラーラボで試すことができます。

表面

インク

アクセント

開始位置

提案

候補
提案ボタンを押すと、この行が埋まります。

パターン

あなたのセット

意味と定義

定義に何が間違っているかを見つけてください — 広すぎる、狭すぎる、循環している、あるいはもっと悪い。

σ強度
0.44
ΔL
0.78
色相Δ
135°
刺激
0.583
振動
0.00
温度
ぬるい + クール
表面上のインク
12.67:1AA

このスコアには、学習ツールにとって重要な1つの盲点があります：それは可読性について何も知りません。ペアが間隔内にあっても読みにくい場合があり、友人に製品を見せたときに指摘されました。そのため、まずコントラストをチェックし、WCAG AAの4.5:1の基準をクリアしたペアのみを保持しました。

ピクセルはどこから来るのか

LogiCola 3に個性を与えるために私が借用したもう1つの要素は、私がCODE University in Berlinで学生だった頃のVitor Abreuによるオリジナルのデザインでした。Vitorはロゴとソーシャルメディア用のアセットをデザインしました。

私の友人Vitorが思い描いたブランドはレトロな雰囲気を持っていました。ロゴは、ソーダ缶のピクセル化によって固定されています。私はそのディテールに頼って、ボタンからアイコンまで、新しいユーザーインターフェースのあらゆる側面を形作りました。ソーシャルメディアカバーには、丸みを帯びた長方形のパターンが使用されていました。新しいパターンは、古いパターンのアイデアを維持し、形状をピクセル化しています。新しい色は、カラーセクションでクリックしたものです。

［画像: LogiColaのX（旧Twitter）プロフィール — 現在］

［画像: LogiColaのX（旧Twitter）プロフィール — 以前］

2024年に選ばれたカラーテーマ（ゴールド、バイオレット、グリーン、レッド）は、カトリック教会によく関連付けられる色相に触発されていました。論理は、何世紀にもわたってカトリック教育のコアカリキュラムの基礎的な部分であり、製品を使用する多くの学生はカトリック教徒でした。Gensler氏自身もイエズス会司祭でした。それは楽しいオマージュでしたが、ブランドをより一貫性のあるものにするために、それを廃止しました。

ソーシャルメディアカバーは、ブランドの表現力を高め、すべてをまとめるために、パターンデザインをより深く探求するきっかけとなりました。各演習は現在、パターンで開かれます。簡単で難しいドリルは異なるパターンを持っているため、区別できます。

パターンの選択プロセスは数日と複数のイテレーションを要しました。生き残ったジェネレーターは以下の通りです。現在3つが使用されています。

セット

スケール

クロップ

選択済み

カモ · クラシック閾値ノイズ：ペイントプログラムのカモタイル。簡単なセットをドレスアップします。

レトロなユーザーインターフェースのデザイン

HackerNoonには、初期のパーソナルコンピュータ時代の本質を捉えたオープンソースのピクセルアイコンライブラリがあります。LogiColaはそれらにとって完璧な場所でした。SVGファイルは、インターネット接続が遅い、または限られている場所でも、アプリを軽量でパフォーマンスの高いものにするのに役立ちました。

［画像: LogiColaが使用するピクセルグリフ、および拡大されたそのうちの1つ］

GoogleのMaterial Shape Libraryを参照して、形状をどのように使用してインターフェースに思慮深いフレアを追加できるかを検討しました。ピクセル化されたアーティファクトを使用するという決定に従い、Googleの形状を再描画しました。結果は以下の通りです。

セルサイズ

• 円
• 四角
• 斜め
• アーチ
• ファン
• 矢印
• 半円
• 楕円
• ピル
• 三角
• ダイヤモンド選択済み
• クラムシェル
• 五角形
• ジェム
• サニー
• ベリーサニー
• 4辺のクッキー
• 6辺のクッキー
• 7辺のクッキー
• 9辺のクッキー
• 12辺のクッキー
• ゴースト風
• 4つ葉のクローバー
• 8つ葉のクローバー
• バースト
• ソフトバースト
• ブーム
• ソフトブーム
• フラワー
• パフィー
• パフィーダイヤモンド
• ピクセル円
• ピクセル三角形
• バン
• ハート

4pxセル、横に24個：アプリが描画するグリッド。

このアプローチを通じて、プラットフォーム全体で新しいコンテンツを示すために使用されるボタンやバッジなどのコンポーネントにたどり着きました。複数の形状を検討し、しばらくの間それらと向き合いました。最終的に、横向きに回転させて単語を保持するように引き伸ばしたダイヤモンドを選択しました。

［画像: 4つの新しいバッジシルエット：ピル、ピクセルピル、リップ付きスプライト、ダイヤモンド］

ここでは、さまざまな形状でのプライマリボタンを示します。

選択済み缶の角をまっすぐに描画：4pxグリッド上の2段の階段、丸みがラスター化されて削除されています。NEWバッジで生まれ、それ以来、すべてのドリルでプライマリボタンになっています。

インストールするか、オフラインで使用する

LogiColaをどこでも利用できるようにするという約束に従い、今回はモバイル版とデスクトップ版により注意を払いました。デバイスにLogiColaをインストールできるようになり、一度開いていれば、インターネット接続がない場合でも論理ドリルを練習できます。以前と同様にブラウザを使用できます。

LogiCola 3をモバイルで動作させるための努力のほとんどは以前に行われました。しかし、オフラインモードは適切に実装されていませんでした。この機会を利用してアプリを洗練させ、叫ぶ必要なく他のアプリの中でも際立つことができるアイコンを導入しました。

［画像: インストールされたアプリのアイコン、変更前と変更後］

Vitorは2024年に3つのアイコンをデザインしました：泡のあるソーダ缶、現在ブラウザタブにあるシンプルなソーダ缶、そしてロゴタイプです。以下は、今日使用されているものに落ち着く前に私が試したバリエーションの一部です。

［画像: 8つのカラーペアのドックサイズ全体にわたる3つのマーク：2024年の泡入り缶、ファビコン缶、ワードマーク、選択されたセルにマーク付き］

より良いフィードバック

混乱のもう1つの原因は、クイズの選択肢が回答を送信した後にどのようにマークされるかでした。間違った選択肢すべてに同じ赤いアウトラインを付けました。これは、実際にあなたが選択したものを区別することが不可能であることを意味しました。多くの選択肢が赤くなるのを見るのも落胆しました。

Hacker Newsのユーザーが指摘したように：

テストの1つを受けているのですが、フィードバックが奇妙です。選択した回答が緑色になるため正解したように見えますが、他の多くの回答が赤色（通常は失敗を示す）になり、選択されていない回答も緑色になります。混乱します。

そのコメントが書かれた画面と、現在の同じ画面を以下に示します。

［画像: Set Qの質問画面 — 現在］

［画像: Set Qの質問画面 — 以前］

間違った選択肢を選んだ場合、視覚的な合図は色を超えて、その選択肢に別の形状（X）でマークすることを含みます。そして、すぐに答えが明らかになるのではなく、もう一度試すことができます。

現在のオプションの状態は以下のようになります。

［画像: オプションの4つの状態、それらが属する2つの瞬間に］

LogiColaの以前のバージョンの制限の1つは、複数のオプションを選択するサポートの欠如でした。定義（Set Q）は複数の方法で間違っている可能性がありますが、1つしか選択できませんでした。現在では複数の正解を選択でき、質問がそれを許可している場合に演習が通知します。

いくつかのクイズの質問は複数の選択された回答を必要としますが、1つしか選択できません… — issue #47。

［画像: Set Qを携帯電話で、2つの回答、選択済み］［画像: Set Qを携帯電話で、2つの回答、チェック済み］

上記は、現在モバイルで回答を選択およびチェックする方法を示しています。そのイシューが提起されたのと同じセットであるSet Qはライブです。試してみてください。

各セットのガイド

別の本で論理を学んだ人にとって、ページ上の何も、well-formed formula（wff、その論理システム構文規則に従う公式）が何であるかを示していませんでした。

括弧はいくつかのコメントを引き起こしました。

論理表現をどのように正規化または区別するかを確認すると良いでしょう。(…) これらのペアは同じですが、余分な括弧はステートメントの意味を変えませんが、余分な括弧を持つものだけが正解としてマークされます。

問題のペアは (R ^ L) v N で、誤りとマークされました。一方、((R ^ L) v N) は正解とマークされました。Genslerのシステムでは、すべての二項連結子は独自の括弧を取ります。したがって、2つの式は、このシステムでは同じ公式ではありません。1つはwell-formedで、もう1つはそうではありません。論理演算子の優先順位について学んだことのない学生は、2つのwffをラップして結合することができ、間違いを犯すことはありません。

ほとんどのセットには、表記法や演習の完了に不可欠な概念を理解したいときにいつでも確認できる参照ガイドがあります。

ガイドは質問の横に開き、リサイズ可能なので、演習に集中し、フローを中断することなく有効な回答の形状を理解できます。

より良いアクセシビリティ

LogiColaをよりアクセスしやすくすることを目指していましたが、私の考慮は地理、オペレーティングシステム、インターネット接続を超えませんでした。

メニューがスクリーンリーダーを無視していたため、多くの人がドリルに全く到達できませんでした。

Windowsでスクリーンリーダーを使用しています。Webページでチャプターボタンを押しても何も起こらないので、ウェブサイトをどのようにテストすればよいか不明です。

ポインターが外れるとナビゲーションも消えました。

ボタンはホバーのみのようで、これは悪いことです。さらに、コンテンツを下方に展開してチャプターを表示しますが、カーソルを上に移動してから下に移動する（または下に移動してから上に移動するのではなく）と、ホバー領域から外れて閉じます。ホバー領域の境界の視覚的な表示がありません。

ナビゲーションは実際のメニューになりました。リンクのリストを開くボタンで、キーボードから操作でき、スクリーンリーダーにそれが何であるかを伝えます。

同じ標準がドリル内にも適用されるようになりました。各セットの色は、許可される前にコントラストがチェックされました。間違った選択は、形状と色の両方でマークされます。まだ対処していないアクセシビリティの課題はたくさんありますが、皆様のフィードバックのおかげで、それらを認識しています。

無限に生成される質問

Hacker Newsのコメント投稿者の1人が、プラットフォームが言語論理と哲学的論理に焦点を当てすぎており、数学的論理に対処していないと指摘しました。当時は、命題論理の翻訳と非形式論理（意味と定義）の演習のみがオンラインでした。それ以来、三段論法、様相論理、義務論理、信念論理の翻訳をミックスに追加しました。

2025年までに構築されたすべては手作業で行われ、オリジナルのソフトウェアとGenslerの教科書を間近で研究する必要がありました。Routledgeは私に教科書の現物を送ってくれました。そして、GhidraとAIツールを使って2008年のプログラムをリバースエンジニアリングすることで、オリジナルのプログラムに対する理解を深め、無限の翻訳練習を提供し、間違いを犯すたびにすぐに説明してくれるジェネレーターを作成しました。

翻訳ドリルは現在、テンプレートで実行されます。ほとんどは、2008年のデコードされたソースコードから学んだものです。オリジナルのプログラムのギャップに基づいて私が作成した新しいテンプレートもあります。以下は、Set Cの34のテンプレートのうち、プログラムが保存している形式の1つです。

*21 R:Gk.Only if you’re $B are you $D.Only if $j, $q
                # template 21, an untraced R:Gk., then the two prompts
c:a($q ⊃ $j)    # the options begin; a is the answer
b($j ≡ $q)
d$j ⊃ $q        # d, the bare formula
c($d)           # c is d, wrapped
R(~$j ⊃ ~$q)    # the contrapositive of a; untraced
j:y             # a jump: the record ends

$Bと$Dは形容詞で、毎回新しく描画されます。それらの最初の文字が$jと$qになります。私はこのようなレコードをデコードし、それぞれを、毎回新しい名前を描画するジェネレーターとして再構築しました。ルール、選択肢、ヒントは彼のままです。別のものを描画を押してください。

固定長のクイズはなくなりました。オリジナルのように機能するポイントシステムに置き換えられました。回答するとスコアが上がり、ミスするとスコアが下がり、100ポイントに達するまで終了しません。

この形状は学習文献に名前があります：マスタリーラーニング。Bloomが1968年に提唱した考え方です。その後のメタ分析（Kulik, Kulik and Bangert-Drowns, 1990）では、マスタリーベースのコースが試験成績を約半標準偏差向上させ、最も弱い学生が最大の利益を得ることがわかりました。

インターフェースにはプログレスバーが追加され、進捗状況がわかるようになりました。個性を注入し、プラットフォームをより生き生きと感じさせるために、Mega ManやStreet Fighterのようなビデオゲームに触発されたマイクロトランジションとアニメーションを導入しました。

AIツールでプロトタイプを作成した6つの方向性を以下に示します。ミスを押して試してみてください。

64 pts

ヒットフラッシュ Mega Man i-frames2回のオフパルス・340msのハードカット→ドロップ500msクォートMega Man i-frames・Zelda — Link's hit flicker・Castlevania

製品に採用された決定を下すために、対面テストを実施し、人々の反応を測ろうとしました。いくつかのイテレーションを経て、オプションA（ダメージを受けた後のフラッシュ）が採用されました。デスクトップ版とモバイル版の両方で確認できます。

地図のない保存の努力として始まったものは、オリジナルの処方箋から構築された近代化へと発展しました。LogiCola 3は新しいデザイン要素を獲得しましたが、新しいテンプレートと、ドリルで使用される言語が2026年の学生にとってより関連性の高いものになる語彙の改訂も獲得しました。利用可能なAIツールと皆様のサポートのおかげで、私の快適ゾーンから大きく外れた領域に足を踏み入れました。

感謝

このリリースは、Hacker Newsのgmdrd、Jtsummers、dexwiz、gostsamo、auggierose、gorjusborg、GitHubのboxed、mnba、tessprime、rabufといった人々が時間を割いてフィードバックを書き、共有してくれたおかげで存在します。

Vitor AbreuとOlena Diakonovaは、この作品が基盤を築くブランドの基礎を築きました。Ruxandra Duruは私の色彩理論の理解を深め、Emil Kowalskiはアニメーションの作成方法を教えてくれました。CODE Universityの教授であるFlorian GroteとSebastian Rosengrünは、学生時代にフィードバックと励ましを与えてくれ、Ben Bachemは初期のドラフトを読んでくれました。RoutledgeからAndrew Beckが送ってくれた教科書、Timothy Kearns教授からの寛大な寄付、そしてLaurieWiredが開始しBenjamin Ethingtonが拡張したGhidra MCPサーバーなしでは、このプラットフォームは存在しなかったでしょう。

ピクセルアイコンはHackerNoonのものです。LogiColaは、数式のためにKhan AcademyのKaTeXで構築されており、このブログはSebastian SdorraのContent Collectionsで構築されています。