railsからsocket.ioへemitする
はじめに
今回やりたかったことは、railsサーバーからsocket.ioにつないでいるブラウザにemitしてメッセージを送るとういこと。ちょっと調べたら「socket.io-ruby-emitter」というgemがあったのでこれつかったらいけた。
で、環境としては以下。
・railsサーバー
・socket.ioサーバー
・redisのpub/subを使用
redisのインストール
【socket.io】複数サーバーへの対応メモ - とりあえずphpとか
ここに書いたとおり。
rails
socket.io-emmiterをインストール
Gemfile
・・・ gem 'socket.io-emitter'
class SampleController < ApplicationController
def index
@emitter = SocketIO::Emitter.new(
redis: Redis.new(
:host => 'redis host',
:port => 'redis port'
)
)
@emitter.emit("server2client", {value:'message from rails'})
render :text => 'OK'
end
end
socket.io
socket.ioインストール
$ npm install socket.io sockt.io-redis
server.js
var io = require("socket.io").listen(3000);
var redis = require("socket.io-redis");
io.adapter(redis({
host: "redis host",
port: "redis port"
}));
io.sockets.on("connection", function(socket) {
socket.on("client2server", function(data) {
socket.broadcast.emit("server2client", data);
});
});
html
<input type="text" id="text" />
<input type="button" value="send" onclick="send();"/>
<div id="messages"></div>
<script src="/node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
var web = "socket.io host";
var socket = io.connect("http://" + web + ":3000/");
function send() {
var value = document.getElementById("text").value;
socket.emit("client2server", {
"value": value
});
}
socket.on("server2client", function(data) {
var messages = document.getElementById("messages");
var text = document.createTextNode(data.value);
messages.appendChild(text);
});
</script>はまったところとしては、rails → ブラウザなの、上記の例だとでrailsからはserver2clientをemitしなくてはならないところがわかりずらかった。
「redis-cli monitor」で、各クライアントがどのようにpublishしてきているかを見ながらやるといいかも。以上です。
ionic(cordova)でdatepickerを使う
日付入力のUIを当初は「input type="date"」で実装していたのだが、「消去」ボタンを消したかったのだがこれのやりかたがわからず。。素直にDatepicker使うことにした。
プラグインインストール
$ ionic plugin add cordova-plugin-datepicker
テンプレート
<ion-view ng-controller="SampleCtrl"> <input type="date" readonly ng-click="openDatepicker()" ng-model="date" /> </ion-view>
コントローラ
・・・
.controller("SampleCtrl", function($scope, $timeout) {
$scope.date = new Date();
var OK_TEXT = 'OK';
var CANCEL_TEXT = 'キャンセル';
$scope.openDatepicker() = function() {
window.plugins.datePicker.show({
date : $scope.date,
mode : 'date',
// iOS
doneButtonLabel: OK_TEXT,
cancelButtonLabel: CANCEL_TEXT,
// Android
okText: OK_TEXT,
cancelText: CANCEL_TEXT,
// 日本語
locale: 'ja_jp'
}, function(date) {
// $timeoutしないと反映されなかった・・・
$timeout(function() {
$scope.date = new Date(date);
});
});
};
};「input type="date"」にそのまま入れられて使いやすいとも思った。以上です。
SNSでAPNS（iOSプッシュ通知）使う場合のJSONひな形
アプリ側だけawsのコンソールからチャチャッと動作確認しようと思ったらけっこうハマったのでひな形メモしておく。
このエラーがなかなか消えず。。
Invalid parameter: Message Reason: Invalid notification for protocol APNS_SANDBOX: Notification is malformed (Service: AmazonSNS; Status Code: 400; Error Code: InvalidParameter; Request ID: xxxxxxxx-xxxx-xxxx-x\ xxx-xxxxxxxxxxxx)
やりたかったのは「タイトル」「本文」「カスタム項目」の送信。
{
"APNS_SANDBOX":"{\"aps\": {\"alert\": {\"title\":\"タイトル\",\"body\":\"本文\"}}, \"custom_item\": \"カスタム項目\" }"
}ダブルクォーテション多すぎで意味わからなくなった。。以上です。
【cordova】Androidプラグイン開発でgradleに設定を追加する
こんな感じでいけるみたい。
plugin.xml
<platform name="android"> ・・・ <framework src="src/android/sample.gradle" custom="true" type="gradleReference" /> </platform>
sample.gradle
allprojects {
repositories {
maven {
url "https://maven.google.com"
}
}
}
dependencies {
compile "com.android.support:appcompat-v7:25.4.0"
}以上です。
ionic(cordova) 開発で使ったcordovaプラグインやライブラリまとめ
最近、ionicを使ってハイブリッドアプリをいくつか作ったのでそのときに使ったcordovaプラグインとionic・angular関連のJSライブラリを忘れる前にまとめておく。
ionic系
ion-slides-tabs
タブの画面遷移をスワイプでも実装するのに使用。アプリぽいUIが実現できた。
ionic-segmen
iOSのセグメントコントロールを実装するの使用。
ionic-material
高さの異なる2列のリスト表示を実装するためにionic-materialのcard-galleryを使ったら簡単に実装できた。
angularjs
ngCordova
cordovaプラグインをラッパーして使いやすくしてくれる。あと、結果をプロミスとして返してくれるのもメリットと思ってる。
ngStorage
ローカルストレージを扱いやすくしてくれる。
ng-file-upload
input type=fileを扱いやすくしてくれる。デフォルトだとng-modelに対応していない？かわからないけどこれ使ってREADMEに書いてある内容を参考にしたらやりたいことできた。
angular-chart.js
グラフを表示する必要があったのでchart.jsを使用。それをangularでも同じように使えるようにしてくれる。
jsTag
タグ入力のUIを実装する際に使った。ngTagInputというのがメジャーぽいのだが、自分のシステムでは何かとバッティングしてしまいうまく動かなかった。そこで探して出てきたのがこれで機能もシンプルそうだけで十分だった。
angular-translate
英語対応する際に使用。jsonファイルで各言語のテキストを定義する形で簡単に呼び出すことが可能。
angular-dynamic-locale
英語対応する際に使用。時刻を扱う際に月や曜日の表記を言語ごとに自動で切り替えてくれる。
cordovaプラグイン
com.verso.cordova.clipboard
クリップボードへのコピーを実装するために使用。
cordova-plugin-add-swift-support
iOSのプラグインを開発する際にswiftで書くために使用。
cordova-plugin-camera
アプリでカメラを使えるようにするために使用。撮った画像をサーバーにアップロードする際に使用。cordova-plugin-file-transferと合わせて使った。
cordova-plugin-googleplus
Googleアカウントでのログインを実装するのに使用。
twitter-connect-plugin
Twitterアカウントでのログインを実装するのに使用。
cordova-plugin-image-picker
端末のフォトライブラリから画像を選択させるのに使用した。
cordova-plugin-inappbrowser
外部サイトをブラウザで表示するのに使用。
phonegap-plugin-push
プッシュ通知を実装するのに使用。
cordova-plugin-calendar
カレンダーアプリとの連携で使用。
cordova-plugin-network-information
ネットワーク状況を判定するために使用。「ネットワークに接続していません」画面とかを実現するのに使用。
cordova-plugin-screen-orientation
画面ごとにアプリの向きを固定にするのを実装するのに使用。
cordova-plugin-x-socialsharing
SNSやメールなどでシェアするダイアログを簡単に実装できた。
cordova-sqlite-storage
アプリからSQLiteを使うために使用。
cordova-plugin-google-analytics
Googleアナリティクスを使うために使用。
cordova-plugin-file-transfer
ファイルのアップロードとダウンロードを実装するのに使用。
cordova-plugin-dialogs
ionic2だとわからないけど、ionic1だとデフォルトのモーダルのUIがWebっぽくて嫌だったので使用。
こういうの書くときはGithubのURLものせておいたほうがよいのかな。ずらずら書いたけど、以上です。
ionic(cordova)にてion-nav-viewで$ionicHistory.goBackで2つ以上前に戻る
今回たまたまやる機会があったのでメモしておく。
$ionicHistory.goBack(-2);
これだけ。以上です
ionic(cordova)にてinstagram でのログインを実装
やりたいことは、instagramアカウントでのログインの実装。調べたところではSDKがなさそうで、webと同じような実装になりそう。また、投稿したりシェアしたり?のプラグインはあるみたいだけどログインはできなそうなので今回は自前で作る。
やることは以下。
・アプリケーション登録
・cordova-plugin-inappbrowserを導入
・プログラム実装
アプリケーション登録
https://www.instagram.com/developer
こちらのページから「Register Your Application」をクリックしてアプリを作成する。作成する際にサイトのURLとコールバックURLが必要になる。また、作成すると「Client ID」と「Client Secred」が発行されるのでこちらをメモしておく。
cordova-plugin-inappbrowserを導入
ブラウザで認証画面を表示したいのでInAppBrowserを使えるように。
$ ionic plugin add cordova-plugin-inappbrowser
プログラム実装
var auth_url = 'https://api.instagram.com/oauth/authorize/';
var user_url = 'https://api.instagram.com/v1/users/self/';
var redirect_uri = 'コールバックURLに指定したURL';
var client_id = 'クライアントID';
var url = auth_url + '?client_id=' + client_id + "&redirect_uri=" + redirect_uri + "&response_type=token";
this.iframe = window.open(url, 'iframeName');
var self = this;
self.iframe.addEventListener('loadstart', function(e) {
if (e.url.indexOf(redirect_uri) == 0) {
self.iframe.close();
var token = e.url.replace(redirect_uri + "#access_token=", "");
$http.get(user_url + '?access_token=' + token)
.then(function(result) {
// 成功
})
.catch(function(err) {
// 失敗
});
}
});こんなかんじで取れた。以上です。
