プログラミング生放送勉強会 第45回@名古屋

1. 当日のお楽しみ当日のお楽しみ
Sora Arakawa (荒テック)
当日のお楽しみ当日のお楽しみ
Sora Arakawa (荒テック)

2. 自己紹介
Sora Arakawa ( 荒テック )
・中学 3 年生
・愛知県岡崎市在住
・プログラマー／デザイナー

3. 受験生です！！
じゃあ何で来たし

4. 自己紹介
・ HSP ( 基本機能、 a2d 、 3D ）
・なでしこ、プロデル
・ HTML 、 CSS 、 JavaScript
・ Adobe Illustrator
・姫路～米原の駅名暗唱

5. 自己紹介
C# を覚えたいです ...

6. 自己紹介
PCN こどもプロコン 2016 夏
Jig.jp 賞を受賞しました

7. ありえんやばみが深い
11/11 岡崎市学力テスト
※5 教科 岡崎市内全中学校同時開催
11/21,22,24 二学期末テスト
※9 教科

8. 岡崎市の紹介

9. 岡崎市の紹介
愛知県三河西部の中核市
人口 38 万人
↑ グンマー帝国の首都（前橋）より多い
名古屋駅から名鉄で 30 分です

10. NW.jsNW.js スタートアップスタートアップ
Sora Arakawa (荒テック)

11. 最近のイベント
・初の OSS プロジェクト Nagaharu
・ HSP 製テキストエディタ e-Page Editor
・永冶さん Bot ← 開発停止中

12. Nagaharu って何ぞ

13. Nagaharu って何ぞ
・文書編集ソフトウェア
└ マウスを使用した分かりやすい操作
・ MIT ライセンス ( ソースは GitHub で公開 )
・最新バージョンは 1.0 Beta5
・ NW.js で制作

14. NW.js とは ?

20. NW.js の特徴
・更新が多い
└ メジャーアップデート＝ Node.js の更新
└ マイナーアップデート＝ Chromium の更新
大体週一
・簡単に導入できる
Node.js ベースですが、 npm は使用しません

21. NW.js のデメリット
・ファイルがデカイ
最小限の構成でも 80MB
・ Windows XP で動作しない

22. 導入方法

23. NW.js の導入
1. http://nwjs.io にアクセス

24. NW.js の導入
2. 「 DOWNLOADS 」をクリック
→ 使用している OS 用の NW.js をダウンロードする
・ Windows の 32/64Bit
・ Linux の 32/64Bit
・ Mac OS X の 64Bit
が用意されています

25. NW.js の導入

26. NW.js の導入
ダウンロードサイズは 50MB 程度です
光回線なら 1 分程度で終わります。
ダウンロードが終わったら、圧縮ファイルを展開します。

27. アプリ開発する

28. NW.js でのアプリ開発
空のフォルダを作成します。
最低限の動作には、「 index.html 」と「 package.json 」が必要です。
後は Web の技術でアプリを作るだけです。
推奨エディタ： Visual Studio Code

29. デバッグする

30. NW.js 製アプリのデバッグ
制作したアプリケーションのフォルダを
「 nw.exe 」にドラッグ＆ドロップします。

31. NW.js 製アプリのデバッグ
アプリケーションが起動します

32. リリースする

33. NW.js 製アプリのリリース
制作したアプリケーションの全ファイルを ZIP で圧縮し、
「 app.nw 」に改名します。
コマンドプロンプトを起動し、
「 copy /b nw.exe+app.nw ****.exe 」を実行
生成された exe と、 nw.exe 以外の構成ファイル全てを
適当なフォルダにコピーし、再び ZIP 圧縮
これで、配布が可能です。

34. 拡張機能の使用

35. NW.js 拡張機能
Node.js のライブラリが使用可能です。
【例】 var fs = require('fs');
Nagaharu では、 fs と nw.gui のライブラリを使用

36. 裏技集

37. 裏技 1 input タグの拡張
input タグに色々追加できます。
【例】
<input type="file" id="DataLoad" style="display:none;" onchange="StartLoad()" accept=".ngr">

38. 裏技 2 ブラウザでデバッグ
ウェブブラウザを使用して簡単にデバッグできます。
( Chrome 推奨 )

39. おしまい