フロントエンド開発のみで始める！はじめてのWebアプリ開発
はじめに
Androidアプリ開発が専門だった筆者が、はじめてのWebアプリ開発をしました。フロントエンドのみの開発の静的サイトにしたことで、技術的にもハードルが低く、無料で公開することもできました。
Webアプリ開発の初心者向けのアイデアよりのテック記事です。実装の詳細は割愛して参考のリンクを載せています。
概要
- 画像からクロスステッチの図案を出力するWebアプリを開発しました
- WebアプリのフレームワークはGatsbyを使いました
- 画像処理もエクセルファイル編集もフロントエンドのみで開発しました
- Renderなら静的サイトの公開が無料です
- GoogleAnalyticsでアクセス解析できるようにしています
- GoogleSearchConsoleでインデックス登録をリクエストしました
1. 画像からクロスステッチの図案を出力するWebアプリを開発しました
メディアンカットという減色処理を使って、画像からクロスステッチの図案を作成するWebアプリを開発しました。無料で使えますので、以下のリンクから是非触ってみてください。
以下が出力された図案のエクセルファイルのキャプチャです。
2. WebアプリのフレームワークはGatsbyを使いました
Webアプリのフレームワークは、静的サイトジェネレーターのGatsbyを使用しました。
Gatsbyの導入は、以下の筆者の記事が参考になると思います。こちらの記事ではGitHubPagesにデプロイしていますが、今回のWebアプリは4章で説明するRenderにデプロイしました。
3. 画像処理もエクセルファイル編集もフロントエンドのみで開発しました
筆者にバックエンドの知識が少なかったのと、API実行やサーバーサイドでの処理に掛かる料金を掛けたくなかったということもあり、画像処理もエクセルファイル編集もフロントエンドのみで開発しました。
フロントエンドで処理されるソースコードはブラウザの検証ツールから閲覧可能な点に注意が必要です。特別な実装や機密情報を扱うような実装では、バックエンドで処理をするのが良いでしょう。
エクセルのファイルの編集には、フロントエンドで処理ができることと、セルのスタイルの編集ができることの条件を満たした、ExcelJSを使いました。最終更新が2年前で止まっていますが、今でもnpmで週間100万ダウンロードされています。セルへの値の入力に加えて、セルの塗りつぶしや罫線の追加など、今回のWebアプリに必要な機能が全て搭載されていました。ありがとうExcelJS。
4. Renderなら静的サイトの公開が無料です
Gatsbyのデプロイ先と言うとGatsbyを買収したNetlifyが王道と言えます。筆者は残念ながらNetlifyにサインアップすることができなかったため、Renderを使用しました。
筆者がNetlifyにサインアップできなかった件の詳細は、以下のスクラップに記載してあります。
Renderは静的サイトの公開が無料で、GitHubから簡単にデプロイすることができました。ありがとうRender。RenderのGatsby静的サイトのデプロイの公式ドキュメントは以下です。
5. GoogleAnalyticsでアクセス解析できるようにしています
アクセス解析をするために、GoogleAnalyticsとGoogleTagManagerを設定しています。Gatsbyのプラグインgatsby-plugin-google-tagmanagerを使いました。公式のドキュメントは以下です。
6. GoogleSearchConsoleでインデックス登録をリクエストしました
WebアプリがGoogle検索で見つかるようにGoogleSearchConsoleでインデックス登録をリクエストしました。この先SEO対策もやってみたいと思います。
おわりに
記事を読んでいただいてありがとうございました。筆者のように、Web初心者の方が、Webの世界に一歩踏み出すきっかけになったら嬉しいです。筆者はまずWebアプリを公開したところなので、集客、アクセス解析、機能追加、SEO対策など進めていこうと考えています。
今回の記事に書いたWebアプリは以下です。是非触ってみてください。
Discussion