ios-scriptable-project

iOSアプリ「Scriptable」のスクリプトを管理するためのプロジェクト

• プロジェクト直下にはバンドルの仕組み
• scriptsディレクトリには普段使っているスクリプト。説明はREADME

を置いた。以下、バンドルの仕組みを説明する。（TODO:図解が必要）

概要

ScriptableはiOS/iPadOS内のJavaScript実行環境。 Scriptableを使っていると、Scriptableからnpmパッケージを利用したいことも出てくる。 Macでパッケージをバンドルしてモジュールを作れば利用できる。そのためのプロジェクト。

必要なもの

• Scriptableアプリ。無料。Scriptable
• iCloud
• MacとVSCode

Scriptableアプリで実行するスクリプトはiCloudを通してMacからも編集できる。 それを利用して、Macでモジュールをバンドルする。

使い方

Scriptableのスクリプトを書いている時に、npmパッケージを使いたいことがある。 このプロジェクトを使って、バンドルされたモジュールを作成し、ScriptableからimportModuleでインポートできる。

1. このリポジトリをクローンする
2. 必要なシンボリックリンクを張る
   1. このプロジェクトにて
      1. dist: Scriptableディレクトリ（iCloud内にあるScriptableのスクリプトが格納されているディレクトリ）へのシンボリックリンク。バンドル後に格納するため。ln -s "~/Library/Mobile Documents/iCloud~dk~simonbs~Scriptable/Documents" dist
      2. 各種設定ファイル: .eslintrc, .editorconfig, .prettierrcなど。ScriptableのスクリプトをMacで編集する時と同じ設定で使いたい場合に、必要なファイルをシンボリックリンクで共有。
   2. Scriptableディレクトリにて
      1. $ cd "~/Library/Mobile Documents/iCloud~dk~simonbs~Scriptable/Documents"
      2. @types: プロジェクトのnode_modules/@typesにリンクを張る
3. 必要なパッケージをインストールする
4. srcにて、パッケージとスクリプトをつなぐためのモジュールを作成する。src/some-module.jsを作成
5. src/some-module.js内で、さっきインストールした外部パッケージをimportする
6. importしたものをmodule.exportsを使ってexportする
7. バンドルと配置を実施する。コマンドパレットを開き、「タスクの実行」から「このファイルをバンドルしdistに配置する」を選ぶ。npm buildでsrc/*.jsを全てビルドしてもよい。
8. dist内にバンドル後のファイルdist/some.bundle.jsが配置されたことを確認する
9. Scriptableスクリプトを作成する
10. そのスクリプトでバンドル後のファイルをインポートする importModule('some.bundle.js')
11. パッケージの機能を使ったスクリプトを実行する（iPhoneまたはiPadで）
12. Enjoy!

注意点

利用できるパッケージの条件

1. ピュアJS。ネイティブコードを利用したパッケージなどは利用できない
2. Scriptableにないnodeコアモジュールを使用していないこと。ただし、モックでカバーすればビルド可能
   1. fs, path, utilについて、モックでカバーしている
   2. require.main定数について、モックでカバーしている 適切なポリフィルがあればそれを持ってくればよいが、Scriptableで動くという条件を満たさないことがほとんど。完璧なポリフィルを探す旅に出ると永遠に帰ってこられない。だからといって、あちこちで気軽に利用されているコアモジュールにぶつかるたびに諦めるのも悔しい。実際の動作として必要のあるところだけ実装して、他はインタフェースだけ用意するモンキーパッチでしのいでいく方針でやっている。

モジュール例

src/にいくつかスクリプトが置いてある。これらは外部パッケージを利用可能にするモジュールで、バンドルすればScriptableから利用できる。バンドル前のスクリプる（バンドルすると.bundleつきのファイルができる）。いくつか説明する。

emoji-regex

絵文字にマッチする正規表現オブジェクトを提供するモジュール emoji-regex を require/exportするモジュール。/絵文字1文字/gの正規表現を返す。ZWJ Sequencesを考慮したマッチを提供してくれる。

const text = "🐱😗👩‍💻👨‍👨‍👦‍👦"
const emojiRegex = importModule("emoji-regex.bundle")()
const match = text.match(emojiRegex)
console.log(match)
// [ '🐱', '😗', '👩‍💻', '👨‍👨‍👦‍👦' ]

papaparse

CSVパースライブラリpapaparseをrequireしexportするだけのモジュール。ピュアJSで書かれており、単純にrequireしてexportするだけのモジュールを書いてバンドルすればScriptableで利用できる。

discord-rest

discordjsの一部（REST呼び出し）を利用するためのモジュール。

• Routes: エンドポイント作成のためのAPI。discord-api-types/v10をインポートして利用
• REST4Scriptable: Discord RESTリクエストを発行するAPI。本来なら@discordjs/restを使うところだが、fetchを利用しているために利用できない。Scriptable用にサブセットを実装した。

VS Code で Scriptable のコードを取り扱う際のTIPS

インポートしたモジュールを参照したい

スクリプト側（importModule()を呼び出すスクリプト）のコメントに @type を書く。

/**
* @type {import("discord-rest").REST4Scriptable}
* @type {import('discord-api-types/v10').Routes}
*/

モジュール側にJSDocを書いておくとJSDocの情報が表示される（補完は難しいようだ）。 外部パッケージを利用している場合はそちらの@typesを参照するとよい。

選択的公開の仕組み

ディレクトリに.publicというファイル(YAML形式)がある場合、そこで指定されたディレクトリから指定ファイルをコピーしてきてステージする。というコマンドを用意した。コミット前に実行するようになっている。

scriptsディレクトリの.publicファイルはこうなっている:

- original: ../dist
  files:
    - README.md
    - lg.js
    - template4script.js
    - scriptable-ix.js

original: 公開したいファイルの入っているディレクトリを指定。当該.publicのあるディレクトリからの相対パスか、~で始まるパス、または絶対パスで指定する。../dist には実際のスクリプトが入っているが、すべて公開するわけにはいかない。ここで指定したスクリプトだけを公開する。

files: 公開したいファイルのリスト。originalからの相対パスで指定する。