Web Swift Playground

iOSDC Japan 2021 のパンフレット記事「Webブラウザで動くSwift Playgroundを作ろう」を実際にやってみた。

はじめに

• 多くのプログラミング言語にはWebで動作するPlaygroundが提供されている。
• Swiftには公式のWeb Playgroundが提供されていない。
• サーバーサイドSwiftとWebプログラミングの技術を使って自分で作れる。

MVP (Minimum Viable Product)

• 不特定多数が使うWebサービスを公開する、となるととても大変。
• ローカル環境でアクセスできるWebアプリケーションを作る。

WebのUIを作る

• Webアプリケーションの世界にもUIフレームワークがある。
• 基本設計
  • 画面を左右に2分割する。コードエディタと結果表示。
  • コードを実行するRunボタンを置く。
• フレームワーク
  • TwitterのBootstrapを使用する。

レイアウト

• index.htmlを作って、BootstrapのStarter Templateをコピーペースト。
  • Getting Startedから。
• 記事のコードになるようtitleとbodyを変更。
• ブラウザで表示確認。

コードエディタ

• Swiftのシンタックスハイライトに対応したエディタコンポーネントを置く。
  • Ace：とっつきやすい。今回はこれを使う。
  • CodeMirror：バージョンアップで仕組みが変わったので注意。
  • Monaco Editor：高機能。やや難しい。
• エディタコンポーネントのロード。
  • ライブラリはCDN経由で配布されている。
  • Embedding Ace in Your Siteのcdnjsからコピーペースト。
• エディタコンポーネントを配置。
  • 記事のコードのとおり。
• ブラウザで表示確認。

結果表示

• ターミナル風に表示するコンポーネントを置く。
  • Xterm.jsを使う。
• コンポーネントのロード。
  • xterm CDN by jsDelivrを使う。
  • 上記サイトのcssフォルダをクリックするとxterm.cssが表示されるので、そこからコピーペースト。
  • xterm.min.jsも同様にコピーペースト。
• コンポーネントを配置。
  • 記事のコードのとおり。
• ブラウザで表示確認。

バックエンドのAPIを実装する

• バックエンド
  • コードエディタに入力されたコードを受け取り、実行結果を返す。
• 言語
  • サーバーサイドSwift
• フレームワーク
  • Vapor
  • 他はメンテナンスが停止しており、現在は事実上唯一の選択肢。

プロジェクト作成

• VaporのCLIツールをインストール（Homebrew）。
• Vaporプロジェクト作成、Xcodeで開く。
  • Hello, worldのとおり。
  • 依存するSwift Packageのダウンロードが行われるので待つこと。
• routes.swiftを記事のコードのとおり実装する。
  • POSTで受け取ったコードを実行して標準出力に出すもの。
• Xcodeでビルド、実行。
• cURLで動作確認。
  • curl -X POST "http://localhost:8080/run" -H 'Content-Type:application/json' --data '{"code":"print(\"Hello World!\")"}'

フロントエンドとの結合

• 記事では、GitHubのサンプルコードを参照とのこと。
  • https://github.com/kishikawakatsumi/swift-online-playground-tutorial
• 結合手順
  • バックエンド
    • POSTに対して、JSONでレスポンスを返す。
    • localhostに接続したときにindex.htmlの内容を返す。
  • フロントエンド
    • Runボタンで入力コードをPOSTして、レスポンスで受け取った出力内容を表示する。

JSONレスポンス

• routes.swift
  • POSTで返す型をStringでなくContent準拠の型にする。
• cURLで動作確認。
  • JSONが返ってくればOK。

HTMLを返す

• Publicディレクトリを作ってindex.htmlをそこに入れる。
• configure.swift
  • Publicディレクトリを使う。
• routes.swift
  • GETに対してindex.htmlを返す。
• 動作確認
  • Xcodeではなくswift runで実行する。
  • ブラウザでhttp://localhost:8080を開く。
  • フロントエンドが表示できればOK。

フロントエンドの対応

• index.html
  • Runボタンの処理をするscriptタグを追加する。
  • エディタの内容をPOSTする。
  • レスポンスから出力結果を取り出して結果表示エリアに出す。
• 動作確認
  • Xcodeではなくswift runで実行する。
  • ブラウザでhttp://localhost:8080を開く。
  • Swiftコードを書いてRunボタンを押し、結果が表示されればOK。

サンドボックスで実行する

• 任意のコードが実行できるので公開しては危険。
• 実行環境を使い捨てのコンテナに閉じ込める。