meteor

[ガラケー版(QRコード)]
アクセス記録[推移 / PV内訳(過去1日 / 過去1週間) / 外部アクセス元 (昨日 / 過去1週間) / ログイン論客足跡]
プロフィール私書(メール)
   /   /送済
評価(一覧   /)
投票   /共:   /
ファン登録
作品/情報/
DB構築()
ブログ
[書く]
攻略記事リンク集
My Play List
 作成日時分類記事タイトル
12017/04/05meteorMeteor+ReactでWebサイト・アプリ開発を..
22015/05/13meteormeteorメモ書き
32015/03/29meteorMeteor関連のリソース..
42015/02/28meteorMeteorでWebページを公開する迄/3分クッキン..
 反応日時来客名来客者の最近のメッセージ
12017/04/20 非論客コメント
22017/02/25Merciこんばんは。サーバー移転後からだと思いますが、以前は見られた..
32017/02/17ねこじゃらしブログ投稿やコメントをしようとすると、たまにエラーになります..
42017/02/16Barnirunお世話になっております。https対応の影響か(またはhtm..
52016/11/10伏魔の剣こんばんわ。形式変更お疲れ様でした。 ところでこの改定につい..
その他最近のコメント
1.
2017/04/05 meteor > Meteor+ReactでWebサイト・アプリ開発を開始する手順」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]拍手:1個

1. お知らせ
2. Meteorとは
1. Meteorでの開発を始めている
  1. Macユーザー向け手順
    1. Webアプリとしてためてみる
    2. ただカウントアップするプログラム
    3. Todoアプリ フロントサイドBlaze版
    4. Todoアプリ フロントサイドReact版
  2. iOSモバイルアプリとして挙動を確認
    1. Xcodeをインストール
    2. Cocoapadをインストール
    3. iOSエミュレーターの実行
    4. iPhone実機での実行
  3. Androidアプリとして挙動を確認
    1. Javaをインストール
    2. Android Studioをインストール
    3. Androidエミュレーターの実行
    4. Android実機での実行
2. Meteor + Reactで開発をしてみる
  1. Todoアプリに追加して自分が使っているモジュール
3. Meteorのシステムの理解
4. Meteorの開発ではまった点
  1. Blaze、Angular、Reactどれで行こう?
  2. Reactって結構理解するのが大変!Meteorで楽する筈じゃなかっの?
  3. 全くサーバー稼働を想定しないアプリを作るにはどうすれば
  4. MongoDbだと動く筈のQueryが動かない
  5. ローカル開発だと表示されていた外部サイトの画像が表示されない
  6. AWSへの接続情報とかクレデンシャル情報どう管理しよう?
5. 本番環境へのアップの仕方
  1. GalaxyというMeteor公式インフラサービスを使う場合
    1. 独自ドメインを使いたい場合
    2. MongoDB公式インフラサービスAtlasでMongoDBクラスターの用意
    3. Meteor公式インフラGalaxyへのデプロイ
6. Meteor + Reactでの開発で参考になる資料
  1. Reactの勉強ソース
  2. Meteor + Reactの勉強ソース

  1. お知らせ

日本に久しぶりに戻ってきているということもあり、Meteor等JavaScriptフレームワークのもくもく会を4/10(日曜日)に高田馬場で開催します。

https://meteor.connpass.com/event/53881/

ご興味がある方はどうぞ。
  2. Meteorとは

Meteorはnode.js系フレームワークの一つで、
- JavaScriptでサーバー側もフロント側もアプリも全て開発出来る
- データ・表示のリアクティヴ更新
- Cordovaが組み込まれているのでWebサイト開発と合わせてiOS、Androidアプリの開発も同時に出来る
- フロントエンド側はBlaze、Angular.js、Reactのどれでも開発できる(個人的なお勧めはReact)
- node.js系なのでnpmモジュールが活用できる
- ES6、Less等を使うための環境整備を気にしないでも使えるスタックになっている
- システムのスケーラビリティ・アベイラビリティを担保して、インフラ管理をほぼしないで済むようになるサービスが用意されている
といった所に特徴があります。
githubでウェブフレームワークとして2017/04/07時点でStarを一番多く獲得しています。
https://github.com/showcases/web-application-frameworks

1. Meteorでの開発を始めている


  1. Macユーザー向け手順


まずはMeteorをインストールしましょう。
curl https://install.meteor.com/ | sh;
    1. Webアプリとしてためてみる


    2. ただカウントアップするプログラム

mkdir countup;
cd countup;
meteor run;

http://localhost:3000/
で挙動を確認します。
    3. Todoアプリ フロントサイドBlaze版

git clone https://github.com/meteor/todos;
cd todos;
meteor npm install;
meteor;

http://localhost:3000/
で挙動を確認します。
    4. Todoアプリ フロントサイドReact版

git clone https://github.com/meteor/todos;
cd todos;
git checkout react;
meteor npm install;
meteor;

http://localhost:3000/
で挙動を確認します。
  2. iOSモバイルアプリとして挙動を確認


    1. Xcodeをインストール

https://developer.apple.com/xcode/
    2. Cocoapadをインストール

sudo gem install cocoapods;
pod setup;
    3. iOSエミュレーターの実行

カウントアッププログラムの場合
mkdir countup;
cd countup;
meteor install-sdk ios;
meteor add-platform ios;
meteor run ios;

Xcodeで実行させたいプラットフォームを選んで、再生ボタンを押して実行。
実行するにあたってエラーメッセージが出る場合には、その内容に従って解決していく(Agreementに同意等々)。
因みに、アプリといっても、クライアント・サーバー型として最初は作られている形になっているので、PCとのコネクターを外すとエラーが表示される事になるかと思います。
    4. iPhone実機での実行

カウントアッププログラムの場合
mkdir countup;
cd countup;
meteor install-sdk ios;
meteor add-platform ios;
meteor run ios-device;

USBケーブルでiPhoneとつなげている状態で、ビルド対象として実機のiPhoneを選んでビルドを実行
  3. Androidアプリとして挙動を確認


    1. Javaをインストール

https://java.com/en/download/
    2. Android Studioをインストール

https://developer.android.com/studio/index.html
    3. Androidエミュレーターの実行

カウントアッププログラムの場合
mkdir countup;
cd countup;
meteor install-sdk android;
meteor add-platform android;
meteor run android;

Xcodeで実行させたいプラットフォームを選んで、再生ボタンを押して実行
    4. Android実機での実行

カウントアッププログラムの場合
mkdir countup;
cd countup;
meteor install-sdk android;
meteor add-platform android;
meteor run android-device;

2. Meteor + Reactで開発をしてみる

開始するにあたって、TodoアプリのReact版が自分が見た中では開発を始めやすいので、それから始めてみます。
例えば、travelplanというプロジェクトを始めて見る場合。

PJ=travelplan;
git clone https://github.com/meteor/todos $PJ;

cd $PJ;
git checkout react;
git pull;

rm -rf .git;
meteor npm install;
meteor;

  1. Todoアプリに追加して自分が使っているモジュール

core-decoratorsYou can stop using bind()
edgee:slingshots3へのアップロード
aws-sdkAWS SDK
react-bootstrapReact対応Bootstrap

3. Meteorのシステムの理解

Todoアプリのファイル構成をとった場合、
client/main.js でクライアント側(=ブラウザー側)で実行される処理がそこから始まります。
server/main.js でサーバー側で実行される処理がそこから始まります。
importsディレクトリ以下のファイルは明示的にimportされる事でプログラムに組み込まれるので、組み込みの制御ができます&基本的にはそこの中のファイルを編集して開発を進めていきます。
imports以外のディレクトリのファイルは、Meteorのルールに従って全てアプリに組み込まれます。
クライアント側がどの処理を出来るのかということのメソッドの定義(Publish)、クライアント側がその利用を申し出て(Subscribe)そのメソッドの利用、という形で、クライアント側とサーバー側は協働して作動することになります。
4. Meteorの開発ではまった点


  1. Blaze、Angular、Reactどれで行こう?

最終結論はReactで行こう。
そしてReactはReactで相当ちゃんと勉強しないといけないという事にも気づくが、将来性的に周り道してでもそれが良いと判断した。
  2. Reactって結構理解するのが大変!Meteorで楽する筈じゃなかっの?

Reactについてクライアントサイド側でマスターしないといけない技術の一つと認識して頑張りましょう。
  3. 全くサーバー稼働を想定しないアプリを作るにはどうすれば

デフォルトの状態では、ウェブサーバーはウェブサーバーがあるものとして、アプリはアプリで動いている。
それを回避する為にground:dbを使おうとしても、そんな言っている通りに動かない。
ということで、今はreact-native-meteor-redux あたりが良いのではないかと目星をつけているけど、それはこれから検証。
  4. MongoDbだと動く筈のQueryが動かない

aldeed:simple-schemaあたりが大した情報も寄こさずに停めている。
わかりづらくなる面があるのでValidator使わず、自分でMeteor.methodsとcheckで実装してしまっても問題ないと思う。
  5. ローカル開発だと表示されていた外部サイトの画像が表示されない

画像タグは表示されているのに、そもそもブラウザーが画像のリクエストをしていないようだ???
という時には
packages/app-prod-security/package.js
から'browser-policy'をコメントオフしましょう。
  6. AWSへの接続情報とかクレデンシャル情報どう管理しよう?

トップディレクトリにsettings.json
{
"AWSAccessKeyId": "...",
"AWSSecretAccessKey": "...",
"AWSRegion": "...",
"galaxy.meteor.com": {
"env": {
"MONGO_URL": "mongodb://...."
}
}
}
といった形のファイルを作って、
meteor --settings settings.json
という形で起動。
詳しくは
https://blog.meteor.com/the-meteor-chef-making-use-of-settings-json-3ed5be2d0bad
参照。
プログラム内には書かかず、このファイルをソースコード管理に入れなければ、値の秘匿はそれをもって行える。
設定した値はプログラム内では
Meteor.settings.AWSAccessKeyId
といった形で取得できる。
5. 本番環境へのアップの仕方

自分でインフラの管理はしたくない&冗長性&スケーラビリティを担保したい、ということで、Meteor公式のインフラサービスをWebサーバー側は使い、DB(MongoDB)はMongoDB公式のインフラサービスを使う事で、インフラメンテ工数を削減&効果の最大化を行います。
  1. GalaxyというMeteor公式インフラサービスを使う場合

ロケーションはいくつかありますが、us-east-1リージョンを使うとします(GalaxyはAWSのシステム上で構築されています)。
    1. 独自ドメインを使いたい場合

まずドメインをどこかで買います。

例: travelplan.world

それからAWSのRoute 53でCNAMEにus-east-1.galaxy-ingress.meteor.comを指定したDNSレコードを作ります(us-east-1リージョンの場合)。
といってもこの場合は、wwwを付けざるを得ません。
www無しのルートドメインだけでアクセスできるようにするには、s3バケットをルートドメイン名で作ってウェブサイトとして公開する設定とします。
因みに、設定としてそこにアクセスしてきたユーザーは全てwww付きの方に転送する設定を選びます。
そしてRoute53でs3のウェブインスタンス名を指定したAレコードを作ります。
    2. MongoDB公式インフラサービスAtlasでMongoDBクラスターの用意

https://www.mongodb.com/cloud/atlas
でアカウントを作ります。
無料Tierがあるので始め易いです。

最新版のMongoDBはMeteor最新版との相性で動かない可能性はあるので、MongoDBの対応バージョンについては確認しておきましょう。

現在、Meteor 1.4.3.2 + Mongodb 3.4の組み合わせは問題があったので、自分はMongoDB 3.2を使っています。
    3. Meteor公式インフラGalaxyへのデプロイ

https://www.meteor.com/
でアカウントを作ります。
なお、最低スペックの設定で月1,000円位はかかります。

デプロイしたいMeteorPJの直下のディレクトリ上で

vi setting.json
/* Just example */
{
"galaxy.meteor.com": {
"env": {
"MONGO_URL": "mongodb://<dbuser>:<dbpassword>@<dbserver>:<dbport>/<dbname>"
}
}
}
と、MongoDBへの接続情報を入力します。
これはAtlasのウェブ管理画面から情報を得る事ができます。

そしたらPJのトップディレクトリで、
DEPLOY_HOSTNAME=galaxy.meteor.com meteor deploy [hostname] --settings setting.json;
と打って、デプロイが終わるを待ちます。
なお、[hostname] はデプロイしようとしているドメインの完全名です(例:www.travelplan.world)。

デプロイのログはGalayxのウェブ管理画面で確認できます。
https://galaxy.meteor.com/app/<app_name>/logs

アプリのデプロイが終わったら、Galaxyのウェブ管理画面で、ドメイン名設定・HTTPS設定等を行いましょう。
SSL証明書の利用は無料です。

なお、Deployコマンドの実行が終わったと思っても、本番に反映されるには数分のギャップがあります。
6. Meteor + Reactでの開発で参考になる資料

正直ReactはReactとしての勉強も必要になるので、それはそれで勉強する必要があります。
フロントエンド側の実装として、BlazeやAngularの方が分かり易いのに、何故にReact(それなりの初期学習コストがかかる)をやらねばならぬと思うかもしれませんが、個人的には段々とReactのコンポーネント性による資産性の価値を感じてきているので、どれを選ぶかで迷ったら苦労してでもReact方面に行った方が良いと思っています。
なお、情報ソースは基本的には英語になります(英語が出来ないと、自然と遅れざるを得ない例)。
  1. Reactの勉強ソース

https://facebook.github.io/react/
まずは公式から

https://github.com/petehunt/react-howto
Reactを使う為に学ばないといけない事情報がまとめられています。
  2. Meteor + Reactの勉強ソース

https://guide.meteor.com/react.html
Meteor公式によるReactをフロントエンドに使う場合の公式ガイド

https://www.meteor.com/tutorials/react/creating-an-app
Meteor公式による実際にアプリを作る例を見て学ぶ

https://leveluptutorials.com/tutorials
一部は無料、全部を見るには有料。最新版(Meteor1.4)に基づくMeteor+Reactの動画コースもあり、役立ちます。

コメントする1個

2.
2015/05/13 meteor > meteorメモ書き」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]

1. http://localhost:3000/ での立ち上げ
2. meteorの更新
3. webサーバーへのアップ
4. 各デバイス向けアプリの構築
        1. Android
        2. ios
5. ソーシャルログイン
        1. facebook
        2. google
        3. twitter

    1. http://localhost:3000/ での立ち上げ

meteor
    2. meteorの更新

meteor update

1.2系への更新
meteor update --release METEOR@1.2
    3. webサーバーへのアップ

mup setup
mup deploy
    4. 各デバイス向けアプリの構築


      1. Android

# 1.2
Android Studioで今だと22のsdkをインストールして、ターミナルを開き直す

# 1.0
meteor install-sdk android
meteor add-platform android

meteor run android

meteor run android-device
      2. ios

meteor install-sdk ios
meteor add-platform ios
meteor run ios
meteor run ios-device
    5. ソーシャルログイン


      1. facebook


      2. google


      3. twitter

CallbackのURLとかはpluginの方が教えてくれる

コメントする

3.
2015/03/29 meteor > Meteor関連のリソース」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]

Meteor関連の情報リソースを整理します。

https://www.meteor.com/
まずここに行き

https://www.meteor.com/install
を全部こなします。

http://docs.meteor.com/#/basic/
を頭から末尾まで読みます。

https://atmospherejs.com/
ざっとモジュールの存在を把握してみます。

http://meteorpedia.com/read/Main_Page
トップページで役立つ情報ソースを確認

https://book.discovermeteor.com/
お金かかるけど買ってみよう

http://projectricochet.com/blog/meteor-js-performance#.VRmTaUaX0dU
# 関係ない部分でreactiveが発動しないように絞る
var employee_ids = Employees.find({}, {fields: {_id: 1}}).fetch();

# reactiveである必要がない場合
var employees = Employees.find({}, {reactive: false}).fetch();
と、役立つ基本ノウハウが諸々。

https://github.com/oortcloud/unofficial-meteor-faq

コメントする

4.
2015/02/28 meteor > MeteorでWebページを公開する迄/3分クッキング」
[この書込みのみ表示(記事URL紹介用) / 編集 / 削除 / トラバ送信 / 共有分類に追加(タグ付け)]

1. MEANとmeteor
2. Webページを公開する迄の手順 3分クッキング

    1. MEANとmeteor

LAMP(Linux + Apache + Mysql + P系スクリプト)に対して、MEAN(Mongodb + Express + AngularJS + Node.js)と言われるのフレームワークの一つ、meteorを使ったサイトの立上げ方法。

LAMPに比べ、MEANを選ぶ理由はJSで全てが済む=その言語への投資が損しないで集中化出来る、という開発面が個人的にはまず大きいですが、その分のトレードオフもあるので、まずは自分で試してみてどんだけ使えるかの肌感覚を掴んでみようと思います。

MEANのフレームワークも幾つか出てきていますが、幾つかの面を検討した結果、ここではmeteorを試してみる事にしました。
    2. Webページを公開する迄の手順 3分クッキング

Mac上で
PROJECT=onsenraking;
curl https://install.meteor.com | /bin/sh;
meteor create $PROJECT;
cd $PROJECT;
meteor;

これで
http://localhost:3000/
でページが見れるようになります。

世の中に公開するには、
https://www.meteor.com/
でアカウントを作って、そのユーザー名で
meteor login
してから
meteor deploy $PROJECT;
と打てば
http://$PROJECT.meteor.com/
でそのサービスが見れるようになる。

自分の場合は
http://onsenraking.meteor.com/
が上記で出来た。

貴方は神か、いや神ですね!、と言いたくなるような一気通貫性だが、どれだけ便利かはこの先の作り易さ&運用性が肝心。
とはいえ、試し易さは素晴らしい。

コメントする
RSS購読
RSS
ブログ表示スタイル
リスト/携帯(QRコード)
画像/動画/音声/リンク
表示開始年月
分類
全て
1.このサイトについて
2.作品DB開発/運用
3.ホームページ制作技術
4.Perl
5.C言語 / C++
6.検索エンジン&SEO
7.サッカー
8.自分のこと
9.Linux
10.旅行
11.思ったこと
12.パソコン
13.Berkeley DB
14.その他技術系
15.企画
16.スマートフォン
17.鑑賞
18.皆声.jpニュース
19.インターネット業界
20.運用マニュアル(自分用)
21.技術系以外実用書
22.料理
23.ALEXA
24.アニメ
25.会計
26.漫画
27.設計書
28.色々サイト作成
29.サーバー
30.自分専用
31.生活
32.OP/ED/PV
33.ゲーム
34.DB整備
35.新規開始作品紹介
36.英語圏の話題
37.大道芸
38.映画
39.PHP
40.ダイエット
41.Mac
42.JavaScript
43.MySQL
44.介護
45.作品DB作品追加作業
46.BI
47.Web API
48.パフォーマンス
49.インターネットの活用方法
50.Riak
51.Androidアプリ開発
52.Cassandra
53.スパム
54.写真
55.iOSアプリ開発
56.AWS
57.マーケティング
58.Web漫画
59.法律
60.mongodb
61.開発環境整備
62.Google Apps Script
63meteor
64.Pentaho
65.Ansible
66.VPS
67.技術書メモ
68.Vagrant
69.Docker
70.dokuwiki
71.Apple Watch
72.Webサービス
73.セキュリティ
74.Elastic Search
75.Wordpress
76.クラウド
77.英語
78.MVNO
79.シンガポール
80.マレーシア
81.管理人さん
82.管理人さん
83.管理人さん
日記の主な内容
サイト運営/開発
検索エンジン情報
・技術ネタ(Berkeley DB,
Linux, Perl, サイト作成)等

サイト管理
全まとめ
サーバー管理
定期処理状況
開発予定
削除提案
作品追加依頼
OP/ED追加依頼
OP/ED not found
作品提案承認欄

格言 fromスクライド
この世の理は即ち速さ
20年かければ馬鹿でも
傑作小説を書ける

助けられたら助け返す
それが俺のルール

強くなるには
一番弱い考えをする事だ
そしてその考えに反逆する




右側に何か入れてみるテスト


仕事でのサイト
介護DB
Helpyou
Doctor career
Nurse career
上へ ↑上へ 最速検索作品DB皆声