からあげ日記

Webエンジニア的なこととか。

Social Sharing を使って LINE シェア機能を実装 / Share text/image with LINE app in Ionic2 using Social Sharing

Social Sharing のプラグインを使って LINE シェア機能を実装する方法。

Social Sharing のドキュメントは以下。

ionicframework.com

2017/01/27 21:00 頃 追記しました。

方法

type に jp.naver.line.Share を指定するとできます。

Androidjp.naver.line.android のはず。未検証)

ただし、以下の方法で LINE でシェア自体はできるのですが、アプリがインストールされていない時にクラッシュします。

SocialSharing.shareVia('jp.naver.line.Share', this.message, '', this.image, this.url)

そのため一旦 LINE がインストールされているかを確認する必要があります。

ということで AppAvailability を使います。ドキュメントは以下。

ionicframework.com

const app = Device.platform === 'iOS' ? 'line://' : 'jp.naver.line.android'
const shareScheme = Device.platform === 'iOS' ? 'jp.naver.line.Share' : 'jp.naver.line.android'

AppAvailability.check(app)
.then(
  () => {
    SocialSharing.shareVia(shareScheme, this.message + this.summary.title, '', '', this.url)
    this.viewCtrl.dismiss()
  },
  () => {
    const alert = AlertController.create({
        title: 'LINEがインストールされていません',
        message: 'LINEをインストールしてください。',
        buttons: [
          {
            text: 'OK',
          }
        ]
      })
      alert.present()
  })

結構苦戦しました。

参考

stackoverflow.com

上手く行かなかった方法

上記のやり方だとあまりスマートでない気もするので、よりよい方法募集中。

ダメパターン1

canShareVia() を使って、 line でシェア可能かを先に確認する。

    SocialSharing.canShareVia('jp.naver.line.Share').then(() => {
      SocialSharing.shareVia('jp.naver.line.Share', this.message, '', this.image, this.url)
    }).catch(() => {
      const alert = AlertController.create({
        title: 'LINEがインストールされていません',
        message: 'LINEをインストールしてください。',
        buttons: [
          {
            text: 'OK',
          }
        ]
      })
      alert.present()
    })

jp.naver.line.Sharejp.naver.lineline://line に変えてもダメでした。

ダメパターン2

    SocialSharing.shareVia('jp.naver.line.Share', this.message, '', this.image, this.url).then(() => {
      // success!
    }).catch(() => {
      const alert = AlertController.create({
        title: 'LINEがインストールされていません',
        message: 'LINEをインストールしてください。',
        buttons: [
          {
            text: 'OK',
          }
        ]
      })
      alert.present()
    })

これはバグの気がするのですが、どうなのでしょう……。

github.com