Electronアプリケーション開発

Electronの開発日記

jQueryについて調べて思ったこと

その後、jQueryについて色々調べてみたが、"何ができて何ができないか"がイマイチ分からなかった。

 

実際やりたかったのは、サイドバーとして指定したdiv要素の幅をマウスドラッグで可変にしたい。更に、サイドバーの幅を変更したら、引きづられて反対側の要素が縮小する。というモノ。(文字にすると少しわかりづらいね。)

実際にやり方は分かったが、知りたかったことにたどり着くのに、時間がかかった。

(これは、自分の調べ方が悪かったのかもしれないが...)

 

また、こちらの記事を読んだ結果で実はjQeuryは古くなってきたのかと思ってしまった。(悪い意味ではなく、自分が始めたのが遅すぎて、調べてる内容が当然の内容だったりするのだろうか。)

 

当初の記事では、今回Electronの開発でjQueryの勉強を兼ねることを目標としていたが、別のフレームワークを使用した方が開発効率が良さげであれば、躊躇なく切り替えて行きたい。

Logicool m570 マウスの修理

今回はElectronと直接は関係しないが。。。

m570マウスを使用しているが、以前から右クリックの調子が悪かった。

ただ、最近は自宅でPCに向かう頻度も少なかったので、気にしていなかったが今回Electronを始めたことで調子の悪さが気になりだした。

 

そこで、調べてみると次の記事が見つかった。

pasokatu.com

普段あまり分解はしないが、ボールマウスは気に入っているし、ただ買い直すとなると4,000円近くするし、で無理やり使っていたが修理なら1,000円ほどでできるとのことなので、試してみた。

 

結果、右クリックが直った!!

今まで、5回に1回ほどしか反応しなかったのが、100発100中になった。

こんなことならもっと早く試しておくんだった。

パッケージング

 前回、宣言していたSample で作成したElectronのパッケージングを試してみた。

 

mukiryoku-se.hatenablog.jp

 

>npm <Electronフォルダパス> <アプリケーション名> --platrom=win32 --arch=all --electronVersion=1.7.5

>electron-Packager <フォルダパス> <アプリケーション名> --platrom=win32 --arch=all --electronVersion=1.7.5

※訂正 出だしのコマンドが間違っていたので、訂正いたします。

※<アプリケーション名> は.exeをつけない

--electronVersionでだいぶハマった。他サイトを観てるときは、--versionと指定されていたが、何度パッケージングしても

Unable to determin Electron version. Please specify an Electron version

というエラーがでてきてパッケージングができない。

正直、"versionは指定してるわ!"と何度も思ったがどのサイトかは忘れたが、--electronVersionを指定しているサイトがあり、試しにパッケージングしたところ、やっと成功した。

 

ただ引数が多く覚えられない。。。

--platform, --arch, --electronVersionは決まった値なので、自動でパッケージングする機能を作成したい。

ただし、今回は早く実際のアプリケーション開発に入らないと、長続きしなさそうなので、とりあえず辞書ツールに登録することとする。

Elcrtronの導入

ここwindows ネイティブアプリケーション開発 序章 - Electronアプリケーション開発でも書いたがElectronの導入、Hello World の表示は完了した。

(最後アプリケーションは起動したが、画面上に文字が表示されなかったので、サンプルをコピペした。)

 

参考にしたサイトはQiitaから適当に...

 

あ、あと最後にパッケージングするところができてないけど、それは今日にでもやろうかな。

大まなかスケジュール

スケジュールを守ることが死ぬほど苦手なので、"いつまでに"は設定しない。

次の順番に勉強をしつつ、開発をすすめるつもり。

いままでプロジェクトをまともに進めたことがないので、ウォーターフォールっぽく進める勉強もしたいね

  1. Electronの導入、および、Hello Worldの表示
  2. gitの導入、設定
  3. 基本構成の作成
  4. 機能概要を作成
  5. 写真整理アプリ( photoOrganize ) の開発着手
  6. 写真ビュアーアプリ (photoViewer ) の開発着手

 

今日、1は完了したので、明日以降に2を実施予定...

あ、まだElectronのパッケージングをしないとあかんな。

windows ネイティブアプリケーション開発 序章

やりたいこと

html + js + css の学習。
いままで、htmlなにそれ状態だったが、とうとうWeb化のなみが押し寄せてきた。

つくりたいもの

写真を整理するアプリケーション。

理由
家族写真を整理するのに、

  1. デジカメからpcに写真ファイルをコピー
  2. 写真ファイルの名前をexif情報からリネーム
  3. バッチで写真ファイルをファイル名をもとにフォルダ振り分け

というステップで行っている。
2, 3は別の仕組みでやっているため、妻でもできるようにワンアプリケーションにまとめたい。ついでに、フォルダ振り分けされている写真ファイルをシームレスに表示できるビュアーを作成したい。

使う技術

  • Electron

htmlと js を使ってネイティブアプリケーションを作成できるため。

  • bootstrap

htmlで作成するため、ついでにレスポンシブに作成したい。

  • git

バージョン管理をしたことがなく、今回合わせて学習して使えるようになるため。

開発中にやること。

各々70%を目標に行う。言っていることが正しくない気がするが。。。

  • 開発を行った日はブログを更新する。
  • 簡単な仕様書を作成する。
  • マインドマップで機能を洗い出し。