Vue.js로 업무 메일을 효율화해보기
웹 작업으로 어려움
2년 정도 HTML 코더, 프런트 엔드(jQuery), 가끔 Web 디자인을 하고 있어, 일로 곤란한 일.
대표 예
예를 들어보면 딱이 없기 때문에 이 근처에서.
기본 사양
현장의 가장 큰 과제로는
slack이나 backlog등 편리한 툴이 여러 가지 있는데 메일을 중심으로 사용하고 있다
라는 것이 크다.
과연 다 바쁜 현장의 엔지니어가 일하는 방법 개혁까지 손이 돌지 않기 때문에 편리 툴로 조금이라도 업무 효율화하려고 하는 것이 개발의 계기이다.
기본 컨셉 「메일 쓰고 싶어」
개인적으로 일상의 메일을 쓰는 것이 약하다. 일단 이메일로 작업 파일을 보낼 때
XXX 파일을 보내드립니다.
라고만 써 보내면 상사에게 화났다.
아무래도 업무상 메일은 작법이라는 것이 있는 것 같다.
결국 정형문이다.
특정 문면을 필요에 따라 표시하는 과정을 시스템화해 보자.
화면
초기 화면
초기 화면은 이런 느낌.
선택
메일을 보내는 상황을 선택.
문장 표시
복사하고 적절히 다시 쓸 뿐.
코드
HTML,Vue.js(<--해보고 싶었다)로 작성.
anchoko.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メール作成あんちょこ君</title>
<!-- Vue.js を読み込む -->
</head>
<body>
<div id="app">
<h1>メール作成あんちょこ君</h1>
<!-- Categories -->
<label for="category">Category</label>
<select name="category" v-model="selectedCategory" v-on:change="fetchMsgs">
<option v-for="category in categories" v-bind:value="category.id">
{{ category.name }}
</option>
</select>
<!-- Message -->
<div class="inner">
<h2>Message<h2>
<div v-html="message"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.clear()
new Vue({
el: '#app',
data: {
selectedCategory: '',
message: '',
categories: [
{'id': 1, 'name' :'テストup'},
{'id': 2, 'name' :'テストサーバーup'},
{'id': 3, 'name' :'完了メール'},
{'id': 4, 'name' :'期限'},
{'id': 5, 'name' :'調整'},
{'id': 6, 'name' :'リスケ'},
{'id': 7, 'name' :'問い合わせ回答'},
{'id': 8, 'name' :'確認'},
{'id': 9, 'name' :'欠席(例文)'},
{'id': 10, 'name' :'作業進捗'}
]
},
methods: {
fetchMsgs: function() {
var tmp_message = '';
var id_s = this.selectedCategory
if (id_s == 1) {
tmp_message = '修正データを下記にアップしましたので、ご確認お願いします。<br>[修正点]'
} else if (id_s == 2) {
tmp_message = '以下ページの修正データをテストサーバーにupしました。<br>ご確認お願いします。'
} else if (id_s == 3) {
tmp_message = '表題の件について、データを下記にアップしましたので、ご確認お願いします。<br>[url]'
} else if (id_s == 4) {
tmp_message = '本件、MM/DD、hh:mmまでに対応します。'
} else if (id_s == 5) {
tmp_message = '恐れ入りますが、初稿日MM月DD日までの展開は厳しめです。<br>MM月DD日HH:00時までの展開で調整いただけますでしょうか？'
} else if (id_s == 6) {
tmp_message = '＞ [先方依頼]<br>制作側の事情で恐れ入りますがX時までにリスケお願いします。'
} else if (id_s == 7) {
tmp_message = '＞ [先方依頼]<br>この件につきましてこちら側では<br>[以下回答]'
} else if (id_s == 8) {
tmp_message = '(内容について確認したい事項をいくつかまとめたので確認お願いします。)/(表題の件について一点確認したいことがございます。)<br>[確認事項]<br>恐れ入りますが、本日XX時目処でご返答お願いします。'
} else if (id_s == 9) {
tmp_message = '各位<br>お疲れ様です。[名前]です。<br>本日17:00からの[MTG]ですが、<br>[理由]のため出席できかねます。<br>大変ご迷惑をおかけしまして申し訳ございません。<br>よろしくお願いします。'
} else if (id_s == 10) {
tmp_message = '本日の作業進捗を報告いたします。<br>・[案件名]<br>XX件<br>未着手/作業中/完了：[案件名]<br>[状況]<br>[up先]'
} else {
alert('Invalid value!!')
}
this.message = tmp_message;
}
}
})
</script>
</body>
</html>
GitHub는 이쪽
후기 (감상, 개선점 etc)
Vue.js를 사용해 보았습니다.
Vue.js는 사용법 쓰는 법 공부중의 몸. 메일 안쵸 이 내용의 데이터는 if문 직접 쓴다. 진짜 말하면 json이라든지 준비하고 싶었지만 데이터 전달 방법을 모르고 포기했다. JQuery에서 잠시 쓰고 있던 select 박스에 대한 이벤트가 Vue.js 사용하면 한 번에 할 수 있었다. 익숙해지면 상당히 사용할 수 있을 것 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メール作成あんちょこ君</title>
<!-- Vue.js を読み込む -->
</head>
<body>
<div id="app">
<h1>メール作成あんちょこ君</h1>
<!-- Categories -->
<label for="category">Category</label>
<select name="category" v-model="selectedCategory" v-on:change="fetchMsgs">
<option v-for="category in categories" v-bind:value="category.id">
{{ category.name }}
</option>
</select>
<!-- Message -->
<div class="inner">
<h2>Message<h2>
<div v-html="message"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
console.clear()
new Vue({
el: '#app',
data: {
selectedCategory: '',
message: '',
categories: [
{'id': 1, 'name' :'テストup'},
{'id': 2, 'name' :'テストサーバーup'},
{'id': 3, 'name' :'完了メール'},
{'id': 4, 'name' :'期限'},
{'id': 5, 'name' :'調整'},
{'id': 6, 'name' :'リスケ'},
{'id': 7, 'name' :'問い合わせ回答'},
{'id': 8, 'name' :'確認'},
{'id': 9, 'name' :'欠席(例文)'},
{'id': 10, 'name' :'作業進捗'}
]
},
methods: {
fetchMsgs: function() {
var tmp_message = '';
var id_s = this.selectedCategory
if (id_s == 1) {
tmp_message = '修正データを下記にアップしましたので、ご確認お願いします。<br>[修正点]'
} else if (id_s == 2) {
tmp_message = '以下ページの修正データをテストサーバーにupしました。<br>ご確認お願いします。'
} else if (id_s == 3) {
tmp_message = '表題の件について、データを下記にアップしましたので、ご確認お願いします。<br>[url]'
} else if (id_s == 4) {
tmp_message = '本件、MM/DD、hh:mmまでに対応します。'
} else if (id_s == 5) {
tmp_message = '恐れ入りますが、初稿日MM月DD日までの展開は厳しめです。<br>MM月DD日HH:00時までの展開で調整いただけますでしょうか？'
} else if (id_s == 6) {
tmp_message = '＞ [先方依頼]<br>制作側の事情で恐れ入りますがX時までにリスケお願いします。'
} else if (id_s == 7) {
tmp_message = '＞ [先方依頼]<br>この件につきましてこちら側では<br>[以下回答]'
} else if (id_s == 8) {
tmp_message = '(内容について確認したい事項をいくつかまとめたので確認お願いします。)/(表題の件について一点確認したいことがございます。)<br>[確認事項]<br>恐れ入りますが、本日XX時目処でご返答お願いします。'
} else if (id_s == 9) {
tmp_message = '各位<br>お疲れ様です。[名前]です。<br>本日17:00からの[MTG]ですが、<br>[理由]のため出席できかねます。<br>大変ご迷惑をおかけしまして申し訳ございません。<br>よろしくお願いします。'
} else if (id_s == 10) {
tmp_message = '本日の作業進捗を報告いたします。<br>・[案件名]<br>XX件<br>未着手/作業中/完了：[案件名]<br>[状況]<br>[up先]'
} else {
alert('Invalid value!!')
}
this.message = tmp_message;
}
}
})
</script>
</body>
</html>
Vue.js를 사용해 보았습니다.
Vue.js는 사용법 쓰는 법 공부중의 몸. 메일 안쵸 이 내용의 데이터는 if문 직접 쓴다. 진짜 말하면 json이라든지 준비하고 싶었지만 데이터 전달 방법을 모르고 포기했다. JQuery에서 잠시 쓰고 있던 select 박스에 대한 이벤트가 Vue.js 사용하면 한 번에 할 수 있었다. 익숙해지면 상당히 사용할 수 있을 것 같다.
Reference
이 문제에 관하여(Vue.js로 업무 메일을 효율화해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/WaiEnu/items/de8be5a0801088fadc44텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
