はじめに

Cordova iOS アプリ, Android アプリで Twitter Timeline の埋め込みを実現する方法。

TL;DR

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 結論
      1. config.xml の変更(whitelist 設定)
      2. Twitter Timeline 表示処理の実装
    2. 試してもダメだったこと
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G2021

$ node -v
v12.7.0

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

$ cordova -v
10.0.0

$ npm ls vue
vue@2.6.12 | MIT | deps: none | versions: 299

$ npm ls cordova-ios
cordova-ios@6.1.0 | Apache-2.0 | deps: 10 | versions: 1146

$ npm ls cordova-android
cordova-android@9.0.0 | Apache-2.0 | deps: 7 | versions: 1167

$ cordova plugin
cordova-plugin-whitelist 1.3.4 "Whitelist"
  • iPhone 11 Pro (iOS 13.6.1)
  • Huawei Note lite2 (Android 9)

詳細

自分の環境が Vue + Cordova 環境なので、Vue 使ってない人は適宜読み替え(or 無視)。

結論

「TL;DR」や「まとめ」に書いた通り。

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->

config.xml の変更(whitelist 設定)

cordova-plugin-whitelist がインストールされていない場合は追加。

1
$ cordova plugin add cordova-plugin-whitelist

config.xml を変更。

1
2
3
4
5
6
7
8
9
<?xml version='1.0' encoding='utf-8'?>
<widget id="foo.bar.example" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>hoge</name>
  <!-- ... -->
  <allow-navigation href="https://*twitter.com/*" /><!-- 追加 -->
  <allow-navigation href="https://cdn.syndication.twimg.com/*" /><!-- 追加 -->
  <allow-navigation href="about:*" /><!-- 追加 -->
  <!-- ... -->
</widget>

Twitter Timeline 表示処理の実装

Vue の場合の実装例 (今回はコンポーネントとして実装)。

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<template>
  <div class="twitter_tl">
    <template v-if="account !== ''">
      <a
        class="twitter-timeline"
        :data="dataAttributes"
        :href="`https://twitter.com/${account}?ref_src=twsrc%5Etfw`"
      >
      </a>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    account: {
      type: String,
      default: '',
    },
  },
  computed: {
    dataAttributes() {
      let options = JSON.parse(JSON.stringify(this.options));
      options.chrome = Object.entries(options.chrome)
        .map(d => d[1] ? d[0] : '')  // true のもののみ key を返却
        .join('');
      return options;
    },
  },
  data() {
    return {
      // NOTE:
      //   https://syncer.jp/Web/API/Twitter/Website/User_Timeline/#parameter
      options: {
        'show-replies': 'hidden',
        chrome: {
          noheader: false,
          nofooter: false,
          noborder: false,
          noscrollbar: false,
          transparent: false,
        },
        theme: 'light',
        width: 0,
        height: 0,
        'tweet-limit': 20,
        'link-color': '#08F',
        'border-color': '#333',
        'aria-polite': 'polite',  // polite, assertive, rude
        lang: 'ja',
      },
    };
  },
  mounted() {
    if (this.account === '') {
      return;
    }

    this.injectTwitterWidgetScript();
  },
  methods: {
    injectTwitterWidgetScript() {
      const script = document.createElement('script');
      script.async = true;
      script.src = 'https://platform.twitter.com/widgets.js';
      script.charset = 'utf-8';

      document.querySelector('.twitter_tl').insertAdjacentElement('beforeEnd', script);
    },
  },
}
</script>

試してもダメだったこと

参考: html - How to embedded twitter widget into android phonegap - Stack Overflow

config.xml に以下を追加しても、ライブラリ(tonickkozlov/vue-tweet-embed) 利用はダメだった。

1
2
3
4
5
6
<access origin="https://twitter.com" />
<access origin="https://platform.twitter.com" />
<access origin="https://syndication.twitter.com" />
<access origin="https://*.twitter.com" />
<access origin="https://cdn.syndication.twimg.com" />
<allow-navigation href="*" />

まとめ

1
2
3
4
<allow-navigation href="https://*twitter.com/*" />
<allow-navigation href="https://cdn.syndication.twimg.com/*" />
<allow-navigation href="about:*" />
<!-- <allow-navigation href="*" /> 1つでも OK -->

その他・メモ

Xcode(iOS アプリ実行時) で ERROR Internal navigation rejected - <allow-navigation> not set for url='about:blank' のエラー表示を見つけ、検索して以下ページにたどり着いたことから解決した。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list