SendGrid の登録

ruby on rails でアプリ作成で登録しておいたほうがよいものとして
SendGrid を紹介していただいたので、まずは登録

SendGrid はクラウドベースのメール配信サービス
なお、料金体系に関しては
プラン比較を参考に

まずはフリープランでお試しすることに

このフリープランでも1日400通までは無料で使用できるらしいので


へアクセスし、新規会員登録をクリック

Screenshot from 2016-09-01 22:26:34

次に個人情報の入力

プランは今回は Freeプランを選択

Screenshot from 2016-09-01 22:32:19

利用目的には
ruby on rails のwebサービス作成学習用で使用、後々商用予定です
としておき、その他は個人として利用なので、自分の情報を入力します

必要な情報をいれて確認を押すと、仮登録が行われます

Screenshot from 2016-09-01 22:41:46

これで登録したメールアドレスに確認のためのメールが届くので
その中にあるURLをクリックすることで本登録がされます

Screenshot from 2016-09-01 22:47:03

ちなみに、アカウントの作成には審査があるので、無事に登録できたら
続きを行おうと思います

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