HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
Gmailの添付画像を圧縮して空き容量を確保できるウェブアプリ「Unattach」を使ってみた
Gmailには無料アカウントでも15GBまでのデータを保存できますが、長年Gmailを使っていると15GBでも足りなくなることがあります。ウェブアプリ「Unattach」を使えば、メールボックスを圧迫している大容量メールを探し出して、添付ファイルを削除したり圧縮したりできるとのことなので、実際に使ってみました。 Unattach https://unattach.app/ Unattachを使うには、まずトップページにアクセスして「Try with your plan」をクリックします。 次に、Googleアカウントでのログインを求められるので、メールアドレスを入力して「次へ」をクリック。 パスワードを入力して「次へ」をクリック。 以下の画面が表示されたら利用規約やプライバシーポリシーをよく読んでチェックを入れ、「Start Unattach」をクリックします。 次に、「Sign in t
エンジニア出身ディレクターが語る！サイト制作前に押さえておきたいポイント3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのビールです。 はじめてのブログ執筆です！ 今回はフロント／バックエンドのエンジニアだった自分の経歴から、サイト制作前に押さえておきたい3つのポイントをまとめてみたいと思います。 「サイトの制作/リニューアルを検討しているが、何から手をつければいいかわからない……」ということでお悩みの担当者の皆さん、まずはこの3つのポイントを押さえておきましょう。 ドメインはどこで管理してる？ サイトを公開するにあたって必要不可欠な「ドメイン」。LIGのWebサイトで言うと、「liginc.co.jp」がドメインです（Webサイトの住所みたいなものだとよく言われますね）。 サイトのリリースにあたって、ドメイン管理画面に入って設定を変更する場合もあるので、自社で管理しているのか、あるいはサイトを制作した制作会社が管理しているのか、事前に把握しておくことが重要になります。 制作前に「ド
メールの見落とし防止！Gmailの自動振り分け機能の設定方法を紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です。LIGディレクターのほそです。 LIGでは主な業務はSlackで行っているのですが、クライアントやパートナーとのやりとりや、Googleカレンダーからインビテーションが来たりなど、まだまだメールでの連絡も発生しています。 主な業務はSlackで済ませているので、メールの確認はつい優先度が下がってしまうのですが、重要な内容ほどメールで来てたりするんですよね……。 そんなとき、Gmailの自動振り分け機能を使うとクライアントからの重要な連絡や、パートナーのメールを色分けして分類できるので、わかりやすくサクッとチェックできます。さっそく見ていきましょう。 こんな感じの分け方になります 早速ですが、自分はこんな感じに設定しています。色分けがポイントなのですが、クライアント=赤 / LIG社内=青 / パートナー=緑でそれぞれ分類しています。誰からのメールなのかがが一目瞭然ですね！ 左
たまに役立つ、Googleフォームの回答者に自動返信メールを送る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Google Formをたまに使うエンジニアのづやです。 機能的にはお問い合わせフォームとして利用できたりしてしまいますよね。ただデフォルトの機能だと、自動返信メールが送れないようなので、調べて実装してみました。 GAS（Google App Script）を利用したらけっこうあっさり作成できますが、ちょっとだけハマりポイントもありましたのでそのあたりも記載します。 下準備 なにはともあれFormを作成してみます まずはGoogle FormでFormを作成してください。ここに対する解説は、おそらく数えきれないくらいあるので探してみてください 今回はこんなFormでテストしていきます。 ※このFormは予告なく使えなくなる可能性があります。 なるたけいろんなパターンを用意してます。 Gasが動く準備をします FormができたらGASを書いていきます。 GASはスクリプトを書き、
Amazon Lightsailで爆速WordPress構築＋独自ドメイン設定・FTP接続してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
北海道、札幌、利尻町が大好きな、Webディレクターのたまさんです。 暖かくなってきて、嬉しい、楽しい、優しい気分になりますね。 そんな初夏の北海道に思いを馳せながら、今日はAmazon Lightsailで、非エンジニアがWordPress（以下WP）でサイト構築するまでを綴ろうと思います。 なぜLightsailでサイト構築したいと思ったか バックエンドエンジニアのりょうた氏が ディレクターのみなさん、Lightsail CDNが出ましたよ！ と、スーパーの特売を教えてくれるご近所さんみたいなノリで、ディレクターへ周知がありました。 以下りょうた氏の資料より抜粋しています。 Lightsail CDNとは？: AWS CloudFront を利用したCDNサービス。LightsailはAWSのVPSサービスのことです。 VPSとは？： Virtual Private Serverの略称。
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 | さくらのホームページ教室
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 商用のWebサイトでは欠かすことのできない「お問い合わせフォーム」。顧客との重要な接点ですので設置しているWebサイトは多いはず。今、そんなお問い合わせフォームが狙われています。「え、WordPressプラグイン最新にしてればいいんじゃないの？」と思われるかもしれませんが、今回は違いますよ！ 急増しているお問い合わせフォーム攻撃の手口 昨今、Webサイトのお問い合わせフォームを狙った大量メール送信攻撃が急増しています。手口は非常に古典的で、フォームから問い合わせをした際に送信される「お問い合わせありがとうございました」メールを悪用します。 お問い合わせした人のメールアドレス欄に、スパムメールを送りたいメールアドレスを入力お問い合わせ内容にフィッシングサイトや広告のリンクを入力送信ボタンをクリックお問い合わせあり
AMPとは？種類や導入のメリット・デメリットについて調べてみた｜AMP編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
フロントエンドエンジニアのライダーです。 LIG技術研究会のAMP編がはじまります！ LIG技術研究会って？ 日頃感じているWeb技術に関する疑問や不明な点を、研究員（LIG社員）がそれぞれのアプローチによって紐解いていく会。まだまだ謎が多い。 ひとつのテーマについてみんなで取り組むLIG技術研究会ですが、今回のテーマ「AMP」については未経験の研究員も多くいました。そこで、知識の底上げのためにまずは「AMPとは？」を全員で調べてくることに。そんなメンバーの調査結果を簡単にまとめてみたいと思います！ AMPとは？ パフォーマンスの最適化がなされていて、瞬時にWebページを表示することができるウェブコンポーネントをベースにしたフレームワークです。Accelerated Mobile Pagesの頭文字をとって、AMP（アンプ）と呼ばれています。 後述するAMP Websitesをインデックス
Airform - お問い合わせフォームをサーバレスで作成
Webサイトでよく使うのがお問い合わせフォームです。他は静的なコンテンツでいいのに、お問い合わせフォームがあるために動的にしなければならない…なんてこともあります。Googleフォームで代用できますが、デザイン的に他と合わないのが問題です。 そこで使ってみたいのがAirformです。Airformはメールアドレスだけ指定すれば、あっという間にフォームが作成できます。なお、同名サービスで使えるフロントエンド側のコードを公開しているのみで、サーバ側のコードは公開されていません。 Airformの使い方 AirformのHTMLコードは次のようになります。 https://airform.io/ の後ろに自分のメールアドレスを指定するだけです。 <form action="https://airform.io/your@email.com" method="post"> <input type=
無料＆簡単にオンライン予約システムが作れる「SELECTTYPE」レビュー、ウェブサイトへの埋め込みもラクチンで超絶多機能にすることも可能！
自分好みの予約システムを作る手順は簡単で、2つの手順に従うだけ、専門知識は一切不要。 1：あらかじめ用意されているテンプレートから一番変更しやすそうなものを選ぶ 2：自分の好みに合わせて変更 できあがったら、実際に予約する立場で試してみて、「これは使いにくいので変えてみよう」「こういう部分も予約時に決めてもらう方がよさそう」というようにしてブラッシュアップすればとりあえず完成。あとは本番で使ってみて初めてわかる点を改善していけば、どんどん使い勝手が良くなっていき、収益を押し上げてくれるとともに、管理の手間が減ってスムーズに運用でき、本来やるべき事に集中できるようになります。 というわけで、「SELECTTYPE」なら実際にどれぐらい簡単に作ることができるのかという気になる点を実践して確かめてみました。 予約システムつきホームページ【SELECTTYPE】 無料で予約フォーム付き予約システム
Maizzle - HTMLメールを作るためのフレームワーク
HTMLメールを使うのも当たり前になってきました。しかし、レスポンシブなメールをきちんとメール向けに仕様に合わせて送らないとレイアウトが崩れてしまったりします。それではせっかく目立つHTMLメールを使っているのに勿体ないです。 そこで使ってみたいのがMaizzleです。HTMLメールを作るためのフレームワークです。 Maizzleの使い方 一例です。Webブラウザでプレビューを出しながら作成できます。 よくあるメールアドレス確認メール用のテンプレート。 管理画面です。 ホットリロードやスクロール同期などの機能があります。 MaizzleはJekyllに似たテンプレートエンジンを使っています。テンプレートに沿って作成することで、レスポンシブなメールテンプレートが簡単にできます。デバッグ機能もあり、HTMLメールを作る際に役立つツールになるでしょう。 MaizzleはJavaScript製のオ
Got Your Back - Gmailをバックアップ&リストア
クラウドサービスは常に存在するとは限りません。突如としてサービスが停止したり、終了したりする可能性があります。そのため、定期的にバックアップしておくのも大事です。 今回紹介するGot Your BackはGmailのバックアップをしてくれるソフトウェアです。 Got Your Backの使い方 バックアップを行うところです。リストアもできます。 APIアクセスは認証コードを入力して許諾を得ます。 バックアップはeml形式です。 Got Your Backのメールは一般的なメール形式であるemlとして行われます。これであれば一般的なメールソフトウェアでも取り込めるでしょう。バックアップはもちろん、リストアもできますので定期的に実行すると良さそうです。 Got Your BackはPython製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 jay0lee/got
メールアドレスを指定できるmailtoリンクの設定方法や便利なスクリプト
2023年3月27日 JavaScript, Webサイト制作 多くのWebサイトでお問い合わせにはフォームを設置しているかと思います。入力ミスのチェックなど機能のついたものも多いのですが、初心者の方には設置のハードルが高く感じるかもしれません。そんな時は手軽に導入できるmailtoリンクを使ってみましょう。リンクをクリックするとユーザーがいつも使っているメールアプリが起動するので、送信元のメールアドレスを入力する手間も省けますよ。懸念されやすい迷惑メールの対策をしているスクリプトも紹介します！ mailtoリンクの使い方 a タグの href 属性に mailto:メールアドレス と記述すればOK。リンクテキストをクリックするとメールアプリが起動し、メール作成画面が表示されます。 細かい設定をしたい場合は必要項目を mailto:メールアドレス?項目 という形式で ? を使って続けて記述
mailtoリンクを使いやすいUIに変換するスクリプト・「MailtoUI」
MailtoUIはmailtoリンクを使いやすいUIに変換してくれるスクリプトです。href="mailto:tony.stark@example.com"といったコードでもOutlook等のメーラーを立ち上げず、使いやすいUIで選択肢をユーザーに提供します。以下動作サンプルです。 動作サンプル ※クリックで動作確認できます コードは以下のように普通のmailtoリンクとなっています。 <a class="mailtoui" href="mailto:hogehoge@example.com">動作サンプル ※クリックで動作確認できます</a>特にclassを与える必要もなく、スクリプトを読み込むだけでこのようなUIを提供できるようになります。 勿論、日本向けに諸々変更する必要がありますが、個人的にはいいアイデアだなぁと思いました。メールフォームよりも普段慣れたメーラーの方がいいかも、とは
無料で送信したメールが開封されたか＆リンクがクリックされたかをチェック可能なChrome拡張機能「Unlimited Email Tracker」
送ったメールを相手が読んでくれたかどうかは、ふと不安になってしまうものです。「Unlimited Email Tracker」は送ったメールを相手が開封したかだけではなく、本文中のリンクをクリックしたかまで一目でわかるChrome拡張機能です。また、メールを指定時間に送信したり、メールが一定期間読まれなかった場合通知してくれる機能もついています。 Looking for Email Tracker? Get free email tracking for Gmail & Inbox https://snov.io/email-tracker.html Google Chromeを使ってChromeウェブストアの「Unlimited Email Tracker」のページにアクセスして、「Chromeに追加」をクリック。 「『Unlimited Email Tracker』を追加しますか？」と
送ったメールを相手が開封したタイミングで通知してくれるChrome拡張機能「Mailcastr」を使ってみた
メールでメッセージを送信する利点として、電話のように双方が同じタイミングで時間を作る必要がなく、送信側も受信側も好きなタイミングでメールを作成したり開封したりできる点があります。しかし、こちらが送ったメールを受信者側が開封したタイミングがわかると、続けてさらに詳細な内容についてのメールを送ったり、電話でメールの内容について話し合うといったアクションが可能になります。メールをより効果的に活用したい人にぴったりな、相手がメールを開封したら通知してくれるChrome拡張機能「Mailcastr」を使ってみました。 Mailcastr - Email tracker app for Gmail. https://mailcastr.com/ ◆Chrome拡張機能の追加 「Mailcastr」はChromeウェブストアから無料で入手することができます。「CHROMEに追加」をクリック。 「拡張機能
送信済のメールが相手に開封されたかが一目で分かるGmail・Inbox用ブラウザ拡張機能「Mailtrack」を使ってみた
メールに替わる連絡手段としてLINEなどメッセンジャーアプリが浸透してきましたが、メールはまだ第一線で活躍中で、特に社外の相手とやりとりするビジネスシーンでは欠かせないものです。しかし一方で、送信したメールを相手が開封したか把握できないのは、メッセンジャーアプリに慣れてしまった人にとっては少し不便に感じられることも。そんな問題を解決してくれるのが「Mailtrack」です。PC版のGmailとGoogleのInboxで送信したメールを相手が開封したかが一発でわかります。仕事からプライベートまで幅広く使えそうなので、実際に使ってみました。 Email tracking for Gmail & Google Inbox — Mailtrack https://mailtrack.io/ ◆インストールとサインイン 「Mailtrack」はChrome、Edge、Firefox、そしてOpera
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
tmpmail - テンポラリメールアドレスをコマンド一つで発行 MOONGIFT)
MailTrackerBlocker - macOS純正メールアプリのトラッキング防止プラグイン MOONGIFT
Stripo — FREE Email Template Builder: Drag and Drop Html Email Editor
