どうも、まさとらん（@0310lan）です。
今回は、簡単なコードでインタラクティブなWebアプリやゲームなどを作れる「オンラインコードエディタ」のご紹介です！
HTMLやCSSを書く必要がなく、さらにJavaScriptを簡単・安全にプログラミングできる「CoffeeScript」で記述できる完全無料のツールです。
【 MagiXJS】
簡単に扱えるように設計されているので、Web開発を勉強している初心者の方や、初めてWebアプリを作ろうと考えている人にもオススメですよ！
■「MagiXJS」とは？
まずは、「MagiXJS」の基本的な使い方も含めて、どのようなサービスなのかを見ていきましょう！
サイトにアクセスして、そのまま下方向へスクロールするか、画面上のアイコンをクリックします。
すると、Webアプリを開発できる専用の「コードエディタ」が表示されます！
左画面でプログラミングを行い、その結果が右画面に表示されるようになっています。
コードは「CoffeeScript」を使ってプログラミングをするようになっており、HTMLやCSSを書かなくてもいいように、さまざまなAPIが提供されているのが特徴です。（ちなみに、普通のJavaScriptも使えます…）
コードエディタに関しては、「シンタックスハイライト」や「コード補完」などの便利な機能が標準搭載されています。
コンソール画面も必要に応じて表示でき、コードはリアルタイム実行されるようになっているので便利です。
さらに、プログラミングしながら効率よくドキュメントを確認できるように、右画面に目的別のリファレンス資料を表示することも可能です！
開発を助けてくれる多彩な機能が提供されているのですが、それぞれの使用方法がコード付きで詳しく解説されているので安心です。
「MagiXJS」は、自分の開発環境で利用できるように「npm」コマンドから簡単にインストールすることも出来ます！
ローカル環境にインストールすれば、コードの保存や公開も自由に出来るようになるので便利でしょう。
また、「npmコマンド」を使ったインストールが面倒であれば、「MHTML」形式などでWebページを丸ごとアーカイブして保存する方法でも良いと思います。
■「写真ギャラリー」アプリを作ってみよう！
「MagiXJS」の概要を把握したところで、実際に簡易的なサンプルデモを作りながら、もう少し詳しくご紹介しようと思います。
今回は、簡単に作れるサンプルとして「写真ギャラリー」を作ってみましょう。
素材となる「写真」については、高品質なフリー画像を無償で提供している「Unsplash」のサービスと連携することで表示していきます。
実際の「動き」としてはこんな感じになります！
マウスを写真に重ねると、カラーを濃くしてサイズアップもする効果を取り入れてみました。
簡単なサンプルですが、HTMLやCSSを使わずにCoffeeScriptだけで構築できる特徴は掴めると思います。
それでは早速プログラミングを始めましょう！
まずは、エディタ内のコードをすべて削除して「空っぽ」の状態にしておきます。
そして、これから作るWebアプリの「ページ」を作るには、このようなコードを書きます。
# 新規ページを1つ作る App.page = new Page # ページの背景色を設定 backgroundColor: '#aabbff' # 縦方向にスクロールできるように設定 scrollVertical: yes
「new Page」でインスタンスを作るのはJavaScriptそのままですが、オプションのカラーやスクロールの設定に関してはCSSのように記述できるので、初心者でも分かりやすいのではないでしょうか。
あと、今回の「写真ギャラリー」はグリッド状に並べるカタチにしていますが、これはHTMLの「ulタグ」のような感覚で使える「List」機能を使っています。
そこで、次に「List」を使えるようにプログラミングしていきましょう！
# リスト要素を作成
myList = new List
y: 100 # リスト全体のY座標を設定
width: 800 # リスト全体の幅を設定
length: 40 # リスト内のアイテム数を設定
horizontal: yes # アイテムを水平方向に並べる
# リスト要素を中央に配置
myList.centerX()
こちらも、先ほど作成した「ページ（Page）」と同じような感覚でプログラミングできるのが分かりますね。
オプションの設定で、リスト内に40個並ぶアイテムを作るようにしたので、あとはどのようなアイテムを配置するかを指定するだけです。
そこで、40個のアイテムを1つずつ指定していくのは大変なので、リストに用意されている「each()」関数を使って一気に設定してみましょう！
# each()関数を使って40個のアイテムを設定
myList.each (item, index) ->
if not item
# アイテムを生成
item = new ListItem
# アイテムの幅・高さを設定
width: 180
height: 180
# アイテム同士の隙間を設定
margin: 10
# 透明度の設定
opacity: 0.8
# 角丸の設定
borderRadius: 10
# アイテムの背景色を白色に設定
backgroundColor: 'white'return item
このように「each()」関数を使うと、「List」のオプションで設定した40個分のループを回してくれるので非常に便利です。
また、これまでと同じく「オプション」の指定はCSSのように記述するだけなので、設定項目をドキュメントで確認しながら簡単にプログラミングできるのが魅力的だと思います。
ここまでのわずかなコードだけで、「写真ギャラリー」の骨組みは完成しているはず！
あとは、ちょっとした「インタラクション」と「写真」の表示ができるようにブラッシュアップしていきましょう！
■最後の仕上げを組み立てよう！
それでは、「Unsplash」のサービスを使って、写真素材を組み込んでいきましょう。
「Unsplash」は無償で高品質な写真をダウンロードできるサービスなのですが、実は「URL」から好きなサイズの写真を利用できる仕組みを提供しています。
http://unsplash.it/【縦サイズ】/【横サイズ】?image=【写真番号】
このような「URL」になっているので、利用したい写真サイズを指定して数字の番号を記述するだけで簡単に写真素材として利用できるわけです。
そこで、今回の写真ギャラリーのアイテムは「180 × 180」のサイズに設定しているので、変数「url」に以下のような感じで記述しましょう。
url = 'http://unsplash.it/180/180?image='
これで「180 × 180」のサイズに最適化された写真素材を取得できるようになります。
あとは、URLの末尾に【写真番号】を指定するだけなので、先ほどアイテムを40個生成するコードを書きましたが、そこへ「image」オプションを追記します。
myList.each (item, index) ->
if not item
item = new ListItem
・
・
・
#「image」オプションに「Unsplash」のURLと写真番号を設定
image: url+index*12
return item
【写真番号】は、普通に「1, 2, 3･･･」と連番でもいいのですが、類似の写真が多いので適当な間隔を空けて数値を入れるために「index」に12を掛けています。
ここまで記述すると、見事に「写真」が表示されてギャラリーっぽくなったと思います！
ついでに、マウスが写真と重なった時の「インタラクション」も作っていきましょう。
「アイテム要素」の中にマウスが入った時は「mouseIn()」で、逆にアイテムの外へマウスが出た時は「mouseOut()」という関数が用意されているので、これを使って組み立ててみましょう！
# マウスがアイテム要素内に入った時
mouseIn: ->
this.opacity = 1 # アイテム要素の透明度を設定
this.scale = 1.1 # アイテム要素のサイズを設定
# マウスがアイテム要素の外に出た時
mouseOut: ->
this.opacity = 0.8
this.scale = 1
このように簡単なコードを記述するだけで、立派な「インタラクション」の完成です！
あとは、アニメーションをスムーズにするために、アイテム要素を生成する箇所へ「transition: yes」と記述しておくとさらにクオリティが上がるでしょう。
今回作成したサンプルデモの全ソースコードは、以下のリンクからチェックできますので、ぜひコピペしてみなさんも試してみてください！
また、今回は紹介できていませんが、「MagiXJS」を使うと「音声認識」「ストレージ」「レスポンシブ対応」「マルチスレッド」「Web通知」「ルーティング」などの機能を組み込んだWebアプリも簡単に構築できるようになっていますよ！
サービスの概要をサクッと理解できる公式動画も公開されているので、合わせて掲載しておきます！
■JavaScript講座も公開中！動画でプログラミングが学べるレッスン
paizaは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を、新サービスとして独立オープンいたしました。
特に今回記事の中で使用しているJavaScriptの講座も好評公開中です。ぜひごらんください！
■まとめ
今回は、JavaScript（CoffeeScript）だけでWebアプリを構築できるサービスを駆け足でご紹介しましたが、ドキュメントを見ると分かるようにとても多彩な機能を簡単に扱えるように工夫されているのが特徴的です。
最初は少し戸惑うかもしれませんが、リファレンスがしっかり作られているので、1時間くらい触っているだけですぐにユニークなWebアプリを作れるようになるでしょう。
ぜひ、みなさんも「MagiXJS」を使ってオリジナルのプロジェクトを開発してみてはいかがでしょうか。
＜参考＞
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいという方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
paiza.jp
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
