Posted at
PWADay 23

PWAでホーム画面に追加するアイコンをランダムにしてみた

この記事はPWA Advent Calendar 2018の記事です。


実現したいこと

PWAとして、ホーム画面にアイコンを追加する際、自分の好きなアイコンが設定できたり、ランダムにアイコンが設定できるようにしたい。


どんな場面で使う?

先日、 よめなう!というサービスをリリースしました。

リリース記事:https://qiita.com/minakawa-daiki/items/add42dfceec54a0583fa

これは、2次元の正妻を記録したり、毎クール変わるアニメの嫁のヒストリを残せるようにしたいというコンセプトのもと作ったサービスなのですが、例えばこういったサービスの時に、正妻に登録した画像をアイコンにしたくないですか?僕はしたいです

また、同じURLで配信しているサービスで、例えばチーム毎にアイコンを変えたいだとか、ゲームだとしたら自分の作ったキャラクタやチームのアイコンが指定できるだとか、色々な場面で使えそうな気はします。


イメージ

dia.gif


実装してみた

今回は Ruby on Rails で実装してみました。他のフレームワークでも問題なく実装できる範囲だと思います。

リポジトリ: https://github.com/minakawa-daiki/dynamic-icon-app


実行方法

touch .env

docker-compose run --rm web bundle
docker-compose run --rm web rails db:create
docker-compose up

このアプリは、ランダムで2枚のアイコンが切り替わるようになっています。


実装


config/routes.rb

Rails.application.routes.draw do

root 'home#index'
get 'manifest.json', to: 'json#manifest'
end


app/controllers/json_controller.rb

class JsonController < ApplicationController

def manifest
end
end


app/views/layouts/application.html.erb

<!DOCTYPE html>

<html>
<head>
<title>App</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="/manifest.json">
</head>

<body>
<%= yield %>
</body>
</html>



app/views/home/index.html

<h1>Dynamic Icon App</h1>



app/views/json/manifest.json.erb

<% index = rand(2) + 1 %>

{
"name": "DynamicIconApp",
"short_name": "DIA",
"start_url": "/",
"icons": [
{
"src": "icon<%=index %>.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#fcd550",
"background_color": "#ffb919",
"display": "standalone",
"orientation": "portrait"
}

特に変わった実装はしていなく、manifest.json.erbを作成することで、動的に manifest.jsonを作成しているのがミソです。

ここの動的生成する部分を、ログインしているユーザのアイコンにしたりなど、様々なやりようはあると思います。

また、アイコン以外の部分も動的に生成できるので、動的に様々なmanifest.jsonが作成可能です。


おわりに

今回の技術を用いて、よめなう!のPWA化を進めていこうと考えています。

また、ネイティブアプリには実現できないような部分がPWAでもできるのが面白さの一つだと思います。

今後のPWAの動きに注目ですね。