読者です 読者をやめる 読者になる 読者になる

読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Meteorのappcacheの有効活用

Meteorは、appcacheというパッケージを追加するだけで、Application Cacheを利用できます。 手作業だと、manifestをしこしこ書かないといけないのでとても楽です。ただ、Meteorのappcacheは静的リソースのサーバー側での動的変更をサポートしていて、このた…

meteor.comにデプロイした古いMeteorアプリでのsiperableの注意点

追記 去年の10月にAJAX Crawling (Deprecated)はご覧の通りdeprecatedになっており、meteorのspiderableパッケージは今となっては特に有効ではないということのようです。 Meteorアプリを検索エンジンのボットに読み取ってもらうにはspiderableパッケージを…

TAPi18nのページロード時の振る舞いの改善

Meteor + Iron Routerの国際化にiron-router-i18nとTAPi18nを使っています。 TAPi18nはなぜかデフォルト言語として英語を読み込み表示、その後setLangaugeで言語が設定されるとその言語に切り替えると仕組みになっています。 なので、ネットワーク遅延の目立…

Iron Routerのフックの覚書

Iron Routerには以下の5つのフックが定義できるようになっている。 onRun onRerun onBeforeAction onAfterAction onStop その他に呼び出しのタイミングを考慮する上で、 subscriptions waitOn オプションがある。ここまでで1つ覚えておくことは、onRun, onSt…

アプリを検索クローラーに見てもらう

作ったMeteorアプリをGoogleで検索すると、URLとタイトルは引っかかるのですが、中身が空白です。 ウェブアプリは仕方がないのかと思っていたのですが、ちゃんと枠組みがあるのですねぇ。 Making AJAX applications crawlable Meteorにもspiderableというパ…

MeteorでRatchet

モバイルCSSフレームワークRatchetのMeteorパッケージはいくつかありますが、ほとんどは、オリジナルのファイルをラップしたものでした。 1つだけ、ページ遷移のアニメーションをサポートしたものがあったので、そのご紹介と私の改良を簡単に書きます。 htt…

Iron RouterとappcacheとUIWebView

appcacheを入れたMeteorのアプリがUIWebViewで動かないことが多々あるという不具合に半年前気がついたのですが、ようやく原因がわかりました。因果関係は置いておいて、原因は、 iOSのUIWebViewやWKWebViewは、window.locationにURL文字列を代入した時、高確…

複数のアプリで1つのアカウントデータベースを使うその2

以前に、remote DDP serverのデータベースでユーザー管理を行う方法を書きました。 複数のアプリで1つのアカウントデータベースを使う この記事でも書いた通り、OAuthなどcallback URLを使う認証の場合はうまくいかないので、以下のように考えてみました。1.…

サインインユーザーの現在閲覧ページモニタ

前回に続いて、サインインしてるユーザーの閲覧状態をモニタするコードです。苦労したところは、サーバー側を更新した時のイベントです。明示的なAPIはないので、リアクティブなMeteor.status()を使いました。 # (C) 2015 ICHIKAWA, Yuji (New 3 Rs) ### Iro…

Current Visitorsパッケージ

Meteorのパッケージを初めて登録してみました。 Iron Routerを使っている時に、各ページを見ている訪問者数を取得するパッケージです。 https://github.com/new3Rs/current-visitors

Iron Routerとappcache

Meteor/Iron Router1.0以前ではappcacheと組み合わせると、パラメータを含むURLもアクセス履歴に応じてアプリケーションキャッシュに保存されてしまうという不具合がありました。 1.0になった時これを回避するために、パスのハッシュ化が取り入れられました…

"Npm is not defined"

Meteor 1.0、調子よく動いていたのですが、突然、"Npm is not defined"というエラーがクライアント側で出るようになりました。NPM関連なので、meteorhacks:npm, npm-containerパッケージをremoveしてaddしてみましたが直りません。packages/npm-containerフ…

接続クライアント数の数え方

(オリジナル記事よりもっと簡単にかけたので更新しました。(2014年12月23日)) Stackoverflowでも色々苦労されているようです。サーバー側でこんなコード(CoffeeScript)を書きました。 NumOfSessions = new Meteor.Collection 'numofsessions' Meteor.publish…

「英語のおしゃべりの練習」サイト

英語を勉強してみたいという方が近くにいたので、翻訳機能付きチャットボットを作りました。 (飾りっ気一切なしのサイトです…) http://foreign-chatter.meteor.com/ 最初、Pythonの勉強にと思って、必要な材料集めて予備実験をしたのですが、チャットUIの実…

複数のアプリで1つのアカウントデータベースを使う

Meteorは基本シングルページウェブアプリです。 なので、デスクトップ用ページとモバイル用ページを作りたい場合、レスポンシブデザインということになりますが、レスポンシブデザインには限界がありネイティブアプリのようなUIは実現できません。なので、デ…

Twitter Streamingを使う時にはエラーイベントも処理しておく

果たしてパッケージの問題なのか、Meteorとの副作用なのか、Node.jsのTwitterパッケージを使ってストリーミング受信すると、例外が発生してMeteorが再起動することが時々起こっていました。Twitterパッケージの中でJSON.parseに失敗すると、errorイベントを…

Twitter widget.js周辺のworkaround

サイトにTwitterボタンを入れていて、次はLINEで送るボタンを入れてみました。 すると、 Cannot read property 'match' of undefined という例外がwidget.jsの中で発生するようになって、Twitterボタンが正常に表示されません。 「LINEで送るボタン」は配置…

Iron-RouterとWeibo share button

Meteorアプリに新浪微博のシェアボタンを追加するに以下のようにします。 1. サーバーサイドで WebApp.addHtmlAttributeHook (request) -> 'prefix="wb: http://open.weibo.com/wb"' (CoffeeScriptで書いてますが、同様の内容をJavaScriptで書いてもOKです) …

Error: must use ordered observe with skip or limit

Meteorを0.8.0にアップデートした際、テンプレートのrenderedの仕様が変わったので、前のコードと同様の振る舞いをさせるために、renderedの中でobserveを追加しました。すると、 Error: must use ordered observe with skip or limit というエラーが出力さ…

Iron-Routerを使っている場合の0.8.0へのアップグレードと0.7.1.2へのダウングレード

Meteor 0.8.0がリリースされましたね。 今回のアップデートはレンダリングエンジンが一新されて、テンプレートのrenderedハンドラでHTML以外の色々な更新をしていたアプリには大きな変更になります。 以前のバージョンのレンダリングエンジンは、基本的にリ…

requestを使う

MeteorのHTTPはencodingがutf8固定で、バイナリ受信ができません。 なので、encodingを指定するために、npmのrequestを使いたくなりますが、非同期なのでMeteorの中では使い勝手が悪い。 そんなあなたにこの一行。(CoffeeScriptです) request = Meteor._wrap…

Iron Routerとsubscribeその2

前回、ページ遷移の高速化を行いましたが、実質、ページ遷移毎にsubscribeが更新されて、まだ不満がありました。イメージとして、最大のsubscribeが済んだら後はページ遷移でsubscribeの更新は起こらないようにしたい。 で、以下のような感じに修正しました…

Iron Routerとsubscribe

マルチページアプリの場合、通常ページ毎に扱うデータベースが異なるので、Iron RouterではbeforeかwaitOnを使ってsubscribeすることになります。 データ量の大きなものをアクセスする場合にはwaitOnを使うと表示まで時間が掛かるので、beforeを使ってリアク…

Advent Calendar 11 - Iron Routerを一言で言うと

Meteorはシングルページウェブアプリのプラットフォームです。 マルチページにするにはmrtでIron Routerパッケージを追加します。 https://github.com/EventedMind/iron-router Iron Routerは(シングルページウェブアプリを拡張したためか)基本的にクライア…

Advent Calendar 10 - "Discover Meteor"が一日だけ無料公開

Meteor社自身もお勧めのMeteor本"Discover Meteor"が本日だけ全文無料公開されています。 http://free.discovermeteor.com/

Advent Calendar 9 - 番外編 Twitterの自動フォローバック〜私は見た!Twitterの闇の一端を〜

Meteor固有の話ではありませんが、面白いことが起こったので、実装含めてご紹介。Twitter APIとNPMのtwitterパッケージを使えば自動フォローバックが簡単に実装できます。 meteor add npm packages.json { "twitter": "0.2.4" }サーバー側 Twitter = Meteor.…

Advent Calendar 8 - MeteorでSNS

Meteorのaccounts関連のパッケージははアカウント管理にソーシャルサービス連携をサポートしています。 ユーザーにソーシャルサービスアカウントでアプリにサインインしてもらい時には、 accounts-facebook accounts-github accounts-google accounts-twitte…

Advent Calendar 7 - appcacheでアプリケーションキャッシュ

Meteorでアプリケーションキャッシュを有効にする方法は簡単です。 meteor add appcache ピリオド。 これでマニフェストを自動生成してくれます。マニフェストはサーバーを再起動する度に再生成されます。 ウェブアプリ(クライアント)はマニフェストが更新さ…

Advent Calendar 6 - Meteorでのユニットテスト

Meteorでのユニットテストは、Meteorの部分に関してスタブを作って、Mochaで流すのが一番よさそうです。すいません、以下、CoffeeScriptでのコーディングを前提にしています。 share = {} Meteor = require: require users: findOne: -> methods: -> startup…

Advent Calendar 5 - ライブHTMLの詳細

Meteorはでは、テンプレートHTMLにヘルパーメソッドでリアクティブなデータを盛り込むとそのHTMLの該当部分が自動的に更新されます。以下はMeteorの公式ドキュメントの例。 <body> {{> players}} </body> <template name="players"> {{#each topScorers}} <div>{{name}}</div> {{/each}} </template> Template.players.top…

Advent Calendar 4 - htmlタグへの属性追加方法

Meteorは、デフォルトではシングルページのウェブアプリケーションを作ることになります。 (iron-routerというパッケージを追加すると、マルチページにすることができます)MeteorのHTMLファイルは実際にはHTMLではなく、htmlタグを含まず、headとbodyとtempl…

Advent Calendar 3 - NPMの使い方

本格的なウェブアプリケーションを作ろうと思うと、既存のライブラリを活用することが事実上不可欠です。Meteorは、クライアント、サーバーともJavaScriptの世界ですから、クライアントではブラウザ用JavaScriptライブラリ、サーバーではNode.js用ライブラリ…

Advent Calendar 2 - autopublishとinsecureパッケージ

Meteorでアプリケーションを作るとき、最初に meteor create app-name を実行します。すると、app-nameという名前のフォルダーが生成され、中に必要なファイルやテンプレートが展開されます。 この状態でアプリケーションにはautopublishとinsecureというパ…

Advent Calendar 1 - Meteorとは

12月になると、各所でクリスマスまでプログラミング関連の記事を連載するAdvent Calendarが盛況になります。 私も遅ればせながらやってみようかと思いました。題材はMeteor。 http://www.meteor.com/ Meteorはウェブアプリケーションのプラットフォームです…

MeteorのHTTPはcontentにBufferも受け付ける。

Meteor.methodsでTwitterに写真付きstatusの投稿をするコードを書きました。 最初非同期で書いたのですが、そしたらクライアント側で投稿が成功したかどうか確認するタイミングが得られませんでした。 で、Meteorのhttpパッケージを使って書き直したのですが…

囲碁対局中継サイト「耳赤」

進行中の対局をリアルタイムで中継するサイトを作りました。明日の名人戦第五局で早速運営する予定です。 気になる局面から検討をすることもでき、その結果を画像として添付してツイートすることができます。囲碁が好きで、Twitterをしていて、中継を見るほ…