[Work/Class/Python3の基礎とデータ処理]

Python3の基礎とデータ処理

概要

近年PythonがそれまでのMATLABやR言語に代わって,データ処理に使われることが多くなった.また海外では教育用言語として90年代末から普及が始まり,現在様々なフレームワークが開発されているWebサーバ側をはじめとしたサーバ用途と,通常のデスクトップのスクリプト処理用途,両用のLL(Lightweight Language)として使われている.

Pythonの特徴として「Python本体はスクリプト言語だが,ライブラリをC言語で実装しPythonにAPIを用意することで,高速に実行可能」という点がある.近年ではデータ解析や機械学習などで頻繁にPythonが使われているが,これはこの「Cで書かれた高速ライブラリをPythonで実行」というスタイルに依るものである.

現在のPythonは大きく分けてVer.2.x系とVer.3系の2つが使われているが,本授業ではPython3を対象とする.(OSX標準のPythonは2.7なので,授業の下準備としてAnacondaをインストールしておくこと)

コンテンツ

  1. Pythonの基本と配列(list)の取り扱い
  2. 関数とクラスの定義
  3. 文字列の取り扱い
  4. lambda式,高階関数,内包表記
  5. HTMLParserクラスによるWebページの取得と分析
  6. Numpyと配列(array)とmatplotlib
  7. CSVの取得とPlot
  8. CSVデータからの単純線形回帰分析
  9. CSVデータからの重回帰分析

授業の下準備

Windows

Anacondaを使う場合

Anacondaは現在標準となっているPythonのデータアナリシスディストリビューションである.こちらを使うのが一番楽.

Anacondaダウンロードページから,「64-Bit Graphical Installer」をダウンロードする.

インストール画面1

「Next」

インストール画面2

「I Agree」

インストール画面3

「All Users」の方が実は楽.管理者パスワードがわからないときには「Just Me」

インストール画面4

インストール場所に半角スペースなどが含まれているとエラーになるので,そのまま.もしくはCドライブ直下にするなど.

インストール画面5

上の方(システムパスに追加)は,システム的に混乱する可能性があるので外して置いた方がいい.

逆に下はVisual Studio等のWindowsコンパイラのみに設定を与えるもので,GPUの利用などを考えているなら,チェックを入れておく.(基本的にチェックを入れて置いて大丈夫)

インストール画面6

インストールが進む.

インストール画面7

終わったら「Next」

インストール画面8

Visual Studio Codeというエディタを追加インストールするか訊かれる.Visual Studio Communityが既に入っていたり,VS Codeを使わないなら「Skip」

インストール画面9

「Finish」

WindowsでMSYSを使う場合

CやC++のツールと連携させたい場合のみ(VSのコンパイラが必要なCUDA系は除く),Cコンパイラとセットになるこちらを使う.MSYSを使ってインストールしたPythonは文字コードがWindowsのもの縛りになるので注意.データ分析ならAnacondaの方が使い勝手は良い.

まっさらな状態からのMSYS2+GCCでWindows上にC言語とC++の環境を整えるの通りにコンパイラ環境を整える.

その後「MSYS2 MSYS」ショートカットで起動する端末エミュレータから,

$ pacman -S mingw64/mingw-w64-x86_64-python3
$ pacman -S mingw64/mingw-w64-x86_64-python3-numpy
$ pacman -S mingw64/mingw-w64-x86_64-python3-scipy
$ pacman -S mingw64/mingw-w64-x86_64-python3-matplotlib
$ pacman -S mingw64/mingw-w64-x86_64-python3-pandas

の五つのパッケージをインストールしておく.依存関係にある必要なライブラリ(主にQt関係)も全て一緒に入ってくれる.(64bit Windowsの場合)

Pythonの実行時には,MSYS2 MSYSから,

 $ /mingw64/bin/python3 MyPythonCode.py

と実行する.

OSX, macOS

OSX,macOSはPython本体とnumpy, scipy, matplotlibは標準で入っているのだが,バージョンが2.7である.HomebrewなどでPython3を入れるという方法もあるが,Homebrewでインストールを行うとシステム全体に影響を及ぼし,元々入っていたPython2.7とごちゃ混ぜになりシステムにダメージを与える可能性が高い.

そこでデータ処理に特化したPythonのパッケージであるAnacondaを「HDDのアプリケーション」以下にインストールして使う.Anacondaは/Applications/anacondaフォルダ内で独立したファイルツリーを持つ.

Python3を使いたい場合はAnacondaのPythonを明示的に実行してやる形にすれば,通常のシステムの処理に必要なPythonは元々システムに入っていた2.7がそのまま使われることになる.この方法で,システムに必要なPython2.7と,プログラミング言語として使いたいPython3系を,安全に同居させることができる.

Anacondaのダウンロードページの「Download for macOS」から「Python 3.6 version」の「Graphical Installer」をダウンロードする.

ダウンロードされた.pkgを実行して,ライセンスに同意し,「インストール先を変更」して「特定のディスク」の「アプリケーション」フォルダにインストールする.そうするとマシンの「/Applications」に「anaconda」フォルダ内にanacondaがインストールされ,Terminal.appから実行するPythonはこの中のPythonを使うように設定される.

Anaconda3のインストールパッケージ一覧の画面 Anaconda3のライセンス表示 Anaconda3のライセンス同意 Anaconda3「インストール先を変更」 Anaconda3「特定のディスクにインストール」を選択 Anaconda3メインのシステムHDDが選択されていることを確認し「フォルダを選択」 Anaconda3 フォルダを選択.ハードディスク直下の「アプリケーション」 Anaconda3 選択終了「続ける」

「このユーザがTerminal.appを開いた時はAnacondaのPythonを使う」という設定が記述されている~/.bash_profileからexport PATH=/Applications/anaconda...という行を削除しておき,Python3を実行する時は「Terminal.app」から,

 $ /Applications/anaconda/bin/python MyPythonCode.py

と「Anacondaのpython」を明示的に実行するようにしておくと,システム的に混乱が起きない.

OSXのPython2.7には,この授業の目的である基本的なデータ解析で使うnumpy, matplotlib, scipyも標準で含まれているのだが,matplotlibが使うGUI部品(システム標準はおそらくTk, Anacondaや上記WindowsのMSYS2環境ではQt5)や,リストを使ったイテレータの言語仕様などが違うため,Python2.7と3で互換性がないプログラムもある.

Anacondaの環境を作って実行環境のターミナルを開く

Pythonはライブラリがたくさんあり,衝突するものもある.Anacondaは複数の「環境environment」を作り,「環境」ごとにライブラリをインストールすることができるため,ライブラリの衝突を防ぐことができる.

ここでは授業用の環境「for_class」を作ってみる.

環境を作る

「Environment」タブにして,下の「Create」ボタン.

環境の名前をつける

環境の名前(ここでは"for_class")をつけて,「Create」.

環境が作られている

環境が作られている.

再生ボタンからOpen Terminal

環境の作成が終わったら,作成した環境の再生ボタンから「Open Terminal」.

Terminalが開いて実行できる

Terminalが開いて実行できるようになるので,プログラムが置いてあるフォルダにcdコマンドで移動して,

python 実行したいpythonプログラムファイル.py

で実行できるようになる.

Anaconda-Navigatorでの追加ライブラリのインストール

AnacondaはGUIでライブラリが追加インストールできる.ここでは例としてTwitterのAPIを使うために必要なOauth認証に必要なrequests_oauthlibをインストールする.

conda-forgeというレポジトリ(AnacondaではChannelと呼称する)がよくメンテされているようなので,それを追加して,Anacondaから使えるようにする.

まず管理者権限をもつユーザでAnaconda-Navigatorを起動する.

管理者権限を持つユーザでAnaconda-Navigatorを起動する

「Environment」(環境)を選択→「当該プロジェクトで使っているAnacondaの環境(ここではrootだが,基本的には前述の通りプロジェクトごとに環境を作る)」が選択されていることを確認→「Channels」ボタンを押す.

環境を選択しChannelを追加する

ミニウィンドウが開くので「Add」

ミニウィンドウが開く

新たなフィールドに「conda-forge」チャンネルを入力.

新たなフィールドに「conda-forge」チャンネルを入力

追加したら「Update channels」

「Update channels」

もとの画面に戻るので「Update Index」すると,下のバーでIndexをアップデートしている進行状況が表示される.

「Update Index」

一番左のプルダウンメニューから「Not Installed」(まだインストールされていないライブラリの検索)→一番右のボックスに「ライブラリの名前」(ここでは「requests-oauthlib」)を入力すると,下のフィールドに検索結果が出てくる.

「Not Installed」→「ライブラリの名前入力」→検索結果がでる

ライブラリにチェックを入れて,「Apply」

ライブラリにチェックを入れて「Apply」

進行状況のミニウィンドウが出る.

進行状況のミニウィンドウ

入れたいライブラリに必要なライブラリ(依存関係と呼称する)が全て並んで出てくるので「Apply」.

依存関係の表示

プルダウンメニューを「Installed」にして,インストールされていることを確認する.

「Installed」で確認.

以上である.Environment→rootの再生マークからターミナルを呼び出しても使えるし,root環境に入れておけば,通常のターミナルから/Applications/anaconda/bin/python3でPythonインタプリタを呼び出した時もライブラリが使える.

Anacondaで環境をたくさん作り,使用するライブラリを切り替えることもできる.


[Work/Class/Web基礎/2_JSBasic]

JavaScriptの基礎 ページ遷移を伴わない書き換え

divのidを取得し,中身を書き換える

<div id="hogehoge">
  <p>
    色々ナンタラカンタラ
  </p>
</div>

というdiv指定がある時,

document.getElementById("取得したいdivのid名")

という命令文でこのdivを取得し,そこに

取得したdiv.innerHTML = "書き換える内容のhtml文";

と書くことで,ページ遷移をともなわずに,divの内容を書き換えることができる.

命令文をまとめると

document.getElementById("書き換える対象のdivのid名").innerHTML = 
   "<p>書き換える内容をhtmlコードで指定</p>";

となる.

HTMLファイルとJavaScriptファイルを別にした具体的な例を示す.→動作確認ページ

htmlファイル「231_JSBasic_RewriteInnerHTML.html」は以下の通り.

<!DOCTYPE html>
<!-- 231_JSBasic_RewriteInnerHTML.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
	<title>JavaScriptの基礎 innerHTMLで書き換える.</title>

	<script type="text/javascript" src="./231_JSBasic_RewriteInnerHTML.js" >
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <p>
      ここが書き換わります.
    </p>
  </div>

</body>
</html>

対応する「231_JSBasic_RewriteInnerHTML.js」は以下の通り.

/* 231_JSBasic_RewriteInnerHTML.js */
function onClickButton(){
    document.getElementById("RewritingDiv").innerHTML="<p><strong>書き換えました!</strong></p>";
}

カウンタを使って複数回書き換える

数を数える変数(カウンタ変数と呼ぶ)を使って,何回変更したかを数えておくことで,複数回異なる書き換えを行うことができる.→動作確認ページ

htmlファイル「232_JSBasic_RewriteInnerHTML_MultiTimes.html」は以下の通り.(htmlファイルの内容は前と変わっていない.読み出すJavaScriptファイルが変わっているだけ)

<!DOCTYPE html>
<!-- 232_JSBasic_RewriteInnerHTML_MultiTimes.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
	<title>JavaScriptの基礎 innerHTMLで何回も書き換える.</title>

	<script type="text/javascript" src="./232_JSBasic_RewriteInnerHTML_MultiTimes.js">
	</script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <p>
      ここが書き換わります.
    </p>
  </div>

</body>
</html>

対応するJavaScriptファイル「JSBasic32_RewriteInnerHTML_MultiTimes.js」は以下の通り.

/* 232_JSBasic_RewriteInnerHTML_MultiTimes.js */
var buttonCounter = 0; //カウンタ変数
function onClickButton(){
    if(buttonCounter == 0){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>最初の書き換え</p>";
	buttonCounter++;
    }
    else if(buttonCounter == 1){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>2回目の書き換え</p>";
	buttonCounter++;
    }
    else if(buttonCounter == 2){
	document.getElementById("RewritingDiv").innerHTML =
	    "<p>3回目の書き換え.<br />最初に戻ります.</p>";
	buttonCounter = 0;
    }
}

function指定の外にカウンタ変数を宣言し0を入れておき,関数が呼ばれるたびにカウンタ変数を一つ増やす(「変数名++;」は整数の変数1増やす意味の命令.ポストインクリメント,もしくは単にインクリメントと呼ぶ).2回目の書き換えではカウンタ変数の中身を0に戻すことで,ループさせている.

画像を置き換える

innerHTMLを使って画像を置き換える例を以下に示す.→動作確認ページ

フラグ変数imgFlagの中身を0と1で切り替えて,GoogleロゴとYahooロゴを交互に表示している.このように状態が0と1とで交互に入れ替わる変数のことをトグル(toggle)変数,トグルスイッチなどと呼称する.

ダブルクォーテーションとシングルクォーテーションの使い方に注意.innerHTMLに代入するHTMLコードの中身でダブルクォーテーションを使い,HTML全体を括るのはシングルクォーテーションを使うのが,他言語のトレンドと合わせた最近の作法の模様.

htmlファイル「233_JSBasic_RewriteInnerHTML_ReplaceImg.html」は以下の通り.

<!DOCTYPE html>
<!-- 233_JSBasic_RewriteInnerHTMLReplaceImg.html -->

<html lang="ja">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8" />
  <title>JavaScriptの基礎 innerHTMLで画像を置き換える</title>

  <script type="text/javascript" src="./233_JSBasic_RewriteInnerHTML_ReplaceImg.js">
  </script>
</head>
<body>

  <input type="button" value="ボタンを押したら書き換え" onclick="onClickButton();" />

  <div id="RewritingDiv">
    <img src="https://www.google.co.jp/images/srpr/logo11w.png" alt="Googleロゴ" />
  </div>

</body>
</html>

対応するJavaScriptファイル「233_JSBasic_RewriteInnerHTML_ReplaceImg.js」は以下の通り.

/* 233_JSBasic_RewriteInnerHTML_ReplaceImg.js */
var imgFlag = 0;
function onClickButton(){
    if(imgFlag == 0){
	document.getElementById("RewritingDiv").innerHTML =
	    '<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" alt="Yahooのロゴ" />';
	imgFlag = 1;
    }
    else{ //imgFlagが0以外の時
	document.getElementById("RewritingDiv").innerHTML =
	    '<img src="https://www.google.co.jp/images/srpr/logo11w.png" alt="Googleのロゴ" />';
	imgFlag = 0;
    }

}

[Work/Class/Web基礎/assignment]

課題その2 - ユギアーカイブ

ユギアーカイブ

南大沢キャンパスの北側「旧由木村」地域に関するコンテンツを作成するグループ課題.

日程

由木村についてのレクチャーなどを,外部講師の方にお願いする.

最終発表: 2018/7/9の授業.全部のグループが行う.


[Work/Class/Google Maps APIの基礎/basic]

GoogleMaps APIの基礎 - 地図を表示させてマーカーを入れる

htmlの中に地図表示用のdivを配置し,そこに描画する,という形.

window.addEventListener('load', 関数オブジェクト);で,必要なファイルが全て読み込まれたら実行される関数オブジェクトを指定する.

HTMLファイル.

<!DOCTYPE html>
<!-- display_marker.html -->
<html>
<head>
    <title>Google Maps API最初の一歩</title>
    <meta charset="utf-8">

    <!-- ちゃんと等倍で表示しましょうよ.スマホ側で勝手に倍率変えんなよ,という意味 -->
    <meta name="viewport" content="initial-scale=1.0">
    <!-- この中身は後からJavaScriptでも変更可能だったりする -->

    <!-- Google Maps APIをWeb上から読んでくる -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <!-- 自分で作ったJSファイル -->
    <script type="text/javascript" src="./display_marker.js"></script>

    <!-- とりあえずCSSを直接書いてしまう -->
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            /*
             div id=mapになってるdiv
             ここに地図
             高さ500ピクセル,幅は上位のdiv(ここではbody)の50%
            */
            height: 500px;
            width: 50%;
        }
    </style>
</head>
<body>
  <!-- bodyの中には地図表示用のマップ一つだけ -->
  <div id="map"></div>
</body>
</html>

htmlファイルから読まれるJavaScriptファイル.

// display_marker.js

// window.addEventListenerに関数オブジェクトを登録しておくと,
// 全部のコンテンツの読み込みが終了した時に自動的に,
// 登録しておいた関数オブジェクトが次々と呼ばれる
window.addEventListener('load', () => { //登録する関数オブジェクト記述開始
  //地図表示に必要なパラメータを保持するconstオブジェクト
  const mapElement = {
    // 日野キャンパス2号館をの緯度経度を中心にして表示する
    center: {lat:35.661504, lng:139.367559},
    // ズームレベル
    zoom: 16
  };

  // 地図を保持するためのconstオブジェクトmyMapを宣言し,
  // GoogleMapsのコンストラクタの引数に,先に定義した地図表示に必要なパラメータを食わせる
  const myMap =
    new google.maps.Map(document.getElementById('map'), mapElement);
  // コンストラクタが実行されると表示される

  // 日野キャンパス1号館にマーカを表示するためのパラメータのconstオブジェクト
  const firstMarkerElement = {
    // 1号館の緯度経度
    position: {lat:35.661930, lng:139.366485},
    // どのマップオブジェクトに表示するか
    map: myMap
  };

  // マーカのコンストラクタに,先に定義したマーカのパラメータのオブジェクトを食わせて
  // オブジェクトを取り出す
  const firstMarker =
    new google.maps.Marker(firstMarkerElement);
  // 同様にコンストラクタが実行されると表示される

} // window.addEventListenerに登録する関数オブジェクトの記述ここまで
); // window.addEventListener関数自体は,このセミコロンで終わって実行される

[Work/Class/Web基礎/0_Guidance]

Web基礎ガイダンス

Google Chromeのインストール

授業ではWebブラウザとしてGoogle Chromeを使うので,インストールしておく.

Gmailアドレスの取得とGoogleGroupsへの参加

2年次Web基礎授業では,連絡手段,作品提出手段としてGoogle Groupsを使用するので,Gmailアドレスを取得し,授業のGoogle Groupsに参加する.

Gmailアドレスの取得

Androidスマートフォンなどを使っていてGmailアドレスを持っている学生は,飛ばして次のGoogle Groupsへの参加へ進む.

Google Chromeを開いて,http://google.comを開く.

Googleページ右上のログインボタン

右上の「ログイン」ボタンを選択.

アカウントを作成

「アカウントを作成」を選択.

必要な情報の入力

必要な情報を入力して,アカウントを作成する.

Google Groupsへの参加

メンバー登録を申し込む

授業のGoogle Groupsのページ https://groups.google.com/forum/#!forum/web_basic_2018 を開いて,「メンバー登録を申し込む」

教員が確認して,参加を登録する.