meteor
アクセス記録[推移 / PV内訳(過去1日 / 過去1週間) / 外部アクセス元 (昨日 / 過去1週間) / ログイン論客足跡]
| 私書() / / | 評価( /) 投票 /共: / | ファン登録 // | DB構築() | ブログ [書く] |
|---|
|
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. ただカウントアップするプログラム
http://localhost:3000/ で挙動を確認します。 3. Todoアプリ フロントサイドBlaze版
http://localhost:3000/ で挙動を確認します。 4. Todoアプリ フロントサイドReact版
http://localhost:3000/ で挙動を確認します。 2. iOSモバイルアプリとして挙動を確認 1. Xcodeをインストール https://developer.apple.com/xcode/ 2. Cocoapadをインストール sudo gem install cocoapods; pod setup; 3. iOSエミュレーターの実行 カウントアッププログラムの場合
Xcodeで実行させたいプラットフォームを選んで、再生ボタンを押して実行。 実行するにあたってエラーメッセージが出る場合には、その内容に従って解決していく（Agreementに同意等々）。 因みに、アプリといっても、クライアント・サーバー型として最初は作られている形になっているので、PCとのコネクターを外すとエラーが表示される事になるかと思います。 4. iPhone実機での実行 カウントアッププログラムの場合
USBケーブルでiPhoneとつなげている状態で、ビルド対象として実機のiPhoneを選んでビルドを実行 3. Androidアプリとして挙動を確認 1. Javaをインストール https://java.com/en/download/ 2. Android Studioをインストール https://developer.android.com/studio/index.html 3. Androidエミュレーターの実行 カウントアッププログラムの場合
Xcodeで実行させたいプラットフォームを選んで、再生ボタンを押して実行 4. Android実機での実行 カウントアッププログラムの場合
2. Meteor + Reactで開発をしてみる 開始するにあたって、TodoアプリのReact版が自分が見た中では開発を始めやすいので、それから始めてみます。 例えば、travelplanというプロジェクトを始めて見る場合。
1. Todoアプリに追加して自分が使っているモジュール
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
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を付けざるを得ません。 ｗｗｗ無しのルートドメインだけでアクセスできるようにするには、s3バケットをルートドメイン名で作ってウェブサイトとして公開する設定とします。 因みに、設定としてそこにアクセスしてきたユーザーは全てwww付きの方に転送する設定を選びます。 そしてRoute53でｓ３のウェブインスタンス名を指定した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
これは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の動画コースもあり、役立ちます。
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
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上で
これで http://localhost:3000/ でページが見れるようになります。 世の中に公開するには、 https://www.meteor.com/ でアカウントを作って、そのユーザー名で
http://$PROJECT.meteor.com/ でそのサービスが見れるようになる。 自分の場合は http://onsenraking.meteor.com/ が上記で出来た。 貴方は神か、いや神ですね!、と言いたくなるような一気通貫性だが、どれだけ便利かはこの先の作り易さ&運用性が肝心。 とはいえ、試し易さは素晴らしい。
|