23
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iPadでプログラミング環境を構築する

Last updated at Posted at 2019-08-08

iPad Pro(2018) + Smart Keyboard を購入しました。

apple pencilで手書きの精度がかなり向上したし、Smart Keyboardの打感も好みで、落書きとブログ用に重宝しています。

しかし、せっかくなのでiPad proでどこまでプログラミングができるか試してみました。


環境構築はcognitomさんの「Macに別れを告げて、クラウド中心の開発生活を始めるまで」を参考にしました。
今回は

・macにssh接続して作業

・GCPを利用した開発環境

の2つの方法を検討。

ちなみに
普段の業務はウェブ系のプログラミング。エディタはvimを使用しています。


SSHアプリの選定 Blink Shell


兎にも角にもSSHでサーバに繋げられればプログラミングはできるだろうという判断(暴論)で、まずはSSHアプリを選定。
以前にもiOSのSSHクライアントを試しましたが、当時はマルチバイトを筆頭にいろんな挙動がイマイチだった記憶があります。
そんな不安のなか、有料含めて数々のクライアントを試している記事が公開されていました。とてもありがたい!
https://xckb.hatenablog.com/entry/2019/01/19/194952


とりあえず無料で使えるTermiusとShellyを試してみましたが、日本語の入力がダメだったりvimの表示がおかしい。
この流れで有料アプリを試すのがちょっと怖かったため、Blink Shellを自分でビルドして使用しました。
Blink Shellは自分でビルドすれば無料で使用できます。

これがすこぶる快調。
ちなみにビルド時に適当に見つけた日本語記事を見ながらやったら、記事が古かったため失敗しました。ちゃんとREADMEを読もう。

iOSのDeveloper Programに登録しておらず1週間程度で使えなくなったため、有料版のBlink Shellを購入しました。自分でビルドする場合にはカスタマイズもできるっぽいので、いずれ試したいなぁ。


MacにSSH接続


macには同一ネットワーク内ならsshで接続する機能がデフォルトで備わっているので簡単に可能。
macOS10.14
システム環境設定 > 共有 > リモートログインにチェックを入れる
mac_ssh.png
あとは書いてあるssh username@ipで接続できます。


ルータで外からも接続できるように設定しておけば便利。ついでにIPを固定していないので、変更があったときにLineでアドレス飛んでくるように設定しました。この辺もいずれ記事にできたらなぁ。


ただ、macbook proをしばらく放置していると接続ができなくなって困りました。wi-fiネットワークアクセスによるスリープ解除の設定もしているけど、なんでだろうか。
これだと外出時に頼るには怖いなこれ。


Google Cloud Platformに環境を構築


そんなわけでmacbookに頼るのは不安なためGCPに環境を構築。

最初に紹介したcognitomさんの記事で詳し〜く書かれているため環境構築の詳細は書きません(これ以上丁寧に書けません)ので、私の環境を掲載しておきます。


ComputeEngine


VPN用マイクロインスタンスを常時起動。
あとは開発用インスタンスをプロジェクトごとに都度作成。


Cloud DNS

すでに持っているドメインのサブドメインをCloud DNSに向けている。
インスタンスを作成したらスクリプトで自動設定。


VPN用のインスタンスにgcloudコマンドとインスタンス作成+DNS設定のスクリプトを置いておいて、プロジェクトが開始したら新規のサーバを立ち上げて運用します。

参考までにスクリプトはこんな感じ。
https://github.com/shuuuta/GCPSetup
conf.txt.sample を参考に conf.txt を作成して、
$ add_gce.sh hoge
を実行すると、

  • 
hogeインスタンスの作成

  • 
外部IPに hoge.e.your.domain を設定

  • 
内部IPに hoge.i.your.domain を設定


といった処理をします。
あとはhoge.e.your.domain にssh接続し、編集したサイトを確認する場合にはVPNに接続してhoge.i.your.domain にアクセスして使用します。

上記スクリプトではDNSを一旦リセットする処理も書かれているため、使用する場合は気をつけてください。自分用なので、そのうち色々書き換えるかもしれないし。


[結論] iPad OSが楽しみ

こんな感じでiPadでもあまり問題なく作業はできました。
しかし実際に試してみて不便だった・気になったことは

  • ブラウザの開発者ツールが使えない。
  • ブラウザのウィンドウが1つしかない。
  • vimからコピーしてブラウザ等に貼り付けが大変。
  • クライアントとチャット等でデータをやり取りする場合が大変。
  • クライアントからのデータがファイルによっては見られない。
  • プロジェクトごとに立ち上げるサーバの費用が心配。


などなど。

特にフロントをいじっている時に開発者ツール無いと不便ですね。
iPadの不満もありますけど、リモート環境での作業の不満もありますね。このへんは慣れなんでしょうか。

その他気になったことには、iPad関係ないけどリモートマシンを使っているのでtmux使った方がいいのと、Blinkのsshでエージェントフォワードができなかったのでkryptonを使うと便利です。

もうすぐiPad OSがくるので、上記色々解決していると助かります。ほぼフル版のPhotoshopにも期待。
これでうまく回せられるようになれば、上京の時に重いパソコンを持ち歩かなくてすむから助かるなぁ。


[追記] iPadでウェブソースを見る方法を模索しました

iPad OSがきてサイドカーだ複数ウィンドウだと楽しんでいますが、未だにブラウザからソースが見られず不便なので対処を考えてみました。

curlで取得したウェブのソースコードに色を付けたい

[追記2] Chromeでコンソール出力の確認ができるようになりました

Chrome for iPadでjavascriptのコンソール出力が確認できるようになりました。
大きな一歩ですね。
ChromeならiPadでコンソール出力を確認できる

23
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?