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

Archives Details

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

mac

2021.04.11

この記事は最終更新日から1年以上が経過しています。

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

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

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

iPad Magic Keyboard

created by Rinker
Apple(アップル)
¥47,788 (2024/11/13 14:36:37時点 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

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

2024.10.16

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

2022.12.31

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

CATEGORY LIST

LATEST NEWS

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US