セッション「nw.js スタートアップ」資料
TRANSCRIPT
当日のお楽しみ当日のお楽しみ
Sora Arakawa (荒テック)
当日のお楽しみ当日のお楽しみ
Sora Arakawa (荒テック)
自己紹介
Sora Arakawa ( 荒テック )・中学 3 年生
・愛知県岡崎市在住
・プログラマー／デザイナー
受験生です！！じゃあ何で来たし
自己紹介
・ HSP ( 基本機能、 a2d 、 3D ）
・なでしこ、プロデル
・ HTML 、 CSS 、 JavaScript
・ Adobe Illustrator
・姫路～米原の駅名暗唱
自己紹介
C# を覚えたいです ...
自己紹介
PCN こどもプロコン 2016 夏Jig.jp 賞を受賞しました
ありえんやばみが深い
11/11 岡崎市学力テスト※5 教科 岡崎市内全中学校同時開催
11/21,22,24 二学期末テスト※9 教科
岡崎市の紹介
岡崎市の紹介
愛知県三河西部の中核市
人口 38 万人↑ グンマー帝国の首都（前橋）より多い
名古屋駅から名鉄で 30 分です
NW.js NW.js スタートアップスタートアップ
Sora Arakawa (荒テック)
最近のイベント
・初の OSS プロジェクト Nagaharu
・ HSP 製テキストエディタ e-Page Editor
・永冶さん Bot ← 開発停止中
Nagaharu って何ぞ
Nagaharu って何ぞ
・文書編集ソフトウェア
└ マウスを使用した分かりやすい操作
・ MIT ライセンス ( ソースは GitHub で公開 )
・最新バージョンは 1.0 Beta5
・ NW.js で制作
NW.js とは ?
NW.js の特徴
・更新が多い
└ メジャーアップデート＝ Node.js の更新
└ マイナーアップデート＝ Chromium の更新
大体週一
・簡単に導入できる
Node.js ベースですが、 npm は使用しません
NW.js のデメリット
・ファイルがデカイ
最小限の構成でも 80MB
・ Windows XP で動作しない
導入方法
NW.js の導入
2. 「 DOWNLOADS 」をクリック
→ 使用している OS 用の NW.js をダウンロードする
・ Windows の 32/64Bit
・ Linux の 32/64Bit
・ Mac OS X の 64Bit
が用意されています
NW.js の導入
NW.js の導入
ダウンロードサイズは 50MB 程度です
光回線なら 1 分程度で終わります。
ダウンロードが終わったら、圧縮ファイルを展開します。
アプリ開発する
NW.js でのアプリ開発
空のフォルダを作成します。最低限の動作には、「 index.html 」と「 package.json 」が必要です。
後は Web の技術でアプリを作るだけです。
推奨エディタ： Visual Studio Code
デバッグする
NW.js 製アプリのデバッグ
制作したアプリケーションのフォルダを
「 nw.exe 」にドラッグ＆ドロップします。
NW.js 製アプリのデバッグ
アプリケーションが起動します
リリースする
NW.js 製アプリのリリース
制作したアプリケーションの全ファイルを ZIP で圧縮し、
「 app.nw 」に改名します。
コマンドプロンプトを起動し、
「 copy /b nw.exe+app.nw ****.exe 」を実行
生成された exe と、 nw.exe 以外の構成ファイル全てを
適当なフォルダにコピーし、再びZIP 圧縮
これで、配布が可能です。
拡張機能の使用
NW.js 拡張機能
Node.js のライブラリが使用可能です。
【例】 var fs = require('fs');
Nagaharu では、 fs と nw.gui のライブラリを使用
裏技集
裏技 1 input タグの拡張
input タグに色々追加できます。
【例】<input type="file" id="DataLoad" style="display:none;" onchange="StartLoad()" accept=".ngr">
裏技 2 ブラウザでデバッグ
ウェブブラウザを使用して簡単にデバッグできます。
( Chrome 推奨 )
おしまい