AzureのWebAppsを使ってみる
概要
Azure for StudentsではAzure App Service(WebApps)が10個まで無料で作成できます。
Web AppsとはJava、Ruby、Note.js、PHP、Pythonといったサーバーサイドフレームワークを使ったWeb アプリケーションをサーバーの設定無しで公開できるサービスです。いわゆるSaaSです。
今回はこれを使ってPHPのプログラムを公開してみようと思います。
Web Appsの登録
今回はPHPプログラムをデプロイするので、まずWeb Appsを選択します。
次に、アプリ名やPHPバージョン等を設定します。
作成が完了したら、サイドバーの[ダッシュボード]や[リソースグループ]から作成したWebAppsの画面に移動し、[デプロイセンター]をクリックします。
デプロイするコードのアップロード方法はいくつかありますが、今回はGitHubのコードをデプロイする方法を使います。
GitHubをクリックすると、GitHubの認証画面に移動し、そこでAzureからのアクセスを許可すればOKです。
最後にGitHubのリポジトリを選択し、[続行]を押せばデプロイできます。
結果
以下のURLが今回デプロイしてみた結果です。(無料試用は19年7月までらしいのでそれ以降については今後考えます。)
https://nicocommentsgraph.azurewebsites.net
（すごく重いです。これはAzureのサーバーがUSになっていることもありますが、そもそも作成したPHPプログラムそのものが重いです。）
正直な感想として、公開までの手順が簡単すぎて本当に驚きました。
何もしなくてもHTTPSになってるし、ファイアウォールやポート解放などのすべての作業が省略されていて、話では聞いていましたが実際にやってみると今更ながらWeb界隈の動きの速さを実感しました。
ちなみに
今回試しに公開してみるために、初めてウェブアプリケーションを書いてみました。
PHPを書くのも今回が初めてなので、JavaScriptとのデータのやりとりなど悩みました。（JavaScript内に<php?でPHPコードを動かすとかわけわからん。他のやり方絶対ありそう）
HTMLとJavaScriptとPHPという三つの言語をうまく書き分けることができず、ぐちゃぐちゃに書いてしまったので読みにくいプログラムになってしまいました。今後コーディングスキルを上げて、リファクタリングしたいです。
最後に、作成したプログラムについて説明しておきます。
プログラムの概要
ニコニコ動画には技術部とよばれる技術的な内容の動画が存在しますが、技術を説明するという特性上どうしても説明が長く、なにがすごいのか知る前に動画を閉じてしまうことが個人的には多いです。そこで、コメントが多くついているタイミングから再生を始めることが出来れば、その動画のポイントをつかむことができ、ニコニコ技術部タグの動画が見易くなると考えました。
プログラムの内容
ニコニコ動画の技術部タグのランキングにアクセスし、各動画のコメント数の推移をグラフで表示します。
グラフをクリックすると、ウインドウ右下にクリックした位置にシークされた動画が表示されるので、そこから再生を開始できます。
これにより、例えばコメント数が他の地点に比べて多い、つまり盛り上がっている地点から動画を再生することができます。
プログラムの実装方法
PHPによる処理
そのxmlから取得したランキングの動画URLにアクセスし、動画ページ内に存在する動画コメントサーバー用ID(Thread id)を取得します。
この動画コメントサーバー用IDを使ってコメントサーバーから動画のコメントの最近1000件をjson形式で取得します。
このjsonデータからコメントの動画内の地点（vpos)をまとめてCanvasJSに表示できるよう整形します。
Java Scriptによる処理
PHPで整形したグラフのデータをCanvasJSでグラフ描画します。
グラフがクリックされた際にはその位置にシークされた動画再生画面を右下のiframeに呼び出します。
ニコニコ動画は同時再生が5件程度までしか許可されていないようなので、5件ごとの表示とし、その表示範囲の選択のHTMLフォームの処理(変更の取得、Cookieの処理など)を行います。
