- チャット

・サーバのアドレス、ポートの情報をエクスターナルファイルにする
・webviewからCacheされるイメージについてアップロードしたイメージがwebViewにcacheされる、
　アップロードされるイメージの縦、横いづれかのサイズが500px基準でサムネイルをサーバ側に保存するようにする。
　webviewに表示されるイメージはサムネイルが表示し、ダウンロードする時は元のイメージがダウンロードするように修正
・ソースコードのなかに余計な内容を修正

ABVJE_BL/src/jp/agentec/abook/abv/bl/acms/client/json/ChatPushDataJSON.java

 package jp.agentec.abook.abv.bl.acms.client.json;
 package jp.agentec.abook.abv.bl.acms.client.json;
 
 
-import com.sun.org.apache.bcel.internal.generic.PUSH;
-
 import jp.agentec.abook.abv.bl.acms.client.AcmsClient;
 import jp.agentec.abook.abv.bl.acms.client.AcmsClient;
 import jp.agentec.abook.abv.bl.common.exception.AcmsException;
 import jp.agentec.abook.abv.bl.common.exception.AcmsException;
 import jp.agentec.abook.abv.bl.common.exception.JSONValidationException;
 import jp.agentec.abook.abv.bl.common.exception.JSONValidationException;

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

-const SERVER_URL = "Node Server Address"
+const SERVER_URL = CHAT_SERVER_URL + ':' + CHAT_SERVER_PORT;
 const socket = io(SERVER_URL);
 const socket = io(SERVER_URL);
 
 
 // 招待するメンバーを保存する変数
 // 招待するメンバーを保存する変数
@@ -84,12 +84,12 @@ function isLandscapeMode(){
   return $(this).width() > $(this).height()
   return $(this).width() > $(this).height()
 }
 }
 
 
-//userProfileImagePathが使えるpathかをcheckしてpathをreturn
-function profileImgPathValidCheck(path) {
-  if (path == undefined || path.includes('mnt/nas/') == false) {
+//userProfileImagePathが使えるイメージの拡張子をcheckしてpathをreturn
+function profileImgPathValidCheck(path, checkProfileExist) {
+  if (checkProfileExist == 1 && path.length > 0) {
     path = './images/user-profile.png'
     path = './images/user-profile.png'
   }
   }
-  return path
+  return path;
 }
 }
 
 
 window.onload = function(){
 window.onload = function(){
@@ -366,7 +366,7 @@ socket.on('newMessage', function (message){
   }
   }
   let messageTime = formatDate(message.createdAt);
   let messageTime = formatDate(message.createdAt);
   //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
   //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
-  message.profileImagePath = profileImgPathValidCheck(message.profileImagePath)
+  message.profileImagePath = profileImgPathValidCheck(message.profileImagePath, message.checkProfileExist)
 
 
   try {
   try {
     message.text = decodeURIComponent(message.text)
     message.text = decodeURIComponent(message.text)
@@ -423,7 +423,7 @@ socket.on('loadMessages', function(messages, shopMemberId){
     let messageTime = formatDate(message.time.time);
     let messageTime = formatDate(message.time.time);
 
 
     //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
     //userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
-    message.profileImagePath = profileImgPathValidCheck(message.profileImagePath)
+    message.profileImagePath = profileImgPathValidCheck(message.profileImagePath, message.checkProfileExist)
 
 
     try {
     try {
       message.message = decodeURIComponent(message.message)
       message.message = decodeURIComponent(message.message)
@@ -493,24 +493,82 @@ jQuery('#image-form').on('submit', function(e){
     jQuery('.loader').addClass('active');
     jQuery('.loader').addClass('active');
     showLoadingIndicator();
     showLoadingIndicator();
     var fd = new FormData($(this)[0]);
     var fd = new FormData($(this)[0]);
-    // ファイルアップロード
+
+    //画像の大きさが500pixelより大きかったら、thumbnailを生成
+    createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
+      if(resizeFile && thumbnailCreated) {
+        //ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
+        fd.append('thumb', resizeFile)
+      }
+
+      // イメージをアップロード
+      uploadImage(fd)
+
+    })
+
+//    // ファイルアップロード
+//    jQuery.ajax({
+//      async: true,
+//      url:  SERVER_URL+"/upload",
+//      type: "post",
+//      data: fd,
+//      contentType: false,
+//      processData: false
+//    }).done(function( res ) {
+//      let imgPath = SERVER_URL + res.path;
+//      let downloadPath = SERVER_URL + '/download' + res.path;
+//      // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
+//      const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':res.fileName});
+//      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});
+//      lightbox.append(image);
+//      lightbox.append(downloadIcon);
+//
+//      let text = lightbox.prop('outerHTML')
+//      let encodedText
+//      try {
+//        encodedText = encodeURIComponent(text)
+//      } catch(e) {
+//        encodedText = text;
+//      }
+//
+//      socket.emit('createMessage', {
+//        text: encodedText
+//      }, 1);
+//      jQuery('.overlay').removeClass('active undismissable');
+//      jQuery('.loader').removeClass('active');
+//      dismissLoadingIndicator();
+//    });
+  }
+});
+
+// Ajaxでイメージをアップロードする
+function uploadImage(formData) {
   jQuery.ajax({
   jQuery.ajax({
     async: true,
     async: true,
     url:  SERVER_URL+"/upload",
     url:  SERVER_URL+"/upload",
     type: "post",
     type: "post",
-      data: fd,
+    data: formData,
     contentType: false,
     contentType: false,
     processData: false
     processData: false
-    }).done(function( res ) {
-      let imgPath = SERVER_URL + res.path;
+  }).done(function( res ){
+    //8
+    var imgPath = SERVER_URL + res.path;
+    var imageName = res.fileName
+
+    if(res.thumbnailPath && res.thumbnailPath.length > 0) {
+      imgPath = SERVER_URL + res.thumbnailPath;
+      imageName = 'thumb_' + imageName;
+    }
+
     let downloadPath = SERVER_URL + '/download' + res.path;
     let downloadPath = SERVER_URL + '/download' + res.path;
     // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
     // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
-      const lightbox = jQuery('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':res.fileName});
+    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 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 downloadIcon = jQuery('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
+
     lightbox.append(image);
     lightbox.append(image);
     lightbox.append(downloadIcon);
     lightbox.append(downloadIcon);
-
     let text = lightbox.prop('outerHTML')
     let text = lightbox.prop('outerHTML')
     let encodedText
     let encodedText
     try {
     try {
@@ -522,12 +580,64 @@ jQuery('#image-form').on('submit', function(e){
     socket.emit('createMessage', {
     socket.emit('createMessage', {
       text: encodedText
       text: encodedText
      }, 1);
      }, 1);
+
     jQuery('.overlay').removeClass('active undismissable');
     jQuery('.overlay').removeClass('active undismissable');
     jQuery('.loader').removeClass('active');
     jQuery('.loader').removeClass('active');
     dismissLoadingIndicator();
     dismissLoadingIndicator();
+  })
+}
+
+// Thumbnailのファイルを生成する。
+function createThumbnailAndUpload(sourceImage, callback) {
+  const fileReader = new FileReader();
+  const img = new Image();
+  fileReader.onloadend = function(){
+      img.src = fileReader.result
+  }
+
+  img.onload = function() {
+    const elem = document.createElement('canvas');
+    var rate
+    var width = img.width
+    var height = img.height
+    if((img.width <= 500) && (img.height <= 500))
+    {
+      callback(undefined, false)
+      return
+    }
+
+    if(img.width > img.height)
+    {
+      rate = 500/img.width
+    } else {
+      rate = 500/img.height
+    }
+    elem.width = width * rate;
+    elem.height = height * rate;
+
+    const ctx = elem.getContext('2d')
+
+    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, elem.width, elem.height);
+    //ctx.drawImage(img, 0, 0, width, height);
+
+    fetch(elem.toDataURL("image/jpeg"))
+    .then(function(res){
+      return res.arrayBuffer();
+    })
+    .then(function(buf){
+      const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});
+
+      callback(newFile, true)
+
+    }).catch((error) => { //fetch Error catch Block
+        if(error) {
+          console.log(error)
+        }
     });
     });
   }
   }
-});
+
+  fileReader.readAsDataURL(sourceImage);
+}
 
 
 /* --------------------------------------------------- */
 /* --------------------------------------------------- */
 /* Nav Bar Functions                                   */
 /* Nav Bar Functions                                   */
@@ -750,11 +860,11 @@ socket.on('refreshUserListInGroup', function(users, isInvite){
     //loadingIndicatorを表示
     //loadingIndicatorを表示
     showLoadingIndicator();
     showLoadingIndicator();
 
 
-    user.profileimagepath = profileImgPathValidCheck(user.profileimagepath);
+    user.profileImagePath = profileImgPathValidCheck(user.profileImagePath, user.checkProfileExist);
 
 
     let html = Mustache.render(template, {
     let html = Mustache.render(template, {
       id: user.shopMemberId,
       id: user.shopMemberId,
-      profileImage: user.profileimagepath,
+      profileImage: user.profileImagePath,
       name: user.loginId
       name: user.loginId
     });
     });
 
 
@@ -767,7 +877,7 @@ socket.on('refreshUserListInGroup', function(users, isInvite){
         })
         })
       } else {
       } else {
         //add
         //add
-        globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileimagepath});
+        globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
       }
       }
       jQuery(this).find('.userCheckBox').toggleClass('active');
       jQuery(this).find('.userCheckBox').toggleClass('active');
 
 

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

+var CHAT_SERVER_URL = "Node Server Address";
+var CHAT_SERVER_PORT = 3000;

ABVJE_Launcher_Android/assets/chat/public/newstart.html

@@ -351,10 +351,7 @@
 <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/config.js"></script>
 <script src="./js/chat.js"></script>
 <script src="./js/chat.js"></script>
-<script>
-  document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
-  ':35729/livereload.js?snipver=1"></' + 'script>')
-</script> 
 </body>
 </body>
 </html>
 </html>
\ No newline at end of file