javascript

Firebaseがすげー便利でびっくりした

なるべくBlogに記事を書いていきたいと言ったので積極的に「良い!」と思ったことは記事にしたいりっくんですこんにちは。

とりあえず、進捗はこんな感じです。

Firebaseいいかもしれない

先日の記事で、Firebaseを使おうと思う、でもここまで手を広げていくと大変かなぁとか言ってましたが、
React.js(やっと)使ってみてる | SteadyWorX

firebase
バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。
firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと – Qiita
でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

実際に触ってみたら結構簡単で、且つやりたいことがそのままできそうなのでこのまま採用しようと思いました。という話です。

Realtime Database

FirebaseのDB機能、NoSQL系だってことしかしらなくて、よく見たらRealtimeって入ってるんですね。
で、そこから色々見ていったら、やっぱし更新を検知することができるっぽいんですよ(というか、そういう使い方がメインなのかな?)

ということで、現在のリロール状況を保持しつつ、更新があったらstateを変更する感じのコードを買いてみました。
実際の動きがこちら

これはいいですね、これならチームごとに更新をリアルタイムに取ってこれます。

後はこの辺に所持チャンプ情報周りもすべて格納していけば結構いい感じになるんじゃないかなぁというのが今のところの感覚です。
楽しくなってきた!!!!

React.js(やっと)使ってみてる

ちょっと体重がやばい感じになっていてゆるくダイエット中のりっくんですこんにちは。
Blogの更新、いよいよちゃんとやっていきたいので最近やってることでも書いておきます。

React.js触ってる

  • 作りたい物
  • 作る時間
  • モチベーション

全部がないとなかなか新しい技術がさわれません。
すげー広くの分野でHello Worldレベルは触ってるんですけど、なかなか理解できないですね。

2周遅れくらいではあるものの、Reactは触りたかった技術の一つなのでこれを気にちょっと使ってみています。

こんなの作ってる


League of Lgendsっていう神ゲーがあるんですけど、いま一緒にゲームをしている人はARAM(All Random All Mid)をよくやるメンバーで、5人を超えると8人、ないしは10人頑張って集めてカスタムゲームを開催しています。
ですが、カスタムゲームのARAMではリロールが出来なくて、しょうがなくドラフトピックのARAM(Randomではない、ハウリングアビスマップのドラフトピックというだけ)を行っていました。
※リロール = 完全にランダムだとツライので、最高2回、自分のチャンプをまた振り直すことができる。

それを雑にWebアプリ化すればなんとかならんかなぁと思ってふらーっと休日、夜間にポチポチ作っているという状況です。

わからんことだらけでつまりまくって入るんですが、これが結構面白いですね。
jQueryで作ったらまぁ形はできるんだろうけど、データがごっちゃごっちゃになるので今回はReact.jsを使っておいてよかったような気がします。

eslint

後ついでに、eslintも入れてAirbnb JavaScript Style Guideも適用させてます。
これはTwitterに書いたんですが、

でもこの大リーグボール養成ギブス的な感じ、好きだわ。出来上がったコードも読みやすいし。

です

機能が足りない・・・

で、まぁとりあえずリロールできるところまで来たんですが(くっそ見にくいけど、名前の横にREROLLボタンが有る)話していて

  • やっぱし自分が持ってないキャラが出て来るのって微妙だよね
    ユーザー管理と所持チャンプ登録したい
  • この状況を共有できないとめんどいよね
    これは、URLで共有できるようにしたい、パラメーターに全部突っ込んで的な
  • デザイン、案はあるけどちょっとまともにしないと

等々、色々課題があります。

firebase

バックエンドは書かなくていいかなぁなんて思ってたんですが、この感じだと適当にAPIサーバーくらい作ったほうが良いかもとなって、もういっそfirebase試すか!って感じになっています。で、ググってたところで整理がてらBlogにまとめてる。

firebaseもちょっとだけ触ったんですけど、RDBばかり触ってたのでNoSQLはまともに触ったことがなくて、どういうDB設計にしたら良いかからちょっと記事を読んでる段階です。
Firebase Realtime DBを実践投入するにあたって考えたこと - Qiita

でもこうやっていろいろな技術に手を加えていくと、だんだんわからないことの許容量が増えて死ぬというミライが見えますね、ツライ。

何にしても楽しい

実はいろいろあってこんなことしてる場合じゃないんですが、割りと楽しいです。
ぱぱっと作ってやることやらないと。

IRCbot

どうもこんにちは、E3とかWWDCとか見たせいですごく眠いりっくんですこんにちは。とりあえず11インチのAirが欲しいです、あとMac Proはダサいと思います。

さて未だにNode.jsを使ってるんですが、今でも動かしてるTwitterbotの他に、IRCbotがそこそこ完成したので、とりあえずログ残す的な意味でBlogにちょっとだけ書いておきます。

Nodejs_logo_light

Node.jsでIRCbotを作る方法的な

nvmとnpmはインストールしておいてください。

nvm use v0.8.3
npm install irc
npm install iconv

Nodeのバージョンはv0.8.3。v0.11.2だと何かのパッケージが動かなかった気がします。
パッケージの詳細についてはこちらより
https://github.com/martynsmith/node-irc
https://github.com/bnoordhuis/node-iconv

var irc = require('irc');
var iconv = require('iconv');

var conv = new iconv.Iconv("ISO-2022-JP", "UTF-8");
var conv2 = new iconv.Iconv("UTF-8", "ISO-2022-JP//TRANSLIT//IGNORE"); //TRANSLITとIGNOREを指定しておかないと落ちる
var client = new irc.Client('irc.hogehoge.net', 'YourNickname', {
    channels: ['#Channel']
});

client.addListener('message#Channel', function (from, message) {
  console.log(from,':',message);
  client.say('#Channel', conv2.convert('メッセージを受信しました!'));
});

単純にメッセージを返すだけならこれだけで動きます。IRCにつなぐだけなら1行目と5行目だけで接続できるねこれ・・・。うちの鯖がISO-2022-JPを使っていたので、その文字コード変換用にiconvも入れて変換してます。なんかやる時にアレした気がする・・・。

一応、今動かしてるのはmessageを見て、あるキーワード入ってたらWikipediaから情報拾ってくるbotになってます。それをやるにはRequestを使うんですけども。
https://github.com/mikeal/request
常用にするにはまだ少し不安定だけど、とりあえず結構簡単に作れますね。

前回も言ったかもしれないけど、foreverってのを使えばNodeのアプリケーションを簡単にデーモン化できるので、それで立ち上げっぱなしにするとか良いと思います。

ちょっと前に見たんだけど、Nodeって確かにこれだなってのを最後に貼って、このエントリは終わります。面白いです・・・。

TwitterBotをNode.jsとntwitter使って運用中、参考記事紹介

どうもなんか今日ちょっと肌寒いですりっくんですこんにちは。パズドラをやってるわけですが、ゲリラダンジョンとか行き始めたらランクが上がりませんぐぬぬ。

Nodejs_logo_light

パズドラ用Bot

俺用Bot作りました。まぁ横流しするだけなんですけど。
ゲリラダンジョンを確認するには@pazubotを見るのが楽なんですが、夜確認するだけだとすぐ忘れて、結局朝も確認して、ついでに直前に確認する・・・にも500もフォロー居ると流速が結構早くて辛い、みたいな事になっててですね・・・。まぁめんどくさくて、Botに監視させて俺にリプライ送ってもらおうと思ったのが今回のBot作成の発端です。

ってことでタイトルにもありますがNode.js使って運用してます。初めはPythonあたりでやるかと思ったんですが、書き慣れたjavascriptを使えるってのが個人的には良いなぁと。あれこれプラグイン探してたら「ntwitter」ってのが有ったのでそれ使ってやってみました。

Node周り

一応Node.jsの環境とか描こうと思うんですが、なんの策略かほとんど僕と同じ構成にしてるBlog記事を発見したので流用しまふ。

node.js node.jsスクリプトをforeverでデーモン化する -でじうぃき – 

forever突っ込んでみたらびっくりするほど簡単にデーモン化できて、起動しっぱなしにできました。今回はBot作成だったので動かしっぱなしどうするかなぁと思ってたんです・・・。
インストールなんかもググってください。一応nvm経由で入れました。

3分でCentOS6にnvmとnode.jsをインストールする方法 – DQNEO起業日記 – 

一応鯖がCentOSな環境だったのでそれに合わせて。とは言えローカルでも動かさないといけないのでMacでも確認したのですが、なんかv0.8.2?とかが入ってたんですよね、それで結局Macでもnvm経由でv0.11.2を入れなおしてます。

Twitter周り

AvianFlu/ntwitter · GitHub – 

コレ使ってます。しかしREADMEにあまり情報がないのでソース読まないといろいろよくわからない。で、なんかぐぐってたら解説してくれてるサイトさんが。ソースリーディング力は付けないといけないっすね・・・。

node.js ntwitter – 

思ったよりも簡単で、しかもStreamingAPIにも対応しているという。

特にこったことはやってないけど、要は@pazubotのツイートを見て、自分の組に該当しているツイートだったら
”@Ricckn ”+その内容
って形でリプライを飛ばすみたいな感じ。一応合計で140字を超えるとエラー吐いてスクリプト自体がストップするのでチェックして、超えたら形成しなおしてはいますが。一応Tweetするようの関数は作っておくと便利だと思います。

var Twitter = require('ntwitter');

var twit = new Twitter({
  consumer_key        : 'consumer_key',
  consumer_secret     : 'consumer_secret',
  access_token_key:   : 'access_token_key',
  access_token_secret : 'access_token_secret'
  });

//Tweetする関数
function tweet(tweetMsg){
  twit.post(
      //"http://api.twitter.com/1/statuses/update.json", APIは1.1になったよ!
      "http://api.twitter.com/1.1/statuses/update.json",
      {status : tweetMsg},function(er, data){console.log(data.text);}
  );
}

※追記
API1.1になったじゃねーかーーーーあああ!!!
ってことで少し書きなおしております。具体的にはURI・・・(‘A`)

サンプルとか参考にしまくってるのでだいたいその辺と一緒です。StreamingAPI周りもかなり簡単にできると思います。適当にSampleStream垂れ流したときはコンソールが大変なことになった。読めねぇ。

しかしこんな簡単に作れるんだなぁと。まぁとか言いつつ、昼まで動いてなかったBotが夕方になっていきなり動き始める怪奇現象が起きてて、んでよくわからんけどそれから先程まで正常に動いているという・・・怖すぎるんですが。

ってことで、簡単なモノ作るくらいならNode.js使うのもありだね!って思いましたし。

Uploader

GoogleがGoogleTalkをハングアウトとして新しくアプリを公開したようで、とりあえずインスコして使ってみておりますりっくんですこんにちは。Android版の雑感としては、割りと通知バーに更新が来るのめんどくさいって感じです。LINEのあの通知方法、はじめはうぜぇとか思ってましたけど慣れると便利なんですね・・・。まぁそもそもの問題はG+でつながってる人が少なすぎる事なので、移行してくれればやるけどそうでないならつかわないかもなぁというところ。

Uploader

さて本題。
個人的な目的の為に画像アップローダーを作りました。一応完成図したのはこんな感じ。スクリーンショット_2013-05-21_13.38.44その辺にあるのを鯖に入れようと思いもしたんですが、結構自分が欲しいと思ってるものがなかったのと、いい加減一度DBと心を触れ合わせないとなぁと思ってたから作った感じですかね。作りたい欲もあった。

自分が欲しかった機能は

  • 少数ユーザーのみがログインでき、閲覧アップロードができる、誰がアップしたかわかる
  • ドラッグアンドドロップでアップロードすいすい
  • 開いた瞬間とりあえず今相手に見せたい画像が表示されている

なんかうまく言い表せないけどこんな感じ。
状況としては、Twitterにアップするにはちょっと人目につきすぎるとか、Google+はそもそもやってないとかの現状があって、そういう微妙な部分に対応できるアップローダーを作りたかった。俺用のな!現在は一緒にVCやってる人たち用に公開している感じ。

完成してみて

まだバグが残ってたり、UI上の問題(だと思われる部分)が残ってるんだけど、使ってみてかなりしっくりしたものができたと思ってる。そりゃ、自分用に作ったんだから希望通りにならないといけないとは思うんだけどw使ってくれる人(2,3人)からの評価も悪く無いと勝手に思ってる。悪くないよね・・・?w
あ、上のスクリーンショット、僕の画像ばかりなのはダミーを表示してるからですよ????w 他の人の画像は一応許可とらんと非公開にしてる意味がないので・・・! 一応他にもアップする人いるんだよ!

んでまぁ、もうちょっとデザインやることあるかなぁと思ったんだけど、いざ画像を並べてみると結構綺麗に見えてしまって。ヘッダー部分も仮ってレベルでとりあえず作ったものをそのまま流用しちゃってて・・・。でも最低限見られるというかシンプルというか。ちょっと殺風景かもしれないけど。

作ってる時

まず今回はPHPさんにボコボコにされた感じですね。
なんとなく覚えてる範囲で、どんな感じに作ったか(つまづきまくって時間がかかったか)書いていきます。

  1. Twitterでログインできるサービスを作る。
    ドットインストールさんを利用して作ったのですが、ログインに使うPHPのCordbirdがすでに別物になってて躓く。動画見ながらだとできなくてGithub見たらすぐ動くという、あっち見てやるべきだね・・・。
  2. アップしたファイルをログインユーザーのみが公開できるようにする
    ApacheのModを使ってやってる。Apacheの罠に引っかかり(Pathの指定方法)1日丸々使った気がする、アホ
  3. ドラッグアンドドロップでアップロードできるようにする
    いろいろ試してどこかからコードをリスペクト。
  4. 画像をリサイズできるようにする
    なんだっけPHPのWideImageっていうものを使ってリサイズ、クリッピングをかけてる。結構便利。でもコレも使ってみる1日目とちゃんと配置する2日目があった。
  5. 画像管理用のDBを作る
    MySQLってWordpressを入れる時くらいしかつかってなかったからますSQL文を書くのに四苦八苦。あとPDO。
  6. 削除とかそのへんもろもろ
    削除機能をつける、まぁ上のDB周りの応用だったので楽ちん。
  7. デザイン
    並べたらかっこよくなった!!!!!

だいたいこんな感じでしょうか。でも今回はいろいろ助言も頂きましたが、かなりの部分を一人で作れた事にはもう満足感がすごい。

ただし、すげー時間かかっちゃったのでこのへんはなんとかしたいなぁ。いや、次はいける・・・!気がする。

そしてPHPちゃんと結構仲良く慣れた気がします。でもまだJavaScript書いてる時のほうが楽しいのですけど・・・。あんなにPHPで書くとき苦労してたのに、Ajax的な部分を書くのはすんなりなのがぐぬぬと言わざるを得ない。PHP力が足りない。

サーバーサイドは別の言語も使ってみたいなぁ、Pythonとか。そういえばうちのVPSにはPython動かせるようにしてない気がする。なんか次作りたいものができたらPythonも視野に入れようそうしよう。

ってことで8割くらいかんせいして よかった 。

Chromeの自分用Extension作った日記

chromeのExtension作りました。

3ヶ月くらい前?に一度手を出して、それ以降放置してたのですが、その時作ってたものとは全然違う形で、とあるWebページを使いやすくするために作りました。
いや、古いサイトだからかすごく使いにくいんですよね、そんな大幅にいじった訳でなく、なぜこれがデフォルト!?みたいな部分だけ自動で処理してくれるような小さいExtensionです。本当にちっさいものでやってることは自動でValueにいろいろ突っ込んでくれるくらいです。

だいたいの部分、処理やらOptionPageやらは楽々できたんですが、唯一、ContentScriptからExtensionのLocalStorageにアクセスするところでアボんしました。とはいえ、実際特殊な形なので(BackgroundPageを経由して取得)ぐぐれば出てきたのですが・・・。いろいろ理解が足りてないので(汗

ついでにExtensionの自動アップデートにも対応させてみました。通知してアップデートしてもらうってのは煩わしいですよね、自動でアップデートしてくれたほうが素敵です!

 

そんなわけで、いろいろなChromeのExtension使ってます、超個人用のものばかりw
いやいやー、便利になってるって感じはしないですが、ちょっとだけ良い感じというかなんというか、簡単に作れるってのが面白いですね。模造紙で工作してる感じ 。jsなので僕的には学習コスト小さくてすんだし!

ってことで自分用extensionつくってくどーーー。

チーム分け用Webアプリ

 

追記※こちらに最新版アップしておきました。
(http://dev.remicck.net/archives/40

チーム分けアプリ本体こちら!

最近バイトの業務内容が忙しいです。多分これが普通・・・?一緒に入る人によって作業量に違いがある気があるような気がします・・・。気のせいだと思いたいけど・x・

さて

暇な時間があったのでお勉強ってことで2チームにランダムに分けるWebアプリをjavascriptで作ってみました。配列をランダムに並び替えるところをぐぐって当てはめただけみたいになってますけどw

参考:http://www.softel.co.jp/blogs/tech/archives/2328

続きを読む

無料版FC2のWebサーバーで$.ajax()使って外部ファイル取得、表示させた時のメモ

どうもPCの前でGWを過ごしておりますりっくんですこんにちわ。予定が常に埋まっているわけではないのですよ、PCの前にいるって決めてた時間もまぁありますが・・・。

 

さて、ちょうど今、成蹊JOINT2012という大学1年生向けなDebate大会のWebページを作ってるのですが、その関係でFC2のサーバーを使ってます。そこで、更新履歴を各ページに表示させる時、すべてのページで更新させるのがめんどいので別ファイル作ってそこから呼び出そうとしたんですが・・・、多分FC2の仕様(主に広告関係)で上手くいかなかったみたいなのです。

次回またやらかすだろうなぁとか思うので一応メモ。まぁゴリ押しな気がしますけどw

 

続きを読む

jQueryでTwitterのWidgetを非同期更新する。

最近なんか充実した日々を過ごしておりますりっくんです学祭全くいかないけど!サークルやってないとね・・・、行く機会無いのよね・・・、友達ライブ出てたりするけどまぁうん。学祭にはいかないけど、昨日は(学祭中)図書館いって資料漁ってました。人全然いないのwwwww (‘A`)

 

なんでTwitterWidgetを非同期で表示とか

FEZなう!関係なんですけど、自分と同じ鯖のユーザーを表示できればそこで繋がりができるかなぁって思って、Postした時点で検索ワードを切り替えて、その鯖用のWidgetに更新できたらおもしろいなぁと思ったんで。

けど、あんまり資料が無くて、ついでに自分が色々わかってなくて結構時間食いました。Ust配信で色々な方に助言頂きましたが、なんとかできたのでそのコード上げておきます。もしなんかサイト作るときに、あー、このボタン押したときにWidgetが出ればなぁーーー!!みたいな事したくなったら思い出してください><

参考:Audia ツイッター・ウィジェットの非同期通信ダウンロード

コードとか

今回はFEZなう!で

  1. Postボタンをクリックした時に
  2. サーバーの情報を持ってきて
  3. サーチワードを切り替えてWidgetを再表示

みたいな感じにしようと思っていじってました。

$(document).ready(function() {
	// Twitterに投げるボタンのid
	$('a#twitterpost').click(function(){
		  $.getScript('http://widgets.twimg.com/j/2/widget.js', function() {
		  	
		  		// selectされてるサーバーのvalueを取得 A鯖なら”A”が入っている
		  		var world = $("select.world").val();
		  		// サーチワード用にチェンジ
				var searchword = '#' + world + 'feznow';
				// 鯖のタイトル変えたかったのでそこも変数に
				var changedtitle = 'FEZなう! ' + world + '鯖Twitterユーザー'; 
		  	
		    new TWTR.Widget({version : 2,
		    	id : 'twitter-block', // デフォルトでは存在し無いけど、id指定すればそこに突っ込めるみたい
		   		type : 'search',
				search : searchword,
				interval : 2000,
				title : changedtitle,
				subject : '',
				width : 200,
				height : 380,
				theme : {
					shell : {
						background : '#1f1f1f',
						color : '#ffffff'
					},
					tweets : {
						background : '#ffffff',
						color : '#2f2f2f',
						links : '#e0762f'
					}
				},
				features : {
					scrollbar : false,
					loop : true,
					live : true,
					hashtags : true,
					timestamp : false,
					avatars : true,
					toptweets : true,
					behavior : ''
				}}).render().start();
		});
	});
});

ちなみに、id:twitter-blockにはすでに別のTwitterWidgetが入ってます(サイズとかは一緒で、.clickイベントではなく(document).readyのタイミングで突っ込んでる)。

うむ、.getScript使ってやる感じでし。なるほど、始めは.load使ってidにデータ<script>内突っ込めば動かないかなぁとか思ったんですが、上手くいかなかったんですよね。

 

あと、今の段階ではあまり鯖ハッシュタグ使ってる人がいないのでぜんぜん機能してないです(笑) あとある程度固定化されてるからあんま関係ないのかもなぁと。ユーザー数増えたら面白くなると思うんだけど宣伝とかよくわからん・・・!まぁその辺はおいおい。

A鯖ユーザーだよ~みたいな画像をfadeで表示させようかなぁとは思ってます。あとはリアルタイムに今PostがあったFEZなう!を表示できたら最高・・・!ハッシュタグで華麗に実装できないものか。

 

まぁなんにせよ一つ関門突破できてよかった。ってことで終わりです・x・

続・jQueryでUserTimeline拾ってこれたメモ

あの花は近年稀に見る素敵な最終回だった、普通に泣いてたりっくんですこんばんわ。なんという時間、今日は眠れないフラグ、明日もなんだけど。

jQueryでTwitterのUserTimeline取得続き

前回の日記のように、ちょっとjQueryをいろいろいじってますが、そもそもプログラミング経験がほぼ0なのでいろいろなところでつまずいてます。

とりあえず前回のコードのままだと最新Tweet1個しか持ってこれないので(一応コピペで対応できるけど)forつかっていっぱい出せたらなぁって言う。

 

Nの人ありがとう、細かいところ修正しておきましたおw

jQueryというかjs

/*
 * get UserTimeline
 */
		$(function(){
			$.getJSON("http://twitter.com/statuses/user_timeline/Ricckn.json?callback=?", function(data) {
			tweets = "";
			for(i = 0; i < 3; i++) {
				tweets += "" + data[i].text + "
"; }; $("#TweetList").html(tweets); }); });

ってことでこんな感じに。for(i = 0; i < 3; i++)ここの数を変えていくつまで取得するか変える感じ。

brで改行してるからmarginとか整えるといいのかな?できないね、よく考えてなかった(‘A`)

動いてるのはここのサイトで確認できます。私のjQueryメモ帳

http://remicck.net/jQuery

なんかIE8には嫌われてるんだよね、9は大丈夫なんだけど、まじ意味不明。

 

ってことでこの後、サッカーを見つつ本を読んで、眠れるかなぁって所です。ぐぬぬ・・・