2018-08-05

［つづき］chart.js + Flask で円グラフをWEB上に表示する。　2018/8/5

かえるるるです。

先ほどのエントリが途中で切れていたので、続きを投稿します。。

kaeru-nantoka.hatenablog.com

この記事の最後、ポイントは。。。

の続きから書いていきます。

ポイントは、html の下の方にある

です。これのおかげで、chart.jsをサイトからダウンロードしなくても使えるようになります！

２：結局何ができるようになるの？

=> ユーザーに入力してもらった値を用いてpython の機械学習ライブラリで計算、その結果をWEBページに表示することができるようになります。

機械学習を個別の環境で扱う方法に jupyter notebook というものを使う方法があります。

この環境でグラフを表示する方法は主に以下の２つがあって、

i. show() 関数を使う。

ii. jupyter notebook 環境のブラウザを使う。

これらは環境に依存する（環境構築をしたPCでのみできる）ため、webサービスに転化するのが難しいです。

しかしこの方法なら、webサービスとして公開できます。

３：参考URL

今回は以下のサイトたちを参考にいたしました。

FlaskとTwitter APIで、ツイッターのソーシャル分析アプリを作りました

グラフ作成にオススメ！「Chart.js」がかんたんに使えてイイ感じ | vdeep

[Python] Flask 入門 - ゾンビでもわかるPythonプログラミング

以上です、今回も足を運んでいただきありがとうございました。

2018-08-05

chart.js + Flask で円グラフをWEB上に表示する。　2018/8/5

かえるるる（＠kaeru_nantoka）です。

今回は, Flask + chart.js で円グラフを20分でWEB上に表示することができたので備忘としてまとめておきます。

＊目次

１：コードと解説

２：何ができるようになるの？

３：参考URL

＊内容

１：さっそくコードです。今回のディレクトリ構成は以下の通りです。

FlaskProject/server.py
/templates/index.html

＊

#server.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.debug = True
    app.run(host='0.0.0.0', port=7777)

はい、たったこれだけ（8行）で localhost:7777 に index.htmlを表示することができます。
びっくりですね！

同じPython フレームワークのDjangoでいうと、

3行目・・・urls.py
4~5行目・・・views.py
6~8行目・・・setting.py

の役目をそれぞれ担当しており、それらが1ページにまとまっているという構成になっています。
ちなみに、render_template()はtemplatesフォルダに置いてあるhtmlファイルを表示してくれます。

＊ /templates/index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Chart.js + flask</title>
    <meta charset="UTF-8">
  </head>
  <body>

    <h1>Chart.js + flask</h1>

    <div style="width: 50%">
      <canvas id="pie-chart" height="300" width="450"></canvas>
    </div>

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

  　<script>

      //http://vdeep.net/chart-js 参照

                var pieData = [
          {
            value: 37,
            color:"#9acce3",
            highlight: "#aadbf2",
            label: "現預金"
          },
          {
            value: 25,
            color: "#70b062",
            highlight: "#7fc170",
            label: "国内債券"
          },
          {
            value: 17,
            color: "#dbdf19",
            highlight: "#ecef23",
            label: "国内株式"
          },
          {
            value: 10,
            color: "#a979ad",
            highlight: "#bb8ebf",
            label: "外国債券"
          },
          {
            value: 8,
            color: "#cd5638",
            highlight: "#e2694a",
            label: "外国株式"
          },
          {
            value: 3,
            color: "#cd56ab",
            highlight: "#e269df",
            label: "REIT"
          }


          ];

          window.onload = function(){
          var ctx = document.getElementById("pie-chart").getContext("2d");
          window.myPie = new Chart(ctx).Pie(pieData);
          };
    </script>
  </body>
</html>

今回は個人の保有資産データを視覚化してみました。
以下の写真のような表示になります。

f:id:kaeru_nantoka_py:20180805013750p:plain

ポイントは、

もっと読む

コメントを書く

2018-07-25

PythonでAPIからほしい値を取得する。（2018/07/25）

かえるるる（@kaeru_nantoka）です。

自作Djangoアプリの制作過程で YouTube Data

API (https://developers.google.com/youtube/v3/) を扱うことがあり、この時にハマったことと解決策を書いていきます。

前提として、今回のDjangoアプリは

project名：myTutorial

app名：api

であるとして読み進めください。

ほしい値（目的）
videoIdとは？
何ができるの？
解決策（お急ぎの方はここからお読みください！）
どうつまづいたか
まとめ

内容

１. YouTube Data API を叩いて得られるオブジェクトの中に、

「　videoId　」というものがあります。本エントリではDjangoアプリでこれを取得してHTML上に表示します。

２. videoIdとは「M7lc1UVf-VE」のようなもので動画一つ一つを識別する一つのタグのようなものです。

（ちなみにこれはYouTube公式のサンプル動画のID）

３. videoIdで何ができるの？

以下のようなものをhtmlに埋め込む。

すると、

このように簡単に動画をWebページ上に表示できます！

赤太字で表したのがこの動画のvideoIdです。

今回はこれをDjangoを用いてAPIから取得します。

４. 解決策

お待たせしました本エントリの本題です。

まず、実際に書き込むのは、

　api/urls.py (デフォルトでは無いので要作成)

　api/views.py

myTutorial/urls.py

の3つです。

＊(api/urls.py)

from django.urls import path
from api import views

app_name = 'api'
urlpatterns = [

path('foge/hoge/', views.hogehoge, name='hogehoge'),
]

＊(api/views.py)

import json, requests
from django.http import HttpResponse

def youtube_search(request):

YouTube_API_KEY = "Your_API_KEY"

url = "https://www.googleapis.com/youtube/v3/search?key=" + YouTube_API_KEY + "&part=snippet&q=" + (検索ワード) +"&type=videos"

headers = {"content-type": "application/json"}
r = requests.get(url, headers=headers)
data = r.json()
vId = data["items"][1]["id"]["videoId"]

return HttpResponse(vId)

＊(myTutorial/urls.py)

from django.contrib import admin
from django.urls import include,path

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')), # 追加
]

これで、localhost/api/foge/hoge/ で検索すると

webページ上に M7lc1UVf-VE が表示されます！

５. 私がつまずいたのは取得したオブジェクトの要素を取得するところです。

data["items"][1]["id"]["videoId"]

とあるように、videoIdは返り値dataの中のitemsという要素の２つ目の中のidの中にあります。

私は当初 JavaScript でAPIを叩いていたのですが、JSはオブジェクトの要素にアクセスする時、

data.items[1].id.videoId

というようにアクセスします。

PythonでAPIを叩いてみる！

Pythonのrequestsを使ってみる！

といった記事はよく見かけたのですがその要素を取得することにフォーカスした記事を見つけられなかったので本エントリを書いたのでした。

６. まとめ

オブジェクトの要素を取得する方法。

JS => data.items[1].id.videoId

Python => data["items"][1]["id"]["videoId"]

以上です！

かえるのプログラミングブログ

プログラミングでつまずいたところとその解決策などを書いていきます。

［つづき］chart.js + Flask で円グラフをWEB上に表示する。　2018/8/5

chart.js + Flask で円グラフをWEB上に表示する。　2018/8/5

PythonでAPIからほしい値を取得する。（2018/07/25）