iOS の Spotify で曲やアーティストを Twitter で共有する時に曲名やアーティスト名を入れる
iOS デバイスで Spotify を使ってる方は分かると思うけど, iOS の Spotify で曲やアーティストを Twitter で共有すると, なぜか曲名やアーティスト名はツイートされず, URL だけがツイートされる. PC では曲名もアーティスト名もツイートされるのに, 何故か iOS ではこの仕様.
公式クライアントでツイートを見る分にはアーティスト名なり曲名が分かるのでまだ良いですが, 非公式クライアントではただ URL が表示されるだけでめちゃくちゃ不便.
これの解決方法は Safari などの外部ブラウザで開いてブラウザの共有機能でツイートする等があるけど, iOS のショートカットで実現したほうが手っ取り早いので作った.
2020/10/30 追記
iOS 14頃からダブルクオーテーションなどがエンコードされるようになってしまったので, 2020/10/30に大幅書き換え
追記ここまで
まず, ショートカットのアプリと Twitter 共有に使うアプリをインストール. 自分は普段 feather を使ってるので feather で共有する.
apps.apple.com apps.apple.comショートカットアプリを開いて, 以下のような感じのを作る.
3個目の HTML は以下の通り.
parseFromString()
の第一引数の名前
はショートカットに出てくる名前
を選択する.
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> const parser = new DOMParser(); const doc = parser.parseFromString("名前", 'text/html'); document.body.textContent = doc.documentElement.textContent; </script> </body> </html>
以前は名前を取得
を使えばエンコード前のテキストが取得できていたけど, iOS 14 になってから出来なくなっていたので手動でデコードする必要がある.
見た感じデコードの機能はなさそうだったので, データスキームを使って JavaScript を実行するというアクロバティックな実装で突破したけど, 他にもいい方法があるかもしれない.
最後の方のテキストは以下の通り.
クエリの text
の後ろにエンコード済みのテキストを入れる.
feather以外を使っている人は自分の使ってるアプリの URL スキームを使えばいいと思う.
com.covelline.feather:///post?text=
ショートカットの設定から共有シートに表示をオンにする.
後は Spotify から共有をするだけ. 共有する際にTwitterを選ばずにその他を選び, そこからショートカットで作った物を選ぶと, 指定したTwitterクライアントに飛ぶ.
これでいい感じに曲名とアーティスト名を挿入してツイートできる.
こんなのをユーザー側がやるのもアレなので, Spotify 標準の Twitter 共有で曲名とアーティスト名も入れるようにしてほしい.
ここから下はiOS 13の頃まで使えた仕様. 今作っても使えるは使えるけど, ダブルクオーテーションなどがエンコードされて最悪なのでおすすめしない.
以下のような感じのを作る.
Spotify から共有して確認.
Vue.jsでMarkdownファイルを読み込んでHTMLにして表示する
Vue.jsやNuxt.jsで何かしらのサイトを作ってる時にわざわざHTMLを書くほどでもないようなページを作る際、Markdownで内容を書いてHTMLに変換すると便利。というちょっとしたメモ。
タイトルではVue.jsと書いていますがNuxt.jsでも使えます。
webpackの準備
.md
ファイルの読み込みにはraw-loaderを使うのでインストール。
また、MarkdownのパースとHTMLへの変換でmarkedを使うので、これもインストール。 パースと変換さえ出来ればmarkedである必要はありませんが、今回はmarkedを使います。
yarn add -D raw-loader marked
次にwebpackの設定。
.md
ファイルでraw-loaderを使うように設定。
webpack.config.js
// webpack.config.js module.exports = { module: { rules: [ { test: /\.md$/, loader: 'raw-loader', exclude: /(node_modules)/, }, ], }, };
Nuxt.jsを使っている場合はnuxt.config.js
のbuild.extend
内で設定。
nuxt.config.js
// nuxt.config.js module.exports = { build: { extend (config, { isDev, isClient }) { config.module.rules.push({ test: /\.md$/, loader: 'raw-loader', exclude: /(node_modules)/, }); }, }, };
ComponentでMarkdownを読み込み、HTMLに変換
Webpackの設定を行ったので、importでMarkdownファイルの内容を読み出せます。
templateでは変換したHTMLをそのまま表示するので、v-html
ディレクティブを使って表示します。(二重括弧やv-text
ディレクティブではテキストとして表示される。)
<template> <div v-html="markedContent"> </div> </template> <script> import marked from 'marked'; import markDownSource from '~/path/to/mark-down-file.md'; export default { computed: { source () { return markDownSource; }, markedContent () { return marked(this.source); }, }, }; </script>