ロゴ
menu
HOME > ｊQuery・Javascript > jQueryでスマフォアプリっぽいチャットを作ってみました[更新]

jQueryでスマフォアプリっぽいチャットを作ってみました[更新]

2015年01月24日

jQuery チャットに関して

imgjQueryチャットはパソコン・スマートフォン・タブレットなどの各種ブラウザで動作するチャットシステムです。LINEなどのコミュニケーションアプリに出来るだけ近づけるよう、スタンプ機能や画像アップロード機能などを備えています。

2015年1月24日おえかき機能付きを作っています

サンプル

通常版とSQLite版の違いに関して

通常版

ログをテキストファイルに保存し、一定数になると古いログから削除されていきます。

SQLite版

名前の通り、ログをSQLiteデータベースに保存します。１つのjQueryチャットで複数のチャットルームを作成する事が出来ます。また、通常版に比べて機能が増えています。SQLiteはPHP5からバンドルされていますので、一般的なレンタルサーバーであれば問題なく動作すると思います。

[重要][通常版・SQLite版] 先ず最初に

jQueryチャットは投稿時、及び最新コメントがあるとき以外は画面上で更新を行っていないように見えますが、設定した秒数(デフォルト 10秒)で常にサーバーと通信を行っています。

参加人数が多ければ、それに応じてサーバーに負荷を掛けてしまいます。安い共有レンタルサーバーなどはチャットCGIなど禁止している場合も有りますので、十分にご注意下さい。

また、wifi接続ではないスマートフォンの場合は、通信量なども問題になってきます。たいていは定額プランに加入されていると思いますが、最近は通信量上限を超えた場合は追加料金が発生したり、回線速度を遅くされてしまうなどのキャリアも有りますのでご注意下さい。

[通常版・SQLite版] 運用に関して

チャットサービスとして不特定多数の方へ公開するような利用方法は想定しておりません。LINE等のように、一対一、或いは少人数のクローズドコミュニティで利用して下さい。現在は昔と違ってLINEやスカイプなど素晴らしいサービスが有りますので、それで収まらないケース、例えばリアバレしたくないユーザー間で利用する等、小規模の運用を想定しています。

ダウンロードとインストール

https://studio-key.com/opensource.html

ダウンロードしたファイルを全てサーバーにアップロードし、以下のようにアクセス権を変更して下さい。サーバーによって777じゃないとダメな場合もあるようなので、666で試し、ダメなようでしたら777にしてみるなどお試し下さい。

通常版

・upload/ (666又は777)
・log/data.log (666又は777)
log/.htaccessはログ・ファイルに直接アクセス出来ないように書かれていますので、サーバーから削除しないで下さい。

SQLite版

・upload/ (666又は777)
・db/chat.sqlite (666又は777)
・db/ (666又は777)*変更が必要なサーバーもあるようです

その他

通常版・SQLite版共に、ログ表示件数などはcommon/php/chat.phpに設定がありますので、そちらを参照してください。

基本的にダウンロードしたファイルで動作することを確認し、その後、設定を変えていく形がベストだと思います。各メッセージの変更等はHTMLファイルを参考にして下さい。

[SQLite版] セットアップ

   $(function(){
      $('#container').jqueryChat({
        'room_id'    : '001', //部屋ID
      });
   });

上記のようにHTMLへ部屋ごとのIDを設定してください。例では001としていますが、ROOM1等でも構いません。

[SQLite版] SQLite版で追加された機能

せつめいと発言するとコマンド一覧が表示されます。背景色をランダムで変えたりおみくじをひいたりすることができます。また、通常版から上部アイコンの表示形式が変更されており、ログ表示件数セレクトが追加されています。

これはログ表示件数を変更するというより過去ログを閲覧するための機能で、セレクトした件数でログが書き換わり、上部へ移動します。※誰かが発言したログは追加されます。

[通常版・SQLite版] ファイルアップロード機能

jpg,gif,png形式の画像をアップロードする事が出来ます。但し、アップロード時に画面へ表示するサムネイル用と大きく表示する用の2種類へ加工しますので、アニメーションGIFは一枚絵としてアップロードされます。

また、一般的なレンタルサーバーでは画像サイズが最大で2MB程度の設定のはずです。これを超えたファイルをアップロードしようとするとエラーメッセージが表示されます。

その他、発言間隔を制限する機能が追加されていますので、common/php/chat.phpを参照してください。

[通常版・SQLite版] スタンプ機能

先ず、付属のスタンプ画像はこちらのサイトからお借りしています。アプリなど二次配布となるケースでも可能との事でお借りしました。この場を借りて厚く御礼申し上げます。

スタンプはstump/内に通常サイズと選択用の小さなサムネイルの二種に分かれて入っています。それぞれ同じ名称でファイルを作れば、好きなだけ増やすことが可能です。チャットのスタンプ選択肢は、ディレクトリー内のファイル一覧を取得しますので、増やしても減らしても特に設定は必要有りません。

[通常版・SQLite版] 現在位置取得機能

少し前のIEなどは取得出来ません。こういったケースでは有効になっていてもアイコンが非表示になります。また、各種デバイス側で現在位置取得を許可する必要が有ります。※たいていはデバイス側で許可の有無を問われます。

また、パソコンの場合は基地局の位置などが取得され、実際の位置とは全く違う場所になる場合が多いです。基本的にスマフォでの利用を想定した機能です。

スマフォに特化させれば地図アプリを起動させても良いのですが、iPhoneが色入と面倒そうなのでブラウザでGoogleMapを表示するだけに留めています。

ログに関して

[通常版・SQLite版]

ログ表示件数・保存件数はcommon/php/chat.phpに設定が有りますので、そちらを参照してください。また、管理人名などもこちらに設定が有ります。説明なども書かれていますので、動作確認した後、一度読んでください。

SQLite版

名前の通りSQLiteにデータを保存しますので、理論的にはSQLiteが許す限りのデータを保存する事ができます。ただ、データが多くなると処理に時間が掛かる場合もありますので、数万行といったログが溜まる運用方法であれば、定期的に削除して方が良いと思います。

データ管理を行う管理パネルは付属しませんが、SQLiteはFirefox SQLite Managerなどで管理が可能ですのでお試し下さい。

[通常版・SQLite版] 上のアイコンを追加したり消したい

HTML上からアイコンを消してしまえば、その機能は単純に使えなくなります。ホームアイコンにSTUDIO KEYのリンクが設定されていますが、これはご自由に変更して構いません。また、幅が収まるなれば、自分で透過PNGを作って加えても良いです。アイコンは縮小されるので、倍サイズくらいで作るとスマフォで綺麗に見えます。

▲