AngularJSの練習をしていたら作業用BGM再生アプリができました。
ナガレテッター
J-WAVEで流れた曲がプレイリストになっています。
プレイリストから曲をクリックすると、YouTubeにあるその曲の動画が流れます。
AngularJSの勉強のため。
新しい曲・名曲を知るきっかけになるのがラジオであることが多いです(個人的に)。なのでそのきっかけが広がるものを作りたいと思ったため。
HerokuのClock ProcessでJ-WAVEで流れた曲を定期的に取ってきてMongoDB(MongoLab)に保存しています。
さらにHerokuにRailsでAPIサーバーを立てて、MongoDBのデータを返します。
クライアントはYeomanのgenerator-angularを元にして作りました。これをGitHub Pagesにデプロイしてます。
YouTube再生の内部的な仕組みはyusukebeさん作のFMTubeの実装を参考にさせてもらいました。勉強になります。
こんにちは。今日は暖かい日和です。もう3月ですね。
さて、放置気味だったAngularJSの勉強を再開しました。
とりあえずこの本を読んでいます。
良い本と思います。
さて、Twitterのタイムラインのような無限スクロールをAngularJSで作るとどういう感じになるのかな、ということを調べてみました。
ググってみると、ズバリなものが見つかります。
ngInfiniteScroll
これでええやん、という話ですが、今回はもっと軽い実装を探してみます。
そうすると、こういうものがJSFiddleにアップされています。
AngularJS: Infinite Scrolling
なるほど、AngularJSではコレクションのレンダリングは自動でやってくれるので、一番下までスクロールしたタイミングでコレクションにデータを追加してやれば簡単にできるようです。
これを参考にして実装してみました。
無限スクロールを表示する部分です。
|
dataという名前のコレクションをリスト表示しています。 リストを囲っているdivにwhen-scrolledというディレクティブを指定しています。
whenScrolledディレクティブです。
一番下までスクロールしたらattributeの値を実行するようにします。
つまりコントローラーのloadMoreを実行します。
|
コントローラーはInfiniteScrollCtrlです。
初期時には25個の要素をdataに入れます。
loadMoreメソッドがコールされると、dataに25個追加します。
これにより無限スクロールするように見えます。
|
データを増やせば自動でレンダリングされるので、jQueryなどで実装するよりコード量が減りますね。
ここに実装おいてます。
データビジュアライゼーションが気になる今日この頃です。
D3.jsでグラフを描いてみる
を読んだのですが、割とシンプルなグラフなのにけっこう面倒くさいと感じました。
まあD3.jsがグラフに特化してるわけでないからと思います。
人気のKibanaを見たところ、グラフはjQueryベースのFlotで書いているようです。
elasticsearch / kibana
というわけで、Flotを試してみようと思いました。
Examplesにあるこれを参考にしました。
Categories
それっぽいものはすぐにできたのですが、
s5ot / gist:8970149
どうもFlotにはd3 transition APIのようなアニメーション向けのAPIがないようにお見受けしました。
ちょっとそれをゴリゴリ書くのはキツいですね。。
以前にRubyMotionでStoryboardを使う方法を調べたことがありました。
まあ使えることは使えたんですが、Storyboardとヘッダファイルの結びつけとかできなくて、あまり実用的でないなあ。。という感じでした。
最近になって、そういうモヤっとしたところを解決してくれるgemがあることをこちらで知りました。
第八回 RubyMotion で Interface Builder を使うには?
ということで、こちらで紹介されているibを使ってみました。
ibをインストール後、rake ib:project タスクを実行すると、Storyboard用のXcodeプロジェクトが作成されます。
そして rake ib:open タスクを実行すると、Xcodeが起動してStoryboardが表示されます。
このときに、ibがRubyMotionで実装したOutletやメソッドを自動でStubs.hファイルに展開してくれます。
Outletはoutletクラスメソッドで宣言的に書きます。(下記参照)
メソッドはIBActionになります。
具体的には、このように書いておいて rake ib:open を実行すると、
|
Stubs.hにはこんな感じで展開されるわけです。
|
あとはStoryboardからStubs.hにビーッと線を伸ばして紐付けをしてあければよいわけです。
やっぱりStoryboardを使うとビューのコードがググっと減るので便利ですね。全体構成もつかみやすくなるし。
これからはibを使っていこうと思ってます。
ちょっとした定期処理をやりたい事案が発生しました。できればお金をかけずにやりたい。
ということでここはHerokuでなんとかできないか調べてみたところ、Clock Processというのが期待どおりな感じでした。
Scheduled Jobs and Custom Clock Processes in Ruby with Clockwork
clockworkというgemを使って定期処理を書いて、Herokuで常駐プロセスが定期処理を実行してくれるというものです。
tomykaira / clockwork
また、clockworkを使うHerokuアプリのひな形を作ってくれるシェルスクリプトがあったりしてありがたい感じです。
tomykaira / clockwork-init.sh
clockworkはシンプルなAPIでやりたいことをすぐに書ける感じになってますが、かなり高機能でもあるようです。こちらが詳しいです。
clockwork について
ということで、ちょっとした定期処理を書くならHerokuのClock Processが便利という話でした。
]]>アプリックスのBeaconモジュール「BM1」を入手したので(お借りしたので)、試しています。
BM1にはBeaconのデータを書き換えることができるアプリが提供されていて、このアプリからproximityUUID, major, minor, measured powerを書き換えることができます。
BM1からの電波を受信するアプリを作ってみました。
BM1Receiver
参考にさせてもらったのはこちらです。
BeaconSample
Beaconの領域に入ったり出たりしたときにLocal Notificationを出したりします。
複数のBM1を運用するケースで、ProximityUUIDをアプリ経由で書き換えるのは手間がかかる。一括で管理するアプリがあると便利かも。。出荷時にアプリックスに一括設定を頼むことはできるみたい。あ、別途提供予定らしいですね。
BM1で使えるProximityUUIDはどこから発行されているのだろう?
国際規格に基づいてアプリックス社で生成されているらしいのですが。。
もし同じUUIDが他で使われていた場合は損害賠償を求めることができるらしいです。
BM1設定アプリでmeasured powerを設定できるけども、これはCoreLocationのAPIでは取得できないもよう。CoreBluetoothのAPIからは取れると思うのだけれども。
BM1の電波を受信して動作するアプリがProximityUUIDをどうやって得るか。
サーバーに問い合わせる形になりますよね。
やっぱりサーバーサイドの管理アプリが必要ですよね。
RubyMotionアプリでTestFlightを使うにあたっては、motion-testflightという便利なgemがあります。 これを素直に使わせてもらいます。
motion-testflight
こちらを使うとRakeタスク「testflight」でビルドしたアプリをTestFlightへアップロードして配布することができます。
|
このRakeタスクを実行するにはRakefileに3つのtokenを設定する必要があるのですが、それらをどこから得るのか分かりにくかったのでメモしておきます。
https://testflightapp.com/account/#api
https://testflightapp.com/dashboard/team/edit/?next=/api/doc/
Appsタブからアプリを登録すると発行される
]]>ggってみると、こちらがいろんなところからお手本として参照されているようです。
確かにとても親切な解説になっているので、これでAPNsをバッチリ試すことができました。
iOS6向けと書いてますが、iOS7でも特に違いはありません。
Apple Push Notification Services in iOS 6 Tutorial: Part 1/2
Vagrantの最近のアップデートでprovisioningにDockerが使えるようになりました。
これはDocker使って環境作ったらかっこええんちゃう?と思ったら、すでにやっている方がいました。
簡単!Vagrant+Docker+td-agent+Elasticsearch+Kibanaで流行に乗ろう
こちらを参考にDockerを触ってみて、Dockerの雰囲気と面白さがなんとなく感じられました。
ただ、Kibanaでいい感じの表示をするためにはある程度のデータがあったほうがいいので、apache-loggenでデータを自動生成するのも混ぜたいなと思いました。
そこでできあがったのがこちらになります。
s5ot / vagrant-docker-td-es-kibana-sample
vagrant upすればapache-loggenがデータを作り続け、Fluentd のtailで Elasticsearch へ流し続けてます。
http://localhost:5555 でご覧ください。
Kibanaの使い方の練習ができます。
ImageをBuildして最後にミドルウェアなりを起動するときにENTRYPOINTで起動するケースと、CMDでrun.shを叩いて起動するタイプがある。
これはどういう使い分けなんかな?と思ったけど、マニュアルに書いてあった。
Build Images (Dockerfile Reference)
コンテナの起動時にconfig的なデフォルト値を与えて起動したいなら、CMDでrun.shのようなものを使う。CMDはImageのBuild時には実行されない。固定のバイナリを叩いてコンテナを起動するならENTRYPOINTを使う。
というように理解しました。
Kibana3のイメージはarcus/kibanaを使ってるのですが、これはKibana 3 milestone 2になってます。本家はもっと新しいのが出ていてかなり機能が変わってるようなのでアップデートしたいところ。
今のところ、apache-loggenはtd-agentコンテナに同居しているのですが、apache-loggenだけのコンテナを作り、td-agentとDockerのmount Volumes機能で連携するのがスマートだと考えています。
]]>ElasticsearchにRESTでデータを投げ込んで、それをKibana3で見てみましたが、なんだかピンとこなかったので、みんなどうしているのかなとggってみると、ApacheログをFluentdで読んでElasticsearchに投げてKibana3で見る、っていうのをみんなチュートリアル的にやってる感じなのでそれをやってみました。
参考にしたのはこちらです。
Apache-loggen + Fluentd + Elasticsearch + Kibana = ログ検索デモ
本家サイトからzipをダウンロードして解凍したディレクトリで
|
で起動。 簡単です。
これまた本家サイトからzipをダウンロードして解凍したディレクトリをApacheのドキュメントルートに放り込めば動きます。
簡単です。
若干ハマりました。。
Fluentdはいろいろとインストールの方法があるのですが、なんとなくbrewでインストールしてみました。
で、FluentdからElasticsearchへ連携するためにfluent-plugin-elasticsearchというFluentdのプラグインを使いますのでインストールします。
fluent-plugin-elasticsearch
そしてFluentdの設定を追加します。
|
|
で、td-agentを起動します。
これで準備はできたのですが、トラブル発生。 td-agentでエラーが発生しました。
|
elasticsearchのpluginが見つからないと。。インストールしたはずなのですが。
調べてみると、Fluentdは独自のGEM_HOMEを持っていて、そこにインストールしないとダメらしいです。
|
これでtd-agentがpluginを見つけてくれました。
]]>ここで作成するときのポイント。
Storyboardを読み込み、rootViewControllerを設定する際に必要になります。
Segueによる画面遷移をRubyMotionでperformSegueWithIdentifierを使って実装してあげるため、IDが必要になります。
StoryboardファイルをRubyMotionアプリのresourcesの下へコピーして、
|
のようにコンパイルすると、Main.storyboardc というようなディレクトリが作成されます。
UIStoryboardのinstantiateViewControllerWithIdentifierでStoryboard IDを指定します。
|
|
これを
|
で実行すると、korejikkouの中のbundle execはcapコマンドを実行したディレクトリベースで動いてしまいます。。
困った。
こちらにあるように、bundle installには任意のGemfileを指定できるオプションがあるようですが、bundle exec にはないみたいです。
bundle のなかで bundle する
が、bundlerではBUNDLE_GEMFILEという環境変数にGemfileの場所がセットされるらしく、これを書き換えると意図してたことができました。
|
(あとで気づいたが、bundle install –gemfileしてからbundle exec すれば指定したGemfileが使われるんだろう。きっと)
]]>
|
でひな形をつくった時点で、
|
でユニットテストをすぐ実行することができる。
が、E2Eテストを実行するタスクが見当たらない。
karma-e2e.conf.js というE2Eテスト用のkarmaの設定ファイルはつくられている。
ということで、karma-e2e.conf.jsのこの部分を
|
コメントアウトする。
|
testディレクトリ以下にe2eというディレクトリをつくって
|
この下にE2Eのテストを置く。
|
そして、おもむろにターミナルでサーバーを起動して。。
|
さらに別のターミナルでkarmaコマンドを叩けばtest/e2e以下のE2Eテストが実行される。
|
どうもE2Eテストのあり方が定まっていないらしく、現在こういう中途半端な状態になっている模様です。
Add an E2E Spec When a View is Created
ストレートなOpenID認証ではないのですが、こういうユースケースをRedmineで実現しようとしました。
RedmineはもともとOpenID認証の機能を備えており、adminでログインして、管理 - 設定 - 認証からOpenIDによるログインを有効にすることができます。
しかしこれだけでは上記のようなユースケースを実現できないので、Redmineをカスタマイズしました。こちらに置きました。
redmine-google-apps-openid
こちらが参考になりました。ありがとうございます。
RailsでGoogle AppsのOpenID対応アプリを作る
globalの名前がついたgemsetを消さないと素のgemは消せないようです。 なのでまずglobalを消します。
|
|
|
参考にさせてもらったのはこちらです!
RVM の gemset を使う
ありがとうございます!
まず参考にしたのはこちらです。
Xcode4.5でiOSアプリのプロジェクト名を変更する方法
ざっとやることは
で、これで基本的に完了な感じですが、自分の場合はARCがらみのエラーがたくさん出てきました。
これはプロジェクトのコピーではソースコードファイルのCompiler flagsは移行されないことが原因でした。
元プロジェクトのCompiler flagsの設定を新プロジェクトに設定して解消。
さらにこのあとにplistの警告が出てきました。
これには下記のとおりCopy Bundle Resoucesからplistをいったん取り除いてから再ビルドで解決しました。
he Copy Bundle Resources build phase contains this target’s Info.plist file …
このたびRuby 2.0がめでたくリリースされたのでアップグレードしてみました。
で、ちょいちょいつまづいたことをメモしておきます。
まずRuby2.0のインストールにつまづきました。 ビルドでopensslがほにゃららのエラーがでてこけました。
|
(参考) Installing Ruby 2.0.0-preview1 with RVM on OS X
iconvが標準でついてこなくなりました。
protectedメソッドにrespond_to?するとfalseが返ってくるようになりました。 私はテストがfailしたことがきっかけでこれが分かったのですが、最初はなにが悪いのかわからなくて混乱しました。
true指定でprotected/privateメソッドもrespondableになる。
(参考) PROTECTED METHODS AND RUBY 2.0
ビルド中にこんなのを吐いて落ちました。
|
|
で4.0.0 RCのPassegerをインストールしてビルドします。
(参考) passenger-install-apache2-module doesn’t work on ruby 2.0
あと、この4.0.0 RCのPassegerではRails.rootにconfig.ruがないとRails 1 or Rails 2と見なされて起動しません。 こんなエラーメッセージが出ました。
This application is a Rails 3 application, but it was wrongly detected as a Rails 1 or Rails 2 application.
This is probably a bug in Phusion Passenger, so please report it
なのでconfig.ruをお忘れなく。
(参考) Passenger 3.9.1.beta incorrectly detects Redmine 2.2.1 as Rails 1/2 app
]]>さっそくセットアップしていると、WiFiに接続できないエラーが。 これは1台目のときも同じことがありました。なのでメモしておきます。 (ちなみに自宅ではAppleのTimeCapsuleを無線ルーターに使っています)
WiFiネットワークの詳細を選んで、手動で設定します。 接続タイプに「スタティック」を選択します。 該当のWiFiネットワークに接続できているPCやスマホのネットワーク設定を参考にして
の設定をそれぞれ入力します。 IPアドレスは他の機器とかぶらないようにします。(192.168.1.xのxを9とかにして)
]]>こちらのとおりにやってサーバーを起動してアクセスしたところ、 “File to import not found or unreadable: compass” のエラー。 ググってみると、rails-compassの導入にはRailsのバージョンとかなにやらが絡んでいろんな症状が出ている模様。
https://github.com/Compass/compass-rails/issues/19 を眺めていきますと、どうもassetsグループの中に定義しないやり方が有力のようなのでやってみました。 結果、それでうまくいきました。
|
|
assetsグループとはなんなのか・・ asset pipelineを支えるsprocketsのためのほにゃららだと思うのですが、そこから外しちゃうんだ・・ということでメモっておこうと思いました。
ちなみにこの難儀したときの環境は ruby 1.9.3p362 Rails 3.2.9 でした。 今現在Railsは重大なSecurity Fixがあったため3.2.10にアップデートすべきですね。 http://weblog.rubyonrails.org/2013/1/8/Rails-3-2-11-3-1-10-3-0-19-and-2-3-15-have-been-released/
]]>
|
|
|
|
|