paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開!

f:id:paiza:20170312211945j:plain
どうも、まさとらん(@0310lan)です。

今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です!

バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。

Gomix

f:id:paiza:20170312212054j:plain
以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。

■基本的な使い方!

それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう!

まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコードエディタが起動して表示されます。
f:id:paiza:20170312212130j:plain
(初回のみ「コミュニティページ」に飛びます…)


Gomix」は、「登録」などをせずにそのままでも利用可能です。

ただし、無料のユーザー登録をしておけば「プロジェクトの保存」や「書き出し」などができて便利なので、サクッと済ませておきましょう!


登録は簡単で、「Facebook」か「Github」を連携するだけで完了します。
f:id:paiza:20170312212209j:plain
オススメは「Github」との連携です。

後述しますが、「Gomix」で作ったプロジェクトをそのままGithubのリポジトリに書き出すことも可能です。(インポートも可)


また、ユーザー登録をすることでエディタの「テーマカラー(黒色)」も変更できます。
f:id:paiza:20170312212218j:plain


画面左上の「プロジェクト名」をクリックすると表示されるオプションから、さまざまな設定もできます!
f:id:paiza:20170312212228j:plain
「プロジェクト名」は好きな名称に変更でき、概要も合わせて記述できます。(プロジェクト名は、公開用のURLとしても利用されます)

また、複数のプロジェクトを保存して一覧を確認したり、新規プロジェクトを作成することも出来ます。


下段にある「Advanced Options」をクリックすると、さらに詳細なオプションが表示されます!
f:id:paiza:20170312212249j:plain
プロジェクトは初期状態だと「公開状態」になっているので、これを「①非公開」にしたり、自分のGitHubアカウントを使ってプロジェクトを「②インポート/エクスポート」することも可能です。

もちろんプロジェクト自体をパソコンに「③ダウンロード」することもできます。


ちなみに、GitHubへエクスポートする場合は…
【ユーザー名】/【リポジトリ名】
をフォームに入力して送信するようにします。


例えば、ユーザー名が「webhacck」で、リポジトリ名が「mysample」だとしたら、「webhacck/mysample」となります!
f:id:paiza:20170312212327j:plain
また、新規リポジトリの場合、1回以上のコミットが無いとうまく実行できないので、最初に「README.md」などを作ってから行うと良いでしょう。


さらに、「①share」ボタンをクリックして表示される「②URL」をシェアするだけで、複数人とコラボしながらプログラミングすることも可能!
f:id:paiza:20170312212334j:plain
ペアプログラミングなどにも有効活用できそうですね。


プロジェクトは、「Show」ボタンをクリックすることで、いつでも画面の状態を確認することが出来ます。
f:id:paiza:20170312212342j:plain
初期状態で「リアルタイムコーディング」が有効になっているので、コードをいじると画面の状態も随時反映されるようになっているので便利です。

■「Gomix」のプログラミングについて!

基本的な使い方を学んだところで、今度はプログラミングの方法について見ていきましょう!

簡単なサンプルデモとして、サーバーから画像リストを取得して表示するWebページを作りたいと思います。
f:id:paiza:20170312212359j:plain


まず最初に、「Gomix」は類似のエディタと違って、ファイル構造が「①バックエンド」と「②フロントエンド」の2種類に分かれていることを把握しておきましょう。
f:id:paiza:20170312212421j:plain
「バックエンド」のプログラミングとして、すでにNode.jsやexpressなどがインストールされているのが分かります。


また、「package.json」のファイルを選択して表示される「Add package」から、自分で好きなNode.js用パッケージを検索して追加することも簡単に出来ます!
f:id:paiza:20170312212448j:plain
もしパッケージの新バージョンがリリースされていれば、それも合わせて通知してくれるので便利です。

あとは、フレームワークの「express」を使って、どんどんサーバーサイドのプログラミングを書いていきましょう。


基本となる最小限のコードはこんな感じになるでしょう!

var express = require('express');
var app = express();




// publicフォルダを静的コンテンツとして利用
app.use(express.static('public'));




// トップページを「views」フォルダ内のindex.htmlに設定
app.get("/", function (request, response) {
    response.sendFile(__dirname + '/views/index.html');
});




// 「process.env.PORT」で[https://gomix.com:title=Gomix]のポート番号を取得して待ち受け
var listener = app.listen(process.env.PORT, function () {
    console.log('ポート番号 ' + listener.address().port + '番で待ち受け中…');
});

Gomix」のデフォルト状態だと、フロントエンドの静的コンテンツは「public」フォルダに収められているので、最初に「express.static(‘public’)」と指定しておきます。

「index.html」は「views」フォルダに収められているので、これをトップページとして表示する設定も行っておきましょう。


また、「Gomix」のポート番号はあらかじめ「process.env.PORT」という環境変数で取得できるようになっているのですが、他にも認証に必要な「APIキー」や「IDコード」などを外部に公開しないための「SECRET変数」も用意されています。
f:id:paiza:20170312212531j:plain
「.env」ファイルに好きな変数名で記述可能で、この内容は自分しか見れないようになっているわけですが、プログラムからアクセスするには「process.env.SECRET」のように書けばOKです!

これにより、さまざまなWeb APIと連携したサービスを開発したり、Firebaseのようなバックエンドサービスと連携してWebアプリを作っていくのも面白いでしょう。


さて、サーバー側に「画像データ」を保持する必要があるのですが、今回は簡単な配列を作って準備します。

// 画像のリストを返す
app.get("/imglist", function (request, response) {
  response.send(imgList);
});


// 画像URLリスト
var imgList = [
  'sample1.jpg',
  'sample2.jpg',
  'sample3.jpg',
        ・
        ・
        ・
]


画像ファイルなどは、「assets」フォルダにドラッグ&ドロップで保存することが可能です。
f:id:paiza:20170312212613j:plain
他にも、動画や音楽などWebページに必要なリソースはコチラに保存しておくと良いでしょう。


ここまで来たら、あとはフロントエンドのJavaScriptからサーバーの「画像リスト」を取得してWebに表示するだけです!

  // 「/imglist」にアクセスして画像リストを取得
  $.get('/imglist', function(imglist) {
    
    // 画像リストを参照して、すべての画像を表示する
    imglist.forEach(function(img) {


        $('<div class="column is-one-quarter"><img src="'+ img +'"></div>')
        .appendTo('#imgbox');


    });
    
  });


サンプルデモはコチラから確認できます!
【サンプルデモのリンク】

また、ソースコードは公開用の「Gomixエディタ」から閲覧可能です!
【サンプルデモのGomixエディタ】


今回のサンプルデモは、画像を表示するだけなのでフロントエンドだけでも同じモノが作れますが、「Gomix」の練習用としては最適かと思います。

また、今回作ったようなexpressでのミニコードを使って、バックエンドはそのままにしておいて「フロントエンド」だけをプログラミングするためのエディタとして活用しても良いでしょう。

■「Gomixコミュニティ」とは?

最後に、「コミュニティページ」について解説しておきたいと思います。


Gomix」はオンラインエディタなので、ブラウザからアクセスすればエディタが起動し、すぐにでもプログラミングを始められます。

しかし、類似サービスと違って「コミュニティ」がしっかりと作られているのが特徴で、ユーザーにとって有益な情報が簡単に得られるようになっているため、「Gomix」ってどんなサービスだろう?という時に初めて見るページとしては最適です!

【 Gomixコミュニティページ】
f:id:paiza:20170312212730j:plain
「コミュニティページ」では、プログラミングの学習で利用できる豊富なチュートリアルや、「Gomix」を使った開発事例としてさまざまな「サンプルデモ」が公開されています。


Webアプリの開発事例だけでなく、「フレームワークの基本」を学んだり「ゲーム」や「IoT」などの事例もたくさん用意されています。
f:id:paiza:20170312212740j:plain


気になった事例のプロジェクトをクリックすると、プレビューも確認できます!
f:id:paiza:20170312212751j:plain
「Show」ボタンをクリックすると、実際にWebアプリをブラウザで体験できるようになっているほか、「Gomix」を起動して実際のソースコードを閲覧することも可能です。

さらに、「Remix」ボタンをクリックすることで、自分のプロジェクトとしてカスタマイズすることもできるので便利です。


このような「コミュニティページ」があるおかげで、「Gomix」を初めて利用する人もすぐにプログラミングを楽しめるようになっており、学習教材も豊富にあるのでこれから勉強しようという人にも大きな魅力となっています。

■まとめ

今回ご紹介した「Gomix」さえあれば、ReactやAngular2をはじめとするフレームワークを活用したWebアプリから、ゲーム、IoT、チャットボット…など、非常に多彩なプロジェクトを今すぐ開発することが可能になります。

また、使っていて分からない点があれば公式の「サポートフォーラム」を使って、活発な意見交換も行われているので安心です。

とにかく、無料でココまでいじれるエディタは珍しいので、ぜひみなさんも積極的にチャレンジしてみてください!

■JavaScript・HTML/CSS講座も好評公開中「paizaラーニング

paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.