コード進行パターン表がアプリっぽく(PWA対応)使えるようになりました！

コード進行パターン表がアプリみたいに使えるようになりました！

どうも、GANO（@Past_Orange）です。

コード進行をキーごとに表示切り替えができるサイト『コード進行パターン表』がアプリっぽく使えるようになりました！

 コード進行パターン表  2 tweets

コード進行パターン表

https://chords-map.net

既存曲に使われているコード進行を参照できるWEBサービスです。ディグリー表記されたコード進行はすべてのキーへ移調して表示することが可能です。YouTube動画やブログページでコード進行が楽曲内でどのように使われているかを確認できます。

PWA対応したってことなんですが、そこらへんのIT関係なお話は後半で。

スポンサーリンク

使い方

アプリとして使うための準備をご紹介しますね。

iPhoneしか持っていないのでandroidのできていないのですが、おそらく『コード進行パターン表』をブラウザ表示するとホーム画面に追加するよう促されるかと思います。

以下はiOSでの設定。といってもとっても簡単でして。

サイトを表示して「ホーム画面に追加」を押すだけ。

これでホーム画面にアイコンが設置され、アイコンをタップするとアプリのように起動できます。

ホーム画面追加のメリット

アプリのように起動するメリットは3つ。

1.アドレスバーがひょこひょこしない

ブラウザ表示だと上にスクロールするたびアドレスバーがひょこひょこ出てきて邪魔だったんですが、そこが解消されています。

2.ブラウザと別で起動できる

ブラウザとは別タスクとして起動できるので、管理がしやすくなるかと思います。

3.オフライン起動

一度オンライン上で読み込んでしまえば、後はオフラインでも表示可能です。ブログに飛んだりYouTubeをみたりはできないんですが、コード進行だけならOKです。

注意点

これはiOS限定っぽいんですが、TwitterやFacebookへのシェアボタンを押すと、シェアはできるんですけど、アプリ側が真っ白になってしまいます。

原因は不明でして、iOSがまだそこまで対応していないんじゃないか疑惑があります。

もしシェアボタン押しちゃった場合は、ホーム画面からアイコンを削除。再度ブラウザで表示して、ホーム画面にアイコン追加をお願いします。

iOSのPWAに関して

ここからはちょっとだけプログラムのお話。

シェアボタンはJSでwindow.openしてるんですけど、standaloneからブラウザに移動しているためか、アプリ側に戻ると画面真っ白に。

現在のiOSでは対応していないんじゃないかと思います。

 teratail[テラテイル]

PWAからSafariを開きたい｜teratail

https://teratail.com/questions/184096

現在、Flaskを使って既存のWebアプリをPWAに対応させています。アプリの機能でPDFをページに表示する機能があります。PWA対応以前はSafariの「プリント」ボタンで印刷ができていたものがPWAにするとボタンそのものがなく不可能になり困っています。そこで、PDFを出力...

 yasutomogのブログ  50 users

OAuth2対応したPWAをiOSでホーム画面に追加すると認証が厳しい - yasutomogのブログ

https://yasutomo.hatenablog.com/entry/2018/12/12/000000

概要 社内アプリをPWAで構築したときのはなし 社内の諸々はGoogleアカウントで管理しているので、認証はGoogleのOAuth2を使用 PWAはNuxt.jsを使って作成し、APIはPHPのLaravel（社内サイトがLaravelを使ってたので流用）を使って作成 Google OAuth 2.0 認証を使用 結...

別件でPWAでカメラアプリ作れるかなとチャレンジしてみたんですけど、iOSが未対応っぽくてですね。

standaloneでなくbrowserじゃないとカメラにアクセスできないんだとか。それってただのショートカットなんですよね。

しかもsafariじゃないとカメラにアクセスできなくて、もしchromeをメインで使っているiPhoneユーザーがいたら使ってもらえません。

プッシュ通知もできないですし、まだまだiOSはPWA対応してくれない感じです。PWAはandroid用って感じでしょうか。

PWAというもの自体、一般的には全然知られていないようにも感じますし、「ホーム画面に追加」を好んで使っている人も少ない気がします。

まだまだこれからって感じですね！

↓GANOが作った作曲ツールです！↓

最後に

とはいえ、今後を考えSSL化、PWA対応して良かったです。

アプリ開発はOSを意識すると大変なので、PWAで簡単に作れるようになると嬉しいですね！

GANO

 コード進行パターン表  2 tweets

コード進行パターン表

https://chords-map.net

既存曲に使われているコード進行を参照できるWEBサービスです。ディグリー表記されたコード進行はすべてのキーへ移調して表示することが可能です。YouTube動画やブログページでコード進行が楽曲内でどのように使われているかを確認できます。