このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

果たして、iPadAirでどこまでPCのように開発が行えるのか。

購入したからには、開発環境の構築をやるしかないなと。言う事で、

こちらのキーボードを購入。

iPad Magic Keyboard

created by Rinker
Apple(アップル)
¥34,980 (2021/10/22 22:01:35時点 Amazon調べ-詳細)

リンクは英語用ですがJIS用購入。

迷いに迷って、色々と検討した中、やっぱコレだよねと。とApple純正品になってしまいました。

非常に打ちやすく、何と言ってもトラックパッドの便利さよ。

もうこれ、MacBookじゃん。と思ってしまうほどの感触。

ただ、欠点は、散々皆さんが言われているように

  • 重い
  • 高い

ですよね。

でも、iPadAirを購入したからには、もう買うしかないだろうと。

ジャーン!!

うっすら手が映る。。

なんか上手く撮れませんでした。

いやぁ。全然良い。

もうMacBookですよね。

確かに重たいのですが、ノートPC持ち歩いていると思えば、ギリ許容範囲。

では、早速開発間発環境を構築していましょう!

今回利用するアプリはこちら。

iSH

https://apps.apple.com/jp/app/ish-shell/id1436902243

このアプリはLinuxエミュレータアプリで、Alpine LinuxをiOS上で動かすことが可能となるアプリで、評価も4.9と高く人気で優秀なアプリです。

起動したところ

ネット上の記事などを調べていると、削除されているとか、apkのインストールが必要など書かれていたりしますが、古い情報なのか直近自分が行った時はデフォルトでAlpine Linuxが使えてapkもインストールされていました。

iSHセットアップ

apk(パッケージマネージャー)がインストールされていなかったらインストールを行いましょう。

apkの更新

apkの更新を行います。

$ apk update
$ apk upgrade
git、vimなど必要そうなものをインストール

apk addコマンドで、必要そうなパッケージをインストールしていきます。

$ apk add zsh vim git openssh

ユーザー作成などは任意で行ってください。

今回は、ユーザー作成など割愛し、最小限の設定を行っていきます。

次にgithubと接続できるようにSSHキーの生成などを行っていきます。

ssh鍵作成

$ ssh-keygen -t rsa

ssh-keygenでssh鍵を生成。

publicキーをauthorized_keysとして書き出します。

こちらは、そのままid_rsa.pubでも大丈夫です。任意で行いましょう。

$ cd ~/.ssh/
$ cat id_rsa.pub >> authorized_keys
$ chmod 600 authorized_keys
$ chmod 700 ~/.ssh
$ rm id_rsa.pub
ssh configを修正

githubに接続できるようにconfigファイルを作成。

$ vim ~/.ssh/config

IdentityFileには、先程生成したssh秘密鍵のファイルのパス指定を行います。

Host github github.com
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git
githubにsshキー登録

pbcopyなどのコマンドを用いて先程生成した秘密鍵の公開鍵をコピーして、githubに登録します。

$ pbcopy < ~/.ssh/authorized_keys

windowsはclipコマンドなどでコピー。

clip < ~/.ssh/authorized_keys
GitHub接続をテスト

公開鍵をgithubに登録したらgithubと接続が行えるかテスト。

$ ssh -T git@github.com

パーミッションエラーが発生するかもしれないので、権限周りはチェックしておきましょう。

秘密鍵のパーミッションは 600となっております。

$ chmod 600 ~/.ssh/id_rsa

githubと接続テストが通ったら、早速cloneできるか試してみます。

それでは、徐ろにatomic packageをcloneしてみます。

$ git clone git@github.com:atomic-package/atomic-package.git
Cloning into 'atomic-package'...
Enter passphrase for key '/root/.ssh/id_rsa':
remote: Enumerating objects: 30, done.
remote: Counting objects: 100% (30/30), done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 5240 (delta 8), reused 28 (delta 7), pack-reused 5210
Receiving objects: 100% (5240/5240), 68.08 MiB | 869.00 KiB/s, done.
Resolving deltas: 100% (3323/3323), done.

はい。成功。

vimをインストールしていますので、ファイル編集してgit pushも行えますね。

Visual Studio Code インストール

vimのままでも良いのですが、せっかくであればVSCodeをインストールして使えるようにしておくと便利ですね。

しかし、デスクトップのインストールしないとVSCodeのGUIは使用できないのですが、サーバー環境にもインストールできる「code-server」をインストールすればデスクトップ環境なくても使用できそうですね。

code-server

https://github.com/cdr/code-server

code-server」はブラウザでvscodeが扱えると言う代物。

iPadでは、Split Viewで2つのアプリを表示できますので、このようにchromeを2つ表示させて、1つはVSCodeを表示させ、一つは編集しているhtmlなどを表示させると効率よく開発できそうな予感。

node jsインストール

なにはともあれ、node.jsをインストールします。

$ apk add --no-cache nodejs

インストールできているかバージョン確認。

[/code]$ node -v
v12.18.4[/code]

オッケー。yarnもインストールしておきます。

$ npm install -g yarn

何度やっても上手くインストールできない。。

取り敢えず先をすすめる。

code-serverのインストール

code-server」に必要なパッケージもインストールしておきます。

$ apk add alpine-sdk libstdc++ libc6-compat npm libx11-dev libxkbfile-dev libsecret-dev python3

npm コマンドで、configの設定と、code-server含めたパッケージのインストール。

$ npm config set unsafe-perm true
$ npm config set python python3
$ npm install -g @google-cloud/logging@4.5.2
$ npm install -g code-server

という事で、npm install -g @google-cloud/logging@4.5.2とか、npm install -g code-server はエラーは出るわでインストールできませんでした。。

yarn install

どうやら、yarnはこちらでインストールできるみたいなのでトライ。

$ curl -o- -L https://yarnpkg.com/install.sh | sh

オッケー。

$ yarn -v
1.22.5

且つ、yarnでtypescript入れれば、code-serverもインストールできるよ。ってイシューに上がっていましたので早速トライ。

$ yarn global add typescript
$ yarn global add code-server

typescriptはインストールできて、code-serverインストール中。

おお。うまくいきそう!!

結果ダメでした。。

これは、流石に無理なのか。。。

後半へ続く。。

 

Comment

Related Article

iPad Air で、Web開発環境構築(iSH Alpine使用)

2021.04.11

M1 (Appleシリコン)Macで Widowsアプリを起動

2021.03.27

iPad Air 2020を購入しちゃった件。

2021.03.14

M1搭載 Mac miniをついにポチった件。Appleさんに翻弄される日々の記録。

2020.12.06

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

2019.12.08

新しくMacを購入した際の環境構築まとめ

2015.09.23

MacBookPro 15インチRetinaディスプレイ(上位モデル)に変えました!

2015.09.20

【保存用】UNIXコマンド まとめ

2015.05.09

iPhotoライブラリ(写真バックアップ)を「box」と「flickr」で管理するようにした件。

2015.03.16

Mac OS X Yosemite 無料アップデートしました!そのまとめ。

2014.10.19

CATEGORY LIST

LATEST NEWS

【M1 Mac】dotnet ef ツールで、MySQLを scaffoldする。

C#

2021.10.17

『2Dスマホゲームにおける圧縮テクスチャ』『膨大になったDBを何とかする』9月30日(木)【オンライン開催イベント】

イベント

2021.09.24

バキバキ画面割れ、バッテリー膨張している iPhoneXを修理した話

iPhone

2021.09.05

Macのデータ復旧を簡単に! EaseUS Data Recovery Wizard for Mac Pro を使用してみた。

tool

2021.08.24

パーティション管理ソフト「MiniTool Partition Wizard」を使ってみた。

tool

2021.08.18

【2021】ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(月)まで。で購入したもの。

Game

2021.08.08

M1 Macで始める「ゼロからのOS自作入門」- 第1章

自作OS

2021.07.24

2021年6月 Amazonプライムデーで購入したもの。(今更)

イベント

2021.06.30

Go言語開発者、Unity開発者必見!! 【Golang】「クソコードをシンプルにする」,【Unity】「Singletonを使わないUnityを用いたApplication開発」

イベント

2021.05.23

TypeScriptでStateMachine

AI・Bot・algorithm

2021.05.16

iPad Air で、Web開発環境構築(iSH Alpine使用)

mac

2021.04.11

【Qt】Mac開発 ソートダイアログ (拡張するダイアログ)を作成

C++

2021.04.01

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US