electronでToDoリストを作ってみた with Web Storage

こんにちは,よしむらです.
暑くて暑くて,家にいるのも嫌になる今日このごろです.

Quittaでnyanchuさんが書いている下記の記事を見てしったelectronですが.
前回jQueryを使ってみたらあっさりできたので,今回はToDoリストを作ってみました.

http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29
http://qiita.com/nyanchu/items/9a1c910bbca55e9d2f3c

electron + WebStorage


   最近流行りのelectronをつかって勉強がてらToDoリストを作ってみよう!
っと思ったがToDoリストには,データベースが必要です.
xmlファイルなどで管理してもいいけどレスポンスとか考えるとやっぱりデータベースが欲しい!

HTML5で,クッキーの次の技術としてWebStorageってのがあることを思い出しました.
webStorageは5Mbyteまでのデータを永続的に保存できる仕組みです.
確かHTML5のオライリー本に載ってた気がします.

electronはHTML5+JavaScriptなので,使えるのではないか?っとやってみると意外とあっさりできたのでGitHubにあげておきます.
パッケージ化したものをbinディレクトリの中に入れてあります.皆さんの環境に合わせてToDoList-darwin-x64とToDoList-win32-x64のディレクトリ内に保存されているToDoListをダブルクリックでそのまま起動できると思います.

GitHub
https://github.com/takashi4233/ToDoList

スクリーンショット 2015-07-30 22.51.52

今回は,HTML + jQuery (+ CSS) + Web Storageの構成で作った完全なスタンドアローン型のToDoリストです.jQueryもローカルに保存してありますので,完全にオフラインな状況でも気兼ねなく使えます!?

今どきはクラウド上のサーバやAPIを読んでデータ管理すると思いますが,もし興味のある方がおられましたらダウンロードして実行してみてください.

作ってみた感想や気づいたこと.

ホントに簡単に作れる.


 HTMLとjQueryの知識がちょっとあればさくさくかけちゃいます.
実際3時間程度で完成しました.WebStorageの使い方を理解するのが一番大変だった気がします.
auto incrementの仕方やデータの管理方法が....

 

commnad + rでリロードができる.


最後の方に気づいたけど,command+rでリロードができましたね.
HTMLとCSSとJavaScriptならコンパイル不要ですもんね・・・・.
毎回「$ electron .」っとコマンドで実行していましたため効率が悪かったです.

但しmain.js(フレームを無くすとか,画面のサイズを変えるとか)を編集する時は,コマンドでの再実行が必要になります.(でもそこを変えることはそんなに多くないです.)

 

デバッグしづら...く無かった


これも最後の方に気づきました.
electronは,HTMLとCSSとJavaScriptなんだからChromeやSafariといった普通のwebブラウザに,index.htmlをドラッグ・アンド・ドロップすればデバッグ簡単にできます.
表示→開発・管理→デベロッパーツールで下の様な画面を開けて,リアルタイムでHTMLの状況を把握できますね.

スクリーンショット 2015-07-30 18.36.51

開発環境


 最近は,Eclipseを使ってJavaを書いているので,
補完されたりデバッグが便利だったりと恵まれて環境で開発していたので,
久々にEmacsだけでコード書くと大変でした.
EmacsにもJavaScriptに特化したモジュールがあるみたいなので,それも入れてみようと思います.

情報が豊富!


新しいはずのelectronですが,はじめるための敷居はとっても低いです.
だってHTMLとJavaScriptとCSSなんですもん.情報はwebにあふれてます!

参考URL

HTML5でローカルにデータベースが作れる「WEB STORAGE」を使ってみた!
http://www.spiceworks.co.jp/blog/?p=5658

ブラウザ側でデータを保存するため各ブラウザにおけるローカルストレージの挙動の調査
http://qiita.com/mima_ita/items/363fd434f9c655944e3f

[Javascript][HTML5]簡単!localStorage使い方入門 – Chrome編
http://dqn.sakusakutto.jp/2011/07/javascript-html5-localstorage-chrome.html

How to increment a value at localStorage
http://stackoverflow.com/questions/11375433/how-to-increment-a-value-at-localstorage

[ sticky footer ][ CSS ] たった2行でフッタをコンテンツが少なくても最下部にするスタイルシートhttp://qiita.com/feo52/items/b1f502f5329e591ba165

 

 


Add a Comment

メールアドレスが公開されることはありません。