プログラミング生放送勉強会@名古屋 2017/11/23

1. 当日のお楽しみ
荒川 奏良 (Sora Arakawa / 荒テック)
プログラミング生放送勉強会 @ 名古屋
2017.11.23

2. フォントの話
メイン：UD新ゴNT Pro R (モリサワ)
コード：MS ゴシック (リコー／マイクロソフト)

3. 自己紹介
荒川 奏良（Sora Arakawa / 荒テック）
・愛知県岡崎市在住の高校1年生
・趣味はプログラミングとDTP
・推しは名鉄3100系3次車
http://arkw.net/
Twitter : @arkw0

4. 最近の出来事
・ 期末考査が近い (来週火曜日から)
- 「社会と情報」を友人に教える日々
・ 化学基礎の小テストが不合格 (昨日)
- 追試は来週月曜日
・ 学校に生徒共用のパソコンが設置された
- 休み時間にコーディングできる！すごい！

5. 最近のマイブーム
・ C言語 / C#
・ Adobe InDesign (DTPソフトウェア)
・ 英単語学習／自由英作文
・ レトロゲーム (PlayStation / PlayStation 2)

6. 新版 HSP基礎講座
Arakawa Templateで作る
こだわりウェブサイト
今回のセッションは25分×2ジャンル＝合計50分です！

7. 新版 HSP基礎講座
荒川 奏良 (Sora Arakawa / 荒テック)
プログラミング生放送勉強会 @ 名古屋
2017.11.23

8. 皆さんに質問です
HSP、知ってますか？

9. HSPとは...
【 HSP = Hot Soup Processor の略】
おにたま氏制作の国産プログラミング言語。
理解しやすい文法と多彩な機能が特徴。
公式ウェブサイト http://hsp.tv/

10. セッションの目的
・ 新版「HSP 3.5」の紹介
・ 基本的な文法の紹介
・ 制作例
・ とにかくすごいんだ！HSPは！
・ ネタを交えず真面目に紹介

11. HSPのここがスゴイ！
1. ランタイム不要
HSP本体はWin32API ネイティブで作られているので、
ランタイム不要で動作します。
対応OS：
Windows 2000/ NT 4.0 / XP / Vista / 7 / 8 / 8.1 / 10

12. HSPのここがスゴイ！
2. write less, do more.
いわゆる「おまじない」が存在しない
( 順番にロジックを作れば確実に動作する )
Win32 API、ActiveX、DirectXなど
様々なコンポーネントを簡単に呼び出し可能

13. HSPのここがスゴイ！
3. クロスプラットフォーム対応
付属ソフトウェア「hsp3dish」を使うと、HSPコードを
「Androidアプリ」「iOSアプリ」「Webアプリ」
に変換できます。
詳しくは後述

14. HSPのここがスゴイ！
4. 動作が軽快なスクリプトエディタ
コード着色＋ビルド機能付きのテキストエディタが
標準で付属しています。

15. HSPのここがスゴイ！

16. HSPのここがスゴイ！
5. 豊富なサンプルコード
100種類以上のサンプルコードが付属しています。
・ゲーム
・ツール
・プラグインサンプル etc...

17. HSP 3.5の新機能
2017年10月20日、3年ぶりの新版「HSP 3.5」公開
新機能
・ Unicode対応ライブラリ「hsp3utf」同梱
・ 64ビット対応ランタイム「hsp3_64」同梱
・ 公式キャラクター「珠音」素材の大幅追加

18. HSP 3.5の新機能
2017年10月20日、3年ぶりの新版「HSP 3.5」公開
新機能
・ Unicode対応ライブラリ「hsp3utf」同梱
・ 64ビット対応ランタイム「hsp3_64」同梱
・ 公式キャラクター「珠音」素材の大幅追加

19. 新機能1「hsp3utf」
Ver.3.4以前のHSP → 文字コードは「シフトJIS」
・ 日本語／英語以外の文字の扱いに弱い
・ 文字コード宗教戦争が起こりかねない
「hsp3utf」プラグインを使うことで、
機能そのまま「UTF-8」文字コードを扱えるようになる

20. HSP 3.5の新機能
2017年10月20日、3年ぶりの新版「HSP 3.5」公開
新機能
・ Unicode対応ライブラリ「hsp3utf」同梱
・ 64ビット対応ランタイム「hsp3_64」同梱
・ 公式キャラクター「珠音」素材の大幅追加

21. 新機能2「hsp3_64」
Ver.3.4以前のHSP → ランタイムは「32ビット」
「hsp3_64」ランタイムを使うことで、
機能そのまま「64ビット」ランタイムで動作する
※ 通常利用における恩恵はあまり無い

22. HSP 3.5の新機能
2017年10月20日、3年ぶりの新版「HSP 3.5」公開
新機能
・ Unicode対応ライブラリ「hsp3utf」同梱
・ 64ビット対応ランタイム「hsp3_64」同梱
・ 公式キャラクター「珠音」素材の大幅追加

23. 新機能3「オフィシャル素材 珠音」
↑ 3D素材 (hgimg3 / hgimg4で使用可能)
2D素材 (hsp標準命令で使用可能) →

24. HSPの機能紹介
・基本文法編
・グラフィックプラグイン「Artlet2D」編
・3D処理プラグイン「hgimg4」編
・クロスプラットフォーム対応編

25. HSPの機能紹介
・基本文法編
・グラフィックプラグイン「Artlet2D」編
・3D処理プラグイン「hgimg4」編
・クロスプラットフォーム対応編

26. HSPの機能紹介
とりあえず、プログラミング入門の大定番
Hello World
のコードを書いてみましょう。

27. 入門「Hello World」
・ HSPスクリプトエディタを起動します。

28. 入門「Hello World」

29. 入門「Hello World」
・ プログラムの実行は [ F5 ] キーです。

30. 演習「HSP標準命令」
・ 変数（整数、実数、文字列など）

31. 演習「HSP標準命令」
・ 条件分岐 (if-else文、switch-case文)

32. 演習「HSP標準命令」
・ 繰り返し処理 (repeat-loop文、while文)

33. 演習「HSP標準命令」
・ 無限ループ
[ ! ] ウェイトを入れないとフリーズするので注意

34. 演習「HSP標準命令」
その他にも...
・ 文字列処理 (split、strmidなど)
・ ファイル操作 (mkdir、bsaveなど)
・ 画像／図形 (line、boxf、gcopyなど)
・ マルチメディア関連 (mci、mmplayなど)
いろいろ試すと楽しい！

35. HSPの機能紹介
・基本文法編
・グラフィックプラグイン「Artlet2D」編
・3D処理プラグイン「hgimg4」編
・クロスプラットフォーム対応編

36. 画像処理「Artlet2D」
・お待たせしました。みんな大好き、画像処理の時間です。
・勿論HSP標準命令でもある程度の画像処理は可能です
・外部ライブラリに投げるとより高画質な画像を作成可能です
（特に文字）

37. 画像処理「Artlet2D」
HSP標準命令「mes」で描画したフォント
(MS ゴシック、18px)

38. 画像処理「Artlet2D」
Artlet2D命令「alDrawText」で描画したフォント
(MS ゴシック、18px)

39. HSPの機能紹介
・基本文法編
・グラフィックプラグイン「Artlet2D」編
・3D処理プラグイン「hgimg4」編
・クロスプラットフォーム対応編

40. 三次元空間「hgimg4」
・ なんと！HSPなら3D処理も可能です！
・ HSPで扱える3Dライブラリには大きく3種類あります
└ hgimg / hgimg3 / hgimg4
└ Easy3D
└ d3module

41. 三次元空間「hgimg4」
・ 今のオススメは「hgimg4」
└ OpenGL ES / DirectX両対応
└ 物理エンジンやシェーダー、特殊効果搭載
└ hsp3dishを使えばスマートフォン移植可能

42. 三次元空間「hgimg4」
・ 逆に、古いパソコンでは動かないことがあります
└ OpenGLに対応していないグラフィックボードを搭載したPC
└ 稼働中のOSがWindows Vista以前
└ ライトな3Dゲームが動作しないレベルの低スペックPC
etc...

43. HSPの機能紹介
・基本文法編
・グラフィックプラグイン「Artlet2D」編
・3D処理プラグイン「hgimg4」編
・クロスプラットフォーム対応編

44. 変換「hsp3dish」
・ HSPのコードをC / JavaScriptコードに変換する仕組み
└ Android (Android NDK)
└ iOS (デバッグ／ビルドにはMac+XCodeが必要）
└ HTML5 (JavaScriptコードとして動作）

45. 変換「hsp3dish」
こんな機能使わなくても、普通にC言語書けば良くね？

46. 変換「hsp3dish」
ちがうだろーー！！

47. 変換「hsp3dish」
【hsp3dishのメリット】
・ 軽量なHSPスクリプトエディタでコーディング可能
・ Windows上で完全なデバッグが可能
・ iOS / Android / ウェブのアプリを同一コードから生成可能
etc...

48. 変換「hsp3dish」
【便利なツール「hsp3dish helper」】
・ SDKパスやプロジェクトの設定をGUIで行える

49. 変換「hsp3dish」
【hsp3dishのデメリット】
・ Windows上のHSPと比べ、環境構築が面倒

50. 変換「hsp3dish」
【環境構築 - Android】
・ Android SDK
・ Android NDK
・ Apache Ant
・ Android搭載端末 (実機テストするなら)

51. 変換「hsp3dish」
【環境構築 - iOS】
・ macOSを搭載したパソコン (=Mac)
・ XCode
・ iOSのデベロッパー登録
・ iOS搭載端末

52. 変換「hsp3dish」
【環境構築 - HTML5】
・ モダンなウェブブラウザ
・ ローカルで動作するウェブサーバー
(どちらも無料で入手可能)

53. 制作例
・ はじめての写真管理2
ActiveXのIEコンポーネントを使用
Bootstrap 3を使用して (UIが) 圧倒的成長
・ ReFlex-β (開発中)
HTML+CSS学習ツール

54. まとめ
【こんな人におすすめ】
・ ちょっとコードを書きたい
・ 「欲しい！」と思った物を楽に制作したい
・ 統合開発環境が重い。拳で抵抗したい
etc...

55. Arakawa Templateで作る
こだわりウェブサイト
荒川 奏良 (Sora Arakawa / 荒テック)
プログラミング生放送勉強会 @ 名古屋
2017.11.23

56. Arakawa Templateとは...

57. Arakawa Templateとは...
・ 自作
・ ウェブページを楽に制作するための汎用的な
CSSテンプレート
・ 劣化版Bootstrap
・ MIT Licenseで公開中。
(GitHub : arkwnet/ArakawaTemplate)

58. Arakawa Templateとは...
・ 全コードをPure CSSで書いています
・ Sassなどのモダンなシステムは使っていません
↓
自力で容易に拡張可能

59. 開発の経緯
・ ウェブサイトって、何かと共通化できる部分がある
・ そういう部分に限ってコーディングが面倒
・ だったらテンプレート作れば良くね？
・ ついでにMIT Licenseで公開すれば良くね？
・ 何でも良いからGitHub使いたい

60. 開発の経緯
・ 要するに、元々は自分専用のシステム
・ ドキュメントはありません (2017年11月23日現在)
・ 先述した通り、Pure CSSです。圧縮もしていません。
容易に解読できます。

61. セッションの目的
・ Arakawa Templateを使ったウェブサイト制作の方法を、
ライブコーディングやサンプルを交えて紹介します。

62. まず初めに...
・ テキストエディタを起動し、HTMLコードを書きます
・ ArakawaTemplate.css のロードを忘れずに！
・ 推奨文字コードはUTF-8です
・ おすすめのテキストエディタ：Notepad++
( VSCodeユーザー引退しました )

63. まとめ
【こんな人におすすめ】
・ 毎回CSSを書くのが面倒
・ Bootstrapのデザインが気に入らない
・ とにかくウェブサイト制作を楽にしたい