Edited at

Meteorのあんちょこ꒰。・ω・`;꒱

More than 1 year has passed since last update.


本記事について


  • 本記事は、「 体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説(Meteor version 0.3.6)」の内容を、1.3.4に置き換えた時のメモです。

  • それに加えて、MeteorでのルーティングやらReactやら興味のあるものを記述しています。

  • 筆者は、WEB専業ではありませんし、感覚的に理解することにまず重きを置いております。間違いがありましたら、コメント頂けると助かります。お手柔らかにお願いいたします。



What is Meteor?

Introduction @ Meteor Guideの要約...


参考文献


サンプル



インストール


console

# 最新 2016/11/06

$ curl https://install.meteor.com/ | sh
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 7784 0 7784 0 0 7557 0 --:--:-- 0:00:01 --:--:-- 7564
Downloading Meteor distribution
######################################################################## 100.0%

Meteor 1.4.2 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.
This may prompt for your password.
Password:

To get started fast:

$ meteor create ~/my_cool_app
$ cd ~/my_cool_app
$ meteor

Or see the docs at:

docs.meteor.com

$ meteor --version
Meteor 1.4.1.2

# ----
# 旧バージョン
$ curl install.meteor.com | /bin/sh

#----
# バージョン確認
$ meteor --version
Meteor 1.3.4.1
$ meteor --help
Usage: meteor [--release <release>] [--help] <command> [args]
meteor help <command>
meteor [--version] [--arch]

With no arguments, 'meteor' runs the project in the current
directory in local development mode. You can run it from the root
directory of the project or from any subdirectory.

Use 'meteor create <path>' to create a new Meteor project.

Commands:
run [default] Run this project in local
:

See 'meteor help <command>' for details on a command.




Hello Project


プロジェクト作成


console

$ meteor create hello



実行(meteor)


console

$ cd hello

$ meteor
=> App running at: http://localhost:3000/


別のポートを使用したい場合


  • "meteor"代わりに、"meteor run"でポートを指定できる。


console

$ meteor run --port 3030



公式サンプルの実行


  • シンプルなTODOアプリ。

  • 同期編集できることが確認出来る。

  • (wordplayがないため、simple-todosを使用。)


console

$ meteor create --example simple-todos

To create the simple-todos example, please run:
git clone https://github.com/meteor/simple-todos
$ git clone https://github.com/meteor/simple-todos


デバッグプリント


  • console.log(...)(☆)でデバッグプリント可。

  • サーバ側のコードは「meteor」コマンドを叩いたコンソールに表示される。

  • クライアント側のコードは、ブラウザのコンソール(Chromeの場合は、「表示」→「開発/管理」→「デベロッパーツール」のConsole)に表示される。


hello/client/main.js

Template.hello.events({

'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
// ☆コンソール表示
console.log("You pressed the button.");
},
});


リロード不要で編集可


  • サーバを動かしたまま、編集すると、変更が反映される。(リロード不要)


hello/client/main.html

  <h1>Welcome to Meteor!</h1>

<!--日本語でヘッダを追加してみる-->
<h1>Meteorにようこそ</h1>


ディレクトリ構造


  • JavaScriptファイルは、「サーバでもクライアントでも実行される」


  • clientディレクトリ...client-side javascipt


    • クライアント側で実行されるJavaScript・CSS・HTMLファイルを格納。

    • if(Meteor.isClient){}の分岐ブロックで定義するのと同等。




  • serverディレクトリ...server-side javascript


    • サーバ側で実行されるJavaScriptを格納。

    • if(Meteor.isServer){}の分岐ブロックで定義するのと同等。




  • publicディレクトリ...static javascript


    • 静的なファイル(画像など)を格納。

    • このディレクトリ内のファイルはMeteorによって特別な処理を行われることなく、「そのまま」静的ファイルとして配信。

    • このフォルダに登録したファイルはルートパスからアクセスできる。


      • 例えば、public/images/sample.pngとして保存した場合、(localhost:3000)/images/sample.pngでアクセスできる。






HTML


  • server & public以外に配置のHTMLは1つのHTMLに結合される。

  • 結合順は深さ優先&アルファベット順となる。

  • テンプレート言語はSpacebarsというHandlebarsに類似したもの。

  • それ以外のJavaScriptTemplate「mquandalle:jade」とかもOKらしいが、疑う余地もなく、Spacebarsを覚えることとする。

  • Understanding Spacebars @ Meteor Capture


スタイルシート


  • serverディレクトリ以外に配置。

  • CSSファイルは、HTMLにで自動的に取り込まれる。

  • CSS プリプロフェッサーとしては、Sass、Less.js、Stylusを使用できる。



JQuery


  • デフォルトで使用可。(デフォルトでパッケージファイルにjqueryが追加されている。)


.meteor/packages

jquery                  # Helpful client-side library



client/main.html

<template name="hello">

<!--こちらは反応-->
<button id="alert">Alert</button>
<!--こちらは無反応-->
<button id="no_alert">No_Alert</button>
</template>


client/main.js

import { Template } from 'meteor/templating';

import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Template.hello.events({
// JQueryが使える。
'click #alert'(event, instance) {
alert("clicked sample");
console.log(instance);
console.log(instance.$('button#alert'));
console.log(instance.$('button#alert').text());
},
});



Call Server-side Function


  • クライアントからサーバサイド関数を呼出する。


client/main.html

<template name="hello">

<button id="console">Click Me</button><br/>
<input id="lastname"/> 名<input id="firstname"/><button id="show">ダイアログ表示</button>
</template>


client/main.js

import { Template } from 'meteor/templating';

import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

Meteor.startup(() => {
// サーバサイド関数を呼び出す。
$('#show').on('click', function (){
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
Meteor.call('hello', firstname, lastname, function(err, result) {
// callback
alert(result);
});

});
});

Template.hello.events({
'click #console'(event, instance) {

// 可変引数で引数を渡して、callする。
Meteor.call('hello', 'Shoko', 'CALL', function(err, result) {
// callback
console.log(result);
});

// 配列で引数を渡して、callする。
Meteor.apply('hello', ['Shoko', 'APPLY'], function (err, result) {
// callback
console.log(result);
});
},
});



テンプレート


データベース接続


Reactive-Dict


アカウント管理


Route(kadira:flow-router)


React(simple-todos)



派生言語系


TypeScript


CoffeeScript



ファイルのアップロード



  • CollectionFS/Meteor-CollectionFSが利用可。(他にもいくつかあるようだけど。。。)

  • 下記にアップロードできるらしい。


    • MongoのGridFS

    • ファイルシステム(NASに保存できるかは微妙?)

    • AWS S3

    • Dripbox

    • Alibaba系のストレージ




  • How to upload files with Meteor.js?がわかりやすそうだった。


Cannot find module '../build/Release/bson'への対策


console

$ meteor

[[[[[ ~/sync-emr2/sync-emr ]]]]]

=> Started proxy.
=> A patch (Meteor 1.5.4) for your current release is available!
Update this project now with 'meteor update --patch'.
=> Started MongoDB.
I20171113-21:57:19.492(9)? { [Error: Cannot find module '../build/Release/bson'] code: 'MODULE_NOT_FOUND' }
W20171113-21:57:19.549(9)? (STDERR) js-bson: Failed to load c++ bson extension, using pure JS version
I20171113-21:57:19.914(9)? services.init
=> Started your app.

=> App running at: http://localhost:3000/



.meteor/local/build/programs/server/npm/node_modules/meteor/cfs_gridfs/node_modules/mongodb/node_modules/bson/ext/index.js

try {

// Load the precompiled win32 binary
if(process.platform == "win32" && process.arch == "x64") {
bson = require('./win32/x64/bson');
} else if(process.platform == "win32" && process.arch == "ia32") {
bson = require('./win32/ia32/bson');
} else {
bson = require('../build/Release/bson');
}
} catch(err) {
// Attempt to load the release bson version
try {
// bsonの参照先をへのう
// bson = require('../build/Release/bson');
bson = require('../browser_build/bson');
} catch (err) {
console.dir(err)
console.error("js-bson: Failed to load c++ bson extension, using pure JS version");
bson = require('../lib/bson/bson');
}
}



デプロイ



Meteor本体のアップデート



  • meteor updateというコマンドで最新版のMeteorが使用できる。


console

=> Meteor 1.4 is available. Update this project with 'meteor update'.

# 指定のバージョンにアップデート
$ meteor update --release 1.5.4