paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ

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

今回は、ブラウザだけで本格的なWebアプリの開発から、ゲーム、IoTまで幅広くトライできる無料のWebサービスを厳選してみました!

それぞれの用途に特化したWebエディタをピックアップし、その特徴や機能などを解説しているのでご興味ある方はぜひ参考にしてみてください!

■React & Angular開発に特化したWebエディタ「StackBlitz」!

StackBlitz

f:id:paiza:20170823150427j:plain
JavaScript開発でのフレームワークと言えば「React」「Angular」が有名ですが、いざ開発を始めようとするとサーバーの準備や関連パッケージの導入など…環境の構築が面倒だったりします。


ところが、この「StackBlitz」はクリック1発で「React」「Angular」の開発環境が整った状態のWebエディタが即座に起動します!
f:id:paiza:20170823150440j:plain
コードエディタとしても優秀で、コード補完はもちろんのこと「Ctrl + P」で起動するプロジェクト検索機能や、自動でリロードしてくれる「ライブプレビュー」など、便利な機能が多数搭載されています。

Progressive Web AppのAPIを使用していることで、ネット回線が無いオフラインの状態でもプログラムの作成や実行が出来るように設計されているのも魅力でしょう。


npmパッケージの導入も簡単で、左メニューから必要なパッケージ名とバージョンを指定するだけでOK!

例えば、reduxを導入したければ「redux@3.7.2」のように入力して「エンターキー」を叩くだけで、導入作業をすべて自動的に処理してくれます!
f:id:paiza:20170823150455j:plain
また、CDN経由のJS / CSSファイルの追加や、新規にファイルやフォルダを作成して開発していくことも自由に行えます。

もちろん、PCに保存されているファイルなども、ドラッグ&ドロップで素早く取り込んで作業を進めることが可能!


共有機能も優れており、作成したプロジェクトを無料でホスティングしてくれるので、URLだけでプロジェクトの公開や共同作業などがおこなえます。
f:id:paiza:20170823150510j:plain
「埋め込みタグ」も生成してくれるので、「React」「Angular」プロジェクトを自分のブログやサイトへ気軽に貼り付けて公開することも可能です。

すべてのプロジェクトファイルは「Zipファイル」としてダウンロードすることができるのですが、GitHubアカウントでログインすればクラウド上に複数のプロジェクトを保存することもできます。

ちなみに、「React」だけに特化したWebエディタ「CodeSandbox」もすぐに開発を始められるサービスなので、ご興味ある方は参考にしてみてください。


<参考>

■「3Dゲーム開発」に特化したWebエディタ「nunuStudio」!

nunuStudio

f:id:paiza:20170823150633j:plain
3Dゲーム開発と言えば「Unity」が人気ですが、よく似た操作感でブラウザ上からすぐに開発できるのが「nunuStudio」です!

Web GL, Web Audio, Web VRなどの既存技術を組み合わせ、さらに3D描画はThree.jsを使い物理エンジンはCannon.jsのライブラリを使うなど、さまざまなオープンソースを融合して1つの統合エディタにしているのが特徴です。


開発エディタはとても軽快に動作し、3Dオブジェクトの構築やライティング、オーディオ、カメラワーク、パーティクルエンジンなど…多彩な機能を簡単に使えます。
f:id:paiza:20170823150648j:plain
また、スプライトを使った2Dゲームの開発も可能なうえ、Leap Motion, Kinectに対応したVRアプリを作成することもできます。

完成した作品は、クリック1発でWebファイルに書き出す機能が搭載されていたり、既存の3Dモデルをインポートしたり逆にSTL, OBJファイルなどに出力することも可能です!


そして、ゲームロジックをJavaScriptでプログラミングできるコードエディタも搭載されています。
f:id:paiza:20170823150701j:plain
ゲーム開発に便利なAPIが数多く提供されており、コード補完の効くエディタで軽快に開発作業を進めることができます。


具体的なサンプル例の作り方などは、コチラの記事で解説しているのでぜひ参考にしてみてください。

2017年8月時点でまだベータ版ですが、かなり速いペースで開発が進んでおり新しい機能もどんどん追加されているので、ご興味ある方は要チェックです!


<参考>

■「IoT開発」に特化した「micro:bit エディタ」!

micro:bit エディタ
f:id:paiza:20170823150832j:plain
最近、少しずつ人気が高まっている極小ボード「micro:bit」のプログラムを作成できるWebエディタがコチラ!

とても優秀なエディタで、「micro:bit」本体を持っていなくても画面上に再現したエミュレータが正確に動作するので、このエディタだけでIoTプログラミングが楽しめるのが特徴です。


画面上部のタブを切り替えるだけで、ブロックエディタからJavaScriptへと即座に変換されます!
f:id:paiza:20170823150915j:plain
詳しいマニュアルも搭載されていますが、まず最初にScratch風の分かりやすいブロックでロジックを組み立てて、その後にJavaScriptへ切り替えれば仕組みが分かるので便利です。

「micro:bit」には、ディスプレイ代わりになる5×5に配置されたLEDで文字情報を表示したり、加速度センサーや電子コンパスなどを使ったプログラミングも楽しめるのが魅力でしょう。


また、初めてエディタに触れる人でも、丁寧なチュートリアル機能が搭載されているので指示通りに作業を進めていけば簡単なプログラムを実行できるので便利です。
f:id:paiza:20170823150930j:plain
実際に「micro:bit」を持っている方であれば、このままプログラムをダウンロードして転送することも可能。

さらに、エディタをそのままブログやサイトに埋め込める「タグ」を生成することも可能で、友人・知人と気軽に共有できるのも特徴といえるでしょう。


<参考>

■全部入りの統合Webエディタ「Glitch」!

Glitch

f:id:paiza:20170823151133j:plain
バックエンドを「Node.js」で開発し、フロントエンドを「HTML / CSS / JavaScript」でプログラミングできるように設計されたWebエディタが「Glitch」です!

サーバー側のプログラミングも可能なのが特徴で、例えばexpressなどのフレームワークを使ったWebアプリ開発も気軽に取りかかれます。(React / Angularなどの開発もOK)


「package.json」ファイルを開いて、必要なパッケージ名を入力して表示される候補をクリックするだけで自動インストールできる機能もあります。
f:id:paiza:20170823151154j:plain
GitHubアカウントで登録すれば、テーマカラーの変更や複数のプロジェクトを保存できたり、任意のリポジトリへコードをエクスポートすることも可能です。


さらに、コンソール画面も利用可能なので、CLIによるコマンド操作に対応できるのは便利です。
f:id:paiza:20170823151208j:plain
作成したプロジェクトは、クリック1つでそのままWebに公開することも可能です。

また、リンクを共有することで複数人とコラボ連携したり、秘密にしたいデータの隠密化やSECRET変数による認証コードなどの非公開など、機能面でも充実しています。


実際に「Glitch」を使ったサンプルデモの作成例をコチラの記事で解説しているので参考にしてみてください。
※リンク先で扱っている「Gomix」は「Glitch」の旧名称・旧バージョンです。

お金をかけずに本格的なWebアプリ開発に挑戦したい人にオススメのエディタですが、プログラミングの練習用としても実用的なのでぜひみなさんもトライしてみてください!


<参考>

JavaScript講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめとして、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また、現在paizaラーニングではRubyRailsの有料講座を期間限定で無料公開しているので、興味のある方はぜひごらんください。
無料公開の期間など、詳しくはこちら↓
paiza.hatenablog.com

■まとめ

今回ご紹介したWebエディタは、すべての機能を無料で利用できるものばかりなので、気になったモノがあれば気軽にトライしてみることをオススメします。

また、バージョンアップにより本格的なWeb開発にも対応した「CodePen Projects」や、スマホアプリの開発に最適な国産サービス「Monaca」なども活用してみると良いでしょう。

ぜひみなさんも、これらのサービスを使ってオリジナルのWebアプリやゲーム開発に挑戦してみてください!





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているHTML/CSSのレッスンを期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

Raspberry Pi Zero WとカメラモジュールをPythonで動かして撮影してみた

f:id:paiza:20170823110306j:plain
秋山です。

Raspberry Pi Zero W」が日本でも手に入るようになりましたね!(まだまだ品薄で、出荷即完売みたいな状況ではありますが…)
www.switch-science.com

私も運よく購入できたので、いろいろ遊んだりしています。

とりあえず実物を見た第一印象は、すごく小さい!その辺にあった消しゴムと並べてみました。
f:id:paiza:20170823110252j:plain
キーホルダーにして持ち歩きたくなるぐらいのかわいいサイズ感です。

このサイズでWi-Fi、Bluetoothが搭載されていて、値段が千円ちょっとってすごいですよね。

今回は、Pythonでコードを書いて、このRaspberry Pi Zero Wを使ったタイムラプスムービー的なものを作ってみたので、その手順を書いていきたいと思います。

Raspberry Pi Zero Wに神宮外苑花火大会を撮影してもらいたい

Raspberry Pi Zero Wに撮影してもらうための準備

先日、8月20日の日曜日に神宮外苑花火大会が開催されました。

見に行った方もいるかもしれませんが、弊社オフィスは会場と近く、窓から花火が見えます。

そこで、今年の花火大会はRaspberry Pi Zero Wに花火を見てもらって、撮影しておいてもらうことにしました。

最初は、リモートで家から画像を見ながらサーボモータなりで操作して、花火をいい感じの角度で見れたら……みたいなことを考えていましたが、ちょっとセキュリティ的に難しそうなので、Raspberry Pi Zero Wは社内Wi-Fiにゲストで接続し、ntpd で時間調整だけをしてもらうことにしました。(なので、Wi-Fiの利点はあまり活かせていません…)


今回は、Python3、picamera、 Pillowがインストールされた環境が必要になります。
picamera — Picamera 1.13 Documentation
Pillow — Pillow (PIL Fork) 4.2.1 documentation

また、カメラモジュールの設定も必要です。詳しくは↓このあたりを参照してください。
www.raspberrypi.org

カメラモジュールは、こちら↓を使用しました。
www.switch-science.com
このモジュールは、Raspberry Pi Zero系列に繋がるケーブルが付属しているわけではないので、ケースとケーブルがセットになったこちら↓を使いました。
www.switch-science.com

そしてフォントはこちら↓を使っています。
fonts.google.com


今回は、0.333秒ごとにカメラで外を撮影し、連番で保存していってもらうことにします。

main.pyとして保存した下記Pythonファイルを指定時刻に実行して(撮影してもらう時間は 3*60*60*3 * 0.333秒で、約3時間としました)、ついでにエンコードも走らせます。

from time import sleep
import picamera
from PIL import Image, ImageDraw, ImageFont
import datetime

camera = picamera.PiCamera()

for i in range(3*60*60*3):
    sleep(0.333)
    file_name = "{0:08}.jpg".format(i)
    camera.capture("/home/pi/camera/img/"+file_name)
    font = ImageFont.truetype('/home/pi/camera/OpenSans-Light.ttf', 12)
    img = Image.open("/home/pi/camera/img/" + file_name, 'r')
    draw = ImageDraw.Draw(img)
    draw.text((10, 10),str(datetime.datetime.now()),font=font , fill='#F00')
    img.save("/home/pi/camera/img/" + file_name)
    print(file_name)


とりあえず今回は、atコマンドで指定時間にコマンドを実行することにします。atコマンドはデフォルトで入っていないのと、エンコードにはavconvを使いたいので、libav-toolsをインストールします。(avconvはlibav-toolsに入っています)

sudo apt-get install at libav-tools

これ、インストールするのに結構時間がかかりました。(Raspberry Pi Zeroはシングルコアなのと、このとき使ったmicroSDカードがその辺にあったclass4だったので、その辺が原因なのかも…)


あとは、前述のPythonコードと、エンコードのオプションなどを適当に整えたコマンドを boot.sh として

python3 /home/pi/camera/main.py
avconv -framerate 60 -i /home/pi/camera/img/%08d.jpg -vcodec libx264 -pix_fmt yuv420p -r 60 /home/pi/camera/out.mp4

と記述しておきます。main.pyを実行し、その後avconvでjpgファイルからmp4ファイルを作る…という流れになっています。


上記のboot.shファイルを指定時刻に動かすコマンドを入力したら、あとは放置でOKです。

ただ、自分のデスクは窓から遠いので撮影に適した場所じゃないし、いちいち電源を入れてSSHしてatコマンドで指定時間に起動予約をする…というのも面倒なので、電源が入ったら勝手にatコマンドが実行されるように、 /etc/rc.local にコマンドを書いておくことにしました。

sudo vim /etc/rc.local で

at "09:00 20.08.17" -f /home/pi/camera/boot.sh

を exit 0 の手前に記述しておけばOKです。

あとは電源が入ったときに、勝手にatコマンドが実行されて、UTCで8月20日の9時、要するにJST(UTC+9)で日本時間の18時からスクリプトが起動するようになっています。

これで8月18日金曜日の夜にカメラモジュールをオフィスの窓際に設置して、帰宅しました。

◆撮影できたかな

8月21日月曜日に出社して、さっそく見てみました。わくわく+(0゚・∀・) +


Raspberry pi zeroによるタイムラプスムービー 2017/08/20 18:30〜20:29


Σ(´Д`;) う~ん……

カメラを窓の花火が見えそうな位置にテープで貼りつけておいたんですけど、テープがとれてずり落ちていたようで、花火を見にきた人たちの流れが見えるだけの動画になってしまいました。(↑YouTubeにあげてみました)

たま~に花火っぽい光が映るときもありますが……残念な動画になってしまいました。

■まとめ

というわけでRaspberry Pi Zero Wとカメラモジュールを使って遊んでみました。

花火はうまく撮れなかったけど、撮影自体は問題なくできるようなので、使い方によってはいろいろおもしろい動画が撮れるかも?

ほかにもRaspberry Pi Zero Wで何か遊べそうなことがあったら実験してみたいと思います。


「プログラミング初心者なのでラズパイとかわかんない」「Pythonの基礎的な書き方から勉強したい」という方は、プログラミングが動画で学べる「paizaラーニングPython入門編から始めてみると、無理なく基礎を習得できると思います。
paiza.jp

また、現在paizaラーニングではRubyRailsの有料講座を期間限定で無料公開しているので、興味のある方はごらんください。詳しくはこちら↓(無料公開スケジュールとかが載ってます)
paiza.hatenablog.com




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

自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
paiza.jp
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

初心者向け・Rubyの練習問題をたくさん解ける学習サイトと本7選

f:id:paiza:20170822133236j:plain
Photo by Joren De Groof
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

プログラミングをこれから学習しようとしている方や新人エンジニアの中には「Rubyについて学びたい!」という方も多いと思います。

Rubyオープンソースの動的なプログラミング言語で、プログラミング初心者でも比較的読み書きしやすく、学びやすいプログラミング言語です。クックパッドやグノシーなど有名サービスの開発にも利用されており、世界中のWebサービス開発企業に広く普及しています。

paizaにも「もっとRubyの勉強がしたい」「Rubyでいろいろな問題が解きたい」といった声が多く寄せられていますので、今回はRubyの練習問題がたくさん解けるサイトと書籍を7件ご紹介します。


【目次】

Ruby言語の問題がたくさん解ける学習コンテンツ

Rubyがミニツク

f:id:paiza:20150210120426p:plain
Rubyがミニツクは、ネットワーク応用通信研究所(NaCl)が運営する、Rubyの学習サービスです。入門から演習、Ruby技術者認定試験コースまで、理解度に合わせてたくさんのコースがあります。Rubyの生みの親であるまつもとゆきひろさんが出演して解説してくれる動画もあります。ドリルや演習問題もかなり充実しています。

プログラミングスレまとめ in VIP 練習問題

f:id:paiza:20170822125312p:plain
プログラミングスレまとめ内にある練習問題集です。基礎的な問題から始められて、問題数も結構多くて勉強になります。Rubyだけでなく、他の言語で解いた際の解答も見ることができます。

Ruby初心者にオススメ。Array・Hashの練習問題

f:id:paiza:20170822125401p:plain
株式会社アトラシエのブログ記事です。プログラミング初心者がRubyの学習をするときにつまずきやすいArrayとHashを使う問題が掲載されています。配列の使い方がいまいち理解できない方、配列や連想配列に関する問題が解きたい方におすすめです。

Ruby技術者認定試験模擬問題

f:id:paiza:20170822130436p:plain
Ruby技術者認定試験制度は、Rubyアソシエーションが主催しているRubyを使ったシステム開発能力の認定試験です。

資格取得に興味がない人でも問題を解くこと自体はRubyの勉強になりますし、模擬問題は無料で公開されているので気軽に挑戦できます。レベルはシルバーとゴールドがあります。

◆作りながら学ぶRuby

作りながら学ぶRuby入門 第2版

作りながら学ぶRuby入門 第2版

問題とは少し違うかもしれませんが、手を動かして実際にWebアプリを作りながら、Rubyを学んでいける書籍です。初心者でも動くものを作れるので、「勉強してちょっとはコードが書けるようになってきたから、動くものを作ってみたい!」「実際にシステムを作り上げる実践的な勉強がしたい!」という方におすすめです。電子書籍にもなっています。

paizaラーニング


オンラインでプログラミング学習ができる「paizaラーニング」には、RubyはもちろんJavaPythonPHPC言語JavaScript、HTML/CSSSQLなどなど多数の言語から、Webアプリ開発入門、ITエンジニアのキャリア入門などのレッスンもございます。

ただいま、期間限定で「Ruby入門編」「Webアプリ開発入門 Rails編」のレッスンを連続無料公開しておりますのでぜひごらんください!
無料公開される講座と無料期間のスケジュールはこちら

コードガールこれくしょん


paizaが公開しているコードガールこれくしょん略してガルこれは、ナビゲーターと一緒にプログラミング問題を解き、「コードガール」を集めながらストーリーを進めていく、プログラミング学習ゲームコンテンツです。RubyはもちろんPHPJava、Pyhton、C、C++C#JavaScriptに対応しています。

ゲーム内ではクエスト報酬やログインボーナス・ミッションクリア等の各種特典として手に入る「コイン」や「ダイヤ」を使って、ガチャでさまざまな「コードガール」を収集することができます。クエストで有利になる特殊スキルを発動させたり、「これくしょん」に入れてマイページに飾ったりと、コードガールをたくさん集めるほど楽しみ方が広がります。

■まとめ

Rubyは、動くものが比較的簡単に作れて、学習もしやすい言語です。初心者の方でも、学習サービスをうまく使ってRubyの基礎スキルを身につけていくことは充分可能です。ご興味のある方は、ぜひいろいろ試してみてください。

なお、プログラミングが動画で学べる「paizaラーニング」では、ふだん有料公開しているRubyRailsのレッスンを、毎週期間限定で連続無料公開いたします! Webアプリを作るスキルが身につく人気レッスンが今だけ無料です!

さらに、9月29日(金)までに演習問題の結果をツイートすると、抽選でAmazonギフト券1万円分が1名様、500円分が20名様に当たるキャンペーンも実施しております。

無料で受講できるだけでなく、プレゼントまでもらえちゃうかも? この機会にぜひRubyRailsを学んでみてください!


※スケジュールは変更になることがあります。

無料公開スケジュール・Ruby


動画レッスン名無料期間
Ruby入門1・2いつでも無料
Ruby入門38/22(火)~8/24(木)まで無料
Ruby入門48/25(金)~8/28(月)まで無料
Ruby入門58/29(火)~8/31(木)まで無料
Ruby入門69/1(金)~9/4(月)まで無料
Ruby入門79/5(火)~9/7(木)まで無料
Ruby入門89/8(金)~9/11(月)まで無料
Ruby入門99/12(火)~9/14(木)まで無料

無料公開スケジュール・Rails


動画レッスン名無料期間
Rails入門1いつでも無料
Rails入門1-29/15(金)~9/18(月)まで無料
Rails入門1-39/19(火)~9/21(木)まで無料
Rails入門29/22(金)~9/25(月)まで無料
Rails入門39/26(火)~9/29(金)まで無料

■プログラミングが動画で学べるレッスン「paizaラーニング


paizaラーニング」は、プログラミング未経験者・初心者向け学習サービスです。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編