【ダイエット支援】アップロード処理(Vue.js側)

どうやらLinuxにはオープンソースのOCRソフト

Tesseract-OCRというものがあるようです。

これを試してみます。

こちらの記事を参考にしました。

https://kitakantech.com/tesseract-basic/

インストールは、

$ sudo apt-get install tesseract-ocr
$ sudo apt-get install tesseract-ocr-jpn

１つ目はTesseract-OCRの本体、２つ目は言語対応モジュールです。

使用方法は、こんな感じ。

$ tesseract test.jpg output -l jpn

これに対して、

• 

• 

読み込ませてみました。

• 

• 

うーん、読み込んでほしい部分が読み込まれてない。

写真だからダメなのだろうか。

たぶんスキャナで読み取った画像ならうまく読み込めるのかもしれないが。

栄養成分表をスキャナで読み取るなんて手間はありえないので、

ちょっと、この機能の実装を続けるかどうかは微妙ですな。

【ダイエット支援】スマホから写真をアップロードできるようにする

こちらの記事を参考にしました。

Vue.js でファイルをポストしたいとき

                <div id="mobile">
                    <p>
                        <input @change="onSelectedFile" type="file" name="file" />
                    </p>
                    <p>
                        <button @click="onUpload">送信</button>
                    </p>

        onSelectedFile: function(e) {
            e.preventDefault();
            let files = e.target.files;
            this.uploadFile = files[0];
        },
        onUpload: function() {
            let formData = new FormData();
            formData.append('picture', this.uploadFile);
            let config = {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            };
            axios
                .post('/api/eating/upload', formData, config)
                .then(function(response) {
                })
                .catch(function(error) {
                })
        },

• 

これの動作確認のために、Laravel側にWebAPIを作成します。

Route::post('api/eating/upload', 'Eating\ApiController@upload');

    public function upload(Request $request)
    {
        $file = $request->picture;
        logger(dump($file->getClientOriginalName()));
        return response()->json();
    }

適当な画像ファイルをアップロードしてみましたが、きちんとLaravel側でもファイルを認識しているようです。

次はOCR処理を作成していこうと思います。

【ダイエット支援】スマホ画面でのダイアログ表示崩れを修正

さて、スマホのレイアウト崩れも直ったので、

これからやりたいことは、

・カメラで栄養成分表示を撮影してアップロードする

・それをOCRでテキストデータに変換し、数値を入力する

です。

まずは、スマホの画面にだけ、ファイルアップロードのコントロールを表示させます。

div#mobile {
    @include small {
    }
    @include middle {
        display: none;
    }
    @include big {
        display: none;
    }
}

                <div id="mobile">
                    <p>
                        <input type="file" name="file" />
                    </p>
                    <p>
                        <button>送信</button>
                    </p>
                </div>

メディアクエリの使い方覚えたから楽勝。

• 

PCからはこうなってますが、

• 

スマホからはこうなります。

で、ファイルを選択をタップすると、

• 

こんな感じでカメラを起動して撮影したものをすぐにアップロードできるんですね。

とりあえず、今日やりたいことはできた。

次回は実際にOCRを組み込んでみたいと思います。

【ダイエット支援】スタイルの修正ってめんどくさいね・・・

前回の修正で

メディアクエリを使用すればレスポンシブデザインのコーディングができるよ、ということがわかりました。

では、これをsassにも適用させたいのですが、

sassに記入するには、ミックスインというものを使用するのが一般的なようです。

具体的には、こんな感じ。

@mixin small {
    @media (max-width: (479px)) {
        @content;
    }
}

@mixin middle {
    @media (min-width: (480px) and (max-width:959px)) {
        @content;
    }
}

@mixin big {
    @media (min-width: (960px)) {
        @content;
    }
}

@mixin XXでメディアクエリの定義に名前をつけ、この定義をsassの先頭あたりに記載します。

今回は大中小と記載しましたが、いいように名前を指定できます。

で、これをsassのスタイル定義に使用します。

    #content {
        z-index: 2;
        @include small {
            width: 90%;
        }
        @include middle {
            width: 50%;
        }
        @include big {
            width: 30%;
        }

こうすることでsassにもメディアクエリが適用できます。

• 

• 

いい感じになりました。

【ダイエット支援】スマホからでも利用できるようにしたい

TechCommitでレイアウト崩れの相談をしたところ、

            .full-height {
                height: 100vh;
            }

これがあると、高い確率でスマホのレイアウトが崩れるらしい（と言う認識）

なので、削除。

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

display: flex;とflex-wrap: wrap;はセットで考えた方が良いらしい（という認識）

flex-wrap: wrap;を追加。

@media screen and (max-width:479px) {
    .title {
        font-size: 34px;
    }
    #whatsthis {
        margin-left: 10%;
        font-size: 10px;
    }
}

@media screen and (min-width:480px) and (max-width:959px){
    .title {
        font-size: 44px;
    }
    #whatsthis {
        font-size: 15px;
    }
}

@media screen and (min-width:960px) {
    .title {
        font-size: 84px;
    }
    #whatsthis {
        font-size: 20px;
    }
}

あとはメディアクエリを使って、ディスプレイのサイズに応じて、スタイルを切り替える、と言う手法を使うらしい。

レスポンシブデザインでは常套手段みたい。

• 

ということで、ここまできれいになりました。

頑張った、俺。

次のステップとして、スマホから利用することによって、スマホの情報を利用できるようにしたいなぁ、って思ってたんですが、

それ以前の問題が起きていました。

• 

トップページ。

ひどいなこれ。

• 

• 

データ入力・編集・削除ダイヤログも崩れていました。

これはひどい。

まずはこれを直すところかは始めようか。

https://taki-lab.site:8443/

ポート番号の設定も修正したので、使用できるはず。

今後の予定。

やりたいこと。

1. 栄養成分表を撮影して、OCRで解析して自動入力。
2. バーコードをスキャンして自動入力
3. スマホのGPSの記録から行動履歴や運動を分析する
4. スマホに対応させちゃう
5. あと、見た目の問題

4.見た目の問題は後々考える。

2.はハードル高そう。それを扱うデータベースやAPIがないと無理。

個人的には3.をやりたいかな、ダイエットには必要な機能。

いろいろ解決しなきゃ行けない問題はあるけど。

GPSのデータをどうやって取り込むか、とか。

まぁ、考えます。

【ダイエット支援】【入力履歴機能】履歴検索して候補の表示

なかなかいい感じに仕上がっております。

    public function searchKeyword($keyword, $user)
    {
        $result = [];
        $records1 = EatingTemplateItem::where('item', 'like', "%$keyword%")->get();
        $records2 = $user->EatingHistoryItems()->where('item', 'like', "%$keyword%")->get();
        if(count($records1) + count($records2) >= 10 )
        {
            return [];
        }
        foreach($records1 as $record)
        {
            $obj = new \stdClass();
            foreach($this->templateParamNames as $paramName)
            {
                $obj->$paramName = $record->$paramName;
            }
            $result[] = $obj;
        }
        foreach($records2 as $record)
        {
            $obj = new \stdClass();
            foreach($this->templateParamNames as $paramName)
            {
                $obj->$paramName = $record->$paramName;
            }
            $result[] = $obj;
        }
        return $result;
    }

        onChangeItem: function() {
            if(this.contents.item!=""){
                var flg = this.setTemplete();
                if(flg == false) {
                    var self = this;
                    this.param.contents = this.contents;
                    axios.post('/api/eating/search', this.param).then(function(response){
                        self.keywords = [];
                        response.data.keywords.forEach(keyword => {
                            self.keywords.push(keyword);
                        });
                    }).catch(function(error){
                        self.error_flg = true;
                        self.errors = error.response.data.errors;
                    });
                }
            }else{
                this.keywords = [];
            }
        },
        setTemplete: function() {
            for (var index = 0; index < this.keywords.length; index++) {
                if(this.keywords[index].item == this.contents.item) {
                    this.contents.protein = this.keywords[index].protein;
                    this.contents.liqid = this.keywords[index].liqid;
                    this.contents.carbo = this.keywords[index].carbo;
                    this.contents.calorie = this.keywords[index].calorie;
                    return true;
                }
            }
            return false;
        }

これで入力履歴からデータの入力ができました。

ついでに同じデータが二重で履歴に登録されないように細工します。

    /**
     * ヒストリにデータを１件追加する
     */
    public function addHistory($param, $user)
    {
        $record = $this->searchKeyword($param["item"], $user);
        if(count($record) != 0)
        {
            return;
        }
        $model = new EatingHistoryItem();
        foreach($this->templateParamNames as $name)
        {
            $model->$name = $param[$name];
        }
        $model->save();

        $this->attachToUser($model, $user);
    }

これである程度利便性が高まりましたね。

あとは管理画面か・・・。

他のユーザーから管理画面を表示できないようにしないと。

【ダイエット支援】【入力履歴機能】履歴データ処理の作成

うまくスクショが取れなかった・・・

    public function searchKeyword($keyword, $user)
    {
        $result = [];
        $records1 = EatingTemplateItem::where('item', 'like', "%$keyword%")->get();
        $records2 = $user->EatingHistoryItems()->where('item', 'like', "%$keyword%")->get();
        if(count($records1) + count($records2) >= 10 )
        {
            return [];
        }
        foreach($records1 as $record)
        {
            $result[] = $record->item;
        }
        foreach($records2 as $record)
        {
            $result[] = $record->item;
        }
        return $result;
    }

    public function search(Request $request)
    {
        return response()->json([
            'keywords' => $this->eatingManagement->searchKeyword($request->contents['item'], Auth::user()), 
            ]);
    }

Route::post('api/eating/search', 'Eating\ApiController@search');

                            <td><input type="search" v-model="contents.item" autocomplete="on" list="keyword" v-on:keydown="onChangeItem"/></td>
                            <datalist id="keyword">
                                <option v-for="keyword in keywords" v-bind:value="keyword" />
                            </datalist>

        onChangeItem: function() {
            if(this.contents.item!=""){
                var self = this;
                this.param.contents = this.contents;
                axios.post('/api/eating/search', this.param).then(function(response){
                    self.keywords = [];
                    response.data.keywords.forEach(keyword => {
                        self.keywords.push(keyword);
                    });
                }).catch(function(error){
                    self.error_flg = true;
                    self.errors = error.response.data.errors;
                });
            }
        }

まだコードは暫定ですが、

とりあえず、入力した文字からデータベースを検索して、入力候補表示までできました。

とりあえず、検索結果だけ。

検索結果から各パラメータを自動入力させるのはまた次回に。

【ダイエット支援】【入力履歴機能】履歴管理画面の作成

前回作成した履歴一覧画面からデータテンプレートへ移動する機能を作成していきます。

<template>
    <div>
        <div>
            <p id="navi"> <a href="/home">HOME</a></p>
            <p id="inputbutton">
                <button @click="onClickSubmit">選択したデータを登録</button>
            </p>
            <table class="eatinghistory">
                <tbody>
                    <tr>
                        <th class="check">
                            <input type="checkbox" v-model="all" @click="onAllCheck" />
                        </th>
                        <th class="date">日時</th>
                        <th class="item">アイテム</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                    </tr>
                    <tr v-for="data in datalists">
                        <td class="check">
                            <input type="checkbox" v-model="data.check" />
                        </td>
                        <td class="date">{{ data.date}}</td>
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

チェックボックスの処理と処理を行うボタンを配置しました。

リストのチェックボックスはリストデータとバインドさせています。

チェックした内容がそのままデータに反映されます。

        onClickSubmit: function() {
            var self = this;
            this.datalists.forEach(element => {
                if(element.check == true){
                    this.ids.push(element.id);
                }
            });
            this.param.contents = this.ids;
            axios.post('/api/eating/regist', this.param).then(function(response){
                self.updateList();
            }).catch(function(error){
            });
        },
        onAllCheck: function() {
            if(this.all == false) {
                this.datalists.forEach(element => {
                    element.check = true;
                });
            }else{
                this.datalists.forEach(element => {
                    element.check = false;
                });
            }
        }

ヘッダのチェックをクリックすると、リストの中の全項目にチェックを行うように処理しています。

そして、「選択したデータを登録」をクリックすると、チェックをつけたidのリストがバックエンド側に送信されます。

Route::post('api/eating/regist', 'Eating\ApiController@regist');

class ApiController extends Controller
{
    public function regist(Request $request)
    {
        $this->eatingManagement->registTemplate($request->contents);
        return response()->json();
    }

class EatingManagementRepository
{
    public function registTemplate($ids)
    {
        $records =EatingHistoryItem::whereIn('id', $ids )->get();
        foreach($records as $record)
        {
            $model = new EatingTemplateItem();
            foreach($this->templateParamNames as $name)
            {
                $model->$name = $record[$name];
            }
            $model->save();
            $record->delete();
        }
    }

idのリストを元にhistoryのデータをtemplateに移動させています。

この画面はまだまだ改良の余地がありますが、とりあえずこんな感じでいいでしょう。

次回はテンプレートから入力候補を検索する処理を作成していきます。