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

書きました

[卒制のヒント] No Sign City

時事ネタ

新型MBP
MacBook Pro 2018年モデルが登場! 第8世代Intel Coreプロセッサ、最大32GB RAM、キーボードも静かに

 

ファーストサーバ

2018年
ファーストサーバのホスティングサービス「Zenlogic」で6月19日より障害、未だ復旧せず
7/6(金)の19時53分に、契約中の利用者に対して「全サービス停止」の案内メール。
20時00分に全サービス停止。
最長7/9(月)8時00分までのはずが、10:30まで停止していた。
停止していたファーストサーバの「Zenlogic」再開 4日ぶり

  • 週末金曜の、営業時間終了後に狙い撃っての緊急メンテナンスダウン。
  • しかも停止のわずか7分前のメール告知という急すぎる案内。
  • データを人質にとって、移管も解約もさせないつもりだと大きな非難が起こった。
  • 最長3日間という異常に長いダウン時間予告。
  • しかも実際の再開はそれを超過してしまった。
  • エレコムをはじめ多数の企業・官公庁に影響。
  • 週末なので通販サイトの売上に大きく影響したと予想される。
  • 問い合わせ受付は平日のみという対応。

2012年
レンタルサーバー「ファーストサーバ」で大規模な障害が発生
2012年6月20日17時30分頃、悪夢が始まった。
数日を経て、完全な復旧は不可能と判断された。結果、大規模なデータ消失と、その復元データの漏えいという日本のIT史に残る未曾有の惨事となった。
ファーストサーバ、大規模障害の最終報告書を受領・公開

ファーストサーバ障害、深刻化する大規模「データ消失」
前代未聞のデータ消失事故の真実を追う あのとき、ファーストサーバになにが起こったか?

 

サーバー稼働率99.9%は高い数字なの?

 

著作権とさまざまな「ライセンス」について

前回WordPressについて実習を行いました。

WordPressのテーマ改変(テーマのカスタマイズ)は、おそらくみなさんが初めて経験する、オープンソース・ソフトウェア(OSS)のライセンスに基づく制作・開発行為でしょう。
オープンソース活動の第一歩とも言えます。

オープンソースとは

オープンソースとは? – ferret ものすごく簡単に説明

「オープンソースとは何なのか?」をレゴでわかりやすく説明したムービー – Gigazine

オープンソースソフトウェア : Wikipedia

オープンソース : Wikipedia ちょっと難しいのでわからないと思う

オープンソース活動

OSS活動にコミットしてエンジニアとしての世界を広げよう

意外ととっつきやすいOSS開発参加方法まとめ

さまざまなライセンス

まず、概念を整理しましょう
・著作権 = コピーライト / コピーレフト → GPL
・オープンソース / OSS(オープンソースソフトウェア)
・「フリー」 / フリーソフト / フリーミアム

さまざまなライセンス:著作権と「フリー」「オープン」

 

WordPress補遺

前回までで、WordPressの基本〜テーマカスタマイズ方針までを実習してきました。
さらにここでは、実践的な内容をハンズオンで紹介していきたいと思います。

まず、ご紹介しそこねたデータから。

実習

 

404とかRFCとか

HTTPステータスコード

HTTPステータスコードのRFC
HTTPステータス・コードとメソッド

RFCの一覧
Request for Comments

例えば、メールアドレスの形式はRFC 5321とRFC 5322で定められている
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9

ドコモがメールアドレスの仕様を変更 RFC準拠に (2009)
RFC違反の携帯メールアドレスはすぐに変更すべき

 

コンセプト

看板のない世界 / No Sign City / Ad Block City

参考 1

マツコの知らない世界「巨大看板の世界」(2017年8月29日・TBS)から

参考 2

造形大グラフィックデザインの高田准教授のツイートから


アプローチ

  • 写真をPhotoshopで加工する
    大きさが重要
    自分で撮った写真でなくてもよいと思う
    →東京都などのオフィシャルな写真をイジる
  • 3Dで表現
    人間視点で定位置からゆっくり回転して周囲を眺めるようなプログラム
    自動回転、またはコントローラ操作
    ある程度広域に作りこんで、オープンワールド風にしてみる

 

渋谷の写真

 

オープンワールド的な東京の風景の例

 

架空の都市のイメージ

 

バリエーション

巨大化した猫が、街で自由気ままに過ごす様子
もし街から○○がなくなったら?
もし街が○○だらけなら?

意義(後付でよい)

教科書的な説明
– メディアのあり方を問う
– 現代の生活のあり方、社会を問う
– 不可視のもの、考えの及びにくい事柄を見える化する、ビジュアルでプレゼンテーションする
– デザインで問題を解決する思考実験
– 美術と工学(デザインとテクノロジー)が交わる地点、新しい地平

定額制サービスを利用する

書籍の紹介をする前に、Kindle Unlimitedを紹介しておきます。

Amazon Kindle、特にKindle Unlimitedによるスタディのススメ

社会人になると、お金は増えますが時間がなくなります。
逆に学生であるみなさんは、自由になる時間はまだたくさんありますが、お金はあまりないでしょう。

そんなみなさんに、電子書籍の月額読み放題サービスはぴったりです。
ウェブや情報システムに関する技術書もたくさんあります。

 

もちろん、定額制サービスは書籍だけではありませんので、毎日のインプット作業をかしこくコストカットしましょう。

雑誌
– dマガジン
– 楽天BOOKS

音楽
– Spotify
– Apple Music
– AWA
– LINE Music
– Napster

ビデオオンデマンド
– Hulu
– Netflix
– Amazon Prime Video
– dTV
– バンダイチャンネル
– テレビ東京ビジネスオンデマンド
– DAZN
– J SPORTS
– DMM

ゲーム
(参考) https://www.gamespark.jp/article/2018/05/28/81101.html
– Utomiq (PC)
– Origin Access (PC)
– EA access (Xbox One)
– PlayStation Now (PlayStation4)
– Viveport
– GeForce Now
– Jump

クラウドストレージ → GoogleDrive / OneDrive / Dropbox など
レンタルサーバー → さくらインターネット など

 

プログラミングとは何か?

まず「ソフトウェア開発の名著を読む」(第一版・2006、第二版・2009)で紹介されている8冊をリストアップしました。

 


プログラミングの心理学
時の試練に耐えた名著。人間系。
コンサルタントであり心理学者・人類学者でもあるワインバーグの著作はすべてソフトウェア開発の名著とされている。

 

人月の神話
時の試練に耐えた名著。人間系。
「ブルックスの法則」で知られる著者のエッセイ集。
-第2章 人月の神話
-第16章 銀の弾などない
-第19章 『人月の神話』から20年を経て

 

ピープルウエア
-時の試練に耐えた名著。人間系。
いかにチームを形成し、モチベーションを維持し、顧客満足をえるか?
開発プロジェクトで最も大切なのは技術よりも「人間」だ、という事を、一人一人の人格の尊重、頭を使う人間にふさわしいオフィス、人材の選び方・育て方、結束したチームがもたらす大きな効果、楽しく仕事をやろうといった点から述べる。

 

デッドライン
-小説風。人間系。

 

ソフトウェア職人気質
-態度、基本スタンス
工学としてではなく職人気質として原点回帰せよ

 

達人プログラマー
-態度、基本スタンス
-割れ窓理論、DRY原則
実践的な理論を網羅

 

コードコンプリート
-読みやすいコートの大切さ
プログラミングでの命名規則、保守しやすいコードの書き方、コンストラクションの教科書・ガイドライン・百科事典。

 

プログラミング作法
-読みやすいコードの大切さ
コーディングスタイル、インタフェース、テスト手法の「スジ」が説明されている。
C、C++ベースだが、言語にかかわらず役立つ内容。

 

ハッカー


ハッカーと画家 コンピュータ時代の創造者たち

 

それがぼくには楽しかったから 全世界を巻き込んだリナックス革命の真実
Linuxを作った、リーナス・トーバルズの伝記。
技術がわからない人にも読みやすく、ハッカー文化を外側から理解できる。

 

解析魔法少女美咲ちゃん マジカル・オープン!
クラッキングの手口・原理を知ることができる実践的な入門書。
題名や表紙とは裏腹に、内容は硬派そのもの。
実行ファイルのデバッガ解析やアセンブラ操作など。
 

オブジェクト指向

オブジェクト指向でなぜつくるのか

 

Java言語で学ぶリファクタリング入門

 

ゲーム開発

CocosCreatorではじめるゲーム制作

 

ゲーム開発のための数学・物理学入門

 

ゲームプログラマになる前に覚えておきたい技術

 

デザイン

B_x0ukgU0AA6nhFfontbook2

和文書体21社・1768種を実際の商用利用例とともに紹介した珍しい本が先日出ました。
持っておくといいと勉強になると思います!

ろごたいぷっ! マンガ・アニメ・ラノベのロゴを徹底研究する本
こちらも、2015年に出版されたフォント本。
フォント愛好家向けに同人誌として出版されていたもののまとめです。

 

資料系

この手の資料になりそうな本は、必要になってから買うものでもありますし、あるいはブックオフなんかで安いものを見つけて取り揃えておくのもいいですね。
ネットでは自分から検索しないと出てきませんが、自宅や本屋の本棚は、本の側からヒントを与えてくれるものです。


世界のサッカーエンブレム完全解読ブック

 

アイデア

 

インターネット

中の人 ネット界のトップスター26人の素顔
大人気個人サイトの、運営者インタビュー。
2007-2011年の連載当時の時点での人気サイトなので、2000年代初期~中盤の状況を活写した印象。要するに少し古いのだが、ソーシャルメディア以前・キュレーションメディア以前・オウンドメディア以前・はちま以前・JIN以前のインターネットの状況を感じ取れるかもしれない。

 


セックスメディア30年史欲望の革命児たち
荻上チキのいい仕事。出会い系の誕生からアダルトサイトまで。
出会い系大手ワクワクの社長インタビューに成功するなど、画期的な内容。
身近だけれど遠い社会の一面。世の中キレイゴトだけではないことを早く知るといいです。

 


サイバースペースはなぜそう呼ばれるか+
2000年前後、東浩紀の初期論考集。
情報社会を読み解くために現代思想の枠組みを援用しているので、逆に現代の学生諸氏には、インターネットを通じて20世紀から脈々と続く思想の世界・固有名詞に触れるガイドになるかもしれない。

 

マークアップ


HTML5&CSS3辞典 第2版
定番シリーズ。15年前、入江も森岡教授に読まされました(・ω・)
HTML/CSSにちょっとまだ自信がないと思う人は、騙されたと思って買っておきましょう。


JavaScriptリファレンス 第6版
オライリー(O’Reilly)の書籍は、プロ御用達です。初心者向けではありません。jQueryの本でもありません。「JavaScriptを使いこなしたい」と思うようになったら。


ハルロック(1)
プログラミング・電子工作・MAKEで、好きが高じて起業していく女の子の物語。
私見ですが、この漫画の主人公・ハルちゃんのような人物を育成することが造形大メディアデザインのひとつの理想のように思います。

ところで、jQueryの本は?
jQueryについての本はたくさん出ています。
講師・入江は、jQueryはすべてネットで調べてきたのでどれが良いとは言えませんが、おそらくどの本を買ってもみなさんの役に立つと思います。
自分が知りたいのは、基礎からなのか、さらに使いこなしたいのか、プラグインを知りたいのか、実践的なテクニックが知りたいのか?
30分ほど時間を作って、なるべく大きな本屋の本棚の前で自分に合うものを探してみて下さい。