Modify for offline

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/ABVDataOpenHelper.java

@@ -16,13 +16,23 @@ import jp.agentec.abook.abv.bl.data.tables.MMemberInfo;
 import jp.agentec.abook.abv.bl.data.tables.MOperationGroupMaster;
 import jp.agentec.abook.abv.bl.data.tables.MOperationGroupMaster;
 import jp.agentec.abook.abv.bl.data.tables.MPasswordLockInfo;
 import jp.agentec.abook.abv.bl.data.tables.MPasswordLockInfo;
 import jp.agentec.abook.abv.bl.data.tables.MServiceOption;
 import jp.agentec.abook.abv.bl.data.tables.MServiceOption;
+import jp.agentec.abook.abv.bl.data.tables.MShopMember;
 import jp.agentec.abook.abv.bl.data.tables.MWorkerGroup;
 import jp.agentec.abook.abv.bl.data.tables.MWorkerGroup;
+import jp.agentec.abook.abv.bl.data.tables.RChatRoomShopMember;
+import jp.agentec.abook.abv.bl.data.tables.RChatUnreadMessage;
+import jp.agentec.abook.abv.bl.data.tables.RCollaborationMember;
 import jp.agentec.abook.abv.bl.data.tables.ROperationContent;
 import jp.agentec.abook.abv.bl.data.tables.ROperationContent;
 import jp.agentec.abook.abv.bl.data.tables.RContentCategory;
 import jp.agentec.abook.abv.bl.data.tables.RContentCategory;
 import jp.agentec.abook.abv.bl.data.tables.RContentGroup;
 import jp.agentec.abook.abv.bl.data.tables.RContentGroup;
 import jp.agentec.abook.abv.bl.data.tables.ROperationGroupMasterOperation;
 import jp.agentec.abook.abv.bl.data.tables.ROperationGroupMasterOperation;
+import jp.agentec.abook.abv.bl.data.tables.RShopMemberGroup;
 import jp.agentec.abook.abv.bl.data.tables.RTaskWorkerGroup;
 import jp.agentec.abook.abv.bl.data.tables.RTaskWorkerGroup;
 import jp.agentec.abook.abv.bl.data.tables.SQLiteTableScript;
 import jp.agentec.abook.abv.bl.data.tables.SQLiteTableScript;
+import jp.agentec.abook.abv.bl.data.tables.TArchive;
+import jp.agentec.abook.abv.bl.data.tables.TChatMessage;
+import jp.agentec.abook.abv.bl.data.tables.TChatRoom;
+import jp.agentec.abook.abv.bl.data.tables.TCollaboration;
+import jp.agentec.abook.abv.bl.data.tables.TCollaborationDetail;
 import jp.agentec.abook.abv.bl.data.tables.TContent;
 import jp.agentec.abook.abv.bl.data.tables.TContent;
 import jp.agentec.abook.abv.bl.data.tables.TContentBookmark;
 import jp.agentec.abook.abv.bl.data.tables.TContentBookmark;
 import jp.agentec.abook.abv.bl.data.tables.TContentDownloadQueue;
 import jp.agentec.abook.abv.bl.data.tables.TContentDownloadQueue;
@@ -100,6 +110,19 @@ public class ABVDataOpenHelper {
 		iTableScripts.add(new MOperationGroupMaster());
 		iTableScripts.add(new MOperationGroupMaster());
 		iTableScripts.add(new ROperationGroupMasterOperation());
 		iTableScripts.add(new ROperationGroupMasterOperation());
 		iTableScripts.add(new TTaskReportApproval());
 		iTableScripts.add(new TTaskReportApproval());
+
+		//ABCOMM関連テーブル
+		iTableScripts.add(new MShopMember());
+		iTableScripts.add(new TChatRoom());
+		iTableScripts.add(new TChatMessage());
+		iTableScripts.add(new TCollaboration());
+		iTableScripts.add(new TCollaborationDetail());
+		iTableScripts.add(new TArchive());
+		iTableScripts.add(new RShopMemberGroup());
+		iTableScripts.add(new RChatRoomShopMember());
+		iTableScripts.add(new RChatUnreadMessage());
+		iTableScripts.add(new RCollaborationMember());
+
 		return iTableScripts; 
 		return iTableScripts; 
 	}
 	}
 
 

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/MShopMember.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class MShopMember extends SQLiteTableScript {
+
+    public MShopMember(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table m_shop_member ( ");
+        sql.append("        shop_member_id INTEGER NOT NULL ");
+        sql.append("      , shop_member_name VARCHAR(64) ");
+        sql.append("      , profile_url VARCHAR(64) ");
+        sql.append("      , favorite_register_date DATETIME ");
+        sql.append("      , PRIMARY KEY (shop_member_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/RChatRoomShopMember.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class RChatRoomShopMember extends SQLiteTableScript {
+
+	public RChatRoomShopMember() {
+		super();
+	}
+	
+	@Override
+	public List<String> getCreateScript(int version) {
+		List<String> ddl = new ArrayList<String>();
+		StringBuffer sql = new StringBuffer();
+		
+		sql.append(" create table r_chat_room_shop_member ( ");
+		sql.append("        room_id INTEGER NOT NULL ");
+		sql.append("      , shop_member_id INTEGER NOT NULL ");
+		sql.append("      , PRIMARY KEY (room_id, shop_member_id) ");
+		sql.append("      , FOREIGN KEY (room_id) REFERENCES t_chat_room (room_id) ");
+		sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+		sql.append(" ) ");
+		
+		ddl.add(sql.toString());
+		
+		return ddl;
+	}
+
+	@Override
+	public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+		return null;
+	}
+
+	@Override
+	public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+		return null;
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/RChatUnreadMessage.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class RChatUnreadMessage extends SQLiteTableScript {
+
+	public RChatUnreadMessage() {
+		super();
+	}
+	
+	@Override
+	public List<String> getCreateScript(int version) {
+		List<String> ddl = new ArrayList<String>();
+		StringBuffer sql = new StringBuffer();
+		
+		sql.append(" create table r_chat_unread_message ( ");
+		sql.append("        chat_message_id INTEGER NOT NULL ");
+		sql.append("      , shop_member_id INTEGER NOT NULL ");
+		sql.append("      , PRIMARY KEY (chat_message_id, shop_member_id) ");
+		sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+		sql.append("      , FOREIGN KEY (chat_message_id) REFERENCES t_chat_message (chat_message_id) ");
+		sql.append(" ) ");
+		
+		ddl.add(sql.toString());
+		
+		return ddl;
+	}
+
+	@Override
+	public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+		return null;
+	}
+
+	@Override
+	public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+		return null;
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/RCollaborationMember.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class RCollaborationMember extends SQLiteTableScript {
+
+	public RCollaborationMember() {
+		super();
+	}
+	
+	@Override
+	public List<String> getCreateScript(int version) {
+		List<String> ddl = new ArrayList<String>();
+		StringBuffer sql = new StringBuffer();
+		
+		sql.append(" create table r_collaboration_member ( ");
+		sql.append("        collaboration_id INTEGER NOT NULL ");
+		sql.append("      , shop_member_id INTEGER NOT NULL ");
+		sql.append("      , PRIMARY KEY (collaboration_id, shop_member_id) ");
+		sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+		sql.append("      , FOREIGN KEY (collaboration_id) REFERENCES t_collaboration (collaboration_id) ");
+		sql.append(" ) ");
+		
+		ddl.add(sql.toString());
+		
+		return ddl;
+	}
+
+	@Override
+	public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+		return null;
+	}
+
+	@Override
+	public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+		return null;
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/RShopMemberGroup.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class RShopMemberGroup extends SQLiteTableScript {
+
+	public RShopMemberGroup() {
+		super();
+	}
+	
+	@Override
+	public List<String> getCreateScript(int version) {
+		List<String> ddl = new ArrayList<String>();
+		StringBuffer sql = new StringBuffer();
+		
+		sql.append(" create table r_shop_member_group ( ");
+		sql.append("        shop_member_id INTEGER NOT NULL ");
+		sql.append("      , group_id INTEGER NOT NULL ");
+		sql.append("      , PRIMARY KEY (shop_member_id, group_id) ");
+		sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+		sql.append("      , FOREIGN KEY (group_id) REFERENCES m_group (group_id) ");
+		sql.append(" ) ");
+		
+		ddl.add(sql.toString());
+		
+		return ddl;
+	}
+
+	@Override
+	public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+		return null;
+	}
+
+	@Override
+	public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+		return null;
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/TArchive.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class TArchive extends SQLiteTableScript {
+
+    public TArchive(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table t_archive ( ");
+        sql.append("        archive_id INTEGER NOT NULL ");
+        sql.append("      , archive_name VARCHAR2(64) ");
+        sql.append("      , archive_type INTEGER NOT NULL ");
+        sql.append("      , archive_url VARCHAR2 ");
+        sql.append("      , collaboration_id INTEGER NOT NULL ");
+        sql.append("      , shop_member_id INTEGER NOT NULL ");
+        sql.append("      , archive_save_path VARCHAR2 ");
+        sql.append("      , PRIMARY KEY (archive_id)");
+        sql.append("      , FOREIGN KEY (collaboration_id) REFERENCES t_collaboration (collaboration_id) ");
+        sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/TChatMessage.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class TChatMessage extends SQLiteTableScript {
+
+    public TChatMessage(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table t_chat_message ( ");
+        sql.append("        chat_message_id INTEGER NOT NULL ");
+        sql.append("      , chat_room_id INTEGER NOT NULL ");
+        sql.append("      , shop_member_id INTEGER NOT NULL ");
+        sql.append("      , message VARCHAR2 ");
+        sql.append("      , message_type INTEGER ");
+        sql.append("      , link_url VARCHAR2 ");
+        sql.append("      , PRIMARY KEY (chat_message_id) ");
+        sql.append("      , FOREIGN KEY (chat_room_id) REFERENCES t_chat_room (chat_room_id) ");
+        sql.append("      , FOREIGN KEY (shop_member_id) REFERENCES m_shop_member (shop_member_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/TChatRoom.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class TChatRoom extends SQLiteTableScript {
+
+    public TChatRoom(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table t_chat_room ( ");
+        sql.append("        chat_room_id INTEGER NOT NULL ");
+        sql.append("      , chat_room_name VARCHAR2 ");
+        sql.append("      , type INTEGER NOT NULL ");
+        sql.append("      , favorite_register_date DATETIME ");
+        sql.append("      , PRIMARY KEY (chat_room_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/TCollaboration.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class TCollaboration extends SQLiteTableScript {
+
+    public TCollaboration(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table t_collaboration ( ");
+        sql.append("        collaboration_id INTEGER NOT NULL ");
+        sql.append("      , chat_message_id INTEGER NOT NULL ");
+        sql.append("      , PRIMARY KEY (collaboration_id)");
+        sql.append("      , FOREIGN KEY (chat_message_id) REFERENCES t_chat_message (chat_message_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/data/tables/TCollaborationDetail.java

+package jp.agentec.abook.abv.bl.data.tables;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import jp.agentec.abook.abv.bl.common.db.SQLiteDatabase;
+
+public class TCollaborationDetail extends SQLiteTableScript {
+
+    public TCollaborationDetail(){
+    };
+
+    @Override
+    public List<String> getCreateScript(int version) {
+        List<String> ddl = new ArrayList<String>();
+        StringBuffer sql = new StringBuffer();
+
+        sql.append(" create table t_collaboration_detail ( ");
+        sql.append("        collaboration_detial_id INTEGER NOT NULL ");
+        sql.append("      , collaboration_id INTEGER NOT NULL ");
+        sql.append("      , collaboration_type INTEGER ");
+        sql.append("      , collaboration_duration VARCHAR2(64) ");
+        sql.append("      , chat_room_id INTEGER NOT NULL ");
+        sql.append("      , PRIMARY KEY (collaboration_detial_id)");
+        sql.append("      , FOREIGN KEY (collaboration_id) REFERENCES t_collaboration (collaboration_id) ");
+        sql.append("      , FOREIGN KEY (chat_room_id) REFERENCES t_chat_room (chat_room_id) ");
+        sql.append(" ) ");
+
+        ddl.add(sql.toString());
+
+        return ddl;
+    }
+
+    @Override
+    public List<String> getUpgradeScript(int oldVersion, int newVersion) {
+        return null;
+    }
+
+    @Override
+    public List<String> getMigrationScript(SQLiteDatabase databaseConnection, int oldVersion, int newVersion, Object... params) {
+        return null;
+    }
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/ArchiveDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+public class ArchiveDto extends AbstractDto {
+	public Integer archiveId;
+	public String archiveName;
+	public Integer archiveType;
+	public String archiveUrl;
+	public Integer collaborationId;
+	public Integer shop_memberId;
+	public String archiveSavePath;
+
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{archiveId, archiveName, archiveType, archiveUrl, collaborationId, shop_memberId, archiveSavePath};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{archiveSavePath, archiveName, archiveType, archiveUrl, collaborationId, shop_memberId, archiveId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ archiveId};
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/ChatMessageDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+public class ChatMessageDto extends AbstractDto {
+	public Integer chatMessageId;
+	public Integer chatRoomId;
+	public Integer shopMemberId;
+	public String message;
+	public Integer messageType;
+	public String linkUrl;
+
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{chatMessageId, chatRoomId, shopMemberId, shopMemberId, message, messageType, linkUrl};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{chatRoomId, shopMemberId, shopMemberId, message, messageType, linkUrl, chatMessageId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ chatMessageId};
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/ChatRoomDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+import java.util.Date;
+
+public class ChatRoomDto extends AbstractDto {
+	public Integer chatRoomId;
+	public String chatRoomName;
+	public Integer type;
+	public Date favoriteRegisterDate;
+
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{chatRoomId, chatRoomName, type, favoriteRegisterDate};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{favoriteRegisterDate, chatRoomName, type, chatRoomId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ chatRoomId};
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/CollaborationDetailDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+public class CollaborationDetailDto extends AbstractDto {
+	public Integer collaborationDetialId;
+	public Integer collaborationId;
+	public Integer collaborationType;
+	public String collaborationDuration;
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{collaborationDetialId, collaborationId, collaborationType, collaborationDuration};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{collaborationDuration, collaborationId, collaborationType, collaborationDetialId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ collaborationDetialId};
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/CollaborationDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+public class CollaborationDto extends AbstractDto {
+	public Integer collaborationId;
+	public Integer chatMessageId;
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{collaborationId, chatMessageId};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{chatMessageId, collaborationId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ collaborationId};
+	}
+
+}

ABVJE_BL/src/jp/agentec/abook/abv/bl/dto/ShopMemberDto.java

+package jp.agentec.abook.abv.bl.dto;
+
+import java.util.Date;
+
+public class ShopMemberDto extends AbstractDto {
+	public Integer shopMemberId;
+	public String shopMemberName;
+	public String profileUrl;
+	public Date favoriteRegisterDate;
+
+	@Override
+	public Object[] getInsertValues() {
+		return new Object[]{shopMemberId, shopMemberName, profileUrl, favoriteRegisterDate};
+	}
+
+	@Override
+	public Object[] getUpdateValues() {
+		return new Object[]{shopMemberName, profileUrl, favoriteRegisterDate, shopMemberId};
+	}
+
+	@Override
+	public String[] getKeyValues() {
+		return new String[]{""+ shopMemberId};
+	}
+
+}

ABVJE_Launcher_Android/assets/chat/public/css/chat.css

@@ -62,20 +62,32 @@ img {
 .top_spac{ margin: 20px 0 0;}
 .top_spac{ margin: 20px 0 0;}
 
 
 
 
-.recent_heading {float: left; width:40%;}
+.recent_heading {float: left; width:90%;}
 .srch_bar {
 .srch_bar {
   display: inline-block;
   display: inline-block;
-  text-align: right;
-  width: 60%;
+  text-align: center;
+  width: 100%;
   /*padding:*/
   /*padding:*/
 }
 }
-.heading_srch { padding:10px 20px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
+.heading_srch { padding:5px 10px 5px 10px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
 
 
 .recent_heading h4 {
 .recent_heading h4 {
   color: #095395;
   color: #095395;
   font-size: 21px;
   font-size: 21px;
   margin: auto;
   margin: auto;
 }
 }
+
+.data_srch h3, .recent_heading h3 {
+  color: #095395;
+  font-size: 20px;
+  margin: auto;
+  margin-left: 10px;
+}
+
+.inbox_people .data_srch {
+  padding: 5px 10px 5px 10px;
+}
+
 .chat_list, .group_list, .user_list, .select_user_list {
 .chat_list, .group_list, .user_list, .select_user_list {
   border-bottom: 1px solid #c4c4c4;
   border-bottom: 1px solid #c4c4c4;
   margin: 0;
   margin: 0;
@@ -89,14 +101,28 @@ img {
 }
 }
 
 
 #room_list, #group_list, #user_list, #select_user_list {
 #room_list, #group_list, #user_list, #select_user_list {
-    margin-left: 0;
+  margin-left: 0;
+}
+
+.room-list-title {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.room-name-font {
+  font-size: 1rem !important;
+  margin-right: 5px;
+}
+
+.room-member-count {
+  line-height: 1.5;
 }
 }
 
 
 .chat_img, .group_img, .user_img {
 .chat_img, .group_img, .user_img {
   float: left;
   float: left;
   width: 11%;
   width: 11%;
 }
 }
-.srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none; }
+.srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:90%; padding:4px 0 4px 6px; background:none; }
 .srch_bar .input-group-addon button {
 .srch_bar .input-group-addon button {
   background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
   background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
   border: medium none;
   border: medium none;
@@ -172,11 +198,20 @@ img {
 }
 }
 .received_withd_msg { width: 57%;}
 .received_withd_msg { width: 57%;}
 .mesgs {
 .mesgs {
+  margin-top: 40px;
   padding: 0px 15px 48px 15px;
   padding: 0px 15px 48px 15px;
 }
 }
 
 
+.search-bar-fixed {
+  position: fixed;
+}
+
+.search-group {
+  margin-bottom: 38px;
+}
+
 .landscape_mesgs {
 .landscape_mesgs {
-    padding: 0px 10% 48px 10%;
+  padding: 0px 10% 48px 10%;
 }
 }
 
 
 .outgoing_msg{ overflow:hidden; margin:24px 0 24px;}
 .outgoing_msg{ overflow:hidden; margin:24px 0 24px;}
@@ -215,7 +250,10 @@ img {
 }
 }
 .messaging { padding: 0 0 50px 0;}
 .messaging { padding: 0 0 50px 0;}
 .msg_history {
 .msg_history {
-  height: calc(100vh - 88px);
+
+  /* チャット画面スクロール範囲
+   * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px)) */
+  height: calc(100vh - 144px);
   overflow-y: auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   -webkit-overflow-scrolling: touch;
 }
 }
@@ -314,7 +352,7 @@ a[aria-expanded="true"] {
 }
 }
 
 
 #sidebar .sidebar-footer{
 #sidebar .sidebar-footer{
-  position: sticky; 
+  position: sticky;
   bottom: 0;
   bottom: 0;
   width: 100%;
   width: 100%;
   background: #095395;
   background: #095395;
@@ -351,7 +389,7 @@ a.article:hover {
   position:fixed;
   position:fixed;
   width:60px;
   width:60px;
   height:60px;
   height:60px;
-  bottom:18px;
+  bottom:20px;
   right:18px;
   right:18px;
   background-color:#095395;
   background-color:#095395;
   color:#FFF;
   color:#FFF;
@@ -496,7 +534,6 @@ a.article:hover {
 
 
 #newRoomName{
 #newRoomName{
   display: none;
   display: none;
-  width: auto;
 }
 }
 
 
 .bg-primary, .btn-primary{
 .bg-primary, .btn-primary{
@@ -584,6 +621,19 @@ a.article:hover {
   z-index:10050;
   z-index:10050;
 }
 }
 
 
+#errorMsg{
+  margin-top: 60px;
+  text-align: center;
+}
+
+.bg-footer {
+  background-color: #F2F2F2;
+}
+
+.talign-center{
+  text-align: center;
+}
+
 /* --------------------------------------------------- */
 /* --------------------------------------------------- */
 /* ERROR PAGE STYLE                                    */
 /* ERROR PAGE STYLE                                    */
 /* --------------------------------------------------- */
 /* --------------------------------------------------- */

ABVJE_Launcher_Android/assets/chat/public/index.html

 <!doctype html>
 <!doctype html>
-<html lang="en" style="background: #DBDBDB;">
+<html lang="en">
 <head>
 <head>
   <!-- Required meta tags -->
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta charset="utf-8">
@@ -9,33 +9,400 @@
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/bootstrap.min.css">
   <link rel="stylesheet" href="./css/lightbox.min.css">
   <link rel="stylesheet" href="./css/lightbox.min.css">
   <link rel="stylesheet" href="./css/chat.css">
   <link rel="stylesheet" href="./css/chat.css">
+  <link rel="stylesheet" href="./css/font-awesome.css">
   <script>
   <script>
-    const PLATFORM = 'android';
-    const IS_MOBILE = true;
-  </script>
+    const CHAT_SERVER_URL = chatServerUrl;
+    const CMS_SERVER_URL = '#q("/chatapi")';
+    const ASSET_PATH = './';
+    const PLATFORM = platform;
+    const IS_MOBILE = isMobile;
   </script>
   </script>
 </head>
 </head>
 <body>
 <body>
   <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
   <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
     <ul class="navbar-nav col-3" id="navbarLeft">
     <ul class="navbar-nav col-3" id="navbarLeft">
+      <button class="btn btn-primary" type="button" id="backButton">
+        <i class="fa fa-arrow-left"></i>
+      </button>
       <button class="btn btn-primary" type="button" id="homeButton">
       <button class="btn btn-primary" type="button" id="homeButton">
         <i class="fa fa-home" style="font-size: 1.6rem;"></i>
         <i class="fa fa-home" style="font-size: 1.6rem;"></i>
       </button>
       </button>
     </ul>
     </ul>
-    <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Error</a>
+    <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Chat</a>
+    <ul class="navbar-nav col-3" id="navbarRight">
+      <!-- Chat Room Icons -->
+      <li class="nav-item">
+        <button type="button" id="sidebarCollapse" class="btn btn-primary chatRoomIcon">
+          <i class="fas fa-bars"></i>
+        </button>
+      </li>
+      <li class="nav-item">
+        <button type="button" id="userSelectionDeleteBtn" class="btn btn-primary">
+          <i class="fa fa-trash"></i>
+        </button>
+      </li>
+      <li class="nav-item">
+        <button type="button" id="userSelectionConfirmBtn" class="btn btn-primary chatRoomIcon">
+          <span id="userSelectionLength" class="badge badge-light"></span>
+          <i class="fas fa-check"></i>
+        </button>
+        <!-- Alert Dialog -->
+        <div id="confirm" class="modal fade">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-body" id="userSelectionTitle">
+                Are you sure?
+              </div>
+              <div class="modal-footer">
+                <button type="button" data-dismiss="modal" class="btn" id="yesTitle">OK</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </li>
+    </ul>
+  </nav>
+
+  <!-- Sidebar -->
+  <nav id="sidebar">
+    <div id="dismiss">
+      <i class="fas fa-arrow-right"></i>
+    </div>
+    <div class="sidebar-header">
+      <h4 id="participants">Participants</h4>
+    </div>
+    <div id="users">
+    </div>
+    <footer class="sidebar-footer text-right">
+      <a class="btn text-light" role="button" id="exitRoom">
+        Exit <i class="fas fa-door-open"></i>
+      </a>
+      <!-- Confirm Dialog -->
+      <div id="exitRoomConfirm" class="modal fade">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+            <div class="modal-body" id="exitRoomTitle">
+              Are you sure?
+            </div>
+            <div class="modal-footer">
+              <button type="button" data-dismiss="modal" class="btn btn-primary" id="exitRoomOk">Ok</button>
+              <button type="button" data-dismiss="modal" class="btn" id="noExit">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </footer>
   </nav>
   </nav>
-  <div class="error-aria">
-    <img id="errorImg" src="./icon/error_top_icon.svg">
-    <div id="errorTitle">
-      <a>ネットワークエラー</a>
+  <!-- Dark Overlay element -->
+  <div class="overlay active"></div>
+  <!-- loadingIndicator -->
+  <div id="loadingIndicator">
+    <div class="spinner-border text-primary loader" role="status">
+      <span class="sr-only">Loading...</span>
+    </div>
+  </div>
+
+  <!-- Error Alert Dialog -->
+  <div id="customAlert" class="modal fade">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body" id="customAlertTitle">
+          Are you sure?
+        </div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customAlertOk">Ok</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Confirm Dialog -->
+  <div id="customConfirm" class="modal fade">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body" id="customConfirmTitle">
+          Are you sure?
+        </div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customConfirmOk">Ok</button>
+          <button type="button" data-dismiss="modal" class="btn" id="customAlertCancel">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="tab-content" id="pills-tabContent">
+    <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab">
+      <div class="search-group">
+        <div class="input-group search-bar-fixed">
+          <input style="font-family:Arial, FontAwesome !important;" id="room-search" type="text" class="write_msg form-control" name="message" placeholder="&#xF002;" autocomplete="off">
+        </div>
+      </div>
+      <div class="inbox_people">
+        <div id="room_list" class="inbox_chat row">
+        </div>
+        <a id="createChatRoom" href="#" class="floating_plus_btn">
+          <i class="fa fa-plus my-float"></i>
+        </a>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+      ...
+    </div>
+    <div class="tab-pane fade" id="pills-communication" role="tabpanel" aria-labelledby="pills-communication-tab">
+      ...
     </div>
     </div>
-    <div id="errorMsg">
-      ネットワークに接続できませんでした。電波が良いところでもう一度接続してください。
+    <div class="tab-pane fade" id="pills-setting" role="tabpanel" aria-labelledby="pills-setting-tab">
+      ...
+    </div>
+    <!-- invisible tabs -->
+    <div class="tab-pane fade" id="pills-chat" role="tabpanel" aria-labelledby="pills-chat-tab">
+      <div class="input-group search-bar-fixed">
+        <input style="font-family:Arial, FontAwesome" id="message-search" type="text" class="write_msg form-control" placeholder="&#xF002;" name="message" autocomplete="off">
+        <div class="input-group-append">
+          <button type="button" class="btn input-group-text dropdown-toggle-split" id="pre-search" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-arrow-up"></i>
+          </button>
+        </div>
+      </div>
+      <div class="mesgs">
+        <div class="msg_history" id="messages">
+        </div>
+        <div class="type_msg fixed-bottom">
+          <div class="row">
+            <div class="msg_notification" id="messageNotification">
+            </div>
+          </div>
+          <div class="input_msg_write">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <button class="btn input-group-text dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-camera"></i></button>
+                  <!-- Video Upload -->
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" id="fileUploadButton" href="#">Photo
+                      <a href="#">
+                        <form id="image-form">
+                        <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
+                        </form>
+                      </a>
+                    </a>
+                    <a class="dropdown-item" id="fileUploadButton2" href="#">Video
+                      <a href="#">
+                        <form id="image-form2">
+                        <input class="d-none" type="file" name="image" id="imageInputTag2" accept="video/mp4">
+                        </form>
+                      </a>
+                    </a>
+                  </div>
+              </div>
+              <input id="message-form" type="text" class="write_msg form-control" name="message" placeholder="Type a message" autocomplete="off">
+              <div class="input-group-append">
+                <button id="message-send-btn" class="btn input-group-text" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
+      <div class="inbox_people">
+        <div class="heading_srch">
+          <div class="srch_bar">
+            <div class="stylish-input-group">
+              <input id="groupListKeyword" type="text" class="search-bar" placeholder="Search">
+              <span class="input-group-addon">
+                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div id="group_list" class="inbox_user row">
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="pills-user" role="tabpanel" aria-labelledby="pills-user-tab">
+      <div class="inbox_people">
+        <div class="heading_srch">
+          <div class="recent_heading">
+            <h4 id="groupName"></h4>
+          </div>
+        </div>
+        <div class="heading_srch">
+          <div class="srch_bar">
+            <div class="stylish-input-group">
+              <input id="userListKeyword" type="text" class="search-bar" placeholder="Search">
+              <span class="input-group-addon">
+                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div id="user_list" class="inbox_user row">
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="pills-confirm" role="tabpanel" aria-labelledby="pills-confirm-tab">
+      <div class="inbox_people">
+        <div class="heading_srch">
+          <div class="recent_heading">
+            <h3 id="inviteStatus"></h3>
+            <div class="srch_bar">
+              <div class="stylish-input-group">
+                <input id="newRoomName" type="text" class="search-bar" placeholder="Room name" aria-label="Search">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="data_srch">
+          <h3 id="invitedUsers"></h3>
+          <div id="select_user_list" class="inbox_user row">
+          </div>
+        </div>
+      </div>
     </div>
     </div>
-    <button class="bg-primary reload-button" id="reloadButton">更新</button>
-    <img id="errorEnd" src="./icon/error_footer_img.svg">
   </div>
   </div>
+  <ul class="icon-bar fixed-bottom nav nav-pills mb-0" id="pills-tab" role="tablist">
+    <!-- Display None (d-none) chatList -->
+    <li class="nav-item d-flex justify-content-center">
+      <a class="nav-link active" id="pills-chatlist-tab" data-toggle="pill" href="#pills-chatlist" role="tab" aria-controls="pills-chatlist" aria-selected="true">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <!-- Display None (d-none) chat -->
+    <li class="nav-item d-none justify-content-center">
+      <a class="nav-link" id="pills-chat-tab" data-toggle="pill" href="#pills-chat" role="tab" aria-controls="pills-chat" aria-selected="false">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <!-- Display None (d-none) chatList -->
+    <li class="nav-item d-none justify-content-center">
+      <a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <!-- Display None (d-none) chatList -->
+    <li class="nav-item d-none justify-content-center">
+      <a class="nav-link" id="pills-user-tab" data-toggle="pill" href="#pills-user" role="tab" aria-controls="pills-user" aria-selected="false">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <!-- Display None (d-none) chatList -->
+    <li class="nav-item d-none justify-content-center">
+      <a class="nav-link" id="pills-confirm-tab" data-toggle="pill" href="#pills-confirm" role="tab" aria-controls="pills-confirm" aria-selected="false">
+        <i class="fa fa-comments fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <li class="nav-item d-flex justify-content-center">
+      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">
+        <i class="fa fa-file-alt fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <li class="nav-item d-flex justify-content-center">
+      <a class="nav-link" id="pills-communication-tab" data-toggle="pill" href="#pills-communication" role="tab" aria-controls="pills-communication" aria-selected="false">
+        <i class="fa fa-users fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+    <li class="nav-item d-flex justify-content-center">
+      <a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#pills-setting" role="tab" aria-controls="pills-setting" aria-selected="false">
+        <i class="fa fa-cog fa-6" aria-hidden="true"></i>
+      </a>
+    </li>
+  </ul>
 </div>
 </div>
+<script id="message-template" type="text/template">
+  <div class="incoming_msg">
+    <div class="incoming_msg_img">
+      <img src={{{profileImage}}} alt="">
+    </div>
+    <div class="received_msg">
+      <div class="received_withd_msg">
+        <p class="message_content">{{text}}</p>
+        <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
+      </div>
+    </div>
+  </div>
+</script>
+<script id="message-template-me" type="text/template">
+  <div class="outgoing_msg">
+    <div class="sent_msg">
+      <p class="message_content">{{text}}</p>
+      <span class="time_date">{{from}} | {{createdAtTime}} | {{createdAtDay}}</span>
+    </div>
+  </div>
+</script>
+<script id="room-template" type="text/template">
+  <div class="chat_list {{active}} col-12" data-roomName="{{roomName}}" data-room-id="{{roomId}}">
+    <div class="chat_people">
+      <div class="chat_img">
+        <img src={{{profileImage}}} alt="">
+      </div>
+      <div class="chat_ib">
+        <div class="row">
+          <div class="col-8">
+            <h5 class="">
+              <div class="room-list-title">
+                <span class="text-truncate room-name-font">{{roomName}}</span>
+                <span class="text-muted room-member-count">{{userCnt}}</span>
+              </div>
+            </h5>
+          </div>
+          <div class="col-4">
+            <span class="chat_date">{{time}}</span>
+          </div>
+        </div>
+        <p class="text-truncate float-left">{{lastMessage}}</p><span class="badge badge-pill badge-danger float-right unreadMsgCnt">{{unreadMsgCnt}}</span>
+      </div>
+      <div class="squareBox deleteBox"  data-room-id="{{roomId}}" data-active-room="{{active}}">
+        <div class="squareBoxContent">
+          <div>
+            <span>
+              <i class="fa fa-trash"></i>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</script>
+<script id="group-template" type="text/template">
+  <div class="group_list col-12" data-name="{{name}}">
+    <div class="group_people">
+      <div class="group_img">
+        <img src="${chatUrl}images/group-image.png" alt="">
+      </div>
+      <div class="group_ib">
+        <h5>{{name}}</h5>
+        <p>{{info}}</p>
+      </div>
+    </div>
+  </div>
+</script>
+<script id="user-template" type="text/template">
+  <div class="user_list col-12" data-name="{{name}}">
+    <div class="user_people">
+      <div class="user_img">
+        <img src="{{profileImage}}" alt="">
+      </div>
+      <div class="user_ib">
+        <h5>{{name}}</h5>
+        <p>{{info}}</p>
+      </div>
+      <div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
+        <div class="squareBoxContent">
+          <div>
+            <span>
+              <i class="fas fa-check"></i>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</script>
+<script src="./socket.io/dist/socket.io.js"></script>
+<script src="./js/libs/socket.io.js"></script>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>
 <script src="./js/libs/jquery-3.3.1.min.js"></script>
 <script src="./js/libs/popper.min.js"></script>
 <script src="./js/libs/popper.min.js"></script>
 <script src="./js/libs/moment.js"></script>
 <script src="./js/libs/moment.js"></script>
@@ -50,7 +417,22 @@
 <script src="./js/language_ko.js" charset="UTF-8"></script>
 <script src="./js/language_ko.js" charset="UTF-8"></script>
 <script src="./js/language_ja.js" charset="UTF-8"></script>
 <script src="./js/language_ja.js" charset="UTF-8"></script>
 <script src="./js/language_en.js" charset="UTF-8"></script>
 <script src="./js/language_en.js" charset="UTF-8"></script>
+<script src="./js/constant.js"></script>
+<script src="./js/chat.js"></script>
+<script src="./js/chat-ui.js"></script>
 <script src="./js/chat-util.js"></script>
 <script src="./js/chat-util.js"></script>
-<script src="./js/chat-error.js"></script>
+<script src="./js/chat-websocket.js"></script>
+
 </body>
 </body>
+<script>
+jQuery('#homeButton').on('click', function(){
+	console.log('homeButton');
+	if (CHAT_UTIL.isIOS()) {
+		webkit.messageHandlers.goHome.postMessage({});
+
+	} else if (CHAT_UTIL.isAndroid()) {
+		android.goHome();
+	}
+});
+</script>
 </html>
 </html>
\ No newline at end of file

ABVJE_Launcher_Android/assets/chat/public/js/chat-ui.js

@@ -3,12 +3,16 @@ var CHAT_UI = {};
 
 
 $(function(){
 $(function(){
 	let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight
 	let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight
+	let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight
 	$(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`)
 	$(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`)
-	$(".inbox_chat").css('max-height', `calc(100vh - ${navbarHeight + 'px'})`)
 
 
-	jQuery('.roomListIcon').hide();
-	jQuery('#userSelectionDeleteBtn').hide();
-	jQuery('#createChatRoom').hide();
+	/* チャットルーム一覧画面スクロール範囲
+	 * 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */
+	$(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight) + 'px'})`)
+
+	$('.roomListIcon').hide();
+	$('#userSelectionDeleteBtn').hide();
+	$('#createChatRoom').hide();
 });
 });
 
 
 // Rotate
 // Rotate
@@ -40,7 +44,7 @@ $(window).on('resize', function(){
 
 
 // New Room
 // New Room
 // チャットルーム生成ボタン処理
 // チャットルーム生成ボタン処理
-jQuery('#createChatRoom').on('click', function(){
+$('#createChatRoom').on('click', function(){
 	//loadingIndicatorを表示
 	//loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
 	CHAT_UI.showLoadingIndicator();
 
 
@@ -51,47 +55,48 @@ jQuery('#createChatRoom').on('click', function(){
 
 
 // Room Delete
 // Room Delete
 // チャットルーム削除ボタン処理
 // チャットルーム削除ボタン処理
-jQuery('#roomDeleteButton').on('click', function(e){
-	if (jQuery('.deleteBox').is(':visible')) {
+$('#roomDeleteButton').on('click', function(e){
+	if ($('.deleteBox').is(':visible')) {
 		// チャットルーム削除アイコンが表示されている時、ブラインド処理を行う
 		// チャットルーム削除アイコンが表示されている時、ブラインド処理を行う
-		jQuery('.deleteBox').finish().show().fadeTo('slow',0,function(){
-			jQuery(this).hide();
+		$('.deleteBox').finish().show().fadeTo('slow',0,function(){
+			$(this).hide();
 		});
 		});
 		// チャットリストについてクリックイベントを与える
 		// チャットリストについてクリックイベントを与える
-		jQuery('.chat_list').off('click');
-		jQuery('.chat_list:not(.active_chat)').on('click', function(e){
+		$('.chat_list').off('click');
+		$('.chat_list:not(.active_chat)').on('click', function(e){
 			//loadingIndicatorを表示
 			//loadingIndicatorを表示
 			CHAT_UI.showLoadingIndicator();
 			CHAT_UI.showLoadingIndicator();
-			let roomId = jQuery(this).data('roomId');
-			let roomName = jQuery(this).data('roomname');
+			let roomId = $(this).data('roomId');
+			let roomName = $(this).data('roomname');
 			socket.emit('joinRoom', roomId, roomName, function (){
 			socket.emit('joinRoom', roomId, roomName, function (){
-				jQuery('#messages').html('');
-				jQuery('.titleRoomName').text(roomName).data('roomName', roomName);
-				jQuery('#pills-chat-tab').tab('show');
+				$('#messages').html('');
+				$('.titleRoomName').text(roomName).data('roomName', roomName);
+				$('#pills-chat-tab').tab('show');
+				$("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
 			});
 			});
 		});
 		});
 
 
 		let roomListTitle = getLocalizedString("roomListTitle")
 		let roomListTitle = getLocalizedString("roomListTitle")
 		$('.titleRoomName').text(roomListTitle)
 		$('.titleRoomName').text(roomListTitle)
 
 
-		jQuery('.chat_list.active_chat').on('click', function(e){
-			jQuery('#pills-chat-tab').tab('show');
+		$('.chat_list.active_chat').on('click', function(e){
+			$('#pills-chat-tab').tab('show');
 		});
 		});
 	} else {
 	} else {
 		// チャットルーム削除アイコンが表示されていない場合、表示する
 		// チャットルーム削除アイコンが表示されていない場合、表示する
-		jQuery('.deleteBox').finish().hide().fadeTo('slow',1).show();
+		$('.deleteBox').finish().hide().fadeTo('slow',1).show();
 		// #36129に対応
 		// #36129に対応
 		let deleteRoomTitle = getLocalizedString("deleteRoomTitle")
 		let deleteRoomTitle = getLocalizedString("deleteRoomTitle")
 		$('.titleRoomName').text(deleteRoomTitle)
 		$('.titleRoomName').text(deleteRoomTitle)
 		// 重複処理を防ぐためにチャットリストのクリックイベントを消す
 		// 重複処理を防ぐためにチャットリストのクリックイベントを消す
-		jQuery('.chat_list').off('click');
+		$('.chat_list').off('click');
 
 
 		// チャットルームの削除アイコンにクリックイベントを与える
 		// チャットルームの削除アイコンにクリックイベントを与える
-		jQuery('.deleteBox').off('click');
-		jQuery('.deleteBox').on('click', function(e){
+		$('.deleteBox').off('click');
+		$('.deleteBox').on('click', function(e){
 			// #36174
 			// #36174
-			let roomId = jQuery(this).data('roomId');
-			let activeRoom = jQuery(this).data('activeRoom');
+			let roomId = $(this).data('roomId');
+			let activeRoom = $(this).data('activeRoom');
 			$("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
 			$("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
 			$("#roomDelete").text(getLocalizedString("roomDelete"));
 			$("#roomDelete").text(getLocalizedString("roomDelete"));
 			$("#cancelTitle").text(getLocalizedString("cancelTitle"));
 			$("#cancelTitle").text(getLocalizedString("cancelTitle"));
@@ -106,7 +111,7 @@ jQuery('#roomDeleteButton').on('click', function(e){
 				CHAT_UI.showLoadingIndicator();
 				CHAT_UI.showLoadingIndicator();
 				// 現在接続されているチャットルームを離れるとメッセージテップを初期化する
 				// 現在接続されているチャットルームを離れるとメッセージテップを初期化する
 				if (activeRoom) {
 				if (activeRoom) {
-					jQuery('#messages').html('');
+					$('#messages').html('');
 					CHAT.saveRoomInfo('', '');
 					CHAT.saveRoomInfo('', '');
 				}
 				}
 				// チャットルームから退場する
 				// チャットルームから退場する
@@ -120,61 +125,24 @@ jQuery('#roomDeleteButton').on('click', function(e){
 	}
 	}
 });
 });
 
 
-// チャットルームのリストを未確認順で整列したデータを要請
-jQuery('#orderByUnread').on('click', function(event){
-	// #36145
-	jQuery('#orderByTime').removeClass('dropdown-item-checked')
-	jQuery('#orderByUnread').removeClass('dropdown-item-checked').addClass('dropdown-item-checked')
-	//loadingIndicatorを表示
-	CHAT_UI.showLoadingIndicator();
-	event.preventDefault();
-	socket.emit('getRoomList', true);
-});
-
-// メッセージの送信時間順で整列したデータを要請
-jQuery('#orderByTime').on('click', function(event){
-	// #36145
-	jQuery('#orderByTime').removeClass('dropdown-item-checked').addClass('dropdown-item-checked')
-	jQuery('#orderByUnread').removeClass('dropdown-item-checked')
-	//loadingIndicatorを表示
-	CHAT_UI.showLoadingIndicator();
-	event.preventDefault();
-	socket.emit('getRoomList');
-});
-
-// Room Keyword Search
-// キーワード検索機能
-jQuery('#roomKeywordSearch').on('shown.bs.dropdown', function (e){
-	jQuery('#roomKeyword').focus();
-});
-
-// #36145
-jQuery('#roomKeyButton').on('click', function(event) {
-	// #36147に対応
-	// キーワード検索の値が変更し、検索を行う
-	if (jQuery('#roomKeyword').val().length > 0) {
+$('#room-search').on('input', function(event) {
+	if ($('#room-search').val().length > 0) {
 		// 検索結果が有る場合、結果を表示する
 		// 検索結果が有る場合、結果を表示する
-		socket.emit('roomSearch', encodeURIComponent(jQuery('#roomKeyword').val()));
+		socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
 	} else {
 	} else {
-		// 検索結果がない場合、チャットルームのリストを表示する
-		// #36147; #36145; orderByUnreadにチェックした場合、該当状態にsortされるように
-		if(jQuery('#orderByTime').hasClass('dropdown-item-checked')) {
-			socket.emit('getRoomList');
-		} else {
-			socket.emit('getRoomList', true);
-		}
+		socket.emit('getRoomList');
 	}
 	}
 });
 });
 
 
 //上にスクロールすると新しいメッセージを呼ぶ処理。
 //上にスクロールすると新しいメッセージを呼ぶ処理。
-jQuery('#messages').scroll(function(){
-	if (jQuery(this).scrollTop() === 0) {
-		if (!jQuery('#chatLoader').is(':visible')) {
+$('#messages').scroll(function(){
+	if ($(this).scrollTop() === 0) {
+		if (!$('#chatLoader').is(':visible')) {
 			// 現在、メッセージの個数以前をメッセージを読み込む
 			// 現在、メッセージの個数以前をメッセージを読み込む
 			// ローディングアイコンを追加する
 			// ローディングアイコンを追加する
-			let loader = jQuery('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
-			jQuery('#messages').prepend(loader)
-			socket.emit('getMessages', jQuery(this).children().length, function() {
+			let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
+			$('#messages').prepend(loader)
+			socket.emit('getMessages', $(this).children().length, function() {
 				// ローディングアイコンを削除する
 				// ローディングアイコンを削除する
 				loader.remove();
 				loader.remove();
 			});
 			});
@@ -183,59 +151,60 @@ jQuery('#messages').scroll(function(){
 });
 });
 
 
 //メッセージ送信
 //メッセージ送信
-jQuery('#message-form').on('keypress', function(event){
-	if (event.which == 13){
+$('#message-form').on('keypress', function(event){
+	if (event.which == 13) {
 		// Enterキーの処理
 		// Enterキーの処理
-		jQuery('#message-send-btn').click();
+		$('#message-send-btn').click();
 	}
 	}
 });
 });
 
 
 // 送信ボタンの処理
 // 送信ボタンの処理
-jQuery('#message-send-btn').on('click', function (e){
+$('#message-send-btn').on('click', function (e){
 	e.preventDefault();
 	e.preventDefault();
-	const messageTextBox = jQuery('#message-form');
+	const messageTextBox = $('#message-form');
 	const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
 	const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
 	messageTextBox.val('');
 	messageTextBox.val('');
 
 
-	if(message.length > 0) {
-		socket.emit('createMessage', {
-			text: message
-		}, 0);
+	if (message.length > 0) {
+		socket.emit(
+			'createMessage', { text: message }
+			, 0
+		);
 	}
 	}
-	jQuery('#message-form').focus();
+	$('#message-form').focus();
 });
 });
 
 
 // 写真アップロード
 // 写真アップロード
-jQuery('#fileUploadButton').on('click', function(){
-	jQuery('#imageInputTag').click();
+$('#fileUploadButton').on('click', function(){
+	$('#imageInputTag').click();
 });
 });
 
 
 // 動画アップロード
 // 動画アップロード
-jQuery('#fileUploadButton2').on('click', function(){
-	jQuery('#imageInputTag2').click();
+$('#fileUploadButton2').on('click', function(){
+	$('#imageInputTag2').click();
 });
 });
 
 
-jQuery('#imageInputTag').on('change', function(){
-	jQuery('#image-form').submit();
+$('#imageInputTag').on('change', function(){
+	$('#image-form').submit();
 });
 });
 
 
-jQuery('#imageInputTag2').on('change', function(){
-	jQuery('#image-form2').submit();
+$('#imageInputTag2').on('change', function(){
+	$('#image-form2').submit();
 });
 });
 
 
-jQuery('#image-form').on('submit', function(e){
+$('#image-form').on('submit', function(e){
 	e.preventDefault();
 	e.preventDefault();
-	const imageInputTag = jQuery('#imageInputTag');
+	const imageInputTag = $('#imageInputTag');
 	const file = imageInputTag.prop('files')[0];
 	const file = imageInputTag.prop('files')[0];
 	if (file) {
 	if (file) {
-		jQuery('.overlay').addClass('active undismissable');
-		jQuery('.loader').addClass('active');
+		$('.overlay').addClass('active undismissable');
+		$('.loader').addClass('active');
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		var fd = new FormData($(this)[0]);
 		var fd = new FormData($(this)[0]);
 
 
 		//画像の大きさが500pixelより大きかったら、thumbnailを生成
 		//画像の大きさが500pixelより大きかったら、thumbnailを生成
 		CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
 		CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
-			if(resizeFile && thumbnailCreated) {
+			if (resizeFile && thumbnailCreated) {
 				//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
 				//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
 				fd.append('thumb', resizeFile)
 				fd.append('thumb', resizeFile)
 			}
 			}
@@ -247,13 +216,13 @@ jQuery('#image-form').on('submit', function(e){
 	}
 	}
 });
 });
 
 
-jQuery('#image-form2').on('submit', function(e){
+$('#image-form2').on('submit', function(e){
 	e.preventDefault();
 	e.preventDefault();
-	const imageInputTag2 = jQuery('#imageInputTag2');
+	const imageInputTag2 = $('#imageInputTag2');
 	const file = imageInputTag2.prop('files')[0];
 	const file = imageInputTag2.prop('files')[0];
 	if (file) {
 	if (file) {
-		jQuery('.overlay').addClass('active undismissable');
-		jQuery('.loader').addClass('active');
+		$('.overlay').addClass('active undismissable');
+		$('.loader').addClass('active');
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		var fd = new FormData($(this)[0]);
 		var fd = new FormData($(this)[0]);
 
 
@@ -276,8 +245,8 @@ jQuery('#image-form2').on('submit', function(e){
 
 
 // Gallery Button
 // Gallery Button
 // ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中)
 // ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中)
-jQuery('#imageGalleryButton').on('click', function(){
-	jQuery('[data-lightbox=attachedImages]:last').click();
+$('#imageGalleryButton').on('click', function(){
+	$('[data-lightbox=attachedImages]:last').click();
 });
 });
 
 
 //lightbox Configuration
 //lightbox Configuration
@@ -288,49 +257,33 @@ lightbox.option({
 	'alwaysShowNavOnTouchDevices': true
 	'alwaysShowNavOnTouchDevices': true
 });
 });
 
 
-// templateMessage
-jQuery('#templateMessage .dropdown-item').on('click', function(event){
-	// ドロップダウンメッセージをクリックすると、当該メッセージを転送する。
-	jQuery('#message-form').val(jQuery(this).text());
-	jQuery('#message-send-btn').click();
-});
-
-// Chat Keyword Highlight
-jQuery('#chatKeywordSearch').on('shown.bs.dropdown', function (e){
-	// チャットキーワードドロップダウンを押すと、カーソルをキーワードウィンドウに移す。
-	jQuery('#chatKeyword').focus();
-});
-
-jQuery('#chatKeyword').on('input', function(event){
+$('#message-search').on('input', function(event) {
 	// チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用)
 	// チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用)
-	if (jQuery(this).val()) {
-		jQuery('.message_content').unmark();
-		jQuery('.message_content').mark(jQuery(this).val());
+	if ($(this).val()) {
+		$('.message_content').unmark();
+		$('.message_content').mark($(this).val());
 
 
-		if (jQuery('[data-markjs=true]').length > 0) {
+		if ($('[data-markjs=true]').length > 0) {
 			// マーキングされている単語があった場合、最後の単語にスクロールを移動する。
 			// マーキングされている単語があった場合、最後の単語にスクロールを移動する。
-			CHAT_UI.scrollToLastMarkedUnseen(jQuery(this).val());
+			CHAT_UI.scrollToLastMarkedUnseen($(this).val());
 		} else {
 		} else {
 			// マーキングされている単語がない場合、下段にスクロールする。
 			// マーキングされている単語がない場合、下段にスクロールする。
 			CHAT_UI.scrollToBottom();
 			CHAT_UI.scrollToBottom();
 		}
 		}
 	} else {
 	} else {
 		// チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。
 		// チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。
-		jQuery('.message_content').unmark();
+		$('.message_content').unmark();
 		CHAT_UI.scrollToBottom();
 		CHAT_UI.scrollToBottom();
 	}
 	}
 });
 });
 
 
-// 次のマーキングされた単語にスクロールを移動する。
-jQuery('#chatKeyword').on('keypress', function(event){
-	if (event.which == 13) {
-		// Enterキーの処理
-		CHAT_UI.scrollToLastMarkedUnseen(jQuery(this).val());
-	}
+//次のマーキングされた単語にスクロールを移動する。
+$('#pre-search').on('click', function(event) {
+	CHAT_UI.scrollToLastMarkedUnseen(jQuery('#message-search').val());
 });
 });
 
 
 // Exit Room
 // Exit Room
-jQuery('#exitRoom').on('click', function(event){
+$('#exitRoom').on('click', function(event){
 	// 36174
 	// 36174
 	$("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
 	$("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
 	$("#exitRoomOk").text(getLocalizedString("yesTitle"));
 	$("#exitRoomOk").text(getLocalizedString("yesTitle"));
@@ -345,31 +298,31 @@ jQuery('#exitRoom').on('click', function(event){
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		// チャットルームから退場する
 		// チャットルームから退場する
 		socket.emit('exitRoom');
 		socket.emit('exitRoom');
-		jQuery('#dismiss').click();
+		$('#dismiss').click();
 		CHAT.saveRoomInfo('', '');
 		CHAT.saveRoomInfo('', '');
 	});
 	});
 });
 });
 
 
 // Side Bar
 // Side Bar
-jQuery('#sidebarCollapse').on('click', function (){
+$('#sidebarCollapse').on('click', function (){
 	// open sidebar
 	// open sidebar
-	jQuery('#sidebar').addClass('active');
+	$('#sidebar').addClass('active');
 	// fade in the overlay
 	// fade in the overlay
-	jQuery('.overlay').addClass('active');
-	jQuery('.collapse.in').toggleClass('in');
-	jQuery('a[aria-expanded=true]').attr('aria-expanded', 'false');
+	$('.overlay').addClass('active');
+	$('.collapse.in').toggleClass('in');
+	$('a[aria-expanded=true]').attr('aria-expanded', 'false');
 });
 });
 
 
-jQuery('#dismiss, .overlay').on('click', function (){
+$('#dismiss, .overlay').on('click', function (){
 	// hide sidebar
 	// hide sidebar
-	jQuery('#sidebar').removeClass('active');
+	$('#sidebar').removeClass('active');
 	// hide overlay if dismissable
 	// hide overlay if dismissable
-	jQuery('.overlay:not(.undismissable)').removeClass('active');
+	$('.overlay:not(.undismissable)').removeClass('active');
 });
 });
 
 
 //Invite User
 //Invite User
 //招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中)
 //招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中)
-jQuery('#addUser').on('click', function(event){
+$('#addUser').on('click', function(event){
 	//loadingIndicatorを表示
 	//loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
 	CHAT_UI.showLoadingIndicator();
 	let isInvite = true;
 	let isInvite = true;
@@ -378,32 +331,32 @@ jQuery('#addUser').on('click', function(event){
 });
 });
 
 
 //グループ画面での検索
 //グループ画面での検索
-jQuery('#groupListKeyword').on('input', function(event) {
+$('#groupListKeyword').on('input', function(event) {
 	// data-name値で当該キーワードが入っているグループのみを表示する。
 	// data-name値で当該キーワードが入っているグループのみを表示する。
-	if (jQuery(this).val()) {
-		jQuery('.group_list:not([data-name*="'+jQuery(this).val()+'" i])').hide();
-		jQuery('.group_list[data-name*="'+jQuery(this).val()+'" i]').show();
+	if ($(this).val()) {
+		$('.group_list:not([data-name*="'+$(this).val()+'" i])').hide();
+		$('.group_list[data-name*="'+$(this).val()+'" i]').show();
 	} else {
 	} else {
-		jQuery('.group_list').show();
+		$('.group_list').show();
 	}
 	}
 });
 });
 
 
-jQuery('#userListKeyword').on('input', function(event) {
+$('#userListKeyword').on('input', function(event) {
 	// data-name値で当該キーワードが入っているユーザーのみを表示する。
 	// data-name値で当該キーワードが入っているユーザーのみを表示する。
-	if (jQuery(this).val()) {
-		jQuery('.user_list:not([data-name*="'+jQuery(this).val()+'" i])').hide();
-		jQuery('.user_list[data-name*="'+jQuery(this).val()+'" i]').show();
+	if ($(this).val()) {
+		$('.user_list:not([data-name*="'+$(this).val()+'" i])').hide();
+		$('.user_list[data-name*="'+$(this).val()+'" i]').show();
 	} else {
 	} else {
-		jQuery('.user_list').show();
+		$('.user_list').show();
 	}
 	}
 });
 });
 
 
-jQuery('#selectListKeyword').on('input', function(event) {
-	if (jQuery(this).val()) {
-		jQuery('.select_user_list:not([data-name*="'+jQuery(this).val()+'" i])').hide();
-		jQuery('.select_user_list[data-name*="'+jQuery(this).val()+'" i]').show();
+$('#selectListKeyword').on('input', function(event) {
+	if ($(this).val()) {
+		$('.select_user_list:not([data-name*="'+$(this).val()+'" i])').hide();
+		$('.select_user_list[data-name*="'+$(this).val()+'" i]').show();
 	} else {
 	} else {
-		jQuery('.select_user_list').show();
+		$('.select_user_list').show();
 	}
 	}
 });
 });
 
 
@@ -414,8 +367,8 @@ jQuery('#selectListKeyword').on('input', function(event) {
 /* ---------------------------------------------------------------------- */
 /* ---------------------------------------------------------------------- */
 
 
 // Tab Open/Shown Event
 // Tab Open/Shown Event
-jQuery('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
-	var target = jQuery(e.target).attr("href"); // e.target : activated tab
+$('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
+	var target = $(e.target).attr("href"); // e.target : activated tab
 	switch(target) {
 	switch(target) {
 		case '#pills-chat':
 		case '#pills-chat':
 			if (CHAT_UI.isLandscapeMode()) {
 			if (CHAT_UI.isLandscapeMode()) {
@@ -424,14 +377,16 @@ jQuery('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 				$(".mesgs").removeClass("landscape_mesgs");
 				$(".mesgs").removeClass("landscape_mesgs");
 			}
 			}
 			CHAT.globalIsInvite = true;
 			CHAT.globalIsInvite = true;
-			jQuery('.chatRoomIcon, .titleRoomName, #backButton').show();
-			jQuery('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
-			jQuery('.titleRoomName').text(jQuery('.titleRoomName').data('roomName'));
-			jQuery('#newRoomName').val('');
-			jQuery('#userSelectionLength').text('');
+			$('.chatRoomIcon, .titleRoomName, #backButton').show();
+			$('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
+			$('#homeButton').hide();
+
+			$('.titleRoomName').text($('.titleRoomName').data('roomName'));
+			$('#newRoomName').val('');
+			$('#userSelectionLength').text('');
 			CHAT.globalSelectedUserList = [];
 			CHAT.globalSelectedUserList = [];
 
 
-			jQuery('#backButton').off().on('click', function() {
+			$('#backButton').off().on('click', function() {
 				//loadingIndicatorを表示
 				//loadingIndicatorを表示
 				CHAT_UI.showLoadingIndicator();
 				CHAT_UI.showLoadingIndicator();
 				socket.emit('leaveRoom', function() {
 				socket.emit('leaveRoom', function() {
@@ -444,76 +399,76 @@ jQuery('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
 			CHAT_UI.dismissLoadingIndicator();
 			CHAT_UI.dismissLoadingIndicator();
 			break;
 			break;
 		case '#pills-chatlist':
 		case '#pills-chatlist':
-			jQuery('.titleRoomName, #backButton').show();
-			jQuery('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
-
+			$('.titleRoomName, #backButton').show();
+			$('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
+			$('#homeButton').show();
+			$('#room-search').val('');
 			// set Title
 			// set Title
 			let roomListTitle = getLocalizedString("roomListTitle")
 			let roomListTitle = getLocalizedString("roomListTitle")
 
 
-			jQuery('.titleRoomName').text(roomListTitle);
-			jQuery('#newRoomName').val('');
-			jQuery('#userSelectionLength').text('');
+			$('.titleRoomName').text(roomListTitle);
+			$('#newRoomName').val('');
+			$('#userSelectionLength').text('');
 			CHAT.globalSelectedUserList = [];
 			CHAT.globalSelectedUserList = [];
-			// #36145
-			jQuery('#orderByTime').removeClass('dropdown-item-checked').addClass('dropdown-item-checked')
-			jQuery('#orderByUnread').removeClass('dropdown-item-checked')
+
 			break;
 			break;
 		case '#pills-user':
 		case '#pills-user':
-			jQuery("#backButton").show();
-			jQuery("#userSelectionDeleteBtn").hide();
+			$("#backButton").show();
+			$("#userSelectionDeleteBtn").hide();
+			$('#homeButton').hide();
 			//loadingIndicatorを表示しない
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			CHAT_UI.dismissLoadingIndicator();
 			break;
 			break;
 		case '#pills-group':
 		case '#pills-group':
-			jQuery("#backButton").show();
-			jQuery("#userSelectionDeleteBtn").hide();
+			$("#backButton").show();
+			$("#userSelectionDeleteBtn").hide();
+			$('#homeButton').hide();
 			//loadingIndicatorを表示しない
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			CHAT_UI.dismissLoadingIndicator();
 			break;
 			break;
 		case '#pills-confirm':
 		case '#pills-confirm':
-			jQuery("#backButton").show();
+			$("#backButton").show();
 			//loadingIndicatorを表示しない
 			//loadingIndicatorを表示しない
 			CHAT_UI.dismissLoadingIndicator();
 			CHAT_UI.dismissLoadingIndicator();
-
-			jQuery('.titleRoomName').hide();
-			jQuery('#navbarLeft').addClass('col-9').removeClass('col-3');
+			$('#homeButton').hide();
+			$('.user_people').css("paddingLeft", "0px");
 			break;
 			break;
 		case '#pills-communication':	// コミュニケーションのタブ
 		case '#pills-communication':	// コミュニケーションのタブ
 		case '#pills-setting':	// 設定のタブ
 		case '#pills-setting':	// 設定のタブ
 		case '#pills-profile':	// ユーザプロファイルのタブ
 		case '#pills-profile':	// ユーザプロファイルのタブ
-			jQuery('.titleRoomName').show();
-			jQuery('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
-			jQuery('#backButton').hide();
+			$('.titleRoomName').show();
+			$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
+			$('#backButton').hide();
 			break;
 			break;
 		default:
 		default:
-			jQuery('.titleRoomName').show();
-			jQuery('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
-			jQuery('#backButton').hide();
+			$('.titleRoomName').show();
+			$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
+			$('#backButton').hide();
 			break;
 			break;
 	}
 	}
 });
 });
 
 
 // Tab Close/Hidden Event
 // Tab Close/Hidden Event
-jQuery('a[data-toggle="pill"]').on('hide.bs.tab', function (e){
-	var target = jQuery(e.target).attr("href"); // e.target : activated tab
+$('a[data-toggle="pill"]').on('hide.bs.tab', function (e){
+	var target = $(e.target).attr("href"); // e.target : activated tab
 	switch(target) {
 	switch(target) {
 		case '#pills-chat':
 		case '#pills-chat':
-			jQuery('#chatKeyword').val('');
+			$('#message-search').val('');
 			break;
 			break;
 		case '#pills-chatlist':
 		case '#pills-chatlist':
-			jQuery('#roomKeyword').val('');
+			$('#room-search').val('');
 			break;
 			break;
 		case '#pills-group':
 		case '#pills-group':
-			jQuery('#groupListKeyword').val('');
+			$('#groupListKeyword').val('');
 			break;
 			break;
 		case '#pills-user':
 		case '#pills-user':
-			jQuery('#userListKeyword').val('');
+			$('#userListKeyword').val('');
 			break;
 			break;
 		case '#pills-confirm':
 		case '#pills-confirm':
-			jQuery('#select_user_list').html('');
-			jQuery('#selectUserListKeyword').val('');
-			jQuery('.titleRoomName').show();
-			jQuery('#navbarLeft').addClass('col-3').removeClass('col-9');
+			$('#select_user_list').html('');
+			$('#selectUserListKeyword').val('');
+			$('.titleRoomName').show();
+			$('.user_people').css("paddingLeft", "12%");
 			break;
 			break;
 		case '#pills-communication':
 		case '#pills-communication':
 		case '#pills-setting':
 		case '#pills-setting':
@@ -524,36 +479,36 @@ jQuery('a[data-toggle="pill"]').on('hide.bs.tab', function (e){
 	}
 	}
 });
 });
 
 
-jQuery('#pills-chat-tab').on('shown.bs.tab', function (e){
+$('#pills-chat-tab').on('shown.bs.tab', function (e){
 	CHAT_UI.scrollToBottom();
 	CHAT_UI.scrollToBottom();
 });
 });
 
 
-jQuery('#pills-user-tab').on('shown.bs.tab', function (e){
-	jQuery('#userSelectionConfirmBtn').show();
+$('#pills-user-tab').on('shown.bs.tab', function (e){
+	$('#userSelectionConfirmBtn').show();
 });
 });
 
 
-jQuery('#pills-confirm-tab').on('shown.bs.tab', function (e){
-	jQuery('#userSelectionConfirmBtn').show();
-	jQuery('#userSelectionLength').text('');
-	jQuery('#userSelectionDeleteBtn').hide();
+$('#pills-confirm-tab').on('shown.bs.tab', function (e){
+	$('#userSelectionConfirmBtn').show();
+	$('#userSelectionLength').text('');
+	$('#userSelectionDeleteBtn').hide();
 });
 });
 
 
 CHAT_UI.scrollToBottom = function() {
 CHAT_UI.scrollToBottom = function() {
-	const messages = jQuery('#messages');
+	const messages = $('#messages');
 	const scrollHeight = messages.prop('scrollHeight');
 	const scrollHeight = messages.prop('scrollHeight');
 	messages.scrollTop(scrollHeight);
 	messages.scrollTop(scrollHeight);
 };
 };
 
 
 CHAT_UI.scrollToLastMarkedUnseen = function(value) {
 CHAT_UI.scrollToLastMarkedUnseen = function(value) {
-	let target = jQuery('[data-markjs=true]:not([data-seen=true])').last();
-	let messages = jQuery('#messages');
+	let target = $('[data-markjs=true]:not([data-seen=true])').last();
+	let messages = $('#messages');
 	if (target.length > 0) {
 	if (target.length > 0) {
 		messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height());
 		messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height());
 		target.attr('data-seen', true);
 		target.attr('data-seen', true);
 	} else {
 	} else {
 		messages.scrollTop(0);
 		messages.scrollTop(0);
-		jQuery('.message_content').unmark();
-		jQuery('.message_content').mark(value);
+		$('.message_content').unmark();
+		$('.message_content').mark(value);
 	}
 	}
 };
 };
 
 
@@ -577,30 +532,28 @@ CHAT_UI.isLandscapeMode = function() {
 }
 }
 
 
 CHAT_UI.setConfirmButtonEvent = function(isInvite) {
 CHAT_UI.setConfirmButtonEvent = function(isInvite) {
-	jQuery('#userSelectionConfirmBtn').show();
 	let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle")
 	let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle")
-
+	let invitedUserText = getLocalizedString("invitedUser")
 	if (!isInvite) {
 	if (!isInvite) {
-		jQuery('#newRoomName').show();
+		$('#newRoomName').show();
 	}
 	}
 
 
-	jQuery('#userSelectionConfirmBtn').off().on('click', function(event) {
+	$('#userSelectionConfirmBtn').off().on('click', function(event) {
 		//loadingIndicatorを表示
 		//loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showConfirmView(isInvite);
 		CHAT_UI.showConfirmView(isInvite);
 	});
 	});
 
 
 	CHAT_UI.showConfirmView(isInvite);
 	CHAT_UI.showConfirmView(isInvite);
-	jQuery('#inviteStatus').text(titleText);
-	jQuery('.roomListIcon, .titleRoomName').hide();
-	jQuery('.userCheckBox').show();
-	jQuery('#pills-confirm-tab').tab('show');
+	$('#inviteStatus').text(titleText);
+	$('#invitedUsers').text(invitedUserText);
+	$('#pills-confirm-tab').tab('show');
 }
 }
 
 
 //ConfirmView initialize
 //ConfirmView initialize
 CHAT_UI.showConfirmView = function(isInvite) {
 CHAT_UI.showConfirmView = function(isInvite) {
-	const template = jQuery('#user-template').html();
-	jQuery('#select_user_list').html('');
+	const template = $('#user-template').html();
+	$('#select_user_list').html('');
 
 
 	CHAT.globalSelectedUserList.forEach(function(user){
 	CHAT.globalSelectedUserList.forEach(function(user){
 		let html = Mustache.render(template, {
 		let html = Mustache.render(template, {
@@ -608,39 +561,38 @@ CHAT_UI.showConfirmView = function(isInvite) {
 			profileImage: user.profileImagePath,
 			profileImage: user.profileImagePath,
 			name: user.loginId
 			name: user.loginId
 		});
 		});
-
-		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
-			jQuery(this).find('.userCheckBox').toggleClass('active');
-
-			if (jQuery('#select_user_list .user_list').find(".userCheckBox.active").length > 0) {
-				jQuery("#userSelectionDeleteBtn").show();
-			} else {
-				jQuery("#userSelectionDeleteBtn").hide();
-			}
+		// TODO 次のコミットに参考事項
+		// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
+		// 影響テスト後、削除予定。 kang-dh
+		let obj = $(jQuery.parseHTML(html)).on('click',function(){
+			$(this).find('.userCheckBox').toggleClass('active');
 		});
 		});
 
 
-		jQuery('#select_user_list').append(obj);
+		$('#select_user_list').append(obj);
 	});
 	});
 
 
+	let roomListTitle = getLocalizedString("createRoomTitle")
+	$('.titleRoomName').text(roomListTitle)
+
 	// Rotate
 	// Rotate
 	if(CHAT_UI.isLandscapeMode()){
 	if(CHAT_UI.isLandscapeMode()){
-		jQuery(".user_list").addClass("col-6").removeClass("col-12");
+		$(".user_list").addClass("col-6").removeClass("col-12");
 		$(".squareBoxContent span").addClass("landscape_span");
 		$(".squareBoxContent span").addClass("landscape_span");
 	}
 	}
 
 
-	jQuery('#backButton').off().on('click', function() {
+	$('#backButton').off().on('click', function() {
 		//loadingIndicatorを表示
 		//loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		socket.emit('getGroupList', isInvite)
 		socket.emit('getGroupList', isInvite)
 	});
 	});
 
 
-	jQuery("#userSelectionConfirmBtn").off().on('click', function(){
+	$("#userSelectionConfirmBtn").off().on('click', function(){
 		if (isInvite) {
 		if (isInvite) {
-			let userIdList = jQuery.makeArray(jQuery('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
+			let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
 				return e.dataset.id;
 				return e.dataset.id;
 			});
 			});
 			// ユーザーの名前(login id)リスト。
 			// ユーザーの名前(login id)リスト。
-			let loginIdList = jQuery.makeArray(jQuery('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
+			let loginIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
 				return e.dataset.name;
 				return e.dataset.name;
 			});
 			});
 
 
@@ -648,26 +600,39 @@ CHAT_UI.showConfirmView = function(isInvite) {
 				//loadingIndicatorを表示
 				//loadingIndicatorを表示
 				CHAT_UI.showLoadingIndicator();
 				CHAT_UI.showLoadingIndicator();
 				socket.emit('inviteUsers', userIdList, loginIdList, function() {
 				socket.emit('inviteUsers', userIdList, loginIdList, function() {
-					jQuery("#userSelectionDeleteBtn").hide();
-					jQuery('#pills-chat-tab').tab('show');
+					$("#userSelectionDeleteBtn").hide();
+					$('#pills-chat-tab').tab('show');
 				});
 				});
 			}
 			}
 		} else {
 		} else {
-			if (jQuery('#select_user_list .user_list').find('.userCheckBox').length > 0) {
+			if ($('#select_user_list .user_list').find('.userCheckBox').length > 0) {
 				// #36130に対応
 				// #36130に対応
-				const trimmedRoomName = jQuery('#newRoomName').val().trim()
+				const trimmedRoomName = $('#newRoomName').val().trim()
 				if (trimmedRoomName.length == 0) {
 				if (trimmedRoomName.length == 0) {
-					// 36174
-					$("#userSelectionTitle").text(getLocalizedString("inputRoomName"));
-					$("#yesTitle").text(getLocalizedString("yesTitle"));
 
 
-					$('#confirm').appendTo("body").modal({
-							backdrop: 'static',
-							keyboard: false
-					})
-					.on('click', '#yesTitle', function(e) {
-						//ルーム名を入力しなかったら、ルーム名textFieldにfocusを置く
-						jQuery('#newRoomName').focus();
+					// loadingIndicatorを表示
+					CHAT_UI.showLoadingIndicator();
+					let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
+						return e.dataset.id;
+					});
+					let userNameList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
+						return e.dataset.name;
+					});
+
+					//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
+					// 参加ユーザ名でルーム名を生成
+					let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
+
+					// ルーム名のURIencodingを行う
+					const encodedRoomName = encodeURIComponent(newRoomName);
+					socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
+						socket.emit('joinRoom', newRoomId, newRoomName, function () {
+							CHAT.saveRoomInfo(newRoomId, newRoomName);
+							$('#messages').html('');
+							$('.titleRoomName').text(newRoomName).data('roomName', newRoomName);
+							$("#userSelectionDeleteBtn").hide();
+							$('#pills-chat-tab').tab('show');
+						});
 					});
 					});
 
 
 				} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
 				} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
@@ -704,7 +669,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
 				} else {
 				} else {
 					//loadingIndicatorを表示
 					//loadingIndicatorを表示
 					CHAT_UI.showLoadingIndicator();
 					CHAT_UI.showLoadingIndicator();
-					let userIdList = jQuery.makeArray(jQuery('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
+					let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
 						return e.dataset.id;
 						return e.dataset.id;
 					});
 					});
 
 
@@ -713,10 +678,10 @@ CHAT_UI.showConfirmView = function(isInvite) {
 					socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
 					socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
 						socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
 						socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
 							CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
 							CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
-							jQuery('#messages').html('');
-							jQuery('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
-							jQuery("#userSelectionDeleteBtn").hide();
-							jQuery('#pills-chat-tab').tab('show');
+							$('#messages').html('');
+							$('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
+							$("#userSelectionDeleteBtn").hide();
+							$('#pills-chat-tab').tab('show');
 						});
 						});
 					});
 					});
 				}
 				}
@@ -724,9 +689,9 @@ CHAT_UI.showConfirmView = function(isInvite) {
 		}
 		}
 	});
 	});
 
 
-	jQuery("#userSelectionDeleteBtn").hide();
+	$("#userSelectionDeleteBtn").hide();
 
 
-	jQuery("#userSelectionDeleteBtn").off().on('click', function() {
+	$("#userSelectionDeleteBtn").off().on('click', function() {
 		// #36174
 		// #36174
 		$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
 		$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
 		$("#customConfirmOk").text(getLocalizedString("roomDelete"));
 		$("#customConfirmOk").text(getLocalizedString("roomDelete"));
@@ -745,14 +710,14 @@ CHAT_UI.showConfirmView = function(isInvite) {
 
 
 CHAT_UI.deleteButtonAction = function(isInvite) {
 CHAT_UI.deleteButtonAction = function(isInvite) {
 	//配列の整理
 	//配列の整理
-	jQuery.makeArray(jQuery('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) {
+	jQuery.makeArray($('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) {
 		CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
 		CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
 			return e.dataset.name != element.loginId;
 			return e.dataset.name != element.loginId;
 		});
 		});
 	});
 	});
 
 
 	CHAT_UI.showConfirmView(isInvite)
 	CHAT_UI.showConfirmView(isInvite)
-	jQuery('#select_user_list .user_list').find('.userCheckBox').show();
+	$('#select_user_list .user_list').find('.userCheckBox').show();
 }
 }
 
 
 CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 CHAT_UI.htmlElementTextInitialize = function(languageCode) {
@@ -760,6 +725,7 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 	setLanguage(languageCode);
 	setLanguage(languageCode);
 	$(".titleRoomName").text(getLocalizedString("roomListTitle"));
 	$(".titleRoomName").text(getLocalizedString("roomListTitle"));
 	$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
 	$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
+	$("#message-search").attr("placeholder",$("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
 	$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
 	$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
 	$("#participants").text(getLocalizedString("participants"))
 	$("#participants").text(getLocalizedString("participants"))
 
 
@@ -771,16 +737,10 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 	$("#thankLabel").text(getLocalizedString("thankLabel"))
 	$("#thankLabel").text(getLocalizedString("thankLabel"))
 	$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"))
 	$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"))
 
 
-	$("#orderByTime").text(getLocalizedString("orderByTime"))
-	$("#orderByUnread").text(getLocalizedString("orderByUnread"))
-
-	$("#roomKeyword").attr("placeholder", getLocalizedString("roomKeywordPlaceHolder"))
-	$("#groupListKeyword").attr("placeholder", getLocalizedString("groupListKeyword"))
-
-	$("#groupPageSubtitle").text(getLocalizedString("groupPageSubtitle"))
 
 
-	$("#chatKeyword").attr("placeholder", getLocalizedString("roomKeywordPlaceHolder"))
-	$("#userListKeyword").attr("placeholder", getLocalizedString("userListKeyword"))
+	$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"))
+	$("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder"));
+	$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"))
 	$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
 	$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
 }
 }
 
 

ABVJE_Launcher_Android/assets/chat/public/js/chat-websocket.js

@@ -6,7 +6,7 @@ var socket = io(CHAT_SERVER_URL);
 
 
 socket.on('connect', function (){
 socket.on('connect', function (){
 	// socketが接続されたらチャット画面で画面を更新する
 	// socketが接続されたらチャット画面で画面を更新する
-	jQuery('.overlay').removeClass('active undismissable');
+	$('.overlay').removeClass('active undismissable');
 	// loadingIndicatorを表示
 	// loadingIndicatorを表示
 	CHAT_UI.showLoadingIndicator();
 	CHAT_UI.showLoadingIndicator();
 	// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
 	// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
@@ -19,13 +19,13 @@ socket.on('connect', function (){
 
 
 socket.on('disconnect', function (){
 socket.on('disconnect', function (){
 	//socketが切断されたら黒画面で画面を更新する
 	//socketが切断されたら黒画面で画面を更新する
-	jQuery('.overlay').addClass('active undismissable');
+	$('.overlay').addClass('active undismissable');
 	//alert('Disconnected from the server');
 	//alert('Disconnected from the server');
 	CHAT_UI.dismissLoadingIndicator();
 	CHAT_UI.dismissLoadingIndicator();
 });
 });
 
 
 socket.on('connect_error', function (){
 socket.on('connect_error', function (){
-//	jQuery('.overlay').addClass('active undismissable');
+//	$('.overlay').addClass('active undismissable');
 	// #36174
 	// #36174
 //	$("#customAlertTitle").text(getLocalizedString("errorConnect"));
 //	$("#customAlertTitle").text(getLocalizedString("errorConnect"));
 //	$("#customAlertOk").text(getLocalizedString("yesTitle"));
 //	$("#customAlertOk").text(getLocalizedString("yesTitle"));
@@ -48,32 +48,32 @@ socket.on('connect_error', function (){
 // Update Room List
 // Update Room List
 socket.on('refreshRoomList', function(rooms, activeRoomId = null){
 socket.on('refreshRoomList', function(rooms, activeRoomId = null){
 	CHAT.globalIsInvite = false;
 	CHAT.globalIsInvite = false;
-	// チャットルームリストを削除する
-	jQuery('#room_list').html('');
 
 
-	// #36146に対応
-	let roomListTitle = getLocalizedString("roomListTitle")
-	$('.titleRoomName').text(roomListTitle)
 
 
+	// #36146に対応
 	let keywordSearchMode = false;
 	let keywordSearchMode = false;
-	if(jQuery('#roomKeyword').val().length > 0) {
+	if ($('#room-search').val().length > 0) {
 		keywordSearchMode = true;
 		keywordSearchMode = true;
 	}
 	}
 
 
+	$('#room_list').html('');
+	let roomListTitle = getLocalizedString("roomListTitle");
+	$('.titleRoomName').text(roomListTitle);
+
 	if (rooms.length === 0) {
 	if (rooms.length === 0) {
 		// #36146に対応
 		// #36146に対応
 		// 検索結果がない場合のメッセージを追加
 		// 検索結果がない場合のメッセージを追加
 		if (!keywordSearchMode) {
 		if (!keywordSearchMode) {
 			let emptyListString = getLocalizedString("roomListEmptyString")
 			let emptyListString = getLocalizedString("roomListEmptyString")
-			jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
+			$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
 		} else {
 		} else {
 			let emptyListString = getLocalizedString("searchRoomListEmptyString")
 			let emptyListString = getLocalizedString("searchRoomListEmptyString")
-			jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
+			$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
 		}
 		}
 	}
 	}
 
 
 	// チャットルームの様式を読み込む
 	// チャットルームの様式を読み込む
-	const template = jQuery('#room-template').html();
+	const template = $('#room-template').html();
 
 
 	rooms.forEach( function(room) {
 	rooms.forEach( function(room) {
 		room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
 		room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
@@ -96,24 +96,24 @@ socket.on('refreshRoomList', function(rooms, activeRoomId = null){
 		});
 		});
 
 
 		// Click event
 		// Click event
-		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
+		let obj = $(jQuery.parseHTML(html)).on('click',function(){
 			if (activeRoomId === room.roomId) {
 			if (activeRoomId === room.roomId) {
 				// 既存チャットルームをタッチする場合、チャット画面に遷移
 				// 既存チャットルームをタッチする場合、チャット画面に遷移
-				jQuery('#pills-chat-tab').tab('show');
+				$('#pills-chat-tab').tab('show');
 			} else {
 			} else {
 				// loadingIndicatorを表示しない
 				// loadingIndicatorを表示しない
 				CHAT_UI.showLoadingIndicator();
 				CHAT_UI.showLoadingIndicator();
 				// 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
 				// 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
 				socket.emit('joinRoom', room.roomId, room.roomName, function (){
 				socket.emit('joinRoom', room.roomId, room.roomName, function (){
 					CHAT.saveRoomInfo(room.roomId, room.roomName);
 					CHAT.saveRoomInfo(room.roomId, room.roomName);
-					jQuery('#messages').html('');
+					$('#messages').html('');
 					// チャットルーム名を変更する
 					// チャットルーム名を変更する
-					jQuery('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
+					$('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
 				});
 				});
 			}
 			}
 		});
 		});
 		// チャットルームリストに追加する
 		// チャットルームリストに追加する
-		jQuery('#room_list').append(obj);
+		$('#room_list').append(obj);
 	});
 	});
 
 
 	// #36146に対応
 	// #36146に対応
@@ -134,16 +134,16 @@ socket.on('refreshRoomList', function(rooms, activeRoomId = null){
 		}
 		}
 	}
 	}
 
 
-	jQuery('#createChatRoom').show()
+	$('#createChatRoom').show()
 
 
 	// Rotate
 	// Rotate
 	if(CHAT_UI.isLandscapeMode()) {
 	if(CHAT_UI.isLandscapeMode()) {
 		$(".chat_list").removeClass("col-12").addClass("col-6");
 		$(".chat_list").removeClass("col-12").addClass("col-6");
 	}
 	}
 
 
-	jQuery("#userSelectionDeleteBtn").hide();
+	$("#userSelectionDeleteBtn").hide();
 	// チャットルームリスト画面に遷移
 	// チャットルームリスト画面に遷移
-	jQuery('#pills-chatlist-tab').tab('show');
+	$('#pills-chatlist-tab').tab('show');
 
 
 	// loadingIndicatorを表示しない
 	// loadingIndicatorを表示しない
 	CHAT_UI.dismissLoadingIndicator();
 	CHAT_UI.dismissLoadingIndicator();
@@ -152,10 +152,10 @@ socket.on('refreshRoomList', function(rooms, activeRoomId = null){
 // New Message
 // New Message
 // #36170
 // #36170
 socket.on('newMessage', function (message, roomId, roomName){
 socket.on('newMessage', function (message, roomId, roomName){
-	let template = jQuery('#message-template').html();
+	let template = $('#message-template').html();
 	if (message.id === socket.id) {
 	if (message.id === socket.id) {
 		// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
 		// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
-		template = jQuery('#message-template-me').html();
+		template = $('#message-template-me').html();
 	}
 	}
 	let messageTime = CHAT_UTIL.formatDate(message.createdAt);
 	let messageTime = CHAT_UTIL.formatDate(message.createdAt);
 
 
@@ -175,7 +175,7 @@ socket.on('newMessage', function (message, roomId, roomName){
 	 });
 	 });
 	 // イメージの場合、img tagを追加する
 	 // イメージの場合、img tagを追加する
 	 html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
 	 html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
-	 jQuery('#messages').append(html);
+	 $('#messages').append(html);
 
 
 	 // 画像、動画の描画を待ってからスクロール
 	 // 画像、動画の描画を待ってからスクロール
 	setTimeout(function () {
 	setTimeout(function () {
@@ -186,21 +186,21 @@ socket.on('newMessage', function (message, roomId, roomName){
 // Notification
 // Notification
 socket.on('newNotification', function(keyword, event){
 socket.on('newNotification', function(keyword, event){
 	var notificationString = getLocalizedString(event, keyword)
 	var notificationString = getLocalizedString(event, keyword)
-	jQuery('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp();
+	$('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp();
 });
 });
 
 
 // 新しいメッセージを受信する場合の処理
 // 新しいメッセージを受信する場合の処理
 // #36170
 // #36170
 socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
 socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
-	let jQueryMessages = jQuery('#messages');
+	let jQueryMessages = $('#messages');
 	// スクロールの変化を防ぐため以前画面の高さを保存する
 	// スクロールの変化を防ぐため以前画面の高さを保存する
 	let beforeHeight = jQueryMessages.prop('scrollHeight');
 	let beforeHeight = jQueryMessages.prop('scrollHeight');
 	// メッセージ文字列の生成
 	// メッセージ文字列の生成
 	let workVal = "";
 	let workVal = "";
 	messages.forEach(function(message) {
 	messages.forEach(function(message) {
-		let template = jQuery('#message-template').html();
+		let template = $('#message-template').html();
 		if (message.shopMemberId == shopMemberId) {
 		if (message.shopMemberId == shopMemberId) {
-			 template = jQuery('#message-template-me').html();
+			 template = $('#message-template-me').html();
 		}
 		}
 		let messageTime = CHAT_UTIL.formatDate(message.time.time);
 		let messageTime = CHAT_UTIL.formatDate(message.time.time);
 
 
@@ -241,27 +241,27 @@ socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomNa
 		CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
 		CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
 		// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
 		// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
 		if ($(window).height() > jQueryMessages.height()) {
 		if ($(window).height() > jQueryMessages.height()) {
-			jQuery('#messages').scroll();
+			$('#messages').scroll();
 		}
 		}
 	}
 	}
 
 
 	// ユーザ削除ボタン表示しない
 	// ユーザ削除ボタン表示しない
-	jQuery("#userSelectionDeleteBtn").hide();
+	$("#userSelectionDeleteBtn").hide();
 
 
 	CHAT_UI.dismissLoadingIndicator();// add some...
 	CHAT_UI.dismissLoadingIndicator();// add some...
 
 
 	// チャットに遷移する
 	// チャットに遷移する
-	jQuery('#pills-chat-tab').tab('show');
+	$('#pills-chat-tab').tab('show');
 });
 });
 
 
 // Update User List In Room
 // Update User List In Room
 // サイドバーのユーザーリストアップデート。
 // サイドバーのユーザーリストアップデート。
 socket.on('updateUserList', function(users, onlineUsers){
 socket.on('updateUserList', function(users, onlineUsers){
 	if (users.length > 0) {
 	if (users.length > 0) {
-		jQuery('#users').removeData();
-		jQuery('#users').data(users);
+		$('#users').removeData();
+		$('#users').data(users);
 	} else {
 	} else {
-		const data = jQuery('#users').data();
+		const data = $('#users').data();
 		if(data && Object.keys(data).length > 0){
 		if(data && Object.keys(data).length > 0){
 			 users = Object.keys(data).map(function(key) {
 			 users = Object.keys(data).map(function(key) {
 				 return data[key];
 				 return data[key];
@@ -269,12 +269,12 @@ socket.on('updateUserList', function(users, onlineUsers){
 		}
 		}
 	}
 	}
 
 
-	const ul = jQuery('<ul/>', {class: 'list-unstyled components'});
+	const ul = $('<ul/>', {class: 'list-unstyled components'});
 	// ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
 	// ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
 	let inviteString = getLocalizedString("inviteUsersButton")
 	let inviteString = getLocalizedString("inviteUsersButton")
 
 
-	ul.append(jQuery('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event){
-		jQuery('#dismiss').click();
+	ul.append($('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event){
+		$('#dismiss').click();
 		// loadingIndicatorを表示
 		// loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		let isInvite = true;
 		let isInvite = true;
@@ -284,24 +284,24 @@ socket.on('updateUserList', function(users, onlineUsers){
 
 
 	// ユーザーリストを入れる
 	// ユーザーリストを入れる
 	users.forEach(function (user){
 	users.forEach(function (user){
-		 let li = jQuery('<li/>');
-		 let a = jQuery('<a/>').text(user);
+		 let li = $('<li/>');
+		 let a = $('<a/>').text(user);
 		 if (onlineUsers.includes(user)) {
 		 if (onlineUsers.includes(user)) {
 		 // 接続されているユーザにバッジを付ける。
 		 // 接続されているユーザにバッジを付ける。
-		 a.append(jQuery('<span/>',{class:'badge badge-success'}).text('online'));
+		 a.append($('<span/>',{class:'badge badge-success'}).text('online'));
 		}
 		}
 		li.append(a);
 		li.append(a);
 		ul.append(li);
 		ul.append(li);
 	});
 	});
-jQuery('#users').html(ul);
+$('#users').html(ul);
 });
 });
 
 
 // Update Group List(Invite)
 // Update Group List(Invite)
 socket.on('refreshGroupList', function(groups, isInvite){
 socket.on('refreshGroupList', function(groups, isInvite){
-	jQuery('#group_list').html('');
-	const template = jQuery('#group-template').html();
+	$('#group_list').html('');
+	const template = $('#group-template').html();
 	if (groups.length === 0) {
 	if (groups.length === 0) {
-		jQuery('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
+		$('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
 	}
 	}
 	// グループ名と人数を表記する。
 	// グループ名と人数を表記する。
 	groups.forEach( function(group) {
 	groups.forEach( function(group) {
@@ -310,54 +310,54 @@ socket.on('refreshGroupList', function(groups, isInvite){
 			info: group.memberCnt + getLocalizedString("people")
 			info: group.memberCnt + getLocalizedString("people")
 		});
 		});
 		// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
 		// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
-		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
+		let obj = $(jQuery.parseHTML(html)).on('click',function(){
 			// loadingIndicatorを表示
 			// loadingIndicatorを表示
 			CHAT_UI.showLoadingIndicator();
 			CHAT_UI.showLoadingIndicator();
 			socket.emit('getUserListInGroup', group.groupId, isInvite);
 			socket.emit('getUserListInGroup', group.groupId, isInvite);
-			jQuery('#groupName').text(group.groupName);
+			$('#groupName').text(group.groupName);
 		});
 		});
-		jQuery('#group_list').append(obj);
+		$('#group_list').append(obj);
 	});
 	});
 
 
 	// Rotate
 	// Rotate
 	if(CHAT_UI.isLandscapeMode()) {
 	if(CHAT_UI.isLandscapeMode()) {
-		jQuery(".group_list").addClass("col-6").removeClass("col-12");
+		$(".group_list").addClass("col-6").removeClass("col-12");
 	}
 	}
 
 
 	// Set Title
 	// Set Title
-	let memberSelectTitle = getLocalizedString("inviteUsersTitle")
+	let memberSelectTitle = getLocalizedString("groupSearch")
 
 
-	jQuery('#pills-group-tab').tab('show');
+	$('#pills-group-tab').tab('show');
 
 
-	jQuery('#backButton').show();
+	$('#backButton').show();
 
 
 	if (isInvite) {
 	if (isInvite) {
-		jQuery('.titleRoomName').text(memberSelectTitle);
-		jQuery('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
-		jQuery('#userSelectionConfirmBtn').show();
-		jQuery("#userSelectionConfirmBtn").off().on('click', function(){
+		$('.titleRoomName').text(memberSelectTitle);
+		$('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
+		$('#userSelectionConfirmBtn').show();
+		$("#userSelectionConfirmBtn").off().on('click', function(){
 			CHAT_UI.setConfirmButtonEvent(isInvite);
 			CHAT_UI.setConfirmButtonEvent(isInvite);
 		});
 		});
 	} else {
 	} else {
-		jQuery('.titleRoomName').text(memberSelectTitle);
-		jQuery('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
-		jQuery('#userSelectionConfirmBtn').show();
-		jQuery("#userSelectionConfirmBtn").off().on('click', function(){
+		$('.titleRoomName').text(memberSelectTitle);
+		$('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
+		$('#userSelectionConfirmBtn').show();
+		$("#userSelectionConfirmBtn").off().on('click', function(){
 			CHAT_UI.setConfirmButtonEvent(isInvite);
 			CHAT_UI.setConfirmButtonEvent(isInvite);
 		});
 		});
 	}
 	}
 
 
 	if (CHAT.globalSelectedUserList.length > 0) {
 	if (CHAT.globalSelectedUserList.length > 0) {
-		jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
+		$('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
 	} else {
 	} else {
-		jQuery('#userSelectionLength').text('');
+		$('#userSelectionLength').text('');
 	}
 	}
 
 
-	jQuery('#backButton').off().on('click', function() {
+	$('#backButton').off().on('click', function() {
 		// loadingIndicatorを表示
 		// loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		if (isInvite) {
 		if (isInvite) {
-			jQuery('#pills-chat-tab').tab('show');
+			$('#pills-chat-tab').tab('show');
 		} else {
 		} else {
 			socket.emit('getRoomList');
 			socket.emit('getRoomList');
 		}
 		}
@@ -367,8 +367,12 @@ socket.on('refreshGroupList', function(groups, isInvite){
 // Update User List(Invite)
 // Update User List(Invite)
 // #36170
 // #36170
 socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
 socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
-	jQuery('#user_list').html('');
-	const template = jQuery('#user-template').html();
+	$('#user_list').html('');
+	const template = $('#user-template').html();
+
+	// Set Title
+	let memberSelectTitle = getLocalizedString("userSearch")
+	$('.titleRoomName').text(memberSelectTitle);
 
 
 	users.forEach( function(user) {
 	users.forEach( function(user) {
 		// loadingIndicatorを表示
 		// loadingIndicatorを表示
@@ -383,8 +387,8 @@ socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
 		});
 		});
 
 
 		// クリックするとactive クラスを与え、チェック表示を出させる。
 		// クリックするとactive クラスを与え、チェック表示を出させる。
-		let obj = jQuery(jQuery.parseHTML(html)).on('click',function(){
-			if (jQuery(this).find('.userCheckBox.active').length > 0) {
+		let obj = $(jQuery.parseHTML(html)).on('click',function(){
+			if ($(this).find('.userCheckBox.active').length > 0) {
 				// remove
 				// remove
 				CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
 				CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
 					return user.loginId != element.loginId;
 					return user.loginId != element.loginId;
@@ -393,12 +397,12 @@ socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
 				// add
 				// add
 				CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
 				CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
 			}
 			}
-			jQuery(this).find('.userCheckBox').toggleClass('active');
+			$(this).find('.userCheckBox').toggleClass('active');
 
 
 			if (CHAT.globalSelectedUserList.length > 0) {
 			if (CHAT.globalSelectedUserList.length > 0) {
-				jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
+				$('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
 			} else {
 			} else {
-				jQuery('#userSelectionLength').text('');
+				$('#userSelectionLength').text('');
 			}
 			}
 		});
 		});
 
 
@@ -407,36 +411,36 @@ socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
 		})
 		})
 
 
 		if (findObj) {
 		if (findObj) {
-			jQuery(obj).find('.userCheckBox').toggleClass('active');
+			$(obj).find('.userCheckBox').toggleClass('active');
 		}
 		}
 
 
-		jQuery('#user_list').append(obj);
+		$('#user_list').append(obj);
 	})
 	})
-	jQuery('.userCheckBox').show();
+	$('.userCheckBox').show();
 
 
 	// Rotate
 	// Rotate
 	if(CHAT_UI.isLandscapeMode()) {
 	if(CHAT_UI.isLandscapeMode()) {
-		jQuery(".user_list").addClass("col-6").removeClass("col-12");
+		$(".user_list").addClass("col-6").removeClass("col-12");
 		$(".squareBoxContent span").addClass("landscape_span");
 		$(".squareBoxContent span").addClass("landscape_span");
 	}
 	}
 
 
-	jQuery('#backButton').off().on('click', function() {
+	$('#backButton').off().on('click', function() {
 		// loadingIndicatorを表示
 		// loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		socket.emit('getGroupList', isInvite)
 		socket.emit('getGroupList', isInvite)
 	});
 	});
 
 
-	jQuery("#userSelectionConfirmBtn").off().on('click', function(){
+	$("#userSelectionConfirmBtn").off().on('click', function(){
 		// loadingIndicatorを表示
 		// loadingIndicatorを表示
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.showLoadingIndicator();
 		CHAT_UI.setConfirmButtonEvent(isInvite);
 		CHAT_UI.setConfirmButtonEvent(isInvite);
 	});
 	});
 
 
-	jQuery('#backButton').show();
-	jQuery('.roomListIcon, .chatRoomIcon').hide();
-	jQuery('#userSelectionConfirmBtn').show();
-	jQuery('.userCheckBox').show();
-	jQuery('#pills-user-tab').tab('show');
+	$('#backButton').show();
+	$('.roomListIcon, .chatRoomIcon').hide();
+	$('#userSelectionConfirmBtn').show();
+	$('.userCheckBox').show();
+	$('#pills-user-tab').tab('show');
 });
 });
 
 
 /* ---------------------------------------------------------------------- */
 /* ---------------------------------------------------------------------- */
@@ -502,7 +506,7 @@ socket.on("retryJoinProcess", () => {
 				});
 				});
 			} else {
 			} else {
 				if(params.roomName != undefined) {
 				if(params.roomName != undefined) {
-					jQuery('.titleRoomName').text(params.roomName).data('roomName', params.roomName);
+					$('.titleRoomName').text(params.roomName).data('roomName', params.roomName);
 				} else {
 				} else {
 					let roomListTitle = getLocalizedString("roomListTitle")
 					let roomListTitle = getLocalizedString("roomListTitle")
 					$('.titleRoomName').text(roomListTitle)
 					$('.titleRoomName').text(roomListTitle)

ABVJE_Launcher_Android/assets/chat/public/js/chat.js

@@ -112,9 +112,9 @@ CHAT.uploadImage = function(formData) {
 
 
 			let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
 			let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
 			// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
 			// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
-			const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
-			const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
-			const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
+			const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
+			const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
+			const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
 
 
 			lightbox.append(image);
 			lightbox.append(image);
 			lightbox.append(downloadIcon);
 			lightbox.append(downloadIcon);
@@ -136,9 +136,9 @@ CHAT.uploadImage = function(formData) {
 			}
 			}
 
 
 			let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
 			let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
-			const aTag = jQuery('<a/>', {id:"attachedImages"})
-			const image = jQuery('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
-			const downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
+			const aTag = $('<a/>', {id:"attachedImages"})
+			const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
+			const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
 
 
 			aTag.append(image);
 			aTag.append(image);
 			aTag.append(downloadIcon);
 			aTag.append(downloadIcon);
@@ -156,8 +156,8 @@ CHAT.uploadImage = function(formData) {
 			}, 1);
 			}, 1);
 		}
 		}
 
 
-		jQuery('.overlay').removeClass('active undismissable');
-		jQuery('.loader').removeClass('active');
+		$('.overlay').removeClass('active undismissable');
+		$('.loader').removeClass('active');
 		CHAT_UI.dismissLoadingIndicator();
 		CHAT_UI.dismissLoadingIndicator();
 	})
 	})
 }
 }
@@ -246,11 +246,11 @@ getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomNam
 		} else {
 		} else {
 			console.log('No error');
 			console.log('No error');
 			if (loginParam.roomName != undefined && loginParam.roomName != "null") {
 			if (loginParam.roomName != undefined && loginParam.roomName != "null") {
-				jQuery('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
+				$('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
 			} else {
 			} else {
 				// 設定されていたroomNameがない場合
 				// 設定されていたroomNameがない場合
 				let roomListTitle = getLocalizedString("roomListTitle")
 				let roomListTitle = getLocalizedString("roomListTitle")
-				jQuery('.titleRoomName').text(roomListTitle).data('roomName', roomListTitle);
+				$('.titleRoomName').text(roomListTitle).data('roomName', roomListTitle);
 			}
 			}
 		}
 		}
 		// loadingIndicatorを表示しない
 		// loadingIndicatorを表示しない

ABVJE_Launcher_Android/assets/chat/public/js/language_en.js

 $.lang.en = {
 $.lang.en = {
     "chat_placeholder":"Type message",
     "chat_placeholder":"Type message",
+    "chat_search_placeholder":"  Search Message",
+    "room_search_placeholder":"  Search Room",
     "participants":"Member List",
     "participants":"Member List",
     "exitRoom":"Exit ",
     "exitRoom":"Exit ",
     "roomListTitle":"Room List",
     "roomListTitle":"Room List",
     "deleteRoomTitle":"Delete Room",
     "deleteRoomTitle":"Delete Room",
     "inviteUsersButton":"invite",
     "inviteUsersButton":"invite",
     "inviteUsersTitle":"Invite Member",
     "inviteUsersTitle":"Invite Member",
-    "createRoomSubtitle":"Create Room",
+    "createRoomTitle":"Create Room",
+    "createRoomSubtitle":"Room Name",
     "inviteUsersSubtitle":"Invite User",
     "inviteUsersSubtitle":"Invite User",
     "roomListEmptyString":"There is no room available.",
     "roomListEmptyString":"There is no room available.",
+    "invitedUser":"Invited Users",
     "left":"%@ has left",
     "left":"%@ has left",
     "join":"%@ has joined",
     "join":"%@ has joined",
     "added":"%@ has been invited",
     "added":"%@ has been invited",
@@ -22,12 +26,14 @@ $.lang.en = {
     "thankLabel":"Thank you",
     "thankLabel":"Thank you",
     "startToWorkLabel":"Start to work",
     "startToWorkLabel":"Start to work",
     "groupListKeyword":"Search",
     "groupListKeyword":"Search",
+    "userSearch":"User Search",
+    "groupSearch":"Group Search",
     "groupPageSubtitle":"Groups",
     "groupPageSubtitle":"Groups",
     "noMessages":"No Messages",
     "noMessages":"No Messages",
     "image":"Image",
     "image":"Image",
     "chatKeyword":"Search",
     "chatKeyword":"Search",
     "userListKeyword":"Search",
     "userListKeyword":"Search",
-    "newRoomName":"Enter Roomname",
+    "newRoomName":"Please input Room Name",
     "everyoneIsHere":"Everyone is in the chat.",
     "everyoneIsHere":"Everyone is in the chat.",
     "people":"people",
     "people":"people",
     "searchResult":"Results",
     "searchResult":"Results",

ABVJE_Launcher_Android/assets/chat/public/js/language_ja.js

 $.lang.ja = {
 $.lang.ja = {
     "chat_placeholder":"メッセージを入力",
     "chat_placeholder":"メッセージを入力",
+    "chat_search_placeholder":"  メッセージ検索",
+    "room_search_placeholder":"  ルーム検索",
     "participants":"メンバーリスト",
     "participants":"メンバーリスト",
     "exitRoom":"退出 ",
     "exitRoom":"退出 ",
     "roomListTitle":"ルーム一覧",
     "roomListTitle":"ルーム一覧",
     "deleteRoomTitle":"ルーム削除",
     "deleteRoomTitle":"ルーム削除",
     "inviteUsersButton":"招待",
     "inviteUsersButton":"招待",
     "inviteUsersTitle":"メンバー追加",
     "inviteUsersTitle":"メンバー追加",
-    "createRoomSubtitle":"ルーム生成",
+    "createRoomTitle":"ルーム開設",
+    "createRoomSubtitle":"ルーム名",
     "inviteUsersSubtitle":"ユーザ招待",
     "inviteUsersSubtitle":"ユーザ招待",
     "roomListEmptyString":"入場できるルームがありません。",
     "roomListEmptyString":"入場できるルームがありません。",
     "left":"%@ 様が退場しました。",
     "left":"%@ 様が退場しました。",
@@ -21,13 +24,16 @@ $.lang.ja = {
     "completeLabel":"完了しました。",
     "completeLabel":"完了しました。",
     "thankLabel":"ありがとうございます。",
     "thankLabel":"ありがとうございます。",
     "startToWorkLabel":"作業開始します。",
     "startToWorkLabel":"作業開始します。",
+    "userSearch":"ユーザー検索",
+    "groupSearch":"グループ検索",
     "groupListKeyword":"検索",
     "groupListKeyword":"検索",
     "groupPageSubtitle":"グループ",
     "groupPageSubtitle":"グループ",
     "noMessages":"メッセージがありません。",
     "noMessages":"メッセージがありません。",
     "image":"画像",
     "image":"画像",
     "chatKeyword":"検索",
     "chatKeyword":"検索",
     "userListKeyword":"検索",
     "userListKeyword":"検索",
-    "newRoomName":"ルーム名を入力",
+    "invitedUser":"参加者",
+    "newRoomName":"ルーム名を入力してください",
     "everyoneIsHere":"招待可能なメンバーがいません。",
     "everyoneIsHere":"招待可能なメンバーがいません。",
     "people":"人",
     "people":"人",
     "searchResult":"件のトーク",
     "searchResult":"件のトーク",

ABVJE_Launcher_Android/assets/chat/public/js/language_ko.js

 $.lang.ko = {
 $.lang.ko = {
     "chat_placeholder":"메시지를 입력하세요.",
     "chat_placeholder":"메시지를 입력하세요.",
+    "chat_search_placeholder":"  메세지검색",
+    "room_search_placeholder":"  채팅방 검색",
     "participants":"멤버 리스트",
     "participants":"멤버 리스트",
     "exitRoom":"나가기 ",
     "exitRoom":"나가기 ",
     "roomListTitle":"채팅 리스트",
     "roomListTitle":"채팅 리스트",
     "deleteRoomTitle":"채팅방 삭제",
     "deleteRoomTitle":"채팅방 삭제",
     "inviteUsersButton":"유저 초대",
     "inviteUsersButton":"유저 초대",
     "inviteUsersTitle":"대화상대 추가",
     "inviteUsersTitle":"대화상대 추가",
-    "createRoomSubtitle":"방 생성",
+    "createRoomTitle":"방 개설",
+    "createRoomSubtitle":"방 이름",
     "inviteUsersSubtitle":"유저 초대",
     "inviteUsersSubtitle":"유저 초대",
     "roomListEmptyString":"입장 가능한 방이 없습니다.",
     "roomListEmptyString":"입장 가능한 방이 없습니다.",
+    "invitedUser":"참가자",
     "left":"%@ 님이 방을 떠났습니다.",
     "left":"%@ 님이 방을 떠났습니다.",
     "join":"%@ 님이 참가했습니다.",
     "join":"%@ 님이 참가했습니다.",
     "added":"%@ 님을 초대했습니다.",
     "added":"%@ 님을 초대했습니다.",
@@ -22,12 +26,14 @@ $.lang.ko = {
     "thankLabel":"감사합니다.",
     "thankLabel":"감사합니다.",
     "startToWorkLabel":"작업을 시작합니다.",
     "startToWorkLabel":"작업을 시작합니다.",
     "groupListKeyword":"검색",
     "groupListKeyword":"검색",
+    "userSearch":"유저 검색",
+    "groupSearch":"그룹 검색",
     "groupPageSubtitle":"그룹",
     "groupPageSubtitle":"그룹",
     "noMessages":"메시지가 없습니다.",
     "noMessages":"메시지가 없습니다.",
     "image":"이미지",
     "image":"이미지",
     "chatKeyword":"검색",
     "chatKeyword":"검색",
     "userListKeyword":"검색",
     "userListKeyword":"검색",
-    "newRoomName":"방제목 입력",
+    "newRoomName":"방 이름을 입력해주세요.",
     "everyoneIsHere":"초대가능한 유저가 없습니다.",
     "everyoneIsHere":"초대가능한 유저가 없습니다.",
     "people":"명",
     "people":"명",
     "searchResult":"건의 결과",
     "searchResult":"건의 결과",

ABVJE_Launcher_Android/assets/chat/public/networkError.html

+<!doctype html>
+<html lang="en" style="background: #DBDBDB;">
+<head>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
+  <title>Prototype</title>
+  <link href="./fontawesome/css/all.css" rel="stylesheet">
+  <link rel="stylesheet" href="./css/bootstrap.min.css">
+  <link rel="stylesheet" href="./css/lightbox.min.css">
+  <link rel="stylesheet" href="./css/chat.css">
+  <script>
+    const PLATFORM = 'android';
+    const IS_MOBILE = true;
+  </script>
+  </script>
+</head>
+<body>
+  <nav class="navbar navbar-expand navbar-dark bg-primary fixed-top flex-md-nowrap p-2 shadow">
+    <ul class="navbar-nav col-3" id="navbarLeft">
+      <button class="btn btn-primary" type="button" id="homeButton">
+        <i class="fa fa-home" style="font-size: 1.6rem;"></i>
+      </button>
+    </ul>
+    <a class="navbar-brand col-6 mr-0 text-truncate titleRoomName text-center" href="#">Error</a>
+  </nav>
+  <div class="error-aria">
+    <img id="errorImg" src="./icon/error_top_icon.svg">
+    <div id="errorTitle">
+      <a>ネットワークエラー</a>
+    </div>
+    <div id="errorMsg">
+      ネットワークに接続できませんでした。電波が良いところでもう一度接続してください。
+    </div>
+    <button class="bg-primary reload-button" id="reloadButton">更新</button>
+    <img id="errorEnd" src="./icon/error_footer_img.svg">
+  </div>
+</div>
+<script src="./js/libs/jquery-3.3.1.min.js"></script>
+<script src="./js/libs/popper.min.js"></script>
+<script src="./js/libs/moment.js"></script>
+<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
+<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
+<script src="./js/libs/mustache.min.js"></script>
+<script src="./js/libs/deparam.js"></script>
+<script src="./js/libs/bootstrap.min.js"></script>
+<script src="./js/libs/jquery.mark.min.js"></script>
+<script src="./js/libs/lightbox.js"></script>
+<script src="./js/language.js"></script>
+<script src="./js/language_ko.js" charset="UTF-8"></script>
+<script src="./js/language_ja.js" charset="UTF-8"></script>
+<script src="./js/language_en.js" charset="UTF-8"></script>
+<script src="./js/chat-util.js"></script>
+<script src="./js/chat-error.js"></script>
+</body>
+</html>
\ No newline at end of file

ABVJE_UI_Android/src/jp/agentec/abook/abv/ui/home/activity/ChatWebviewActivity.java

@@ -62,7 +62,7 @@ public class ChatWebviewActivity extends ParentWebViewActivity {
 
 
     private final String TAG = "ChatWebviewActivity";
     private final String TAG = "ChatWebviewActivity";
 
 
-    private final String NETWORK_ERROR_PLACE_HOLDER = "file:///android_asset/chat/public/index.html";
+    private final String NETWORK_ERROR_PLACE_HOLDER = "file:///android_asset/chat/public/networkError.html";
 
 
     //AISDevelop
     //AISDevelop
     private JsInf jsInf = new JsInf();
     private JsInf jsInf = new JsInf();