【Electron】ハイブリッドアプリ開発総合【Cordova】 [無断転載禁止]©2ch.net

HTML5,CSS3,JavaScriptなどWeb標準技術を活用したアプリ開発についてのスレです。


各種フレームワークの他、webviewの利用、PWA(AMP)、ブラウザ拡張機能など板選びに迷ったらこのスレに書き込んで下さい。
副次的な話題としてビルドツールなど開発環境に関する話も可。


主なフレームワーク
Electron
https://electron.atom.io/
NW.js
https://nwjs.io/
Apache Cordova
https://cordova.apache.org/
PhoneGap
https://phonegap.com/
ReactNative
https://facebook.github.io/react-native/
NativeScript
https://www.nativescript.org/
VIPQ2_EXTDAT: checked:vvvvv:1000:512:----: EXT was configured

17デフォルトの名無しさん (ワッチョイ 8397-8Gss)2017/09/27(水) 09:30:22.15ID:CxuoUSWH0
実機かサービスかどっちかは必須

18デフォルトの名無しさん (ワッチョイ b6eb-XSap)2017/10/11(水) 00:20:18.00ID:Oxz/wT5+0
CordovaとXamarinはどちらがおススメ?

19デフォルトの名無しさん (ブーイモ MMa1-k0Li)2017/10/11(水) 18:15:21.92ID:F5Ce1qkZM
得意な言語、好きな言語で選びなさいとしか
個人的な期待値は同程度

20デフォルトの名無しさん (ワッチョイ d67a-P04j)2017/10/19(木) 19:59:38.20ID:eT42u2+G0
iconvのインストールでいろいろとモヤるな…
iconv-liteでたいていのことはクリアできるから、まあ良いか…

21デフォルトの名無しさん (ワッチョイ d94c-xwAe)2017/10/31(火) 08:01:56.85ID:dFXJdfE50
ところでオレのグローバルインストール一覧をみてくれ
$ npm ls -g | grep '^[+`].*'
+-- asar@0.13.0
+-- eslint@4.10.0
+-- npm@5.5.1
+-- tslint@5.8.0
`-- typescript@2.5.3

22デフォルトの名無しさん (ワッチョイ 5f5c-7Rih)2017/11/11(土) 10:02:58.97ID:z9j+yac+0
ハイブリッドアプリはじめて触るんだけどhtml,css,Javascriptだけで出来ることはcordovaで出来るっていう認識で大丈夫?

23デフォルトの名無しさん (ワッチョイ 5fc3-742n)2017/11/11(土) 11:38:57.89ID:ZfGCANzW0
はい

24デフォルトの名無しさん (ワッチョイ 66c3-1PEj)2018/02/26(月) 23:15:52.98ID:38VYcXav0

chromeだとフォーム部品がフォーカスされた時のoutlineの色は水色ですが
electronだとオレンジ色になります
何故違うんですか?

26デフォルトの名無しさん (スフッ Sd8a-V/jt)2018/03/09(金) 23:17:06.40ID:hzoVy5cfd
cssで消すか好きな色にすればいい

それはそうなのですが
同じChromeから出来ているはずなのに何で色が違うのでしょうか

Electronで、
CSSで作ったセレクトボックスを
トラックパッドでクリックして閉じると、hoverした部分の色が残ってしまう
(マウスでクリックした場合は正常)
という奇妙な現象が出ていたので、
Electronをアップデートしたら直りました
開発中のモジュールアップデートには抵抗がありましたが
Chrome同様こまめにアップデートしていった方がいいのでしょうね
ただ、それでもoutlineのデフォルト色がオレンジ色なのは変わりませんでした

Electronについてですが
トラックパッドで画面をクリックするとCSSのhover状態がキャンセルされると気づきました
hoverで変化するようにしている箇所が、クリックすると非hoverの表示になってしまう
マウスカーソルを動かすとまたhover時表示に戻る
という挙動です
このトラックパッドというのはmacbook proのもので、
bootcampでwindows10を使っています
Chromeではこのような挙動はありません。
>>28の挙動とも関連してそうです

おそらくクリック時にマウスカーソルがそこにないものと判断されてしまうのではないか
と予想しています
ハード的な問題かと考えましたが、それだとChromeで症状が出ないのがおかしい。
ChromeとElecronの間の微妙な差異の中でバグが生まれてしまっている感じです

ためしにmousemoveをconsoleに出力してみましたが、
クリックしてもmousemoveイベントは発生しませんでした
おそらく原因はCSS処理の層にあるのでしょう

ビルドしたら現象消えるんじゃね?
と思ったのですが、逆に>>28で消えたと思っていた症状が
ビルドしたらまた出るようになりました・・

>>28の件ですが
マウスアウトが表示に反映されるまで待てばいいのでは?と考えて
setTimeoutを使ってセレクトボックスを閉じるのを後回しにしたところ、解決しました

34デフォルトの名無しさん (ワッチョイ cd95-Amhc)2018/03/18(日) 17:19:23.99ID:SvyMQaej0
・CSSはどの定義が優先されてるのか
・各イベントは発火しているのか
・Electronじゃないと起こらないのか

浅い連投する前にデベロッパーツールともっと向き合って

electronで
BrowserWindowを上や下や左や右に揃えて表示するにはどうしたらいいのでしょうか?
中央揃えのためにはcenterというオプションがありますが

>>35の件ですが
https://github.com/electron/electron/blob/master/docs/api/screen.md
このscreenモジュールを使えばディスプレイのサイズを取得できると分かりましたが
electronの座標系はディスプレイの座標系よりも少し小さいようです
ウインドウを左揃えにするために
ウインドウのxを0にすると、左側に8ピクセルくらいの隙間が空きます
ウインドウを右揃えにするために
ウインドウのxを、画面幅 - ウインドウ幅にすると、同様に右側に8ピクセルくらいの隙間が空きます
またディスプレイの実際のピクセル数は1280×800ですが、
screen.getPrimaryDisplay()で取得できるディスプレイサイズは、1024×640です
この数字の差異は、electron内部で独自の座標系を持っているからのようで、
そのこと自体は別にいいですが、余計なマージンが入るのは困ります
たとえばxを0ではなく-8とかにすれば、左揃えには出来るのですが、
マージンが何に由来するのか分からないので、ハードコーディングするのは抵抗があります
どうなのでしょうか?

37デフォルトの名無しさん (アウアウウー Sac7-TIhr)2018/03/26(月) 14:30:58.34ID:WxF3VlXla
https://gist.github.com/hisasann/a99b7e4aa5f2c9cfc7eb

electronの座標系のpaddingに言及しているページがありました
ただleftやtopを0、widthやあheightを画面サイズにすればウインドウが全画面になる
と書かれているので、この時点と今では挙動が変わっていそうです
ともかくこの座標系レベルのpaddingは意図的に作られたもののようです

38デフォルトの名無しさん (ワッチョイ 4e80-9PFr)2018/03/26(月) 14:50:12.91ID:DzDpiGFR0
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017

この本では、1280×800(735), scaleFactor: 2 とか

screen.getAllDisplay()[0] を見てみれば?

>>38
ありがとうございます
getAllDisplayとgetPrimaryDisplayが返す値は同じでした
ただ、その本とは異なり、scaleFactorは1.25でした
多分、このscaleFactorが、
Electron座標系とディスプレイ座標系の対応関係を決めているのだと思いますが。
その本は、Retinaなどの画素数が多い環境に基づいているのでしょうね

4038 (ワッチョイ 4e80-9PFr)2018/03/27(火) 04:05:44.39ID:7OwU1Hvz0
<meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

HTML のviewport の、initial-scale みたいなもん

ありがとうございます
ということは、設定可能な項目なのでしょうか
何か色々知識が足りてない気がするので「Electronではじめるアプリ開発」をぽちってみました

4238 (ワッチョイ 4e80-9PFr)2018/03/27(火) 23:33:55.43ID:7OwU1Hvz0
漏れも、よくわからない

screen モジュールの機能を見て

ElectronではipcMainとipcRendererを使って
レンダラープロセス→メインプロセスへのIPCのsendと
それに応対してのメインプロセス→レンダラープロセスのsendは出来ますが
メインプロセスを起点にしたレンダラープロセスへのIPCは出来ないようです
メインプロセス側のタイミングでレンダラープロセスを呼びたい時はどうすればいいのでしょうか?

>>43
BrowserWindowオブジェクトのwebContentsプロパティに対してsendメソッドを発行することで出来ました

45デフォルトの名無しさん (ワッチョイ 937c-TX0Y)2018/04/04(水) 14:42:57.52ID:bnaucSAX0
ElectronがAndroid対応になるのはいつぐらい?
ロードマップはある?
誰がやってる?

46デフォルトの名無しさん (ワッチョイ 11e7-xPqD)2018/04/04(水) 22:43:52.94ID:kczhO8ZR0
ないよ

ウインドウのalwaysOnTopをトグルする処理をしようと思います
レンダラプロセス中のwindowがBrowserWindowオブジェクトなのかと思って
レンダラプロセスの中で
window.setAlwaysOnTop(true);
とやってみたのですが、エラーになりまりした
windowはBrowserWindowオブジェクトではなかったようです
レンダラプロセスの中で自分自身のBrowserWindowオブジェクトにアクセスするにはどうしたらいいのでしょうか?

APIドキュメントを見ても、レンダラプロセスから自身の外観を変えることはできないようなので
IPCでメインプロセスを呼ぼうと思ったのですが
メインプロセス側でレンダラプロセスのBrowserWindowオブジェクトを確定するには
どうするのかという問題が出てきました
マルチウインドウのアプリなのでレンダラプロセスが複数あります
メインプロセスが受信するeventのsenderには、webContentsが入っているとドキュメントにあります
このwebContentsは、BrowserWindowのプロパティの一つだそうです
ですがwebContentsには、自身を所有しているBrowserWindowを取得するメソッドがないっぽいです
idプロパティを持っているので、
BrowserWindowオブジェクトのリストをループさせて比較するという方法で見つけることは出来そうですが
こういう方法しかないのでしょうか?

>>48
もっといい方法があるのかないのか分かりませんが
idを使って同定するようにしました

electronで新しいBrowserWindowを作る時
若干待たされる感があるのが気になっていたのですが
前もって非表示のスペアウインドウを作っておいて必要なタイミングでshowするようにしたら、
気持ちいい動作になりました
これはelectronに限らず複数ウインドウを使うアプリを作る時には定石なのかもしれませんね

electronについてです
ipcMain/ipcRendererにはsendSyncがありますが
webContentsにはsendのみでsendSyncがないようです
何故でしょうか?

>>47の件ですが
「Electronではじめるアプリ開発」を読んでいたら
remoteモジュールのgetCurrentWindow()を使えば
レンダラプロセスから自身のBrowserWindowオブジェクトを取得出来ると出てきました
remoteモジュールはgetGlobalでメインプロセスのグローバル変数も取得できるという
なかなかすごいモジュールです

remoteを使うようにしたら
泥臭いIPCのコードをほとんどなくせますね
remoteを使うためにはIPCを理解することが重要なので、無駄だとは言いませんが・・

>>52の件ですが
メインプロセスの配列をレンダラプロセスからremote.getGlobalして
メインプロセス側でその配列を破壊的に変更すれば
レンダラプロセス側でもその変更が反映するのだろうと思っていたのですが、
どうも反映しないようです
remote.getGlobalで配列は参照渡しできないのでしょうか?

electronで、オブジェクトが(remoteで取得した)リモートオブジェクトかどうかを
コード上から調べる方法はあるのでしょうか?
consoleに出力しても普通のオブジェクトと全く同じに見えます

https://github.com/electron/electron/blob/v0.35.0/atom%2Frenderer%2Fapi%2Flib%2Fremote.coffee

remoteのソースコードがありました
配列とオブジェクトの処理は異なっていて
オブジェクトの場合、メソッド呼び出しやプロパティの読み書きでIPCが呼び出されるが
配列の場合は値渡しになる、という挙動のようです

グローバルショートカットキーの修飾キーとしてWindowsキーを使いたいです
https://github.com/electron/electron/blob/master/docs/api/accelerator.md
ここにWindowsキーはSuperと書くとありますが、
Super+R
みたいに書いても動作しません
Alt+Ctrl+R
のようにSuper以外の書き方ではちゃんと動作しています
なぜでしょうか?

開発フレームワークElectronのエクスプロイトでWebとモバイルの人気アプリが危険
https://jp.techcrunch.com/2018/05/15/2018-05-14-exploit-puts-popular-web-and-mobile-apps-at-risk/

これを見て、バージョンアップしておいた方がいいのだろうと思って、
electronのバージョンアップをして
使ってるパッケージもついでにバージョンアップしました
leveldbのパッケージはネイティブモジュールなので、electron-rebuildでリビルドしようとしたのですが

An unhandled error occurred inside electron-rebuild
Could not detect abi for version 2.0.0 and runtime electron.
Updating "node-abi" might help solve this issue if it is a new release of electron

と言われました
ABIとか言われても、何を言っているのか分かりません
どうしたらいいのでしょうか?

>>58の件ですが
検証するためにプレーンなelectronプロジェクトを作ってみて、leveldbをリビルドしたら無問題。
エラーの出るプロジェクトでモジュールの再インストールなどを繰り返しながら原因を探したところ
なんとelectron-rebuildのコマンドヒストリーからいつの間にか引数が一つ消えていたことが原因でした
electronのバージョンアップはまったく関係なかったです
失礼しました

60デフォルトの名無しさん (ワッチョイ 89fa-9WOx)2018/05/23(水) 20:01:18.75ID:Au5e7VGg0
僕の知り合いの知り合いができたパソコン一台でお金持ちになれるやり方
役に立つかもしれません
グーグルで検索するといいかも『ネットで稼ぐ方法 モニアレフヌノ』

2BIZV

61デフォルトの名無しさん (ワッチョイ a7fa-i/RF)2018/07/05(木) 01:39:12.11ID:RfoszcD20
7UF

Electron Fiddle
https://github.com/electron/fiddle

こんなのあった
electronアプリが動かせるプレイグラウンド
なかなか良さそう

63デフォルトの名無しさん (ササクッテロ Sp71-7QGX)2018/09/24(月) 12:43:07.12ID:Sg+JF5S4p
user32.dllとか winapi呼び出せますか

64デフォルトの名無しさん (ワッチョイ 42a1-tHrl)2018/09/24(月) 15:45:48.89ID:jLDglaFB0
特定のサイトを便利に使うための専用ブラウザを作ろうとしたけど、セキュリティーの扱いが難しくて断念した

65デフォルトの名無しさん (ワッチョイ c19f-U9gT)2018/09/26(水) 08:23:48.51ID:99qoX1Hj0
>特定のサイトを便利に使うための専用ブラウザ
2ちゃんの専ブラみたいので他サイトの奴?

発想は良さそうな気がするけど
セキュリティで引っかかるのも分かる

Android NDKとObjective-C使うと
AndroidとiOSアプリってほぼワンソースでできたりする?

67デフォルトの名無しさん (アウアウエー Sab2-S9dY)2018/11/18(日) 09:16:25.09ID:GZZkLAn9a
Objective-Cはネイティブコードじゃないよな。
iOSに特化したコーディング言語何で無理に100ペリカ。

新着レスの表示
レスを投稿する