Webの仕事で困ったこと
二年くらいHTMLコーダー、フロントエンド(jQuery)、時々Webデザインをやっていて、仕事で困ったこと。
代表例
- 読めない修正原稿(Excelならいいほう、手書き原稿をスキャンしたPDFとか)
- まとまっていない画面モックアップ(Excelなら略)
- 納品したのに怒涛の修正要請
- なぜかディレクターではなく、現場に回ってくる期限・価格交渉
- そもそもディレクターが忙しすぎて連絡つかない(認識合わせもできない)
例を挙げればキリがないのでこの辺で。
基本仕様
現場の一番の課題としては
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>
後記(感想、改善点etc)
Vue.jsを使ってみた
Vue.jsは使い方書き方勉強中の身。メールあんちょこの中身のデータはif文直書き。本当のこと言えばjsonとかで用意したかったがデータの渡し方がわからず断念した。JQueryでちまちま書いていたselectボックスに対するイベントがVue.js使えば一発でできた。慣れれば相当使えそうだ。