aoringo works > aoringo tools > aoringo CHAT logger

aoringo CHAT logger : HELP

HELP

 aoringo CHAT loggerの使い方についてまとめてあります

始めに

aoringo
 aoringo CHAT loggerへようこそ!
* 青林檎
 連続した発言はまとめられます。
 特定単語の色変え、人ごとに名前色・発言色の変更、画像も設定可能。
aoringo
 どどんとふ、富士見オンラインを利用してればチャット時に設定された色を受け継ぐこともできます。
 その他「HP50/60
」といったゲージをサポート。
* 青林檎
 ゲージに使用する単語は何でもOKです「進行度、MP、やる気」などアイデア次第で色々できます。
 このように注釈をつけることもできます。
 アドレスも自動リンク。画像が張られるとサムネイル表示もできます。
* 青林檎
 色々な見た目(テーマ)も用意しています。

 上記の通り、このツールは「あなたが楽しんだチャットログをもっと楽しくする」事を目的として作られました。ちなみに利用したログは

15:20 (aoringo) aoringo CHAT loggerへようこそ!
15:20 (青林檎) 連続した発言はまとめられます。
15:20 (青林檎) 特定単語の色変え、人ごとに名前色・発言色の変更、画像も設定可能。
15:20 (aoringo) どどんとふ、富士見オンラインを利用してればチャット時に設定された色を受け継ぐこともできます。
15:20 (aoringo) その他「HP50/60」といったゲージをサポート。
15:20 (青林檎) ゲージに使用する単語は何でもOKです「進行度、MP、やる気」などアイデア次第で色々できます。
||このように注釈をつけることもできます。
アドレスも自動リンク。画像が張られるとサムネイル表示もできます。
15:20 (青林檎) 色々な見た目(テーマ)も用意しています。

 といった感じになっております。Limechatの標準的な形式ですね。このツールでは、このようなログを見やすく整形し、コピペもしくはhtmlファイルダウンロードによって利用する事が出来ます。
見た目(以下テーマ)も色々と用意していますよ。

alt

alt

 利用方法はとっても簡単です。トップページにあるテキストボックスにログをコピペして放り込むだけ!!
 htmlファイルやtxtファイルをアップロードしてもご利用できますよ。

alt

 設定という項目は、文字通りログを整形する上で色々な設定をここに表示しています。サーバー上では30日間程度保存しています。cookieを利用しているのでいきなり消失したりします。必ずコピペして手元に保管して置いてください。設定画面でtxt形式にしてダウンロードすることもできます。

alt

 変換ボタンを押すと、このような画面が出てきます。下にどのような見た目になるのかプレビューが出ていますね。これでよろしければ「出力テキスト」をクリックすれば全て選択されるのでコピーしてもよし、下にある「CSS使用html」か「プリレイアウトhtml」からダウンロードしてもよし、です。

「CSS使用html」は、CSSというhtmlの見た目を変更するファイルを利用したものです。これだけ持っていても

alt

 こんな感じでとっても残念なものに。画像も表示されてませんね。CSS使用htmlを利用する場合は、別途CSSファイルが必要というわけですね。CSSファイルや画像ファイルの設置方法は「ログを公開する前に」の項目で説明します。

 さて、一方の「プリレイアウトhtml」は、上のCSSの中身を直接記述しちゃいます。

alt

 バッチリですね。相変わらず画像は表示されてませんが。ちょっと中身を覗いてみます。右クリックし、「ソースを表示」をすると、

alt

 htmlタグが色々と出てきてますね。ここの上の方にある意味不明な感じの英語の羅列。

<STYLE type="text/css">
        <!--
        div.chatlogger *{margin:0;padding: 0;border: none;vertical-align: baseline;background: transparent;outline: 0;font-size: 100%;font-size:14px;line-height:1.5 !important;}
        div.chatlogger{width:95%;font-family:'ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック','Osaka',sans-serif;font-size:14px;line-height:1.5 !important;word-wrap: break-word;}
        .chatlogger .explog{margin: 0em 1em 1.5em 1em;;padding: 5px;border-radius: 5px;box-shadow: 3px 3px 3px rgba(0,0,0,0.25);-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.25);}
        .chatlogger .explog img{max-height: 200px;max-width: 200px;margin: 5px;border-radius: 10px;border: white 2px solid;}
        .chatlogger dd img{max-height: 200px;max-width: 200px;margin: 5px;border-radius: 15px;border: white 2px solid;}

 あまりに長くなるので省略しますが。これが見た目を色々と決めているわけです。文字の大きさだったり、枠の色だったり。
 「CSSなんてよくわかんねーぜ! 俺はさっさとサーバーに公開してみんなでコーラ片手にペペロンチーノ決めてーんだ!」という剛気な方はこちらを利用くださいませ。楽ちんですね。

出来る事

 さて、このツールは色々な事ができます。特に、事前にログに手を加えておく事で効果を発揮するような機能もありますので、一通り目を通して頂きたいなと思います。

注釈機能

 ログの行頭に「||」と付ける事で発言ではない、注釈として文章を扱う事が出来ます。

15:20 (青林檎) ゲージに使用する単語は何でもOKです「進行度、MP、やる気」などアイデア次第で色々できます。
||このように注釈をつけることもできます。
アドレスも自動リンク。画像が張られるとサムネイル表示もできます。

 先程のログにもありましたね。最初の「||」から次の「||」もしくは発言までを一つのブロックとして扱います。モノローグや解説、描写など様々な用途にお使いください。

見出し機能

 ログの行頭に「!!数字」と表記する事で見出しとします。

!!2第三章:校門裏迷宮の出現

 こうすることで、htmlタグの「<h2>」で囲われた状態になります。!!1ならh1、!!2ならh2・・・といった具合です。

アドレス認識機能

 httpから始まるURLを認識するとこで自動でリンクタグをつけます。また、それが画像だった場合はサムネイルとして縮小表示する機能もあります(画像サムネイル表示は設定で表示・非表示を切り替えます)。

名前に画像を設定する

 名前を認識して、画像が設定されていればアイコンとして一緒に表示させることができます。
 また、当ツールではスタートアップパッケ―ジとして、アイコンを詰め込んだZIPファイルを配布しています。導入しますとアイコンの設定が非常に簡単になります。

alt

どどんとふ・富士見カラーを引き継ぐ

 どどんとふ、富士見オンラインはログをhtml形式で出力されるという機能があります。そこには参加した方々の文字情報が含まれていますよね。このツールでは、その色情報を流用する事が可能です。一人一人の名前や発言の色を設定する必要ありません!

単語・名前を変更する

 IRCチャットを利用している方は特に、ネット上に公開する時になって名前の「英語表記を日本語に変えたい」と考えた事があるかなと思います。この機能では、名前、発言を走査して特定の単語を変更しちゃいます。
 aoringo → 青林檎
 と言った具合に、です。注意するのは、その他の設定もここで変更した単語に影響されるということです。つまり、「aoringo」を「青林檎」に変更したら、その後の色変更なども「青林檎」を基準に設定してあげる必要があります。

ゲージ化機能

 名前の通りですがなんかイメージがつきにくい。そんな目玉機能がこいつです。チャット中に

hogehoge10/60

 と発言する事で、*といった感じでゲージに変換されます。この場合は「HP50/60」と発言してるわけですね。hogehogeの部分とゲージの色は自由に設定してあげることができます。また、

hogehoge10/60+30-10

 といったようなことをするような場合もあるかなと思います。その場合もちゃんと対応しています。足し算、引き算のみですが。
 ゲージ化するには「 設定した単語 + 数字 + / + 数字 」といった組み合わせで発言する必要があります。

アンカーリンク機能

 文字通り。名前の部分にアンカーリンクを埋め込みます。クリックしたらそこへ飛ぶ、って感じのあれですね。このヘルプ画面の冒頭のチャットログにも埋め込まれていますよ。
 長文になりがちなログも、この機能があればお気に入りに入れてしおりの代替、他人の紹介する時もピンポイントですることができますね。

色変更機能

 かなり色々と変更する事が出来ますよ。枠の色、単語の色、それぞれの名前・発言の色、デフォルトの色などなどなど。とりあえず文字としてあるものは全てそれぞれ変更することができます。

設定

 設定画面では、aoringo CHAT loggerの様々な動作を変更することができます。

設定の読み込み

alt

 まず目をつくのがこちらかと思います。保存されている設定と、その設定をダウンロードするボタン。aoringo CHAT loggerは、利用者の設定をサーバーに保存しています。それ以外の加工前・加工後のログやその他の情報等は保管していません。

 設定はcookleにて呼び出しています。ブラウザを変える、PCを変える、PC内のデータをお掃除する、などで設定が呼び出せなくなりますので、必ずこのコードは保管してくださいね

 さて、保存した設定コードは、その下の「設定の読み込み」「設定ファイル」で読み込むことができます。ここにコードを入れた状態で「設定を保存」をすると容赦なく全てを上書きします。

ログ生成の設定

 注釈の背景・文字色、画像URLサムネイル表示、など色々な項目をここで設定します。
「英数字、+、-を全て半角に変換する」設定は、文字通りの機能です。表記に全角を混ぜてしまう人がいる場合などに効果を発揮するかと思います。

置換の設定

 単語変更・単語色変更・ゲージ設定 をここで変更します。

alt

 色を設定する部分では欄の背景がその色になります。「追加」「削除」で行を増やし、いくらでも設定を追加することができます。左側の枠を空欄にすると、その行が全て削除されます。

発言者ごとの設定

alt

 発言者ごとにアイコンや色を設定していくことができます。一番上の欄、「デフォルト」は全員に設定される情報です。そこから一人一人設定を追加していくわけですね。空欄の場合はデフォルトの設定が引き継がれます。
 そして、テキストボックスのどれかを選択肢ながら画像を選択すると、その行にある「アイコン」欄に自動で画像のアドレスが挿入されます。

 このアイコン設定支援機能で入力されたものは、ログのhtmlファイルと同じ場所に「logimg」があり、その中に該当画像がある事を前提にしています。詳細な説明は「ログを公開する前に」で行います。

 デフォルトで空欄のものは、自動で黒と白で色づけされますので、全て空欄でも正常に動きます。

オリジナルヘッダー

 この機能は、出力するログの冒頭にテキストを挿入する事が出来る、と言うものです。
 先に説明したとおり、このツールは「CSSファイル」を使うことを前提にしています。しかしブログやSNSではCSSファイルが扱えないことがあるのです。その場合は「プリレイアウトhtml」のようにCSSファイルの中身を直接書く必要があります。
 この部分では、そういう人のために、CSSやhtmlタグを記述することができるというものです。

alt

 試しにこんな設定にしてみました。

alt

 ちゃんと出力されているのがわかりますね。ここに各種テーマのCSS記述を突っ込めば見た目は同じになる、というわけです。各種CSSはそれぞれのテーマファイルから入手する事が出来ます。

 また、htmlとしてDLすると、

alt

 見た目上はかわりません。HTMLソースを見てみましょう。

  <!DOCTYPE html>
  <html>
    <head>
              <meta charset="UTF-8">
        オリジナルへっだー
<style type="text/css">
  div.chatlogger dt{color:#2675c5;background-color:#f4e1ee;border-color:#74254b;}div.chatlogger dt a{color:#2675c5;}
  div.chatlogger dd{background-color:#f4e1ee;border-color:#74254b;}
  div.chatlogger dd pre{color:black;}
  div.explog{background-color:white;}div.explog pre{color:black;}
</style>
  </head>
<body>
<div class="chatlogger">
<dl class="itemno1 nameAizawaYu2">

 次に文字化けしてない方、オリジナルヘッダー設定を空欄にしたものを持ってきてみます。

  <!DOCTYPE html>
  <html>
    <head>
              <meta charset="UTF-8">
        <title>チャットログ</title>
        <LINK rel="stylesheet" type="text/css" href="./aologstyle.css">
        <style type="text/css">
  div.chatlogger dt{color:#2675c5;background-color:#f4e1ee;border-color:#74254b;}div.chatlogger dt a{color:#2675c5;}
  div.chatlogger dd{background-color:#f4e1ee;border-color:#74254b;}
  div.chatlogger dd pre{color:black;}
  div.explog{background-color:white;}div.explog pre{color:black;}
</style>
  </head>
<body>
<div class="chatlogger">
<dl class="itemno1 nameaoringo">

「<head>~</head>」内が入れ替わってるのが分かると思います。「<head>」内にはこのページがどういう文字コードなのか、どういうCSSを読み込んでいるのか、などの情報が含まれています。
 この機能はヘッダーを最低限だけ残し、一から構築する事も可能にしているのです。初期設定だと「チャットログ」というページタイトルになるところをゲーム名やシナリオ名に変更したい、読み込むCSSファイル名を変更したい、等の場合はご利用ください。

 ただ、どうしてもHTMLの知識が必要になってくるので、触る場合は十分に注意してくださいね。空欄で初期状態になるので、おかしくなったら空欄に戻してみましょう

 このように、オリジナルヘッダーを触る場合は、htmlファイルをダウンロードするのか、出力テキストをダウンロードするのかで内容を変えるようにしてください。

 また、ゲージ機能を利用するには「progress.js」というものを読みこまないといけません。ファイルアップロードなどができないwebサービスではゲージ機能が使えなくなります。

ログを公開する前に

 さて、設定もしてログhtmlも用意した。後は公開するだけ・・・の前に、あなたはホームページを持っていますでしょうか。ブログをやっていますでしょうか。はたまた友達に見せるだけだからweb上に公開しない、とか。それもありですよ。用途別に項目を用意しました。

HP上で公開する

 さて、ホームページを持ってるならあとは簡単。ダウンロードしたhtmlをアップロードするだけー・・・じゃないんです。

 画像設定をしました? その画像はありますか? ゲージ出力の設定しました? それはjsファイルが必要なのです。かっちょういいテーマを選びましたか? CSSファイルを用意しましょう。

 というわけで、htmlファイルと一緒に用意するスタートアップzipを用意しました。こちらです。一番上にあるzipファイルをダウンロードしてください。

 中身を開くとlogimgフォルダ、cssファイル、jsファイルが入っているはずです。これらを全部htmlと同じ場所にアップロードしてください。図にするとこうです。「log.html」がCHAT loggerで制作したhtmlファイルとします。

root
│ index.html
│ page1.html
│ page2.html
│ page3.html
│
├─logs    ←ログhtmlを収容するディレクトリ。名前は何でも構いません。
│   │  log.html
│   │  chatlogger.css
│   │  progress.js
│   │
│   └─logimg
│          img000.png
│          img001.png
│          img002.png
│          img003.png
│          img004.png
│          img005.png
│               ・
│               ・
│               ・
│               ・
├─bbs
│   │

 htmlファイルとスタートアップの中身の場所は同じ所!! これさえ守れば図のように「logs」というフォルダを新たに作る必要はありません。

 ちなみに、スタートアップパックに含まれているcssは初期テーマともいえるもので、この画面のトップにあるものと同じ物です。
 好みの物に変更する場合は、次の項目「テーマ」をご覧下さい。

ブログ上に公開する

 ブログにはhtmlをアップロードできませんよね。画像も自分ではアップロードできないかもしれません。

 上の「HP上で公開する」のようにスタートアップを利用することもできないから八方塞がり・・・ではありません。

 オリジナルヘッダー機能を利用すればhtmlの見た目を変更するCSSのコードを記述する事が出来ます。詳しくは下の方にある「CSSをアップロードできない」をご覧下さい。

公開しないでオフライン閲覧

ネット上に公開する気はない、けれどもまとめたい。友達に見せるためにzipにまとめたい。そういう場合も超OKです。

基本的には上の「HP上で公開する」とやり方は一緒です。生成されたhtmlファイルと、スタートアップzipから出てきた中身を同じ場所に置いておくだけ!

alt

スタートアップの中身です。ここに

alt

どーん

root
│ index.html
│ page1.html
│ page2.html
│ page3.html
│
├─logs    ←ログhtmlを収容するディレクトリ。名前は何でも構いません。
│   │  log.html
│   │  chatlogger.css
│   │  progress.js
│   │
│   └─logimg
│          img000.png
│          img001.png
│          img002.png
│          img003.png
│          img004.png
│          img005.png
│               ・
│               ・
│               ・
│               ・
├─bbs
│   │

さっきのこの図とまったく同じ状況になっていますよね。ログのファイルは「chatlogercss201303172248.html」って奴ですよ。

htmlファイルを開いてみます。

alt

ちゃんと表示されてますね。テーマの変更なども他の説明と同様の方法で出来ます。色々とカスタマイズして楽しんでくださいね。

テーマ(CSS)

さて、このツールではテーマを色々と変更することが出来ます。テーマはstartup に置いてあります。

alt

欲しい物を選び、「CSS DL」を右クリックして保存しましょう。それをサーバーにアップロードすればOKです。

ただ、htmlからどのCSSを呼び出すのか、というのはヘッダーの中に埋め込まれています。試しに初期設定のhtmlファイルを見てみましょう。

  <!DOCTYPE html>
  <html>
    <head>
              <meta charset="UTF-8">
        <title>チャットログ</title>
        <LINK rel="stylesheet" type="text/css" href="./aologstyle.css">
        <style type="text/css">
  div.chatlogger dt{color:#2675c5;background-color:#f4e1ee;border-color:#74254b;}div.chatlogger dt a{color:#2675c5;}
  div.chatlogger dd{background-color:#f4e1ee;border-color:#74254b;}
  div.chatlogger dd pre{color:black;}
  div.explog{background-color:white;}div.explog pre{color:black;}
</style>
  </head>
<body>
<div class="chatlogger">
<dl class="itemno1 nameaoringo">

 ここのヘッダーから3行目あたり、

<LINK rel="stylesheet" type="text/css" href="./aologstyle.css">

 これが読み込んでいるCSSを表しています。

「rel="stylesheet" type="text/css"」が「このファイルはスタイルシートですよ」と宣言し、「href="./aologstyle.css"」がそのファイルの場所を表しているわけです。

 最初の「./」は「今見てるHTMLファイルと同じ場所」という意味で、その後の「aologstyle.css」がファイル名です。

 今ダウンロードしたCSSテーマの名前は何になっているでしょうか。「aologstyle.css」ではないはずです。ファイル名を「aologstyle.css」に変更し、サーバーへとアップロードすればきちんと見た目が変わるはずです。

cssをアップロードできない

 ブログを利用している、SNSを利用している、などの理由でcssをアップロードできない場合もあるかと思います。画像は別の所にアップロードしてそのアドレスを設定すれば表示されますね。

 じゃあCSSはどうしようか、という事で、「オリジナルヘッダー」設定を利用します。

alt

 このテーマを設定してみましょう。サンプルの一番したに、

alt

 このようなテキストエリアがあります。クリックすると自動で全選択されるので、これをコピーし、設定の「オリジナルヘッダー」に放り込みましょう。

alt

 ちゃんとできていますね。テーマに使っているCSSファイルの中身を全てヘッダーに書き込んだので表示されるわけです。画像がちゃんと表示されてないのはhtmlファイルと同じ場所に画像のフォルダがないからですね。

 ただ、注意点としては、SNSによっては他のCSS記述とぶつかって表示が崩れちゃうって事でしょうか・・・。対策はちょっと難しかったりします・・・。

複数のテーマを使い分けたい

 例えばその日の気分によって、話の内容によって、場所によってテーマを変更したい場合もあると思います。そういった場合、同じ場所にhtmlファイルを設置できないのはとっても不便ですよね。

 じゃあ用途によって読み込むテーマを変更しちゃいましょう。作成したログHTMLのソースを表示してみます。

  <!DOCTYPE html>
  <html>
    <head>
              <meta charset="UTF-8">
        <title>チャットログ</title>
        <LINK rel="stylesheet" type="text/css" href="./aologstyle.css">
        <style type="text/css">
  div.chatlogger dt{color:#2675c5;background-color:#f4e1ee;border-color:#74254b;}div.chatlogger dt a{color:#2675c5;}
  div.chatlogger dd{background-color:#f4e1ee;border-color:#74254b;}
  div.chatlogger dd pre{color:black;}
  div.explog{background-color:white;}div.explog pre{color:black;}
</style>
  </head>
<body>
<div class="chatlogger">
<dl class="itemno1 nameaoringo">

 ここのヘッダーから3行目あたり、

<LINK rel="stylesheet" type="text/css" href="./aologstyle.css">

 これが読み込んでいるCSSを表しています。使い回しっていっちゃいやん。

「rel="stylesheet" type="text/css"」が「このファイルはスタイルシートですよ」と宣言し、「href="./aologstyle.css"」がそのファイルの場所を表しているわけです。

 最初の「./」は「今見てるHTMLファイルと同じ場所」という意味で、その後の「aologstyle.css」がファイル名です。

つまりこの「aologstyle.css」を変更していけば色々なテーマを同じ場所に置いていけるわけですね。

alt

 設定してみました。htmlファイルと同じ場所にpop.cssがあるという設定ですよ。「title」タグで囲われてるのは、このhtmlのタイトルです。
 オリジナルヘッダーを設定するとタイトルタグも消えるので忘れないようにしましょう。

alt

ちゃんと設定されていますね。これでテーマの使い分けが可能になります。

cssカスタマイズ

 CSSに慣れ親しんでいる方に、CSSに関するあれこれを列挙します。格好良くカスタマイズしてあげてください。

<div class="chatlogger">

<dl class="itemno4 namesample2">
<dt style="color:#249931;background-color:#eae7cc;border-color:#77724b;">
<a id="logitem4" style="color:#249931;text-decoration: none;" href="#logitem4"><img src="./logimg/img026.png" alt="*" width="30" height="30"> sample2</a>
</dt>
<dd style="background-color:#eae7cc;border-color:#77724b;">
<pre style="color:#3987d5;"> 発言hogehoge</pre>
</dd>
</dl>

</div>
      

 名前と発言はdl、dt、ddタグによって形成されています。発言の中はpreタグによってなされています。

 発言は自動で全角スペースが一つ入るようになっています。

 全体を囲むdivタグのクラスは「chatlogger」

<div class="chatlogger">

 発言を表すdlタグには必ず何回目の発言と、発言者がクラスとして入っています。

<dl class="itemno4 namesample2">

 発言者が日本語だった場合、URLencodeし、さらに%を除去した文字列が入ります。「BA6B34....」といった具合です。

 それぞれの色情報はhtmlタグにスタイルとして直接記述されます。

 カスタマイズに関して、ここで配布されている物を元に改造をしても問題ありません。じゃんじゃんやっちゃってください。

アイコン・テーマ提供

 当ツールをさらに良くするために、アイコンとテーマを募集しております。

 アイコンはスタートアップパッケ―ジに含まれる形になるため、「非営利使用の範囲ならば個人・企業問わず使用可能」となります。著作権は提供者のものとなります。

 その性質上、オリジナル作品であり、なおかつ出版物として世に出ていない物のみ受け付けております。同人・個人出版のものは提供者の判断にお任せします。

 アイコンの条件としては以下の通りです。


 また、テーマに関しては、カスタマイズ可能な形での配布となります。CSSファイルの著作権は発生しないものとします。

 テーマに含まれる画像が再配布可能かどうかご確認ください。(当サイトで配布する以上、どうしてもそれは「再配布」という形になります)

 バリエーションを増やすためにも、依存テーマからの改造品も受け付けております。見た目上ある程度変更があればOKです。


 提供して頂いた方にはこちらからのリンクを繋ぎます。我こそは、という酔狂な方が居ましたら、「問い合わせ」より、どうぞよろしくお願いいたします。

リンク

 当ツールを利用していただいた方で、申し出があれば相互リンクさせていただきます。条件としては、当ツールのクレジットがログに表示されている事と全年齢閲覧可能なサイト、です。

 また、アイコン・テーマの提供、技術協力してくださった方も積極的にリンクを繋ごうと考えております。

Q&A

問い合わせ