<!doctype html><html lang="ja"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CaraChat – 2000年代のCaramailチャットをPHPで再現（無料・オンライン）</title> <meta name="description" content="CaraChatは、2002年のCaramailチャットクライアントをPHPで再現しました。ルーム、プライベートチャット、色付きニックネーム、レインボーと波の文字、そして当時のまま描かれたスマイリー。無料でブラウザから使えます。"> <link rel="canonical" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="fr" href="https://{{DOMAIN}}/"> <link rel="alternate" hreflang="en" href="https://{{DOMAIN}}/en/"> <link rel="alternate" hreflang="es" href="https://{{DOMAIN}}/es/"> <link rel="alternate" hreflang="de" href="https://{{DOMAIN}}/de/"> <link rel="alternate" hreflang="it" href="https://{{DOMAIN}}/it/"> <link rel="alternate" hreflang="pt" href="https://{{DOMAIN}}/pt/"> <link rel="alternate" hreflang="nl" href="https://{{DOMAIN}}/nl/"> <link rel="alternate" hreflang="pl" href="https://{{DOMAIN}}/pl/"> <link rel="alternate" hreflang="ru" href="https://{{DOMAIN}}/ru/"> <link rel="alternate" hreflang="uk" href="https://{{DOMAIN}}/uk/"> <link rel="alternate" hreflang="tr" href="https://{{DOMAIN}}/tr/"> <link rel="alternate" hreflang="ja" href="https://{{DOMAIN}}/ja/"> <link rel="alternate" hreflang="zh" href="https://{{DOMAIN}}/zh/"> <link rel="alternate" hreflang="ko" href="https://{{DOMAIN}}/ko/"> <link rel="alternate" hreflang="x-default" href="https://{{DOMAIN}}/"> <link rel="icon" href="../images/favicon.png"> <meta property="og:type" content="website"> <meta property="og:title" content="CaraChat – 2000年代のCaramailチャット"> <meta property="og:description" content="ルーム、プライベートチャット、色、レインボー、そしてオリジナルのスマイリー。2002年のチャットをPHPで再現。"> <meta property="og:url" content="https://{{DOMAIN}}/ja/"> <meta property="og:image" content="https://{{DOMAIN}}/images/og.png"> <meta property="og:locale" content="ja_JP"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="CaraChat – 2000年代のCaramailチャット"> <meta name="twitter:description" content="ルーム、プライベートチャット、色、レインボー、そしてオリジナルのスマイリー。2002年のチャットをPHPで再現。"> <meta name="twitter:image" content="https://{{DOMAIN}}/images/og.png"> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "WebApplication", "name": "CaraChat", "description": "2002年のCaramailチャットクライアントをJumPHPでPHPに再現：ルーム、プライベートチャット、色、レインボーと波の文字、当時のまま描かれたスマイリー。", "url": "https://{{DOMAIN}}/ja/", "applicationCategory": "CommunicationApplication", "operatingSystem": "Web browser, Linux, Windows, macOS", "image": "https://{{DOMAIN}}/images/og.png", "screenshot": ["https://{{DOMAIN}}/images/chat.png", "https://{{DOMAIN}}/images/rooms.png", "https://{{DOMAIN}}/images/search.png", "https://{{DOMAIN}}/images/private.png", "https://{{DOMAIN}}/images/phone.png", "https://{{DOMAIN}}/images/login.png"], "isAccessibleForFree": true, "offers": {"@type": "Offer", "price": "0", "priceCurrency": "EUR"}, "potentialAction": {"@type": "UseAction", "target": "https://{{DOMAIN}}/play/"}} </script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ {"@type": "Question", "name": "スマイリーはどう作るの？", "acceptedAnswer": {"@type": "Answer", "text": "2002年と同じです。目、鼻、口を組み合わせます。例：:-) ;-) 8-) :o) 、サンタクロースなら :#) 。鼻は必須です。スマイリーの後ろに数字を付けると色が変わります（:-)2）。#c や #d で手が付きます。#00 から #14 はイラストで、#13 はハートです。"}}, {"@type": "Question", "name": "サーバーは必要ですか？", "acceptedAnswer": {"@type": "Answer", "text": "はい。チャットサーバー CaraChat Serveur（PHP製、データベース不要）をDockerで好きなマシンに立ち上げ、接続ウィンドウでそのアドレスとポート（4500）を指定します。"}} ]} </script> <style> :root { --gris: #c0c0c0; --bleu: #0000ff; --nuit: #1a1a8c; --rose: #ff00c8; } * { box-sizing: border-box; } body { margin: 0; font-family: Helvetica, Arial, sans-serif; background: var(--gris); color: #000; line-height: 1.5; } header { background: #404040; color: #fff; padding: 12px 16px; } header .wrap { display: flex; align-items: center; gap: 12px; } header img { width: 40px; height: 40px; image-rendering: pixelated; } header strong { font-size: 1.4rem; color: #fff; } .wrap { max-width: 1040px; margin: 0 auto; } main { padding: 0 16px 40px; } .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; padding: 0; } .langs a { color: var(--nuit); } h1 { color: var(--bleu); font-size: 2.2rem; margin: 28px 0 8px; } h2 { color: var(--nuit); border-bottom: 2px solid #808080; padding-bottom: 4px; margin-top: 40px; } .lead { font-size: 1.15rem; max-width: 760px; } .play { display: inline-block; background: var(--bleu); color: #fff; font-weight: bold; font-size: 1.25rem; padding: 14px 28px; border-radius: 6px; text-decoration: none; margin: 12px 0 24px; } .play:hover { background: var(--nuit); } figure { margin: 0; background: #fff; border: 1px solid #808080; padding: 6px; } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .9rem; color: #646464; padding: 6px 2px 0; } .grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; } .card { background: #fff; border: 1px solid #808080; padding: 12px 16px; } code { background: #eeeeff; padding: 1px 4px; border-radius: 3px; } .help h3 { color: #990000; font-size: 1.05rem; margin: 18px 0 6px; } .help .note { color: #646464; font-size: .9rem; } .rainbow span:nth-child(9n+1) { color: #ff00c8 } .rainbow span:nth-child(9n+2) { color: #6e265f } .rainbow span:nth-child(9n+3) { color: #7d0000 } .rainbow span:nth-child(9n+4) { color: #1a1a8c } .rainbow span:nth-child(9n+5) { color: #0000ff } .rainbow span:nth-child(9n+6) { color: #147300 } .rainbow span:nth-child(9n+7) { color: #9b9b14 } .rainbow span:nth-child(9n+8) { color: #ff9d00 } .rainbow span:nth-child(9n) { color: #ff0000 } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .shots .phone img { max-width: 260px; margin: 0 auto; } @media (max-width: 720px) { .shots { grid-template-columns: 1fr; } } footer { font-size: .85rem; color: #404040; padding: 24px 16px; border-top: 1px solid #808080; } @media (max-width: 720px) { .grid { grid-template-columns: 1fr; } h1 { font-size: 1.7rem; } } </style></head><body><header><div class="wrap"><img src="../images/favicon.png" alt="アプレットのウインクするスマイリー" width="40" height="40"><strong>CaraChat</strong></div></header><main class="wrap"> <nav class="langs" aria-label="言語"> <a href="../" lang="fr" hreflang="fr">Français</a> <a href="../en/" lang="en" hreflang="en">English</a> <a href="../es/" lang="es" hreflang="es">Español</a> <a href="../de/" lang="de" hreflang="de">Deutsch</a> <a href="../it/" lang="it" hreflang="it">Italiano</a> <a href="../pt/" lang="pt" hreflang="pt">Português</a> <a href="../nl/" lang="nl" hreflang="nl">Nederlands</a> <a href="../pl/" lang="pl" hreflang="pl">Polski</a> <a href="../ru/" lang="ru" hreflang="ru">Русский</a> <a href="../uk/" lang="uk" hreflang="uk">Українська</a> <a href="../tr/" lang="tr" hreflang="tr">Türkçe</a> <strong lang="ja" aria-current="page">日本語</strong> <a href="../zh/" lang="zh" hreflang="zh">中文</a> <a href="../ko/" lang="ko" hreflang="ko">한국어</a> </nav> <h1>2000年代のチャットが帰ってきた</h1> <p class="lead">CaraChatは、2002年のCaramailチャットアプレットをPHPで再現します。ルーム、プライベートチャット、ピンクと青のニックネーム、<span class="rainbow"><span>レ</span><span>イ</span><span>ン</span><span>ボ</span><span>ー</span></span>や波の文字、そして当時とまったく同じように描かれたスマイリー。</p> <a class="play" href="../play/?lang=ja">チャットに入る</a> <figure> <img src="../images/chat.png" alt="CaraChatの Accueil（ホーム）ルーム：色付きの文、スマイリー、参加者リスト、タブ" width="1024" height="700"> <figcaption>ルームの様子：色付きの文、レインボー、スマイリー、右側に参加者、オレンジに点滅するプライベート。</figcaption> </figure> <h2>アプレットのタブ</h2> <div class="shots"> <figure><img src="../images/rooms.png" alt="Salons タブ：常設ルーム、公開または非公開ルームの作成" width="1024" height="700" loading="lazy"><figcaption>Salons（ルーム）：常設ルームとメンバーのルーム、ルームの作成。</figcaption></figure> <figure><img src="../images/search.png" alt="Connecté(e)s タブ：接続中の人の一覧と、ニックネーム・年齢・性別での検索" width="1024" height="700" loading="lazy"><figcaption>Connecté(e)s（接続中）：ニックネーム、または都市・年齢・性別で検索。</figcaption></figure> <figure><img src="../images/private.png" alt="オプションと特別なスマイリーのパレットがあるプライベートダイアログ" width="1024" height="700" loading="lazy"><figcaption>プライベートダイアログ、そのオプション、特別なスマイリー。</figcaption></figure> <figure class="phone"><img src="../images/phone.png" alt="スマートフォン上のCaraChat" width="390" height="760" loading="lazy"><figcaption>スマートフォンで。</figcaption></figure> </div> <h2>よみがえるもの</h2> <div class="grid"> <div class="card"> <ul> <li><strong>アプレットのインターフェース</strong>を忠実に描き直しました。Salons（ルーム）、Connecté(e)s（接続中）、Options、Ami(e)s（友達）の各タブ、ルーム、プライベートごとに1つ（最大20）のタブ（オレンジに変わります）、« Dialogue » と « Membres du salon »（ルームのメンバー）のフレーム、« Message privé »（プライベートメッセージ）、« Pas de nouveaux PVs »（新規プライベートなし）、« Problème de comportement »（マナー違反の通報）。</li> <li><strong>スマートフォン</strong>にも対応し、14言語で使えます（ブラウザの言語。Options タブで変更できます）。</li> <li><strong>ルーム</strong>：常設ルームとメンバーのルーム、公開または非公開。満員（40人）のルームは « Salon* » にあふれます。</li> <li><strong>プライベート</strong>：ニックネームをダブルクリック、またはルームで <code>/ニックネーム メッセージ</code> と入力。</li> <li><strong>検索</strong>：ニックネーム、または都市で、年齢層と性別も指定できます。</li> <li><strong>色</strong>（レインボーを含む12色）と<strong>サイズ</strong>（波を含む）、プロフィールに応じた色のニックネーム、話しかけられるとあなたのニックネームが太字に。</li> <li><strong>モデレーション</strong>：退室させる、モデレーターを呼ぶ、相手を無視する、« 新規プライベートお断り »、取り込み中。</li> </ul> </div> <figure> <img src="../images/login.png" alt="接続ウィンドウ：ニックネーム、年齢、都市、性別、サーバー" width="520" height="447"> <figcaption>接続：あなたのプロフィールとサーバー。</figcaption> </figure> </div> <h2>オリジナルのスマイリー</h2> <p>スマイリーは画像ではなく描画コードでした。そのコードをアプレットから読み取り、ピクセル単位で再現しています。目 <code>:;8B%</code>、顔を決める鼻 <code>-o#!*$</code>（ピエロ、サンタ、ジョッキ、仮面…）、口 <code>)(DPO|</code>：<code>:-)</code>, <code>;-)</code>, <code>8-)</code>, <code>:o)</code>, <code>:#)</code>。数字で顔に色が付き（<code>:-)2</code>）、<code>#c</code> / <code>#d</code> で手が付き、<code>#00</code> から <code>#14</code> はイラストです：爆弾、くまのぬいぐるみ、モミの木、イルカ、ハート <code>#13</code>…。そして « Smileys » パレットの60枚の画像（ハンバーガー <code>@00</code>、ハート <code>@11</code>、ケーキ <code>@09</code>…）は、オリジナルの <code>smiley.gif</code> から取られています。</p> <figure> <img src="../images/smileys.png" alt="描かれたスマイリー入りのルームの文：顔、ハート、モミの木、音符" width="900" height="319"> </figure> <h2>オリジナルの使い方ガイド</h2> <p>Caramailのライブチャットのオンラインヘルプ（1999年）を、そのまま（フランス語で）掲載しています：<a href="../aide.html">ライブチャットとは、公開・非公開ルームの作成、プライベートメッセージの送信（フランス語のヘルプ）</a>。</p> <h2>サーバー</h2> <p>サーバー <strong>CaraChat Serveur</strong> は、2012年のソースからPHP 8で書き直したもので、データベースなしで、jumphp.net上のDockerで動いています。アプレットのプロトコル（1フレーム1行、タブ区切りのフィールド）をそのまま話し、当時と同じTCP、または443番ポートのWebSocket（<code>wss://caramail.jumphp.net/ws</code>）で接続できます。ファイアウォールの内側からでも通ります。</p> <a class="play" href="../play/?lang=ja">CaraChatを開く</a></main><footer class="wrap">CaraChatは、JumPHPで作られた非公式の再現です。オリジナルのアプレット（net.spray.chat、2002年）とPHPサーバー « NewCaraChat »（2012年）の権利は、それぞれの作者に帰属します。</footer></body></html>