n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

PHP file操作でハマったこと

こんにちは、n-hirokiです!


PHPのfile操作でハマったところをメモします!
特にfile関数の文法的な話ではなく、「そんなことだったんだー」って話です。

簡単なプログラムの内容

今回はPHPのファイルと同じディレクトリに「data」「data_ave」「data_integral」というフォルダを3つ置きました。
そのフォルダ内のtxtファイルからデータを取得したいのですがうまくいきませんでした。

こちらがそのコードを簡単にしたものです。

  $filename = 'data/data.txt';  //瞬時値
  $filename_ave = 'data_ave/data.txt';  //平均値
  $filename_integral = 'data_integral/data.txt';  //積分値

  $lines = file($filename);
  $lines_ave = file($filename_ave);
  $lines_integral = file($filename_integral);

基本的なfile操作です。

エラーの内容

これでtxtファイルのデータを取得できるはずが、どうしても平均値だけ取得時にエラーになってしまいます。
エラーの内容は「no such file or directory」というエラーでした!
指定の場所に指定のファイルがありませんってことですね。




ここから先は話が長くなるので原因を先に書きます。

同じディレクトリに作成したフォルダの「data_ave」のフォルダ名が間違っていました。
「data_ave」だと思い込んでいたファイル名が「data_ ave」だったのです。
ファイル名の途中に半角空白文字が入っていました。



デバッグ

エラーをふまえると、「スペルミスとか簡単なミスだろう!」と思い手当たり次第確認です!
でも、何回確認しても同じ階層に「data_ave」という名前のフォルダはあるし、アクセス権も設定したし、中のtxtファイルもあります!


名前も何回も確認して$filename_aveに代入している内容も何回も確認したけど異常がないようにしか見えません。
どこが間違っているのか全くわからなかったのです。


数日このエラーでハマってしまい、もうお手上げ状態でしたwww
なので、一度投げ出してしまおうと思い、2日ほどこのプログラムをさわりませんでした!
理由は、ずっとにらめっこしているので視野が狭くなっていると思ったのでw


はりきって再チャレンジできずw

というわけで2日後にチャレンジしました!

が、何もわからずに早速断念!
夜勤明けで頭がかなり疲れていたのもあり、1時間さわってもわからなかったのでバイトのない翌日に!


さあ、翌日です!はりきっていきたい
不覚にもかなり寝てしまい、軽い頭痛がしていますが、コーディングするためにスタバに!

早速、
コードを全体的に見直しました!
ずっとPHPのせいでエラーが出てしまっていると思い込んでいたので、ずっとPHPしか見ていませんでした!
なのでjavascriptなどの他のファイルからファイル名やアクセス権限まで確認しました!


でも、依然としてどこにも異常が見当たりません。
なので、PHPファイルを新しいファイルに書き写すことで何かわからないかと思いひたすら書き写しました!


そこで閃いたのです!


そもそもエラーの内容が「no such file or directory」なのでプログラムの文法のミスという可能性は極めて低いです。(当たり前ですが、いつも夜勤後にプログラムしていることもあり気づかなかったのです)


なのでフォルダ名とファイル名はコードと同じだという思いこみを捨ててコピペで確実に一緒になるようにしました!
コード内の名前をコピーしてファイル名変更でペーストしました!
すると「data_ave」のフォルダ名が少し横幅が縮んだのですw

結果「data_ave」と思い込んでいたフォルダ名が「data_ ave」と名前の途中に半角空白が入っていたのです。


デバッグが終わって、、、

そもそも、「「data_ave」だけエラーになるんだからすぐに気付けよ!」って思いましたwww


コーディングでハマった時は少し投げ出すことってけっこう大事(できるなら)!

固定概念で固まった頭ってかなりやっかいな敵なんですよね!
それでうまくいかずに長時間使って進歩なしだと焦りを産むし、堂々巡りにおちいって鬱になって、「はわわー」って感じになるwww



簡単なことや当たり前なことほど、見えなくなりやすいんですよねー


データベースの基礎

こんにちは!
n-hirokiです!


データベースの基礎です!
「データベースとは何なのか?」から「データベースの作成や操作」までのメモです!





1、データベースとは

「データを一定のルールで蓄積し、必要に応じて取り出せるようにしたもの」


MySQLPostgreSQLなどがあります。


データベースとExcelは似ています!

データベース ➡︎ Excelでいうファイル
テーブル(表)➡︎ExcelでいうSheet
レコード(行)➡︎Excelでは横の行
フィールド(列)➡︎Excelでは縦の列



テーブルの一例

<データベースの場合>
データベース名 : db_name
テーブル名 : table_name
フィールド名 : id  int(12) PRIMARY KEY : AUTO_INCREMENT
フィールド名 : lat  varchar(64)
フィールド名 : lon  varchar(64)
フィールド名 : img varchar(128)
フィールド名 : date  datetime


2、データベースの作成

XAMPP使用

1、最初にデータベースを作成します。http://localhost/xampp/
2、画面の左メニュー”phpMyAdmin"を選択
3、「データベース」タブをクリック
4、「データベースを作成する」に半角英数字で好きなデータベース名を入力
5、照合順序はutf8_unicode_ciを選択
6、「作成」ボタンで作成


テーブルの作成は先ほどの一例のように入力してみてください。








3、データベース操作

テーブル基本操作をSQLで行います
MySQLは以下のコマンドを使用していろいろな操作ができます。


SQLコマンド

INSERT ➡︎ データを登録することができます。
SELECT ➡︎  データを表示することができます。
UPDATE ➡︎  データを更新することができます。
DELETE ➡︎  データを削除することができます。




INSERT(データ登録)

書式
INSERT INTO テーブル名(カラム1,カラム2,カラム3,.....)VALUES(値1,値2,値3,.....);


INSERT INTO table_name(id, lat, lon, img, date)VALUES(NULL,'39.11','132.12','temp.jpg','2017-07-07 00:00:00');


SELECT(データ取得)

書式
SELECT 表示するカラム FROM テーブル名;


SELECT * FROM table_name;  --全指定
SELECT name FROM table_name;  --単体指定
SELECT name,tel FROM table_name;  --複数指定

SELECT * FROM table_name WHERE name = '太郎';

UPDATE(データ更新)

書式
UPDATE テーブル名 SET 変更データ WHERE 選択データ;


UPDATE table_name SET img='temp.jpg' WHERE id=1;
UPDATE table_name SET img='01.jpg' WHERE img='temp.jpg';


DELETE(データ削除)

書式
DELETE FROM テーブル名;


--全て削除
DELETE FROM table_name;

--WHEREを使用して特定のデータを削除します。
DELETE FROM table_name WHERE img='01.jpg';

注意!!
DELETEするとデータは復旧できないので気をつけましょう!







4、PHPとDB接続

データ登録

//1.接続します
$pdo = new PDO('mysql:dbname=db_name;host=localhost', 'root', '');

//2.DB文字コード指定
$stmt = $pdo->query('SET NAMES utf8');

//3.データ登録SQL作成
$stmt = $pdo->prepare("INSERT INTO table_name(id, lat, lon, img, date)VALUES(NULL, :lat, :lon, :img, sysdate())");

$stmt->bindValue(':lat', '39.11');
$stmt->bindValue(':lon', '39.11');
$stmt->bindValue(':img', '01.jpeg');

//4.SQL実行
$flag = $stmt->execute();


データ取得

$pdo = new PDO('mysql:dbname=table_name;host=localhost','root', '');
$stmt = $pdo->query('SET NAMES utf8');

$stmt = $pdo->prepare("SELECT * FROM table_name");
$flag = $stmt->execute();
$view = "";
if($flag==false){
  $view = "SQLエラー";
}else{
  while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
    $view .= '<div><img src="' . $result['img'] . '">' . $result['lat'] . ',' . $result['lon'] . '</div>';
  }
}


あくまでも僕のメモなので参考までに!


android開発準備

こんにちは!
n-hirokiです!






androidの開発環境の構築についてのブログです!
あくまでも僕のメモなので間違っていた場合はごめんなさい。


1、JDKのインストール

1、以下のページにアクセス!
http://www.oracle.com/technetwork/java/javase/downloads/index.htm

2、[JDK]の下の[Download]ボタンをクリック

3、Java SE Development Kit の [Accept License Agreement] をクリック

4、自分の環境にあったものをクリックしてダウンロードを実行します
  Macの場合は[macOS]の項目のものをダウンロードします

5、ダウンロードしたファイルをクリックし、立ち上がったインストーラーを実行して、jdkをインストールする。

6、java(jdk)がインストールされていることを確認する。
  Macの場合はターミナルで、「java -version」を入力して、Javaのバージョンが表示されればOK

2、Android Studioをインストールする

1、以下のサイトにアクセス!
developer.android.com


2、下の方にある「Android Studio downloads」の中で自分の環境にあったものをダウンロードします!


3、ダウンロードしたファイルをクリックして、立ち上がったインストーラーを実行し、android Studioをインストールします!


3、Android Studioの日本語化

1、日本語化のパッチを以下のGithubからダウンロードします。
github.com

2、ダウンロードされたzipファイルを解凍します。フォルダの中に「resources_jp.jar」をAndroid Studioのライブラリにコピーします。


Android Studioのライブラリのパスは、Macの場合は、
Finderを開いて「アプリケーション」をクリック。
Android Studio.app」を右クリック。
パッケージの内容を表示をクリック

3、android Studio.appのフォルダー一覧が表示されます。その中の「lib」フォルダを選択し、 「resources_jp.jar」ファイルをコピーします。

4、Android Studioを再起動して、メニューが日本語になっていればOK


4、Android SDKの準備

1、SDKマネージャを起動

2、Configureをクリック

3、SDK Managerをクリック

4、必要なパッケージをインストールする。

以下のパッケージは必要だと思いますのでチェックをいれてインストールします。

  ・android SDK Tools
  ・android SDK Platform-tools
  ・android SDK Build-tools
  ・android.4.4.2(API 19)
  ・android.4.4w.2(API20)
  ・android.5.0.1(API21)
  ・android.5.1.1(API22)

かなり時間がかかる場合があるので注意です!


これで初期設定とandroid SDKのインストールが完了し、アプリ作成の準備は完了です!

adbを使えるようにする。

adbとはAndroid Debug Bridgeの略です。
これはAndroid SDKのplatform-toolsに含まれます。

ADBコマンドは、Android SDKをインストールしただけでは使用できません。
環境変数のPathを通す必要があります!


android Studioのプロジェクト構造から、SDKのパスを取得して、
(/Users/ユーザー/Library/Android/sdk

.bash_profileにANDROID_HOMEにSDKのパスを設定します。
toolsとplatform-toolsフォルダを環境変数に追加してパスを通します。







これは僕のメモなので間違っている場合があるかもしれません(環境によって変わるため)
参考程度にお願いします。

JavaScriptで文字列の中の指定された範囲の文字列を返す

こんにちは!
n-hirokiです!
僕の技術メモなので参考までに!

文字列の欲しい部分だけ切り抜く

・今回扱う文字列

{"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}


この中で日時とデータを取得する!

<script "type=text/jscript">
    var temp = new String("{"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}");

    var datetime = temp.slice(13,32);
    var high = temp.slice(43,44);
    var low = temp.slice(54,56);
</script>
    datetime -> 2018-03-07 16:48:01
    high -> 0
    low -> 42


JavaScriptで文字列を与えられた区切り文字で分割する

こんにちは、n-hirokiです!
僕の技術メモなので参考までに。

javascriptで文字列を区切り文字で分割して配列にする

<script type="text/javascript">
    var data = "";
    var ans = "";
        
    data = "スタバ,のコーヒー,は美味しい,です!";
    ans = data.split(",");
        
    console.log(ans);
</script>


・ansの中身

ans[0] -> スタバ
ans[1] -> のコーヒー
ans[2] -> は美味しい
ans[3] -> です!


CanvasJSで折れ線グラフを表示する

こんにちは
n-hirokiです。
僕の技術メモです。


前回の記事の続編です!

今回は受け取ったデータをCanvasJSでグラフにして表示します!

hiroki-prog.hatenablog.com

テキストファイルのデータをJavaScriptに渡す方法は前回の記事をご覧ください。



まずは今回扱うdata.txtの確認です。
・data.txtの内容

datetime -> データの取得日時
highB -> データの上位ビット
lowB -> データの下位ビット


・data.txt

{"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}
{"datetime":"2018-03-07 16:48:07","highB":"2","lowB":"202"}
{"datetime":"2018-03-07 16:48:12","highB":"3","lowB":"49"}
{"datetime":"2018-03-07 16:48:17","highB":"2","lowB":"78"}
{"datetime":"2018-03-07 16:48:22","highB":"216","lowB":"244"}



ではコードの説明に入ります!




1、CanvasJSの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js">
</script>


2、変数定義

<script type="text/javascript">
    var lines = "";     //PHPのデータ受け取り
    var data = "";      //データ分割
    var datetime;       //日時生成
    var high = 0;       //highB用
    var low = 0;       //lowB用
    var value = 0;      //highとlowBの計算結果
    var dataPlot = [];    //CanvasJSに渡すデータ
    var count = 0;     //forループカウント用
    var line = [];    //linesで受け取ったデータを1行ごとに分ける
    var lineCount = 0;    //lineのlinesから受け取るインデックスの管理用
    var temp;    //date生成用変数
</script>


3、PHPからデータを受け取る

    lines = String(<?php echo json_encode($lines); ?>);


この状態だと、

    lines[0] -> {
    lines[1] -> "
    lines[2] -> d
    lines[3] -> a

インデックスごとに1文字しか入っていないため扱いにくい




4、扱いやすいようにする

    for(count = 0;lines.length >= count + 1;count++){
        if(line[lineCount] == undefined){
            line[lineCount] = lines[count];
        }else{
            line[lineCount] += lines[count];
        }
        if(lines[count] == '}'){
            lineCount++;
        }
    }


これでlineの内容はこうなる

    line[0] -> {"datetime":"2018-03-07 16:48:01","highB":"0","lowB":"42"}
    line[1] -> {"datetime":"2018-03-07 16:48:07","highB":"2","lowB":"202"}
    line[2] -> {"datetime":"2018-03-07 16:48:12","highB":"3","lowB":"49"}



5、CanvasJSに渡すデータ形式に生成する

for(count = 1;line.length > count + 1;count++){
    //欲しいデータを取得するため切り抜く
    data = line[count].split(",");     //欲しいデータを取得しやすくするために分割

    //datetime生成
    temp = data[1].slice(13,32);    //2018-03-07 16:48:01 この形に切り抜かれている
    var y = parseInt(temp.slice(0,4));    //年 int型にキャスト
    var m = parseInt(temp.slice(5,7)) - 1;    //月
    var d = parseInt(temp.slice(8,10));    //日
    var h = parseInt(temp.slice(11,13));    //時
    var i = parseInt(temp.slice(14,16));    //分
    var s = parseInt(temp.slice(17,19));    //秒
            
    datetime = new Date(y,m,d,h,i,s);    //Date型


    //value生成
    high = parseInt(data[2].slice(9,10));    //high int型にキャスト
    low = parseInt(data[3].slice(8,-2));    //low
    value = high * (256 + low);    //valueの計算

    //CanvasJSの形式に生成
    dataPlot.push({
        label:datetime, y:value
    });
}



6、CanvasJSの処理

var stage = document.getElementById('stage');
var chart = new CanvasJS.Chart(stage, {
    title: { 
       text: "グラフタイトル"
    },
   data: [{
        type: 'line',
        dataPoints: dataPlot
    }]
});
    chart.render();


CanvasJSはかなり簡単にグラフを生成してくれて便利です!
JavaScriptに不慣れな僕は今回のデータの生成で結構苦戦しました!
特にlineの各インデックスの最初に"undefined"が入ってしまいかなりハマりましたw
今回もとても良い勉強になったと思います!
なんとか動いてくれて嬉しいです!


PHPからJavascriptに配列を渡す

こんにちは
n-hirokiです。
僕の技術メモです。


テキストファイルのデータをJavaScriptに渡す

PHPでtextファイルの内容を配列で取得してJavaScriptの配列に代入する。

<?php
    $filename = 'data.txt';
    $lines = file($filename);
?>
<script type="text/javascript">
    var hoge = <?php echo json_encode($lines); ?>;
    console.log(hoge);
</script>

ソースコードとは別にtxtファイルを用意して同じディレクトリに保存してください。