API連携した簡易的なアプリケーション開発があります。APIを連携させた簡易的な動画データ分析アプリを開発します。APIを活用してみたい人これらの悩みを解決しながら、動画データ分析アプリを開発します。動画データ分析アプリケーションの完成画面は以下になります。以下の章から開発工程を記載していきます。独学に限界を感じたなら...とりあえず独学でプログラミング学習を始めたけど、右も左も分からずあなたの時間が無駄に終わるどころか挫折するかもしれません。APIによる動画データ分析アプリは、以下の項目を利用します。chart.js各種必要となるプログラミング言語・ライブラリ等のインストールを開始します。Pythonのインストールができていない人は「【Python初心者入門】ダウンロードとインストール方法を解説!」で解説します。APIを利用する際にGoogleアカウントを使用します。v3を利用した特定チャンネルの動画情報取得」で解説します。v3を利用した特定チャンネルの動画情報取得2020.05.12各種インストールが完了したら、早速任意のディレクトリにFlaskによるアプリのフォルダを作成します。top-moviesMacであればターミナルを使用し、任意のディレクトリにて上記コードを実行するとフォルダ作成できます。CUI操作が苦手な人であればデスクトップ上からコマンド入力せず作成できるので、わからない人はGUI操作で作成しましょう。任意のフォルダ作成ができたら、以下のファイル/フォルダを作成したフォルダ内に作ります。index.htmlフォルダ内のapp.pyはFlaskを保存するためのPythonファイルです。KEY等の認証情報を格納するファイルになります。templatesフォルダの中は、空のHTMLファイルを作成してください。FlaskにてHTMLファイルを呼び出し、ブラウザ上に表示します。Flaskによる動画データ分析アプリケーション開発の流れ以下の4つの工程に分けて、動画データ分析アプリ開発を進めます。各開発工程で、必要となるライブラリや編集ファイル等は解説の中で記載します。ヘッダーと入力フォーム作成ここでは、ヘッダーと入力フォーム作成にあたって以下の項目を実施します。Flask/google-api-python-clientのインストールtemplatesフォルダ内のindex.html編集アプリフォルダ内のapp.py編集アプリフォルダ内のconfig.py編集はじめにFlaskを任意で作成したアプリフォルダ内にインストールします。FlaskのインストールMacであればターミナル、Windowsであればコマンドプロンプトを利用して任意フォルダまでディレクトリを移動し、Flaskとgoogle-api-python-clientをインストールします。google-api-python-clientpip3コマンドを利用して任意フォルダにFlaskとgoogle-api-python-clientをインストールします。今後、アプリ開発の中でpip3コマンドは多用するため、pipライブラリのインストールあるいは使い方を理解しておきましょう。次に、アプリフォルダ内に作成したtemplatesフォルダにあるindex.htmlを開きます。空のindex.htmlにて、以下のコードを記載します。--></body></html>HTMLファイルの<head>タグの中では、以下のコードを追加しています。BootStrap5のCDN実行コード<title>タグによるブラウザタブのタイトル名<head>タグには、利用するCDN実行コードや<title>タグを含め、アプリに関するメタ情報を組み込めます。HTMLファイルの<body>タグの中では、以下のコードを追加しています。上記コードをindex.htmlに保存します。次に、アプリフォルダ内に作成したapp.pyを開きます。空のapp.pyにて、以下のコードを記載します。app.run(host="localhost")app.pyの中では、以下のライブラリを追加しています。apiclient.discoveryflaskconfig(config.py参照)開発工程が進む上で、ライブラリを追加していきます。グローバル定数/変数の定義では、以下のコードを追加しています。APIセットCHANNEL_IDappこちらも開発工程が進む上で、定数/変数を追加していきます。次に、アプリフォルダ内に作成したconfig.pyを開きます。空のconfig.pyにて、以下のコードを記載します。KEYをセットしてください。Macであればターミナル、Windowsであればコマンドプロンプトにて以下のコードを実行します。app.pyコマンドを実行するとFlaskアプリが起動するため、http://localhost:5000をブラウザ上で表示させます。以下の画面がブラウザ上で表示されます。ブラウザタブのタイトル名/起動画面/入力フォームが正しく表示されれば、OKです。APIにてデータ取得できます。ターミナルあるいはコマンドプロンプトにて、CHANNEL_IDが表示されれば問題なく取得できています。取得した特定チャンネル情報表示ここでは、取得した特定チャンネル情報表示にあたって以下の項目を実施します。pandasのインストールtemplatesフォルダ内のindex.html編集アプリフォルダ内のapp.py編集はじめにpandasを任意で作成したアプリフォルダ内にインストールします。pandasのインストールMacであればターミナル、Windowsであればコマンドプロンプトを利用して任意フォルダまでディレクトリを移動し、pandasをインストールします。pandaspip3コマンドを利用して任意フォルダにpandasをインストールします。今後、アプリ開発の中でpandasによるデータ整形を多用するため、pandasの各メソッドは理解しておきましょう。次に、アプリフォルダ内に作成したtemplatesフォルダにあるindex.htmlを開きます。index.htmlにて、以下のコードを記載します。%}の中に記載されているHTML要素を出力表示しています。以下が追記コードを含めた全体のindex.htmlになります。--></body></html>テーブル内の値は、app.pyにて作成するchannel_columnsとリスト型でreturnしたchannels変数をfor文にてループ処理出力しています。次に、アプリフォルダ内に作成したapp.pyを開きます。app.pyの中では、以下のライブラリを追加しています。#追加1app.pyの中では、以下のライブラリを追加しています。pandasライブラリの追加は、pandasで最後になります。グローバル定数/変数の定義では、以下のコードを追加しています。]index.htmlにて入力されて取得したチャンネルIDを変数CHANNEL_IDに格納します。channel_columnsでは、チャンネル名/登録者数/投稿本数/登録日を設定しています。CHANNEL_IDchannel_columnsこちらも開発工程が進む上で、定数/変数を追加していきます。APIにてチャンネル情報を取得するget_channel_df関数を作成します。channels.values.tolist()get_channel_df関数では引数をCHANNEL_IDとし、プライベート変数channelsとchannel_responseを用意しています。APIから取得したデータをfor文によって回し、pandasのSeries()メソッドで定義した変数seに格納して変数channelsへappendメソッドを利用して追加しています。最後に、channels.value.tolist()にてリスト型データを返します。メインとなるindex関数では、以下のコードを追加しています。#追加7変数CHANNEL_IDでは、index.htmlにて入力フォームで取得した値を格納しています。変数channelsでは、get_channel_df関数を呼び出し、リスト型のチャンネルデータを格納しています。channel_columnsを持たせてindex.htmlへ受け渡しています。追加後の全体コードが以下になります。app.run(host="localhost")改めてapp.pyを実行してみると、以下の画面が表示されます。次に、任意のYouTubeチャンネルのCHANNEL_IDを入力して『取得する』をクリックすると、以下の実行結果が表示されます。筆者は個人的に書店関連のYouTubeチャンネルにハマっているので、本記事では”有隣堂しか知らない世界”チャンネルのチャンネルIDを入力して実行しました。あなたの好みでチャンネルIDをコピペしてみてください。チャンネル内の各動画の視聴回数/高評価数グラフ化ここでは、チャンネル内の各動画の視聴回数/高評価数グラフ化にあたって以下の項目を実施します。templatesフォルダ内のindex.html編集アプリフォルダ内のapp.py編集はじめにtemplatesフォルダ内のindex.htmlを編集します。templatesフォルダ内のindex.html編集アプリフォルダ内に作成したtemplatesフォルダにあるindex.htmlを開きます。index.htmlにて、以下のコードを記載します。src="https://cdn.jsdelivr.net/npm/chart.js"></script><head>タグ内に上記のchart.jsに関するCDNコードを挿入します。--><body>タグ内に上記の混合グラフチャート用のHTML要素を追加します。<body>タグ内に混合グラフチャート用の<script>タグを追加しています。ここまでの全体のinde.htmlのコードは以下になります。次に、アプリフォルダ内に作成したapp.pyを開きます。グローバル定数/変数の定義では、以下のコードを追加しています。]後述するget_videos_df関数で利用する再帰的処理用変数を定義しています。video_columnsでは、title/viewCount/likeCount/dislikeCount/commentCount/publishedAtを設定しています。(キャメルケースによる命名方式を採用)nextPagetokennextpagetokenvideo_columns定数/変数の追加は最後になります。APIにて各種動画データを取得するget_videos_df関数を作成します。nextpagetokenとし、プライベート変数searchesとvideosを用意しています。APIから取得したデータをfor文によって回し、pandasのSeries()メソッドで定義した変数seに格納して変数videosへappendメソッドを利用して追加しています。最後に、各種動画データを格納したvideosにてDataFrame型データを返します。メインとなるindex関数では、以下のコードを追加しています。#追加12変数videosでは、get_videos_df関数を呼び出し、DataFrame型の各種動画データを格納しています。video_columnsを持たせてindex.htmlへ受け渡しています。追加後の全体コードが以下になります。app.run(host="localhost")改めてapp.pyを実行してみると、以下の画面が表示されます。次に、任意のYouTubeチャンネルのCHANNEL_IDを入力して『取得する』をクリックすると、以下の実行結果が表示されます。表示されたグラフ上部の高評価数/視聴回数をクリックすると、単体でグラフを確認することができて左側の数字変動やグラフサイズを調整してくれます。chart.jsは非常に有効的なグラフチャートを示します。各動画データのテーブル表示ここでは、各動画データのテーブル表示にあたって以下の項目を実施します。各動画データのテーブル表示を実行するためにtemplatesフォルダ内のindex.html編集します。templatesフォルダ内のindex.html編集アプリフォルダ内に作成したtemplatesフォルダにあるindex.htmlを開きます。index.htmlにて、以下のコードを記載します。--><body>タグ内に上記のHTML要素を挿入します。このままテーブル表示を実行してしまうと、ブラウザ画面表示後にテーブルが長くなってしまい、画面全体のスクロール量が膨大になります。そのため、テーブルの高さを定めてコンパクトにスクロールできるように整形します。}</style>ここまでの全体のinde.htmlのコードは以下になります。--></body></html>改めてapp.pyを実行してみると、以下の画面が表示されます。次に、任意のYouTubeチャンネルのCHANNEL_IDを入力して『取得する』をクリックすると、以下の実行結果が表示されます。600px以上となればスクロール機能が実装されます。動画本数が比較的多いチャンネルで動画データを取得して確認してみてください。Flaskによる動画データ分析アプリのデプロイせっかくなので、ここまで開発したアプリケーションをネット上で公開するためにデプロイ方法をまとめます。KEYを指定した状態で開発しているため、利用者が一定の制限を超えてテストする可能性を考慮し、URL公開は控えておきます。そのため、ぜひ自身で開発したアプリを自分用としてネット公開し、利用してみてください。アプリのデプロイ方法として参考にして頂けると幸いです。Herokuアカウント作成ローカルPCのセットアップ(デプロイ準備)Herokuにアプリをデプロイ手順に沿って解説していきます。公式サイトのHerokuにアクセスします。『新規登録』をクリックしてアカウントを作成します。手順に沿って登録すれば、すぐにアカウント作成を完了できます。ローカルPCのセットアップ(デプロイ準備)Herokuにアプリをデプロイするために以下のファイルを作成します。requirements.txtruntime.txtProcfilerequirements.txtは、任意のディレクトリにて以下のコマンドを実行します。requirements.txtコマンド実行すると、任意のディレクトリにrequirements.txtが作成されます。herokuに何のライブラリをインストールすれば良いのか記載しています。requirements.txtは、Pythonのライブラリで何がインストールされているのかをリストにしてるテキストデータになります。runtime.txtも以下のコマンドで作成できます。runtime.txt次に、runtime.txtの設定を行います。runtime.txt上記のコードにて、runtime.txtにpythonのバージョンを指定させます。最後に、Procfileの指定を行います。Procfile任意のディレクトリ内のファイル構成が以下になります。index.html任意のフォルダを開いて確認してみてください。Herokuにアプリをデプロイ最後に、Herokuへアプリをデプロイします。CUIコマンドを実行するため、開発フォルダがあるディレクトリにてターミナルあるいはコマンドプロンプトで実施してください。Homebrewのインストールがまだできていない人は、以下のコードを実行します。https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"次に、Herokuをインストールします。heroku上記のコードを実行すると、herokuのインストールが完了します。次に、Herokuへログインを行います。ログインする際は、現在アプリ開発しているフォルダのディレクトリから実行しましょう。loginのコマンドを実行すると、ブラウザ画面にログイン状態を確認されます。次にHerokuにて適当なアプリ名を作成して、python起動を明示的に示すコマンドを実行します。web=1<app-name>の箇所に、任意のアプリケーション名を入力して実行してください。最後に、gitコマンドにてアプリケーションをpushすれば完了です。.にて現在のディレクトリ内のファイル/フォルダをコミット対象にします。commitにてファイル/フォルダを変更/追加できるように保存しています。masterにてファイル/フォルダをpushしてあげれば、作成したアプリケーション名でheroku用のURLが発行されます。KEYがデプロイ後変更することができないため、APIを何度も利用すると制限がかかり、アプリが使用できなくなってしまいます。IDを入力フォームから送信できるよう変更しました。APIのKEYを取得し、お好みのYouTubeチャンネルのURLバーに記載されているチャンネルIDをコピーして実行してみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Labとは?インストールや使い方を徹底解説!RECOMMENDこちらの記事も人気です。Notebookとは?インストールと使い...ABOUTこの記事をかいた人sugi大学卒業後、IT企業に就職を果たす。システム開発・人工知能に触れながら大手企業と業務をこなす。2019年2月から起業し、今に至る。自社サービス及び製品を開発、ブログ収入、クラウドソーシングなど、多方面で売り上げを立てている。