mailto: の活用アイデア
HTML 初期からある、a タグリンクの href 属性に [mailto:メールアドレス] でメール作成のリンクを作る仕様の活用ネタ
普通の HTML 仕様も、案外便利な使い方ができるネタ、の紹介
この記事は原森が昔から HTML の基本技を使って業務を効率化するためにやっていたネタを、web制作者のみなさんを対象に書いています。
もしかすると、作業端末のメールソフトに便利な機能があってすでに使っていたり、社内でシステムを用意し簡単に連絡が取れる体制になっている、又は携帯のショートメール機能や頭に L がつく某サービスなどを連絡手段に使ってる場合もあるかと思いますので、今でも使える技ですがあくまで昔話、として紹介します。
昔からある webサイトで見かけることのある、問い合わせフォームを使用していない、メールでのお問い合わせ方法
まだ IE がバージョン3 で netscape と戦争していた時代には webサイトの問い合わせフォームは主に Perl で作った cgi を使っていました。その頃は、予算やサーバの関係で cgi を使うまでもない、という場合はフォーム自体がなくてメールアドレスや業種によっては電話番号だけ書いてあるだけの場合もありました。
少しだけ閲覧者を気遣って「メールでのお問い合わせ」というリンクが用意されていて、クリックすると自動的に新規メール作成状態になる、というリンクを貼っている場合もありました。
通常 webサイトではスパマーにメールアドレス収集をされないための対策として、全く使わなくなってるかと思われますので、知らない人もいるかもしれませんが、 A タグの href 属性に通常の URL ではなく、[mailto:メールアドレス] の形で記述すると、メールへのリンクが作れる、というものがあります。
例：メールでお問い合わせ
クリックすると、使っているパソコンのメールソフトの新規メール作成状態になり、宛先には mailto: の後ろに書いたメールアドレスが自動的に記述されているかと思います。
（メールを設定していない場合はメールソフトの設定画面になります）
<a href="mailto:メールアドレスを書くと宛先に自動で記述されます">メールでお問い合わせ</a>webサイト制作でほぼ使わないので、詳細なネタはほとんど覚えていないかもしれません
特にネットで公開している webサイトで（スパマー対策も含め）今時は使うことのない昔からの技術仕様なので、多分ほとんどの人は知らないかもしれませんが、お問い合わせメールなどをリンクで作る時に、タイトルや本文に文字を表示することもできるようになっています。
メールアドレスの後ろに [?] を付加して、その後ろに件名なら [subject=件名]、本文も付加する場合はその後ろに [&] で区切って、[body=本文] と書きます。
例：メールでお問い合わせ
<a href="mailto:atesakimeado?subject=件名が表示されます&body=本文です">メールでお問い合わせ</a>上記リンクはこんなソースになっています。
昔の webサイトでは使っているところもありましたが、今ではこういうリンクは企業サイトではほぼ使われてないと思います。
mailto: を form の action で指定すると、おおむね文字化け問題に悩まされる事例が多かった
<form action="mailto:test@kakuuno-mail-address?subject=テスト件名" method="POST" enctype="text/plain">
<p>名前: <input type="text" name="NAME" size="20" value="test"><br>
メッセージ: <input type="text" name="MSG" size="20" value="message"><br>
<input type="submit" value="メール作成"> <input type="reset" value="取消"></p>
</form>新規メール作成画面になり、宛先「test@kakuuno-mail-address」と件名「テスト件名」が入力されていて、本文には NAME=test MSG=message のような感じで表示されています。あとはそのメールを送信してもらうだけ、というのが昔の cgi を使わないお問い合わせフォームでの「mailto:メールアドレス」の使い方になっていました。
多分フォームに日本語入力した人で、Google Chrome を使われている場合は、本文の日本語が文字化けするかと思います。
※ちなみに、FireFox ＆ Thunderbird は form の action でメール起動をした場合、日本語でも文字化けはしていませんでした。
※IE などでは OS とセキュリティ設定によっては、メール自体が起動しないかもしれません。
先ほどの A タグリンクの場合は文字化けしてませんでしたが、フォームの action に指定した場合、mailto: の文ではなく、フォームの input から入力された日本語文字が文字化け問題を引き起こしてくれるので、そのためにも perl や PHP でお問い合わせフォーム CGI を作る時は常に文字コード関連に気を使っていろんな環境でテストして作るのが一般的で、そこが一番面倒な部分だと思ったりします。
といっても今回のネタは問い合わせフォームを作っているわけではなく、mailto: という新規メールを起動するリンク機能を活用したアイデア紹介なので、フォームからの文字化け問題は特に気にする必要はないかと思います。（多分）
webの問い合わせフォームではなく…
この仕様については、原森が利用しているような無料で使えるお問い合わせフォーム機能を提供してくれるありがたい企業も有りますので、web のお問い合わせフォームでは今では使わないものかと思います。
また、大抵の web制作会社は専用の perlcgi を提供していたので、大昔でも mailto でメールを送る動作のフォームはほとんど作ったりはしてないかもしれません。
社内の簡単な連絡メール起動用のローカルHTMLツールについて
せっかくの新規メールに文字が書ける mailto: なので…、と言うことで原森は某社でお世話になっていた頃、社内の営業さんにお電話がありました連絡用のローカル HTML を作ってデスクトップに置いて使ったりしてました。
ずっと事務所にはりついて web制作作業をしていると、大抵事務所にかかってくる電話を受けることになり、ほとんどは営業の Aさんや Bさん宛ての電話だった、という感じになり、営業さんは普段外出中で会社にいないので、会社名・担当者名・要件と連絡先電話番号を一応聞く、という流れがあり、あとはいそいそとメールを起動してアドレス帳から新規作成し、件名に「★☆の●○さんからお電話がありました」を、本文にさっき聞いた内容（誰から何の件で番号■◆■まで電話してください）を打ち、確認後、メール送信、という作業をすることになりますが、毎回電話があるたびにそれを繰り返します。
この作業の中で、毎回同じことをしている部分が、 [1]メールを起動 [2]アドレス帳から宛先を探す [3]アドレスから新規メール作成 [4]件名に「●★さんからお電話がありました。お電話くださいとのことです」[5]本文に「お疲れ様です、●○の件で●★さんからお電話がありました。電話番号■◆■までお電話くださいとのことです」を打つ、と言う感じで、●や○や★や■以外はほぼ同じ文章を毎度毎度キーを打って書くことになります。
ほとんど定型文なのに、毎回新規にメールを作るのはかなり時間の無駄だと思ってしまいます。
だからといって、以前に送ったメール本文からコピペして、違う部分を打ち直すなどは、時々間違って(人間だもの)違う人の情報が混在して重大なトラブルになる可能性もありますし、
さらに長年 PC を使って仕事をしている web制作者なら原森と同様に思っている人が多いのではないかと思いますが、
そもそも【コピペ】作業自体がなんだかめんどくさい。
なぜならコピペは [ドラッグ又はダブルクリックで選択](マウス操作) →、[Ctrl+c](キー操作) → [貼りつける部分をクリック又はドラッグして選択 ](マウス操作) → [Ctrl+v](キー操作) という違う動作が4手必要だからです。
※マウスのみの作業でコピペ操作を右クリックメニューからやる人は6手必要となります。
※昔と違って、windowsOS はドラッグして選択状態になった文言をドラッグ移動し、別の部分にドロップすることでペーストすることもできますが、動作的には完ぺきではなく、原因と場合について説明するのも面倒な感じですが、貼りつける部分を再度選択してしまったり、コピーではなく切り取りで移動になってしまう、などもあったりで、確実な処理を考える人はあまりドラッグのみでなんでもやろうとしないかと思います。(※つっこみ回避の言い訳を一応書いておきました)
原森が昔作ってたローカル連絡メールツールHTML
ということで、違う部分だけをフォームに入力し、後は javascript で文章を作ってメールに自動的に書くようにする、というローカルツールを HTML と javascript で作っていた、というネタを紹介します。
基本アイデアは最初に紹介した、A タグの href 属性に [mailto:メアド?subject=件名&body=定型文とフォームからのデータで作った文章] を書き換えたソースを javasctipt で HTML に表示するだけ、というものです。
ローカルツールの雰囲気サンプル
プログラムや内容(文言)は今作ったものです。昔、こんな感じのものを用意してた、というサンプルです。
また、今と昔では javascript の作り方が変化してますので、今作るならの形で作ってます。
※例えば、フォームのデータを昔は name だったけど、今なら id で取得するとか、昔はフレームを使って、フレーム内に javascript で作った HTML を表示するか、本文中で懐かしの document.write したりしてたかと思いますが、今ではほとんどのブラウザが対応したので id からタグの属性値や innerHTML を簡単に書き換えたりできるので、昔のソースがどんな感じだったかは思いだせません…。
※また上記のフォームで動作している javascript はこの原森webサイト専用の関数を使っていますので javascript ソースを見ても意味不明かと思います。(アイデアについては以下、紹介しています)
ローカル連絡メールツールの javascript アイデア
フォームからメールに文字を送ると文字化けする可能性があるので、A タグリンクの href 属性に上記のメアドと件名と本文を記述する形にしたメールリンクを HTML に表示する、というものです。
javascript でやってることは、
[1]フォームの入力内容等を取得 [2]入力内容から mailto: 以下の文字列を作成 [3]上記サンプルなら [id= hmt_mail_a] のhrefを初期設定の [#] から [mailto:…] に変更する [4]ついでに今ならリンクタグの innerHTML を「[メールリンク作成]をクリック」から「●○さん宛ての新規メール起動」に書き換える
と言う感じになっています。
「フォームから入力データの取得」「文字列作成」「href属性の書き替え」（おまけの「innerHTMLの書き替え」）など簡単なものを組み合わせているだけなので、webプログラマならjQueryを使うまでもなく、普通の javascript で簡単に作れるかと思います。
ブラウザやメールソフトについて
webサイトで公開するために作ったものではなく、自分のパソコンに置くローカル HTML ファイルなので、自分が使う時に動けばいい、というものになります。
原森の場合、大昔は Netscape コミュニケーター 4.0 と Netscape メール (又はフリーのBeckky)で、FireFox と Thunderbird が登場した頃も使っていたかと思います。
今テストした感じではメールソフトは最新版の Thunderbird で、ブラウザは Google Chrome と FireFox、 ついでに一応 IE10 で動作してました。
（IE はセキュリティ設定を変更してないのでいちいちダイアログで Thunderbird を起動しようとしてるなどと確認してくれたりします）
ということで、例えばメールソフトが outlook 等の場合は確認していないので動作しない可能性もあります。
自分用のツールを作る意義
ポイントはツールを一般公開するためではなく、自分の環境で自分が使うために自分で作る、という点です。
一般配布用に作る場合はどんなブラウザや環境でも最低限動作するように…などを考える必要があり、IE に対応するために他のブラウザでは動作していた機能を削ることになる、などの配慮も必要ありませんし、
いろいろ使っているうちに、自分のためだけにもっと便利に使えるように改造する案が浮かんでくるかと思います。
例えば、上記ツールなら使っているうちに、●○社なら担当者はこの人と判明しているなどの場合、よく連絡のある顧客一覧のサンプル記述をあらかじめプルダウンなどを順次追加して用意しておき、担当者一覧も企業に対応してプルダウンが変化するように作ることも可能かと思います。
また今回はあらかじめ入力支援テキストボタンを追加していますが、要件が [見積] 以外に [打ち合わせ] [納品] [webサイト更新] [リニューアル] などがほとんど…と気付いてくると、それもいちいちフォームに入力するのが面倒になってきますので、簡単にフォームに入力できるようにしよう、などと機能追加したりするともっと楽ができるようになります。
サンプルでは文字ボタンクリックでフォームに文字列を追加するタイプで作っていますが、これをプルダウンにして、新規の input text 入力と切り替えで入力できる形にする、なども考えられます。
そういう改造も自分で作ったものなら簡単にできるかと思います。
また、上手くできない場合、やろうとするテーマがある状態なので、いろいろ調べることでスキルアップのための勉強になったりもします。（できない原因が判明したり、代替案が浮かんだり、いろいろです）
で、いろいろ考えて自分が思うようなものが作れた時にはかなり達成感（技術者としての自分への「俺スゲー」的なご褒美感覚）がえられるのではないかと思います。
しかもそうやって作ったツール…今回紹介したメール作成のようなものを使ってみると、1日 8時間の基本労働時間の内、1件につき 5分使っていたお電話ありました連絡メール作成送信処理が、15秒程度で完了する状態になって、1日平均5件程度メールを送る作業で 25分消費していた時間のほとんどをタバコ休憩にあてることができるようになったりして、かなり仕事が効率化して残業不要になり、経営者視点からも人件費削減でうはうは状態になっているはずです…多分。※技術者にたいして単純に時間給労働視点で給料払っているだけの経営者には、そういう効率化はわざわざ気を使ってその点をアピールしてあげないと気づいてくれない場合も多々ありますが…
まとめ
webサイト制作でほとんど使ってなかった mailto: リンクで社内担当者への定型の連絡メールを送るためのローカル HTML ツールを作ったのは、何かのきっかけで mailto: が目にとまった時に、調べてみると宛先だけでなく、件名や本文もメールに書ける、というネタを知ったからだったと思いますが、とにかく常に同じことをしているような作業を発見したら、なるべく楽ができるようなツールアイデアを自分が持ってる技術(HTML と javascript だけでもいろいろ可能性があります)で考えてみたり、こんなことができないかというアイデアを発想し調査研究して作ってみることは、プログラマ系の web制作を仕事にしている人にとっては日々使っている技術なので、お客さんに提供するだけ（依頼された webサイトを作るだけ）ではもったいない、などと原森は思ったりします。
今回の記事は、昔から原森では日々の面倒な作業がなるべく楽になるようなアイデアを考える、というテーマでいろいろとローカル HTML ツールを作りながら、ついでに HTML や javascript の活用ネタを研究していた、というものの一つを紹介してみました。
※他には連番画像の一括ダウンロード用ツール (javascript) とかテーブル・リスト・フォームタグ作成ツール (javascript) とか、ローカルファイル一覧取得ツール (perl) など、場合によっては超有名ソフトの「秀丸」さんの正規表現を使った置き換え機能の方が手早いので実際には役に立たなかったしょうもないものを含め、いろいろ作ったりしてました。
※原森web の javascript ツールもwebサイト制作作業の効率化を目的に自分で使うために作ったものです。
※利用頻度が高いのは[連番ソース作成ツール]で、あとは [transition、animation、keyframes、transform] 等もよく使います…。
web業界人の中には、もっと高度なツールを作って遊んで…仕事の効率化をしている人がたくさんいると思います。
今回紹介したある意味化石時代のロートル職人的発想のしょぼいツールネタも、せっかく技術があるのに、仕事の効率化に使うことを考えたことのない、まじめで一所懸命だけどなんとなくしんどい作業を毎日やってる人の目にとまった場合に、効率化（＝経費節減）を考え始める第一歩になるのではないかと思い、とりあえず紹介してみました。
以上、長い記事を最後まで読まれたみなさん、お疲れさまでした。
ページトップへ