2016年8月31日水曜日

ElectronアプリのWindowsインストーラの作成

Electron で開発したアプリの Windowsインストーラの作成 – iroha Tech Note
http://tech.at-iroha.jp/?p=548

上記のとおりやってみましたが、やはり、ハマったところがあったのでメモしておきます。


1.新しく作るpackage.jsonとpackager.jsonはroot直下に保存します。以下です。

/root/
    |-- package.json ←root直下に保存
    |-- packager.json ←root直下に保存
    /app/   (あなたの作成したElectron アプリ)
        |-- package.json
        |-- main.js
        |-- index.html
        |-- js等その他諸々のファイル
    /assets/ (アイコンファイル)
        |-- /osx/
            |-- mount.icns
        |-- /win/
            |-- icon.ico
    /dist/ (パッケージングされたファイルを出力)
        |-- /osx/
        |-- /win/
    /installer/ (dist を元に作成されたインストーラが出力)
        |-- /osx/
        |-- /win/

2.electron-builder を -gオプションでインストールしても、

'electron-builder' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

となってしまうので、root直下にelectron-builderをインストールした。

c:\root>npm install electron-builder --save-dev

※なぜか electron-bulder のバージョンが2.11.0でないと動作しなかった。その場合、
c:\root>npm install electron-builder@2.11.0 --save-dev

以下のような構成になります。




3.新しく作ったpackage.jsonのElectronのバージョン指定が古かったので、0.25.0 → 1.3.4 にした。(バージョンはお使いのものに合わせてください)

 13行目: "build:osx": "npm run clean:osx && electron-packager ./app \"PartslistViewer\" --out=dist/osx --platform=darwin --arch=x64 --version=1.3.4 --icon=assets/osx/loopline.icns --overwrite",
 14行目: "build:win": "npm run clean:win && electron-packager ./app \"PartslistViewer\" --out=dist/win --platform=win32 --arch=ia32 --version=1.3.4 --icon=assets/win/icon.ico --overwrite",

ついでに --overwrite (ファイル上書き) オプションも追加した。

4.同じくpackege.json 21行目以降のバージョンもインストールされているものに合わせた。

  "dependencies": {
    "grunt": "~1.0.1",
    "electron-packager": "^7.7.0",
    "electron-prebuilt": "^1.3.4",
    "electron-builder": "^2.11.0"
  },
  "devDependencies": {
    "electron-builder": "^2.11.0"
  }
※これは依存関係によるのでそのままでよかった。


そして、

c:\root>npm run pack:win

で、無事インストーラができて動作しました。

ただ、Program Filesフォルダ内をみると、Electronアプリがそのまま入っていてJSなどのコードは丸見えでした。隠すことはできないのでしょうか...

→electron-packager に --asar オプションを付けるとアプリがresources/app.asarにパッケージされますが、なぜかElectronがapp.asarを読み込めない。
別途、
$ asar pack app app.asar
で app.asar を作成して、resources/app.asar を上書きしてやると起動した。原因不明...


追記
グローバルインストールしてもコマンド認識しない場合については以下を参照すればなんとかなりそうです。
Electronの使い方(自分流) - uepon日々の備忘録



↓以下記事保管

Electron で開発したアプリの Windowsインストーラの作成



Electron には electron-builder と呼ばれる Windows インストーラの作成ツールが用意されております。このツールを使用して、開発した Electron アプリを元に Windows インストーラを作成することが可能です。
公式サイトに情報が掲載されておりますが、実際に使用してみるとハマりどころが多く見受けられたので順に説明いたします。
electron-builder 公式情報
https://www.npmjs.com/package/electron-builder
事前準備
– Electron をインストールします。(インストール方法:Electron で実現するクロスプラットフォームなデスクトップアプリ開発)
– Node v0.12.0 以上であることを確認します。(それより下のバージョンではエラーが発生し、正常に作成できませんでした。)
– NSIS(Nullsoft Scriptable Install System) 2.46 をインストールします。
http://nsis.sourceforge.net/Download
– NSIS のコマンドのフォルダのパス(C:\Program Files (x86)\NSIS\)を、環境変数の Path に追加します。
1. electron-packager をインスールします。
npm install electron-packager -g
2. electron-builder をインストールします。
npm install electron-builder -g
3. 以下の構成でフォルダ、ファイルを作成します。適切なフォルダがないとコマンド実行時にエラーとなります。
/app/   (Electron アプリ)
|-- package.json
|-- main.js
|-- index.html
/assets/ (アイコンファイル)
|-- /osx/
    |-- mount.icns
|-- /win/
    |-- icon.ico
/dist/ (パッケージングされたファイルを出力)
|-- /osx/
|-- /win/
/installer/ (dist を元に作成されたインストーラが出力)
|-- /osx/
|-- /win/
package.json
インストーラを作成するためのコマンドを定義します。アプリ側の package.json とは異なるファイルです。
{
  "name": "hello-world",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "electron ./irohanote",

    "clean": "del .\\dist",
    "clean:osx": "del .\\dist\\osx",
    "clean:win": "del .\\dist\\win",

    "build": "npm run clean && npm run build:osx && npm run build:win",
    "build:osx": "npm run clean:osx && electron-packager ./app \"hello-world\" --out=dist/osx --platform=darwin --arch=x64 --version=0.25.3 --icon=assets/osx/loopline.icns",
    "build:win": "npm run clean:win && electron-packager ./app \"hello-world\" --out=dist/win --platform=win32 --arch=ia32 --version=0.25.3 --icon=assets/win/icon.ico",

    "pack": "npm run pack:osx && npm run pack:win",
    "pack:osx": "npm run build:osx && electron-builder \"dist/osx/hello-world.app\" --platform=osx --out=\"installer/osx\" --config=packager.json",
    "pack:win": "npm run build:win && electron-builder \"dist/win/hello-world-win32-ia32\" --platform=win --out=\"installer/win\" --config=packager.json"
  },
  "author": "",
  "license": "BSD",
  "dependencies": {
    "grunt": "~0.4.2",
    "electron-packager": "^4.0.2",
    "electron-prebuilt": "^0.25.2",
    "electron-builder": "^2.0.0"
  }
}
packager.json
インストーラの設定ファイル。package.json と名称が似ていますが、異なるファイルです。
{
  "osx" : {
    "title": "hello-world",
    "background": "assets/osx/installer.png",
    "icon": "assets/osx/mount.icns",
    "icon-size": 80,
    "contents": [
      { "x": 438, "y": 344, "type": "link", "path": "/Applications" },
      { "x": 192, "y": 344, "type": "file" }
    ]
  },
  "win" : {
    "title" : "hello-world",
    "icon" : "assets/win/icon.ico"
  }
}
4. 以下のコマンドでインストーラの作成を行います。
npm run pack:win
コマンドが無事に完了すると /installer/win/ フォルダに以下の名称でインストーラが作成されます。
hello-world Setup.exe
5. ダブルクリックするとインストーラが起動します。
インストール開始画面
2015-08-26 16.33.16
インストール終了画面
2015-08-26 16.33.23
気づいたこと
– 現状作成されるインストーラは英語版となります。
– package.json で設定されている name (“name”: “hello-world”)と、title (“title” : “hello-world”) が一致していないと、インスール終了後、インストーラからアプリが起動しません。またショートカットも自動で作成されなくなります。

関連記事:



Electron で開発したアプリの Windowsインストーラの作成 – iroha Tech Note

iPhone に搭載されている Safari 上でのインライン動画再生 – iroha Tech Note

Amazon Elastic Transcoder によるマルチデバイス動画配信 – iroha Tech Note

Windows7 パソコンをWiFiアクセスポイント化する方法

参考
http://www.akakagemaru.info/port/internet-softap.html

管理者権限でコマンドプロンプトを起動し、以下を順に入力

1.
netsh wlan set hostednetwork mode=allow

2.
netsh wlan set hostednetwork ssid=XXXXXX

 ※SSIDのXXXXXXは適当な名前を入力

3.
netsh wlan set hostednetwork key=1234567890 keyUsage=persistent

 ※key(パスワード)は8 ~ 63 個のASCII 文字から成る文字列を指定

4.
netsh wlan start hostednetwork

 ※ネットワークが開始されない場合は無線LANが無効になっているので有効にする


あとはローカルエリア接続の共有設定をします。

5.ローカルエリア接続のプロパティ→共有

以下のように設定します。


※ワイヤレスネットワーク接続 2 は最初に設置したSSIDの接続先になります。お使いのパソコンによっては数字2以外の場合もあります。

以上となります。



「Lean Analytics」は全てのスタートアップ関係者が読むべき良書 - SELECT * FROM life;

http://blog.yuku-t.com/entry/2013/10/28/001924

2016年8月30日火曜日

Electronをとにかく始める

以下のとおりインストールしてみる。

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita
http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29


しかし、jQueryで作ったウェブアプリが動作しなかった

こちらで解決↓

方法1:jQueryをrequireでロードする

<!--<script src="js/jquery.js"></script>-->
<script>
window.jQuery = window.$ = require('./js/jquery.js');
</script>


方法2:node-integration: falseを追加する

index.js 内で以下の赤文字部分を追加する

  // Create the browser window.
  win = new BrowserWindow({width: 1200, height: 800, webPreferences: {
    nodeIntegration: false
  } })


ElectronでjQueryがundefinedになる - Qiita
http://qiita.com/pirosikick/items/72d11a8578c5c3327069

2016年8月22日月曜日

2016年8月11日木曜日

DL 2016-08-11: MacにNode.jsをインストールした

2016−08−11

1. nodebrew をインストール

$ curl -L git.io/nodebrew | perl - setup

参考: node.jsのversionを管理するためにnodebrewを利用する - Qiita
http://qiita.com/sinmetal/items/154e81823f386279b33c

2. nodebrewにPATHを通す

.bash_profileを作成して

$ sudo エディタ名 .bash_profile

.bash_profile内に以下を記述

export PATH=$HOME/.nodebrew/current/bin:$PATH

参考: MacでPATHを通す - Qiita
http://qiita.com/nbkn/items/01a11392921119fa0153

.bash_profile を読み直してnodebrewの動作を確認

$ source ~/.bash_profile
$ nodebrew help

3. Node.js をインストール

$ nodebrew install-binary v4.4.7

$ nodebrew use v4.4.7
$ node -v
v4.4.7

今からでも間に合う!Node.js v4&v5は何が変わったか? | HTML5Experts.jp

https://html5experts.jp/yosuke_furukawa/17791/

2016年8月3日水曜日

SVG テキストが小さくならない

以下のサイトを参考に、<svg>タグに
text-rendering="geometricPrecision"
を追加したら、それなりに小さくなったが、拡大・縮小率がぴったりできなかった。

SVGでの文字描画 - Google プロダクト フォーラム
https://productforums.google.com/forum/#!msg/chrome-ja/cbNXMYNN2Jo/Zazd3wBcX4cJ

また今度考えます。

2016年8月1日月曜日

Excel 2010 を使って XML ファイルを編集する - Qiita

@IT:XMLテクニック集 - インデックス

http://www.atmarkit.co.jp/fxml/tecs/index/tech01.html


今回のテクニック  2004/5/26 更新
XML Schemaで空要素を定義する New!
XML Schemaでnull値の許容を定義する New!
XML Schema内でコメントを定義する New!
XML Schemaで値の有効範囲を定義する
XML Schemaで複数の型を結合する
XML Schemaで順不同の出現を定義する
XML Schemaで一意キーとなる要素・属性を定義する
XML Schemaで要素のゆらぎを表現する
XML Schemaで文字列長を制約する
XML Schemaで選択型の値を定義する
XML Schemaで値リストの個数を制限する
外部のXML Schemaをインクルード/インポートする
XML Schemaで文字列パターンを定義する
XML Schemaで要素モデルを定義する
XML Schemaで属性グループを定義する
XML SchemaでXML文書の妥当性を検証する
DOMで動的な表のソーティング処理を行う
document関数で細分化されたXML文書を結合する
XML Schemaで単純型要素を定義する
XML Schemaで複雑型要素を定義する
XML Schemaで属性ノードを定義する
XSLTテンプレートをインクルードする
XSLTテンプレートをインポートする
XSLTテンプレートの機能を継承する
XPath関数で部分テキストを出力する
XPath関数で数値の平均値を計算する
外部サブセットを利用して、DTDをXML文書から分離する
多階層のXML文書にナンバリング処理を行う
フラットな階層のXML文書で階層的なナンバリング処理
よく使う属性値をまとめて定義する
DTDで要素型宣言を定義する
DTDで属性リスト宣言を定義する
実体参照宣言を利用して、XML文書を分割管理する
XML文書からソーティングされた一覧表を作成する
文章の一部分を強調文字で出力する
XML文書をXSLTスタイルシートに動的にひも付ける(PHP編)
XML文書にXSLTスタイルシートを静的にひも付ける 
XSLTスタイルシートを迷わず記述する6のポイント 
XML文書をXSLTスタイルシートに動的にひも付ける(ASP.NET編)
今後続々とテクニックを追加していきますので、ご期待ください。 



Ask XML Expertインデックス

2000年12月から2002年1月まで連載された「Ask XML Expert!」のインデックスを紹介します。下記のタイトルをクリックすると、Ask XML Expert!の各記事へジャンプします。

 XMLの仕様/関連仕様
 タグの大文字小文字の区別、使える文字を教えて
 XSLはなぜXSLTとXSL-FOに分かれているのか?
 スキーマっていったい何?どんな役割をするものですか?
 タグと要素(エレメント)の違いを説明してください
 HTMLとXHTMLの違いはどこにある?
 DTDが必要なときとは?
 UTF-8とUTF-16の違いとは?
 DTDと名前空間の組み合わせで生じる不都合とは?
 タグ名に漢字を使用するときに考慮する点は?

 ツール
 MSXML3とは何? 何が変わるの?
 XMLパーサにはどんなものがある?
 OracleでXML文書を操作する方法は
 HTMLページをXHTMLに変換したいのですが、よいツールはありますか?
 UnicodeのXML文書はどのように作るのですか?
 ExcelのデータをXML文書にしたいのですが、どうすればいいですか

 プログラミング
 スタイルシートをクリックで動的に変えたい
 IEとNetscapeの両方でXML文書を表示する方法はあるか?
 XML文書の内容をソートしたい
 XML文書内のデータを使って計算したい
 XML文書の表示時にプルダウンメニューを使いたい
 XSLTのソート結果に番号を振るにはどうするの?
 顧客管理をXMLで行う方法を教えてください
 ASPファイル経由でデータベースと動的に連携する処理は可能ですか
 2つのXML文書を1つにしたい
 XMLでのやりとりのオーバーヘッドを減らすには?
 あるXML文書をパースするとエラーになる原因は?
 IISで、XML文書をHTMLに変換して表示する方法は?
 データベースのデータをXML文書に変換する方法
 リストボックスやラジオボタンの出し方
 ファイルの一覧の取得と、そのファイルのタイトル一覧の作成
 違う親を持つ同じ名前の要素は判別できるのか?
 階層構造の深さによるメリット・デメリット
 IE 5.XのXSLTで生成したファイルが文字化けする
 引数などでスタイルシートを切り替えたい

 その他
 最近よく聞く用語。「ebXML」って何?
 XSLはなぜXSLTとXSL-FOに分かれているのか?
 SVGって何?どうやって利用するの?
 VoiceXMLを利用する方法は?
 文書をXML化すれば自動的にデータベースになる?

【俺メモ】Node.js向け - 俺的Windows開発環境構築(便利ツール含む) - Qiita

Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno

Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno

JavaScript Systems Music
http://teropa.info/blog/2016/07/28/javascript-systems-music.html