【Electron】ﾊｲﾌﾞﾘｯﾄﾞｱﾌﾟﾘ開発総合【Cordova】 [無断転載禁止]©2ch.net (191ﾚｽ)
上下前次1-新
1: デフォルトの名無しさん 転載ダメ©2ch.net (ﾜｯﾁｮｲ a797-CQvz) [sage] 2017/07/02(日) 17:53:17.69 ID:jGbRP/XN0(1/2) AAS
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
2: デフォルトの名無しさん (ﾜｯﾁｮｲ 6997-CQvz) [sage] 2017/07/02(日) 18:01:32.21 ID:jGbRP/XN0(2/2) AAS
関連事項
UWP(JS)
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/create-a-hello-world-app-js-universal
Progressive Web Apps
https://developers.google.com/web/progressive-web-apps/
WebExtensions
https://developer.mozilla.org/ja/Add-ons/WebExtensions
3: デフォルトの名無しさん (ﾜｯﾁｮｲ 6900-HtZ7) [sage] 2017/07/04(火) 01:20:00.40 ID:WAp3ygdO0(1) AAS
さんげと
4: デフォルトの名無しさん (ﾜｯﾁｮｲ 42aa-nIbb) [sage] 2017/07/05(水) 20:31:29.29 ID:TQG7n9qt0(1) AAS
何でこんな危険なもの使うの
5: デフォルトの名無しさん (ﾜｯﾁｮｲ b10f-OZRj) [sage] 2017/07/05(水) 21:55:04.12 ID:bOQCn0oH0(1) AAS
どう危険なの？
6: デフォルトの名無しさん (ﾜｯﾁｮｲ 9fea-WVZG) [sage] 2017/07/06(木) 18:45:38.92 ID:tjG5mM9i0(1) AAS
windows7以降しかサポートしてない!!!!!!!!!!!
7: デフォルトの名無しさん (ｱｳｱｳｲｰ Sa81-lKTh) [sage] 2017/07/13(木) 13:53:40.04 ID:808tbSETa(1) AAS
人少なっw
ところで、Web技術を流用したUIを総称する言葉って何かある？
8: デフォルトの名無しさん (ﾜｯﾁｮｲ 6697-GTq7) [sage] 2017/07/17(月) 09:17:57.89 ID:PzEzc+7r0(1) AAS
パフォーマンスの問題とかはwasm使っていく流れになるのかな
web界隈は予測がつけづらいね
9: デフォルトの名無しさん (ﾜｯﾁｮｲ e7d8-E/h9) [sage] 2017/07/20(木) 15:38:23.50 ID:wKJ/sGSa0(1) AAS
electronいいよね・・・って人いなーいｗ
いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック
2017/7/26＜＜もうそろそろ発売するよ。
10: デフォルトの名無しさん (ﾜｯﾁｮｲ df0f-GpK+) [sage] 2017/07/22(土) 06:41:02.25 ID:eX5dr/rO0(1) AAS
electronは若干動作不安定と感じる
かといって他のはあまりやる気にならない
11: デフォルトの名無しさん (ﾜｯﾁｮｲ 2728-d1J2) [sage] 2017/07/22(土) 12:44:54.03 ID:1Wg3wdHQ0(1) AAS
パッケージの容量がでかいのはなんとかしたいよね
自前のChrome使わせるとかできんのか
12: デフォルトの名無しさん (ﾜｯﾁｮｲ bedb-YNlP) [sage] 2017/07/30(日) 17:35:20.03 ID:1CifeIX00(1) AAS
今更だけどElectronで2chブラウザ的なもの作ってるよ
13: デフォルトの名無しさん (ﾜﾝﾐﾝｸﾞｸ MM8a-mdui) [sage] 2017/08/16(水) 15:24:47.23 ID:oupxDYDaM(1/2) AAS
初のcordovaアプリ作った
https://hasemonmon.net/df5/
トランプの大富豪です
ビルド済みはandroid用しかないけどWebで同じ内容がプレイ可能です
14(1): デフォルトの名無しさん (ﾌﾞｰｲﾓ MMba-UWIm) [sage] 2017/08/16(水) 19:43:49.72 ID:npiuTQFlM(1) AAS
クオリティ高いな
どうせandroid限定ならPWA化したらどう？
15: デフォルトの名無しさん (ﾜﾝﾐﾝｸﾞｸ MM8a-mdui) [sage] 2017/08/16(水) 19:55:42.30 ID:oupxDYDaM(2/2) AAS
>>14
見てくださってありがとうございます
こっち方面は最近始めたばかりでいろいろ事情がわからないことだらけでぐぐりながら試行錯誤の毎日です
PWAについて簡単にぐぐってみましたが今まで全く知らない事でした
最近はこんなものがあるんですね
色々勉強させてもらいます
ありがとうございました
16: デフォルトの名無しさん (ﾜｯﾁｮｲ 23f3-PvF4) [sage] 2017/09/25(月) 16:27:39.46 ID:eSn5elHz0(1) AAS
Mac持ってないiPhone利用者です
monacaとかXamarin live player使う以外にMac(XCODE)なしでiPhoneアプリ作るのってムリ？
17: デフォルトの名無しさん (ﾜｯﾁｮｲ 8397-8Gss) [sage] 2017/09/27(水) 09:30:22.15 ID:CxuoUSWH0(1) AAS
実機かサービスかどっちかは必須
18: デフォルトの名無しさん (ﾜｯﾁｮｲ b6eb-XSap) [sage] 2017/10/11(水) 00:20:18.00 ID:Oxz/wT5+0(1) AAS
CordovaとXamarinはどちらがおススメ？
19: デフォルトの名無しさん (ﾌﾞｰｲﾓ MMa1-k0Li) [sage] 2017/10/11(水) 18:15:21.92 ID:F5Ce1qkZM(1) AAS
得意な言語、好きな言語で選びなさいとしか
個人的な期待値は同程度
20: デフォルトの名無しさん (ﾜｯﾁｮｲ d67a-P04j) [sage] 2017/10/19(木) 19:59:38.20 ID:eT42u2+G0(1) AAS
iconvのインストールでいろいろとモヤるな…
iconv-liteでたいていのことはクリアできるから、まあ良いか…
21: デフォルトの名無しさん (ﾜｯﾁｮｲ d94c-xwAe) [sage] 2017/10/31(火) 08:01:56.85 ID:dFXJdfE50(1) AAS
ところでオレのグローバルインストール一覧をみてくれ
$ 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) [sage] 2017/11/11(土) 10:02:58.97 ID:z9j+yac+0(1) AAS
ハイブリッドアプリはじめて触るんだけどhtml,css,Javascriptだけで出来ることはcordovaで出来るっていう認識で大丈夫？
23: デフォルトの名無しさん (ﾜｯﾁｮｲ 5fc3-742n) [sage] 2017/11/11(土) 11:38:57.89 ID:ZfGCANzW0(1) AAS
はい
24: デフォルトの名無しさん (ﾜｯﾁｮｲ 66c3-1PEj) [] 2018/02/26(月) 23:15:52.98 ID:38VYcXav0(1) AAS
PWA来たね
https://www.sbbit.jp/article/cont1/34605
25: デフォルトの名無しさん (ｱｳｱｳｳｰ Sa1f-uQtz) [sage] 2018/03/09(金) 15:40:32.36 ID:k/DOd+Uba(1) AAS
chromeだとフォーム部品がフォーカスされた時のoutlineの色は水色ですが
electronだとオレンジ色になります
何故違うんですか？
26: デフォルトの名無しさん (ｽﾌｯ Sd8a-V/jt) [sage] 2018/03/09(金) 23:17:06.40 ID:hzoVy5cfd(1) AAS
cssで消すか好きな色にすればいい
27: デフォルトの名無しさん (ｱｳｱｳｳｰ Sa1f-uQtz) [sage] 2018/03/12(月) 17:18:13.96 ID:LSlT+QPHa(1/2) AAS
それはそうなのですが
同じChromeから出来ているはずなのに何で色が違うのでしょうか
28(3): デフォルトの名無しさん (ｱｳｱｳｳｰ Sa1f-uQtz) [sage] 2018/03/12(月) 17:26:43.22 ID:LSlT+QPHa(2/2) AAS
Electronで、
CSSで作ったセレクトボックスを
トラックパッドでクリックして閉じると、hoverした部分の色が残ってしまう
（マウスでクリックした場合は正常）
という奇妙な現象が出ていたので、
Electronをアップデートしたら直りました
開発中のモジュールアップデートには抵抗がありましたが
Chrome同様こまめにアップデートしていった方がいいのでしょうね
ただ、それでもoutlineのデフォルト色がオレンジ色なのは変わりませんでした
29: デフォルトの名無しさん (ｱｳｱｳｳｰ Sab1-hKdO) [sage] 2018/03/15(木) 11:17:06.84 ID:ZDD5dWqya(1/4) AAS
Electronについてですが
トラックパッドで画面をクリックするとCSSのhover状態がキャンセルされると気づきました
hoverで変化するようにしている箇所が、クリックすると非hoverの表示になってしまう
マウスカーソルを動かすとまたhover時表示に戻る
という挙動です
このトラックパッドというのはmacbook proのもので、
bootcampでwindows10を使っています
Chromeではこのような挙動はありません。
>>28の挙動とも関連してそうです
30: デフォルトの名無しさん (ｱｳｱｳｳｰ Sab1-hKdO) [sage] 2018/03/15(木) 11:30:06.66 ID:ZDD5dWqya(2/4) AAS
おそらくクリック時にマウスカーソルがそこにないものと判断されてしまうのではないか
と予想しています
ハード的な問題かと考えましたが、それだとChromeで症状が出ないのがおかしい。
ChromeとElecronの間の微妙な差異の中でバグが生まれてしまっている感じです
31: デフォルトの名無しさん (ｱｳｱｳｳｰ Sab1-hKdO) [sage] 2018/03/15(木) 11:52:17.96 ID:ZDD5dWqya(3/4) AAS
ためしにmousemoveをconsoleに出力してみましたが、
クリックしてもmousemoveイベントは発生しませんでした
おそらく原因はCSS処理の層にあるのでしょう
32: デフォルトの名無しさん (ｱｳｱｳｳｰ Sab1-hKdO) [sage] 2018/03/15(木) 16:11:50.04 ID:ZDD5dWqya(4/4) AAS
ビルドしたら現象消えるんじゃね？
と思ったのですが、逆に>>28で消えたと思っていた症状が
ビルドしたらまた出るようになりました・・
33: デフォルトの名無しさん (ｱｳｱｳｳｰ Sab1-hKdO) [sage] 2018/03/16(金) 19:35:23.73 ID:ZJaRuZ7Pa(1) AAS
>>28の件ですが
マウスアウトが表示に反映されるまで待てばいいのでは？と考えて
setTimeoutを使ってセレクトボックスを閉じるのを後回しにしたところ、解決しました
34: デフォルトの名無しさん (ﾜｯﾁｮｲ cd95-Amhc) [sage] 2018/03/18(日) 17:19:23.99 ID:SvyMQaej0(1) AAS
・CSSはどの定義が優先されてるのか
・各イベントは発火しているのか
・Electronじゃないと起こらないのか
浅い連投する前にデベロッパーツールともっと向き合って
35(1): デフォルトの名無しさん (ｱｳｱｳｳｰ Sac7-zkh5) [sage] 2018/03/25(日) 09:19:11.15 ID:f5QmO5hia(1) AAS
electronで
BrowserWindowを上や下や左や右に揃えて表示するにはどうしたらいいのでしょうか？
中央揃えのためにはcenterというオプションがありますが
36: デフォルトの名無しさん (ｱｳｱｳｳｰ Sac7-zkh5) [sage] 2018/03/26(月) 13:44:22.91 ID:WxF3VlXla(1/3) AAS
>>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.34 ID:WxF3VlXla(2/3) AAS
https://gist.github.com/hisasann/a99b7e4aa5f2c9cfc7eb
electronの座標系のpaddingに言及しているページがありました
ただleftやtopを0、widthやあheightを画面サイズにすればウインドウが全画面になる
と書かれているので、この時点と今では挙動が変わっていそうです
ともかくこの座標系レベルのpaddingは意図的に作られたもののようです
38(1): デフォルトの名無しさん (ﾜｯﾁｮｲ 4e80-9PFr) [sage] 2018/03/26(月) 14:50:12.91 ID:DzDpiGFR0(1) AAS
Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017
この本では、1280×800(735), scaleFactor: 2 とか
screen.getAllDisplay()[0] を見てみれば？
39: デフォルトの名無しさん (ｱｳｱｳｳｰ Sac7-zkh5) [sage] 2018/03/26(月) 16:00:59.46 ID:WxF3VlXla(3/3) AAS
>>38
ありがとうございます
getAllDisplayとgetPrimaryDisplayが返す値は同じでした
ただ、その本とは異なり、scaleFactorは1.25でした
多分、このscaleFactorが、
Electron座標系とディスプレイ座標系の対応関係を決めているのだと思いますが。
その本は、Retinaなどの画素数が多い環境に基づいているのでしょうね
40: 38 (ﾜｯﾁｮｲ 4e80-9PFr) [] 2018/03/27(火) 04:05:44.39 ID:7OwU1Hvz0(1/2) AAS
<meta name="viewport" content="width=device-width,
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
HTML のviewport の、initial-scale みたいなもん
41: デフォルトの名無しさん (ｱｳｱｳｳｰ Sac7-zkh5) [sage] 2018/03/27(火) 21:08:57.89 ID:i0zSQL+va(1) AAS
ありがとうございます
ということは、設定可能な項目なのでしょうか
何か色々知識が足りてない気がするので「Electronではじめるアプリ開発」をぽちってみました
42: 38 (ﾜｯﾁｮｲ 4e80-9PFr) [] 2018/03/27(火) 23:33:55.43 ID:7OwU1Hvz0(2/2) AAS
漏れも、よくわからない
screen モジュールの機能を見て
43(1): デフォルトの名無しさん (ｱｳｱｳｳｰ Sa45-kUw7) [sage] 2018/03/29(木) 15:32:50.95 ID:LmqbncKZa(1) AAS
ElectronではipcMainとipcRendererを使って
レンダラープロセス→メインプロセスへのIPCのsendと
それに応対してのメインプロセス→レンダラープロセスのsendは出来ますが
メインプロセスを起点にしたレンダラープロセスへのIPCは出来ないようです
メインプロセス側のタイミングでレンダラープロセスを呼びたい時はどうすればいいのでしょうか？
44: デフォルトの名無しさん (ｱｳｱｳｳｰ Sa45-kUw7) [sage] 2018/03/29(木) 21:16:50.19 ID:KaeYIaWZa(1) AAS
>>43
BrowserWindowオブジェクトのwebContentsプロパティに対してsendメソッドを発行することで出来ました
45: デフォルトの名無しさん (ﾜｯﾁｮｲ 937c-TX0Y) [sage] 2018/04/04(水) 14:42:57.52 ID:bnaucSAX0(1) AAS
ElectronがAndroid対応になるのはいつぐらい？
ロードマップはある？
誰がやってる？
46: デフォルトの名無しさん (ﾜｯﾁｮｲ 11e7-xPqD) [sage] 2018/04/04(水) 22:43:52.94 ID:kczhO8ZR0(1) AAS
ないよ
47(1): デフォルトの名無しさん (ｱｳｱｳｳｰ Sa11-vJpg) [sage] 2018/04/09(月) 12:53:29.29 ID:jgGTqA40a(1) AAS
ウインドウのalwaysOnTopをトグルする処理をしようと思います
レンダラプロセス中のwindowがBrowserWindowオブジェクトなのかと思って
レンダラプロセスの中で
window.setAlwaysOnTop(true);
とやってみたのですが、エラーになりまりした
windowはBrowserWindowオブジェクトではなかったようです
レンダラプロセスの中で自分自身のBrowserWindowオブジェクトにアクセスするにはどうしたらいいのでしょうか？
48(1): デフォルトの名無しさん (ｱｳｱｳｳｰ Sa11-vJpg) [sage] 2018/04/10(火) 09:16:38.93 ID:i8FTl/rGa(1) AAS
APIドキュメントを見ても、レンダラプロセスから自身の外観を変えることはできないようなので
IPCでメインプロセスを呼ぼうと思ったのですが
メインプロセス側でレンダラプロセスのBrowserWindowオブジェクトを確定するには
どうするのかという問題が出てきました
マルチウインドウのアプリなのでレンダラプロセスが複数あります
メインプロセスが受信するeventのsenderには、webContentsが入っているとドキュメントにあります
このwebContentsは、BrowserWindowのプロパティの一つだそうです
ですがwebContentsには、自身を所有しているBrowserWindowを取得するメソッドがないっぽいです
idプロパティを持っているので、
BrowserWindowオブジェクトのリストをループさせて比較するという方法で見つけることは出来そうですが
こういう方法しかないのでしょうか？
49: デフォルトの名無しさん (ｱｳｱｳｳｰ Sa11-vJpg) [sage] 2018/04/10(火) 16:01:49.23 ID:bVv/r3hka(1) AAS
>>48
もっといい方法があるのかないのか分かりませんが
idを使って同定するようにしました
50: デフォルトの名無しさん (ｱｳｱｳｳｰ Sae7-ycE0) [sage] 2018/04/12(木) 15:49:20.83 ID:yy2Q2SfTa(1) AAS
electronで新しいBrowserWindowを作る時
若干待たされる感があるのが気になっていたのですが
前もって非表示のスペアウインドウを作っておいて必要なタイミングでshowするようにしたら、
気持ちいい動作になりました
これはelectronに限らず複数ウインドウを使うアプリを作る時には定石なのかもしれませんね
51: デフォルトの名無しさん (ｱｳｱｳｳｰ Sae7-ycE0) [sage] 2018/04/14(土) 07:56:32.32 ID:wIXQn55na(1) AAS
electronについてです
ipcMain/ipcRendererにはsendSyncがありますが
webContentsにはsendのみでsendSyncがないようです
何故でしょうか？
52(1): デフォルトの名無しさん (ｱｳｱｳｳｰ Sae7-ycE0) [sage] 2018/04/15(日) 06:01:35.77 ID:thU6BYbZa(1) AAS
>>47の件ですが
「Electronではじめるアプリ開発」を読んでいたら
remoteモジュールのgetCurrentWindow()を使えば
レンダラプロセスから自身のBrowserWindowオブジェクトを取得出来ると出てきました
remoteモジュールはgetGlobalでメインプロセスのグローバル変数も取得できるという
なかなかすごいモジュールです
上下前次1-新書関写板覧索設栞歴
あと 139 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.023s