Markdown Note Apri にモバイルの共有機能でノートを作る機能を追加しました。

markdown.aprifield.com

オンラインで利用可能な Markdown エディターを公開しています。 エディター部には VSCode でも利用されている Monaco Editor を採用しています。(モバイル利用時は HTML 標準の textarea に切り替えています。)

Markdown Note Apri にモバイルの共有機能でノートを作る機能を追加しましたので、この件について記載します。

はじめに

モバイルの共有機能は以下のようなイメージです。

モバイルで何か操作をしているときにメモを取りたくなることがありますが、その際に共有機能を使うとメールや Line や Twitter を起動して簡単に共有できます。 同じようにメモ帳アプリをインストールしていれば共有により簡単にメモが作成でき、この機能の本サービスに実装しました。

本サービスは PWA として作成していますが、PWA でモバイルの共有機能と簡単に連携できましたので、この件について記載します。

検証環境は Android のみです。

iPhone については未検証です。(なんとなく動かないような気がしています。。。)

実装

実装はとても簡単で manifest.json の変更と、共有結果の取得処理を対応するだけでよいです。 manifest.json を変更するだけでモバイルに共有先として表示されます。

// manifest.json
{
  // この部分を追加
  "share_target": {
    "action": "./index.html", // 共有でリクエストされるURL
    "params": { // 共有で受け取るパラメータ(ここで指定した値がパラメータのキーになる)
      "title": "title",
      "text": "text",
      "url": "url"
    }
  },
}

// 取得処理
const searchParams = new URL(window.location.href).searchParams;
let title = searchParams.get('title') || '';
let text = searchParams.get('text') || '';
let url = searchParams.get('url') || '';

共有方法によっては受け取る値が異なることを考慮する必要があります。

ブラウザで表示中のページを共有すると title に表示しているページのタイトル、text にページの URL が設定されました。 テキストを選択して共有すると title が空で text のみが渡されました。 いろいろ試しましたが url に値が渡されたことはありませんでした。

最終的には以下のような補完処理を入れています。

title = title || text; // title は必ずほしいので title がないなら text を title として利用する
text = text + '\n' + url; // url は受け取れたことはないが念のために取得しておく

まとめ

今回の対応で PWA をさらにネイティブアプリに近づけることができることが分かりました。