ionicでSNSのQRコード共有みたいなことしたい！

## はじめに
<!-- 発端や概要を記載 -->
多くのSNSでアカウント情報を共有する際にQRコードが使用されていますよね。
そんなSNSのQRコード共有っぽいことをionicでも実装してみました。

こういうのです
↓
![グループ 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181865/0287c637-09ab-35c1-516b-1227df32177f.png)

## 実装

### 必要なプラグイン
### [qr-code-styling](https://github.com/kozakdenys/qr-code-styling)
いろいろなQRコード生成プラグインが存在すると思いますけど個人的にはこれが一番簡単にオシャレQRを作れる気がします。

### [html2canvas](https://github.com/niklasvh/html2canvas)
HTML要素をcanvasに変換できるプラグインです。

### [Social Sharing](https://ionicframework.com/docs/native/social-sharing)
QRを共有するプラグインです。

```
$ npm install cordova-plugin-x-socialsharing
$ npm install @ionic-native/social-sharing
$ ionic cap sync
```

### index.htmlにプラグイン追加
```index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="color-scheme" content="light dark" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

  <!-- 追加 -->
  <script type="text/javascript" src="https://unpkg.com/qr-code-styling/lib/qr-code-styling.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
  <!-- 追加 -->
</head>

<body>
  <app-root></app-root>
</body>

</html>
```
### app.module.tsにプラグイン追加
```app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { SocialSharing } from '@ionic-native/social-sharing/ngx'; //追加

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    SocialSharing,  //追加
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
### 画面実装・処理追加
```home.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      QRコードシェアサンプル
    </ion-title>
    <ion-buttons slot="end">
      <ion-button id="btnShare" (click)="share()">
        <ion-icon name="share-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <div id="grpTxtBtn">
    <ion-input [(ngModel)]="qrtext"></ion-input>
    <ion-button id="btnDisp" (click)="disp()">表示</ion-button>
  </div>
  <!------- QRコード ------->
  <div id="QR">
    <div id="canvas"></div>
  </div>
  <!------- QRコード ------->
</ion-content>
```
```home.page.scss
// ********************* インスタっぽい感じに合う色にしたかっただけです・・・ ********************* //
ion-content {
  --background: linear-gradient(60deg, #fd562c 0%, #c73ff1 70%) no-repeat;
}

ion-toolbar {
  --background: transparent;
  --border-style: none;
  --ion-color-base: transparent !important;
}

ion-title, ion-input, #btnShare {
  --color: white;
}

#btnDisp {
  height:30px;
  --color: black;
  --background: white;
  --background-activated: #d7d8da;
  --background-focused: #d7d8da;
  --background-hover: #d7d8da;
}

#grpTxtBtn {
  display: flex;
  margin: 10px;
  border-bottom: solid white 1px;
}
// ********************* インスタっぽい感じに合う色にしたかっただけです・・・ ********************* //

#QR {
  position: relative;
  background-color: white; 
  width: 270px;
  height: 270px;
  border-radius: 20px;
  margin: auto;
  margin-top: 100px;
}

#canvas {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
```
```home.page.ts
import { Component } from '@angular/core';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
declare var QRCodeStyling: any;
declare var html2canvas: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  // QRコードテキスト
  qrtext: string = ""

  constructor(private socialSharing: SocialSharing) {}

  /* -------------------------------
  QRコードを表示
  ------------------------------- */
  disp() {
    
    // QRコード表示済みの場合はクリア
    if (document.getElementById("canvas").firstChild) {
      document.getElementById("canvas").removeChild(document.getElementById("canvas").firstChild)
    }
    
    // QRコード作成
    const qrCode = new QRCodeStyling({
      width: 250,
      height: 250,
      data: this.qrtext,
      image: "../assets/logo-instagram.svg",
      dotsOptions: {
        color: "#f13f79",
        type: "dots"
      },
      imageOptions: {
        imageSize: 0.3,
      }
    });

    // QRコード表示
    qrCode.append(document.getElementById("canvas"));
  }

  /* -------------------------------
  QRコードをシェア
  ------------------------------- */
  share() {
    // HTML→canvas変換
    html2canvas(document.getElementById("QR")).then(canvas => {
      // 変換したcanvasをシェア
      this.socialSharing.share("","",canvas.toDataURL());
    });
  }

}
```

## 完成イメージ
下記のように入力した文字列のQRコードが表示されて右上のボタンからQRコードのシェアが出来ればOKです！
なんとなくイ○スタみたいな感じになってしまったのはご了承ください・・・（笑）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ionicでSNSのアカウント情報シェアっぽいことしてみた！<a href="https://t.co/LccUeKkh7K">https://t.co/LccUeKkh7K</a><a href="https://twitter.com/hashtag/ionic?src=hash&amp;ref_src=twsrc%5Etfw">#ionic</a> <a href="https://twitter.com/hashtag/capacitor?src=hash&amp;ref_src=twsrc%5Etfw">#capacitor</a> <a href="https://twitter.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular</a> <a href="https://twitter.com/hashtag/%E7%8F%BE%E5%BD%B9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#現役エンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://t.co/hhGNQvbtOd">pic.twitter.com/hhGNQvbtOd</a></p>&mdash; そると (@jsalt_0525) <a href="https://twitter.com/jsalt_0525/status/1318084682198654976?ref_src=twsrc%5Etfw">October 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### ソースコード
https://github.com/beniho/QRSample