DeviseとOmniAuthで複数のSNSを利用して認証する

DeviseとOmniAuthで複数のSNSを利用して認証する機能を開発した時のメモ。

全体の流れ

参考リンク

• OmniAuth with multiple models
• [Devise How-To] OmniAuth認証を複数のモデルで共用する方法（翻訳）

  ポイント

• Userモデルから:omniauthable引数を削除する（ここに気づかずにはまった）

Controller周り

参考リンク

• Managing Multiple Providers
• Devise+OmniAuthで複数サービスから同じユーザーでログインする方法
• RailsでいろんなSNSとOAuth連携/ログインする方法

Model周り

omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
end

get '/auth/:action/callback', controller: 'authentications', constraints: { action: /twitter/ }

app/controllers/authentications_controller.rb

class AuthenticationsController < ApplicationController
  auth = request.env['omniauth.auth']
end

https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview#facebook-example https://github.com/omniauth/omniauth/wiki/Managing-Multiple-Providers

$ rails g model Authentications user:references provider uid access_token access_secret

class CreateAuthentications < ActiveRecord::Migration[5.0]
  def change
    create_table :authentications do |t|
      t.references :user, foreign_key: true, null: false
      t.string :provider, null: false
      t.string :uid, null: false
      t.string :access_token
      t.string :access_secret

      t.timestamps
    end

    add_index :authentications, [:provider, :uid], unique: true
  end
end

authentication.rb

class Authentication < ApplicationRecord
  belongs_to :user

  validates :user_id, presence: true
  validates :provider, presence: true
  validates :uid, presence: true, uniqueness: { scope: :provider }
end

https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview#facebook-example

参考

https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview https://github.com/plataformatec/devise/wiki/OmniAuth-with-multiple-models https://techracho.bpsinc.jp/hachi8833/2017_05_18/40208 https://github.com/omniauth/omniauth/wiki/Managing-Multiple-Providers https://qiita.com/awakia/items/03dd68dea5f15dc46c15 http://sinsoku.hatenablog.com/entry/2016/01/03/090000 https://qiita.com/kami_zh/items/94aec2d94a2b4e9a1d0b

node.jsをインストール

node.jsをインストールした時のメモ

$ brew install nodebrew
$ nodebrew -v
$ nodebrew ls-remote
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary v8.9.3
$ nodebrew ls
$ nodebrew use v8.9.3
$ nodebrew ls
v8.9.3

current: v8.9.3
$ node -v
-bash: node: command not found

~/.bash_profile

export PATH=$HOME/.nodebrew/current/bin:$PATH

$ source ~/.bash_profile
$ node -v
v8.9.3
$ npm -v
5.5.1

参考

• hokaccha/nodebrew
• Node.jsをMacにインストールしてnpmを使えるようにする

Railsでサイトマップを作成

Railsでサイトマップを作成した時のメモ

XMLサイトマップの作成

リンク先の記事の方法でxmlの作成から定期更新まで実装できます。

post.simplie.jp

サイトマップの内容

食べログのサイトマップを参考に値の設定を行いました。

https://tabelog.com/sitemap.xml

食べログの例：

	changefreq	priority
各都道府県	always	1
店舗	weekly	0.5
口コミ	monthly	0.3

BL902HWの子機にWLI-UTX-AG300/Cを設定

• 親機：BL902HW
  • Aterm Support Information | BL902HW | トップページ
• 子機：WLI-UTX-AG300/C
  • テレビ用かんたん無線LANユニット : WLI-UTX-AG300 | BUFFALO バッファロー

BUFFALO 11n/a/g/b 300Mbps 簡単無線LAN子機 WLI-UTX-AG300/C

加えてMacbookAirでWLI-UTX-AG300/Cの設定を行うためLANアダプタを購入。

BUFFALO 10/100M USB2.0用 LANアダプタ 【Nintendo Switch, Wii,Wii U,MacBookAir動作確認済】 LUA3-U2-ATX

• 設定方法
  • WLI-UTX-AG300 設定ガイド(2版) - 35012414 ver.02 -

Androidローカライズの参考リンク

Androidでローカライズする方法の参考リンク。
Android StudioのTranslations Editorを使うと便利そうなので試してみる。

Localize the UI with Translations Editor | Android Studio

Error:Execution failed for task ':app:processDebugManifest'.

エラー内容

参考書籍の写経をしていたところ以下のエラーが表示されました。

Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : Attribute meta-data#android.support.VERSION@value value=(25.3.0) from AndroidManifest.xml:5:55-77
    is also present at [com.android.support:design:25.3.1] AndroidManifest.xml:27:9-31 value=(25.3.1).
    Suggestion: add 'tools:replace="android:value"' to <meta-data> element at AndroidManifest.xml:5:5-80 to override.

対応

エラー内容を参考に'tools:replace=“android:value”‘をAndroidManifest.xmlに設置してみましたが解消されませんでした。Design Support Libraryのバージョンの問題ではと考えて、他のテンプレートの読み込み方法を参考に以下の内容に変更しました。

変更前

compile 'com.android.support:design:25.3.1'

変更後

compile 'com.android.support:design:26.+'

先程のエラーは解消されましたが、新しいエラーが表示されました。

java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

エラー内容に従ってAndroidManifest.xmlのactivityのthemeを変更しました。

android:theme="@style/Theme.AppCompat"

正常に表示を確認できました。

その他

今回のエラーをきっかけにAndroid Studioログの見方を学びました。

developer.android.com

参考

• logcat を使用したログの出力と確認 | Android Studio
• Using the Design Support Library | Android Developers
• 【Android】support-v7-appcompatにスタイルを対応させる - アプリ開発者のチラシの裏

Androidアプリを2週間の独学でリリース

Androidアプリを2週間の独学でリリースした時のメモ。

背景

個人開発でちょっとしたアイデアをかたちにしたい場合、Webサービスをつくるよりもアプリ開発のほうが向いているのではないかという考えに至り、過去に何度か挫折した経験から多少の苦手意識もある中でアプリ開発の勉強をはじめました。

1週目

MacbookProを購入

7年前に購入したMacbookAirではエミュレータが起動しませんでした。以前にもアプリ開発に興味を持ってスペックの問題で見送ったことを思い出して、意を決してMacbookProを購入。メモリ16GB・SSD512GB・Corei7にカスタマイズしました。

本を購入

モチベーションを上げるためにアプリ開発者の方の本を購入して読みました。

バカ売れアプリ生活 自作ゲーの集客とマネタイズぜんぶ教えます!

並行して、Androidアプリ開発の本を購入してサンプルアプリなどを動かしてみました。

ほんきで学ぶAndroidアプリ開発入門 第2版 Android Studio、Android SDK 7対応

アプリ開発に着手

手を動かしたほうが学習が早いと思ったことと作りたいアプリのイメージがあったので、ざっくりと要件や画面イメージをノートに書き出して開発に着手しました。何度か書き直したり、やり直したりを繰り返したあと、最初のアプリで自分のつくりたいものをつくるのは難しいと判断して開発を中断しました。

2週目

本を購入

参考にしている本のRealmのバージョンが古く数時間はまってしまったため、別の本を買うことにしました。本屋でいくつか読み比べて「はじめてのAndroidプログラミング」の説明が分かりやすかったので購入しました。

はじめてのAndroidプログラミング 改訂版

アプリ開発

1週目の反省からハードルを下げて、手元の本とググって自己解決できるレベルのアプリを作ることにしました。

アプリ公開

「ほんきで学ぶAndroidアプリ開発入門」と開発者向けの公式サイトを参考に公開申請作業を進めました。公開申請後、1~2時間後に無事に公開されました。

developer.android.com

公開後

クソアプリと判断されることを心配していましたが、実際には現在まで自分以外のダウンロードはなく、クソアプリにもなれない厳しい現実に直面しました。

今後について

しばらくはこのまま現在のアプリのアップデートと、実装可能なレベルで新しいアプリの開発を続けて、Androidアプリ開発の幅を広げていきたいと思います。