[Work/Class/Java with Processing/git]

GitHub Educationへの登録とGitHub Desktopのインストール

GitHubの登録

Gitとは,プログラムの「ソースコード」を管理するシステム(バージョン管理システム)の一種であり,広く使われている.GitHubはGitをホスティングするウェブサービスである.

GitHubを使用することで,クラウド上に自分の作成したプログラムを置いておくことができ,間違ってプログラムを消してしまった場合の復帰や,修正の巻き戻し(リワインド)が容易に可能になる.

通常GitHubは誰でも自分の作成したプログラムを見ることができる「公開(public)」を基本としているが,教育用途のGitHub Educationに無料登録することで,「非公開(private)」を無制限に利用できる.学内の授業やプロジェクトは非公開で行う必要があるため,GitHub Educationに登録する.

ポイントは,メインとして登録するメールアドレスを,卒業後使えなくなるメールアドレスではなく,Gmailなど継続して使えるメールアドレスにしておくこと.学校のメールアドレスを卒業で失った途端GitHub自体も使えなくなってしまうので,それを防止するため.(GitHub Education自体は2年刻みで認証を行う必要がある.)

Webブラウザから,GitHub Educationへ接続.

GitHubへの登録

「まずGitHubへ登録しよう」と言われるので,「Create an Account」

GitHubへの登録

ユーザネームとメールアドレスを入れる.

将来的に就職活動に使うことも考えて,ちゃんとしたユーザネームにすること.

メールアドレスは「学校のメールアドレス以外」を登録する.(gmailやicloudなど)

GitHubへの登録

パスワードを入れて,下にスクロールして,「Create an Account」

GitHubへの登録

Freeプランを選択.

GitHubへの登録

下にスクロールして「Continue」

GitHubへの登録

登録したメールアドレスに登録メールが来ているので,「Verify email address」(メールアドレスを認証する).

GitHubへの登録

メールアドレスが認証された.

GitHubへの登録

右上のセッテイングのところから「Your Profile」

GitHubへの登録

「Edit Profile」

GitHubへの登録

「Email」タブを選択し,「学校のメールアドレス」を「Add」する.

最初のメールアドレス同じように「認証しろ」というメールが学校のメールアドレスにくるので,Verifyしておく.

GitHubへの登録

もう一度GitHub Educationに行き,「Join GitHub Education」

GitHubへの登録

「Student」「Individual Account」を選択し,「Next」

GitHubへの登録

きちんとした名前を入力し,「学校のメールアドレス」を選択する.(学校のメールアドレスを持っていることが在学の証明になる)

GitHubへの登録

学校の名前(首都大学東京の英語名はTokyo Metropolitan Universityである),卒業年度を入力し,「Submit Request」

GitHub Educationとして承認されるとメールが来るはず.そうしたら無料で非公開レポジトリを作ることができるようになる.

GitHub Desktopのインストール

gitは通常コマンドラインからコマンドを打ち込んで利用するのだが,GUIで使うことができるアプリケーションが提供されており,GitHub DesktopはGitHub純正のGUIアプリケーションである.

GitHub Desktopのページからダウンロードしてインストールしておくこと.

GitHub Desktopの設定

初回起動した画面.「Sign into GitHub.com」

GitHub Desktopの設定

GitHubで登録したメインのメールアドレス,もしくはユーザネーム,パスワードを入力して,「Sign In」

GitHub Desktopの設定

GitHub(というかgit)でプログラムを更新した時に表示される名前と連絡先を入力.ちゃんとした名前にしないとあとで混乱する.

GitHub Desktopの設定

「Finish」

GitHub Desktopの設定

初回起動終了した画面.この状態にしておく.


[Work/Class/Java with Processing/git]

GitHub Desktopを使って,作成したプログラムをGitHubへの保存し,別のコンピュータでクローンする.

一人で編集する

この項目は「そのプログラムを触っているのが自分一人」という前提.

プログラムをGitHubへ保存・登録する

GitHubへ保存

まず保存する.

GitHubへ保存

ここでつけた名前が「Processingのプロジェクトの名前」かつ「Gitのレポジトリ」の名前となる.Processingはプログラムのメインソースコードの名前(この場合MyFirstProcessing.pde)とプロジェクトフォルダ(この場合MyFirstProcessingフォルダ)の名前が一致している必要がある.

GitHubへ保存

保存すると,このように「プロジェクトフォルダ」の中に,実際にプログラムが書かれた「ソースコードファイル」が入っている状態になる.

GitHubへ保存

自分のコンピュータに保存したProcessingのプロジェクトをGitHubへ登録する.

GitHub Desktopで「Create New Repository」

レポジトリとは「プロジェクトフォルダを管理するためのデータベース」であり,基本的には「プロジェクトフォルダと同一」と考えると良い.

GitHubへ保存

Gitで扱うために「Local Path」(このコンピュータの中でプロジェクトフォルダが存在する場所)を「Choose Folder」で選ぶ.

GitHubへ保存

プロジェクトフォルダではなく「そのプロジェクトフォルダを含んでいるフォルダ」(ここではプロジェクトフォルダがMyFirstProcessingなので,それを含んでいるフォルダは2018Winterとなる)を選ぶこと.

GitHubへ保存

「Name」の欄に「プロジェクトフォルダの名前」を入れる.「Initialize this repository with a README」(README.mdファイルを生成してgitデータベースを初期化する)にチェックを入れる.

GitHubへ保存

「Local Path」の指定と,「Name」指定が間違っていなければ,プロジェクトフォルダの中にREADME.mdが登場する.macOSやWindowsの標準設定では見えてはいないがGitで管理するデータベース「.gitattributes」も,この時に作られる.

GitHubへ保存

この状態で「このコンピュータの中」では,昔の状態に戻したりなどができるようになるが,念のため「GitHubのサーバ(クラウドみたいなもん)」に保存する.「Publish repository」.

GitHubへ保存

「Name」はプロジェクトフォルダ名(前述したようにこれはProcessingの縛り).

「Keep this code private」に必ずチェックを入れること.このチェックを入れないと自分の書きかけプログラムが全世界に向けて公開されてしまう.

GitHubへ保存

ちょっと待つと,GitHubサーバにレポジトリが保存される.

GitHubへ保存

GitHubの自分のページにWebブラウザでアクセスしてみると,鍵マーク付きで,今保存したプロジェクトがレポジトリとして保存されている.

GitHubへ保存

中を見るとちゃんとソースコードとREADMEが入っていて,

GitHubへ保存

ちゃんと書いたソースコードがGitHubのサーバ上に保存されている.

プログラムを変更して,GitHubに保存する

プログラムを変更したら,それをGitHubに保存する.

GitHubへ保存

まずプログラムを変更して保存する.今回は色を変えて四角を描画する部分を足してみた.この状態でセーブ(保存)すると,

GitHubへ保存

GitHub Desktopに「どこを変更したのか」が表示される.行頭に「-」が付いている赤の行が削除され,行頭に「+」が付いている緑の行が追加されている.(ここはちょっとバカだったらしくellipseが削除されて同じものが追加されたことになっている.まぁ結果は同じ.)

GitHubへ保存

「Summary」の欄に「どういう変更したか」を記述して,「Commit to master」で「このコンピュータの中のGitデータベースに変更を登録する」(masterの意味は,複数人数で編集したり,大きな変更を加えようとした時にわかる)

GitHubへ保存

このコンピュータの中のGitデータベースの変更をサーバ上(origin)に反映させるために「Push origin」(1箇所変更があるので,サーバに反映してくださいね,と促されている)

GitHubへ保存

サーバ上へ保存完了.

GitHubへ保存

GitHubのページにWebブラウザでアクセスすると,ちゃんとソースコードが更新されている.

あとは同様に「プログラムを書き換えたら,保存して,GitHub Desktopで変更状態を確認してCommitし,Push originでGitHubへその変更を保存する」という流れを繰り返せば良い.

必ず「Commit」→「Push」をこまめに行うこと.データが失われてからでは遅い.

別のコンピュータにGitHubに保存してあるプログラムを持ってくる

GitHub上に保存されているプログラムのプロジェクト(レポジトリ)を自分のコンピュータに持ってくる作業をcloneという.

GitHubからクローンする

GitHubのWebページのレポジトリを表示して「Clone or download」をクリック.

GitHubからクローンする

すると,そのレポジトリのURL(インターネット上の住所)が表示されるので,その右のアイコンで「コピー」

GitHubからクローンする

「Clone a Repository」.方法は2つある.

GitHubからクローンする

1つ目は,「GitHub.com」タブを選択すると,自分のGitHubに保存されているレポジトリ一覧がでるので,選択して,保存したい場所を「Local Path」で選び,「Clone」

GitHubからクローンする

2つ目は,「URL」タブに,先ほどコピーしたレポジトリのURLを貼り付けて,同様に「Local Path」で保存したい場所を選び,「Clone」

GitHubからクローンする

GitHub上に保存しておいたものが,今作業しているコンピュータに落ちてきた.

ここからプログラムを変更したら,先ほどと同様に「プログラムを保存して,変更をGitHub Desktopで確認してCommit→Push Origin」をすれば,GitHubに保存される.

ちなみに一度クローンしてしてGitHub Desktopにそのプロジェクトが登録されていたら,その後は「Fetch origin」もしくは「Pull origin」(GitHubのレポジトリに変更があった場合「Fetch origin」の場所に「Pull origin」と表示される)のみで同期される.「Pull Origin」と「Fetch Origin」は「GitHubサーバ上の変更を,現在作業中のコンピュータに落としてくる」ぐらいの意味で捉えておくと良い.

(正確にはPullは,GitHubのレポジトリの変更内容を取得して,現在自分が変更中の内容と統合する,の意味)

GitHubからクローンする

FinderやExploerで確認して,gitのデータベース「.gitattributes」や「README.md」が入っているプロジェクトフォルダがそのコンピュータの中にあるのに,GitHub Desktopに表示されない場合は,GitHub Desktopの「File」メニューから「Add a Local Repository」で,そのプロジェクトフォルダを追加してやれば良い.

南大沢のPC教室の場合は,別のコンピュータを使ったり,コンピュータ自体を再起動するとGitHub Desktopの設定が全部飛ぶので,授業の始まりの時に「Add a Local Repository」をして既存のプロジェクトフォルダをGitHub Desktopに追加し,「Pull origin」をする必要がある.

(もしくは授業ごとに全部消して,授業の始まりにcloneするとか)


[Work/Class/Java with Processing]

アート系学生のためのJAVA with Processing

この授業の目的

アート系の学生向けプログラミング環境としてProcessingは非常に優れているが,そのままでは配列操作などのプログラミングの基礎やオブジェクト指向について学ぶことは難しい.そこでProcessingの基礎,Processingでのオブジェクト指向の取り扱いを学んだ上で,C++等オブジェクト指向言語全般に応用することを目的としてJavaの標準ライブラリ(主にGUI部品,コレクション,イテレータ等)を扱う.

Processingの容易に作品を作ることが出来る特徴は残しつつ,本格的なプログラミングスキルの習得を目指す.

コンテンツ

  1. 授業の下準備: GitHub, GitHub Educationへの登録とGitHub Desktopのインストール
  2. その1 Javaのコンパイルと実行,Processing IDEが行っていること
  3. その2-1 Processingの基礎
  4. GitHub Desktopを使って,作成したプログラムをGitHubへの保存し,別のコンピュータでクローンする.
  5. その2-2 Processingの制御構造
  6. その2-3 Processingのアニメーション
  7. その2-4 Processingのマウスイベント
  8. その2-5 Processingの配列
  9. その2-6 Processingの関数
  10. その2-7 Processingでの画像ファイルの描画
  11. その3-1 Processingのクラスの基礎
  12. その3-2 Processingのクラスの継承
  13. その3-3 AbstractクラスとInterface
  14. その3-4 インナークラスと外部クラスの違い,その活用
  15. その4-1 Swing GUIライブラリの基礎
  16. その4-2 ProcessingでJButtonを使うためのActionListener
  17. その4-3 ActionCommandで複数のボタンを作りイベントを制御する
  18. その4-4 JavaのStringクラスを使って文字列処理
  19. その4-5 別のウィンドウを作ってコントローラを分離する
  20. その4-6 Processingのウィンドウをもう一つ作り,そちらをメイン表示にする.
  21. その5-1 Model-View-Controllerの設計の基礎 : M-V-C全てを分離するパターンと,モデルのみを分離するパターン
  22. その5-2 ネットワーク上のModel-View-Controller : WebSocketプロトコルの使用
  23. その6-1 オーバーロードとGenerics
  24. その6-2 Java標準オブジェクト指向ライブラリ : Collection編
  25. その6-3 Java標準オブジェクト指向ライブラリ : Iterator編
  26. その7-1 今時のJava : ActionListenerのインスタンスをlambdaでたくさん作る

[Work/Class/ES2015で動的Webアプリ/es2015_basic]

ES2015の基本 - PromiseとXMLHttpRequestを使ったAjaxとfetch / 2018-07-13 (金)

XMLHttpRequestクラスとそのインスタンス

簡単に言えば,インタラクティブに他のページや画像などを持ってきて,今のページに表示させるためのクラスである.

Promiseクラスのオブジェクトを生成するように設計してやると,「読み込み終わって,結果が正しい時に,次のコードを実行する」という処理ができる.

Cross-Originポリシーの関係で,XMLHttpRequestクラスのインスタンスは,そのJavaScriptファイルが置いてあるドメインからしかAjaxできない.(正確には色々やればできるが面倒臭い)

コード例

htmlを取得して,その結果をテキストとしてdivに表示する.

実行ページ

Cross-Originポリシーの関係で,XMLHttpRequestクラスのオブジェクトは,そのJavaScriptファイルが置いてあるドメインからしかAjaxできない.(できるが面倒臭い)

<!DOCTYPE html>
<!-- PromiseAjaxWithClass.html -->
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8">
    <title>Promiseを使ってAjax</title>
    
    <script type="text/javascript" src="./PromiseAjaxWithClass.js">
    </script>
  </head>
  <body>
    <p>取得したいHTMLのURLを記入</p>
    <form>
      <input type="text" name="target_url" value="http://cad.lolipop.jp/" />
      <input type="button" name="send_button" value="取得" onclick="getHtml(this.form.elements['target_url'].value)" />
    </form>
    <div id="display_iframe">
      ここに取得してきたものが表示されます.
    </div>
  </body>
</html>
// PromiseAjaxWithClass.js
'use strict';
class MyAjax{
    constructor(targetUrl){
	this.targetUrl = targetUrl;
	this.gottenHtmlPage = '';
    }

    setTargetUrl(targetUrl){
	this.targetUrl = targetUrl;
    }

    setDisplayingDivId(divId){
	this.divId = divId;
    }

    // AjaxによるHTMLページの取得を実行する関数 Promiseを返す
    startHttpRequest(){
	return new Promise((resolve, reject) => {
	    let xmlHttpRequest = new XMLHttpRequest();
	    //open(HTTPメソッド, URL, 非同期モードかどうか, ユーザ名, パスワード)
	    xmlHttpRequest.open('GET', this.targetUrl, true);
	    xmlHttpRequest.onload = () => {
		if(xmlHttpRequest.status >= 200 && 
		   xmlHttpRequest.status < 300){
		    resolve(xmlHttpRequest.responseText);
		}
		else{
		    reject(xmlHttpRequest.status);
		}
	    };
	    xmlHttpRequest.onerror = () => {
		reject(xmlHttpRequest.status);
	    };
	    //設定が終わった後にsend(null)を実行すると取得が始まる.
	    xmlHttpRequest.send(null);
	});
    }

    // AjaxによるHTMLページの取得が完了した時に呼び出すコールバック関数
    whenFinishSuceed(result){
	document.getElementById('display_iframe').innerText = result;
    }

    whenFinishFailed(err){
	document.getElementById('display_iframe').innerHTML = 
	    '<p>' + 'Faild to get WebPage. Error code is: ' + err + '</p>';
    }
}

window.getHtml = (targetUrl) => {
    window.myAjax.setTargetUrl(targetUrl);
    window.myAjax.startHttpRequest()
	.then(window.myAjax.whenFinishSuceed)
	.catch(window.myAjax.whenFinishFailed);
};

window.addEventListener('load', () => {
    window.myAjax = new MyAjax('http://cad.lolipop.jp/');
    window.myAjax.setDisplayingDivId('display_iframe');
    window.myAjax.startHttpRequest()
	.then(window.myAjax.whenFinishSuceed)
	.catch(window.myAjax.whenFinishFailed);
});

fetch API

とまぁ,自分で実装すると面倒臭いことこの上ないのだが,Promiseのインスタンス(オブジェクト)を返す全く同じ機能がfetch関数として既に標準ライブラリとして実装されており,Chromeでは問題なくXMLHttpRequestクラスの代わりとして使用できる.

おまけに,Cross-Originポリシーも(サーバが対応していれば)一行設定を書いてやるだけで無視することができる.

コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Fetch API Test</title>
    <script type="text/javascript">
      window.addEventListener('load',  () => {
	  fetch('http://cad.lolipop.jp/', { // 取得するデータのURL
	      method: 'GET',
	      mode: 'cors', //Cross-Originポリシーを無視する
	      credentials: 'same-origin' // 認証がある時はこのオプションを指定
	  }).then((response) => {
	      return response.text()
	  }).then((text) => {
	      document.getElementById('for_display').innerText = text;
	  }).catch((error) => {
	      console.log(error);
	  });
      });
    </script>
  </head>
  <body>
    <div id="for_display">
    </div>
  </body>
</html>

[Work/Class/サウンドトラック制作基礎/setup]

FL Studioのダウンロードとインストール(Mac用)

FL Studioのダウンロード

http://www.image-line.com/downloads/flstudiodownload.htmlへ行く.

ダウンロード画面

Mac版をダウンロード.

FL Studioのインストール

ダウンロードされたインストーラのディスクイメージ

ダウンロードされたディスクイメージ.

ディスクイメージをダブルクリックしてマウントするとインストーラが出る.

ディスクイメージをダブルクリックしてマウントするとインストーラが出る.

インストーラをダブルクリックしてインストール開始

インストーラをダブルクリックしてインストール開始.

確認 確認 ユーザ認証

普通に管理者ユーザ認証.

インストール中 インストール完了

インストール完了

インストーラの削除確認

インストーラの削除確認.どちらでも.

インストールされている

アプリケーションを見るとインストールされている.

起動

起動.

以下は以前のベータ版のインストール方法.

FL Studio Mac用Beta版

Macにはまだ正式版がないので,Macで作業したい人はBeta版を用いる.(ユーザ登録などの細かいことについては,自分で行うこと.

http://www.image-line.com/downloads/flstudiodownload.htmlへ行く.

ダウンロードページからBeta版を選択

ダウンロードページからBeta版を選択.

フォーラムへ行く

フォーラムへ行く.(あらかじめユーザ登録は済ませておくこと)

フォーラムの中からトピックを選択

フォーラムの中から,Beta版のトピックを選択.

インストーラをダウンロード

インストーラをダウンロード.

ダウンロードしたインストーラのイメージをダブルクリックするとインストーラパッケージが出てくる

ダウンロードしたイメージ(.img)をダブルクリックしてマウントすると,インストーラパッケージ(.pkg)が出てくるので,これを実行.

インストーラが起動

インストーラが起動するので「続ける」.

インストーラでインストール

「インストール」

インストール中

インストール中

インストール完了

インストールが完了したら「閉じる」.

インストール完了

インストールが完了したら「閉じる」.

インストールされている

/Applicationsの中に「FL Studio Mac Beta」が入っているので,起動.

起動成功

起動成功.