プログラミング教えるよ

技術
スポンサーリンク
1: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:19:23.528 ID:n+w0hNl40
言語はJavaScriptでElectronっていうフレームワーク使って簡単なアプリ
作るよ

引用元: ・プログラミング教えるよ

2: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:19:54.898 ID:WBNPyIG60
教えてー

3: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:20:38.857 ID:BXTS+jxx0
atomのやつだね

4: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:20:47.387 ID:qDrls+aQ0
ぼくC#がいい

7: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:22:18.081 ID:n+w0hNl40
>>4
そうか…今度な

じゃあインストールしたらコマンドプロンプトまたはターミナルを開いて
node -vってコマンド打ってバージョン情報出るか確認
インストーラーでPathも通してくれてるはずだから大丈夫だけどな

5: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:21:01.623 ID:n+w0hNl40
じゃあ早速
Nodejsを使っていくから
https://nodejs.org/ja/
このサイトからLTSをインストールしてくれy

8: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:22:21.450 ID:SyAPtRAY0
BASICで悪魔召喚プログラム作る方法教えてください!
FDD1枚に入るサイズでお願いします!!

11: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:24:03.185 ID:n+w0hNl40
>>8
悪魔は現実にいないので無理です。

じゃあ次にmyappっていうフォルダを作ったら
ターミナルでmyappフォルダまで移動して
npm init -yってコマンド打ってエンター

15: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:27:01.693 ID:n+w0hNl40
上記コマンドが完了するとnode_moduleってフォルダできるけど消すなよ?あといじるな
それが終わったらmyapp/srcって形になるようにsrcフォルダをmyapp配下に作ろう
そのsrcフォルダには、package.json index.html main.jsを作っておこう

17: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:29:04.768 ID:n+w0hNl40
次にindex.html
<html>
<head>
<meta charset=”UTF-8″>
<title>My Application</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
と書いて保存

18: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:30:02.596 ID:n+w0hNl40
次にmain.jsに
// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require(‘electron’);

// メインウィンドウ
let mainWindow;

const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
});

mainWindow.loadFile(‘index.html’);

mainWindow.on(‘closed’, () => {
mainWindow = null;
});
}

app.on(‘ready’, createWindow);

app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});

app.on(‘activate’, () => {
if (mainWindow === null) {
createWindow();
}
});
と書いて保存

20: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:31:20.020 ID:n+w0hNl40
インデント死んでてワロタ
上記まで書けたら、ターミナルでmyappフォルダに移動して
npx electron とコマンド打つと、ウィンドウが起動して
Hello!と表示されてると思うがどうだろうか

22: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:32:04.179 ID:n+w0hNl40
>>21
おっとすまん。いい指摘どうも

npx electron src/
だな

23: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:32:37.956 ID:hrmdGO4hM
動画にすれば見るよ

27: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:38:01.645 ID:n+w0hNl40
じゃあちょっとindex.htmlが寂しいんで軽く装飾するためにsrc配下に
style.cssファイルを作成してく。ここまでのsrc配下にあるファイルは行か
package.json
index.html
main.js
style.css

以上な

28: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:39:38.984 ID:n+w0hNl40
じゃあ style.cssに
body {
background-color: tomato;
}
とかきたす。
index.htmlに読み込んでもらえるように
<html>
<head>
<meta charset=”UTF-8″>
<title>My Application</title>
<link rel=”stylesheet” href=”style.css”>  <ーここが追加箇所
</head>
<body>
<h1>Hello!</h1>
</body>
</html>

としてく

30: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:43:47.064 ID:n+w0hNl40
かきこめねぇ

32: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:45:18.116 ID:yg2idBMo0
お前らちゃんとついてきてるか!

34: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:48:01.835 ID:yg2idBMo0
>>33
プログラミングって夜中にやるもんじゃん?

36: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:51:26.898 ID:n+w0hNl40
試しにrenderer.jsにHelloをクリックするとその要素の背景色が白になるプログラムを書いて動作実験
“use strict”;

let hello = document.getElementById(“hello”);

hello.addEventListener(“click”, () => {
hello.style.backgroundColor = ‘white’;
});

こんな感じ。
npx electron src/
でウィンドウを起動させてHello!をクリックすると上記の様な動きになるはず。どうだろうか

39: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:56:40.570 ID:n+w0hNl40
>>36
簡単に補足しておくと、
let hello = document.getElementById(“hello”);
上記でid属性が付与された要素を取得してる

hello.addEventListener(“click”, () => {
上記で取得した要素がクリックされたら以下の処理を行うように指定してる
hello.style.backgroundColor = ‘white’;
});

クリックじゃなくてもいいんだがわかりやすいからそうしてる

38: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:52:28.329 ID:4Sx56m/80
見てるから最後までやって

40: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 01:58:56.207 ID:n+w0hNl40
ついてきてる人いんのかな。少し小休止

43: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:03:53.335 ID:2tGd2Q2c0
>>40
ついていってるぞ
何時までやる?
あと次回はいつスレ立てる予定?

44: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:05:32.412 ID:n+w0hNl40
>>43
別ウィンドウ開いて軽いセッティングもできるようにしたいけど後一時間じゃ無理そうだな
次は未定だわ
定期的にやりたいけどネタと勉強が中々釣り合わん

48: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:15:01.448 ID:n+w0hNl40
>>47
コミュ障かつ興味あることしかやりたくないからだな

じゃあアプリのクソしょぼい基ができたとして、次はもうちょっと踏み込んで
起動時のウィンドウ上部にあるメニューを改変してく

42: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:03:15.283 ID:pduAnv0b0
やる気は感じるけど、なんでレス形式でやろうと思ったのか?
レスが分かれるのも見にくいし、コードも見にくい
ブログに書いてURL貼れ

46: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:10:22.976 ID:n+w0hNl40
とりあえず簡単にウィンドウを押したらニートな駄名言を適当に出すようにするアプリにしとく
let hello = document.getElementById(“hello”);
let Quotations = [
“働いたら負けかなと思ってる”,
“ニートは一日にしてならず”,
“俺のカレンダーは真っ赤に染まっている”,
“床ドン「飯を用意するドン!」”,
“働かなくても食う飯はうまい”,
“母パート妹デート俺ニート”,
“来月から本気出す”,
“社会の底辺は俺が守る!”,
“守りたい家があるんだ!”,
“働くくらいなら食わぬ!”,
“働けないんじゃない、働かないんだ。”
]
window.addEventListener(“click”, () => {
hello.textContent = Quotations[Math.floor(Math.random() * Quotations.length)];
});
コードはこんな感じで、
npx electron src/
で起動してウィンドウをクリックすると、Quotations内に書かれてるものがランダムに表示されると思う

52: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:25:20.447 ID:n+w0hNl40
>>50
知らん。

かなり駆け足でちょっと疲れたし眠くなってきた。
続きはまた明日

53: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:25:55.164 ID:yg2idBMo0
>>52
ありがとう
お疲れ様です

51: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:23:27.550 ID:n+w0hNl40
main.js内のcreateWindow関数を以下のように編集
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
Menu.setApplicationMenu(menu); <ーここ追加箇所

mainWindow.loadFile(‘index.html’);

mainWindow.on(‘closed’, () => {
mainWindow = null;
});
}

上記編集次第
npx electron src/
で起動すると、英語だったメニューが
メニューのみになって、サブメニューに閉じるがあるはず
閉じるをクリックするとアプリが終了するはず

こんな感じでメニューを作ってく

54: 以下、5ちゃんねるからVIPがお送りします 2018/11/08(木) 02:26:58.319 ID:gl65kOMV0
じゃあ俺が置いとくよ
HaskellのFizzBuzz

fizzbuzz x
|x`mod`15==0=”FizzBuzz”
|x`mod`3 == 0 =”Fizz”
|x`mod`5 == 0 =”Buzz”
|otherwise = show x

fz = putStrLn $ unlines $ map fizzbuzz [1..500]

技術
スポンサーリンク
りょうたろうをフォローする
スポンサーリンク
プログラミングまとめ速報ちゃんねる

コメント

タイトルとURLをコピーしました