Laravel5.7でJavascript(Chart.js)を使うために
チュートリアルを総なめにしているとき
いつになったら華々しく本編(サービス開発)に入れるんだろうな
って思ってちょっとげんなりしなくもない。
さて、Laravel5.7を使っているのですが
Javascriptでページに動きを導入したい。
とりあえずChart.jsという物があるので、これでページにグラフを表示してみよう。
と、思い立ったものの、
いわゆるお作法がわからないので、何故か表示されない…となっていました。
自分と同じようによーし初めてLaravel触ってみちゃうぞという人で同じような悩みの人の解決になればなと書き残すことにしました。
Laravelのどこになんのファイルを置いて、どこにJavascriptを書けばいいの
ここでひたすら壁にぶち当たっていました。
まずJavascript関連のファイルとその置き場について
調べてみたところ、Laravelでは基本的なCSSファイルおよびJavascriptファイルは
「Public」ディレクトリに収められているようです。
こんな感じに「public/js/app.js」に置いてあるのが基本のjsファイルみたいです。
「custom.css」と書いてあるファイルがcssフォルダにあるように
同じところに自分のオリジナルの設定を書いたファイルを入れておいてOKみたいです。
なんのファイルのどこに読み込みの文章を書くの
Laravelであるということは、基本的にはテンプレートを用いてウェブを作っている(と思います)
「resources/views/layouts」あたりに基本となるbladeテンプレートファイルを置きます。
このlayoutsのテンプレートについては各自がプロジェクトを作ったあとに用意する必要があるはずです。
ねーぞ? ってなった方は作ってください。
別にlayoutsじゃなくてもいい?
基本、自分のように始めたばっかりマンはおそらく何らかのサンプルコードをコピペしたり、このように作るのです。をなぞっている段階かと思うので、大体はlayoutsを用意するようなものをやっているのではないかなーと思います。
もしそんなものを使っていないタイプのサンプルをやっている場合は、「なんちゃら.blade.php」で
<!DOCTYAPE html>
で中身の記述が始まっているファイルを探すといいかなと思います。
で、どこに書くか
<head> このタグの中に書いてください </head>
なんて書けばいいの
1: <script src="js/app.js"></script>
2: <script src="{{ asset('js/app.js') }}"></script>
cssなら
1: <link href="css/app.css" rel="stylesheet" type="text/css">
2: <link href="{{ asset('css/app.css') }}" rel="stylesheet">
のように、1か2のどちらかを書けばOK!(たぶん)
読み込みのときに、jsとcssは 「public」 を基準にファイルを探すのがLaravelの機能のようなので、srcやhrefで 「public/js/app.js」にはならないんですね。
ちなみに、さっきの画像のような自分のオリジナルのjsあるいはcssファイルを用意した場合は
<link href="css/custom.css" rel="stylesheet" type="text/css">
のように「custom.css」を読み込めばOKのようです。
コンパイルってやつがあるらしいが?
あるらしいですね…
jsファイルもcssファイルも、インターネット上に存在していて参照可能であれば、別に自分で用意していなくても読み込みの文章を書いていれば自分のサイトに反映させることができます。
ですが、読み込みの度にいろんなサイトに配置してある設定ファイルを読み込みに行って戻ってきて反映して…のようなことをやっていると表示に時間がかかります。
なので、小規模なサイト作りではともかく、大きなサイトや頻繁に読み込みが発生するようなサイトを作ろうとした場合は、設定ファイルを自前で持っていたほうが読み込みが速くなる。
という理論と自分は思っています。
で、Bootstrap(CSSの設定ファイル群)や、Chart.jsのようなJavascriptの設定ファイルが多くなってきた場合は、プロジェクトにファイルをインストールし、読み込ませる感じです。
読み込ませるにも、この範囲はこのフォルダのこのファイルのここ、こっちの記述はあっちのフォルダの…とバラけているとまた無駄な時間を食うので、ひとまとめにしておくね! というのがコンパイル と認識しています。
これをやらないとページにjsやcssを反映できない というわけではないので、正直よくわかんないとか。まずは動いているとこが見たい。的なレベルであれば気にしなくてよさそうです。
たとえばBootstrapやChart.jsを使いたいときは
先ほど言っていたように、インターネット上に公開されているファイルにアクセスすれば読み込んでくれるようになります。
例としてChart.jsを読み込もうとすると、<head> の中に
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
というように書けば、必要な設定を読み込んでくれます。
いざChart.jsを表示してみよう
chart.js を利用するにあたり知らなきゃいけないことは
表示されるのは <canvas id="グラフ名"></canvas> タグで囲われた場所ということ。
なのでまず表示したい個所に上記タグを書きましょう。
次に、グラフの表示内容の設定などを書く文章については
<script></script> で囲う必要があります。
これはcanvasのすぐ下に書いちゃってOKみたいです。
本当は別ファイルに書いて読み込む。 がスマートなんでしょうけど
とりあえず動かしてみよう。 なので隣に書いて動きを見ました。
var drawGraph = function(data){
var ctx = document.getElementById('グラフ名').getContext('2d');
そのほか設定とか値のデータとかもろもろこの辺に書く
}
drawGraph(data);
上記のような文章をscriptタグ内に書いて、書いてある中身が正しければcanvasタグを書いた場所にグラフが表示されているはずです。
グラフのサイズが思ったよりでかい!
基本的にはcanvasタグが書かれたエリアのサイズの限界まで大きくなる仕様?っぽいようです。
ちなみに公式リファレンス(を日本語化してくれているもの?)を読むと
次の例は動作しません:
<canvas height="40vh" width="80vw">
: 無効な値です。キャンバスはサイズ変更されません。
とあるので、canvasにサイズを指定しても無駄です。僕はこれやって首かしげてました。
じゃあどうするの
さっきの<script>タグの中の設定のほうにある
var ctx = document.getElementById('graph').getContext('2d');
の下に
ctx.canvas.height = 150;
という感じでcanvasの高さや横幅を指定すれば反映されるみたいです。
その上で、
options: {
responsive: true,
~~}
みたいな感じでレスポンシブを可にしておくと
画面サイズを大きくした時は最大150px 小さくした場合はもう少し小さく?なるみたいですね。
以上、よくわかんなくていろいろ検索した結果の共有でした。