どうも、まさとらん（@0310lan）です！
今回は、Galaxyスマホをノートパソコンのように利用できる「Dex」を使って、Web開発環境を構築できるのか試してみたのでご紹介します。
主に、Webサービスやアプリなどを活用して環境を整えるわけですが、スマホの画面では難しい作業も「Dex」を利用すれば快適な環境が手に入ります。以前から気になっていた方や、スマホの新しい可能性に興味がある人はぜひ参考にしてみてください！
■「Dex」の使い方
それでは最初に「Dex」の基本的な使い方から見ていきましょう。
まず用意するのは以下の3点です！
- Galaxyスマホ
- 外部ディスプレイ
- USB-C to HDMIケーブル
Galaxyスマホに関しては、Galaxy S8, Galaxy Note8, Galaxy Tab S4以降の端末であれば「Dex」に対応しています。
外部ディスプレイはHDMI端子があれば何でも構いませんが、今回は手持ちの小型モニターを使ってみます。
ちなみに、最新のGalaxy Note 10+を利用している場合は、外部ディスプレイがなくても普通のノートパソコンのモニターを利用することも可能です。
次に、GalaxyスマホのUSB-C端子からHDMI端子を接続するケーブルを用意します。
類似のケーブルはたくさんあるので好きなものを選択しましょう。
他にも、公式のDex-PadやAmazonなどで販売されている「Dex」対応のUSBハブなどでも構いません。
あとは、Bluetooth対応のキーボード・マウスを用意すれば「Dex」はすぐにでも利用可能です。
スマホとディスプレイをケーブル1本で接続するだけなので非常に簡単です。これだけでノートパソコンのようなデスクトップ環境が手に入るわけです。
1つだけ、注意点として日本語入力環境の設定を最初にしておきましょう！
接続中のスマホから設定画面を開いて【言語とキーボード】→【標準キーボード】を選択します。
キーボードを選択できる画面になるので、普段から利用している日本語入力キーボードに設定しておきましょう。（今回はGoogle日本語入力を選択しました）
以前の「Dex」ではGalaxy標準のキーボードしか選択できなかったのですが、最新版は好きな入力環境を選べるようになったので利便性が向上しています。
■ Webサービスを利用して開発環境を構築する
最近はブラウザ上で開発環境を構築できるサービスが増えており、スマホのブラウザからでも問題なく動作するようになっています。
ただし、スマホの画面だとちょっと小さいので作業効率はあまり良くありません。そこで、「Dex」を利用すれば大きな画面でノートパソコンのようにWebサービスを利用できるわけです。
たとえば、JavaScript＆Node.jsの開発環境を構築できるクラウドIDE【 Glitch 】を見てみましょう！
フロントエンドをHTML / CSS / JavaScriptで開発し、バックエンドはNode.jsを利用したサーバ環境を手軽に構築できる無料のクラウドIDEです。ホスティング機能もあるので、そのまま開発したWebアプリやサービスをネット上に公開することも可能です。
GitHubと連携してソースコードをインポート・エクスポートしたり、バージョン管理を自動でやってくれたり、Firebaseと簡単に連携できたり、ターミナルからコマンドの実行もできるので非常に重宝します。
ちなみにJavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。
次に、さまざまなプログラミング言語を利用できる開発環境サービス【 Gitpod 】を見てみましょう！
これはGitHubのリポジトリURLの先頭に「gitpod.io#」を付与するだけで、すぐにソースコードを読み込んでクラウドIDEを起動してくれます。
ソースコードの作成・編集・実行はもちろんのこと、GitHubのコミットやマージ・プルリクエストなどもエディタからできます。毎月100時間は無料で利用可能なので、ちょっとした編集や作業には最適ではないでしょうか。
他にも、IoT分野だと【 obinz 】を利用すれば専用のクラウドIDEを使った開発がすぐに利用できます。
IDEでプログラミングしたコードは、WiFi経由でボードに読み込ませることができるのでコードの編集と実行がブラウザ上で手軽にできるのが大きな特徴でしょう。
また、スマホのブラウザをコントローラーにすることや、HTML / CSSで画面UIを設計してobnizを制御するような使い方も可能です。
obniz以外だと【 micro:bit 】のMakeCodeを利用すれば、同じようにブラウザ上からプログラミングできるのでオススメです。
その他、手軽に開発環境を構築できるクラウドIDEについては以下の記事でも詳しく紹介しているので、ぜひ合わせて参考にしてみてください！
ちなみに、もしWebサービスがスマホのブラウザに対応していない場合でも、Chromeのメニューから【PC版サイト】にチェックを入れると大抵の場合は問題なく動作するようになります。
■ スマホアプリでローカル開発環境を構築する
今度はWebサービスを利用したクラウドIDEではなく、スマホ単体で動作するローカル開発環境について見ていきましょう！
実は、Google Playで提供されているアプリを検索していると、開発環境を構築できるスマホアプリがいろいろ公開されているのが分かります。
その中でも特に使いやすくて自由度の高いアプリが【 Termux 】です。！
Google Playのストアからインストールするだけで、スマホ内にLinux環境を即座に構築できるのが大きな特徴です。root化も不要で面倒な設定は一切ありません。
もちろん一般的なLinuxコマンドが使えるうえに、aptコマンドからパッケージを追加したりGitによるバージョン管理、さらにはVNCサーバの構築まで可能になるスグレモノです。
VimをインストールすればTermux上でプログラミングもできるので大変便利です。
他にも、Node.jsをインストールすればnpmから便利なパッケージやビルドツールなども使うことができます。
インストール方法は好みのやり方で問題ありませんが、pkgコマンドを利用すれば手軽に導入可能です。
Vimをインストール
$ pkg install vim
Node.jsの環境をインストール
$pkg install nodejs
ためしにNode.jsでサーバを作ってHTMLファイルをブラウザに表示してみましょう。サーバを簡単に構築するためにnpmからExpressをインストールします。
$ npm install express
「server.js」ファイルを作ってから以下のように記述します。
const express = require('express'); const app = express(); app.get('/', (request, response) => { response.sendFile(__dirname + '/index.html'); }); app.listen(3000, () => console.log('listening on port 3000'));
上記の例だと「index.html」を3000番ポートでブラウザに表示するという意味になります。
index.htmlの中身は次の通りです。
<doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello termux</title>
</head>
<body>
<h1>Hello Termux</h1>
</body>
</html>単純に「Hello Termux」という文字列を表示するだけのHTMLですね。
あとはTermuxからnodeコマンドを実行すればOKです！
$ node server.js
実行結果は以下の通りです！
このようにTermuxを使えば「Dex」から手軽に利用できるローカル開発環境を構築できるわけです。プログラミングだけならネット通信も不要なので便利でしょう。
他にも、TermuxからGitHubを利用したり、Heroku, Netlify, Firebase…など、さまざまなサービスとも連携できます。活用次第では強力な開発パートナーになってくれるでしょう。
■ 動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
Python×AI・機械学習入門編は、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。進行役として、上坂すみれさんが声を担当するキャラクター「スベトラーナ・小百合・ベレフスカヤ」が登場します。
詳しくはこちら
■ まとめ
今回は、Galaxyスマホをノートパソコンのように扱える「Dex」を利用したWeb開発環境の構築について解説しました。
実は、ご紹介したWebサービスやアプリは「Dex」を使わなくてもスマホ単体で利用可能です。画面は小さくなりますが、ディスプレイが無い状況でもスマホさえあればちょっとした編集ができるので便利です。
また、Web開発以外でもメールやチャット、ドキュメント作成などさまざまな業務を「Dex」から利用できます。この記事も実はDEXから書いており、ノートパソコンを使うのとほとんど変わらずに作業できていることに驚きます。
みなさんも「Dex」に触れる機会があれば、ぜひ試してみてください！
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
