「google mapで開く」リンクの貼り方(iOS/Android他、全プラットフォーム対応)

Developer Guide  |  Maps URLs  |  Google Developers

Universal cross-platform syntaxというものがある。

Universal cross-platform syntax

プラットフォーム(端末)の差異を意識する必要のないapiが用意されているのでそれを使えば良い。
プラットフォームごとの挙動は以下の通り。

  • Android:
    • Google Mapsアプリがインストールされており、かつアクティブ状態の場合、アプリでマップが立ち上がる。
    • Google Mapsアプリがインストールされていない、または無効化されている場合、ブラウザでマップが立ち上がる。
  • iOS:
    • Google Mapsアプリがインストールされている場合、マップがアプリで立ち上がる。
    • Google Mapsアプリがインストールされていない場合、ブラウザでマップが立ち上がる。
  • その他のデバイス
    • ブラウザでマップが立ち上がる。

アクション

parameter部分の詳細は冒頭のデベロッパー向けドキュメントを参照されたい。

Rails5 Active Storageを使って画像アップロード機能を実装する

ファイルアップロード機能の実装方式

Rails5.1以前においては以下のgemを使用するのが有力な選択肢だった。

Rails 5.2になって、Rails本体の機能としてActive Storageが追加されたことで、これが上記の選択肢に加わった。

Active Storage

rails/activestorage at master · rails/rails · GitHub

概要はこちらのRails Guideを参照されたい。
Active Storage Overview — Ruby on Rails Guides

で、どれを使えばいいのか?

Active Storageはビルトインならではの簡便さが魅力であるものの、CarrierWaveやShrineと比較すると、まだ機能的に未成熟のようだ。(自分で触ったわけではないが)

なので要件に照らして、Active Storageで事足りる、あるいは機能不足を許容できるのであれば、お手軽に使えるActive Storageを使えばよいし、そうでなければCarrierWaveやShrineを選ぶことになるだろう。

今後の変化の激しさも考えると、現時点でActive Storageを採用するのは悪手な気もするのだが、 今回はお試しということでActive Storageを使ってみることにした。

環境

  • Rail 5.2.1
  • Active Storage 5.2.1
    ファイルアップロード機能実装に必要
  • MiniMagick 4.9.2
    画像の加工に必要
  • ImageMagick 6.7.8.9-15
    MiniMagickが使用。OSにインストールする。

Active Storageを利用するにはRails 5.2.0以上にアップデートしなければならない。
5.1.5からのアップデート方法であれば、こちらの記事に非常にわかりやすくまとまっている。 qiita.com

画像アップロード機能の要件

  • 1つのモデルレコードに対し、複数の画像を添付できる
  • オリジナルサイズだけでなく、指定のサイズでリサイズされたサムネイルを生成する
  • バリデーションする
    • file type: jpegpngのみ許可

実装

以下、rails newで新規プロジェクトを作成した直後の状態を想定する。

MiniMagickのgemを追加

Gemfileに以下を追記

# Gemfile
gem 'mini_magick', '~> 4.8'
$ bundle install

Active Storageが使用するtableを作成

Active Storageはファイル添付機能の実装にあたり、添付先のモデルにカラムの追加を必要としない。代わりにBlobとAttachmentの2つのモデルを用いる。

  • Blob(Binary Large Object):
    ファイルのメタ情報を管理。ファイルの実態はローカルファイルシステムまたはS3などのクラウドサービスに格納される。Blobが管理する情報は以下。
    • id
    • key
    • filename
    • content_type
    • metadata
    • byte_size
    • checksum
    • created_at
  • Attachment:
    添付先のモデルとBlobを紐づける中間テーブルとしての役割を担う。Attachementが管理する情報は以下。
    • id
    • name
    • record_type
    • record_id
    • blob_id
    • created_at

上記2つのモデルを以下の2コマンドで作成できる。

# migrationファイルの作成
$ rails active_storage:install
# テーブルの作成
$ rails db:migrate

scaffoldでmodel, view, controller等を作成

$ rails g scaffold post title body:test

routeの追加

# config/routes.rb
root to: 'posts#index'

modelの編集

# app/model/post.rb
has_many_attached :images
validate :image_type

def thumbnail input
  return self.images[input].variant(resize: '300x300!').processed
end

private

def image_type
  if images.each do |image|
    if !image.content_type.in?(%('image/jpec image/png'))
      errors.add(:images, 'needs to be a JPEG or PNG')
    end
  end
end
  • validate :image_type , def image_type ファイルタイプでバリデーションを行う。今回はjpegpngファイルのみアップデートを許可し、それ以外はerrorを返す。
  • thumbnailメソッド:
    アップロードされた画像をオリジナルサイズで扱うのではなく、リサイズしてサムネイルとして表示するためのメソッド。processedを使用することで、毎回リサイズの処理を走らせずに済む。
    • input(引数):
      複数画像を添付可能とするため、何枚目の画像かをinputという引数で指定できるようにしておく。(さらにいえば、リサイズ処理におけるサイズ指定を変数化して、第二引数、第三引数で指定できるようにしておくとよい。本例では省略。)
    • resize: '300x300!':
      リサイズのサイズ指定。"!"を付けるとオリジナル画像のアスペクト比を無視して、指定されたサイズによるリサイズを強制する。

controllerの編集

# app/controller/posts_controller.rb

# privateメソッドのpost_paramsを修正
  def post_params
    params.require(:post).permit(:title, :body, images: [])
  end

viewの編集

_formページ

viewのフォームに画像アップロード用のフィールドを追加する。
複数アップロードを可能にしたいので、multiple: trueが必要。

# app/view/posts/_form.html.erb
<%= form.label :images %>
<%= form.file_field :images, multiple: true %>
showページ
# app/vie/posts/show.html.erb
<% (0...@post.images.count).each do |image| %>
  <%= image_tag(@post.thumbnail(image) %>
<% end %>

参考

www.youtube.com

Rails5でjavascript(jQuery/coffeescript)が動かない

軽く調べただけでも新旧いろんな症例(?)がある。 この記事で紹介するのはturbolinksを有効にしている場合に注意すべきケース。

環境

事象

  • javascriptが動かない
    具体的には、selectボックスの変更イベントを検知してajaxが動くようなcoffeescriptのコードを書いたが、動かない
  • ページ自体をリロードすると動く
    ⇒別のページから遷移したときは動かないけど、リロードすると動く場合、Turbolinksが悪さをしている可能性が濃厚。
    Turbolinksを無効化した上で確かめればすぐに切り分けられる。

原因と対処

Turbolinksを有効化している場合、$(document).readyは動作しない。
まずは対処方法から。

before(ダメな書き方)

# app/assets/javascripts/xxxxx.coffee
$(document).ready -> # or $ ->
  $('#hoge_menu').change ->
#(以下略)

after(OKな書き方)

# app/assets/javascripts/xxxxx.coffee
$(document).on 'turbolinks:load', ->
  $('#hoge_menu').change ->
#(以下略)

Turbolinksが有効だとなぜ$(document).readyが動かないか

公式ドキュメントに説明がある。
Working with JavaScript in Rails — Ruby on Rails Guides

Turbolinks overrides the normal page loading process, the event that this relies upon will not be fired.

その他の注意点

jquery-turbolinksは使わない

Rails4向けの古いブログ記事などでは、解決策としてjquery-turbolinksというgemを入れるやり方が紹介されていたりする。
しかし、githubのREADMEを見ると冒頭にデカデカと「Deprecated 」と書いてあり、続いて以下の記述があるので使うのはやめましょう。

This gem does not work with Turbolinks 5+, and is not compatible with many jQuery plugins. We do not recommend using it.

そもそも余分なgemを入れなくても解決できるのだから、入れる必要もないのだが。

github.com

iPhone(iOS)でweb検索時、第二検索ワードが無視される

ホーム画面からweb検索時に、入力したはずの第二検索ワードが無かったことにされる現象に惑わされている。
バグだろうか。

現在のiOSバージョンは11.3。
11.4に上げたら治るか試してみる。 ⇒治らなかった

(TBC)

IntelliJ IDEA ショートカットキーメモ(Mac)

  • 変数・メソッドの定義へのジャンプ
    • command + b
      ただし、定義部分でこのコマンドを実行すると、使用箇所一覧をポップアップで表示
  • 変数・メソッドの使用箇所(ツールウィンドウに一覧表示)
    • option + F7
  • 変数・メソッドの使用箇所(ポップアップに一覧表示)
    • command + option + F7
  • ジャンプ履歴の戻る・進む
    • 戻る:command + [
    • 進む:command + ]
  • 親クラスへ移動
    • command + u
  • 子クラス/実装クラスの一覧をポップアップで表示
    • option + command + b
  • タブ切り替え(OSのタブ切り替えcommand + tabと同じ仕組み)
    • control + tab
  • タブ切り替え(ポップアップに一覧表示)
    • command + e
  • 最後に編集した箇所に戻る
    • command + shift + delete
  • ファイル名・クラス名・変数名/メソッド名を入力してジャンプ
    • shift -> shift
  • ファイル名を指定してジャンプ
    • command + shift + o
  • クラス名を指定してジャンプ
    • command + o
  • 変数名・メソッド名を指定してジャンプ
    • command + option + o

rails web UIでスキーマ定義 ryakuzu

できたらいいのになって考えてたんだけど、ぴったりなgemがあった。
GitHub - ID25/ryakuzu: Interface for schema.rb

だが、2016年を境に更新が止まっている。
自作したいな。

rails5 DBをPostgreSQLに変更する

環境

  • OS: CentOS7
  • rails: 5
  • postgres: 10

PostgreSQL側の作業

postgresユーザのパスワード変更(OSとは独立したPostgres側の認証情報の設定)

初期状態ではOSの認証情報を使用してPostgresのDBにログインできる。
この状態でpostgresユーザーでpsqlを起動し、postgresユーザのパスワードを設定する。
(OSとは独立した、Postgres側の認証情報)

$ sudo -u postgres psql
# alter role postgres with password '[PASSWORD]';

[PASSWORD]の部分に任意のパスワードを設定する。

認証方式の切り替え

認証方式をpeerからmd5に変更する。

peer/identは認証にOSの情報が使用される。
(peerはlocal, identはtcp接続時にそれぞれ使用される。)
md5にすると前述のパスワード変更の項で設定したPostgres側の認証情報を使用して認証が行われる。
※デフォルトでpostgresユーザのパスワードは何も設定されていないため、あらかじめpeerの認証でpsqlを起動し、設定しておかないと、md5の認証に切り替えた後、ログイン不能になる。

$ sudo vim /var/lib/pgsql/10/data/pg_hba.conf

※pg_hba.confの場所は環境により異なる可能性がある。

デーモン再起動

認証方式の設定変更を反映するため、デーモンを再起動する。

$ sudo systemctl restart postgresql-10

railsアプリのDBで使用する任意のUserを作成

$ sudo su - postgres
-bash-4.2$ /bin/createuser -P --interactive [username]
新しいロールのためのパスワード: 
もう一度入力してください:
新しいロールをスーパーユーザにしますか? (y/n)n
新しいロールに対してデータベースを作成する権限を与えますか? (y/n)y
新しいロールに対して別のロールを作成する権限を与えますか? (y/n)n
-bash-4.2$ psql
postgres=# \du
                                   List of roles
 Role name |                         Attributes                         | Member of 
-----------+------------------------------------------------------------+-----------
 username | Create DB                                                  | {}
 postgres  | Superuser, Create role, Create DB, Replication, Bypass RLS | {}

新規に作成したuserに対してAttributesにCreate DBが付与されていることを確認。


Rails側の作業

アプリ作成時に、DBにpostgresqlを指定する場合

$ rails new <app_name> -d postgresql

上記-dオプションでpostgresqlを指定すると、自動作成されるGemfileに以下の通り、pgが追加される。

# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'

また、config/database.ymlのadapter設定にpostgresqlがデフォルトで指定される。

default: &default
  adapter: postgresql

「config/database.ymlを編集」以降の手順は下記「アプリ作成後に、DBをpostgresqlに変更する場合」と同様。

アプリ作成後に、DBをpostgresqlに変更する場合

gemをインストール

gemfileに 'pg'を追加

 # Gemfile: 以下を追加
 # sqliteを使わない場合はコメントアウト
 # gem 'sqlite3'
 gem 'pg'
 $ bundle install

以下のerrorが出た場合

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory: /home/ryohei/.rbenv/versions/2.5.0/lib/ruby/gems/2.5.0/gems/pg-1.0.0/ext
/home/ryohei/.rbenv/versions/2.5.0/bin/ruby -r ./siteconf20180314-25746-bfjmau.rb extconf.rb
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.
  • checking for pg_config... no について
    メッセージの通り、pg_configが見つからないので、--with-pg-config=/path/to/pg_configを付与してbundle installすればよい 自分の環境では/usr/pgsql-10/bin/pg_configにあるので、
$ bundle config build.pg --with-pg-config=/usr/pgsql-10/bin/pg_config
  • checking for libpq-fe.h... no について
$ sudo yum install -y postgresql10-devel #使用するpostgresqlのver.が10の場合
$ bundle install

config/database.ymlを編集

# config/database.yml
# development環境でPostgresを使う場合の例
default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: [app_name]_dev
  username: [app_name]_dev
  password: [password]
  host: localhost

上記の情報をもとに、dbを作成

$ rails db:migrate
$ rails db:setup

ここでエラーが出る場合は認証周り(postgres側はpg_hba.confの認証設定、ユーザのパスワード設定、rails側はconfig/database.ymlのuser/password)