ＷＥＢサイト制作勉強会コミュのmixiwebstudy chat 待ち合わせ処 (旧：Lingr (チャット) 待ち合わせ処)

　Lingrのサービス終了に伴い、コミュ参加者のKIDDさんが新たにチャットを作って下さいました。
　http://mixiwebstudy.appspot.com/chat/

　ログインした時にここに書き込んでおけば、それを見て誰かが参加してくれる、かも。

＜以下、このトピのコメント37(KIDDさん)より引用＞
　Twitterのアカウント"mixiwebstudy"をフォローするとログイン通知を見ることができます。
　http://twitter.com/mixiwebstudy

　プロジェクトはgoogleにホスティングされています。
　要望、バグ等がある場合にはこちらから書いてください。
　http://code.google.com/p/mixiwebstudy/issues/list

　開発者アカウントの欲しい方がもしいらっしゃれば、
　Googleアカウントをメッセージでお伝えください。

----

※ 利用に際しての注意事項・お願い

・過去ログは誰でも閲覧できます。個人情報をさらさない等、発言内容にはご注意ください。(mixi内へのリンクは、コミュのトピック以外へは基本的におやめください)

・荒らし厳禁。節度を持って参加してください。

・ながら参加歓迎ですので、発言にすぐに返事が返ってくるとは限らない事を承知して参加してください。

----

2009/5/19 Lingrのサービス終了に伴い、トピックの名称を「Lingr (チャット) 待ち合わせ処」から変更

-- 旧トップ --

　Lingrでのチャットの待ち合わせ場所です。
　ログインした時にここに書き込んでおけば、それを見て誰かが参加してくれる、かも。

----
　
　Lingrに当コミュのroomを作成しておいたので、下記URLからアクセスしてご自由にご利用ください。

　URL: http://www.lingr.com/room/webstudy

　なおパスワードを聞かれますので「mixiwebstudy」と入力してください。

　利用に際してLingrへの会員登録は必要はありませんが、会員登録するとアイコンを変えられたり、Lingr Radarという発言チェックツールが使えるようになります。(推奨しているわけではありません)

　Lingr Radar: http://www.lingr.com/tools

コメント(87)

最初
全て
最新の40件

前

[48] mixiユーザー 05月25日 13:26

>>KIDDさん
そういえばログイン画面もありましたね；
そちらもチャットのほうが完了したらやります。

>>ひこさん
りょうかいっす。
んではアイコンに置き換えてもっかい作り直してみます。

時刻やシステムメッセージなどは、
ある程度システム側で対応してもらえるかな？という感じで
作ってみたものです。

現状のHTMLをベースに、ほぼCSSのみで対応、となるとちょっと無理ですね。
CSS3が使えれば不可能ではないっぽいですがｗ

最初は日時もコメントの後ろに入れてたんですが、
連続するコメントはきっと秒単位の違いしかないから
最終発言でもいいのかな、と思ったんです。

まぁここらへんは意見が分かれるかもと思ったので
自分はひとつのが見やすいかな、というので提案でした。

ので別にこだわってるわけでもなく、
重複を避けるためなど理由があるのであれば現状のものと
同じ形で行こうと思います。

System messageのところは、
発言と差別化するという意味でセンタリングしましたｗ
それほど頻繁に出るメッセージではないし
パっと表示されたときに気づきやすいかな、ってのもあってｗ

そうそう、最初はMSNメッセみたいなデザインとかにしようかなーと思ったんですが
チャットって文字を読むのがメインなので、できるだけ要素を排除して
シンプルにしたほうがいいかな、と思って今のデザインにしましたｗ

それからコーディング、どうしましょう？ｗ
ある程度どうコーディングしようか考えながらやってるから
俺がやっちゃったほうがいいかな、とも思ったんですが
前のコメントでも書いたように人のも見てみたいな、ってのもあってｗ

とりあえずJSの動きでは、チャットでも話したように
Ctrl+TでチェックのON/OFFができるようにしたいと思ってデザインしてます（(T)の部分）
そういう動きの部分も考えると、俺がやったほうがいいのかなぁ。

[49] mixiユーザー 05月25日 16:03

ちょっとだけ作り直してみました。
いちおう、現在のHTMLでもある程度対応できるかな、って感じです。
どうでしょうか～。

http://css-eblog.com/works/chat/design_chat2.jpg

[50] mixiユーザー 05月25日 23:01

一応書いておくと現在のHTMLは一切気にしないでくださいな

[51] mixiユーザー 05月26日 11:58

今回のチャットデザインでJSで色々ショートカットの作成をしようと試みて
気づいた点、ハマった点があったのでネタ的に投下してみます。

まずハマったのが、Ctrl+T などのショートカットを作ろうとしたとき
元々ブラウザの持っている機能が実行されてしまう、ということ。
上記の例ではタブが開く、など。

event.preventDefault() などを実行してみたものの、うまくいかず。
ブラウザ固有の動作は JavaScript から制御できないのか？！
と思ったんですが、Gmail ではそれがやれているので
きっとなにか見落としがあるのだろうとがんばってみたところ

ブラウザ固有の動作の「実行されるタイミング」に問題がありました。
つまり、上記で言えば Ctrl+T は onkeypress（ブラウザによっては onkeydown）のタイミングで実行されている、ということ。
なので、スクリプトで onkeyup で処理を書いていた場合、
そこへ event.preventDefault() を追記しても、そのイベントが実行されるときには
すでにブラウザ固有の制御が動作してしまっているために
デフォルト動作をとめられなかった、ということです。

なので、ショートカットを作る際には
onkeypress(or onkeydown) でまずショートカットキーが押されているかを判別し、
ショートカットの場合はデフォルト動作を止める。
続いて、onkeyup で実際のショートカットを動作させる、という方法で実現しました。

ショートカットを実装したスクリプトはこんな感じ。
まだまだブラッシュアップして、ライブラリ的にできそうな感じもするけど、とりあえずｗ

-------------------------------
var keyMapping = {
'A': 65, 'B': 66, 'C': 67, 'D': 68, 'E': 69, 'F': 70, 'G': 71, 'H': 72, 'I': 73, 'J': 74, 'K': 75, 'L': 76, 'M': 77,
'N': 78, 'O': 79, 'P': 80, 'Q': 81, 'R': 82, 'S': 83, 'T': 84, 'U': 85, 'V': 86, 'W': 87, 'X': 88, 'Y': 89, 'Z': 90,
'ENTER': 13
};

var denyKeyMapping = [
keyMapping['T'],
keyMapping['ENTER']
];

addEvent( window, 'load', function() {
var obj = document.getElementById( textarea );
addEvent( obj, 'keydown', chkKey, false );
addEvent( obj, 'keypress', chkKey, false );
addEvent( obj, 'keyup', checkTwitter, false );
});

function chkKey( evt ) {
if( denyKeys( evt.keyCode ) ) {
if( evt.ctrlKey ) {
stopDefault( evt );
} else {
if( evt.keyCode === keyMapping['ENTER'] ) {
stopDefault( evt );
//以下、送信処理
}
}
}
}

function checkTwitter( evt ) {
if( evt.ctrlKey ) {
switch( evt.keyCode ) {
case keyMapping['T']:
var ch = document.getElementById( twitterChk );
ch.checked = !ch.checked;
break;

case keyMapping['ENTER']:
document.getElementById( textarea ).value += getCRChars();
break;
}
}
}
-------------------------------

ちなみにまだまだ勉強不足なので、
こんなスマートなやり方あるよ、なんて場合は教えてください(;´Д｀)

[52] mixiユーザー 05月26日 22:10

方法論については少し追ってみるけど一言

checkTwitterって関数名は「ないわー」でしょ(笑)前半はいいけど後半は違う処理じゃんか

ちなみにGoogleコードに載せといてくれたらレビューします

[53] mixiユーザー 05月26日 23:52

>>KIDDさん
checkTwitter、確かに処理変わってますねｗ
まぁ作り途中のなので・・ｗ

Google Codeには、SDKダウンロードしてアクセスしてみます。

[54] mixiユーザー 05月27日 00:19

ちなみにGoogleCodeそのものに関してはSDK無関係です。
Pythonの方に興味のある人だけ・・・

[55] mixiユーザー 05月27日 00:58

>>KIDDさん
あ、そうなんですか？
もう少し詳しく見てみます・・。

[56] mixiユーザー 05月27日 01:16

SVNを使って作ったJSファイルをアップしてみました。
branchにedoというフォルダを作って。

まだよく分かってないので、
なんか間違ってたら言ってください。

[57] mixiユーザー 05月27日 08:45

とりあえず流れてきたので最低限。
コミットログは何かしら書いてもらえるかな？
あとこれは自分の反省だが、ブランチはバージョン的なものか、Googleアカウントで統一がよいかもね

このあたり全体のプロジェクトとしての流れと、バージョン管理の使い方をissue含めてドキュメント化したいね。

あ、今は指摘注意はするけど好きにやってもらってかまわないです。それを通じてバージョン管理を学ぶ環境としたい。(自分含め)

ある程度回ったら発表してもいいしね

[58] mixiユーザー 05月27日 09:25

>>KIDDさん
りょうかいです。
CVS は会社で使っているんですがほんとに触りの部分だけなので
なんかあったら指摘してもらえるとうれしいです。

[59] mixiユーザー 05月27日 10:04

ういういお互いそんな感じで(と、CVSとかすら使っていない環境な自分)

しかしこの「待ち合わせどころ」のネーミングに対してアレなのはどうしよう、と

[60] mixiユーザー 05月27日 10:11

そういえば全然待ち合わせじゃないですね・・ｗ
チャット開発トピ、みたいのを立てて、待ち合わせはこちら、みたいにして誘導するとか？

[61] mixiユーザー 10月09日 11:15

久しぶりに上げてみる。
13時まで出先で作業なので、その間はいる予定です。

[62] mixiユーザー 10月13日 09:30

13時まで出先で作業なので、その間はいる予定です。

[63] mixiユーザー 10月26日 09:33

チャットもただ漫然とあるだけではなくて、定例チャット会とかを考えた方がいいなぁ、とか思いつつなかなか実行に移せないでいます。

13時まで出先で作業なので、その間はいる予定。