「Electronではじめるアプリ開発」を写経してみた ②
今日もぼちぼち写経しました。
目次:
前回の続きから・・。Renderプロセスにformの実装をするところから
2-4 最初のアプリケーションを作成する
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My first Electron app</title> </head> <body> <h1>CommentBox</h1> <form id="comment-form"> <input type="text" id="comment-input" placeholder="コメント"> <input type="submit" value="投稿"> </form> <ul id="comments"></ul> <script src="render.js"></script> </body> </html>
render.js
※ひさびさに生JSを書いた
document.addEventListener("DOMContentLoaded", () => { document.getElementById("comment-form").onsubmit = () => { const commentInput = document.getElementById("comment-input"); if (commentInput.value === "") { return false; } const newComment = document.createElement("li"); newComment.innerText = commentInput.value; document.getElementById("comments").appendChild(newComment); commentInput.value = ""; return false; }; });
とりあえず、ここまでは普通にWeb開発やっているときとそんなに大差ない感じ。 Mainプロセスがクライアントアプリ感出ているくらい
3 チャットアプリを作ろう
Firebase使うぽいので、ちょっと楽しみ
3-1 Electronが使われているチャットアプリケーション
- Slack やRocker.chatの紹介
- WebSocketやWebRTCのようなリアルタイムで双方向通信する仕組みが必要
- Firebaseもその一つ
3-2 開発するチャットアプリケーション
React使ってSPAで作るよって話し。 機能としては、ログイン、サインアップ、メイン(チャットルーム一覧と詳細画面)
次回は、 3-3 開発プロジェクトの作成から