【Activeadmin超入門】デザイン・スキン変更 〜おまけ〜

複数の管理画面をactiveadminで使用している場合は
間違わないようにするために、できれば違うデザインを反映させたいところ。

ここではActiveadminで使用できるスキンである「ActiveSkin」を紹介する。

github.com

１）インストール

gem 'active_skin'

２）SCSSファイル変更

active_admin.css.scss内に「@import "active_skin";」を入れるだけ。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
@import "active_skin";
...

３）ロゴ変更

デフォルトだと「RST ADMIN」というロゴが入る。

この箇所のロゴを変えたいときは、２）のSCSSに@importしたすぐ上に
「$skinLogo: url("admin_logo.png") no-repeat 0 0;」を入れてあげれば良い。
※admin_logo.pngは任意の画像パス
画像は160×40で内で作ればよいっぽい。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
$skinLogo: url("admin_logo.png") no-repeat 0 0;
@import "active_skin";
...

４）基本色の変更

基本色の変更も可能。
同じように@importの前にsassの変数を入れる。

# active_admin.css.scss

@import "active_admin/mixins";
@import "active_admin/base";
...
$skinActiveColor: #001cee;
$skinHeaderBck: #002744;
$panelHeaderBck: #002744;

@import "active_skin";
...

【Activeadmin超入門】インストール・環境設定 〜その１〜

Activeadminとは
要は「管理画面」系のRailsアプリをお手軽に作ることができるgem。

デザインは単調なものだが、決まったやり方に沿って作れば、
CRUD画面、検索フィルター、バッチ処理、CSV出力などの処理
また連携するgemを入れることでユーザ認証、権限管理などの処理も
かなり簡単に作成できる。

Active Admin | The administration framework for Ruby on Rails

UIにはこだわらず、さくっと管理画面系のアプリを作りたい場合は
うってつけのgem。

この記事では、インストールして初期動作までの流れを説明。

Gemインストール

まず注意してほしいのがActiveadminの
ドキュメントのトップページどおりの
やり方でgemをインストールしても、次に続く初期処理でエラーがでることだ。

ドキュメントのトップページ

rails generate active_admin:install

実行したコマンド

エラーを見ると以下のようにある。

`rescue in install_devise': To use devise you need to specify it in your Gemfile. If you don't want to use devise, run the generator with --skip-users. (ActiveAdmin::GeneratorError)

要はユーザ認証機能を導入するためのgemである"devise"をGemfile内に記入しろ！
もし使わないなら、「--skip-users」オプションをつけろ！と言っている。

だったら最初から、ドキュメントに書いとけよと思ったら、
違うページに書いてあった。
本当に紛らわしいから、同じ記述をドキュメントのトップにも書いてほしい。

ちなみにこの違うページには以下のようにgemをインストールするよう指示があるが

gem 'activeadmin'

# Plus integrations with:
gem 'devise'
gem 'cancan' # or cancancan
gem 'draper'
gem 'pundit'

以降で説明するdeviseが必要ないなら、最低限必要なのは"activeadmin"だけ。

以下のようなケースで、各gemが必要になるものと思われる。

１）ユーザ認証系処理（メール経由でのユーザ登録認証、パスワードリセットなど）を導入したい。

deviseを追加。

gem 'activeadmin'
gem 'devise'

deviseについては以下のサイトが分かりやすい。
qiita.com

２）権限管理（システム管理者、編集者、閲覧者など）を導入したい。

deviseとcancan(or cancancan）を追加。
※ユーザモデルが既に存在する場合はcancancanだけでも良いっぽい。

ちなみにcancanはプロジェクトの更新が止まっているらしく
それを引き継いでいるプロジェクトがcancancanだとのことなので、
自分はcancancanを使用する。ちなみにどちらも同じ記述で設定が可能っぽい。

gem 'activeadmin'
gem 'devise'
gem 'cancan'

cancancanについては以下のサイトが分かりやすい。
qiita.com
qiita.com

３）View内でロジックが複雑になる場合の対応をしたい

draperを追加。
View内でif文などロジックが複雑な場合且つHelperを使ったとしても
コードが複雑になる場合などに便利そう。

gem 'activeadmin'
gem 'draper'

draperについては以下のサイトが分かりやすい。
qiita.com

４）リソースに対しても権限管理したい！

punditを追加。
自分もよくわかってない。以下のサイトさんを参考にされたし。

gem 'activeadmin'
gem 'pundit'

punditについては以下のサイトが分かりやすい。
qiita.com

個人的な意見だと、大体の管理画面系アプリだったら
以下の設定でいい気がする。

gem 'activeadmin'

# Plus integrations with:
gem 'devise'
gem 'cancancan'

Activeadmin 初期設定

deviseをどう設定するかで、初期設定の方法が違う。

１）deviseを使う場合で、ユーザ管理のクラスを新規で作成する場合

$ bundle exec rails g active_admin:install

この場合、AdminUserモデルが生成され、このモデル用のマイグレーションファイルも生成される。

２）deviseを使う場合で、ユーザ管理のクラスが既に存在する場合は以下（例：Userクラスが存在する場合）

$ bundle exec rails g active_admin:install User

３）deviseを使わない場合

$ bundle exec rails g active_admin:install --skip-users

各場合に応じて、必要なファイルが生成される。
以降の説明は１）の新規でdeviseを使う場合の前提で進めていく。

マイグレーション

初期設定により、マイグレーションファイルが生成されているので
マイグレーションを行う。

$ bundle exec rake db:migrate

初期ユーザの設定（※deviseを使用する場合のみ）

初期設定により、seeds.rbファイルが生成されているので
そのデータをDBに流し込むだけ。

$ bundle exec rake db:seed

ログイン

ブラウザで以下にアクセス
http://localhost:3000/admin/

以下の情報でログインできる。

USER : admin@example.com
PW : password

【Google Home】超絶便利！電話のかけ方

※現在の時点（2017/12/19）では、アメリカとカナダしか対応していない。

Google Homeを使用して電話をかける場合で
「名前で電話をかけたい場合」は、Google連絡先（Google Contacts）に相手の連絡先を
設定しておく必要がある。
※番号で電話をかける場合は上記の設定は不要。

また間柄（夫、妻）で電話したいときは
「Ok Google (or Hey Google）, Call (husband or wife)」で話しかけると
「誰がその人かを聞いてくれる」ので
名前を言うと、間柄を勝手に記憶してくれる。

かなり便利。

あと、デフォルトだと発信者ID（Celler ID）が登録されていないので
電話をかけると相手には、Unknown Celler IDと表示される。

この対応をするには、設定画面に「Calls on speakers」という
項目があるので、その中で自分の番号を設定すれば良い。

※現時点では、「Calls on speakers」は日本のGoogle Homeアプリ内では
表示されない。

[参考]
How To Set Up Google Home Calls Using Your Phone Number

【Google Home】音声の英語設定の仕方

自分の場合、知り合いの英語ネイティブにも使用してもらいたかったので
英語の設定が必要になった。

設定は簡単で、
Google Homeアプリを開き、
設定画面から

「その他の設定」-> 「デバイス（例: オフィス、キッチン」-> 「アシスタントの言語」

からGoogle音声を変更できる。

【Google Home】複数ユーザ登録の方法

Google Homeに自分の声を登録するには
App StoreもしくはGoogle Playで
Google Homeアプリをダウンロードする必要がある。

また複数人のユーザ（家族や友人）の登録も
同じようにGoogle Homeアプリをダウンロードし
声を登録させれば良い。

最大で６人まで登録できるとのこと。

[参考]
www.lifehacker.jp

【ShopifyApp × Rails】Embedded Appsの設定について

RailsでShopifyアプリを作成する際は、
公式から配布されているgemである「shopify_app」を使用して
アプリを作成するのが普通だと思う。

github.com

このgemを介して、アプリの初期設定を行うと
現時点（2017/12/15）では
アプリはデフォルトで「Embedded apps」として設定される。

Shopify Open Source > shopify_app

「Embedded apps」（直訳：埋め込みアプリ）とは
要はShopifyがUXのために、アプリがあたかもShopifyの一部として動作しているかのように
見せるために、Shopify内でiframeを介し
外部サーバに存在するアプリを使用できるようにする機能である。（だよね？）

デフォルトの初期設定は以下のように行う。

$ rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret>

※api_keyとapp_secretはShopifyページ内で「Create app」を行うと
自動で作成され、設定画面で確認できる。

埋め込みアプリ作成するなら、このままで良いが
外部サーバに飛ばして、アプリを使う方法を取りたい場合は、
このEmbedded設定をオフにしないといけない。

その場合は、上記の加えて以下のようにすれば良いっぽい。

$ rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret> --embedded false

しかしこれだけでは、駄目だった。。
しかも、ググってもそれらしい回答はない・・（自分の探し方が悪いのかもだが。）
でもShopifyアプリの設定画面を見たらあった。。。

この画面上の「Embed in Shopify admin」の項目を「disabled」にすればよかったのだ。
これで、アプリのリンクをクリックすれば、設定した外部サーバに遷移するようになる。

【Rails】select_tag使用時にデフォルト値を設定する方法

ググってもさっくり結果が出なかったので自分用のメモ。

select - リファレンス - - Railsドキュメント

上記の公式ページを見ると、
optionsの設定には、「options_for_select」を使用しているが
:selectedを指定している例がなかったので調べたら、
やっぱり「options_for_select」でそういう設定ができた。

<%= select_tag 'prefecture', options_for_select(prefecture_options, :selected => selected_prefecture), :style => 'width: 200px', :class => 'selectbox_shipping_code' %>

上記のように、options_for_selectの第二引数に、「:selected」を設定するだけで良い。

またselectとプラグインの「select2」を併せて使用したいときなどは
multiple属性を設定したい時があるがそのようなときは以下のような設定でいける。

<%=select_tag 'stores[]', options_for_select(
@stores.map {|s| [s.store_name, s.store_id]}, 
@user.stores.pluck(:id)
), :multiple => true>