Hiroto's diary

プログラミングとか色々

iOSのSpotifyで曲やアーティストをTwitterで共有する時に曲名やアーティスト名を入れる

iOSバイスSpotifyを使ってる方は分かると思いますが、iOSSpotifyで曲やアーティストをTwitterで共有すると、 なぜか曲名やアーティスト名はツイートされず、URLだけがツイートされます。 PCでは曲名もアーティスト名もツイートされるのに何故かiOSではこの仕様。

公式クライアントでツイートを見る分にはアーティスト名なり曲名が分かるのでまだ良いですが、非公式クライアントではただURLが表示されるだけでめちゃくちゃ不便です。

これの解決方法はSafariなどの外部ブラウザで開いてブラウザの共有機能でツイートする等がありますが、 iOSのショートカットで実現したほうが手っ取り早い ので、作ってみました。

事前にショートカットのアプリとTwitterの公式クライアントのアプリをインストールしてください。

ショートカット

ショートカット

  • Apple
  • 仕事効率化
  • 無料
apps.apple.com

作成手順は以下の通り。

  1. ショートカットのアプリを開く
  2. ショートカットを作成 を選択
  3. 変数を設定 アクションを挿入
    • 変数名は何でもいいですが、ここでは url で設定。
  4. 名前を取得 アクションを挿入
  5. テキスト アクションを挿入
    • キーボードの上に出てくる、 名前 (URL先のタイトル)と、先程設定した変数の url を使用。
  6. ツイート アクションを挿入
  7. 画面上のショートカットの設定 (完了ボタンのすぐ下) をタップ
    1. ショートカットの名前を設定。
    2. 共有シートに表示をオン に。これをしないとSpotifyの共有からこのショートカットが使えない。
    3. 受け入れの種類を選択。一旦全ての選択を解除して、 URLだけを選択 します。

完成すると以下のような感じに。

f:id:Hiroto-K:20191021000303p:plainf:id:Hiroto-K:20191021000309p:plain

最後にSpotify側の設定。

  1. 曲やアーティストのシェアするからその他を選択し、一番下にショートカットが出るのを確認
    • 出ない場合は一番右のその他からショートカットを入れる
  2. ショートカットを選択して、先程作成したショートカットが出るのを確認
  3. 作成したショートカットを選び、ツイート画面が出るのを確認
f:id:Hiroto-K:20191021001432p:plainf:id:Hiroto-K:20191021001440p:plain
f:id:Hiroto-K:20191021001448p:plainf:id:Hiroto-K:20191021001455p:plain

以上で曲名とアーティスト名を挿入してツイートできます。

こんなのをユーザー側がやるのもアレなので、Spotify標準のTwitter共有で曲名とアーティスト名も入れるようにしてほしいですね。

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

github.com

github.com

次に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.jsbuild.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>

© 2015-2018 Hiroto-K