012-PC와 iPhone으로 레이아웃이 바뀌는 메일을 보내고 싶다
10134 단어 CSSGoogleAppsScriptgmailgas
하고 싶은 일
GAS에서 HTML 메일을 보내게 된 이후 알림 메일에서 테이블 레이아웃을 이용하는 것이 늘어났습니다.
업무무늬 「PC에서도 iPhone에서도/언제 어디서나」메일을 확인해야 합니다만, iPhone에서 테이블 레이아웃을 표시하면 옆으로 스크롤 해야 하고, 조금 스트레스가 모입니다.
PC로 표시하는 경우
이런 느낌의 디자인을・・・
iPhone에서 볼 때
이런 느낌으로 하고 싶다(수중에 iPhone 없었기 때문에 화상은 PC로 폭 좁혔을 뿐입니다만).
라는 것이 이번 이야기.
결론
CSS의 "미디어 쿼리"기능을 사용합시다.
Gmail은 2016년 9월부터 반응형 메일에 대응 하고 있었다고 합니다. 말해 보면 그랬을지도?
동작 확인 스크립트
sample-code1.gsfunction myFunction() {
var options = {};
options.htmlBody = HtmlService.createHtmlOutputFromFile('mail').setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
GmailApp.sendEmail("[email protected]", "レスポンシブメールテスト", "HTML形式で表示ください", options);
}
mail.html<head><style>
@media screen and (min-width:980px) {
.desktopHidden { display:none;}
.mobileHidden { display:inline;}
th.fluid {
background-color: #ffb6c1;
}
}
@media screen and (max-width:980px) {
.desktopHidden { display:inline;}
.mobileHidden { display:none;}
th.fluid{
display: block !important;
width: 100% !important;
clear: both;
}
th.fluid {
background-color: #bde9ba;
}
}
</style></head>
<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border: 2px #000000 solid;">
<tr>
<th class="fluid" width="50%">項目1</th>
<td class="fluid" width="50%">テキスト</td>
</tr>
<tr>
<th class="fluid" width="50%">項目2</th>
<td class="fluid" width="50%">テキスト</td>
</tr>
</table>
<a href='https://www.yahoo.co.jp/' target='_blank' class='desktopHidden'>モバイルでのみ表示</a>
<a href='https://www.google.com/' target='_blank' class='mobileHidden'>PCでのみ表示</a>
해설
var options = {}
sendEmail 메소드의 네 번째 인수에 직접 그리는 방법도 있지만, 나는 변수 options를 매번 지정하여 사용하고 있습니다.
(실제로 움직이는 스크립트에서는 from이나 CC, BCC를 설정하기 때문에, 사용 주름의 의미로)
HtmlService.createHtmlOutputFromFile('mail')
이번 샘플 파일로서 준비한 「mail.html」에는 스크립틀릿이 없기 때문에 createHtmlOutputFromFile(String) 를 사용하고 있습니다.
실제로 운용할 때는 메일의 내용을 동적으로 변화시키는 것이 예상되기 때문에, 그 경우 이 부분은 createTemplateFromFile(filename) 를 사용하게 될까.
@media screen and (min-width:980px)
이번 본명.
min-width와 max-width를 항상 잘못합니다.
- 스타일이 적용되는 최하한 사이즈 지정=min-width
- 스타일이 적용되는 최하한 사이즈를 지정=max-width
라고 기억합시다.
주의하고 싶은 것
참고 기사에서 배견한 주의 사항을, 자신 메모적으로 이쪽에도.
해당 CSS에는 제한이 있습니다.
사용하고 싶은 것이 대응하고 있는지 어떤지를 사전에 확인 해 둡시다.
산잔 시험해 「어라?
속성 선택기는 반영되지 않습니다.
이번 도가니에 빠진 것이 여기.
실은 상기 샘플 스크립트는, 당초 이하와 같은 기술을 하고 있었습니다.
mail.html
@media screen and (min-width:980px) {
th[class="fluid"]{
}
}
@media screen and (max-width:980px) {
th[class="fluid"]{
}
}
(화제의 부분만 발췌하고 있습니다)
이 기법이라면 doGet() 에서 웹 화면으로 표시할 때는 적용되지만 HTML 메일로 Gmail에서 수신해도 적용되지 않습니다.
참고 기사
CSS의 "미디어 쿼리"기능을 사용합시다.
Gmail은 2016년 9월부터 반응형 메일에 대응 하고 있었다고 합니다. 말해 보면 그랬을지도?
동작 확인 스크립트
sample-code1.gs
function myFunction() {
var options = {};
options.htmlBody = HtmlService.createHtmlOutputFromFile('mail').setSandboxMode(HtmlService.SandboxMode.IFRAME).getContent();
GmailApp.sendEmail("[email protected]", "レスポンシブメールテスト", "HTML形式で表示ください", options);
}
mail.html
<head><style>
@media screen and (min-width:980px) {
.desktopHidden { display:none;}
.mobileHidden { display:inline;}
th.fluid {
background-color: #ffb6c1;
}
}
@media screen and (max-width:980px) {
.desktopHidden { display:inline;}
.mobileHidden { display:none;}
th.fluid{
display: block !important;
width: 100% !important;
clear: both;
}
th.fluid {
background-color: #bde9ba;
}
}
</style></head>
<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border: 2px #000000 solid;">
<tr>
<th class="fluid" width="50%">項目1</th>
<td class="fluid" width="50%">テキスト</td>
</tr>
<tr>
<th class="fluid" width="50%">項目2</th>
<td class="fluid" width="50%">テキスト</td>
</tr>
</table>
<a href='https://www.yahoo.co.jp/' target='_blank' class='desktopHidden'>モバイルでのみ表示</a>
<a href='https://www.google.com/' target='_blank' class='mobileHidden'>PCでのみ表示</a>
해설
var options = {}
sendEmail 메소드의 네 번째 인수에 직접 그리는 방법도 있지만, 나는 변수
options를 매번 지정하여 사용하고 있습니다.(실제로 움직이는 스크립트에서는 from이나 CC, BCC를 설정하기 때문에, 사용 주름의 의미로)
HtmlService.createHtmlOutputFromFile('mail')
이번 샘플 파일로서 준비한 「mail.html」에는 스크립틀릿이 없기 때문에 createHtmlOutputFromFile(String) 를 사용하고 있습니다.
실제로 운용할 때는 메일의 내용을 동적으로 변화시키는 것이 예상되기 때문에, 그 경우 이 부분은
createTemplateFromFile(filename) 를 사용하게 될까.@media screen and (min-width:980px)
이번 본명.
min-width와 max-width를 항상 잘못합니다.
- 스타일이 적용되는 최하한 사이즈 지정=min-width
- 스타일이 적용되는 최하한 사이즈를 지정=max-width
라고 기억합시다.
주의하고 싶은 것
참고 기사에서 배견한 주의 사항을, 자신 메모적으로 이쪽에도.
해당 CSS에는 제한이 있습니다.
사용하고 싶은 것이 대응하고 있는지 어떤지를 사전에 확인 해 둡시다.
산잔 시험해 「어라?
속성 선택기는 반영되지 않습니다.
이번 도가니에 빠진 것이 여기.
실은 상기 샘플 스크립트는, 당초 이하와 같은 기술을 하고 있었습니다.
mail.html
@media screen and (min-width:980px) {
th[class="fluid"]{
}
}
@media screen and (max-width:980px) {
th[class="fluid"]{
}
}
(화제의 부분만 발췌하고 있습니다)
이 기법이라면 doGet() 에서 웹 화면으로 표시할 때는 적용되지만 HTML 메일로 Gmail에서 수신해도 적용되지 않습니다.
참고 기사
@media screen and (min-width:980px) {
th[class="fluid"]{
}
}
@media screen and (max-width:980px) {
th[class="fluid"]{
}
}
Reference
이 문제에 관하여(012-PC와 iPhone으로 레이아웃이 바뀌는 메일을 보내고 싶다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/co-ikeya/items/ce050c401d40812615af텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
