概要
本記事は、以前公開した以下の記事の続きとなります。
今回は、LiveViewNativeを使って、ページ上の要素からElixirの処理を実行する実装例について紹介します。
LiveViewNativeでは、SwiftUIでViewを作成する代わりに、外部のPhoenix LiveViewサーバーからneexを取得し、それをSwiftUIのViewに変換して表示します。
そのため、画面上の処理などはすべてElixir側で実装することになります。
Elixir側の処理は基本的に通常のLiveViewと同じ要領で記述できるため、比較的簡単に実装できます。
記事中のコードは公開しているリポジトリから抜粋して掲載しています。
記事を読み進める際は、併せてリポジトリを参照いただくことをおすすめします。
公開しているリポジトリでは、以下のAPIを利用しています
リポジトリ
環境
開発環境については、前回の記事と同じ構成です。詳細は以下をご参照ください。
手順
基本的には、前回の記事で作成した swiftuiモジュール、neex、LiveViewモジュールをベースに作業を進めます。
今回は、ボタンを押した時にElixirの処理を実行し、結果を画面に表示する実装を行います
neexファイル内のButton要素にphx-clickを追加
heexと同様に、phx-clickを使用します。
次のようにButtonにphx-clickを記述して、送信するイベントを定義できます
<Button
style="buttonStyle(.borderedProminent); controlSize(.large); cornerRadius(12.0)"
phx-click="get_weather"
>
天気を取得
</Button>
上記は、get_weatherというイベントを送信する例です。
LiveViewモジュールにhandle_event/3を実装
neex内で送信したイベントの処理は、heexと同様にLiveViewモジュール内で記述します。
以下のhandle_eventは、get_weatherイベントの処理です。
use TutorialLvnSwiftuiInteractionNative, :live_view
def handle_event("get_weather", _params, socket) do
case Tsukumijima.get_weather() do
{:ok, weather_text} ->
{:noreply,
socket
|> assign(:status, :ok)
|> assign(:weather_text, weather_text)}
{:error, message} ->
{:noreply,
socket
|> assign(:status, :error)
|> assign(:weather_text, message)}
end
end
neex内に状態を表示
LiveViewの状態は、neex上でもheexと同様に表示できます。
以下は、weather_textの値を画面に表示する記述です。
<Text style="font(.caption)"><%= @weather_text %></Text>
動作確認
公開しているリポジトリの内容を実行すると、次のような動作になります。
天気を取得ボタンを押すことで、天気予報を取得するAPIが呼び出され、画面上にその結果が表示されました
まとめ
今回はLiveViewNativeで外部APIを実行してみる実装を行いました。
応用するなら、Pigeonを使ってサーバーからAPNs通知を送信し、クライアント側でそれを受信してネイティブ機能を呼び出す、といった実装も考えられます。
ただ現時点では、そういった機能をどのように活用すれば有用なのか、具体的なアイデアはあまり浮かんでいません。
今後、SwiftUIを学習しながら、色々アイデアを増やしていきたいです。
現時点で不安なのは、LiveViewNativeの仕組み上、クライアント側の画面操作からOSの機能を直接呼び出せない点です。
そのため、そういった処理をどう実現するかが課題になりそうです。
先ほど挙げたように、APNs通知をうまく活用すれば、ある程度のことは実現できそうですが、他にも有効な方法がないか、今後も調査していきたいです。