hoz blog

営業からSEに転職した文系エンジニアです。プログラミングと趣味の株に関してブログを書いていこうと思います。

【Ruby】facebookでのログインに対応する方法

まずはfacebookのdevelopper用のサイトでアプリを登録しておきます。
developers.facebook.com



gemの導入
OmniAuth: Overview · plataformatec/devise Wiki · GitHub

上記サイトの手順に沿って行います。

f:id:takanori5:20171103195528p:plain

gemfileに以下を追加

gem 'omniauth-facebook'

ターミナルでインストールコマンドを実行

bundle install

f:id:takanori5:20171103195917p:plain

gemがinstallできました

次のステップ
f:id:takanori5:20171103200130p:plain

ターミナルでコマンドを打っていけばOKです。

rails g migration AddOmniauthToUsers provider:string uid:string

f:id:takanori5:20171103200527p:plain
migrationファイルが作成されました!

続いて以下のコマンド

rake db:migrate

f:id:takanori5:20171103200816p:plain
migrate完了です!

続いてdevice.rbを編集
f:id:takanori5:20171103201255p:plain

一番下に設定を追加しました。
f:id:takanori5:20171103201410p:plain

続いてuser.rbを編集
f:id:takanori5:20171103201846p:plain
最後尾に足しました。
f:id:takanori5:20171103201904p:plain


config/routes.rbに以下を追加

devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }

続いて新規のフォルダをcontroller以下に作成しファイルを作ります。
f:id:takanori5:20171103203745p:plain

こんな感じ
f:id:takanori5:20171103204532p:plain

【Ruby】toastrを導入し、かっこいいログインメッセージを表示する

トースターをアプリに適用してみます。

以下のサイトでトースターのでもが見れます。

toastr examples


f:id:takanori5:20171103140310p:plain
右上に出ているやつです。

導入して使って見ます。

quick startをみると以下のステップで導入ができるようです。
f:id:takanori5:20171103140803p:plain


まずはgemを入れます。
gemを編集し追記
f:id:takanori5:20171103141410p:plain


ターミナルでコマンドを入力
f:id:takanori5:20171103141443p:plain


続いてCSSファイルを編集します。
f:id:takanori5:20171103141516p:plain

jsも同様に編集
f:id:takanori5:20171103141641p:plain


最後に実際に呼び出す処理を書きます。
・トップページのアラートにtoastrを適応したい時

 app/views/layouts/application.html.erb

<% unless flash.empty? %>
 
<% end %>


以上で完了です。

f:id:takanori5:20171103145850p:plain

【bootstrap】deviceを導入して認証機能をつける②:ログインしている場合にnavbarを変える【Ruby】

前回の記事
takanori5.hatenablog.com


今回はログインした後にnavbarの表示を変える方法をやっていきます。

https://github.com/plataformatec/devise
f:id:takanori5:20171030235117p:plain

user_signed_inというのを利用すると良いと書いていますね。

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <% if  (!user_signed_in?) %>
          <!-- ログインしていない時 -->
          <li><a href="#">●●になる</a></li>
          <li><a href="#">利用の流れ</a></li>
          <li><%= link_to "アカウント作成", new_user_registration_path %></li>
          <li><%= link_to "ログイン",  new_user_session_path %></li>
          <% else %>
          <li><%= link_to "ログアウト",  destroy_user_session_path,method: :delete %></li>
          <% end -%>
        </ul>
      </div>

このようにテンプレートに直接if文を書くだけでOK.

ログイン前
f:id:takanori5:20171031000057p:plain

ログイン
f:id:takanori5:20171031000112p:plain

ログイン後
f:id:takanori5:20171031000132p:plain

commit
github.com

【Swift】facebookとtwitterにシェアする方法

facebooktwitterにアプリからシェアする機能を実装する方法をまとめます。

まずはframeworkをimportします。
linked frameworks and librariesで+ボタンをクリック
f:id:takanori5:20171029200009p:plain

social.frameworkをadd

f:id:takanori5:20171029200113p:plain

contorollerにimportする

import Social

//filedを定義
var composeController:SLComposeViewController!

SLComposeViewController は「Social Framework」のクラス。
SNSへの投稿を作成するための画面を提供します。
コードを 2 行書くだけで SNS へ投稿する機能を提供できます。
便利ですね。

では実際に定義したcomposeControllerを利用して投稿する機能を実装します。
ここでは投稿用のメソッドpostTwitterというのを定義しています。

    //twitterに投稿
    func postTwitter(){
        //インスタンス化
        composeController = SLComposeViewController(forServiceType: SLServiceTypeTwitter)
        //投稿したいテキストを指定
        composeController.setInitialText(textView.text)
        //投稿する画像を指定
        composeController.add(endImageView.image)
        // SLComposeViewController を表示する(投稿画面が立ち上がる)
        self.present(composeController, animated: true, completion: nil)
    }

上記の流れで実装完了です。
facebookに投稿したい場合は、インスタンス化する際のservieTypeをSLServiceTypeFacebookに変更すればOKです。
あとは画面のボタンタップ時などに読んで使いましょう。

●練習用githubリポジトリ
github.com

【jQuery】 classの追加・削除をやってみる

htmlで共通して利用しているクラスを追加、削除することで適用されるスタイルを変更したい場合に利用すると便利な方法。


addClass()

    $("要素名").addClass("class名")

removeClass()

    $("要素名").removeClass("class名")

参考:
www.flatflag.nir87.com

【bootstrap】formsを使ってみる【Ruby】

前回の記事
takanori5.hatenablog.com


Forms · Bootstrap


前回作成した登録ページをbootstrapのformsを使って綺麗にしてみます。

        <div class="field">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: true %>
        </div>

以下のように修正
classをform-groupに、さらにfieldにクラスを追加。(class => 'form-control'を追加)

        <div class="form-group">
          <%= f.label :email %><br />
          <%= f.email_field :email,:class =>'form-control', autofocus: true %>
        </div>

e-mailフィールドが変化しました。

f:id:takanori5:20171028164551p:plain

【bootstrap】deviceを導入して認証機能をつける【Ruby】

deviceは
認証系アプリに必要な機能を簡単に追加できる便利なgemです。

まずはdeviceのgemを以下のページを元に導入。
github.com

Gemfileに追記

gem 'devise'

bundle installでインストール

すると以下のような文言がターミナルに表示されるので一個ずつ設定していきます。

===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

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

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

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

  4. If you are deploying on Heroku with Rails 3.2 only, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.

  5. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

1. config/environments/development.rbにデフォルトURLの指定

  # mailer setting
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

productionも同様に追記しましょう。
(本番環境用なのであとで実際のhostに変えましょう)


2. config/routes.rb.にroot_urlの指定

root :to => 'pages#index'

ここまできたら一度サーバーを起動してみます。
f:id:takanori5:20171028131312p:plain
http://localhost:3000/pages/indexでアクセスしていたurlが
ルートを指定したため
以下のurlでアクセス可能になりました。
http://localhost:3000/

3. app/views/layouts/application.html.erb.を編集してflashメッセージの設定<%= yield %>の下に追記します。

<!DOCTYPE html>
<html>
<head>
  <title>MyWebApp</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
</body>
</html>

4. Rails3.2用の設定
ここは対象verでなければ無視!

5. DeviseのViewを作成
ターミナルに指定されたコマンドを貼り付けて実行する
f:id:takanori5:20171028132051p:plain

これで完了です。

続いて、、、
Userモデルの設定

rails generate devise User

f:id:takanori5:20171028132341p:plain

マイグレーションファイルが作成されました。

続いて以下のコマンド

rails db:migrate

f:id:takanori5:20171028133114p:plain
このコマンドを実行すると、RubySQLに翻訳されて、データベースに自動接続します。そして、テーブル作成のSQLを自動実行し、正常に作成されたか否かの結果を表示します。
*一度実行対象になって正常に実行されたマイグレーションファイルは、実行対象から除外される
*実行していないのだけ対象になる


さて、サーバーを起動し、試しに生成されたurlにアクセスしてみると・・・
ログイン画面が表示されました!!
f:id:takanori5:20171028134628p:plain