[phiary] 簡易お問い合わせを作る際にぜひ!『mailto link generator』作りました

※ こちらで見るとページ内でデモの実行, 編集ができます

a タグの href に指定出来る mailto:~ というリンク. これって改行とか含まれてると若干面倒ですよね.

そこでカンタンに生成できるツールを作りました.
項目を入力していくと a タグに埋め込めるリンクを下部にリアルタイム生成します.

フレームワークに Riot 使ったり, CSS に Flexbox を使ったりと, 一応モダンな作りになってるかと思います.
コードも載せておくので良かったら参考にしてください.

Tool

Code

riot のタグを定義している部分です.
jade で書いてます.

app
  header mailto link generator
  div.container
    div.form
      div.inputarea
        input(name='email', type='email', value='[e-mail]', oninput='{generate}', onfocus='this.select()')
        label To: 
      div.inputarea
        input(name='cc', type='email', oninput='{generate}', onfocus='this.select()')
        label cc: 
      div.inputarea
        input(name='bcc', type='email', oninput='{generate}', onfocus='this.select()')
        label bcc: 
      div.inputarea
        input(name='subject', value='[Runstnat] お問い合わせ', oninput='{generate}', onfocus='this.select()')
        label subject: 
      div.inputarea
        textarea(name='body', oninput='{generate}', onfocus='this.select()') ピッピッピー
        label body: 

    div.arrow ↓
    div.results
      div.inputarea
        a(href='{link}') {email.value}
        label link: 
      div.inputarea
        textarea(name='html', readonly, onfocus='this.select()') <a href='{link}'>{email.value}</a>
        label html: 
      div.inputarea
        textarea(name='url', readonly, onfocus='this.select()') {link}
        label url: 

  style(scoped, type='less').
    :scope {
      color: #444;

      header {
        background-color: orange;
        color: white;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .container {
        padding: 1.5rem 1rem;
      }
      .form {

      }
      .arrow {
        margin: 1rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background-color: orange;
        border-radius: 50%;
        color: white;
        font-weight: bold;
      }

      // 
      .inputarea {
        margin-bottom: 1rem;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;

        label {
          display: block;
          font-size: 0.8rem;
          margin-bottom: 0.1rem;
          width: 80px;
        }

        :focus + label {
          color: blue;
          font-weight: bold;
        }

        input {
          width: 100%;
          border: 1px solid #ddd;
          border: none;
          outline: none;

          height: 1rem;
          line-height: 1;

          border-bottom: 1px solid #ccc;

          &:focus {
            border-bottom: 1px solid blue;
            transition: 256ms;
          }
        }
        textarea {
          width: 100%;
          height: 50px;
          border: none;
          outline: none;
          border-bottom: 1px solid #ccc;
          &:focus {
            border-bottom: 2px solid blue;
            transition: 256ms;
          }
        }
        a {
          width: 100%;
          font-size: 0.6rem;
        }
      }

      .functions {
        text-align: center;
        button {
          background-color: orange;
          color: white;
          border: none;
          outline: none;
          padding: 8px 12px;
          border-radius: 2px;
        }
      }
    }

  script.
    this.on('mount', function() {
      this.generate();
      this.update();
    });

    this.generate = function() {
      this.link = 'mailto:{email}?cc={cc}&bcc={bcc}&subject={subject}&body={body}'.format({
        email: this.email.value,
        cc: this.cc.value,
        bcc: this.bcc.value,
        subject: this.subject.value,
        body: this.body.value.replace(/\n/g, '%0d%0a'),
      });
    };