- \n
- <\/i><\/span> A1: \u5404\u884c\u306b\u753b\u50cfURL\u3092\u30bb\u30c3\u30c8\u3057\u3066\u304f\u3060\u3055\u3044 \uff08\u4f8b https:\/\/example.com\/a.png<\/a> \uff09 *<\/span>#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> A2: \u5404\u753b\u50cf\u306e\u8868\u793a\u5e45\u3092\u30bb\u30c3\u30c8\u3057\u3066\u304f\u3060\u3055\u3044 \uff08\u4f8b “300px” \uff09#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> B1: \u30ce\u30fc\u30c8\u6587\u3092\u30bb\u30c3\u30c8\u3057\u3066\u304f\u3060\u3055\u3044 \uff08\u6539\u884c\u306fbr\u306b\u81ea\u52d5\u5909\u63db\uff09#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> C1: \u6848\u4ef6\u30ea\u30f3\u30af\u3092\u30d5\u30c3\u30bf\u8868\u793a\u3055\u305b\u305f\u3044\u5834\u5408\u3001\u57fa\u76e4URL\u3092\u30bb\u30c3\u30c8\u3057\u3066\u304f\u3060\u3055\u3044 \uff08${var[applicationRoot]}\uff09#{EL}<\/sup><\/span><\/li>\n
- <\/i><\/span> D: Email-HTML \u304c\u683c\u7d0d\u3055\u308c\u308b\u6587\u5b57\u5217\u578b\u30c7\u30fc\u30bf\u9805\u76ee\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044 (\u66f4\u65b0) *<\/span><\/li>\n<\/ul>\n<\/div><\/div>\n\n\n
<\/span>Script (click to open)<\/div>\n\n\n\n\/\/ GraalJS Script (engine type: 2)\n\n\/\/\/\/\/\/\/\/ START "main()" \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\nmain();\nfunction main(){ \n\n\/\/\/\/ == Config Retrieving \/ \u5de5\u7a0b\u30b3\u30f3\u30d5\u30a3\u30b0\u306e\u53c2\u7167 ==\nconst strImageUrls = configs.get( "StrConfA1" ); \/\/\/ REQUIRED\n if( strImageUrls === "" ){\n throw new Error( "\\n AutomatedTask ConfigError:" +\n " Config {A1: ImageUrls} is empty \\n" );\n }\nlet strImageWidth = configs.get( "StrConfA2" ); \/\/ NotRequired\n if( strImageWidth === "" ){\n engine.log( " AutomatedTask ConfigWarning: " +\n " {A2: ImageWidth} is empty (default '300px' applied)" );\n strImageWidth = "300px";\n }\nlet strAbstract = configs.get( "StrConfB1" ); \/\/ NotRequired\n strAbstract = encodeHTML( strAbstract ).replace(\/\\n\/g, '<br>\\n');\n if( strAbstract === "" ){\n engine.log( " AutomatedTask ConfigWarning: " +\n " {B1: Abstract} is empty" );\n }\nlet strApplicationRoot = configs.get( "StrConfC1" ); \/\/ NotRequired\nconst strPocketHtml = configs.getObject( "SelectConfD" ); \/\/\/ REQUIRED\n\n\n\n\/\/\/\/ == Data Retrieving \/ \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u30c7\u30fc\u30bf\u306e\u53c2\u7167 ==\n\/\/ (Nothing. Retrieved via Expression Language in Config Retrieving)\n\n\n\/\/\/\/ == Calculating \/ \u6f14\u7b97 ==\n\n\n\n\n\/\/\/ Build HTML String\nlet strBlockHeader = `<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\n<head> \n<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">\n<meta http-equiv="Content-Style-Type" content="text\/css">\n<meta name="viewport" content="width=device-width, initial-scale=1.0">\n<title>Image List<\/title>\n<\/head>\n<body bgcolor="#ffffff" style="background-color:#ffffff; margin:0 auto; padding:0; width:100%">\n`;\n\n\/\/ for Note\nlet strBlockAbstract = `<div style="margin:0 auto 30px 0px; padding:10px;\n display:inline-block; border:medium solid #009900; background-color:#ffffff">\n ${strAbstract}\n<\/div>\n`;\n\n\/\/ for ImageTags\nlet strBlockImages = "<div style=\\"margin:0; padding:5px; background-color:#eeeeee\\">"; \/\/ start\n\/\/ Regular Expression - Named Capturing group - ES2018\nlet strReUri = "^((?<protocol>[^:\/?#]+):)?"; \/\/ end with ":", eg. "https:", "http:",,\n strReUri += "(\/\/(?<host>[^\/?#]*))?"; \/\/ start with "\/\/", not include "\/" "?" "#"\n strReUri += "(?<pathname>[^?#]*)"; \/\/ not include "?" "#"\n strReUri += "(\\\\?(?<query>[^#]*))?"; \/\/ start with "?", not include "#"\n strReUri += "(#(?<anchor>.*))?"; \/\/ start with "#"\nconst regUri = new RegExp( strReUri );\nconst arrImageUrls = strImageUrls.split("\\n");\nfor( let i = 0; i < arrImageUrls.length; i++ ){\n if( regUri.test( arrImageUrls[i] ) ){\n strBlockImages += ' <a href="' + arrImageUrls[i] + '"><img src="' + arrImageUrls[i] + '"';\n strBlockImages += ' alt="image-' + i + '"';\n strBlockImages += ' style="vertical-align:top; margin:5px; max-width:' + strImageWidth + '"><\/a>\\n';\n }else{\n engine.log( " AutomatedTask ConfigWarning:" +\n " Not URL (skipped): " + arrImageUrls[i] );\n }\n}\nstrBlockImages += '<\/div>\\n'; \/\/ end\n\n\/\/ for FooterLink\nconst strProcessInstanceId = processInstance.getProcessInstanceId() + "";\nconst strProcessInstanceTitle = processInstance.getProcessInstanceTitle() + "";\nlet strBlockFooter = `<div style="margin:30px auto 0px 20px">\n <span style="color:#009900">p${strProcessInstanceId}<\/span><br>\n <span style="padding-left:20px; font-weight:bold">${strProcessInstanceTitle}<\/span>\n<\/div>\n<div style="margin:10px auto 10px 20px">\n<a href="${strApplicationRoot}PE\/Workitem\/list?processInstanceId=${strProcessInstanceId}"\n style="display:inline-block; font-weight:bold; border-radius:8px; padding:8px 16px;\n color:#ffffff; background:#009900; border:solid 4px #009900">Desktop View<\/a>\n<a href="${strApplicationRoot}SP\/PE\/ProcessInstance\/view?processInstanceId=${strProcessInstanceId}"\n style="display:inline-block; font-weight:bold; border-radius:8px; padding:8px 16px;\n color:#ffffff; background:#009900; border:solid 4px #009900">Mobile View<\/a> \n<\/div>\n`;\n\n\/\/\/ Assembles\nlet strHtml = strBlockHeader;\n if( strAbstract !== "" ){\n strHtml += strBlockAbstract;\n }\n strHtml += strBlockImages;\n if( strApplicationRoot !== "" ){\n strHtml += strBlockFooter;\n }\n strHtml += "<\/body><\/html>";\n\n\n\/\/\/\/ == Data Updating \/ \u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u30c7\u30fc\u30bf\u3078\u306e\u4ee3\u5165 ==\nengine.setData( strPocketHtml, strHtml );\n\n} \/\/\/\/\/\/\/\/ END "main()" \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n\nfunction encodeHTML( str ){\n return str.replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/"\/g, '"')\n .replace(\/'\/g, ''');\n}\n\n\n\n\/*\nNotes:\n- When a token reaches the automated step, the code for HTML mail is automatically generated.\n - The generated code can be set in "Message Sending Intermediate Event (Email)" (v13.1) as it is.\n - https:\/\/support.questetra.com\/bpmn-icons\/throwing-message-intermediate-event-email\/\n - It is also effective to add a human step in downstream to add decorative tags such as strong and span.\n- Each URL is set to the `href` attribute of the `img` tag.\n - The URL must be a website accessible to email recipients.\n - Strings that do not start with `http(s)` will be skipped.\n - Before being set, the URL is validated by a regular expression.\nAPPENDIX\n- The generated HTML code is not guaranteed to be displayed properly in all mailers.\n- Set the display width according to the expected number of images and mailer.\n - For work that checks 10 or more images in Desktop, a width of 300px or less is recommended.\n - For work that checks 2 or 3 images in Desktop, a width of about 600px is recommended.\nNotes-ja:\n- \u6848\u4ef6\u304c\u81ea\u52d5\u51e6\u7406\u5de5\u7a0b\u306b\u5230\u9054\u3057\u305f\u969b\u3001HTML\u30e1\u30fc\u30eb\u7528\u306e\u30b3\u30fc\u30c9\u304c\u81ea\u52d5\u7684\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002\n - \u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u3001\u305d\u306e\u307e\u307e\u300e\u30e1\u30c3\u30bb\u30fc\u30b8\u9001\u4fe1\u4e2d\u9593\u30a4\u30d9\u30f3\u30c8\uff08\u30e1\u30fc\u30eb\uff09\u300f\uff08v13.1\uff09\u306b\u30bb\u30c3\u30c8\u3067\u304d\u307e\u3059\u3002\n - https:\/\/support.questetra.com\/ja\/bpmn-icons\/throwing-message-intermediate-event-email\/\n- \u3059\u3079\u3066\u306e URL \u304c\u305d\u308c\u305e\u308c\u3001`img` \u30bf\u30b0\u306e `href` \u5c5e\u6027\u306b\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059\u3002\n - URL \u306f\u30e1\u30fc\u30eb\u53d7\u4fe1\u8005\u304c\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308bWeb\u30b5\u30a4\u30c8\u3067\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002\n - `http(s)` \u3067\u59cb\u307e\u3089\u306a\u3044\u6587\u5b57\u5217\u306a\u3069\u306f\u3001\u30b9\u30ad\u30c3\u30d7\u3055\u308c\u307e\u3059\u3002\n - \u30bb\u30c3\u30c8\u3055\u308c\u308b\u524d\u306b\u3001URL \u306e\u59a5\u5f53\u6027\u306f\u6b63\u898f\u8868\u73fe\u306b\u3088\u3063\u3066\u691c\u8a3c\u3055\u308c\u307e\u3059\u3002\nAPPENDIX-ja\n- \u751f\u6210\u3055\u308c\u308bHTML \u30b3\u30fc\u30c9\u306f\u3001\u5168\u3066\u306e\u30e1\u30fc\u30e9\u3067\u6b63\u5e38\u306b\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u304c\u4fdd\u8a3c\u3055\u308c\u3066\u3044\u308b\u8a33\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n- \u60f3\u5b9a\u3055\u308c\u308b\u753b\u50cf\u6570\u3084\u30e1\u30fc\u30e9\u306b\u5fdc\u3058\u3066\u3001\u8868\u793a\u5e45\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\n - 10\u70b9\u4ee5\u4e0a\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001300px \u4ee5\u4e0b\u306e\u5e45\u304c\u63a8\u5968\u3055\u308c\u307e\u3059\u3002\n - \uff12\uff5e\uff13\u70b9\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001600px \u7a0b\u5ea6\u306e\u5e45\u3092\u6301\u305f\u305b\u3066\u3082\u826f\u3044\u3068\u8a00\u3048\u307e\u3059\u3002\n*\/\n\n\n<\/code><\/pre><\/div>\n\n\n<\/div><\/div>\n\n\n\n<\/a><\/figure>\n\n\n\n
<\/i> Download<\/h3>\n\n\n\n
- \n
- Email-Html-String-Create-ImageList-2021.xml<\/a><\/li>\n\n\n\n
- Email-Html-String-Create-ImageList-2023.xml<\/a>\n
- \n
- 2023-08-08 (C) Questetra, Inc. (MIT License)<\/li>\n\n\n\n
- for “GraalJS standard (engine-type 3)” on v15.0 or above<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
2021-06-22 (C) Questetra, Inc. (MIT License)
https:\/\/support.questetra.com\/ja\/addons\/email-html-string-create-imagelist-2021\/<\/a>
<\/i> Addon\u30d5\u30a1\u30a4\u30eb\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u306f Professional<\/strong><\/span> \u3067\u306e\u307f\u3054\u5229\u7528\u3044\u305f\u3060\u3051\u307e\u3059<\/p>\n\n\n<\/div>\n\n\n\n<\/i> Notes<\/h3>\n\n\n\n
- \n
- \u6848\u4ef6\u304c\u81ea\u52d5\u51e6\u7406\u5de5\u7a0b\u306b\u5230\u9054\u3057\u305f\u969b\u3001HTML\u30e1\u30fc\u30eb\u7528\u306e\u30b3\u30fc\u30c9\u304c\u81ea\u52d5\u7684\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002\n
- \n
- \u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u306f\u3001\u305d\u306e\u307e\u307e\u300e\u30e1\u30c3\u30bb\u30fc\u30b8\u9001\u4fe1\u4e2d\u9593\u30a4\u30d9\u30f3\u30c8\uff08\u30e1\u30fc\u30eb\uff09\u300f\uff08v13.1\uff09\u306b\u30bb\u30c3\u30c8\u3067\u304d\u307e\u3059\u3002<\/li>\n\n\n\n
- https:\/\/support.questetra.com\/ja\/bpmn-icons\/throwing-message-intermediate-event-email\/<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- \u3059\u3079\u3066\u306e URL \u304c\u305d\u308c\u305e\u308c\u3001
img<\/code> \u30bf\u30b0\u306ehref<\/code> \u5c5e\u6027\u306b\u30bb\u30c3\u30c8\u3055\u308c\u307e\u3059\u3002\n- \n
- URL \u306f\u30e1\u30fc\u30eb\u53d7\u4fe1\u8005\u304c\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308bWeb\u30b5\u30a4\u30c8\u3067\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002<\/li>\n\n\n\n
http(s)<\/code> \u3067\u59cb\u307e\u3089\u306a\u3044\u6587\u5b57\u5217\u306a\u3069\u306f\u3001\u30b9\u30ad\u30c3\u30d7\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n- \u30bb\u30c3\u30c8\u3055\u308c\u308b\u524d\u306b\u3001URL \u306e\u59a5\u5f53\u6027\u306f\u6b63\u898f\u8868\u73fe\u306b\u3088\u3063\u3066\u691c\u8a3c\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
<\/i> Capture<\/h3>\n\n\n\n
![\"\u8907\u6570\u753b\u50cf\u3092\u4e00\u89a7\u3067\u304d\u308b\u30e1\u30fc\u30eb\u7528\u306eHTML\u30c6\u30ad\u30b9\u30c8\u3092\u7d44\u307f\u7acb\u3066\u307e\u3059\u3002\u8907\u6570\u306e\u753b\u50cfURL\u3092img\u30bf\u30b0\u306b\u30bb\u30c3\u30c8\u3057\u3066\u4e26\u3079\u307e\u3059\u3002Web\u30b5\u30fc\u30d0\u306b\u516c\u958b\u3055\u308c\u305f\u753b\u50cf\u3092\u5171\u6709\u3057\u305f\u3044\u30b1\u30fc\u30b9\u3084\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30c1\u30a7\u30c3\u30af\u4f53\u5236\u3092\u5f37\u5316\u3057\u305f\u3044\u30b1\u30fc\u30b9\u3067\u5229\u7528\u3057\u307e\u3059\u3002\"](\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/06\/Email-Html-String-Create-ImageList-2021-capture-ja.png?resize=1200%2C675&ssl=1\")
<\/a><\/figure>\n\n\n\n![\"\u8907\u6570\u753b\u50cf\u3092\u4e00\u89a7\u3067\u304d\u308b\u30e1\u30fc\u30eb\u7528\u306eHTML\u30c6\u30ad\u30b9\u30c8\u3092\u7d44\u307f\u7acb\u3066\u307e\u3059\u3002\u8907\u6570\u306e\u753b\u50cfURL\u3092img\u30bf\u30b0\u306b\u30bb\u30c3\u30c8\u3057\u3066\u4e26\u3079\u307e\u3059\u3002Web\u30b5\u30fc\u30d0\u306b\u516c\u958b\u3055\u308c\u305f\u753b\u50cf\u3092\u5171\u6709\u3057\u305f\u3044\u30b1\u30fc\u30b9\u3084\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u30c1\u30a7\u30c3\u30af\u4f53\u5236\u3092\u5f37\u5316\u3057\u305f\u3044\u30b1\u30fc\u30b9\u3067\u5229\u7528\u3057\u307e\u3059\u3002\"](\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2021\/06\/Email-Html-String-Create-ImageList-2021-config-ja.png?resize=1195%2C1031&ssl=1\")
<\/a><\/figure>\n\n\n\n<\/i> Appendix<\/h3>\n\n\n\n
- \n
- \u751f\u6210\u3055\u308c\u308bHTML \u30b3\u30fc\u30c9\u306f\u3001\u5168\u3066\u306e\u30e1\u30fc\u30e9\u3067\u6b63\u5e38\u306b\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u304c\u4fdd\u8a3c\u3055\u308c\u3066\u3044\u308b\u8a33\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/li>\n\n\n\n
- \u60f3\u5b9a\u3055\u308c\u308b\u753b\u50cf\u6570\u3084\u30e1\u30fc\u30e9\u306b\u5fdc\u3058\u3066\u3001\u8868\u793a\u5e45\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\n
- \n
- 10\u70b9\u4ee5\u4e0a\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001300px \u4ee5\u4e0b\u306e\u5e45\u304c\u63a8\u5968\u3055\u308c\u307e\u3059\u3002<\/li>\n\n\n\n
- \uff12\uff5e\uff13\u70b9\u306e\u753b\u50cf\u3092Desktop\u74b0\u5883\u3067\u30c1\u30a7\u30c3\u30af\u3059\u308b\u696d\u52d9\u3067\u3042\u308c\u3070\u3001600px \u7a0b\u5ea6\u306e\u5e45\u3092\u6301\u305f\u305b\u3066\u3082\u826f\u3044\u3068\u8a00\u3048\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
<\/i> See also<\/h3>\n\n\n\n
- \u30bb\u30c3\u30c8\u3055\u308c\u308b\u524d\u306b\u3001URL \u306e\u59a5\u5f53\u6027\u306f\u6b63\u898f\u8868\u73fe\u306b\u3088\u3063\u3066\u691c\u8a3c\u3055\u308c\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- \u3059\u3079\u3066\u306e URL \u304c\u305d\u308c\u305e\u308c\u3001
- \u6848\u4ef6\u304c\u81ea\u52d5\u51e6\u7406\u5de5\u7a0b\u306b\u5230\u9054\u3057\u305f\u969b\u3001HTML\u30e1\u30fc\u30eb\u7528\u306e\u30b3\u30fc\u30c9\u304c\u81ea\u52d5\u7684\u306b\u751f\u6210\u3055\u308c\u307e\u3059\u3002\n
- Email-Html-String-Create-ImageList-2023.xml<\/a>\n
- <\/i><\/span> A2: \u5404\u753b\u50cf\u306e\u8868\u793a\u5e45\u3092\u30bb\u30c3\u30c8\u3057\u3066\u304f\u3060\u3055\u3044 \uff08\u4f8b “300px” \uff09#{EL}<\/sup><\/span><\/li>\n
![\"\"\/](\"https:\/\/example.com\/a.png\")
<\/a><\/figure>\n\n\n\n