Quip Live Appsを試してみました。Quipのトライアル環境作成などはこちら。
Live Appsのイメージ
プロジェクトに必要なもの
- Quipアカウント
- Node.jsがインストールされたローカル環境
Nodeってそういえば最新バージョンいくつだろうと確認してみたところ、v9.3.0まででてました。せっかくなのでアップデート。
Install the Quip SDK
下記リンク先からダウンロードできます。
デスクトップにappフォルダを用意してそこに解答しました。
ターミナルを起動してcdコマンドで移動します。
Quipにはシークレット・ウィンドウモードでログインしておきます。(Chromeで実施)
Quip Developer Portalを開く
サイドメニューのアプリを選択します。
ポップアップが表示されます。
Build your own live app のリンクをクリックします。
次の画面が表示されました。
ライブアプリを作成する
右上のCreate a Live Appのリンクをクリックします。App IDが画面に表示されるので記録します。
Quip Live アプリをビルド
基本的なコードは用意されています。先ほどcdコマンドでSDKフォルダに移動したのでそこから下記コマンドを実行します。
./bin/quip-apps init “$APP_NAME” $APP_ID
※$APP_NAMEは任意の名前に変更します。
※$APP_ID は先ほど確認したIDに変更します。
$ ./bin/quip-apps init my_quip_app VXXXXXD
これでmy_quip_appフォルダが生成されます。React.jsアプリとのこと。
ライブアプリをパッケージ化する
パッケージ化してQuipプラットフォームにアップロードしてQuip内でアプリを実行できます。まずはcdコマンドで移動します。
$ cd <quip-sdk-folder>/apps/<your app name>
npm install を実行します。
npm run build を実行します。
warningという文字が出ましたがひとまず問題ありませんでした。次のコマンドを実行します。(※my-quip-appは最初に指定したアプリ名)
$ cd ../../ $ bin/quip-apps pack apps/my-quip-app/app
これで「app.ele」ファイルが生成されます。
QuipのEdit Live Appページに戻りapp.eleファイルをアップロードします。
検証時には何かがうまくいかなかったみたいでもう一度実施したのですが、次の画面が表示されれば成功です。
あなたのライブアプリをQuipでテストする
Quipに移動して新規文書を作成します。@の挿入機能を使い、アプリ名を入力します。
これで自作のアプリをQuipで動かすことができました。
今回はHello Woldとテキストが表示されるだけですが、いろいろなQuipアプリを開発できそうです。
