ruby on rails で bootstrap

手軽に導入できる!Ruby on RailsでBootStrapを使う方法【初心者向け】

に載っていた内容に興味があったので
せっかくなので、過去にドットインストールで ruby on rails で作成したものを改造することに

まず

cd heroku/mymemo/

でプロジェクトに移動

次に

 vim app/views/memos/index.html.erb 

でファイルを開き、ボタンのコードに class 設定を追加

あまり改造するとわかりにくくなるので

<td><%= link_to 'Show', memo %></td>

の部分を

<td><%= link_to 'Show', memo ,class: "btn btn-lg btn-primary" %></td>

として保存

次に

 vim Gemfile

で Gemfile の最終行に追記します

ちなみに、バージョンが古いかな?と調べてみたら
Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順


Font Awesome の入れ方も書いてあったので、こちらも追加することにします

gem 'bootstrap-sass', '~> 3.2.0'
gem 'font-awesome-sass'

を最終行に追記します
そしてGemfile を読み込むため

bundle install

を実行します

次に、Bootstrap と Font Awesome を適用するため
application.css に追記します

vim app/assets/stylesheets/application.css 

でファイルを開き

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

をファイル末尾に追記します

これで動作すると思ったのですが、反映されないため
bootstrap に関しては
https://github.com/twbs/bootstrap-sass

Font Awesome に関しては

http://fortawesome.github.io/Font-Awesome/get-started/

を参考にすることにしました
まず

 vim Gemfile

でファイルを開き

gem 'sass-rails', '>= 3.2'

を追加し、再度

 bundle install

を実行
しかし、

[!] There was an error parsing `Gemfile`: You cannot specify the same gem twice with different version requirements.
You specified: sass-rails (~> 5.0) and sass-rails (>= 3.2). Bundler cannot continue.

 #  from /home/snowpool/dotinstall/heroku/mymemo/Gemfile:52
 #  -------------------------------------------
 #  
 >  gem 'sass-rails', '>= 3.2'
 #  -------------------------------------------

となるため、すでにインストール済みとのこと
次に

 vim app/assets/stylesheets/application.scss

でファイルを作成し

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

を記述し、保存
これだけだと反映されないため、

cd app/assets/stylesheets/
cp application.css application.css_bak
rm application.css

として、application.css を削除したところ
無事に反映されました

なお、Font Awesome も反映されるか確かめたかったので

vim app/views/memos/index.html.erb 

でファイルを開き

<i class="fa fa-home"></i>

を追記してから

rails s

で起動

これでブラウザで確認したところ、無事に変更が反映されていました

rails-tw

ubuntu の https 対応

ubuntu 14.04 を https 対応させるように設定をします

すでに apache2 はインストール済みなので
ssl モジュールとバーチャルホストを有効化します

sudo a2enmod ssl
sudo a2ensite default-ssl

設定反映のため apache2 を再起動します

sudo service apache2 restart

次にポートの待ち受け443 があるかを調べます

ss -lnt

LISTEN     0      128                      :::443                     :::*   

という行があればOKです

ちなみに、ubuntu の場合apache2 インストール時点で
サンプルのSSL証明書が自動的に作成され
利用可能な状態になっているため、外部公開などにせず
サーバの練習などを行うのなら
そのままアクセスするだけですでに https 対応になります

念の為、openssl でサンプルの証明書をみておきましょう

 openssl x509 -in /etc/ssl/certs/ssl-cert-snakeoil.pem -noout -text -fingerprint -sha256

ちなみに、公開するサーバーの場合
正規のSSL証明書の購入をすることになります

これで設定ができたので、試しに
https://localhost でアクセスします

すると警告がでますが、気にせずに詳細をクリックします
これは正規のSSL証明書でないのが原因です

https

次に localhost にアクセスする(安全ではありません)
をクリックします

https2
すると
https になったページにアクセスできるようになります

https3

atom で html プレビュー

Atom エディタでコードを書きながら HTML プレビューをみたいので
パッケージを追加します

開発環境は Ubuntu 14.04 になります

まず Atom を起動し
Ctrl + , で設定画面をだします

次に、 install をクリックし、
atom-html-preview
で検索し
インストールをクリックします

atom-html

これで有効化されるので
html コードを書いたら
ctrl + shit + h で画面右側にプレビューを表示できます

atom-prev

もう一度
ctrl + shift + h を押すとプレビューを閉じることができます

最大のメリットはchrome とかで確認するときに
リロードしないと更新されませんが、
このパッケージの場合、コードをリアルタイムで反映してくれるので
HTMLの練習には最適です

このパッケージの詳細については
https://atom.io/packages/atom-html-preview
にかかれています

owncloud client のインストール

owncloud のURLを更新し、MacBookAir ではアクセスできたので
次に ubuntu のデスクトップクライアントから設定しようとしたら
エラー 資格情報が間違っています
と表示されるので、原因究明のため検索

ownclient

どうやらversion 1.5 と古いのが原因のようなので
新しいものをインストールすることに

https://owncloud.org/install/
にアクセスし

Desktop Clients をクリック

ownlient3

どのOSか聞かれるので、Linux を選択

ownlient4

次にディストリビューションを選べるので
Ubuntu を選択

ownlient5

するとインストール方法が表示されるので
それに従いコマンドを実行することでインストールできます

今回は Ubuntu 14.04 のを実行します

ownlient6

sudo sh -c "echo 'deb http://download.opensuse.org/repositories/isv:/ownCloud:/desktop/Ubuntu_14.04/ /' >> /etc/apt/sources.list.d/owncloud-client.list"
sudo apt-get update
sudo apt-get install owncloud-client

MacbookAir owncloud 設定修正

ubuntu での修正ができたので
次に MacbookAir のクライアントアプリの設定を変えます

最初に owncloud のアイコンをクリックします

スクリーンショット 2016-05-07 14.48.24

次に設定をクリックします

スクリーンショット 2016-05-07 14.50.24

ダイアログがでるので、アカウントを修正をクリックします

スクリーンショット 2016-05-07 14.52.33

次にURLを修正します

スクリーンショット 2016-05-07 14.58.41

HTTPS対応でない場合、警告がでますが
ローカルですので今回は
HTTP経由で再度行うを選択します

スクリーンショット 2016-05-07 14.59.24

そしてログインアカウントを入力します

スクリーンショット 2016-05-07 14.59.39

同期するフォルダを設定し次へ進みます

スクリーンショット 2016-05-07 15.00.02

セットアップが完了したら
ブラウザかフォルダ、お好きなほうで開いて設定は完了です

スクリーンショット 2016-05-07 15.00.41

owncloud のURL変更

引っ越しに伴い、使用するネットワーク環境が
Y!mobile になりました

このため、いままでサーバーで動かしていた ubuntu のIPアドレスも変更になりました

その結果、いままでのURLではアクセスできないため
設定ファイルを書き換えることになりました

owncloud は
/var/www/
の下へ配置していたため

sudo vim /var/www/owncloud/config/config.php

で設定ファイルを開き

8行目のIPアドレス部分を書き換えました

0 => '192.168.128.54',

なお、この配列を追記すればマルチドメインも可能のようです

次に11行目のURLも変更します

'overwrite.cli.url' => 'http://192.168.128.54/owncloud',

設定変更を保存し

このままURLにアクセスすると
メンテナンス中というメッセージがでます

owncloud

sudo -u www-data php /var/www/owncloud/occ upgrade

を実行し、apache2 を

sudo service apache2 restart 

で再起動したものの変わらないため
再度設定ファイルをみたところ

20行目が

'maintenance' => true,

となっていたため

 'maintenance' => false,

と変更することで無事にアクセスできました

次は MacBookAir のクライアントアプリの設定を変更していこうと思います