このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
electron:p5アプリを作る [2021/11/23 01:28] – ↷ electron から electron:p5アプリを作る へページの移動と名称変更しました。 baba | electron:p5アプリを作る [2021/11/23 03:31] (現在) – baba |
---|
====== Electron ====== | ====== Electronでp5アプリを作る ====== |
Electronは、「jsでネイティブアプリを作りたい」ってときに使う開発フレームワークとなります。単一のプログラムで | Electronは、「jsでネイティブアプリを作りたい」ってときに使う開発フレームワークとなります。単一のプログラムで |
windows, mac, linux等のマルチプラットフォーム対応ができます。このページでは開発環境の構築からアプリの作成、 | windows, mac, linux等のマルチプラットフォーム対応ができます。このページでは開発環境の構築からアプリの作成、 |
さらにはp5jsをネイティブアプリケーションとして書き出すまでをやってみます。完成済みファイルは以下のgitから。 | さらにはp5jsをネイティブアプリケーションとして書き出すまでをやってみます。完成済みファイルは以下のgitから。 |
* https://github.com/TetsuakiBaba/p5ElectronStarterTemplate | * https://github.com/TetsuakiBaba/p5ElectronStarterTemplate |
| |
| ===== 前編 ===== |
| |
<html> | <html> |
<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/f109e018ec714ce4ab2415f120df3c25" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> | <div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/f109e018ec714ce4ab2415f120df3c25" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> |
| </html> |
| |
| ==== 後編 ==== |
| |
| <html> |
<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/a330fff2ebbf477895082355e327ff4c" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> | <div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/a330fff2ebbf477895082355e327ff4c" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div> |
| |
</html> | </html> |