rails 5.1 で jquery を使うことに成功!!

問題:

bootstrap-sassにjqueryを使おうとして、assets/ javascript/ application.jsに//=jqueryと記述したところエラー

 

解決方法:

こちらの記事を参考

Ruby on Rails5.1.1でBoostrap4.0を導入するまでにしたこと | ろぎすと

gemfileにjquery-railsとtether-railsをinstallし、

application.jsを、

//= require jquery
//= require rails-ujs
//= require tether
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

とする。

 

学んだこと:

rails 5.1からjqueryの代わりにrails-ujsがデフォルトのjavascriptシステムになる。(form_withという仕様になるらしい)

・5.1から様々な使用が変わるらしいので注意

Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita

rails_ujsの考え方(いずれか)

rails-ujs と form_with の使い方 - ボクココ

・外部からライブラリをインストールする方法でもjqueryを使えるようになる

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script> $('.dropdown-toggle').dropdown() </script>

Ruby on Rails - Ruby on rails でbootstrapのドロップダウンメニューを表示させたい(76633)|teratail

herokuにアップすることを試みたが、アップ後bundle installでエラーが起こり、撃沈

学んだこと:

・herokuとgitの設定はアプリ作成開始と同時にやるのがベスト、、

起こったエラー:

Herokuへup後、heroku rake db:migrateをしようとしたら、nokogiriのgemがインストールされていないというエラーがでる。

解決方法:

mysql をgroup :development, :test do に、とpgをgroup :production doに配置し、gemfile.lockを削除してからbundle install --without production

・ローカルでrails s をしたところ、以下のエラーが表示される

rake aborted! LoadError: Could not load the 'listen' gem. Add `gem 'listen'` to the development group of your Gemfile

=>config/environments/development.rb の以下の行を消す

config.file_watcher = ActiveSupport::EventedFileUpdateChecker

LoadError: Could not load the 'listen' gem (Rails 5) - Stack Overflow

railsでlink_toメソッドが効かない

ここ二日間このエラーに費やして改めて自分の問題解決力のなさにあきれたが、色々と分かったこともあるので、記述します。

 

問題:Rails5系のアプリでlink_toメソッドを使ってユーザーの削除機能を実装しようとしたところ、deleteではなく、getでアクセスしてしまう。。

 

解決方法:

①Turbolinksのバージョンを下げる

Turbolinksがうまく動かない理由(推測)とその解決策 · GitHub

②application.jsのAssetの依存関係を整理(jquery-ujs)を追加

link_toで突然methodが効かなくなって困ってるあなたへ - Qiita

③ごじゃごじゃやった末に訳も分からなく追加した部分を削除(これに気づくの時間がかかる、、)

 

学んだこと:

・Asset Pipeline とは、rails app内にあるhtml、cssjavascriptファイルをコンパイルしてウェブページに表示する際に適応するルールをまとめる役割をする。例えば、scssやcoffeeファイルをそれぞれcssjavascriptに変換してくれる。

・Delete methodは、htmlではサポートされていないため、javascriptを使用して実装するか、フォームとPOSTリクエストを使用してDELETEリクエストを偽造するらしい。

・Application.jsの最後の部分にjavascriptファイルをコンパイルする際のルール(ディレクティブ)を決めている。今回はjquery-ujs(GET以外のハイパーリンクを組んでくれる)を記述していなかった。

・ディレクティブは上から順に読み込まれるらしいため、順番が重要になる。

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require_tree .

これで成功した

rails 5系からrails-ujsが加わり、これがjqueryの代わりを果たしてくれるらしいが、これから使っていきたい。

「仮想環境とローカルでファイルを共有(mounting)ができない」

久しぶりすぎます。。

人材サービスを始めるために、半年ぶりにRailsでウェブサイトを立ち上げるために、ローカル環境の構築で相当苦労したので書きます。

問題は、

「仮想環境とローカルでファイルを共有(mounting)ができない」

以前まではFTPツール(Cyberduck)を使っていたが、容量を使うため作業効率はものすごく悪くなるため、どうしてもローカルと同期したかった。

Ⅰ. 基本的なアプローチを踏み、課題を解決。

①dotinstallでvagrantの仕組みを再理解

以前プログラマーの方が、「自分で理解していない物は使うな」とご指摘くださり、その原則に従い徹底的に基本を理解した。

②問題を言語化し、Webで検索

言語化!!これ重要です。初心者は問題と逸脱したことを調べている場合があります。(全ての物事において自分の課題です。「脳で整理してから物事を始める」、ということです。)

こちらのサイトにお世話になりました。

qiita.com

 

Ⅱ. 解決法

VagrantVirtualboxのバージョンをウェブの記事で紹介されてあるバージョンに再インストールし直し、ゲスト側のカーネルをアップデート(上のサイトの手順3)

- バージョン

OS: Windows10

Vagrant: 1.9.1

Virtualbox: 5.1.14

ゲスト側OS: CentOS 7.3

 

Ⅲ. 今回学んだこと

1.Vagrantの仕組み

Vagrantは仮想環境の構築とホストシステムとの共有を簡単にするツール。仮想環境はVirtualboxやEC2などがある。

・重要なのはVagrantはあくまで箱、空間でしかないこと。ここにBox(OS)をインストールし、そのOSが仮想環境を決定する。

・「ホスト」はローカル、「ゲスト」は仮想環境内のことを指す。vbguestというプラグインがゲストとホストのVirtualboxのバージョンを同じにする。なぜこの問題が起きてしまうかというと、Boxが作られたVirtualboxとホストのバージョンが違うため。(Boxのtutorialとかにどのvirtualboxを使ったのかとかかいてあるのかな?)

・コマンド:vagrant box add <bento/centos7.3>でboxを追加。vagrant init <boxを指定>で環境構築、vagrantfileが作成される。vagrant upで仮想環境内接続。

・ホスト:/<folder with vagrantfile> ゲスト: /home/vagrantでファイルが共有される。

2. メソッド

・バージョンの違いはどうにもならないことだから、ネットで成功したバージョンを探してそれに従う。

・問題を言語化してから取り組む!

 

1 Month

It has been one month since I came to Brunei and I have gotten used to living here, so I will write down some random thing I found and felt during my stay.

Living in Brunei

Living here is actually a lot more confortable than I thought. Dorm is nicely cleaned up, and air conditioning is everywhere. Although outside is hot and humid, inside is confortable (sometimes cold!). 

Islamic culture isn't so strict compared to what I thought before coming here, although there are some restrictions, such as we have to wear pants which sleeves are below knees. There are Islamic Mosks and two praying time per day, non-Islamic people don't have to obey that rule. Since Friday is special praying day, weekdays are Friday and Sunday, instead of Saturday and Sunday. 

People here speak at least Malay and English fluently. But it seems that more people use Malay more often than English, because everyone chats with each other in Malay, rather than English.

Difficulty of Living here as a Foreigner

Dorm is consisted of rooms, each of which has four small room, where students stay. Kitchen and bathroom are shared in the room. It is 10 minutes walk from university campass.

There are some difficulties living here.There is no supermarket inside campass, and you cannot go outside campass without using cars. Highways are directly connected to university, so roads are not designed for pedestrians. I have to ask buddies (students who support foreign students) to go shopping. 

Buddies are supportive to foreigners and I am so thankful to them. They have helped me right from the start, including going to shopping, but acknowleding us about various events, and course registration. 

Food is another problem. Since we cannot go shopping often and vegetables in supermarkets are not that fresh, I haven't cooked yet. My diet has become unhealthy. I eat instant noodles and rice(My room had a ricecooker!) mainly. There are fast food restraunts (KFC, and Malay food restraunts) at the main building of dorms, so I sumetimes go there. I really miss Japanese dish so much. 

Last problem is exercising. There are not much opportunities to go outside and move my body. It is 30 degrees celcius in daytime, and it is too dark at night. Nowadays, I only move the distance between campass and dorm. Unless joining a sport club, you will end up living a super quiet life.

My Classes

All the classes are taught in English, and the levels are quite high. There are 2 hour class plus 1 hour tutorial (small-group, discussion-main class) class. Although whether doing tutorial or not depend on professor, I have tutorials in all the classes.

I took two social science course (Spatial Development, Literature of Southeast Asia), and one Programming course, and Malay Language course.

It reminds me of what universities should like !! Professors are enthusiatic about teaching, and the class is interesting, so it makes me go class for learn. Not to just acquire credits to graduate...

 

I will end here for today. I will continue my blog everyday. The topics will be random, but I'm gonna write three things I will learn everyday. Hopefully, by some time, my English and writing will get better and more readable.

See you next day!

Wordpress Themeの自動デプロイに関して

Wordpress Themeの自動デプロイの手順についてまとめたいと思います。

 

1. レンタルサーバーWordpressを作成

ローカルからWordpressを作成してサーバーにアップロードするよりも手早いので、Wordpressを作成できるレンタルサーバーを使用しそこからダウンロード。

※Lollipopを使用した

 

2. Wordpress themeをgitで管理

<ローカルのフォルダをgitで管理する方法>

Brucketで適当な名前でレポジトリを作成する。→ ローカルでgitで管理したいレポジトリを作成 → Brucketのgit clone<(URL)>箇所をコピペ

<gitのコミットからプッシュまで>

Ⅰ. git add (.)  ファイルをステージ(コミットする準備)

Ⅱ. git commit -m <name> ファイルをローカルでコミット

Ⅲ. git push origin master リモートにコミット(master branchへ)

※git status で現在の状態を確認できる。

<オリジナルテーマの作成>

dotinstallを参照。

 

3. deploybotで自動デプロイを完成

deploybot:ci (Continuous Integration)ツールの一つ。有料である反面、設定に地震でファイルなどを一切作成せずにすむので、初心者には絶対おすすめ。他にはwercker ci、travis ciなどがある。

deploybotの使い方

Ⅰ. BitBruketアカウントを接続し、デプロイしたいレポジトリ&ブランチを指定

Ⅱ. サーバーの設定、FTPツールでデプロイしたいフォルダを指定する。

(さくらレンタルサーバーFTP接続をしようと何度も試みたがサーバーにアクセスできないというエラーが発生。問題が特定できなかったため、別のサーバー(Lollipop)に変更してみたら、成功した)

FTPツールは、サーバーに接続する際に使うもの。Vagrant内のファイルを管理する際にも使用する。Cyberduckを使用した。

Ⅲ. Deployボタンで、自動deploy完了。

 

まとめ

今回時間がかかってしまった理由は、最初Werckerを使用していた際、エラー解決に時間がかかってしまったため。ドキュメントを見てもエラーが発生する箇所を特定できなく、他サイトを見ても解決できず、うだうだと時間をかけてしまった。これから自分の力ではどうしても解決できない問題が発生した際、他のツール、解決策を使って見ることを心がけたい。

SFTPについて

 1. SFTPとは何か

 2. SSHの設定方法 

 3. SFTP接続の仕方

 4. ファイル転送ツール(FileZilla)

 

1. SFTPとは

SFTPとは、SSH File Transfer Protocolの略称。SSH(Secure Shell)を介してWebサーバーと安全にファイルの転送を行うための手段だ。SFTPは、他のファイル転送手段であるFTPなどよりも安全性が高いことから注目を集めている。

SFTPの安全性の高さは、鍵認証システムである。鍵認証では、まず秘密鍵と公開鍵を作成する。公開鍵はサーバー上に公開するもので、秘密鍵が自分のコンピュータで所有する鍵となる。公開鍵がユーザー名、これら二つの鍵の組み合わせによって生成される複雑な関数がパスワードとなり、ログインすることができる仕組みだ。

 

2. SSHの設定方法

SSHは、Linuxコマンドで設定するため、Windowsは別途SSHクライアント(PuTTyなど)をインストールするしかない。Macでの設定方法は下記に詳しく記載されている。

インフラエンジニアじゃなくても押さえておきたいSSHの基礎知識 - Qiita

 

3. SFTP接続の仕方

Ⅰ. 自分のパソコンで「秘密鍵」と「公開鍵」のペアを作る

Macは、ターミナルでssh-keygenコマンド、windowsでは、PuttyGen、WinSCPなどを使って鍵を作成する。

Ⅱ. サーバー元にそれらを送る

Ⅲ. ホスト名&ユーザー名をゲットしたら準備オッケー

レンタルサーバーによっては、FTPが推奨されているものもある。

 

4. 便利なFTPツール

毎回ファイルをサーバーに転送する度にSFTP情報を入力するのは面倒である。FTPツールは、そんな作業を簡略化してくれるのが、FTPツールだ。FileZillaが処理速度が速く、おすすめ。

FileZillaを使ってSFTPを設定する方法はこちら

http://gihyo.jp/design/serial/01/server-knowledge/0002

 

参考サイト

第2回 ファイル転送はFTPじゃなくてSFTP? SSHで安全にサーバへ入ろう

http://gihyo.jp/design/serial/01/server-knowledge/0002

sftp - 安全なファイル転送 - Linuxコマンド

http://webkaru.net/linux/sftp-command/