iPad ProでWEB AP開発 & RPA

こんにちは。先日iPad 2020(第4世代)を購入しました。発売日の今日受け取ってこの記事を書いています。最近はPCライクな作業の効率がUpしているので、WEB APの開発をできるようにしてみました。一言で開発環境が立ち上がるように自動化もしています。さっきDTM環境も構築しました。

概要

  • ざっくりのイメージ図を書きました
iPad Dev
  • 流行りのブラウザ型IDEを利用して、iPadでの開発を可能にします
  • また、iPadのRPAツールとSiriで一言でIDEが立ち上がるようにします

基礎知識

  • ブラウザ型IDEとは?

    • URLで即アクセスして、ブラウザで利用可能なIDE
      • RDPをするより手軽
        • そもそもiPadからのRDPはできなくもないがまだ厳しい
    • 裏側で動いているのはクラウド上の仮想サーバ
      • Cloud9ならEC2、Cloud ShellならGCEのリソースを利用
        • 意識せずに使えるので安心してください
    • 自端末のOSに依存せず開発可能
      • つまりiPadでも開発可能
        • 普通のWinows PCでも効果が大きいです
      • 社内プロキシ問題に悩まされない
        • 個人的には最重要ポイント
      • 環境構築を省略可能
        • node_module, Git, AWSやGCPのCLI等の便利なものが元から入っている
          • 新設チームや初級者への効果は計り知れないと思います
  • お勧めできるブラウザ型IDEは以下の二つです

    • Google Cloud Shell
      • Googleのブラウザ型IDE
      • Googleアカウントで利用
      • 環境構築を省略可能
        • Firebase CLI等のGCP向けのものが入っている
    • AWS Cloud9
      • AWSのブラウザ型IDE
      • AWSアカウントで利用
      • 環境構築を省略可能
        • AWS CLI等の便利なものが入っている
      • ★複数ユーザーで同時編集可能

選定基準

  • 用途から

    • 手軽さ優先・今すぐ使いたい
      • Google Cloud Shell
        • Googleアカウントさえあれば、5分以内に使い始められます
        • Cloud9はAWSのアカウントが必要なので、権限周りがシビアです
          • 組織で共有している場合、少し面倒なことになります
    • 複数人で同時編集したい
  • 開発するサービスから

    • バックエンドに利用するクラウドが決まっていれば、環境構築の手間を削減できるので、合わせましょう
      • Firebase, GCPを利用する
        • Google Cloud Shell
      • AWS, Amplify, Lambdaを利用する
        • AWS Cloud9

周辺機器

マウス

  • iPadとマウスはBluetoothで繋げられます
    • iPad対応で”発信機が不要”なモノにしましょう
      • 安めで、USB充電が可能なFenifoxを使っています
        • amazonで探していたら、ipadに対応していないにも関わらず、”対応”と書かれているものがあったので、よく確認してください
          • fenifoxの説明には全くないのですが、接続時にパスワードを求められたら”0000”,”1234”,”1111”の何れかを入力すればOKです
      • 拘る人にはApple純正のマウスもあります

Keyboard

  • ひとまずMagic Keyboardを使用しています

    • 非常に軽く、登録後は叩くだけでipadと繋がります
    • 打鍵感に拘る人はこれが良いと思います
  • 話題のiPadが浮くキーボードは2020/05発売なので待機中です

    • Apple Magic Keyboard

      • イケてるけど、エントリーモデルのipadより高い…
      • 追記:最近購入しましたが、ほぼ完全にPCになるのでお勧めです

イヤホン

  • 会議用に用意しておくと便利です
  • Sony製品が好きなのでWF1000XM-3を使っています

Google Cloud Shellの設定手順

  • Google アカウントを作成
  • ログインした状態でGCPを開く
  • Googleアカウントでそのままログイン
    • GCPコンソールが開きます
GCP Console Top
  • コンソール上部の赤で囲んだマークを押すと、コマンドラインが現れます
GCP Console Top
  • コマンドラインが下部に出た状態
    • 次に拡大ボタンを押下しましょう
GCP Console Top
  • 全画面表示になります
    • 次にペンのマークを押下しましょう
GCP Console Top
  • エディターが現れます
    • 以上でVC Codeのような画面になったと思います
    • このWEBページもGoogle Cloud Shellのエディターで編集して、CLIでhexoのコマンドを打って自動生成しています
      • 画像の処理が楽なのでiPadでやると効率があがります
GCP Console Top
  • WEB APのlocalhostで実行してブラウザで確認したい時
    • 上の左から二番目のアイコンをクリックすると、portを指定してブラウザを開くことができます
      • クラウドIDEで開発する際に嵌りがちなシーンですが、Cloud Shellなら楽に解決できます

ショートカット x SiriでIDEを開くまでを自動化

  • 『Hey Siri, GCP』と言ったらGoogle Cloud Shellが開くようにします

    • ブラウザ型IDEの欠点として、ブラウザから開く手間があります。自動化して時短&モチベーション向上を図りましょう
  • ショートカット

    • iPhoneやiPadで使える手軽なRPAツール
    • iPadで作業するメリットの一つだと思います

手順

  • GCPコンソールのURLを控える
  • ”ショートカット”アプリを開く
  • ”ショートカットの作成”
  • ショートカット名を”GCP”に設定
  • 左上の検索欄で”Chrome”と入力
  • 候補に出る”Chromeで検索”を選択
    • “ChromeでURLを開く”を選択
  • URL欄に先ほどのURLをコピペ

以上で完了です。”HEy Siri, GCP”といえば、自動でIDEが出てきます

  • よく使うサービスは同じように表示までを自動化しておくと便利です
    • 冒頭に動画を載せておきましたが、cloud9も同じようにURL指定で開けるようにしています

開発の周辺作業

PCじゃないと無理じゃない?と言われそうな作業の代替え案です

  • パワポ
    • Googleスライドを使いましょう
      • クラウド上に保存すれば、どの端末からでも見れるので便利です
      • アクセス制限を付けて任意の人に共有することも可能です
  • Excel
    • Googleスプレッドシートを使いましょう

関連記事

@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

×

span class="tag is-grey">1
GithubPages 2
Google Chrome 1
Google Cloud Shell 2
GraphQL 1
Hexo 11
Hosting 1
IAM 1
Ionic 2
JSON 2
JavaScript 3
LadioCast 1
Logging 2
LowCode 2
MFA 1
MS Authentication 1
MacBook Pro 16 1
Mind Node 2
NETDUETTO 2
Netflix Party 1
Netlify 1
Network 1
NoCode 3
Observable 1
PO 1
PdM 1
Promise 1
RPA 3
ReactiveForm 1
Recognition 1
Route53 1
S3 6
SAM(Serverless Application Model) 2
SAR 1
SSL 1
SYNCROOM 2
Schematics 1
ScrumInc 1
Serverless 3
Service 1
Siri 1
Sitemap 1
Spark AR 1
Steinberg UR44C 4
Teams 1
Touch Cast Studio 1
Treetable 1
TypeScript 4
UI 1
UI Bakery 1
WAF 1
WAFv2 1
WEB Page Dev 1
WEB会議 2
WebAR 2
WebSocketAPI 1
Webhook 1
Windows Power Automate 1
Wireshark 1
aot 2
async/await 1
aws config 1
cloud9 3
display.land 1
draw.io 2
e2e test 2
filter() 2
forkJoin() 1
google search console 1
hexo-generator-amp 1
iOS 4
iPad Pro 3
iPhone 1
icarus 4
map() 2
mat input 3
mat tree 2
mat-checkbox 3
mat-input 1
mat-selection-list 1
mmhmm 1
ngFor 1
plantUML 2
popIn Aladdin2 2
then() 1
vscode 1
”global is not defined” 1
らくがきAR 1
アジャイル 1
アジャイル開発 4
クロスプラットフォーム 2
ショートカット 2
スクラム 1
スクラム開発 2
テレワーク 1
ファイル操作 2
ブラウザ型IDE 1
プロダクトオーナー 1
プロダクトマネージャー 1
プロトタイピング 1
リモートセッション 3
共同開発 1
双方向データバインディング 3
待ち合わせ処理 1
認定スクラムマスター 1
静的WEB Hosting 2
静的WEBサイトHosting 1
Your browser is out-of-date!

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

×