Railsのログイン認証gemのDeviseの実践

前回、インストールまではできているので続き

まずはdeviseのメール送信時のホスト名を指定

config/environments/development.rb

 config.action_mailer.default_url_options = { host: 'localhost:3000' }

を追加

もし、cloud9 の場合には

  #devise 設定
  config.action_mailer.delivery_method = :test
  host = 'http://techacademy-snowpooll.c9users.io'
  config.action_mailer.default_url_options = { host: host }

というようにホスト名をいれる

追記場所は
最終行の end の前の行

次に root_urlを指定 
deviseはログアウト時などのリダイレクト先としてroot_urlを使うため
これがないとエラーになるため

config/routes.rb

root to: "home#index"

を2行目に追記

次に
実際のControllerやViewがないため作成

rails g controller Home index show

次に
app/views/layouts/application.html.erb

deviseはログインやログアウトなどのときに、flashにサクセスやエラーメッセージを追加するので、その表示領域を追加

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

次にdeviseのモデルを作成

rails g devise User

とりあえずデフォルトでマイグレード

rake db:migrate

そして
・ログインしていない場合は、「サインイン」と「ログイン」のリンク
・ログインしている場合は、「プロフィール変更」と「ログアウト」のリンク
を追記するため
app/views/layouts/application.html.erb
へ追記

<header>
  <nav>
    <!-- user_signed_in? はユーザがログインしているか調べるdeviseのHelperメソッド -->
    <% if user_signed_in? %> 
      <!-- current_user は現在ログインしているUserオブジェクトを返すdeviseのHelperメソッド -->
      <!-- *_path はUserモデルを作成したときに、
        deviseにより自動で作成されてますので、rake routesで確認できます -->
      Logged in as <strong><%= current_user.email %></strong>.
      <%= link_to 'プロフィール変更', edit_user_registration_path %> |
      <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
    <% else %>
      <%= link_to "サインイン", new_user_registration_path %> |
      <%= link_to "ログイン", new_user_session_path %>
    <% end %>
  </nav>
</header>

を追記する

これで

rails s

でアプリを起動してログインできればOK

Railsのログイン認証gemのDeviseのインストールと実験

まずはログイン認証ができるように実験

ソースコードの管理もしたいので、Github へリポジトリ作成

Github へログインして +アイコンをクリックし
new repository をクリックし、リポジトリを作成

Screenshot from 2016-08-30 23:20:32

リポジトリ名は devise_test として作成

Screenshot from 2016-08-30 23:22:14

次に、ローカルマシン ubuntu で開発のためのディレクトリ作成

mkdir ekitika
cd ekitika

ここへ各種機能の rails プロジェクトを作成して実験していく

今回は devise の実験なので

rails new devise

でアプリを作成

ローカルマシンはネットの通信制限を受けているため bundle install に時間がかかる
最初に -g オプションで初回から行わないように設定するべきだったかも

無事にできたら、次に github に転送しておく
これをやっておけば、バックアップにもなるので

まずはローカルリポジトリの作成とコミット

git init
git add .
git commit -m "first commmit"

次に github へ転送

git remote add origin https://github.com/Snowpooll/devise_test.git
git push origin master

で転送

これでバックアップのかわりにもなるので、まずはGemfile の編集
25行目あたりに

#devise install
gem 'devise'

を追記して保存したら

bundle install

を実行

これで devise のインストールが完了
次は、deviseに関連したファイルをRailsプロジェクトに追加

rails g devise:install

続きは次回

ちなみに、cloud9 のOSとかを調べたかったので

 cat /etc/lsb-release 

を実行した結果

DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.3 LTS"

ということが判明

サーバーで同じ構成をつくるときの参考になりそう

rails 開発に便利な Atom パッケージの準備

cloud 9 で開発をする予定だったけど、
Y!mobile の通信制限がかかり、テザリングの回線で使っていた au の通信容量も使いきったため
自宅の ubuntu サーバーで開発することに

ソースコードは github で管理するとして
開発に使うエディタは Atom を使うことに

まずは、rails での開発に使うと便利なパッケージのインストール確認から

まずは git-plus
これがあれば端末を開かずに Atom から git の操作が可能になるし
候補を出してくれるので、コマンドのミスタイプ防止もできるので

次に git の状態をみれる
tree-view-git-status
これでファイルの状態が色分けされるので、管理しやすくなる
ちなみに git で管理していないのは緑
commt していないのは黄色
commit したのはグレー
という色分け

あとは ruby と rails のコード補完があると良いので
autocomplete-ruby を入れてコード補完できるように設定

rails-transporterをいれて
model から関連する controller を開いたり、controller から 関連する helper を開いたり出来るように

次に、CSSで設定するときに
ctrl + alt + c で色を簡単に設定できるパッケージ
color-picker をインストール

Screenshot from 2016-08-30 22:55:01
こんなかんじで色を簡単に設定できるので便利

あと、パスを出せるみたいなので
autocomplete-paths を追加

とりあえず、パッケージの確認はこのあたりにして、他に便利そうなものがあれば追加していくという方針で

ちなみに GitHub や cloud9 などのサービスのアカウント管理には
パスワード管理ソフト KeepassX がおすすめ

ubuntu だけでなく Mac でも使えるので

heroku へクレジットカード登録

heroku でアドオンを使うには、無料であっても本人確認のため
クレジットカードの登録が必要

登録するには Heroku にログインし

Account settings をクリック

heroku

次に Billing タブをクリックし、Add Credit Card をクリック

Screenshot from 2016-08-14 22:31:05

次にダイアログがでるので、カード情報を入力

Screenshot from 2016-08-14 22:32:50

そのままだと入力方法がわからないので

http://www.happyimport.info/how/address.php
を参考に入力方法を調べることに

Address Line 1 には番地と町名
Address Line 2 に建物名と部屋番号
City は 市または区
State/Province は都道府県
ZIP/Postal Code は郵便番号
Country が国
という意味でした

ちなみに部屋番号とかの書き方も調べたかったので
http://eigo-box.jp/others/address/
を参考に書き方を調べることに
部屋番号は#で書くとのことなので
201号室なら
#201
ということに

また、丁目、番地、号については- で書けばOK
5丁目6番7号
なら
5-6-7

都道府県名は省略可能
静岡なら
Shizuoka
というかんじ

これで入力ができたら
Save Details をクリックするとカード情報が登録されます

ポートフォリオサイト作成その2

今回は自己紹介部分を作成します

今回は section タグを使用します

これについては
HTML5のお勉強 articleとsectionとか
を参考にしました

section を使うときには、このタグの中に h1 が必要になります

今回、letter-spacing を使うことで文字の間隔を調整しています

詳しくは
文字と文字の間隔を変更できるletter-spacingプロパティ
を参考に

では
div#container>section
として
この中に自己紹介を書いてみました

    <div class="container">
      <section>
        <h1>About</h1>
        <h3>自己紹介</h3>
        <p>メインマシンは Ubuntu 14.04 たまに Mac 使います</p>
        <p>Wordpress でブログ運営中(興味のある方は <a href="https://wp.developapp.net/">こちらを</a>)</p>
        <p>kindle で ubuntu の使い方を書いた本を出版しました(<a href="https://www.amazon.co.jp/%E3%81%8A%E8%A9%A6%E3%81%97-Ubuntu-%E3%81%99%E3%81%AE%E3%81%86%E3%81%BD%E3%83%BC%E3%82%8B-ebook/dp/B00WZQN7XO">お試し Ubuntu</a>)</p>
        <p>写真から位置情報を読み出し、ナビするアプリを作りました(<a href="https://play.google.com/store/apps/details?id=net.developapp.photonavi">PhotoNavi</a>)</p>
        <p>最近は ruby on rails の Web アプリを公開するべく学習中</p>
        <p>年末にはAndroid クライアントアプリ作成予定</p>
      </section>
    </div>

次に css で中央揃えと文字間隔を揃えます

section{
    text-align: center;
    letter-spacing: 0.15em;
}

また、ナビゲーション部分は現在作成中ということで

        <nav>
            <ul>
                <li><a href="index.html" class="selected>Home">Home</a></li>
                <li><a href="https://snowpooll.github.io/">Github</a></l>
                <li><a href="#">MyApp(作成中)</a></li>
            </ul>
        </nav>

と変更しました

これでプレビューをみると、以下のようになります

Screenshot from 2016-07-06 23:09:58

ポートフォリオサイトの作成

GithubPage でポートフォリオサイトを作っていこうと思います

とはいっても作成したことがないので、ざっくりつくり、今後カスタマイズすることで完成させていこうと思います

まずはベースとなるHTMLを作っておきます

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Snowpool | About</title>
    <!-- BootstrapのCSS読み込み -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery読み込み -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
  <body>
    
  </body>
</html>

注意点としては jQuery を bootstrap 関連より先にいれることです
この順番を間違えて後にすると、動きのある jQuery プラグインなどが動作しないことがあります

次に
link:css を展開することで

<link rel="stylesheet" href="style.css">

を展開

次に header と footer の領域を作成

footer には copyright を作成し
header にはナビゲーションを配置します

    <footer>
      &copy 2016 Snowpool
    </footer>

としてコピーライトを作成

css は

footer{
    font-size: 93%;
    text-align: center;
}

として中央寄せに

画像については twitter で使っているものを使用するため
同じフォルダに配置

次に header にナビゲーションを配置

    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="selected">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

として次に css の設定


nav{
    text-align: center;
    
}

nav ul li{
    margin: 0 20px;
    display: inline-block;
}

nav ul li a{
    text-decoration: none;
    font-weight: bold;
}

text-align:center で中央寄せ

text-decoration:none にして下線を削除
font-weight:bold で太字
display: inline-block; で要素を横並びに

次に、アイコンをはりつける領域を作成
nav の下へ

        <div id="logo">
          <img src="Snowpooll.jpeg" alt="">
          <h1>Snowpool</h1>
        </div>

として、css の設定

#logo{
    text-align: center;
}

#logo img{
    max-width:300px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

#logo h1{
    letter-spacing: 0.15em;
}

#logo に対して
text-align:center にすることで
画像と名前を中央寄せに

なお、画像に対して
border-radius:100% にすると丸くなります

letter-spacing: は文字間隔の設定

ここまでで以下のような画面になります

Screenshot from 2016-07-06 01:00:31

次回はもう少し自己紹介文などを追加していきます

GithubPage の作成

GithubPage を作成し、ポートフォリオサイトにしてみようということで
まずはリポジトリを作成

ただし、リポジトリ名を間違えたため、一度リポジトリを削除します

Github でのリポジトリの削除は
リポジトリの画面で Setting タブをクリックします

Screenshot from 2016-07-05 01:05:17

次に、下にスクロールさせて Delete this repository をクリックします

Screenshot from 2016-07-05 01:06:53

そして、リポジトリ名を入力し

Screenshot from 2016-07-05 01:07:56

I understand the conceqenses delete this repository
をクリックすれば削除できます

これで新しくリポジトリを作り直します

New repository をクリックし、新しく作成します

Screenshot from 2016-07-05 01:10:59

作成するときに気をつけることは、リポジトリ名を
ユーザ名.github.io
となるようにすることです

あとは public を指定して、Create Repository をクリックすればリポジトリを作成できます

Screenshot from 2016-07-05 01:12:46

私の場合、Snowpooll.github.io とするのを snowpool.github.io としたため
githubPage が存在しませんとなってしまい、作りなおすことになりました

git のリモートリポジトリの修正

Github Page をつくるのに cloud9 を使おうとしたけど
cloud9 の端末操作でURLのコピペができなかったため、
手打ちですべてやったため、URLの間違いが発生

本来なら、

git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

とするはずが

git remote rm https://github.com/Snowpool/snowpool.github.io.git

と1文字違いで登録してしまい、これが原因で修正することになりました

そのままリポジトリ登録すればいいかなと思っても

fatal: remote origin already exists.

となってしまうため、一度 origin を削除する必要があります

このため

git remote rm origin

を実行し、origin を削除

次に

git remote add origin https://github.com/Snowpooll/snowpool.github.io.git

で再度登録

git push origin master 

とすることで解決しました

Misoca (ミソカ) で請求書作成

請求書を作成することになったのですが、
いままで請求書など作ったこともないため、どうしようかなと
考えていた時に紹介されたのが
Misoca でした

今回は、このMisoca の登録方法についてになります

https://www.misoca.jp/

にアクセスし

まずはアカウントを作成します

Facebook か Twitter アカウントでの登録も可能です

今回はweb で新規登録をしてみます

misoca

次にメールアドレスとパスワードをいれて
登録するをクリックします

なお、パスワードは フリーソフトのKeepassX で作成しました

misoca2

これで
さっそく使ってみるをクリックすると
請求書作成のチュートリアルがでますので
請求書を新しくつくるをクリックします

misoca3

misoca4

すると、請求書の作成画面がでてくるので、
請求先名称
担当者
件名などを入力していき、できたら保存すればOKです

misoca5

なお、作成した請求書は、発行をクリックし
印刷、
PDFでのダウンロード、
郵送手続き、
メール送信など
さまざまな方法が使えます

misoca6

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