[Amazon Honeycode] NoCodeで出社管理アプリを開発してみた

Amazonが最近発表したAmazon Honeycodeベータ版の使い方の解説記事。
Excelやスプレッドシートによる業務運用をNoCodeでパッとアプリ化してみました。AWSの開発者ブログの記事を参考にしています。

概要

Amazon Honeycodeとは?

  • AmazonのNoCodeサービス
    • コーディング無しでビジネスアプリケーションを実現するツール
    • 非エンジニアでも簡単に使えます
    • エンジニアも開発前のプロトタイピングに利用して、仕様を精査してから本格的な開発に入ることができます
  • モバイル対応のWeb アプリケーションを構築可能
    • Webブラウザ/iOS/Android 用のネイティブアプリから利用

機能

主な機能は3つ

  • Table: データの定義
  • Builder: アプリのUIを定義
  • Automations: 自動アクションの規定

Table

  • 行列を持つデータを格納する機能
    • スプレッドシートと大体同じ

Amazon Honeycode Table

  • できること
    • データのフィルタリング
    • データの書式設定
    • 他のTableのデータ参照

Builder

  • アプリのUIをカスタマイズする機能
    • ボタンクリック時の処理や画面遷移などを定義

Amazon Honeycode Table

Automations

  • 自動的にアクションを実行させる機能
    • Trigger
      • スケジュールされた日時やデータが追加・変更されたタイミング
    • Actions
      • 通知の送信やデータ操作

Amazon Honeycode Automations

開発手順

  • 今回作るアプリ
    • シンプルな承認アプリ
      • Excel, スプレッドシートの台帳管理で失う無駄な工数を削減します
    • 従業員が出社や社外訪問をする際に、マネージャーへ申請するケースを想定します

開発の流れ

  1. サンプルデータ(csvファイル)を準備
  2. Honeycodeへサンプルデータをインポート
  3. サンプルデータを元にデータモデルを作成
  4. アプリケーションを作る (ウィザード編)
  5. アプリケーションを作る (Builder編)
  6. 承認フローを定義

1. サンプルデータ(csvファイル)を準備

まずは出社申請業務に必要なデータをCSV形式で用意。データ件数は少量でも構わないが、選択式で入力を行うマスタデータ項目を網羅しておくと、後のデータモデル作成が楽になる。

  1. 以下の様なサンプルデータを作成
    • 作り方はスプレッドシートでもExcelでもメモ帳でもOK
sampledata_googleスプレッドシート
  • サンプルデータの形式は以下のように設定
列名 論理名
application date 申請日
applicant 申請者
work day 出社日
destination 行き先
reason 理由
manager 承認者
result 承認結果
  1. CSVを出力
  • スプレッドシートの例
スプレッドシートcsv形式でダウンロード

ここで用意した.csv形式のファイルを、後でHoneycodeに読み込ませます

2. Honeycodeへサンプルデータをインポート

ログイン/アカウント作成

Amazon Honeycode login
  • 未登録であればCreate Oneから作成
    • 確認メールが送信されます

Amazon Honeycode Create Account

  • メールのConfirm Nowより承認

    • 続けてログインを実施Amazon Honeycode 承認画面
  • 初めてログインするとこんな感じ

Amazon Honeycode 初ログイン

サンプルデータのインポート

  • 右上のCreate workbook, IMportCSV fileからインポートを押下
    • 先ほど用意したcsvファイルを選択してImportを実施

Amazon Honeycode サンプルデータのインポート

  • import後にTableの画面になります
Amazon Honeycodeファイルimport後

3. サンプルデータを元にデータモデルを作成

  • Table機能を使ってデータモデルを作ります

WorkbookとTable名を変更

  • ・・・アイコンから変更

WorkbookとTable名の変更

  • 今回は以下の様に設定
    • Workbook
      • attendance management
    • Table名
      • attendance

列の書式設定

  • 日付であればDateなどのデータの型を定義することで、不正な入力を防ぐことができる

  • データ型の変更方法

    • 列を選択
    • 画面上部の Formatsを押下
    • COLUMN FORMAT を指定
    • Applyで適用

Amazon Honeycode 列の書式設定

  • 今回は以下の様に設定
    • 例えば、Date型にすると”年/月/日”の形式のデータ以外は入力できなくなります
列名 COLUMNFORMAT
application date Date
applicant Contact
work day Date
Manager Contact
  • 日付を入力する列にDate、人名を入力する列にContactを設定しました

選択式の入力にする(マスターテーブルの作成)

  • 残ったdestination列と result列を選択式の入力にするために、マスターテーブルを作成します。

  • 画面上部の Wizardsを押下

    • 表示されたペインで Create Picklistsを選択

Amazon Honeycode Wizards

  • Create picklists for:
    • Tableを選択(今回はattendance)
  • For unique values in:
    • 列を選択
    • 今回はdestination
  • Apply

image

  • +Add Newからresult列についても同様に設定
  • GOを押下

Amazon Honeycode Create Picklists

  • 設定後は以下の様になります
Amazon Honeycode マスターテーブル作成後
  • サンプルデータでマスタデータが網羅されていない場合は、この段階でマスターテーブルに対してデータを追加
    • つまり他の選択肢もある場合は追加が必要
  • データの追加はスプレッドシート左下の「+」から実施

データモデルの作成は以上でOK

4. アプリ(UI)の開発 App Wizardによる自動生成

次はアプリのUI(画面)を作ります

UIの作り方

  • Amazon HoneycodeにおけるUIの作り方
    • Builder
      • 真っ白な画面にデータ項目やボタンを1つずつ配置しながら画面を構成
    • App Wizard
      • 自分で一から作らず、テンプレを利用

今回はウィザードで基礎を作り、詳細をBuilderで改修する流れで構築

ウィザードの利用

  • ウィザードを起動
    • 画面上部の Build appを押下
    • Use app wizardを選択

Amazon Honeycode use wizard

  • App Wizardを開くと表示される説明ムービー

About App Movie

  • App Wizaradを利用する場合の開発手順
    1. データモデルを読み込み、そこからAP画面を自動生成
    2. 一覧画面
    3. 詳細画面
    4. フォームを編集

Step1: Tableの選択

事前に作成したデータモデルを一覧表示する画面を自動生成します

Amazon Honeycode App Wizard Step1
  1. 右のサイドナビのSourceを選択

    • 今回はattendance(事前に作成したデータTable名)

    • 以下の様にアプリの画面(データの一覧画面)が自動生成されます

      Amazon Honeycode App Wizard自動生成したUI

Step3: 画面やデータ設定を編集

Amazon Honeycode App Wizard Step3
  1. 一覧画面のデザイン
    • 必要のないデータ項目を消します
    • データ項目の削除
      • Xボタンで削除
    • データ項目の追加
      • +Add column
    • データ順序の入れかえ
      • データ項目左側のドットをドラッグ
    • 設定が終わったらNext

Amazon Honeycode 一覧画面のデザイン

  1. 単票画面(詳細画面)のデザイン
    • 先ほどの行単位の話
      • 今回は単一の申請の詳細をみる画面
      • 一覧画面で表示されないデータ項目もすべて表示したい
    • データ項目を変更可能にする
      • 鉛筆アイコンをクリック
      • 今回はマネージャーによる承認行為を行うので result を変更可能に
    • 設定が終了後にNext

Amazon Honeycode App Wizard make detail

  1. フォーム画面のデザイン
    • 申請データを登録する際の画面
    • 今回は申請者がresultを決定する必要がないため、Xで削除
    • 完了したらApply

Amazon Honeycode App Wzard designe form

ここまでで基礎となるアプリケーションが完成した状態。画面右上の X からウィザードを終了。終了すると、残りはBuilderでの編集しかできないので注意(App Wizardは使えない)


5. アプリの開発 Builderによるカスタマイズ

App Wizardで作ったアプリの詳細をBuilderで編集する

  • Builder の起動
    • 画面左上の Builder アイコンを押下
    • アプリを選択
      • 今回作ったアプリ(Attendance)を選択

Amazon Honeycode Start Builder

  • Builderの立ち上げ画面

Amazon Honeycode Builder

Builderの概要

  • Screen(アプリの画面)に各Object(部品)を配置していく
    • Ex.) データを表示する部品, 処理の起点となるボタン

Amazon Honeycode Builder Add object

チュートリアル1: Screen

  • ここでデータの追加やアプリ画面のスタイル、レイアウトのアレンジなどを行う
Amazon Honeycode About Screen

チュートリアル2: Properties

  • ソース、表示、アクションなどのデータプロパティを設定する
Amazon Honeycode Configure & edit

チュートリアル3: The data view

  • ソースデータを視覚的に参照
Amazon Honeycode data view

不要な機能の除去

詳細画面

  • 今回単票画面(詳細画面)に含まれる不要な機能を除去する
  1. 編集したいアプリの画面を移動

    • 今回弄るのは詳細画面(attendance detail)
      • 画面左側のペイン Screens で単票画面である attendance detail を選択
  2. 画面中央のペインで Jump to item 機能を含む Block を選択

  3. 画面右側のペイン BLOCK PROPERTIES で DISPLAY タブを選択

  4. Set visibility に =FALSE と入力

attendance detailの編集

データフォームの修正

申請者が申請日を編集する必要が無い(自動で決定する為)ため、機能を削除します

  1. 画面左側のペイン Screens で単票画面である attendance form を選択

  2. 画面中央のペインで application date のデータ値を入力する Data Cell を選択

  1. 画面右側のペイン DATA CELL PROPERTIES で Editable チェックを Off にする

  2. 画面右側のペインで DATA タブ、Set type で Variable を選択する

  3. Set initial value に =NOW()+9/24 と入力する

    • Amazon Honeycode では現在時刻を示す NOW() や今日を示す TODAY() などの関数と数式を利用可能です。NOW() 関数、TODAY() 関数のいずれも UTC を基準としているため、JST への変換を行っている

  • 申請者を記録するapplicantも修正
  • 代理申請を除くと申請者は操作を行ったユーザーと判断できるため、以下の手順に沿って申請者の初期値にログインユーザーを設定するとともに、利用者に入力をさせない仕様とする
  1. 画面中央のペインで applicant のデータ値を入力する Data Cell を選択

  2. 画面右側のペイン DATA CELL PROPERTIES で Editable チェックを Off に変更

    • 自動入力させる為、編集不能にする
  3. 画面右側のペインで DATA タブ、Set type で Variable を選択

  4. Set initial value に =$[SYS_USER] と入力

    • 自動的にユーザ名を入れる

手直しは以上で完了

6. 承認フローを定義(Automationsで機能を開発)

  • Automationsでメール送信機能を開発する

    • 本アプリの利用者
      1. 申請者(出社する社員)
      2. 承認者(マネージャー)
    • 上記の間をつなぐフローに必要な以下機能を作る
  • 今回作る機能

    1. 申請者が出社申請を登時、マネージャーへ承認依頼メールを送信
    2. マネージャーの承認実施時、申請者へ結果通知メールを送信

Automations

  • Automationsを起動
    • 左のAutomationsアイコン → +
      Amazon Honeycode Automations 起動

まずは承認依頼メールを発信する機能を作る

  • Automationsの名称を変更
    • 上部のスリードット
    • 今回はapproval requestと命名
      Amazon Honeycode Change Automation Name
  • 処理が発生するタイミングを指定(Row Added)

    • Row Added or Deleted

    • In table

      • 申請データを格納するattendance を選択
    • Starts when

      • row is added to を選択
    • 今回のタイミング

      • 申請者による出社申請を起点

      Amazon Honeycode Row Added

テーブルの行が追加されるとき=承認依頼を実施した時

  • 処理内容を定義(Add Actions)

    • Add actions
    • Notify(通知機能)を選択
      Amazon Honeycode Add Actions
    • 送信先、件名、メッセージを入力
      • データ項目名も指定可能
      • データ項目名を指定した箇所は処理対象のデータ値に置換された上でメールが送信されるため、宛先や文面を動的に構成可能
      • 今回は”=manager”を指定
  • 承認依頼メールを定義

    • 線が引かれている箇所は =manager との形式でデータ項目名を指定している

    • 表記のデータ値はあくまで一例であり、送信されるメールの文面は Automations で処理されるデータの値を用いて構成される

      Amazon Honeycode 承認依頼メール

=データ名でデータモデルから参照してくれる
緑のラインが入っている箇所

  • 変更を確定
    • 画面右上のPublishを押下
    • Publish されていない、つまりは変更が加えられている状態では画面右上に Draft と表示される

Publish Automation

  • Notifyで以下のような警告が表示される場合がある

Amazon Honeycode notification alert

申請者への結果通知メール送信機能を作成

  • Automationを追加
    • 画面左側の + をクリックして画面を起動

add automation

  • automation Trigger
    • 処理が発生するタイミングは承認者による承認結果登録を起点とする
    • Column Changes を選択
    • In table
      • 申請データを格納する attendance を選択
    • Starts when this column changes
      • 承認結果データである =[result] を選択
    • Run automation if this formula is TRUE
      • 承認結果の入力を示す式 =[result]<>"" を入力

Set Automation Trigger

  • 結果通知メールを定義
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
=applicant 様

以下の出社申請への承認結果をご連絡致します。

申請日:=
申請者:
出社希望日:
出社先:
出社理由:

承認者:
承認結果:

本メールは、配信専用のアドレスで配信されています。
本メールに返信されても、返信内容の確認およびご返信ができません。
あらかじめご了承ください。

Amazon Honeycode 申請メール例

  • Publishで編集を完了

ここまででアプリの開発は完了
次に関係者にアプリを公開する

アプリを公開

Teamにユーザを招待

Honeycodeで開発したアプリを使ってもらうには、事前に以下が必要

  • 利用者にAmazon Honeycodeのアカウントを作成してもらう

  • 同じTeamに入ってもらう

  • 招待の手順

    • 画面左下の Teams アイコンをクリック
    • チーム名をクリック
    • 画面右上の Add team member をクリック

Amazon Honeycode Teamへの招待

  • Connect AWS account
    • 有料プランにすればAWSのアカウントとも連携可能なよう
      1
      To upgrade your team plan, connect to your AWS account.

Amazon Honeycode add member

  • Invite to join
    • 表示された画面でメンバーのメールアドレスを入力
    • 役割を Admin と Member のいずれかから選択
    • Invite ボタンをクリック
    • 役割の違い
      • Admin : Workbook、アプリケーション、Automations の作成。Plan とチームメンバーの管理
      • Member : Workbook、アプリケーション、Automations の作成

Invite to join

  • 招待を受けたユーザーには以下のようなメールが送信される
    • Join ボタンをクリックしてもらう

Amazon Honeycode invite mail

事前の登録作業は以上で完了。
一度Honeycodeのアカウントを登録すれば他のアプリを作っても使いまわせるが少し手間ではある印象

share

作成したアプリケーションの公開は関係者に Shareする

  • 画面左上の Amazon Honeycode アイコンをクリック
  • Workbook とアプリケーションの一覧を表示
  • 公開したいアプリケーション右端のスリードットの左側をカーソルでポイント
    • Share ボタンが表示されるのでクリック

Amazon Honeycode 作成したアプリを公開

  • 公開先のユーザアカウントを選択する
    • ユーザー名やメールアドレスで検索
    • リストに追加
    • Update ボタンをクリック

Amazon Honeycode Share App

  • 利用可能になった旨がメールで通知される

Amazon Honeycode 利用通知メール


アプリを利用してみる

スマホで利用

  • まずはアプリケーションの公開通知を受け取ったユーザーがスマートフォンから出社申請をする

  • Amazon honeycode アプリをインストール

  • ログイン

    • アカウントを持っていなければここで作成
  • アカウント作成時に入力したメールアドレスとパスワードでログイン

    • 自分に公開されているアプリケーションの一覧が表示される
    • 今回作成したアプリケーションの Attendance をタップして起動

Ammazon Honeycode login画面

  • アプリケーションが起動すると、ホーム画面の申請一覧が表示される
    • データモデルを作成する際にインポートしたサンプルデータを削除していない場合はリストに表示される

ホーム画面の申請一覧

  • 画面右上の + Add をタップして出社申請を行う
    +Add

  • 出社申請のエントリー画面で入力可能な項目を埋めていく

  • データモデルの作成をする際に各データ項目の formats を定めた。アプリケーションでもその結果が踏襲され、データに合わせた入力が可能

  • データ入力が完了したら Done ボタンをクリックし、入力を確定

  • 申請一覧画面に遷移し、直前の操作で作成した申請が一覧に表示される

  • 申請データの登録に合わせて Automations が実行され、マネージャーにはこのようなメールが送信される

Web ブラウザで申請を承認

  • 続いては承認依頼通知を受け取ったマネージャーが出社申請を承認する

  • Amazon Honeycode は Webブラウザからも利用可能なため、マネージャーはブラウザから承認を行ってみる

  • Chrome、Edge、Firefox、Safari などの Web ブラウザで Amazon Honeycode にアクセス

  • 今回作成したアプリケーションの Attendance をクリックして起動

  • アプリが起動すると、ホーム画面の申請一覧が表示される
    • 承認結果が空白のデータをクリックし、出社申請の承認を実施

  • 出社申請の詳細画面が表示される
    • 内容を確認して承認結果を選択

  • 選択すると自動的にデータが保存され、申請者にはこのようなメールが送信された

無事に出社申請業務を実施できたので、これで動作確認は完了

所感

  • iOS や Android のアプリストアから Amazon Honeycode アプリをダウンロードしてログインするだけで、利用者に必要なアプリケーションが表示され、配布の手間が少ない点はメリット
    • honeycodeへのアカウント登録とTeamへの加入は必要だが、以降はアプリを追加してもすぐにShareできる
  • AWSアカウントとの連携も利用すれば、より配布の手間を削減できそう

参考

その他

その他

[UI Bakery] NoCodeでAngularのUIをプロトタイピング(コード出力も可能なツール)

モダンなWebアプリの画面をコードを書かずに開発して、ソースコードとして出力するツールについて解説します。
特徴はソース自体を出力できるため、通常の開発と遜色ない柔軟性を保ったまま時短を図れることです。
他のNoCodeツールと比べて、後から出力したソースに機能を追加していく前提なのでエンジニア向き。

UIBakery概要

UI Bakeryとは

  • UI Bakery

    • NoCode(Low-Code)プロトタイピングツール
      • WebアプリのUI(画面)をコードを書かずに開発することができるWebサービス
    • Angularベースでソースコードを出力可能
      • 最重要ポイント
      • 柔軟性に優れている
        • 他のNoCodeツールのデメリットは、”そのツールでカバーする範囲はできない”ことにある
          • 他のサービスとの連携や高度な機能を足そうとすると、結局作り直しになる
      • どのプラットフォームにも展開可能
        • 他のツールの場合、”ツール内の機能でしか”Webに公開できない。大抵そこで料金がかかる
          • アクセス数に応じて更に料金が加算される仕組みが多く、作れてもビジネスとして微妙
          • マネタイズの手法としては賢いと思うがあまり使いたくない
        • 例えば、Github PagesやAWSのS3、Firebase HostingなどのPFを要件に応じて選定できる
          • つまりインフラの知見を持つエンジニアであれば、費用を最適化してサービスを展開することができる
    • 基本無料
      • 大抵のNoCodeツールで目につく欠点がないように思える
  • テンプレートが豊富で、使える物があればかなり楽に実装できます
    UI bakery Template

ユースケース

要件定義や開発の初期段階で実際に操作可能な画面を作ることで、認識のギャップを低減することが出来ます。後の改修リスクを極力減らし、早めに機能面の実装に入ることができます。
こういった実働するモデル(プロトタイプ)を早期に製作する手法およびその過程をプロトタイピングと言います。

  • UI Bakeryを利用したAP開発の流れ
    • UI BakeryでUIを一日でプロトタイピング
    • 顧客やプロジェクトオーナーに対してデモを実施
      • 指摘や要望があれば修正を加える
      • ここでニーズと実装のギャップを防ぐ
    • UI BakeryよりAngularのソースコードを出力
    • gitなどに加える
    • 出力したソースに機能を加えていく

使用方法

アカウントを作成~ログイン

  • UI Bakery Login

    • 今回はGoogleアカウントでログインしてみます

      UI_Bakery_login

  • Confirm
    UI Bakery Registration

  • 質問に回答してSubmit
    UI Bakery question

  • チュートリアル画面に飛びます

    • Stay Your Journeyから続けると基本的な操作方法が分かります

UI Bakery Tutorial

使用方法/機能解説

基本的にWEBブラウザ上でログインして操作します

1. Working Area

  • 作成中のAPの画面を確認できるスペース

UI Bakery Working Area

2. Component Picker

  • +ボタンを押すと、コンポーネント(簡単に言うとAngularにおける画面の構成要素の単位)
  • 使用方法
    • Working Area内の任意のスペースをクリック
    • 中に出てくるグレーの+をクリック
    • 追加したいコンポーネントの種類を選択
      • Menuや認証画面、表、Chartなどのよく使う物が用意されています
      • めちゃくちゃ便利…
    • コンポーネントが追加される

UI Bakery Components

UI Bakery Widgets

3. Configuration Panel

  • 右に表示されるパネルから、コンポーネントの設定を行うことが出来ます
    UI Bakery Configuration Panel

4. Toolbar

上のバーでプレビューやソースコードの出力が可能です

  • 真ん中のアイコン
    • PCやモバイルなどでどのように表示されるかPreviewを確認できます
  • Undo/Redo
    • 戻る/進む
  • GET CODE
    • ここからAngularのソースコードを出力可能
    • UI Bakeryで素早く作ったUIを出力したコードに、自分で機能(TypeScript)を書いていく流れが良さそうです
  • beta
    • まだベータ版だが、API連携もできるらしい
    • 現時点ではUI開発のみの用途がメインだが、機能面も面倒なところを肩代わりしてくれるようになるかも
      • 細かいところは自分でいじれるままであれば嬉しい

UI Bakery Toolbar

5. Page Management

  • ページやレイアウトの設定を行うパネル
  • サイドバーやナビゲーションバーもここで設定
  • 使用方法
    • 右上のアイコンをクリック
    • ページの追加やレイアウト変更を実施

UI Bakery Page Management

6. Tool Sidebar

左のナビ。UI Bakeryのツールを実行できる

  • Painter
    • 流行りのダークテーマなどにパパッと変更できます
  • Video
    • アプリの紹介動画やデモに使えそう
  • Documentation
    • UI Bakeryの公式ドキュメントをみれます

UI Bakery Tool Sidebar

学習方法

会員登録をしたら、まずはチュートリアルをやると理解が深まると思います。
他のNoCodeと比較して圧倒的に分かり易く、特にハマる場面もありませんでした。
動画と説明文がセットになっている親切設計。

UI Bakery Tutorial Sample

Projectの作成

Tutorialが終わったらCreate ProjectからUIを自由にプロトタイピングしてみましょう。
Angularではアプリの単位をProjectと呼びます。

  • Create Projectを押下
  • PJの名称を入力してCREATE

UI Bakery Create Project

テンプレートの選択

テンプレートを使用することでデザインの手間を大幅に短縮できます。よくあるパターンは用意されているので、テンプレートをもとにアレンジを加えるくらいですむことも多いと思います。
不慣れなメンバーが多いチームではこのレベルの画面を作るだけで、2,3週はかかりそう。

UI bakery Template

UI Bakery Template 2

  • Previewから実際の画面を操作することも可能です
    UI Bakery Template Preview

  • Templateを実際に利用するとこんな感じ
    UI Bakery Making

操作が直感的なので、実際に試しながら理解を深めていける良いツールでした。
私も引き続き試して、ハマるポイントがあれば追加で記事書こうと思います。API連携の機能も試してみたい。

参考

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×