ゲームエンジンとは

 

ゲームエンジンの種類

Unity

UE4 (Unreal Engine)
Havok

 

物理エンジン

 

Unity を使用したタイトル

 

UE4 を使用したタイトル

Over Hit

 

プログラミング入門者の方へ、言語を問わない基本の考え方
http://proengineer.internous.co.jp/content/columnfeature/6214

ロジックとは

処理の内容や手順。動作する論理・理屈。
「プログラムロジック」とも。
※データベースからデータを取ってきて表示するという、単純かつ繰り返し行われる処理のことを特に「ビジネスロジック」と呼ぶ。

 

アルゴリズムとは

 

デザインパターン

まずは日本語で論理を組み立てる

プログラム言語によるコードの記述に取りかかる前に、まずは「日本語」で動作する理屈を組み立てられるようになりましょう。

理屈や論理というと抽象的ですが、要するに処理の内容や手順を、日本語で考えるということです。
この、処理の内容や手順のことを「プログラムロジック」あるいは単に「ロジック」といいます。

 

例えば「ご飯を食べる」という処理をやりたい場合

1.お箸をもって
2.お茶碗をもって
3.ご飯をすくって
4.ご飯を乗せたお箸を口に突っ込む

という具合です。

例えば「サッカーのシュート」なら、
1. ボールの前に立ち
2. ゴールの方を向いて
3. ボールを蹴る

という処理が考えられます。

 

このように、日本語で適切な「ロジック」を考えることができれば、あとはをプログラム言語に置き換えてやれば、正しく動作するプログラムコードになる、というわけです。

 

 

チェックボックス

次に示す画面は、WordPressの管理画面です。

チェックボックスはどのような動作をすべきでしょうか?
ロジックを日本語で、過不足なく記述してください。

 

厳密に考える

先程のサッカーのシュートの処理手順

1. ボールの前に立ち
2. ゴールの方を向いて
3. ボールを蹴る

は、伝える相手によって、正しく動作しないかもしれません。

一般的な大学生なら、正しく理解してくれるでしょうから、うまく伝わるでしょう。

もし相手がサッカーチームに所属した大学生やプロの選手なら、「シュートして」と伝えれば十分でしょう。

ですが、製造されたばかりのロボットは正しく動くでしょうか?

ここで問題になるのは、ロジックの粒度です。

香川真司が
ゴールの方を向いて
軸足をボールの横に置いて
利き足を後ろに振りかぶって
前方に大きく蹴り出し
精度を高めるために足の内側の麺をボールに当てて
振り抜く

Discordとは

ゲーマー向けのテクスティング・VoIPサービス。
https://discordapp.com/

 

採用理由

– クローズドなロビーを自由に作成できる
– ロビーごとに自由なニックネームを持てる
– 画面共有が可能

 

利用できる状態に

いくつかの方法があります。

– PCでダウンロード → インストール → 利用登録
– ブラウザで起動 → 利用登録
– スマホやタブレットでダウンロード → インストール → 利用登録

講師の推奨は、教室備え付けのデスクトップPCで、ブラウザで起動する形態です。

– メインのノートPCのメモリを食わない
– ウィンドウやタブを切り替えないでもすぐに見られる
– 大きく表示できる

 

https://discordapp.com/

 

サーバーに参加

この講義のDiscordサーバーへの招待リンク

サーバーとは「ルーム」「ロビー」のような概念です。

 

ニックネームの設定

授業でのやりとりを円滑にするため、ニックネームを本名にしてください。
ニックネームはサーバーごとにできるので、他のサーバーに知られることはありません。

 

画面左側のサーバー「MDJ」を選択していることを確認します

 

画面右側のユーザー一覧で、自分のアカウントを右クリックして、ニックネームを本名に変更してください。

 

画面共有

講師の側から、個別に「通話」を開始しますので、
「通話に参加する」を押してください。

講師側から、画面共有を開始されたら、画面が表示されます。
下向き矢印をクリックして、大きく表示してください。
※右下のボタンで、全画面表示してもよいです。

 

Table of Contents

– Electronとは
– Electronの事例
– 準備
– 実装とビルド
– 補遺

 

Electronとは

現在広く使われているエディタ「Atom」を開発するために生まれた、クロスプラットフォームデスクトップアプリケーションエンジンです。

※クロスプラットフォームとは、Windows・Mac・Linuxなど複数のプラットフォームに対応することです。
狭い意味では、同一のソースで複数のプラットフォーム向けにビルドすることを指します。

 

Electronの事例

Atom
VisualStudio Code
Slack
Discord
Wavebox

一覧はこちら → https://electronjs.org/apps

 

準備

前提として、ターミナルの使い方

 

node.jsをインストール

 

Electronをインストール

プロジェクトのためのフォルダを作成(仮に「testapp」とする)

フォルダのなかに移動

プロジェクトを作成・初期化

 

実装とビルド

index.html
main.js
package.json

 

実行(=ビルド=コンパイル) ※パッケージングなし

 

補遺

cd ~/Dropbox/electron/testapp/bin

// 実行(コンパイル)※パッケージングなし
electron ../src/

// 配布用にパッケージング
// testappというディレクトリに入っているソースコードをTestAppというアプリ名でWindowsとOS Xの64ビット向けに「1.1.3」のバージョンでパッケージングし、2回目以降は上書きを行う
// srcというディレクトリに入っているソースコードをTestAppというアプリ名でWindowsとOS Xの64ビット向けに「1.1.3」のバージョンでパッケージングし、2回目以降は上書きを行う
electron-packager ../src/ TestApp –platform=darwin,win32 –arch=x64 –version=1.1.3 –overwrite –icon=icon/icon.icns

UnixというOS

Mac OS (OSX)は、UnixベースのOSです。Appleによって作られました。
Linuxも、Unixを参考にして作られたオープンソースのOSです。

(参考:サーバーのOSには、LinuxのCentOSというディストリビューションがよく使用されます)

 

Macでターミナルを使う準備

MacOSのターミナルコマンドは、Linuxとだいたい同じです(どちらもUnixベース)。

 

ただし、MacOSには、Ubuntu(Debian系Linux)においてアプリケーションをインストール・更新・削除するための「apt」コマンドに該当するものが存在しません。
Macの場合は、Homebrewを別途インストールします。
Homerewを使用するには、Xcodeがインストールされていなければいけません。

 

Homebrew公式サイト
公式サイトに記載してあるURLをコマンドラインに貼り付けて実行する。

 

Windowsでターミナルを使う準備

Windowsのコマンドプロンプトおよびパワーシェルは、MS-DOS時代からの独自の実装で、Unix系と比べると非常に貧弱です。

 

WindowsでMacOSやLinuxと同等のターミナルを得るには、いくつかの方法があります。

(1) WindowsストアからUbuntuをインストールする
http://www.atmarkit.co.jp/ait/articles/1608/08/news039.html

 

(2) VM ware playerをインストールし、その上でLinuxなどのOSを実行する
あまりにも時間が掛かるのでこの授業ではサポートしません。

 

※他にも、MinGWやCygwin、WSLなどの選択肢もありますが、Windows10では選ぶ意義は少ないと思います。

 

GUI

ジーユーアイ。
グラフィカル・ユーザー・インターフェイス。

ポインティングデバイス(マウスなど)を使って操作する、CGを使って表現されたインターフェイス。

 

CUI

シーユーアイ。
キャラクター・ユーザー・インターフェース。

CUIベースのTwitterクライアント Rainbow Stream https://github.com/orakaro/rainbowstream
CUIベースのブラウザ browsh https://www.brow.sh/

 

ターミナルとは?

ターミナルとは、GUIの上で動く、CUIのようなもののことです。
アプリケーションとして提供され、実行することができます。
「端末」とも呼ばれることがあります。

 

ターミナルって何をどうするの?

「コマンド」を打ちます。
アプリケーションも、コマンドを叩くことで、ターミナルの上で動きます。

 

コマンドの例

pwd
現在のディレクトリを表示

ls
現在のディレクトリの、ファイルとディレクトリの一覧を表示

cd
階層を移動

mkdir
ディレクトリを作成

rm
ファイルやディレクトリを削除

mv
ファイルやディレクトリを移動

cp
ファイルやディレクトリをコピー

man
マニュアルを表示

 

アプリケーションの例

Ubuntu(Debian系Linux)の場合、aptコマンドでアプリをインストール

 

macの場合は、Homebrewを使います。Xcode必須。
Homebrew公式サイト
公式サイトに記載してあるURLをコマンドラインに貼り付けて実行する。
Homebrewインストール後、

 

現代において、ターミナルの意味は?

サーバー
サーバーには現在も、GUIはありません。
重たいだけで無意味だからです。
CUIですべて管理します(PleskやphpMyAdminのような、ブラウザを通じたリモート管理ツールもあります)。

 

クライアント
・ 大量の一括処理を行うことができる(シェルスクリプト)
・ UIのないアプリケーション(コマンドラインアプリケーション)を実行する
– OSの隠れた機能を実行する

– ffmpegで動画を一括処理
– PC上の一時ファイルを一括削除
– PC上のファイルを全文検索して、ヒットするものを一括削除
– wgetコマンドやcurlコマンドで、ネット上のデータを連番で一括ダウンロード
– Cordovaでハイブリッドアプリをビルドしたい
など

 
 

Have fun! (^ω^)

時事ネタ

本田圭佑がW杯後からHTMLやRubyを猛勉強中
すばらしい!

 

新フォント「ネイマール体」
https://www.thesun.co.uk/world-cup-2018/6762540/neymar-diving-antics-hilarious-alphabet-meme/amp/
転げ回るネイマールを茶化したものだが、元は「ネットでネタにされているネイマールの写真でアルファベットを作った人がいる」というシンプルな趣旨。
これを日本では「ネイマール体」と紹介したのでひとつ面白さのステージが上がっているように思われる。

 

奥華子の大阪イベントで大トラブル 当選者にメールが届いておらず誰も来ず
http://nlab.itmedia.co.jp/nl/articles/1807/16/news023.html

 

電車内のAirDropのイタズラで、日本でも逮捕者
https://internet.watch.impress.co.jp/docs/yajiuma/1133071.html
イングランドでは2015年にとっくに逮捕者が出ていた

 

DMM.R18(dmm.co.jp)が「FANZA」に
もともとDMMの本体はアダルト部門で、MAKEとかFXとかは最近のこと。
DMMは石川県の会社で、AV最大手「北都」と深い関係がある
昨年からのAV出演強要に関する刑事事件化
上場するにはアダルトビジネスが邪魔
アダルト部門をDMMの名称のままにして、新名称を本体にすべきだったのでは?との声が上がっている

 

気が向いたら話す

– 傷つくことを恐れず、恋愛しましょう
– ガス抜きせず、内圧を高めましょう
– 迷ったら険しい方の道を選びましょう
– 自分を曲げるぐらいなら、死んだほうがマシだ
– 鬱は芸術家の代紋ではない
– 今ここにいるのが自分であると錯覚してはいけない
– 自分にだけは言い訳できないから、ベストを尽くす

 

本題

Cordovaでハイブリッドアプリ

Electronでクロスプラットフォーム開発

 

Have fun ! (^ω^)

 

Table of Contents

– ハイブリッドアプリとは何か
– ハイブリッドアプリの事例
– PhoneGap/Cordovaの歴史
– 現在
– 方針
– Cordovaはコマンドラインアプリケーション
– Cordovaの準備
– Cordovaでのビルド

 

ハイブリッドアプリとは何か

HTML5、CSS、JavaScriptなどのWeb技術で開発しており、且つカメラやGPSなどのデバイスのネイティブ機能を利用しているアプリのこと。
ブラウザ上で動作するWebアプリとは異なり、Android OSやiOSに標準で組み込まれているWebView上で動作する。

 

HTML5 + CSS + JS というWebの標準技術を使って、スマホ用ウェブページのように作って、Cordova、PhoneGap、Monacaなどでビルドして、ストアに公開すれば配信完了です。

 

おすすめ開発環境とフレームワーク比較

ハイブリッドアプリ開発環境3選

ハイブリッドアプリを作るのに使いたいUIフレームワーク10選

Onsen UI ← Monaca なら
Ionic
AnglarJS
VueJS

 

ハイブリッドアプリの事例

「グランブルーファンタジー」がHTML5で作られていることは有名です。
参考)グランブルーファンタジー(グラブル)はどんな技術で動いているのか

 

PhoneGap/Cordovaの歴史

ニトビ・ソフトウエア社が「PhoneGap」を開発

Adobe Systemsがニトビ・ソフトウエア社を買収。

「PhoneGap」のソースコードをApacheソフトウェア財団に寄贈。

 

現在

「Apache Cordova」 オープンソース。コマンドベース。

「Adobe PhoneGap」 CordovaをAdobeが製品化している。

「Adobe PhoneGap Build」 PhoneGapをサービス化した、ビルドツール。1アプリまで無料。

「Monaca」 PhoneGapを使った国産サービス。

 

方針

この授業では、Apache Cordovaを使用します。
Cordovaを使用する理由は、CordovaがOSSだからです。
Cordovaは無料ですが、一番面倒くさい選択肢です。
他の選択肢では、アプリごとに費用がかかります。
 
皆さんには、スキルさえあれば無料でビルドできる選択肢を持っていてほしいと思います。
結果として「面倒くさい」「よくわからない」「お金を払ってもいい」と思う方は、MonacaやPhoneGapを使ってもらえれば問題ありません。

 

Cordovaはコマンドラインアプリケーション

Apache Cordovaには、残念ながらUIはありません。
つまり、OSの上でコマンドを打てなきゃ話になりません。
ターミナルの話

 

Cordovaの準備

Node.js
JDK
Android Studio
SDK
Cordova

開発環境の構築

 

Cordovaでのビルド

作業ディレクトリにいるものとする

①ビルドします。
cordova build –release
cordova build android –release

// ディレクトリ移動
cd ./platforms/android/app/build/outputs/apk/release/

②署名ファイル作成

鍵ファイル名を「.keystore」とした場合

keytool -genkey -v -keystore .keystore -alias test -keyalg RSA -keysize 2048 -validity 10000

ここでパスワード入力

// 署名を検証しておく
keytool -list -v -keystore .keystore

③APKファイルに署名

APKファイル名を「app-release-unsigned.apk」とした場合
エイリアス名を「AAA」とした場合

jarsigner -verbose -keystore .keystore ./app-release-unsigned.apk AAA -tsa http://timestamp.digicert.com -sigalg SHA1withRSA -digestalg SHA1

④APKファイルの最適化
最適化後のファイル名を「app-opt-release-unsigned.apk」とした場合

zipalign -v 4 app-release-unsigned.apk app-opt-release-unsigned.apk