Slide 1

Slide 1 text

iPadで開発する 〜iPadを開発作業に⽤いるためのあれこれ〜 合同勉強会 in ⼤都会岡⼭ -2021 Summer Online- @tamacjp

Slide 2

Slide 2 text

アジェンダ • はじめに • ハードウェア編 • ソフトウェア編 • Gitの話 • エディタの話 • シェルの話 • ターミナルの話 • … • まとめ

Slide 3

Slide 3 text

iPadには夢がある • 夢に魅せられて • iPad 3(2012年) • X〇OM とは違うのだよ XO〇M とは • iPad mini Retinaディスプレイモデル(2013年) • ⼿頃なサイズ感︕常⽤するのにピッタリ︕ • 通話⽤ガラホ + iPad mini があればスマホいらない • その後も修理しながら iPad mini4、iPad mini 5 など • 12.9インチiPad Pro (第2世代)(2017年) • Pro︕強そう︕ • ⼤きな画⾯がジグソーパズルアプリで遊ぶのにピッタリ︕ • その後 11インチiPad Pro (第1世代)(2018年)など

Slide 4

Slide 4 text

パソコンでできることはたいていできるiPad やりたいこと 実現できるアプリ メール メール、Gmail、… Webブラウズ Safari、Chrome、… ファイル管理 ファイル、Dropbox、… ドキュメント作成 Word、ドキュメント、Pages、… 表計算 Excel、スプレッドシート、Numbers、… スライド作成 PowerPoint、スライド、Keynote、… メディアファイル編集 Adobe Creative Cloud、PhotoShop、… ターミナルログイン Termius、iTerminal、… ソフトウェア開発 、、、︖ パソコンと⽐べたら⾮⼒なモバイル端末だからしかたない…︖

Slide 5

Slide 5 text

M1搭載 iPad Pro 電撃発表(2021年4⽉) • M1は mac にも搭載されるアップル製チップ • ざっくり⾔うと「強いCPU」 • 発売開始を⼼待ちにして即ポチ

Slide 6

Slide 6 text

夢が広がるM1システム • macと同じCPU & 16GBメモリ(ストレージ1GB以上のモデル) そのうち Xcode も 動くようになるのでは つよつよの IDE も動いて iPad上で開発ができる ⽇が来るのでは ※ Xcode = macや iPhone, iPad 向けのアプリを作るためのApple製開発ツール っていうか iPad上で コードを書いて、ビルドして、 そのまま iPad上で動かせたら 超効率的じゃね︖

Slide 7

Slide 7 text

結論から⾔うと… • Apple、「Xcode Cloud」発表(2021年6⽉) • アプリのビルドをクラウドでやるという話 コードを書いて 通信して クラウドでビルド これなら iPad でコードを書いてビルドもできるかも︕ M1である意味︕︕

Slide 8

Slide 8 text

ハードウェア編

Slide 9

Slide 9 text

キーボード • キーボードは必需品 • ソフトウェアキーボードは横持ちだと画⾯の半分を占める 画⾯の半分 ソフトウェア キーボード

Slide 10

Slide 10 text

iPadで使えるキーボード • ⼀般的なBluetoothキーボードが使える • ⼤きく分けるとiPadのキーボードは2種類しかない Magic Keyboard それ以外のキーボード

Slide 11

Slide 11 text

Apple Magic Keyboard • 重い&⾼い • さんまんよんせんえん… • 安定感&安⼼感 • しっかり⽀えられる • バツグンの使い⼼地 • TrackPad付き • 充電不要 • 逆にType-Cケーブルをつなげば iPad への給電も可能 あれはいいものだ…

Slide 12

Slide 12 text

iPad本体 • M1である必要はあるか • iPad Proである必要はあるか • ただし Magic Keyboard を使える機種がよい • iPad Pro のほかに iPad Air (第4世代) でも使える 今のところあまりない… もちろんパワフルなほうが余裕がある

Slide 13

Slide 13 text

⼤切なのは画⾯サイズ • iPad mini(7.9インチ)では厳しい場合がある • 12.9インチはとても広い • でも重い… Magic Keyboard 付けるとほぼ 1.4kg • 13インチMacBook Proも 1.4kgなので⼤きさも重さも変わらない • 11インチは持ち配びやすい • 11インチMacBook Air 使っていた勢としてはこっち推し • でもキーボードが キュッ としていて打ちにくい

Slide 14

Slide 14 text

打ちにくい Escキーとして機能する ⽇本語⼊⼒のON/OFF

Slide 15

Slide 15 text

Apple Pencil いらない

Slide 16

Slide 16 text

ソフトウェア編

Slide 17

Slide 17 text

選ぶべきソフトウェアの条件 • ちゃんと iPad対応であること • iPhoneの⼩さい画⾯で開発はキビシイ • 横持ち(Landscape)に対応していること • 顔を横に倒して作業するつもりはない • Multiple Windows に対応していること • Split View や Slide Over は便利 • 有料アプリでよいので開発が継続されていること • でも願わくはサブスクではなくショットの課⾦がいい… • 無料でお試しできてApp内課⾦だとなお嬉しい 独断と 偏⾒による

Slide 18

Slide 18 text

Gitの話 • Working Copy - Git client • 普段使う Git機能を⼀通り備えたGUI • これを使わない理由がほどの定番アプリ • リポジトリを clone したりローカルで使うだけなら無料 • push する機能を使うときはショットの課⾦が必要 無料で使える機能 Pro Capabilities(2,440円の有料機能) GitHub & BitBucket support Push to remote Commit tagging SSH Upload, SSH Command Commit graph Pull Request Creation Submodule support Custom Push Rebase support History Editing Repository search Color scheme & Font customization

Slide 19

Slide 19 text

エディタの話 • 無料アプリも有料アプリもさまざまなものがある • Web系に特化したものが多い印象 • HTMLやJavaScriptの Syntax highlight • 内蔵ブラウザでのプレビュー • 内蔵HTTPサーバを⽤いた Safari でのプレビュー • Syntax highlight の対応⾔語はアプリ次第 • .tsx に対応しているものは意外と少ない

Slide 20

Slide 20 text

Textastic Code Editor 9 • よくブログ等で紹介されているエディタ • 内蔵ブラウザでプレビュー表⽰ができる • JavaScriptコンソールの出⼒も確認できる • 編集したファイルをSFTPやWebDAV等で転送できる • HTMLやCSSを書いてすぐサーバーにアップロードできるの でWeb系ブロガーに⼈気なのかも • Syntax Highlight の対応⾔語が多い • JavaScriptは補完が効くので編集しやすい • Working Copy と連携してGit管理のファイルを扱える

Slide 21

Slide 21 text

play.js - JavaScript IDE • JavaScript開発をサポートする統合環境 • 内蔵 Node.js を実⾏できる • npm install でパッケージ追加も可能 • iPad 内でトランスパイしたり Prettier にかけたり express を起こしたりできる • 内蔵ブラウザのデバッグ機能もそこそこ強⼒ • JavaScriptコンソール、HTMLインスペクタなどを内蔵 • Git機能も内蔵 • プロジェクト単位で開くので Working Copy 連携は不可

Slide 22

Slide 22 text

エディタの限界 • あくまでエディタでしかない • 変数を使っている場所にジャンプできない • シンボル名の変更などのリファクタリングができない • コード補完はJavaScriptの範疇のみ • ⾃分で追加した処理やライブラリまで把握してくれるわけではない • シンタックスチェックもできない • コードの reformat ができない • play.js は Prettier を動かせるので例外的に可能と⾔える IDEと呼ぶにはキビシイな〜 こんなときなんでもできる環境があれb 💡

Slide 23

Slide 23 text

シェルの話 • iPadの中でシェルを動かす • Blink、a-Shell などのプロダクトがある • 今回紹介するのは iSH Shell • Alpine Linux ライクなシェル環境 • apk でパッケージの追加が可能 • ⾜りないものは追加できる • git も追加できるし Python3 も Node.js も動く • そして何より emacs をインストールして動かせる

Slide 24

Slide 24 text

ターミナルの話 • 嵐が来るとサーバーの様⼦を⾒に⾏きたくなる • AWSコンソールからセッションマネージャー︖ そんなモダンな構成のサービスばかりだと思うなよ︕(⾃虐 • Cellularモデルの iPad なら出先に Wi-Fi が無くても テザリングしなくても⼤丈夫 • SSHクライアントも⼭ほどある • iSH の中からでも ssh できる • WebSSH - SSH Client • Multiple Windows対応、App内課⾦

Slide 25

Slide 25 text

シェルで emacs + ターミナルで ssh = ︖ • 通信を前提とするのなら、作業⽤コンピュータに リモートからログインできる環境を作ればいい • そこで Emacs を使って開発ができるじゃない︕︖ • ⽴ちはだかるみっつの課題 1. アクセス先IPアドレスの問題 ⇒ みなさん固定IPのひとつやふたつお持ちですよね(またはDDNS) 2. ssh できるポートを開けるのか問題 ⇒ ⾃宅ルータをRTX830あたりにすればVPNできますよ︕ 3. Emacs で開発をするのか問題 ⇒ だまれ⼩僧

Slide 26

Slide 26 text

リモートデスクトップの話 • シェルだけでなくホストの画⾯を共有すればいい • XcodeもPyCharmもDockerも使える • VNC Viewer - Remote Desktop • mac ならOS標準機能の画⾯共有だけでホストになれる • VPNなど何か策を講じないとリモートからは接続できない • Screens • パソコンに Screens Connect を起動しておけば UPnPでリモートからでもアクセスできる • マルチディスプレイ対応

Slide 27

Slide 27 text

まとめ • iPad でも意外としっかり開発ができる • シェルが使えれば強い • でもやっぱり制約もある • IDEと呼べるものはまだない • リモートデスクトップするのが⼿っ取り早い • でもそれM1である意味︕ってなる • つまりできないこと以外はなんでもできる • 11インチくらいのCellularモデルが正義

Slide 28

Slide 28 text

• 名前︓江⼝ 珠美 • a.k.a. tama/たまみ • 属性︓#ハタチ • 所属︓岡⼭⼤学⼤学院 保健学研究科 株式会社サブスレッドほか ⾃⼰紹介 @tamacjp

Slide 29

Slide 29 text

会社紹介 • 株式会社サブスレッド • 本社︓新⼤阪 • 名古屋、岡⼭、広島に拠点 • iPadのアプリを作ったり対向するAPIサーバーを作ったり • Webフロントエンドもたくさん作ってます︕ • ⻄⽇本に総勢13名、半分以上は⾃宅からのリモートワーク • パソコン交流会こと岡⼭git勉強会の中の⼈も社員です • 希望する社員全員に iPad Air (第4世代) セットを貸与 • もちろん Cellularモデル、 Magic Keyboard、Apple Pencil • これでみんなでいつでもどこでも仕事ができるね★ • 興味がある⽅はお声がけください(o’ヮ’o)