Python 機械学習

機械学習とは

=マシンラーニング
人工知能(AI)の中核技術の1つ

人工知能(AI)

コンピューターが物事やルールを理解するロジック

AIの学習手順

コンピューターにデータを与える
学習方法(データに対する答えの定義)を与える

与えられたデータ、学習方法を元に新しいデータに対する正解を予測する

※学習方法=機械学習

Node.js

Node.jsとは

サーバーサイドで動作するJavaScript実行環境

コマンド

バージョン
node -v
X.X.X

Node.js用パッケージ管理システム
npm -v
X.X.X

npm install (パッケージ名)
npm search (パッケージ名)
npm un (パッケージ名)

実行

※server.js
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res){
  var data = 'hello world';
  res.writeHead(200, {
    'Content-Length': Buffer.byteLength(data),
    'conntent-type': 'text/plain'
  });
  res.write(data, 'utf8');
  res.end();
});

server.listen(3000);
console.log('server listening…');

※コンソールから
node server.js
server listening…

※ブラウザで
localhost:3000/
hello world

Python PANDAS

Pandasとは

データ分析(データサイエンス)ライブラリ
・データの統計量表示
・データのグラフ化

配列

配列

import pandas as pd

s = pd.Series([1, 2, 3, 4])
s
0 1
1 2
2 3
3 4

s[1]
2

s.sum()
10

連想配列

import pandas as pd

dic = pd.DataFrame({'A': [10, 20], 'B': [15, 45]})
dic
 A B
0 10 15
1 20 45

CSV操作

JupyterNotebookカレントディレクトリ

import os

os.getcwd()
'C:\\Users\\~\\Desktop'

CSVファイルの読込

JupyterNotebookでuploadしたCSVファイルの読込
import pandas as pd

df= pd.read_csv('~.csv')
df= pd.read_csv('~.csv', sep=',')

指定行、列表示

先頭5行表示
df.head()

先頭10行表示
df.head(10)

末尾5行表示
df.tail()

末尾10行表示
df.tail(10)

指定列のみ
df[['列1','列5']].head(10)

列番号で指定
df[5:10].head(10)

指定行(全列)
※0から
df.loc[100]

指定行、指定列
df.iloc[[1,2,5][2,4]]
df.iloc[[行1,行2,行5][列2,列4]]

条件を指定
df[df['列名'] > 450]

複数条件を指定
df[['列名1', '列名2']].query('列名1 > ~ and 列名2 == "~"')

重複を削除して表示
df['列名'].unique()
array(['値1', '値2', '値3'])

データ情報

行数、列数
print(df.shape)
(行数, 列数)

Index
print(df.index)
RangeIndex(start=0, stop=XXX, step=1)

カラム
print(df.columns)
Index(['列1', '列2', '列3', dtype='object')

データ型
print(df.dtypes)

列1 object
列2 int64
列3 float64

Python 重要用語

Anaconda

データサイエンス向けのPythonディストリビューション
・Pythonインタプリタ
・Pythonライブラリ
JupyterNotebook
・conda(パッケージ管理ツール)

JupyterNotebook

(ジュピター・ノートブック)
データ分析作業用Pythonツール

パッケージ管理システム

pip
Pythonパッケージ管理ツール
Linuxにおけるyum/rpm、PHPにおけるComposer

バージョン
pip -V

インストール済パッケージ一覧
pip freeze
python -m pip list

インストール
pip install (パッケージ名)
pip install (パッケージ名==バージョン)

パッケージアップグレード
pip install --upgrade (パッケージ名)

パッケージアンインストール
pip uninstall -y (パッケージ名)

conda
Anaconda付属のPythonパッケージ管理ツール

バージョン
conda -V

インストール済パッケージ一覧
conda list

パッケージ検索
conda search django

インストール
conda install (パッケージ名)

パッケージアップグレード
conda update (パッケージ名)

パッケージアンインストール
conda remove (パッケージ名)

jQuery 日時選択ボックスdatetimepicker(xdsoft)

設定

https://xdsoft.net/jqplugins/datetimepicker/
からライブラリをダウンロード
jquery.datetimepicker.full
jquery.datetimepicker
を参照
jquery.min.js
jquery-ui.min.js
も参照

実装

オプション

※HTML
<input type="text" id="datetime" readonly="readonly">

※JavaScript
<script>
$(function() {

  $.datetimepicker.setLocale('ja');
  $('#datetime').datetimepicker({
  
   
    時間選択ボックス非表示
    timepicker : false,
    
    日付フォーマット
    format:'Y/m/d',
    
    日付選択ボックス非表示
    datepicker:false,
    
    時間フォーマット
    format:'H:i',
    
    時間選択ボックスに表示する時間
    allowTimes:["9:00", "10:00", "11:00", "12:00"],
    
  });

});
</script>

Ajax利用

日付選択ボックスと時間選択ボックスを個別に表示。

日付選択ボックス
文字入力不可
選択可能な日はハイライト表示

時間選択ボックス
文字入力不可
選択可能な日を選択するまでは時間選択不可
選択可能な日の内、選択可能な時間をプログラムで取得する
サーバ側の処理は省略

※HTML
<input type="text" id="date" readonly="readonly"">
<input type="text" id="time" readonly="readonly" disabled="disabled">

※JavaScript
<script>
日付
var eventDates = ["2019/6/5","2019/6/10","2019/6/15","2019/6/20","2019/6/25","2019/6/30"];

PHP等を利用する場合、↑のフォーマット(0埋め無しで日付配列を取得する必要あり)
var eventDates = <?= $eventDates; ?>;

$(function() {
  $.datetimepicker.setLocale('ja');
  $('#date').datetimepicker({
    format:'Y/m/d',
    timepicker : false,
    変数eventDates配列の日付だった場合に背景色を変更
    beforeShowDay:function(date){
      var d = date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
      for(var i=0; i<eventDates.length; i++){
        if(eventDates[i] == d ){
          背景色
          return ["xdsoft_highlighted_mint"];
        }else{
          continue;
        }
      }
    },
    日付選択時イベント
    onChangeDateTime: function(){
      var eventTimes = [];
      var select = $('#date').val().replace(/\/0/g, "/");

      if ( eventDates.find(item => item === select) ){

        var date = $('#date').val();

        var result = $.ajax(
          {
            type: "GET",
            contentType: 'application/json',
            url: サーバーURL,
            data:{
              "date":$('#date').val()
            },
            async: false,
            success: function(data)
            {
              var json = $.parseJSON(data);
              var len = json.length;

              for(var i = 0; i < len; i++) {
                eventTimes.push(json[i].time);
              }

              $("#time").prop('disabled', false);

              $('#time').datetimepicker({
                format:'H:i',
                datepicker:false,
                
                Ajaxで取得した時間の配列を設定。↓の様な配列の必要あり
                allowTimes:eventTimes,
                allowTimes: ["9:00", "10:00", "11:00", "12:00"],
              });
            },
            error: function(XMLHttpRequest,textStatus,errorThrown)
            {
              Ajax通信失敗処理
            }
          }
        );

      }else{
        $("#time").prop('disabled', true);
      }
    }
  });
});
</script>

非jQuery スライダー swiper

ライブラリ参照

swiper公式サイト
http://idangero.us/swiper/
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/js/swiper.min.js"></script>

ファイル参照
<link rel="stylesheet" href="~/swiper.min.css">
<script src="~/swiper.min.js"></script>

実装

スライダー部分
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- スライド部分 -->
    <div class="swiper-slide">画像や文章</div>
    <div class="swiper-slide">画像や文章</div>
    <div class="swiper-slide">画像や文章</div>
    …
  </div>
  <!-- ページネーション(スライダー下の〇〇〇) -->
  <div class="swiper-pagination"></div>
  
  <!-- ナビゲーションボタン(スライダー左右の矢印) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
スライダー設定
<script>
var appendNumber = 3;
var prependNumber = 1;
var swiper = new Swiper('.swiper-container', {

  ループさせる場合
  loop: true,
  
  ループさせる場合の速度
  speed: 1000,
  
  スライド数
  slidesPerView: 3,
  
  画像の中心部分で揃える
  centeredSlides: true,
  
  スライド間の横間隔
  spaceBetween: 30,
  
  ページネーション(スライダー下の〇〇〇)
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },   
  ナビゲーションボタン(スライダー左右の矢印)
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  レスポンシブ
  breakpoints: {
    543px以下の場合の挙動
    543: {
      スライド数を1に変更
      slidesPerView: 1
    }
  }
  });
})
</script>

     
         
画像や文章
    
画像や文章
    
画像や文章
    …   
     
        
  

jQuery スライダー fotorama

読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>
<script type="text/javascript" src="./js/fotorama.js"></script>
<link rel="stylesheet" href="./css/fotorama.css" />

設定

<div class="fotorama"
  オプション1=~
  オプション2=~
  オプション3=~>
  <img src="./images/1.jpg">
  <img src="./images/2.jpg">
</div>

画像でない要素もスライド可能
<div class="fotorama">
  <div>~</div>
  <div>~</div>
  <div>~</div>
</div>

オプション

<div class="fotorama"
  幅
  data-width="800&quot
  
  高さ
  data-height="600">
  
  サムネイル表示
  data-nav="thumbs"
  
  全画面表示
  data-allowfullscreen="true"
  
  フェード表示
  data-transition="crossfade"
  
  ループ再生
  data-loop="true"
  
  自動再生
  data-autoplay="true"
  
  矢印表示
  data-arrows="true"
  
  クリック移動
  data-click="true"
  
  スワイプ移動
  data-swipe="true"
  
 <img src="./images/1.jpg">
 <img src="./images/2.jpg">
</div>


幅を自動調整
<div class="fotorama" >
 <img src="./images/1.jpg">
 <img src="./images/2.jpg" data-fit="cover">
</div>


画像にキャプションを表示
<div class="fotorama">
 <img src="./images/1.jpg" data-caption="One">
 <img src="./images/2.jpg" data-caption="Two">
</div>

プログラム言語 セッション操作

読込

セッション変数
$name = $_SESSION[‘name’];
$this->session = $this->request->session();
$name = $this->session->read(‘name’));
セッションタイムアウト
※php.ini
セッション有効期限
session.gc_maxlifetime = 1440 ※秒

セッション削除頻度
session.gc_probability = 1
session.gc_divisor = 1000

session.gc_probability / session.gc_divisor
例の設定ではセッション発行1000回に1回セッションファイルを削除する
<?php
return [
  略
  'Session' => [
    'defaults' => 'php',
    'timeout' => 1,
  ],
];

書込

セッション変数
$_SESSION[‘name’] = ‘test’;
$this->session = $this->request->session();
$this->session->write(‘name’, ‘test’));

PHP デバッグ方法(XAMPP/Eclipse/Xdebug)

Xdebugモジュール

ダウンロード

phpinfo()を出力


https://xdebug.org/wizard.php
のテキストエリアにphp_info()の出力結果を貼り付け


「Analyse my phpinfo() output」ボタン押下


分析されたモジュールをダウンロード
例:php_xdebug-2.6.1-7.2-vc15.dll

保存

C:\xampp\php\ext\
に保存

XAMPP

読み込み

C:\xampp\php\php.ini
に以下を追加

[XDebug]
;; Only Zend OR (!) XDebug
zend_extension_ts="C:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable=true
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.profiler_enable=1
xdebug.profiler_output_dir="C:\xampp\tmp"

Eclipse

デバッグの構成

サーバータブ

「PHP Webアプリケーション」をダブルクリック
名前を保存可能

ファイル:デバッグ対象のファイルを選択
URL:CakePHPの場合、URLが実ファイルと変更されるのでブラウザに表示されるURLを入力

サーバー:構成
ベースURL:ポート番号等変更がある場合

デバッガータブ


デバッカー:XDebugを選択

Vi/Vim/GVim使用方法

コマンドモード

モード変更

入力 機能
ESC コマンドモード

カーソル移動

入力 機能
h
j
k
l
^ 行頭へ
$ 行末へ
↑の行頭に移動
+ ↓の行頭に移動
( ↑の文に移動
) ↓の文に移動
{ ↑の段落に移動
} ↓の段落に移動
Ctrl+f ↓のページへ
Ctrl+b ↑のページへ
gg ファイルの先頭へ
G ファイルの末尾へ
w →の単語の先頭へ
b ←の単語の先頭へ
e →の単語の末尾へ
ge ←の単語の末尾へ

終了

入力 機能
:q 保存無し終了
:q! 変更有でも保存無し終了
:w 保存&終了しない
:wq 保存&終了

コピー&ペースト

ヤンク(コピー)

入力 機能
yy 1行全体
yw 単語の末尾まで
y$ 行末まで

カット(削除)

入力 機能
dd 1行全体
dw 単語の末尾まで
d$ カーソルから行末まで
x カーソル位置の1文字
X カーソルの前の1文字
D カーソルから末尾
D カーソル位置の改行

プット(貼付)

入力 機能
p カーソルの後ろへ
P カーソル位置(前)へ

Undo/Redo

入力 機能
u Undo(Ctrl+Z)
Ctrl+u Redo(Ctrl+Y)
. 直前の動作の繰り返し

検索・置換

入力 機能
/(正規表現) 前方検索
?(正規表現) 後方検索
# カーソル位置の単語を検索
n 次の候補
N 前の候補
:%s/(検索文字列)/(置換文字列)/g 全て置換
:%s/(検索文字列)/(置換文字列)/gc 置換を順に確認

画面分割

入力 機能
Ctrl+w+w 分割した画面へ移動
gt → のタブへ移動
gT ← のタブへ移動

入力 機能
:e (パス) ファイルを開く
:set number 行番号を表示
:(行番号) 番号の行へ移動
:!(シェルコマンド) シェルコマンドを実行。例 :!ls
Ctrl+Ins クリップボードにコピー
Shift+Del クリップボードに切取
Shift+Ins クリップボードから貼付

挿入モード

モード変更

入力 機能
i カーソル位置から
a カーソル位置の右から
o ↓ に行挿入してから
O ↑ に行挿入してから
I 行頭から
A 行末から

挿入モードでの操作

Ctrl+h ← の1文字を削除
Ctrl+j 改行
Ctrl+g Ctrl+j ↑ へ移動 ※連続入力
Ctrl+g Ctrl+k ↓ へ移動 ※連続入力

ビジュアルモード

モード変更

入力 機能
v 文字単位で
V 行単位で
Ctrl+v 短形選択で

ビジュアルモードでの操作

I ビジュアルモード中に挿入モードに
y ビジュアルモード中にヤンク
d ビジュアルモード中にカット
p ビジュアルモード中に貼付
Ctrl+0 ビジュアルモード中に矩形選択状態で貼付
レジスタ0から貼り付け

上書モード

入力 機能
R 上書き

書き込み禁止モード

入力 機能
view (ファイル名) 書き込み禁止モードで起動