読者です 読者をやめる 読者になる 読者になる

30歳パパエンジニアのアウトプット帳

30歳に突入した1児のパパエンジニアのブログ

activeadminでログインにDeviseではなくSorceryを利用する

管理画面をサクッと作成できるactiveadminで、ユーザ認証にDeviseではなくSorceryを利用したのでその手順を紹介。

※前提としてactiveadminは導入済みとします

1. sorceryをインストール

Gemfileにsorceryを記述して、bundle install

[Gemfile]
・・・
gem 'sorcery'
・・・

2. sorceryの設定ファイルなどを生成

rails generate sorcery:installを実行


※remember_meなどのsubmodulesも設定したい場合はドキュメントを参照。

※初回のbundle installでpathオプションを指定した人はbundle exec rails generate sorcery:installですよ。念のため初心者の為に補足。

3. db:migrateを実行

手順2. でmigrationファイルが生成されているのでrails db:migrateを実行。

4. 認証関連のController/Viewの作成

DeviseのようにビルドインでControllerやViewはないので、ログインに必要なものを自分で作ります。

※すごく簡易なログイン画面とログイン/ログアウト処理を実装します


  • app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
  def new
    @user = User.new
  end

  def create
    login(params[:user][:email], params[:user][:password])

    # redirect_toの代わりにsorceryのredirect_back_or_toでもOK
    redirect_to admin_dashboard_path ← admin_dashboard_pathはactiveadminが定義したdashboardへのパス
  end

  def destroy
    logout

    redirect_to new_session_path
  end
end
  • app/views/sessions/new.html.erb
<h2>Log in</h2>

<%= form_for @user, url: sessions_path do |f| %>
  <div>
    <%= f.text_field :email %>
    <%= f.password_field :password %>
  </div>

  <div>
    <%= f.submit "Log in" %>
  </div>
<% end %>


コントローラー作成したのでconfig/routes.rbも設定します。

  • config/routes.rb
Rails.application.routes.draw do
  ActiveAdmin.routes(self)

  resources :sessions, only: %i(new create)
  delete 'sign_out', to: 'sessions#destroy'

  ・・・
end

5. activeadminの設定の変更

sorceryの準備がやっと完了したので、やっとactiveadminとsoceryの連携部分です。

やることはドキュメントにあるとおり、config/initializers/active_admin.rbの設定を行います。


下記のコメントアウトを外してsorcery用の設定をしますです。

  • config.authentication_method
  • config.current_user_method
  • config.logout_link_path
  • config.logout_link_method
   #
   # This setting changes the method which Active Admin calls
   # within the application controller.
-  # config.authentication_method = :authenticate_admin_user!
+  config.authentication_method = :require_login

   # == User Authorization
   #
@@ -86,7 +86,7 @@ ActiveAdmin.setup do |config|
   #
   # This setting changes the method which Active Admin calls
   # (within the application controller) to return the currently logged in user.
-  # config.current_user_method = :current_admin_user
+  config.current_user_method = :current_user

   # == Logging Out
   #
@@ -98,13 +98,13 @@ ActiveAdmin.setup do |config|
   # will call the method to return the path.
   #
   # Default:
-  config.logout_link_path = :destroy_admin_user_session_path
+  config.logout_link_path = :sign_out_path

   # This setting changes the http method used when rendering the
   # link. For example :get, :delete, :put, etc..
   #
   # Default:
-  # config.logout_link_method = :get
+  config.logout_link_method = :delete

   # == Root
   #
・・・

6. root_pathの設定

手順5. まで完了したらhttp://localhost:3000/adminにアクセスしてみましょう。

localhostやポート番号の3000は自身の環境に合わせてください


アクセスすると下記のエラーが発生すると思います。

NameError (undefined local variable or method `root_path' for #<Admin::AlcoholsController:0x0055a9592f3d40>):

tmp/bundler/ruby/2.3.0/gems/sorcery-0.10.3/lib/sorcery/controller.rb:98:in `not_authenticated'
tmp/bundler/ruby/2.3.0/gems/sorcery-0.10.3/lib/sorcery/controller.rb:25:in `require_login'
・・・

これは認証が必要なページに未認証でアクセスした時にsorceryがroot_pathにリダイレクトしようとしているのですが、root_pathが設定されていないのでこのエラーが発生しています。


これを解決するにはconfig/routes.rbでrootの設定をすればいいです。

未認証でアクセスした場合はログイン画面に遷移して欲しいのでログイン画面のアクションを指定します。

  • config/routes.rb
Rails.application.routes.draw do
  ActiveAdmin.routes(self)

  resources :sessions, only: %i(new create)
  delete 'sign_out', to: 'sessions#destroy'

  root to: 'sessions#new'

  ・・・
end

これで、未認証状態でhttp://localhost:3000/adminにアクセスした時にログイン画面へ遷移させることができるようになりました。

【番外】config/routes.rbにrootを設定する以外の方法

上記でconfig/routes.rbにrootを設定する方法を紹介しましたが、rootがログイン画面なのは何かしっくり来ません。(私だけでしょうか?)

そんな場合はapplication_controller.rbのでsorceryが定義したnot_authenticatedをオーバーライドします。


  • app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
   ・・・

  # override sorcery not_authenticated method
  def not_authenticated
    redirect_to new_session_path
  end

  ・・・
end

7. 確認

rails consoleなどでユーザを作成してからログインを行いましょう。ログイン後activeadminのダッシュボード画面が表示されると思います。

※ログアウトも問題なくできるはずです


以上で完了です。

react-native-navigationでRCCManager.h file not found.エラー

react-native-navigationを使ってみようとインストールしてみたが、

RCCManager.h file not found.とエラーになってしまい起動できなかった。。。

バージョン

  • react-native: 0.41.2
  • react-native-navigation: 2.0.0-experimental.256

エラーが出た手順

  1. yarn add react-native-navigation@next
  2. react-native link
  3. AppDelegate.mを変更

手順3.を終えた時点で、#import "RCCManager.h"の箇所がRCCManager.h file not found.エラーになってしまいシュミレーターも起動できない。。。

解決方法

公式のドキュメントはreact-native linkを利用せずに手動でライブラリをリンクさせている。

Installation iOS

この手順のHeader Search Pathsの箇所の対応をするとエラーが消えてシュミレーターも起動できるようになった。

In Xcode, in Project Navigator (left pane), click on your project (top) and select the Build Settings tab (right pane). In the Header Search Paths section add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure on the right to mark this new path recursive (screenshots)

おそらく公式の手順通りに手動リンクしていれば発生しなかったのだろう。。

jquery.validate.jsで2つあるsubmitボタンの内の1つのバリデーションを無効にする

もともと変更を行うformを作成していたが、そこで追加で別submitボタンで追加したかった。


ただ、何もしないと新しく追加した方のsubmitボタンを押してもvalidate.jsの入力チェックが効いてしまう。

※新しく追加した方は入力チェックをしたくない


validate.jsのドキュメントを読んでみたら、ちょうどいいオプションがあったのでそれで解決した。

Reference documentation | jQuery Validation Plugin

※formnovalidateを対象のsubmitボタンに設定するとそちらだけ入力チェックをスキップできる


Railsでsubmit_tagを使っていたので下記のように書いた。

<%= submit_tag "submit2", {formnovalidate: true} %>

React Nativeでrun-iosした時にPrint: Entry, ":CFBundleIdentifier", Does Not Existになってしまう問題

react-native run-iosを実行した時に下記のようなメッセージが表示されてしまい、アプリが起動しなかった。

XCodeでRunするとちゃんとアプリが起動する)

The following commands produced analyzer issues:
    Analyze Modules/RCTRedBox.m
(1 command with analyzer issues)

Installing build/Build/Products/Debug-iphonesimulator/アプリ名.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/アプリ名.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist


ググると下記のQiitaページがヒットするが、ちょっと今回の事象とは違う。

(RCTSRWebSocketのエラーは出てない)

qiita.com


もう少し調べてみると、react-nativeのissueでそれらしきものを発見。 下記のコメントの対応で解決した。

github.com

build/Build/Productsにするだけでなく、"Relative to Workspace"を選択するのがポイントみたい。

react-navigation

react-nativeのnavigation系のライブラリを探しているときに見つけた。

github.com

今年の1月末あたりに公開されたようで、ブログによるとEx-NavigationおよびReact NativeのNavigatorやNavigationExperimentalの置き換えを狙っているらしい。


まだ1.0.0-beta3なのでこれからだろうが、NavBarやTabBarの中でModal表示する場合にどうするかが分からなかった。(サンプルはホームからModal表示でNavBarやTabBar遷移するものだった)

StackNavigatorにmode: ‘modal'を渡せばModalになるが、ネストの中の定義は効かずトップに定義すると全てモーダルになってしまう。。

NavBarやTabBarの中でModalは普通にアプリを作っていると利用があると思うが、どうするのだろう。

Modalは別でReact NativeのModalコンポーネントを使う??

react-native-router-fluxでサンプル

配色とか超雑だけど、react-native-router-fluxのサンプル実装をした。

直近で必要そうなNavBar,TabBar,Modalの各遷移を公式のExampleを参考にした感じ。

github.com


ModalはSegueでいうpresent modallyな動きをして欲しかったが、合わせるには工夫が必要?みたい。

他にモーダル用のライブラリとかあるのかな?

追記 (2017/02/14 13:01)

他にreact-native-navigationというものがある。

example動かした感じでは、求めているものの動きはこちら。

github.com

でも、react-native 0.37.0までしかサポートしてないのか。。

追記 (2017/02/15 22:55)

ModalのScene定義の位置をtabsの中にしていたので、present modallyな遷移アニメーションになってなかったらしい。

修正したらちゃんと動いていたので、これで良さそう。(ソースも修正しました。)

react-nativeでiOSアプリを作ってみた時のエラーあれやこれ

初めてreact-nativeでiOSアプリを作ってみた。

メディアプレイヤーアプリのようなもの。

(個人利用目的でアプリストアでは公開してない)

利用したライブラリ

  • react-native-fs
  • react-native-vector-icons
  • react-native-video
  • react-native-video-player

遭遇したエラー

react-native-videoでビルドエラー

普通にnpm installでreact-native-videoをした場合にビルド時エラーが出たので、下記のIssueにあるようにmasterを使うようにしたら解決した。

github.com

require(‘./images/’ + no + ‘.png’)のようなことはできない

公式にある通りrequire内で変数は使えない。

facebook.github.io

// GOOD
<Image source={require('./my-icon.png')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

// GOOD
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />

しかし、sourceにはrequireの他に{uri: ‘パス’}を引数に渡せ、こちらだと変数を使える。

今回はiTunesのファイル共有を利用することにしたので、react-native-fsを利用してファイルの絶対パスを指定している。

※react-native-fsを利用するとRNFS.DocumentDirectoryPathでアプリのDocumentsフォルダの絶対パスが取得できる

もしソースコード内のファイルの場合に{uri: ‘file://./images/test.png’}のような相対パスでの指定はできるのだろうか?別の機会で検証してみたい。


また、iOSアプリのディレクトリ構成は下記のQiitaが分かりやすかった。

qiita.com

実機でテストするときのエラー対応

まずはそのまま実機にビルドしようとするとエラーが出るので、下記を参考にしてTeamやTarget OSを指定した。

yoichirowatanabe.hatenablog.com

これで実機にはビルドできるがまだDebugモード?なので、起動が遅い。

なので、Productionとして実機で動かすときは公式にあるように、Releaseにする。(DefaultはDebugのはず)

facebook.github.io

しかし、これをしてビルドしようとしても下記のエラーが出てしまった。。。

ld: symbol(s) not found for architecture arm64 react-native

調べてみると下記のissueと同じようだった。

github.com

なので、ここにいくつか対応方法が書いてあったやつのDead code strippingをNoにするとビルドできた。

※アプリ名TestsにlibReact.aを追加しろとあったが、それはすでにあったのでやらなかった