tkhrsskの日記

技術ネタなど

Android/iOSアプリ起動(DeepLinkなど)

はじめに

ブラウザや他のアプリから、アプリを起動する手法についてまとめる

用語

DeepLink

アプリで特定のコンテンツを直接開くためのリンクのこと。 例えば、広告のAmazonの商品を選んで、Amazonアプリが開かれるようにしたとき、その商品画面で起動すること。 DeepLinkは概念であって、具体的な手法ではない。

手法

Firebase App Indexing (Google)

Google App Indexing.

firebase.google.com

Googleの検索結果からアプリを起動する手法としてあるが、 現在は、AppLinksが推奨されている模様。

AndroidiOSも対応

アプリ側:Firebase App Indexingライブラリの組み込み サーバ側:assetlinks.json を配置

AppLinks (Google)

developer.android.com

Androidの機能

https:// で始めるURLでアプリが起動

アプリ側:intent-filterの実装

サーバ側:.well-known/assetlinks.json を配置

intentスキームURI

Chrome専用?

intent:// から始まるURIで、アプリインストール済みであればアプリ起動、アプリ未インストールであればストアに飛ぶ。

developer.chrome.com

Universal Link (Apple)

iOSの機能

サーバ側:apple-app-site-association を配置

Firebase Dynamic Link (Google)

ブラウザ上でDynamicリンク用のハッシュ値を含んだURLを選択したときにアプリを起動 アプリがインストールされていない場合、ストアに移動

準備:Firebaseの管理画面で、リンクを発行

Amzon Linux 2 のDocker環境構築例

Dockerfileを作成

とりあえずamazon corettoのjavaとか、perlとか

FROM amazonlinux:2

RUN yum install -y which wget perl \
  && amazon-linux-extras enable corretto8 \
  && yum install -y java-1.8.0-amazon-corretto \
  && rm -rf /var/cache/yum/* \
  && yum clean all

ENV TZ Asia/Tokyo

IMAGE作成

$ docker build -t amzn2 . 

IMAGEからコンテナ起動

$ docker run -it --rm amzn2 /bin/bash

簡易Webサーバ(APIサーバのスタブ) Node.js版

勢いでサンプルを書いておく。

let http = require('http');
let server = http.createServer();

let id = 0;
server.on('request', function(req, res)
{
    console.log("HTTP", req.httpVersion, req.method, req.url, req.headers);

    let response = {};
    id += 1;
    response.id = id;
    response.status = 200;
    response.message = 'Hello, world!';
    console.log(JSON.stringify(response));
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, HEAD, OPTIONS')
    res.setHeader('Access-Control-Allow-Headers', '*')
    res.writeHead(200, {"Content-Type": "application/json"})
    res.write(JSON.stringify(response));
    res.end();

    console.log(res.statusCode, res.statusMessage);
});

server.listen(3000, '127.0.0.1');

これで、下記のようなレスポンスが返ってくる。

{"id":1,"status":200,"message":"Hello, world!"}

Pythonだと下記などが参考になりそう

Python http通信のサンプル | ITSakura

Dockerで簡易proxyサーバ構築

スマホ端末のhosts設定をいじりたいが、AndroidiOSの/etc/hosts を変えるのはそれなりにハードルが高い。
もっと簡単にできないか探していたところ Macproxyサーバを立てる方法を見つけた。

www.yoheim.net

apache使うくらいなら、Docker で環境依存しない手順を確立したいないと思い、この記事を書くことにした。

ベースは、公式イメージを使えばいい。

https://hub.docker.com/_/httpd

confのいじり方も書いていたので、基本はそれに従うだけ。

まず、イメージの中身からconfを取り出す

$ docker run --rm httpd:2.4 cat /usr/local/apache2/conf/httpd.conf > my-httpd.con

編集してproxyサーバとして動くようにする
以下、変更した箇所。

@@ -139,10 +139,10 @@
 LoadModule setenvif_module modules/mod_setenvif.so
 LoadModule version_module modules/mod_version.so
 #LoadModule remoteip_module modules/mod_remoteip.so
-#LoadModule proxy_module modules/mod_proxy.so
-#LoadModule proxy_connect_module modules/mod_proxy_connect.so
+LoadModule proxy_module modules/mod_proxy.so
+LoadModule proxy_connect_module modules/mod_proxy_connect.so
 #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
-#LoadModule proxy_http_module modules/mod_proxy_http.so
+LoadModule proxy_http_module modules/mod_proxy_http.so
 #LoadModule proxy_fcgi_module modules/mod_proxy_fcgi.so
 #LoadModule proxy_scgi_module modules/mod_proxy_scgi.so
 #LoadModule proxy_uwsgi_module modules/mod_proxy_uwsgi.so
@@ -549,3 +549,13 @@
 SSLRandomSeed connect builtin
 </IfModule>
 
+<IfModule mod_proxy.c>
+    ProxyRequests On
+    ProxyVia On
+    <Proxy *>
+        Order deny,allow
+        Deny from all
+        Allow from all
+    </Proxy>
+</IfModule>

次に Dockerfileを用意する

FROM httpd:2.4
COPY ./my-httpd.conf /usr/local/apache2/conf/httpd.conf

続いてDocekrイメージを作成

$ docker build -t my-httpd .

そして Dockerコンテナ起動

docker run -it -d --rm --name my-httpd -p 8080:80 my-httpd

あとはスマホ側のプロキシ設定で、Docker起動したPCのIPアドレスを指定すればOK

  • プロキシのホスト名:Docker起動したPCのIPアドレス
  • プロキシポート:8080

これで、スマホからインターネットに出るときに、Docker起動したPCのhosts設定が参照されることになる。

仕事で使えそうなフリー素材

イラスト

  • ICON HOIHOI アイコンとして統一感がある。ちょっと前のオフィスの素材っぽい。

iconhoihoi.oops.jp

  • illust AC バリエーションが豊富

www.ac-illust.com

  • 無料イラスト素材ドットコム 背景に使えそうなものが多い印象

www.xn--eckzb3bzhw32znfcp1zduw.com

  • ビジネスピープル 事業方針とかでよく見る。

business-peoples.com

写真系

www.photo-ac.com

www.pakutaso.com