Elsaの技術日記(徒然なるままに)

主に自分で作ったアプリとかの報告・日記を記載

MENU

オフラインでjQueryやChart.jsを用いるために

先日、PythonのFlaskを用いてサーバのCPU使用率やメモリを可視化するWebアプリを作成してみました。
elsammit-beginnerblg.hatenablog.com

こちらを用いて監視作業を行っているのですが、
外部ネットワーク環境に接続せず、ローカル環境でも使用するケースが発生!!

先日のコードですと、jQueryやChart.jsが下記の通り
外部より取得・利用しているので外部ネットワークに接続していないと動かない!!

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

ということで、
今回はこちらのjQueryやChart.jsを外部ネットワークに接続しなくてもオフラインで使用する方法に関してまとめていきたいと思います。



■環境

今回動作させた環境ですがraspberryPi 4になります。
ただ、Linux OSであればこちらの手順は適用できるかと思います。

■準備

jQueryやChart.jsをオフラインで利用するには、
「ネットワーク経由で利用しているコードをローカルにダウンロード」
ことが必要になります。

jQueryやChart.jsをダウンロードするにあたり今回はnpmを用います。
各ライブラリ毎に専用のWebページがあるのでそちらから手動でダウンロードをするのもいいのですが、
面倒なのでパッケージ管理ツールであるnpmを用いることにしました。

npmをインストールするにはこちらを実行すればOK。

sudo apt install npm

jQueryやChart.jsをローカルへダウンロード

では早速npmでダウンロードしていきます。

まずはjQuery
こちらのコマンドを実行すればOKです。

npm install jquery --save

実行時にnode_modulesというフォルダが作成されかつ、
node_modules/jquery/dist配下にjquery.jsファイルが存在すればインストール成功です。

次にChart.jsです。
Chart.jsをこちらのように実行すると最新バージョンのChart.jsがインストールされます。

npm install chart.js

ダウンロードされたファイルを確認したのですが、、
Chart.bundle.jsがない!!

試しにChart.jsをもちいてみたのですが、

ChartBuf.options.scales.xAxes[0].ticks.max = 10;
ChartBuf.options.scales.xAxes[0].ticks.min = 0;    

といったコードを実行するとticksが存在しない!!と怒られてしまう。。

そこで、外部ネットワークと同様のバージョンに合わせるために、

npm install chart.js@2.8.0

で2.8.0のchart.jsをダウンロード。
すると、
node_modules/chart.js/dist配下にChart.bundle.jsが存在!!
無事に動かすことが出来ました。

■Flaskでダウンロードしたライブラリを用いてみる

先ほどの手順でnode_module配下にjQueryとChart.jsがダウンロードできました。
Flaskの場合はさらにパスを通す必要があります。
と言ってもすでに自作javascriptを利用するためにパスを通していたのでこちらのパスを用いることにしました。
Flask用のpythonコードと同階層にstaticフォルダを作成し、
自作javascriptと同様に

    <script src="{{url_for('static', filename='node_modules/jquery/dist/jquery.js')}}"></script>
    <script src="{{url_for('static', filename='node_modules/chart.js/dist/Chart.bundle.js')}}"></script>

といったコードをhtmlファイルに追記。
これでオフライン環境でもjQueryやChart.jsが用いることが出来るようになります。

一応htmlコードを抜粋して載せておきます。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{{url_for('static', filename='node_modules/jquery/dist/jquery.js')}}"></script>
    <script src="{{url_for('static', filename='node_modules/chart.js/dist/Chart.bundle.js')}}"></script>
    
    <!--script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script-->
    <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
</head>

■最後に

今回はjQueryやChart.jsをオフライン環境で利用するための方法をまとめてみました。
Chart.jsはChart.bundle.jsファイルが見つからず結構苦労しました。。
まずはバージョンを確認しろ!!っていうことですね。。反省。。