ケケンタ

Want to automatically convert Gmail emails to PDF…
Manual conversion every time is such a hassle…

Have you ever felt this way?

Speaking personally, I’m currently working as a freelancer.

When looking for work, I often use crowdsourcing services like Lancers and Coconala. This means that for every job I take, I need to keep the necessary emails as electronic documents, and I frequently find myself thinking, “I wish I could convert these to PDF more easily.”

To improve efficiency, I was searching for a tool to convert Gmail emails to PDF, but surprisingly couldn’t find one that met my ideal requirements, which left me frustrated.

So I thought, “Why not make it myself!” and developed the desktop application (for Windows) I’m introducing today: “GmailToPDF.”

After actually developing it, I created a truly convenient tool, so I’d like to introduce it in detail!

＼ Purchase on Gumroad !! ／

What kind of app is GmailToPDF?

GmailToPDF is a modern desktop application that converts Gmail emails to PDF.

It’s built with React + Electron + Material-UI, designed to be both beautiful and extremely user-friendly.

This introduction covers the Windows version only.

Main Features and Development Focus Points

I developed this with “Vibe Coding” as the main focus, which has become popular recently.

Therefore, while I didn’t do heavy programming, I put a lot of effort into functionality and UI development. In this chapter, I’ll introduce these main features and focus points.

1. Secure Gmail Authentication System

  Feature Details

For this development, security was the top priority, so I adopted OAuth2 authentication.

At first, you might think “Isn’t authentication troublesome?”, but after a little initial setup during the first login, you can use the automatic generation function just by logging in with your Google account, so it shouldn’t be much trouble.

Moreover, it only authenticates for email reading and email sending (used only for completion notifications), so you don’t have to worry about accidentally deleting emails.

ケケンタ

By the way, I’ve prepared detailed explanations for the initial setup steps within the app, so please rest assured!
You can proceed with operations while viewing both the explanation screen and setup screen side by side!

2. Advanced Email Search Functionality

  Feature Details

This is the feature I put the most effort into developing!

For example, if you want to convert only important emails from Mr. Tanaka to PDF, you can extract emails precisely by entering “Tanaka” in the sender field and “important” in the subject field.

Furthermore, you can set exclusion conditions, so you can easily exclude things like “newsletters.”

Search conditions can also be saved, so once you set up frequently used conditions, you can search with one click from next time. This saves a tremendous amount of time!

ケケンタ

Using the quick search function, you can search for “today’s emails” with one click, so it’s very convenient without any hassle!

3. Flexible Email Selection System

  Feature Details

Once search results are displayed, the operation is simple – just select emails with checkboxes.

You can select multiple emails at once, so you can efficiently proceed with PDF conversion. You can also preview the content of selected emails beforehand, reducing the risk of converting the wrong emails to PDF!

By the way, very rarely, there might be emails that can’t be converted to PDF, but in such cases, it properly lists “which emails couldn’t be converted to PDF,” so you can prevent missing PDF conversions!

4. High-Quality PDF Generation Functionality

  Feature Details

I made it so that emails can be saved to PDF with their appearance preserved as much as possible, so no important information is lost. HTML decorations and images are also included, so you can keep complete records of emails.

I also included an email notification function that sends to your authenticated Google account. Therefore, even when running large-scale Gmail PDF generation, you don’t need to worry about “Is it done yet? Or still going?” You can proceed with other work while just waiting for email notifications.

ケケンタ

Furthermore, I included a function to save attachments, which I find very useful for document management as a freelancer with preservation obligations!

Currently not included, but I plan to implement “automatic scheduled execution functionality” in the future.
App update fees are free, but as new features are added, prices are likely to increase, so if you want to get the app at a good price, early purchase is recommended!

＼ Purchase on Gumroad !! ／

5. Google Drive Integration

  Feature Details

I made it so you can save directly to cloud storage, making backup extremely easy.

You can also access it from other devices, so you can check PDFs even when out. You can also save local storage space, so it’s a win-win!

By the way, you can directly create new directories in Google Drive within the app, so you don’t need to open Google Drive each time – you can quickly create PDFs, which is also a highlight.

6. Modern User Interface

  Points

I think appearance is, in a sense, more important than functionality, so I aimed for an intuitive and user-friendly interface. It also supports dark mode, so it’s easy on the eyes even during long use.

Also, the animations are smooth and designed to feel good when operating.

7. Multi-language Support

Multi-language support is available.

Currently supported languages are:

• English
• Japanese

Only 2 languages, but I plan to add other languages in future updates.

Actual Usage Scenarios

These are the actual intended usage scenarios for this app.

Business Use

• Meeting record preservation: Convert important meeting emails to PDF for storage
• Legal document organization: Save contract-related emails as legal evidence
• Project management: Organize project-related emails chronologically

Personal Use

• Memory preservation: Save important emails as PDF
• Learning records: Organize emails from online courses and seminars
• Household management: Convert invoice and receipt emails to PDF for storage

ケケンタ

The essence of this app is that it can automatically convert large amounts of Gmail to PDF, so I think it will be a very reliable tool for those who need to regularly convert many Gmail emails to PDF!

Setup and Usage

In this chapter, I’ll briefly introduce the setup procedures required during the app’s initial startup.

If you have requests like “I’d like to know about this too!”, please feel free to contact me through the contact form.

1. Initial Setup

  Authentication Flow

For initial setup, I’ve prepared detailed procedures within the app, so please rest assured!
If you have any questions, I also accept personal support, so please feel free to contact me through the contact form!

2. Basic Usage Flow

  Basic Usage Flow

ケケンタ

That’s all it takes! PDF conversion work that would take a lot of time manually is completed in an instant!

Summary

I developed GmailToPDF as an application that balances advanced functionality and usability for the demand of easily converting Gmail emails to PDF.

I particularly feel I was able to develop the following points attractively:

• Security: Secure operation possible through OAuth2 authentication and principle of least privilege
• Efficiency: Significant time savings achieved through advanced search functionality and automatic conversion
• Usability: Modern UI and intuitive operability

If you’re having trouble with Gmail email management, please give it a try! I’m sure email organization and storage will become much easier.

I also feel that I’ve created a truly convenient tool after developing it. It saves a tremendous amount of time, so I’m glad I developed it!

In this article, I’ve explained the main features of the GmailToPDF app and its benefits in detail. I’ve also touched on detailed usage methods for each feature and actual usage scenarios, so I hope it will be helpful for those considering introducing the app.

If you have any questions, please feel free to comment or contact me!

ケケンタ

Thank you for reading to the end!

＼ Purchase on Gumroad !! ／

ケケンタ

GmailのメールをPDFに自動変換したい……
毎回手動だと面倒……

みなさんは、このように思ったことはないでしょうか？

わたくしごとですが、僕は現在フリーランスとして活動をしています。

お仕事を探しに行くときによく利用するのがランサーズやココナラのようなクラウドソーシングサービスなのですが、そうすると、お仕事をするたびに必要なメールを電子書面として残しておく必要があり、「もっと簡単にPDF化できたらいいのになあ」と感じることが頻繁にあります。

効率化のため、GmailのメールをPDFに変換するツールを探していたのですが、思いのほか自分の理想にあったツールが見つからず悶々としていました。

そこで、どうせなら自分で作ってみよう！と思い立って開発したのが今回ご紹介する「GmailToPDF」というデスクトップアプリ（for Windows）です。

実際に開発してみて、本当に便利なツールができたので、詳しくご紹介したいと思います！

GmailToPDFってどんなアプリ？

GmailToPDFは、GmailのメールをPDFに変換するモダンなデスクトップアプリケーションです。

React + Electron + Material-UIで構築しており、見た目も美しく、使いやすさも抜群になるよう設計しました。

今回はWindows版のみのご紹介となります。

主な機能と開発時のこだわりポイント

最近よく耳にするようになった「Vibe Coding（バイブコーディング）」を主軸に開発を進めました。

そのため、実際にゴリゴリとプログラミングをしたわけではないものの、その分 機能面やUIには本当にこだわって開発しました。本章では、それら主要機能とこだわりポイントをご紹介します。

1. 安全なGmail認証システム

  機能詳細

今回の開発にあたって、セキュリティは最重要課題だと思い、OAuth2認証を採用しました。

最初は「認証って面倒じゃないの？」と思われるかもしれませんが、初回ログイン時に少しだけ初期設定をして、あとはGoogleアカウントでログインするだけで自動生成機能を使えるようになるので、大した手間ではないはずです。

しかも、メールの読み取りとメール送信（完了通知にのみ使用）専用アクセスのみを認証するため、誤ってメールを削除してしまう心配もありません。

ケケンタ

ちなみに初期設定の手順はアプリ内に詳細な解説を用意していますのでご安心ください！
解説画面と設定画面を並べた状態で操作を進めることが可能です！

2. 高度なメール検索機能

  機能詳細

これが一番力を入れて開発した機能です！

例えば「田中さんからの重要なメールだけをPDF化したい」という場合、送信者に「田中」、件名に「重要」と入力するだけで、ピンポイントでメールを抽出できるようにしました。

さらに、除外条件も設定できるので、「ニュースレターは除外したい」なんてことも簡単にできます。

検索条件も保存できるので、よく使う条件は一度設定しておけば、次回からはワンクリックで検索できます。これで時間を大幅に節約できるようになりました！

ケケンタ

クイック検索機能を使えばワンクリックで「今日のメール」なんかも検索できるので、手間がかからずとても便利ですよ！

3. 柔軟なメール選択システム

  機能詳細

検索結果が表示されたら、チェックボックスでメールを選択するだけのシンプルな操作にしました。

複数のメールを一度に選択できるので、効率的にPDF化を進められます。選択したメールの内容も事前に確認できるので、間違ったメールをPDF化するリスクも減らせます！

ちなみに、ごく稀にPDF化ができないメールが混ざってくることがあるのですが、そのような場合もきちんと「何のメールがPDF化できなかったのか」もリストアップされるようになっているので、PDF化の漏れも防げます！

4. 高品質なPDF生成機能

  機能詳細

メールの見た目をできる限りそのままPDFに保存できるようにしたので、重要な情報が失われることがありません。HTMLの装飾や画像も含めて保存されるので、メールの完全な記録を残せます。

また、認証したGoogleアカウントへ送信されるメール通知機能も搭載しました。そのため、大量のGmailのPDF生成を実行していある間も「もう終わったかな？　まだかな？」と気にする必要がありません。ほかの作業を進めながら、ただメール通知を待つだけでOKです。

ケケンタ

さらに、添付ファイルを保存する機能を搭載しているため、僕自身もフリーランスとして保存義務のある書類管理のために重宝しています！

現在は未搭載ですが、今後は「自動スケジュール実行機能」も実装予定です。
アプリのアップデート料は無料ですが、新機能を搭載するにつれ、価格は上げていく可能性が高いため、お得にアプリをGETしたいのであれば、早目の購入がオススメです！

5. Google Drive連携

  機能詳細

クラウドストレージに直接保存できるようにしたので、バックアップがめちゃくちゃ簡単です。

他のデバイスからもアクセス可能になるので、外出先でもPDFを確認できます。ローカルストレージの容量も節約できるので、一石二鳥ですね！

ちなみに保存先ディレクトリは、アプリ内で直接Googleドライブへ新規作成することができるので、いちいちGoogleドライブを開かなくてもサクッとPDF作成できる点もイチオシです。

6. モダンなユーザーインターフェース

  ポイント

見た目はある意味、機能以上に大切だと思っているので、直感的で使いやすいインターフェースになるよう心がけました。ダークモードにも対応しているので、長時間使用しても目に優しいです。

また、アニメーションもスムーズで、操作していて気持ちがいいように設計してあります。

7. 多言語対応

多言語対応しています。

現在の対応言語は

• 日本語
• 英語

の２言語だけですが、

今後のアップデートで他の言語も追加予定です。

実際の使用シーン

当アプリの実際の想定使用シーンです。

ビジネス用途

• 会議記録の保存: 重要な会議のメールをPDF化して保管
• 法的文書の整理: 契約関連のメールを法的証拠として保存
• プロジェクト管理: プロジェクト関連のメールを時系列で整理

個人用途

• 思い出の保存: 大切なメールをPDFとして保存
• 学習記録: オンライン講座やセミナーのメールを整理
• 家計管理: 請求書や領収書のメールをPDF化して保管

ケケンタ

当アプリの本質は、自動で大量のGmailをPDF化できることなので、定期的にたくさんのGmailをPDF化する必要があるという方にとってはとても頼もしいツールになるのではないかと思います！

セットアップと使用方法

本章では、アプリの初期起動時に必要となるセットアップ手順を大まかにご紹介します。

「こんなことも知りたい！」というご要望があれば、お問い合わせフォームからお気軽にご連絡ください。

1. 初期設定

  認証フロー

初期設定については、アプリ内で詳細な手順を添えていますのでご安心ください！
もしもご不明な点があれば、個人的にサポートも受け付けていますので、お問い合わせフォームからお気軽にご連絡ください！

2. 基本的な使用フロー

  基本的な使用フロー

ケケンタ

たったこれだけで、手動ではとても時間がかかるPDF化作業が一瞬にして完了します！

まとめ

GmailToPDFは、Gmailのメールを簡単にPDFへ変換するという需要に対して、高度な機能と使いやすさを両立させたアプリケーションとして開発しました。

特に以下の点が魅力的に開発できたと感じています。

• 安全性: OAuth2認証と最小権限の原則により、セキュアな運用が可能
• 効率性: 高度な検索機能と自動変換により、大幅な時間短縮を実現
• 使いやすさ: モダンなUIと直感的な操作性

Gmailのメール管理でお困りの方は、ぜひ一度お試しください！　きっと、メールの整理や保存が格段に楽になるはずです。

僕も開発してみて、本当に便利なツールができたと実感しています。時間を大幅に節約できるので、開発して本当に良かったと思いました！

この記事では、GmailToPDFアプリの主要機能とそのメリットについて詳しく解説しました。各機能の詳細な使用方法や、実際の使用シーンについても触れていますので、アプリの導入を検討されている方の参考になれば幸いです。

何かご質問があれば、お気軽にコメントやご連絡をいただければと思います！

ケケンタ

最後までご覧いただきありがとうございました！

今回は

Google chromeの検証ツールを使用してCSSの反映状況を確認する方法
+
CSSが反映されていないときの対処方法

について解説をします。

なお、CSSが反映されない原因については以下の記事で詳しく解説しています。

あわせて読みたい

何故かCSSが反映されない「５つの原因」と「対処方法」 この記事では、CSSが反映されない原因と各対処・確認方法について解説していきます。  この記事を読むと分かること CSSがHTMLに反映されない原因 反映されない原因に対…

Googleの検証ツール（通称：デベロッパーツール）とは？

具体的な使用方法を解説する前に、まずはGoogleの検証ツールについて簡単にご説明します。

検証ツールは、恐らくWeb制作に携わっている方は誰もが使用しているであろう必須ツールです。

検証ツールで出来ることは非常に多いのですが、この記事でご紹介するのは、その機能の内、ごくごく一部分だけとなることを予めお伝えしておきます。

【解説①】検証ツールを起動 ～ HTML要素の選択・CSSを確認する方法

注意点として、今回ご紹介する検証ツールはPCでしか使用することができません。
スマートフォンでは開くことすらできないため、実際に試したい方はお手元にPCのご用意をお願いします。

ケケンタ

これまで検証ツールを使用したことが無い方にとっては、もしかしたら「検証ツールの画面が見づらい」と感じる部分もあるかもしれません。

しかし、そこを乗り越えればCSSが反映されない問題で沼にハマるという事態を回避しやすくなるので、ぜひ最後までご覧ください。

STEP①　検証ツールの起動

まずはGoogle chromeでCSSの反映状況を確認したいHTMLファイルを開いてください。

ケケンタ

特に確認したいHTMLファイルが無い方は当ブログ（ケケンタの独学ITブログ）でも大丈夫です！

目的のHTMLファイル開いたら、（または当ブログを開いた状態で）、以下のショートカットキーを押します。

F12　または　Ctrl + Shift + I（アイ）

すると、以下のような画面が立ち上がるかと思います。

検証ツールが起動

このとき、画像最上部のタブが「Elements」になっていない方はそちらをクリックしてみて下さい。

また、一番下に表示されている

という部分は、今回使用しないため右上の「×」をクリックして非表示にしてしまいます。

すると、以下のような画面になります。（非表示にした領域分だけ画面が縦方向に広がります）

STEP②　画面構成の確認

詳しい確認方法をご説明する前に、まずは簡単に検証ツールの画面構成をお伝えします。

以下のElementsで表示されている領域には、HTMLファイルで記述してあるコードが表示されます。

Elementsタブの表示内容

そして、その下（画面の下半分）に表示されているのが、そのHTMLコード（正確には各HTML要素）に紐づいているCSSの情報です。

HTMLに紐づくCSS情報

今回のCSSの反映状況の確認で主に使用するのは、こちらの下半分の情報になります。

画面が狭いという方は、上記画像の水色っぽい帯の上端にカーソルを当てると画面幅の調整が可能です。

この部分の上端

STEP③　検証ツールでHTML要素を選択する

続いて、検証ツールの機能を利用してHTML要素を選択してみます。

これにより、どのHTML要素にどのようなCSSが適用されているのかを確認することができます。

検証ツールを開いた状態で、以下のショートカットキーを押してみて下さい。

Ctrl + Shift + C

そして、どこでも良いのでブラウザ上のHTML要素（検証ツールではない、実際にサイトとして表示されている部分）にカーソルを持っていきます。

すると、以下のように、そのHTML要素の情報が表示されたかと思います。

Ctrl + Shift + Cを押して、ブラウザ上のHTML要素にカーソルを当てる

この状態で、CSSの反映状況を知りたい要素をクリックします。

ケケンタ

僕の場合、上記画像の「h2.section-title」と表示されている要素をクリックしてみました。

すると以下のように

画面の右側＝検証ツールの下半分の表示が変わり、クリックした要素に適用されているCSSが表示されました。

クリックした要素に適用されているCSS情報

以下の画像は、上記画像の右側を拡大表示したものです。

これを見ると、僕の環境では「.section-title」に４つのCSSプロパティが適用されていることが分かります。

ケケンタ

補足として、上記の方法だと
「クリックしたい要素が上手く選択できない！」
となる場合があります。

そんなときは、検証ツールのHTMLコードをクリックすることでもHTML要素を選択することが可能です。

テキストなどの目に見える要素ならばサイト画面上をクリックする方法が簡単ですが、目に見えないdiv要素を選択したい場合などは、検証ツール上で直接HTML要素を選ぶ方法の方が扱いやすいです！

※「▶」または要素に挟まれている「…」をクリックすると下層要素の表示切替ができます。

以上が、「検証ツール起動方法　～　HTML要素の選択・CSSプロパティの確認方法」の解説でした。

【解説②】CSSの反映状況の確認・対処方法

ここからは

• CSSの反映状況の確認方法
• CSSが反映されていないときの対処方法

についてご説明していきます。

まず、注目していただきたいポイントは、以下の３点です。

ケケンタ

各ポイントについて、以下より詳しく解説をしていきます！

パターン①　追加・編集したCSSが検証ツール上に表示されない

追加・編集したCSSが検証ツール上に表示されない原因には、以下のいずれかが考えられます。

キャッシュが残っているせいで、最新のCSSが反映されないケースは非常に多いです。

CSSを追加・編集したらとりあえず「Shift + F5 (+fn)」を押す癖をつけるのがおすすめ

ケケンタ

パスの指定方法についてはこちらの記事

あわせて読みたい

【HTML】パスとは？CSSが反映されない原因｜相対パスと絶対パス【初心者】 CSSが上手く反映されない…… とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。   この記事で分かること パスとは何か…

ケケンタ

キャッシュ・スーパーリロードについてはこちらの記事の中で詳しくご説明しています！

あわせて読みたい

何故かCSSが反映されない「５つの原因」と「対処方法」 この記事では、CSSが反映されない原因と各対処・確認方法について解説していきます。  この記事を読むと分かること CSSがHTMLに反映されない原因 反映されない原因に対…

パターン②　プロパティ上に取り消し線が引かれている

以下のいずれかに当てはまっていると、「無効」であるとしてCSSプロパティに取り消し線が引かれます。

例えば、下の画像は文法の誤りがあったときの検証ツールの表示です。

 文法の誤りによるエラー表示

「flew-wrapのコロン抜け」や「margin-topの記述ミス」によるエラー表示です。
前者については、直後の行（justify-cotent: space-between;）がflex-wrapに対する記述であると解釈されてしまい、結果的に文法エラーになっています。

また、以下の画像では意図的に.image-listに対する指定を2か所に分けて記述することで、margin系を上書きしています。

こちらの例では、margin: 0; という指定によって後者２行を上書きしているという状況です。

 CSSを別のCSSで上書きしている

このように、取り消し線が発生している場合

文法の誤りがある、あるいはCSSが別のCSSによって上書きされているため、そのプロパティが無効となっていることを意味します。

ケケンタ

別のCSSで上書きされている場合でも、上の画像のように適用されているプロパティはきちんとすべて表示されるので、そちらを元に原因となっているCSSを特定してみて下さい。

パターン③　追加・編集したCSSがHTMLに反映されている様子が無い

文法は正しく、ただ単に仕様上の誤りだけである場合は、

取り消し線が引かれず、あたかも正常に適用されているように見えてしまう

ことがあります。

そんなときはプロパティの横のチェックボックスをON・OFFしてみて、画面上に動きがあるかどうかを確認してみて下さい。

もしもHTML側に動きが起こらない場合は、仕様上の誤りがあり、上手くCSSが適用されていないことが考えられます。

その場合は一度そのCSSプロパティの仕様を調べて、正しく使えているかどうかの確認をしてみましょう。

ケケンタ

以上、ここまでGoogle chromeの検証ツールを利用したCSSの反映状況の確認方法と対処方法についてお伝えしてきました！

検証ツールはWebサイト制作をする上で必須のツールなので、これを機会にぜひ日々の学習に取り入れてみて下さい。

まとめ

この記事では

• 検証ツールの開き方～HTML要素の選択・CSSプロパティの確認
• 各反映状況に対する対処方法

についてお伝えしてきました。

この記事を見て問題が上手く解消されたなら何よりです。

このブログではWeb制作やWordPress、PHPに関する情報を発信しています。

ご興味がある方はぜひ他の記事もご覧いただけるとうれしいです。

ケケンタ

最後までお読みいただきありがとうございました！
またどこかの記事でお会いしましょう！

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...