Parcelでお気軽にビルドしたい
Parcelでお気軽にビルドしたい
宣伝
皆様，おはこんばんちは．またしても一年ぶり（であってます？）のエントリです．ブログの方は最早アドベントカレンダー専用と化していますが，中の人，みっきぃはまあまあ元気です．この記事は「拓殖大学ディジタルコンテンツ研究愛好会 Advent Calender 2018」の8日目の記事です．
adventar.orgよろしければ他の記事もご覧になってください．
Parcelでお気軽Web開発をしたい
今回の記事では，Parcelというパッケージの導入から簡単な使い方をふんわりと紹介していきます．
Parcelはバンドラーと呼ばれるものの一つです．バンドラーの主たるお仕事は，複数のファイルに分かれたソースコードを一つに結合することです．主にWebプヨグヤミングの世界で用いられています．（他にどこかで使われてるんですかね？）例えば，複数のJavaScriptファイルを一つのファイルにしてしおまう，といった作業を自動でやっつけてくれるのがバンドラーです．*1
また，Parcelは便利なもので，コンパイルが必要なソースコード（PugやSass，TypeScript等）を検知すると，自動でそれらをコンパイルしてからファイルの結合をやってくれます．つまり，ビルドツールとしての機能も備えているわけです．すごいですね！
前置きが若干長くなりましたが，今回はParcelをインストールし，複数ファイルからなるWebコンテンツをビルドし，結果を表示して確認してみたいと思います．
動作確認環境
記事を書くにあたって，動作確認を行った環境は以下の通りです．
- OS: Linux Mint 18.3 (Cinnamon 64-bit)
- Node.js： 10.14.1
- npm: 6.4.1
- ブラウザ: Firefox 61.0.1 64-bit
Parcelのインストール
早速インストールの方からやっていきましょう！ の，前に，Parcelはnpmを介してインストールされ，Node.js上で動作します．Node.jsとnpmをインストールしていない方は先にそちらをインストールしましょう．
nodejs.org Node.jsとnpmがインストールできた上で，ターミナル*2上で以下のコマンドを実行します．
$ npm i -g parcel-bundler
Parcelは結構大きなパッケージであるため，インストールにはそれなりに時間がかかります．お茶でも飲みながら気長に待ちましょう．インストールが完了したら，以下のコマンドで確認しましょう．
$ parcel --version
無事にインストールが完了していれば，バージョンの値が表示されるかと思います．
コンテンツを作成してビルドする
Parcelのインストールが無事に済んだら，次はコンテンツを作成していきます．今回はParcelの自動コンパイル機能を試してみるために，以下の構成で作成します．
- ドキュメント：HTMLの代わりにPug
- スタイルシート：CSSの代わりにScss
- スクリプト：JavaScriptの代わりにTypeScript
（うーん，これはモダン！ｗ）
まずは，これらのコンテンツを作成するための作業フォルダを適当な場所に作成しましょう．今回は，例として「parcel-bundle-test」というフォルダ作成し，そこを作業フォルダとして用います．
次いで，上で作成した作業フォルダをターミナル上で開き，そこでnpm initを行います．
$ npm init
今回はこの時点で特に凝った設定をする必要もないので，Enterキー連打で初期値で埋めてしまっても問題ありません．
次に，作業フォルダ内に，ソースファイルを保存するためのフォルダを作成します．
$ mkdir src
今回はこのフォルダを「src」という名前で扱っていきます．
ここまで準備ができたら，いよいよコンテンツの作成を始めます．srcフォルダ内に以下の4つのファイルを作成します．
・ index.pug
・ master.scss
・ main.ts
・ greeter.ts
ソースファイルの記述に当たってですが，私はVisual Studio Codeを用いて作成しています．上記のファイルの形式（.pug, .scss, .ts）はいずれもハイライティングと構文チェックが行われるため，快適に書くことができます．
コーディングが完了したら，いよいよこれらのファイルを元にWebコンテンツをビルドしていきます！ ターミナルから以下のコマンドを実行しましょう．
$ parcel src/index.pug
これだけです！ たったこれだけでParcelは「ソースコードのコンパイル，バンドル，サーバの起動」というビルド作業の全てを実行してくれます．簡単過ぎて拍子抜けしてしまいそうですね．尚，上記のコマンドは初回実行時に，コンパイルなどに必要な他のパッケージを自動でインストールする関係で，実行時間は長くなります．以下の説明を流し読みでもしながら待ちましょう．
Parcelの基本的な使い方としては，「parcel バンドル対象のファイル」となります．今回はファイルの関係は以下のようになっています．
Parcelはまず，バンドル対象のファイルの形式を確認し，コンパイルが必要な場合はコンパイルが実行されます．続いて，バンドル対象のファイルが参照している他のファイルをたどり，参照先のファイルを新たなバンドル対象とします．これをバンドル対象が見つからなくなるまで実行します．
ざっくり簡単に言ってしまえば，「最初にバンドル対象に渡されたファイルが関係してるものを全部勝手にバンドルしてくれる」わけです．素敵ですね．
さて，無事にビルド作業が完了すれば，以下のようなメッセージが表示されるかと思います．
サーバが起動している旨と，ビルドに要した時間が表示されていますね．表示されているurlをブラウザで開いでみましょう．ソースコードに誤りがなく，無事にビルドが完了していれば以下のようにコンテンツが表示されるはずです．
今回TypeScriptで記述した内容は，ブラウザのコンソールに反映されているはずです．*4
ここで，サーバを立ち上げた状態のまま，ソースコードを少し編集してみましょう．index.pugに以下のような変更を加えます．
・ index.pug
変更を加え，上書き保存ができたら，先ほど開いたページを再読み込みしてみましょう．コンテンツに変更が反映されているはずです．
Parcelはサーバが起動している間，ビルド対象のファイルの状態を監視し，変更を検知すると自動で再ビルドしてくれます．尚，サーバを終了するには，ターミナル上で「Ctrl+C」で大丈夫です．
ね？ 簡単でしょう？
ビルドをもっと簡単にする
さて，ここまででParcelを用いてコンテンツのビルドができるようになりました．しかし，コンテンツをビルドするたびに，「parcel ~」のコマンドを打つのはそれなりに面倒です．そこで，この過程をもっと簡単にする方法を紹介します．
npm initを実行した際に生成された，「package.json」というファイルを開きましょう．このファイルは，作業フォルダ内でnpmに関連したアレコレを扱うための情報が格納されます．さて，npmには，このpackage.jsonを介して，任意のコマンドを実行する機能があります．その機能を使って，ビルドを簡単にしてみましょう．
作業としては，package.jsonに以下のような変更を加えます．
8行目に新たな1行を追加しています．追加されている"script"というプロパティが，npmを介して実行するコマンド群を意味しており，そこに含まれるプロパティが，実際に実行するコマンドを含んでいます．今回は"start"というプロパティに，Parcelでのビルドコマンドを登録しました．
package.jsonにコマンドの登録ができたら，これを実行してみましょう．ターミナルで，以下のコマンドを実行します．
$ npm run start
or
$ npm start
これで，Parcelによるビルドが開始されます．ファイル名を打ち込む手間がなくなっていい感じですね．
ソースコード
今回記事の中で作成し，動作確認を行ったソースコードは以下にあります．
ここまで読むだけ読んで，「ソースを書くのに手を動かしたくない」という方は上のリンク先のリポジトリをクローンして貰えればおｋです．
終わりに
今回はParcelの本当に触りの部分だけを紹介させてもらいました．と言いつつ，PugやScssを入れてきたのはナゼか？ 本来であればHTML+CSS+JSでもっとシンプルに書くべきだったとも思います．しかし，Parcelを使うことであまりに簡単にコンテンツが作れたときの私の驚きを皆さんに共有したかった，という思いから，コンパイルが必要な構成で書かせてもらいました．まともに読んでいる人もいないようなブログですし，別にいいじょのいこ．
また，Parcelは登場時期が比較的新しく，今でも新しい技術をどんどん取り入れて変化し続けています．今後どのように変わっていくのか，注目していきたいですね．
*1:今でこそJavaScriptやCSSはそれ自体から外部のソースにアクセスする術（ES6 importやCSS3 @import等ですね）を持ちますが，その昔はそんな便利なものはありませんでした．昔ながらの方法としてhtmlにタグで書いても良いのですが，こうなると今度はソース間の依存関係の解決が大変です．当初バンドラーはこの問題を解決するべく誕生しました．
*2:Windowsであればcmd，ないしpowershell，MacまたはLinuxであれば端末
*3:$ はプロンプトです
*4:ブラウザごとのコンソールの表示方法はこちらを参考にしてください．
*5:「npm start」は若干特殊なコマンドで，「npm run start」と同じ挙動を示します．詳細はこちらを参照してください
nodeで簡易サーバを簡単に立てる
nodeで簡易サーバを簡単に立てる
宣伝
みなさん、おはこんばんちは。みっきぃです。こちらの記事は以下のアドベントカレンダーの企画の一つです。
adventar.orgよろしければ他の記事もご覧ください。
鯖を立てたい
さて、今回の記事ですが、node.jsを使って静的なファイルを配信する簡単なWebサーバを立てる方法の紹介です。
Webアプリなどを開発する際、基本的にはローカル上のファイルを直接ブラウザで開くことでアプリのビューを確認することができます。しかし、XHRやfetchを用いてAjaxを使用するアプリを作成する場合は、それらの振る舞いを確認するためにサーバを介してアプリの挙動を確認する必要があります。
「簡易サーバ構築」と言うと、Pythonの「SimpleHTTPServer」などが有名ですが、今回はnode.jsの「static-server」を使用し、上記の課題の解決に当たりたいと思います。
導入から実行まで
早速導入していきましょう。まず当然ですが今回のサーバを実行するためにはnode.jsとnpmが必要になります。
node.jsを導入していない場合は先にそちらを導入しましょう。
node.jsとnpmの準備が整ったら、ターミナルを起動し、以下のコマンドを入力しましょう。
$ npm install -g static-server
※$はプロンプトです
上記のコマンドを実行すると、node.jsのグローバル環境に「static-server」がインストールされます。導入は以上です。簡単！
続いて実際にサーバを実行して挙動を確認してみましょう。今回は以下のサンプルスクリプトを実行します。
・index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>static server test</title>
</head>
<body>
<script>
window.addEventListener("load", _ => {
});
</script>
</body>
</html>
・data.json
{
"name": "mickey",
"sex": "male",
"age": 21
}
・スクリプトを実行
・localhost:9080/へアクセスした結果(Firefox 57.0.2 Windows x64)
やりました！ たったこれだけの操作でWebサーバを立てられました。
終わりに
node.jsは今回のような至極簡単なサーバの立ち上げから、本格的なサーバサイドスクリプトの実行、果てはデスクトップアプリやスマートフォンアプリの開発基盤にまで及んでいる、今アツい技術の一つです。これをきっかけにnode.jsの世界に触れて見てはいかがでしょうか？
Groovyでぐるぐるする
Groovyでぐるぐるする
宣伝
おはこんばんちは。みっきぃです。こちらの記事は↓
adventar.orgの企画の一つです。よろしければ他の記事もご覧になってください。
Groovyでぐるぐるする
今回はスクリプト言語の一つであるGroovyの簡単な説明と導入方法を紹介させていただきたいと思います。
Groovyとは、Java仮想マシン上(以下、JVM)で動作するスクリプト言語です。JVM上で動くスクリプトは他にJython(PythonのJVM実装)や、Jruby(RubyのJVM実装)が有名ですが、個人的にJVM環境のスクリプトとしてイチオシなのはこちらのGroovyです。Groovyの特徴としては、
などが挙げられます。基本的にJavaで正しいコードはGroovyでも正しいコードとして認識されます。Javaを書ける人であれば、Groovyの学習コストは低く済ますことができるのが大きな魅力ですね。また、配列への反復操作等はクロージャを用いてシンプルに記述できる点も大きな魅力です。個人的には型の扱いがJavaよりもファジーで良い点も魅力です。Javaを書いていてしんどい部分がシンプルに扱えるようになる、と言っていいと思います。
Groovyを実際に触って感触を確かめてみたい、という方はコチラのWeb Consoleで試してみることができます。↓
導入
それではGroovyを実行する環境を作っていきましょう。今回はWindows環境でやっていきたいと思います。
Groovyの実行環境を用意する前に、Javaの開発環境が整っている必要があります。Java SE development kitを導入していない場合は、先にそちらを用意しましょう。
Java開発環境が整ったら、次にGroovyの開発、実行環境を用意します。今回はブラウザ経由でGroovyの公式サイトよりダウンロードしましょう。
The Apache Groovy programming language - Download
ページ中ではバージョン3.0まで公開されていますが、安定版は2.4.13(2017/12/15現在)とのことなので、今回はこちらを選択します。Window版はインストーラが配布されているので、こちらをダウンロードしましょう。
ダウンロードされたインストーラを起動すると、言語選択画面が出てきますが、日本語は存在しないので英語を選択して進めていきましょう。インストーラでは様々なオプションを選択できますが、基本的にデフォルトの設定で問題ありません。パスの設定まで自動でやってくれるので楽チンです。
Hello Worldしてみる
無事にGroovyの環境を導入できたら、試しにGroovy Consoleを立ち上げてみましょう。こちらのプログラムは、Groovyのプログラムを入力、その場で実行できる簡易エディタです。スクリプト入力欄に「println "Hello World"」と入力し、メニューバーの「Execute Groovy Script」というボタンをクリックすればスクリプトが実行され、画面下のコンソールに「Hello World!」と表示されるはずです。
簡単ですね。
終わりに
今回は開発、実行環境の導入と簡単なスクリプトの動作までしか紹介しませんでしたが、Groovyは公式のドキュメントに丁寧なAPIの解説が載っています。
The Apache Groovy programming language - Documentation
実際にさわってみて「お、面白そうだな？」と思った方はぜひ色々と試してみてください(丸投げ)。機会があれば、Groovyのより細かな解説も記事にしたいと思います。
■
雑にDTMをしたい
宣伝
実に一年ぶりの投稿ですね… 誰も読んでいないと思うので良いんですけどネ
また、こちらの記事はこちら↓
の企画の一つです。よろしければ他の記事も読んで見てください。
本題
はじめに
さて、それでは本題に入りたいと思います。今回はタイトルの通り、「雑に」「DTMのようのこと」をする方法を雑に紹介するする記事となります。
（もっと細かく言うと、「Windows環境」で「雑に」(ryする方法になります）
まず「DTM is 何？」という方もいらっしゃると思いますが、DTMとは「デスクトップミュージック」の略で、コンピュータ上で作曲などを行う等の活動全般を指します。今回はWindows環境でDominoというソフトを使って簡単な作曲をやってみたいと思います。
何を使ってDTMするの？
早速やっていきましょう！ 上でも書きましたが、今回は「Domino」というフリーのシーケンスソフト導入から簡単な操作までを紹介したいと思います。
DominoはTakabo Softさんが製作、公開されているフリーのシーケンスソフトです。
フリーソフトながら、デフォルトの状態で最低限の作曲ができるだけでなく、外部のソフトウェアとの連携や、MIDIキーボードなどの外部機器を用いることもでき、基本的にMIDIに関わるあらゆる作業を行うことができます。
導入
それでは導入をしていきましょう。といっても難しい作業はありません。
まず、上記のリンク先にあるダウンロードリンクをクリックしてzip形式のファイルをダウンロードし、ダウンロードしたファイルを解凍します。
解凍して出てくるフォルダに「Domino.exe」がありますね。これがDominoのアプリケーション本体になります。インストール等の手間は基本的に必要ありません。お手軽ですね。
■ダウンロードしたzipファイルを展開した状態。Domino.exeがアプリケーション本体
とりあえず触ってみる
プログラムを起動する準備までできたので、早速Domino.exeを起動しましょう！
この画面が初期状態として表示されると思います。下に何やらダイアログが出ていますね。「MIDI出力デバイスが設定されていません。」とのことです。この状態では音を出すことができません。指示の通りに、「ファイル→環境設定」を開き、「MIDI-OUT」を設定しましょう。通常のWindows環境では以下の画像の設定で大丈夫です。
ここまで設定できればあとは画面右側のピアノロールと呼ばれる領域をクリックするだけで音楽を作ることができます！ 簡単！
終わりに
今回は本当に簡単にDominoの導入から初期設定までをさらってみましたが、非常に簡単に使用できると同時に、拡張性にも優れ、本格的な作曲活動にも活かせる優秀なDTMソフトとなっています。ぜひ気軽に触ってみて、DTMの楽しさに触れてみてください。
JavaScriptのアプリを共有するWebサービスを比較してみた
始めに
皆さん、初めましての方は初めまして。そうじゃない方は、……なんでしょうね？ まあ、こんにちは。拓殖大学ディジタルコンテンツ研究愛好会のみっきぃというものです。普段はJavaScript(以下、JS)を触ったりWorld of Tanks*1で遊んだりしてます。よろしく。
さて、皆さん、私はJSが好きです。日ごろ、暇なとき等に、思いついたものをその場でパパッと実装したりするのにはちょうど良いシンプルさと、それなりに凝ったものを腰を据えて実装する、という場合にも対応しうるパワフルさを備えた言語だと、私は思います。
そんなJSを学んでいると、サンプルプログラム等を表示するために、JSのプログラムをシェアするサービスを用いたサイトを見かけることが多々あります。今回は、そういったWeb上で見られる幾つかのサービスを、実際に触ってみた感想を含めて簡単に紹介していきたいと思います。
サービスの紹介
今回は四つのサービスを比較してみました。それでは早速それぞれのサービスを見ていきましょう。
jsdo.it
こちらは日本国内の企業が提供しているサービスです。コードの投稿にはアカウントの作成が必要ですが、GoogleアカウントやTwitterアカウントを使用することができるため、手軽に使い始められますね。
jsdo.itの特徴としては、
- 日本語で登録されている物が多い。
- JS以外にもTypeScriptやCoffeeScriptにも対応している。
- 他の方が投稿した物をフォークすることができる。
こういったところでしょうか。使っていて少し不便に感じることは、コードの自動保存機能が備わっている反面、保存されるたびにページが遷移したことになってしまい、一度コーディングを始めると履歴が大変なことになってしまう、という点ですかね。しかしこれはサービス全体の質の高さから考えればささいな問題ですね。
CodePen
こちらは雑に言うと海外版jsdo.itです(こちらが先かな？ よぐわがんね)。こちらもコードの投稿、保存にはアカウントの作成が必要ですが、アカウントを作成しなくても、コードの入力、実行は可能です。こちらの場合、他のサービスのアカウントを使用することが出来ないので要注意です。
CodePenの特徴としては、
- 海外、特に英語圏からの投稿が多い。
- 最新の技術を使用したデモ等が多く見られる。
- 投稿に対してコメントを付けることができる。
といったところですね。こちらもページの保存を行うとページ遷移が発生するのが悩みどころです。また、個人的には入力画面は良いとしても、結果を表示する部分が少し見づらいな、と感じますね。しかし、投稿に対してコメントを付けられる機能に見られるように、jsdo.itとは違った方向性でコードのシェアを図っているのが面白いですね。
JSFiddle
こちらも海外のサービスとなります。こちらも登録不要でコーディング、実行は可能ですが、保存にはアカウントが必要となります。また、他のサービスのアカウントを使用することはできません。
JSFiddleの特徴としては、
- シェアリングサービスというよりは個人的な作業ページとしての色が濃い。
- そのためか、エディタ画面がフロントページとなっている。
- 自身のコードをフォークして管理することができる。
といった感じです。jsdo.it、CodePenとは色の異なるサービスですが、埋め込みパーツの作成が非常に簡単であったり、非常にシンプルなUIにまとめあげられていたりと、個人的には使い勝手は良い印象を受けます。見た目にわかりやすい、ということはかなり重要な事だと個人的には思いますね。
JS Bin
JS Bin - Collaborative JavaScript Debugging
こちらも海ｇ(ry。こちらもログインせずに入力実行は可能、保存にはアカウントを欲求されます。このJS Binは、GitHubのアカウントでログインすることが可能なのが嬉しいですね。
特徴としては、
- GitHubとの連携機能が強力。
- 開発、運営者がブログを運用しており、ページの今後の動向などが把握しやすい。
- 作業ページの切り替えが格別に便利。
といった感じです。GitHubとの連携の恩恵の一つとして、ライブラリの更新がリアルタイムで反映される、という点が大きいと思います。また、dropboxにバックアップを取ることもできるなど、外部のサービスと積極的に連携しているのも特徴と言えると思います。
まとめとして
今回紹介したサービスは全てコードを埋め込みの形で外部のページに表示することができます。
こういった感じですね。この埋め込みについても、それぞれのサービスで微妙に形態がことなっていたりして、面白く感じます。
私は普段はjsdo.itを利用しています。他の方が書いた様々なコードに触れることで、新しいアイデアを思いついたりすることもよくあります。こういった背景から、jsdo.itやCodePenはコードを作成、実行する場であると同時に、共有するための場でもある、ということが前面に押されているように感じます。
JSFiddleやJS Binはサービス上では他の方が書いたコードに積極的に触れていくことはあまりありませんが、シンプルな環境で素早く動作確認ができたり、他のページの埋め込みもシンプルであったりと、より実装向けなサービスである、という印象を感じています。
場面に応じて、いずれのサービスを利用するかを分けられるようにしていきたいですね。
皆さんもこれらのサービスを利用してJSでのんびり実装、していきませんか？ といったところで今回はここまでです。
あとアドベントカレンダーのこと
この記事は拓殖大学ディジタルコンテンツ研究愛好会のアドベントカレンダー2016に参加しています。よろしければ他の記事もどうぞ～
