bootstrapのadminテンプレートadminLTEを手動でrails 5.1のアプリに導入
１．Bootstrapテンプレートを手動で組みこむ際の手順
How to integrate custom bootstrap theme in Rails - Viblo <= Tutorial
① zipファイルをダウンロード。
② rootディレクトリに配置されているhtmlファイル（adminLTEはstrater.htmlで実施)を適用させたいファイルに一回移す
③ htmlファイルの上部に読み込まなければならないcssファイル、下部jsファイルがある。それらをがんばってインストールする（ここが一番大変）
2. 今回
今回はusersコントローラーに対するviewのみ、admin画面にしたかった。自分が実施した際に身に着けた順を時系列に表示する
・view/layouts/application.html.erbはデフォルトで指定されるview画面である。controllerに対してviewを変更したいときは、<controller名>.html.erbで変更できる。
・Asset Pipelineについて
・Asset Pipelineとは、css、javascript、imgをコンパイル時にそれぞれ一つにまとめる仕組み。あと、sassやcoffeeなどの高級な言語も使えるようになる。
仕組み：css(.scss, .css)+js(.coffee, .js)+.erb => assetsconfig/manifest.js(設定ファイル=> sprocketsでコンパイル、最小化
・プリプロセッサについて：sprocketsは拡張子を右から左に読み、ファイルを変換する。そのため、css.scss.erbはerb~> scss~> cssに変換され、最終的にcssファイルになる。つまり、erb.scssという書き方はscssに変換された後rubyファイルは読まれないので、できない。（scss.cssは大丈夫なのかな、、？？）
・大前提：assetとは、webアプリケーションの直接レスポンス以外の構成要素（javascript, css, img）。
・大前提2：外部のasset filesはapp/assetsかlib/assetsかvendor/assetsに配置しなければならない。
・大前提3：どのassetをインクルードするかという命令をdirectiveといい、それらは手動でmanifest fileに自分で書かなければならない。cssのmanifest fileは、app/assets/stylesheet/application.js、jsはapp/assets/javascripts/application.jsに記述する。
・コントローラ毎に異なるmanifestファイルが必要だったら、applicsion.js/cssがと同じディレクトリに<name>.css/scss/jsファイルを作る。
・マニフェストファイルはcssかscssかにより書き方が違う。上から下に読まれていくので記述する順番も重要（今回の例は省略する）。
・尚、必要なライブラリがgemによってインストールされている場合、sprocketsはライブラリを探しその全ての機能が使えるindex.htmlファイルを見つける。よって、@import bootstrapなどの記述が可能。
・マニフェストファイルは読み込みたいhtmlファイルに記述することによって読み込まれる。css/scssは、<%= stylesheet_link_tag '<manifest file、拡張子は省略>', media: 'all', 'data-turbolinks-track': 'reload' %> 、jsは、<%= javascript_include_tag '<manifest file 拡張子は省略>', 'data-turbolinks-track': 'reload' %>。
参考記事
[Ruby入門 Rails5編] 05. アセットパイプラインでフロントエンドのリソースを管理する - Qiita
Trouble Shooting
Rails Asset Pipelineがうまくいかないときの問題の切り分けかた - Qiita
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::EventedFileUpdateCheckerLoadError: 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、css、javascriptファイルをコンパイルしてウェブページに表示する際に適応するルールをまとめる役割をする。例えば、scssやcoffeeファイルをそれぞれcss、javascriptに変換してくれる。
・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で検索
言語化！！これ重要です。初心者は問題と逸脱したことを調べている場合があります。（全ての物事において自分の課題です。「脳で整理してから物事を始める」、ということです。）
こちらのサイトにお世話になりました。
Ⅱ. 解決法
VagrantとVirtualboxのバージョンをウェブの記事で紹介されてあるバージョンに再インストールし直し、ゲスト側のカーネルをアップデート（上のサイトの手順3）
- バージョン
OS: Windows10
Vagrant: 1.9.1
Virtualbox: 5.1.14
ゲスト側OS: CentOS 7.3
Ⅲ. 今回学んだこと
１．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の自動デプロイの手順についてまとめたいと思います。
ローカルから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を使用していた際、エラー解決に時間がかかってしまったため。ドキュメントを見てもエラーが発生する箇所を特定できなく、他サイトを見ても解決できず、うだうだと時間をかけてしまった。これから自分の力ではどうしても解決できない問題が発生した際、他のツール、解決策を使って見ることを心がけたい。
