読者です 読者をやめる 読者になる 読者になる

或阿呆のブログ

Pythonを好んで使っているプログラマです。Ruby,Perl,PowerShell,VBAなどでもたまに書いています。おバカなことが大好きです。

JavaScript->ElectronでデスクトップGUIアプリケーションを作成する #JavaScript #Electron

今まではhtaを使って来た

今まではhtaを使って来ました。理由としては、Windowsでなら環境構築不要で使える点、GUIをHTMLで書けて、ロジックをJavaScriptで書けるし、手軽だから。

htaの弱点

  • GUIがダサい
  • Windowsでしか動かない
  • 書籍の情報が少ない

などです。

手軽に書けるというのはメリットなんだけれども。。。

Electronとは

Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS.

Electron とは(旧:Atom Shell)とはHTML5/JavaScriptなどWeb技術で実装されたアプリを実行するためのクロスプラットフォーム実行環境です。
NW.js と同様に、Chrominum と Node.js をベースにしています。最近、Microsoft からリリースされた Visual Studio Code も Electron で開発されています。
Electron で実現するクロスプラットフォームなデスクトップアプリ開発 – iroha Tech Note

マルチプラットフォームで動くのが有難い。ワンバイナリで実行出来る、つまり環境構築が不要なのもありがたい。

インストール

当方の環境はWindows10

nodeのインストール

まずは、node.jsをインストールする。
http://nodejs.jp/nodejs.org_ja/docs/v0.10/が説明に詳しい。

Electronのインストール

npmからElectronをインストール

$npm -g install electron-prebuilt

Electronでアプリケーションの作成

$cd
C:\Users\oneshot\js

$mkdir hello

$cd hello

以下の感じのJSONファイルが出来上がる

$npm init -y
Wrote to C:\Users\oneshot\js\hello\package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

フォルダ構成

こうなるのかな。

your-app/
├── package.json
├── main.js
└── index.html

Hello,World!を出力してみる

main.jsの記述内容

Quick Start - Electronから拝借致しました。

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.htmlの記載内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

Electronで作成したアプリの実行

$cd
C:\Users\oneshot\js\hello

$cd ../

$electron hello/

こんな感じで出来た。
f:id:oneshotlife_tom:20161124023354p:plain
お洒落だね!!!

faviconとか付けて改造したくなる。

Electronについてもっと知りたい方は

Cross-platform Desktop Applications: With Node, Electron, and Nw.js

Cross-platform Desktop Applications: With Node, Electron, and Nw.js

まだ発売されていないけど、本格的な書籍っぽいですね。

内容紹介もしておきます。

内容紹介
It's tedious and time-consuming to create OS-specific versions of every desktop application, especially with different set of tools for each platform. NW.js radically simplifies desktop development, providing a true cross-platform development stack built on HTML, CSS and JavaScript, Node.js modules, and the Chrome Blink engine. NW.js applications interact with the host operating system just like any other platform-native project, so developers have full access to all local files and resources. The performance is great, and best of all, it saves developers time because they only have to write one version of their application.

Cross-Platform Desktop Applications guides readers step-by-step as they learn to develop NW.js desktop applications that run on Windows, OSX and Linux. They begin by getting the big picture of what NW.js can (and can't) do. Readers test drive NW.js as they build their first desktop application. Next, they find out how to take advantage of OS- specific features like menus, system-tray apps, clipboards, and the file system. Along the way, this book teaches how to debug errors and diagnose performance bottlenecks with NW.j's browser developer tools, package an application as a standalone executable for each OS, and even distribute it to various app stores. The book gives developers the inspiration and skills they need to code pro quality desktop applications using the web languages they already know.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

著者について
Paul Jensen is the founder of Anephenix, a Node.js consultancy. He is also the Lead Developer of the SocketStream web framework, and the creator of Dashku, a realtime dashboard solution.

Google翻訳で訳した結果も転載しておきますね。

内容紹介
すべてのデスクトップアプリケーションのOS固有のバージョンを作成するのは、特にプラットフォームごとに異なるツールセットを使用すると面倒で時間がかかります。 NW.jsは、デスクトップ開発を大幅に簡素化し、HTML、CSS、JavaScript、Node.jsモジュール、Chrome Blinkエンジンをベースにした真のクロスプラットフォーム開発スタックを提供します。 NW.jsアプリケーションは他のプラットフォームのネイティブプロジェクトと同様にホストオペレーティングシステムとやりとりするため、開発者はすべてのローカルファイルとリソースに完全にアクセスできます。パフォーマンスは素晴らしく、何よりもアプリケーションのバージョンを1つ書くだけで済むため、開発者の時間を節約できます。

クロスプラットフォーム・デスクトップ・アプリケーションは、Windows、OSX、およびLinux上で動作するNW.jsデスクトップ・アプリケーションの開発を学ぶ際に、読者を段階的にガイドします。彼らは、NW.jsができること(そしてできないこと)を大きく把握することから始まります。読者は、最初のデスクトップアプリケーションを構築する際にNW.jsドライブをテストします。次に、メニュー、システムトレイアプリケーション、クリップボード、ファイルシステムなどのOS固有の機能を利用する方法を見つけます。この本では、NW.jのブラウザ開発ツールを使用してエラーをデバッグし、パフォーマンスのボトルネックを診断する方法、各アプリケーションのスタンドアロン実行可能ファイルとしてアプリケーションをパッケージ化する方法、さまざまなアプリストアに配布する方法について説明しています。この本は、既に知っているWeb言語を使用してプロ品質のデスクトップアプリケーションをコーディングするために必要なインスピレーションとスキルを開発者に提供します。

印刷本の購入には、Manning PublicationsのPDF、Kindle、ePub形式の無料eBookが含まれています。

著者について
Paul JensenはNode.jsのコンサルタントであるAnephenixの創設者です。 SocketStream Webフレームワークのリード開発者でもあり、リアルタイムのダッシュボードソリューションであるDashkuの作成者です。

最近のGoogle翻訳の精度は凄い!!!

カエレバを使って楽天の商品を紹介しているがいっこうに売れない件 #楽天アフィリエイト

以前は、月に1万円くらいのアフィリエイト収入があったのだが、最近は泣かず飛ばず。おかしいなとおもいつつも、メインはAmazonなのでまぁいいかと思っていた。
そうしたら衝撃の事実が発覚した。

カエレバにて、運営者のアフィリエイトIDが入ったパーツを生成してしまいました。

該当の方は早急に貼り替えをお願いします。

2016年6月(おそらく7/28)以降に
楽天アフィリエイト」で(「もしも」ではない)
楽天市場の商品をメインにパーツ生成
運営者のミスにより、多大なご迷惑をおかけしてしまいました。申し訳ございませんでした。
カエレバご利用者へリンク貼替のお願いとお詫び

もしかして、楽天アフィリエイトIDが自分のじゃないものが入っていた疑惑が発生した。
それか!!!

楽天アフィリエイトIDは英数字の羅列なので、自分のIDかどうかは一目で判断つかない。なので、他人のものにすり替わっていても気づかないだろう。これはうっかりしていた。とくいうことで、運営者のアフィリエイトIDでブログ内検索をしてみた。あっさりと0件が返ってきた。つまり、すり替わっていないということだ。。。

これが、運営者のアフィリエイトIDで検索した結果へのリンク
oneshotlife-tom.hatenadiary.jp

これが、私のアフィリエイトIDで検索した結果へのリンク
oneshotlife-tom.hatenadiary.jp

てことで、結論としては私の商売の仕方が下手だっただけというオチに終わった。

ところで、楽天アフィリエイトで稼いでいる人っていまだにいるん???はなはだ疑問だ。

Amazonの品揃えを褒め称える。

最近のAmazonって何でも売ってるのな!!!昔のイメージだと、ブランド品などは楽天市場では売っているがAmazonでは売っていなかった。最近はそうでも無いらしい。ちなみに、私は楽天が大嫌いだ。宮城県在住だが楽天は大嫌いだ。高いし、配送も遅いし、迷惑メールもたくさん届きそうなイメージしかない。なので、Amazonで取り扱っているのであれば、楽天は選ばない。

エドハーディの服も売っているっぽい。

ジャージが欲しい。普段着として。最近、ダーツをはじめたのだが、会社帰りに行くとき、ジャージに着替えたい。さすがに、シャツだと投げにくいからね。

或阿呆の戯言(2)

予めお断りしておく。見出しも段落分けも改行も一切しない。辛うじて、句読点だけは打ってやろう。今日は眠れないので起きている。今3時だわ。健康的な生活をしていた時期が懐かしい。糸井重里が「ちゃんとメシ食って、風呂入って、寝てる人にはかなわない」とか言っていたその通りだと思うわ。でも、昼間に寝て、昼間に酒を飲んで、夜も寝ず、朝型になって眠る生活の、あの気持ちをお前はわかるまい。まぁ、どうでもいいんだけど。夜に食べるカップラーメンの旨さをお前は知るまい。夜の静けさは落ち着く。昼間の喧騒が嫌で、夜に行動するようになってしまったのだと思う。

或阿呆の戯言(1)

予めお断りしておく。見出しも段落分けも改行も一切しない。辛うじて、句読点だけは打ってやろう。最近何のためブログを書いているのかわからなくなってきた。SEOで上位表示をさせたいだとか、はてブしてもらいたいだとか、好きな人に読んでもらいたいだとか、いろいろある。その目的のために、わかりやすく見出しを付けたり段落を分けたりする。それがけっこう面倒だったりするのだ。出来ることなら一筆書きのようにひと思いにやっちまいたい。書きたいのだ。読んで欲しい以前に書きたいのだ。書きたい。それが意味不明であろうと構わない。本来、書くという行為は読み手を意識するべきものではない。もっとも、自分自身も読み手として加えても良いのであれば、自分自身が読めるということは意識しても良いかもしれない。読み手を意識した瞬間に窮屈になり途端に書きたくなくなる。書き直してみたり、いろいろ試すんだけど、何となく情熱が無くなってしまうのを感じる。俺って何のため?俺は俺のため。小さい頃に興味があったことは、親に注意され友人に批評され社会に揉まれ、たいして興味が無いものに変わってしまった。機械を分解したりするのが好きだった。親に「モノ」を大切にしろと叱られた。それは理解出来なくはないのだが、俺にとって重要なのは「モノ」の価値ではなく、「モノ」がどう動いているのかを知りたいという興味や好奇心だった。自分の興味や好奇心を抑えてまで生きていたいとは思わない。他人に迷惑をかけようとまでは思わないが、俺がどんな奇行を捕ろうが勝手だろう?世の中にはいろんな人がいる。金庫の錠を開けるのに情熱を燃やす人や、女性の下着を1000着も2000着も集めてしまう人や、中国のサイトにサイバー攻撃をかけてしまう人など。傍から見れば大馬鹿者なんだろうが、俺にとっては愛すべきGeekNerd達だ。人間はどうして人の興味の対象を色分けしちゃうのだろうか?オリンピックで金メダルを取ったりエベレストに登頂したりする人間を評価はするが、女性の下着10000万着をコレクトしても誰も評価してくれない。枚数だけで言えばギネス記録に乗せてもいいだろうにwまぁ、盗みは万国共通だから、褒めるわけにはいかんだろうがね。褒められるためにやっている行動でも無いだろうし。俺はねホトホト嫌になっているんだよ。全部をぶっ壊してやりたい。すべてに反抗したい。君がYesと言おうものなら俺はNoだ。世の中に冷たくされて独りぼっちで泣いたとしても自分のやりたいようにやるよ俺は。所詮、死ぬときは誰しも一人だ。死ぬ間際に誰かが看取ってくれるかはわからないし、もしかすると野原で野垂れ死にしぬかもしれないし、自宅で孤独死するかもしれないし、はたまた通り魔にブスっと刺されて死ぬかもしれないけど、そこはどうでもいいとして、死ぬ最後の瞬間はスカッとして死にたいよね。あぁやっておけば良かったこうやっておけば良かったと後悔しつつ死にたくはない。俺はちょっと勘違いしていたのかもしれない。世の中の不条理に我慢して悪いことはせずに生きていけば必ず良いことがあると思っていた。ある意味、それが日本の宗教みたいなもん。でも、そんなの信じてやってきて34歳にもなって、何の手応えもなく、何の希望も無かったら、辛いだけだ。だったらさ、気違いだと俺の生きたいように行くしかなんじゃないの。例えその先に幸せとか無くてもさ。

孤独と栄光の架橋


孤独。
孤独。。
孤独。。。。
孤独。。。。。
孤独。。。。。。

ね。

すごく納得。

孤独だから酒も女もギャンブルもやるんだと思うけど。いずれかというわけではなく、複合要因。そして、ひどい人は、酒女ギャンブル孤独フル装備だったりする。

孤独あることが悪いとは思わない。でも、孤独につけこむ誘惑やビジネスはすごく多い。覚醒剤だってそうでしょう?

ゆずの「栄光の架橋」を聴いたり歌ったりすると泣けて来る。栄光のかげには必ず苦悩や悩みがある。誰から理解されるわけでもない。誰に好かれるでもない。誰に愛されるわけでもない。誰に必要とされるわけでもない。だから、誰にも理解を求めない。誰にも涙は見せない。誰も好きにならないとか誰も愛さないとは言わないけど。

これを聴くと頑張りたくなる。

www.youtube.com