作ったら始まるNuxtでPWAものがたり

11833 ワード
Android Vue.js PWA nuxt.js Android テキストリンク

はじめに

皆様は、朝起きたときこんなことないですか・・・？

  • だるい、勤怠連絡のメール入れるのめんどくさい
  • 頭痛い、文章考えたくない
  • 眠い、寝起きだし考える余裕ない

そう、我々人間は休みの連絡を入れるのがめんどくさいと思っています。

さて、そんな状況を改善するには・・・

我々プログラマはコードを書いていこう。

というわけで、WEBで文章を作ってくれるマイクロサービスを作ってしまいました。

もともとプログラマがなぜコードを書くのか、それはめんどくさいことを自動化したり簡略化したり、技術で解決したいからです。

こういうものを作るときに気をつけなければいけないのは、いかに使いやすく作るかです

遅れます.me - 遅刻の連絡をもっとカンタンに

簡単に使えるように

とりあえず、UIの専門家ではないので、実際に出来上がったものを触ってもらったほうが早いかもしれないです。

私が考える使いやすいと思うもの、とくにこういった小さいプロダクトでは、シンプルを極めていくほど、使いやすいのではと考えています。

  • 画面の遷移は少なく
  • ボタンなども極力減らす
  • 必要以上の情報を削る
  • 軽いアプリぐらい気軽に使えるようにする

このように使いやすさを意識するのは当然ですが、実はUI/UXよりも何より意識したいのは、一番気をつけたいのは、起きてからスマホを開いて、このWEBアプリ画面までいかに早くたどり着けるかです。

アプリまでの入り口を近くしたい

これが割と重要なポイントでした。 ネイティブアプリであれば、起動も使用するにあたっても不自由なく使えます。

  • ネイティブアプリでは、スマホのバージョンによる差異の吸収が必要
  • ネイティブだと公開、周知してダウンロードするまで使ってもらえない
  • そもそも開発環境の構築がとても手間

実は、WEBベースのPWAアプリだとこれをすべて満たしてくれます。

  • ブラウザでお試し的な利用ができる
  • ホスティング、公開、メンテナンスも容易
  • とりあえず新しい何かが使える
  • 起動速度に関してはPWAで対応可能
  • PWAであればコードチョット書き足すだけでネイティブのごとく動く

PWA対応は、今回のでは特に重要なポイントでした。

デスクトップからネイティブアプリのごとく起動しますが、ストアで公開する必要もありません。

既存のWEBアプリに設定を書き足すのみで対応可能になります。

最終的にこのアプリ、作ったのは私ですが私自身は全然これを使っていませんでした。

何故使っていなかったのか聞かれてしまうと、開くのがめんどくさかったから。

しかし、PWA対応をしてネイティブアプリのごとく振る舞うようになってから世界が変わりました。

Nuxt.js ＋ PWA

本来、PWAというのはネイティブアプリを作るよりは比較的簡単ですがそれでも実はやること多くめんどくさいものです。

過去に、このような記事を書きましたがその対応でも、すごくめんどくさかった記憶があります。

【OGP／PWA】サイト公開時に設定したい内容【自分用】 - Qiita

実はめんどくさい Manifest.json

PWA化を進めていくと、Manifest.jsonというキーワードにたどり着くと思います。
これが実は結構クセモノで、上げるだけでも嫌になります。

  • Index.htmlにManifest.jsonの参照を仕込んでいく
  • アイコン画像を以下の枚数分だけ用意する
  • 72x72
  • 96x96
  • 128x128
  • 144x144
  • 152x152
  • 192x192
  • 384x384
  • 512x512
  • 画像の情報を書き込んでいく

実際にこれを実装していくとコード量って増えるんですよね。

とにかく長くてめんどくさい。。。。

  <head>
    <!-- 中略 --> 
    <!-- for iOS -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!-- for Android -->
    <link rel="manifest" href="favicon/manifest.json">
  </head>

{
    "name": "アプリ名称",
    "short_name": "短縮したアプリ名称",
    "description": "アプリの説明",
    "theme_color": "テーマカラー",
    "background_color": "背景色の指定",
    "display": "動作モードの指定",
    "start_url": "画面を開いたときのURL",
    "icons": [
        {
            "src": "アイコンのパス",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "アイコンのパス",
            "sizes": "48x48",
            "type": "image/png"
        },
        ・
        ・
        ・
        続く
        ・
        ・
        ・
        {
            "src": "アイコンのパス",
            "sizes": "512x512",
            "type": "image/png"
        },
    ]
}

また、実は必要なアイコンサイズって明確に定義されておらず、情報が錯綜しているのです。

実装コストを抑えるNuxt.js

NuxtのプラグインではPWA対応が簡単です。

新規プロジェクト作成時は、Nuxtを入れるか聞かれます。とりあえず追加しておくといいでしょう。

導入

導入はプラグイン方式なので、既存のページを対応してくのであれば

yarn add '@nuxtjs/pwa'

とりあえずこれで。

nuxt.config.jsonに書き足していきます。

  modules: [
     '@nuxtjs/pwa'
  ],

めんどくさいアイコン対応

アイコンは指定がなければstatic/icon.pngが使用されます。

余白等も考慮した512x512pxのアイコンを配置しましょう。

細かく指定しなくても、よしなにやってくれます。

manifest.json

これを指定するとホーム画面に追加できるようになります。

実は、manifest.jsonを用意する必要はありません。

nuxt.config.js書き足すことによって対応されます。

  manifest: {
    name: "遅れます.me",
    title: "遅れます.me",
    'og:title': '遅れます.me',
    description: 'いつものように起きたら、突然の頭痛、そんなとき、仕事のメールを打ちたいですか？朝、いつもどおりに出発・・・しかし突然の電車遅延。混雑した社内でメール打ちたいですか？そんなあなたのためのサービスです。',
    'og:description': 'いつものように起きたら、突然の頭痛、そんなとき、仕事のメールを打ちたいですか？朝、いつもどおりに出発・・・しかし突然の電車遅延。混雑した社内でメール打ちたいですか？そんなあなたのためのサービスです。',
    lang: 'ja',
    theme_color: "#529b58",
    background_color: "#bde0c0",
    display: "standalone",
    scope: "/",
    start_url: "/category"
  }

まとめ

まず、朝起きて一発目に休みたいとか眠いとか言ってる時点で普通の社会人としては駄目ですね・・・ｗ

自分でも造ったとき、最初はPWA対応しておらず、使うのがめんどくさくなっていました。

実は意外と簡単にPWA対応は出来てしまうのです。見る限りでも使っている方は非常に多いので、ぜひ対応していってほしいところです。

フレームワークレベルで対応してくれるのはとてもありがたく、また公式ドキュメントがかなり充実します。

読めばほんとに簡単にかけてしまう程度にまとめてくれており、各項目の名称なども既存のmanifest.jsonを踏襲してくれているので比較的理解もしやすいと感じています。

そんな感じで、みんなもっとネイティブアプリ増やしていこうぜ！