miyupaca log

2020-09-22 yps学習記録その7〜準備編〜

2020/09/22

今回もLaravelでアプリを作る課題なのですが、もりもりなので絶賛取り組み中です。
準備編として記事を投稿したいと思います。

やったこと

  • Laravelでwebアプリを作る準備

    • worldデータベースの準備
    • プロジェクトの準備
    • Gio.jsの導入

今回のお品書き

今回作るアプリの条件は

  • MySQL公式のデータベースを使うこと
  • JSライブラリGio.jsを使うこと

worldデータベースの準備

まずは公式からデータをいただいてくる。

cd /tmp
wget https://downloads.mysql.com/docs/world.sql.zip
unzip world.sql.zip

mysql cli入ってDBを作り、解凍したデータを入れていく。

mysql> create database world;
mysql> use world;
mysql> source world.sql;
mysql> show tables;
+-----------------+
| Tables_in_world |
+-----------------+
| city            |
| country         |
| countrylanguage |
+-----------------+
3 rows in set (0.00 sec)

mysql> exit;

無事データが入った！
こちらを後でプロジェクトに連携させて使えるようにする。

プロジェクトの準備

$ composer create-project --prefer-dist "laravel/laravel=7.25.0" gio_app
$ cd gio_app
$ php artisan key:generate
$ sudo chmod -R 777 storage/ bootstrap/cache/
$ vi .env

envにデータベースの名前と自分の設定したパスワードを入れておく。
これでLaravelから使えるようになる(*･ω･)ﾉ

あとはプロジェクトを新規作成する時にやってるnginxの設定変更。

$ sudo vi /etc/nginx/conf.d/default.conf
// 然るべきところを「root /var/www/gio_app;」に変更。
$ sudo systemctl restart nginx
$ sudo systemctl restart php-fpm

これで作ったLaravelプロジェクトにアクセスできることを確認。
プロジェクトの初期設定関連は主にtask2でやっていたことの復習。

Gio.jsの導入

公式はこちら。めちゃめちゃ格好いい。
これまでの手順を振り返って手順を踏んで行ってみる。

$ npm install
$ npm install cross-env
$ npm install giojs --save

(そしてここで私はGio.jsの導入に半日くらい詰まる地獄に入る。)

以下、自分が表示できるまでに行った方法を載せる。

まずはGio.jsの読み取り。
resourse/js/bootstrap.jsに以下の記載を追加。

window.GIO = require('giojs');

これはresourse/js/app.jsに読み取られる。

あとはこれを使ってブラウザに表示する。
resourse/js/script.jsというファイルを作って中身にサンプルコードを入れる。

var container = document.getElementById("globalArea");
var controller = new GIO.Controller(container);
controller.addData(data);
controller.init();

webpack.mix.jsでこのファイルをコンパイルするようにする。

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/script.js', 'public/js') //ここを追加
   .sass('resources/sass/app.scss', 'public/css');

npm run devしてコンパイルが通ればok。

welcome.blade.phpに表示用のdivとbody末尾にscript読み込みを追加。

...
    
<div id="globalArea" style="width:800px;height:420px"></div>


<script src="https://raw.githack.com/syt123450/giojs/master/build/gio.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/script.js') }}"></script>
</body>

これで地球儀が表示できるはず。

意外と？LaravelにJSライブラリを追加する手順で参考記事があまりなくて辛かった。
wget等でpublic/jsに直接必要なファイルを持ってきても良いみたい。

あと、Gio.jsの公式サンプルがjQuery入れているので同じように使うとわかりやすそう。
(私はBootstrapと一緒に導入する予定٩( ‘ω’ )و)

気づきなど

  • 何かのデータの流れを可視化するものなので、API使うとかajaxとか勉強することがたくさん…！そしてJS久しぶりです。苦しみながら楽しみます。

miyupacaの学習記録ブログです。