2018-11-10

Railsインストール〜アプリ作成手順メモ (Mac)

Ruby on Railsで回り道して簡単なアプリができる工程を理解するメモ

インストール準備

$ rbenv install 2.5.3 rbenvのバージョンが古くてできなかった

$ rbenv install --list どのバージョンのインストールができるか確認やっぱり2.5.3はなかった

$ brew update

$ brew install rbenv rbenvのインストールをしなおそうとしたけど既にインストールはされているからエラー

$ brew reinstall rbenv 再インストールはこれでできる

$ echo 'eval "$(rbenv init -)"' \>\> ~/.bash\_profile rbenv の初期化スクリプトを .bash_profile へ追加する（PATHを通す）

Windowsだったら・・・

$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' \>\> ~/.bash\_profile （export PATH=\$PATH:追加したいコマンド検索パス）が必要。そのあとMacと同じように $ echo 'eval "$(rbenv init -)"' \>\> ~/.bash\_profile

参考： https://qiita.com/soarflat/items/d5015bec37f8a8254380 https://dev.classmethod.jp/server-side/language/build-ruby-environment-by-rbenv/

$ source ~/.bash_profile sourceコマンドを実行してPATHを通す

$ rbenv install 2.5.3 やっとできた

$ rbenv global 2.5.3 今使ってるバージョンから2.5.3に切り替え

$ gem install bundler --no-document bundlerのインストール --no-document:ドキュメントをインストールしないため、早い

$ gem install rails --no-document Railsのインストール

インストールとアプリの作成

$ rails new sample $ cd sample

$ rails g scaffold book scaffoldは、アプリケーションにおける必要な機能であるモデル・ビュー・ルーティング・マイグレーション・コントローラー(CRUD)を一気につくる(すごい) ここではbookという名前のひとつのサービスがscaffoldによってできている

Rails generateコマンドについて

$ rails generate GENERATOR [args] [options] Laravelでいうartisanコマンドモデルやマイグレーション生成したり、とにかくなんでも自動生成してくれる便利なもの generateをgと略せる

$ rails db:create $ rails db:migrate DB作成してマイグレーション

マイグレーション機能の役割マイグレーション機能をひと言で説明すると、「SQLを書くことなくRubyでデータベース内にテーブルを作成することができる機能」です。

https://www.transnet.ne.jp/2015/12/29/rails%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8D%E3%82%84%E3%81%99%E3%81%84%E3%80%8C%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%80%8Dcolnr/ より

$ rails server サーバー起動。http://localhost:3000/books に飛ぶと、アプリが表示される。 /booksなんて記載した覚えがないのに、実はマイグレーションした時点で/config/route.rbにrouteが自動で記載されている

注意つくったのは「book」だけど、urlはbooks！！

機能はつくれたけれどわかりづらい・・・

$ rails g scaffold bookだとどんな機能ができたのかわかりづらい。このコマンドだとid, created_at, updated_atのカラムしかないから確認しづらいから。

もっとわかりやすいCRUDを

例えば、bookではなく $ rails g scaffold novel name:string author:string でnovelをつくる。 bookと違うのが、データ型を指定してnameカラムとauthorカラムを生成しているところ。その後さっきと同様に $ rails db:create; rails db:migrate （DB作成とmigrate一気にできる！）

$ rails server後にhttp://localhost:3000/novelsに飛ぶと、 NameとAutherの作成、詳細確認。編集、削除ができるアプリが作成されている。bookでもこれが作られていたけれどわかりづらかっただけ。

/db/schema.rbを見てみると、

ActiveRecord::Schema.define(version: 2018_11_09_105024) do

  create_table "books", force: :cascade do |t|
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "novels", force: :cascade do |t|
    t.string "name"
    t.string "author"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

とこれもまた自動で記述されているのがわかる。

テーブル（ここではbooksとnovelsの２つ）の構造は/db/schema.rb内に記述される。

テーブルの中身を表示

テーブル内にどんなレコードが入っているか表示したいときはrails consoleコマンドを使う $ rails c で起動。 Novel.allと入力すれば、 => #<ActiveRecord::Relation [#<Novel id: 1, name: "test1", author: "test1", created_at: "2018-11-09 10:51:49", updated_at: "2018-11-09 10:52:50">]> と返ってきて、中身がわかる。

感想

ここ2ヶ月はLaravelを中心に勉強していたけど、今日初めてRailsをちゃんと触ってみた。似ているようで似ていない。 Railsの勉強をすることで同じことを違う手順でしているようなイメージ。Laravelの機能と照らし合わせながら勉強したら、ひとつひとつの仕組みをより理解できそう。 memo: Rails Girls Okinawaの記事はまた別に書く。

2018-11-06

LaravelでVue.jsを使う

今までLaravelとVue.jsを別々に勉強してきたけど、実際どうやって2つを組み合わせて１つのアプリをつくるのかは知らなかったから備忘録として残しておく。今回は、この間やっと理解したHTTPクライアントのaxiosを使ってみる。

LaravelからVue.js・axiosを使う方法

実は、Laravelにはもともとpackage.jsonにVue.jsとaxiosが記述されている。だから、 $npm install とだけ入力すればnpmリポジトリからライブラリをダウンロードしてくれる！！

その後、 $npm run dev で/public/css/app.cssと/public/js/app.jsが作成され、package.json内に書かれたシェルスクリプトを実行する ※Laravelのpackage.jsonには、bootstrap-sassのver.3.3.7がインストールされるように記述されている app.js、app.cssは更新する度に$npm run devする。

この方法はローカルインストールといって、対象のプロジェクトのみで使用可能なやり方。

npmってなんだろう

npm = Node Package Manager Node.jsのモジュールを管理するツール。

package.json npｍでインストールしたパッケージのバージョン情報を格納する場所。

つまり、 package.jsonに書いてある内容を元にしてLaravelは何を使うかを決める！で、npmコマンドで指示する！

package.jsonがなかったら・・・

因みに、Laravel以外でVue.jsを使うときはpackage.jsonがないかもしれないから自分で用意する！そのやり方をメモしておく。

npmのバージョンを確認（npmコマンドが使えるかの確認も兼ねて） $npm —version
プロジェクトのルートディレクトリで $npm init package.jsonが作成される
package.jsonに使いたい情報を記述
プロジェクトのルートディレクトリで $npm install package.jsonに記載されたパッケージがインストールされる

実際につくってみる

今回はこちらのサイトを参考にしてアプリをつくってみました。

tonyo.design

基本的に上記のブログを参考にすればできるのですが、自分でやっていてわかりにくかったところだけ残しておきます。

先程も記載しましたが、
$npm run dev
コマンドによってできるのは
- /public/css/app.css
- /public/js/app.js
の2つです。中を覗くとわかるのですが、めちゃめちゃ行数が多い。

この２つのファイルを読み込むために welcome.blade.phpの中に書き込んでいきます。

headタグ内に
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

bodyタグ内に
<script src="{{ asset('js/app.js') }}"></script>

を追加します。そうすることで読み込めるようになります。

肝心のVue.jsとaxiosのコードを記述するのはresources/assets/js/app.jsです。 /public/js/app.jsとは違うので注意！！

また、ブラウザはFireFoxを使用していたのですが、FireFoxだとなぜかタスクの追加が出来ませんでした。 Chromeで再度試したところ出来ました！

なんとなくだけどVue.jsとLaravelの関係がわかってきたから、次はコード丸パクリではなくオリジナルのアプリをつくって見ようと思う。個人的に、Vue.jsでマークダウンエディタが簡単に実装できることに感動したから、マークダウン形式で書ける保存可能なメモ帳アプリを作ってみる予定。あるあるだけど・・・

つくったらまたブログ書きます。

2018-10-27

axiosで外部データを取得

axiosで外部データを取得する

参考元書籍「基礎から学ぶ Vue.js」 https://cr-vue.mio3io.com/guide/chapter2.html#%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B

本を読んでいたらaxiosという便利そうなライブラリについて書かれていたので調べてみたメモ。

axios(アクシオス)とは

axiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。本ブログのタイトルには「フロントエンド」と書きましたが、Node.JSでも利用できます。axiosの特徴して以下のような点が挙げられます。

https://www.yoheim.net/blog.php?q=20170801より

配列が書かれた外部のJSONファイルを読み込んで、データを取得し、表示したりするっていうイメージ。 CDNで読み込むときは、bodyに <script src="https://unpkg.com/axios/dist/axios.min.js"></script> を埋め込む。ここまではOK.けど、、、

この書籍にはmain.jsに ...axios.get('list.json').then(function (response) {.... を書くって書いてあったけど、list.jsonってなんだ？ってなってた。

JSONファイルとは

JSONファイルとは JSONのルールに従って書かれた、テキストファイル（中身が文字だけのファイル）のことです。

https://wa3.i-3-i.info/word13799.html JSONのルールは配列みたいなやつ。

JSONファイルがなんなのかはわかったけど、このlist.jsonをどこに配置するのかは書かれていなかった。とりあえずlist.jsonをつくってindex.htmlと同じ配下に置いたけど読み込めず。

ずっと調べ続けて、見つけたのがこのサイト。 http://irts.jp/2017/02/26/2625/ getの引数にはファイル名じゃなくて ...axios.get('http://....').then(function (response) {.... というふうに外部サイトに落ちているJSONファイルのURLが書いてあった。

このサイトにあるコードを完全にコピーしたら当たり前だけどaxiosでの読み込みができた！だからこのサイトを真似して書籍にあったコードを変更しようと思った。

JSONファイルをホスティングサーバーへ

ローカルファイルへのアクセスがブラウザのセキュリティポリシーとして禁止されているから、ローカルファイル（ここではlist.json）だと読み込むことができない。だから、JSONファイル自体を適当なホスティングサーバーへアップロードして、それを読み込む形にする。今回使ったのは、無料のYahoo!ジオシティーズ。 https://geocities.yahoo.co.jp/ 無料ならなんでもよかったからこれ。（2019年3月でサービス終了するらしい！）

ドラッグアンドドロップでJSONファイルをアップロードしたら、URLをコピーして、書籍にあるコードの'list.json'の部分を'(JSONファイルのURL)'に変更するだけ。

で、ブラウザ起動したら・・・できなかった（泣）

出たエラー

Failed to load http://www.geocities.jp/hoge/list.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. main.js:12 Error: Network Error at e.exports (spread.js:25) at XMLHttpRequest.l.onerror (spread.js:25)

なぜーー

Allow-Control-Allow-Origin: *の導入

ホスティングサーバーにアップするだけじゃ駄目だと思い、Chromeの拡張機能Allow-Control-Allow-Origin: *を導入してみた。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?utm_source=chrome-app-launcher-info-dialog

やっとできた！！ただ、この拡張機能を一度Offにすると、再びOnにしてリロードしてもエラーを吐いた。だから一度OffにしたらAllow-Control-Allow-Origin: *を削除し、もう一度インストールする必要がある。理由は不明。

Allow-Control-Allow-Origin: *導入したなら、JSONファイルをホスティングサーバーにアップしなくてもいけるかもと思ったけど、やっぱり駄目だった。こちらも理由は不明。

場当たりすぎだけどとりあえず解決（？）したことが嬉しかった。

2018-08-27

9月やることメモ

もう８月も終わるから、９月にやることをまとめておく。

８月にやったこと

・Progate　PHP学習コース　２周

・ドットインストール　PHP入門

など

９月の目標

・ドットインストール　PHPデータベース入門

・ドットインストール　Laravel5.5入門

あぼねこぶろぐ

プログラミングとデザインの技術向上ブログ