2013年12月27日金曜日
大掃除!
Uchiyamaです。
大掃除、しましたか!?
そんなわけで、研究室の小掃除をしました。
お掃除前の悲惨だった光景の写真を撮り忘れたのですが、、、
お掃除アフターがこちら↓↓
田胡研には掃除係、入荷係、イベント係、などなど色々な係があります。
このブログでも何回か出てきている、工作部やガンダム頭の会、バイオサイエンス部なんかもあったりします。
古くから、今年の汚れは今年のうちに。と言いますよね。
皆さんも、気合を入れて研究室、自室、自宅の大掃除をしてみてはいかがでしょうか?
2013年12月25日水曜日
クラウドプロジェクトの紹介
4回目のFuyaです.
この記事は,田胡・柴田研究室アドベントカレンダー25日の記事です.
はやいもので,アドベントカレンダーも最後となりました.
B3,B4,M1の16人が今日を含めて25個の記事を書いてくれました.
最後は,田胡・柴田研究室の研究(開発)のメインとなるクラウドプロジェクトについて簡単な紹介をして終わろうと思います.
2013年12月24日火曜日
超初心者のためのjQuery入門
いよいよクリスマスイブですね。ちなみにクリスマスイブの「イブ」はイブニングという意味なのです。
つまり本当のクリスマスイブとは12月25日の夕方のことなのですね。
それはさておき、今回は僕のような超初心者のためにjQueryの「導入方法」と「HelloWorldの表示」の紹介をします。
jQueryとは何ぞ
javascriptでよく使われている機能を簡単に書くことができるようにしたライブラリです。難しい処理も数行で済むようになるのはめんどくさくなくてうれしいですね。
入れ方
公式サイトからjQueryをダウンロードします。なんだかバーションがいっぱいありますが、とりあえず対象とするブラウザにあったやつを入れてください。とりあえず僕は「compressed, production jQuery 2.0.3」を入れました。
HelloWorldを表示させる
jQueryは<head>などで読み込みます。
<html>
<head>
<meta charset="UTF-8">
<title>jQuery使ってみる</title>
<script src="./jquery-2.0.3.min.js"></script>
<script>
$(function(){
$("#str").html("Hello World")
});
</script>
</head>
<body>
<div id="str"></div>
</body>
</html>
HelloWorldの表示では今ひとつjQueryの使う必要なんてなくね?と思ってしまいますね...
jQueryの本当の便利な部分は、プラグインをダウンロードするだけで初心者でもある程度きれいなWebサイトが作れてしまうところ...だと思います。
今回は紹介できませんでしたがjQueryには他にもたくさんのプラグインがあります。興味あるかも!という方はぜひ調べてみてください。
2013年12月23日月曜日
git commit -am"{add,fix,del}" が大好きな後輩達に覚えてほしいgitの便利コマンド
はぐれメタルです.タイトル通りです.日頃私がよく使っている(もしくはまれに使うけど)便利なgitのコマンドを紹介していきたいと思います. これを見てcommit -amを卒業しよう!
git fetch
リモートリポジトリの変更を取り込むのに,
git pull
# or
git pull origin master
等としていませんか?
実はgit-pullサブコマンドは,2つのサブコマンドを実行しています.1つ目はgit-fetch,2つ目はgit-mergeです.
git-fetchは,リモートリポジトリに適用された変更を,ローカルリポジトリに取得するためのサブコマンドです.
git fetch
と引数なしで実行することにより,リモートリポジトリ<origin>
から,すべてのブランチの最新状態を取得できます.リモートリポジトリにおけるmasterブランチは,ローカルリポジトリではremotes/origin/master等として表されます.ローカルリポジトリでこれらのブランチをcheckoutすることで,Webインターフェース等を用いることなくリモートブランチの状態を参照できます.
git fetch
# Omitted output
git branch -a
* master
remotes/origin/master
git checkout origin/master
fetchした内容は,git-pullを実行するまでローカルリポジトリのブランチには反映されないので,安心して実行できます.リモートリポジトリの状態を把握しておくために,定期的にgit-fetchを実行する癖をつけましょう.他のgitコマンドと一緒に使いこなすことで,Webインターフェースに頼らなくても作業ができるようになります.
git add -p
git addは,gitの管理下にないファイルや,変更が加えられたファイルをステージする(次のコミット対象にする)コマンドです.
gitのコミットはなるべく小さい単位で作るのが良いとされています(私の経験からもこれは事実だと思います)が,現実的には,コミットの単位を意識してファイルを編集するより,一通り頭の中にある実装を書き出してからコミットを作ることのほうが多いでしょう(そのほうが効率も良いでしょう).
そういう時に,現在存在する編集を,意味的にまとまりのある単位に分割してコミットする必要があります.ファイル毎に分かれていれば,ファイル毎にgit addしてコミットを作れますが,1つのファイルに複数の意味単位が存在したり,変更が広範に渡る場合は,git-add -pを使うのが良いでしょう.
-p
は,ファイルのステージングをインタラクティブに行うことを指定するオプションです.git-add -pを実行すると,gitの管理下にある,変更が加えられたファイルのdiffがセグメント毎に次々表示されます.次回のコミットに含めたいセグメントの場合は,y(yes),含めない場合はn(no)を指定することで,1つのファイルにまとまったコミットを分解することができるし,変更された箇所をすべて一度表示してくれるため,ステージング漏れも起きにくくなります.その他にも色々操作があるので,詳しくはman git-add
のINTERACTIVE MODE
セクションを読みましょう.
git cherry-pick
git-cherry-pickは,他のブランチで発生したコミットを,そのブランチをマージすることなく取り込みたい時に使用します.
例えば,masterブランチから派生したhogeブランチで作業中に,masterブランチで発生したコードのバグを修正したとします.(strictなgitの運用では,bugfixブランチ等で修正コミットを行ってから取り込むのが正しい方法でしょうが,現実的には面倒なので現在のブランチにコミットしてしまったりしますよね・・・?) しかし,masterブランチでも開発は進行するため,hogeブランチで行ったバグ修正のコミットは直ぐにmasterブランチに適用したい,でもhogeブランチ全体をmasterにマージするわけにはいかない,という時に,cherry-pickが使えます.
git checkout master
git cherry-pick <COMMIT HASH>
とすることで,masterに<COMMIT HASH>
で指定されたコミットだけを取り込むことができます.
git blame
git-blameは,ファイル毎に各行を変更したもっとも新しいコミットと,そのコミッターを表示してくれるコミットです. blameという単語には,非難する,とがめるという意味があるので,このコマンドはあるバグを仕込んだ(当該行の)コミットを作った人物を探し出す,といった目的を意識して作られたように思います.
git-blameはバグを仕込んだ犯人探しにも有用ですが,ポジティブな使い方もできます. 多人数で開発をしていると,他人の書いたコードを読んだ時に,そのコードが何を意図して書かれたのか分からなかったり,もっと簡潔に書ける方法があるのに!と思うようなことがあります.そういったときに,git-blameを使ってそのコードを書いた人を知ることができれば,その人物に聞いたり,教えたりすることができます.
git stash
git-stashは,コミットもステージング(git addされた状態)もされていない変更を一時的に退避するためのサブコマンドです.
次のようなメッセージを見たことがあるかと思います.
git checkout hoge
error: Your local changes to the following files would be overwritten by checkout:
hoge
Please, commit your changes or stash them before you can switch branches.
Aborting
これは,checkoutしようとしている先のブランチにおいて,現在のブランチで変更された1つ以上のファイルと同じファイルが変更されているため,現在の変更内容を失わないよう,gitがcheckoutを差し止めた状態です.
このような時に,
git add hoge
git commit -m"tmp"
等として乗り切るのは間違っていて,stashを使うことで正しく乗り切ることができます.
git stash save # hogeの変更内容を一時退避する
git checkout hoge
git checkout master # masterに戻ってきた
git stash pop # stashに退避していた内容を復元する
git-stashの主な使い方は^^に示したようなものですが,stashは複数作ることもでき,復元も任意のstashを任意の順に復元できるため,使いこなせると捗ります.詳しくは:
man git-stash
git stash -p
git-stash -pは,git-add -pのstash版です.git stash save
とした場合は,すべての変更がstashに入ってしまいますが,-p
オプションを指定することで,一部だけをインタラクティブにstashすることができます.
他にも紹介したいコマンドやテクニックはまだまだありますが,とりあえずはこのあたりを使いこなすことが中級者への第一歩ではないかと思います.
また,gitコマンドを一通り使いこなせるようになった後は,tigを使ってみたり,EmacsユーザであればMagitを導入してみることで,作業効率がとても上がるかもしれません.
2013年12月22日日曜日
MongoDBの薄いお話
アドベントカレンダーも終わりが見えてきました.
今回私は卒論で利用しているMongoDBについて書こうと思います.
MongoDBとは
MongoDBとは,今流行のNoSQLに分類されるオープンソースのデータベースです.リレーショナルデータベースに近い特徴を持ちながら,スキーマレスにJSONライクなデータを扱うことが出来るものです.
扱う用語に少しRDBMSとは違う部分があるので一応並べておきます.
RDBMS | MongoDB |
---|---|
データベース | データベース |
テーブル | コレクション |
レコード | ドキュメント |
以上のことを踏まえて,MongoDBを触ってみましょう.
やってみよう
では,実際にMongoDBを触ってみましょう.MongoDBにはshellが用意されており,その中ではJavaScriptが実行可能です.
そのshellを使って実際にデータの操作を行っていきます.
まずは基本操作です.
> help //ヘルプの表示
> show dbs //データベースの表示
> use [dbname] //使用するデータベースを[dbname]に切り替える(無ければ作成)
> show collections //現在データベースのコレクションを表示
さぁここからは実際のクエリでデータ操作をしていきましょう.create
まずはデータの挿入です.データの挿入にはinsertを使います.
> db.collection.insert({name: "nashio", age: 21})
> for(var i = 0; i < 10; i++) db.collection.insert({name: "nashio", age: 21, n: i})
これでデータが挿入されます.下のようにJavaScriptでも書けちゃうところが恐ろしいですね.
collectionのところは挿入したいコレクション名を指定します(無ければ作成しれくれます).
挿入するデータはJSONライクなデータ構造で書いていきます.
read
データの検索にはfindを使います.> db.collection.find()
{ "_id" : ObjectId("52b6c2e22a9975309eda256e"), "name" : "nashio", "age" : 21 }
{ "_id" : ObjectId("52b6c4df2a9975309eda256f"), "name" : "nashio", "age" : 21, "n" : 0 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2570"), "name" : "nashio", "age" : 21, "n" : 1 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2571"), "name" : "nashio", "age" : 21, "n" : 2 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2572"), "name" : "nashio", "age" : 21, "n" : 3 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2573"), "name" : "nashio", "age" : 21, "n" : 4 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2574"), "name" : "nashio", "age" : 21, "n" : 5 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2575"), "name" : "nashio", "age" : 21, "n" : 6 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2576"), "name" : "nashio", "age" : 21, "n" : 7 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2577"), "name" : "nashio", "age" : 21, "n" : 8 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2578"), "name" : "nashio", "age" : 21, "n" : 9 }
> db.collection.find({n: 1})
{ "_id" : ObjectId("52b6c4df2a9975309eda2570"), "name" : "nashio", "age" : 21, "n" : 1 }
> db.collection.find({n: {$gt: 3}})
{ "_id" : ObjectId("52b6c4df2a9975309eda2573"), "name" : "nashio", "age" : 21, "n" : 4 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2574"), "name" : "nashio", "age" : 21, "n" : 5 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2575"), "name" : "nashio", "age" : 21, "n" : 6 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2576"), "name" : "nashio", "age" : 21, "n" : 7 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2577"), "name" : "nashio", "age" : 21, "n" : 8 }
{ "_id" : ObjectId("52b6c4df2a9975309eda2578"), "name" : "nashio", "age" : 21, "n" : 9 }
find()で全件表示,中で条件を指定して検索が行われます.検索の条件には{n: 1}でn=1,{n: {$gt: 3}}でn>3で検索される事になります.
$gtの他には$lt(<),$gte(>=),$lte(<=),$ne(!=)などがあります.
update
更新にはupdateを使います.> db.collection.find({n: 1})
{ "_id" : ObjectId("52b6c4df2a9975309eda2570"), "name" : "nashio", "age" : 21, "n" : 1 }
> db.collection.update({n: 1}, {n: 10})
> db.collection.find({n: 1})
> db.collection.find({n: 10})
{ "_id" : ObjectId("52b6c4df2a9975309eda2570"), "n" : 10 }
このような感じで更新が行われます.updateの前の引数は条件,後ろの引数が更新する内容になります.
自然な考え方をするとnが10に変わるだけだと思いますが,MongoDBでは完全にその内容が上書きされます.よって最後のようにドキュメントの内容がn: 10だけになっているのがわかります.
では,本来行いたい変更はどうやるのでしょうか?
それは次のように行います.
> db.collection.find({n: 2})
{ "_id" : ObjectId("52b6caa62a9975309eda2585"), "name" : "nashio", "age" : 21, "n" : 2 }
> db.collection.update({n: 2}, {$set: {n: 20}})
> db.collection.find({n: 2})
> db.collection.find({n: 20})
{ "_id" : ObjectId("52b6caa62a9975309eda2585"), "name" : "nashio", "age" : 21, "n" : 20 }
$setという更新修飾子を使って更新します.このような更新修飾子は他にもたくさんありますが今回は割愛します.
delete
削除にはremoveを使用します.> db.collection.find({n: 20})
{ "_id" : ObjectId("52b6caa62a9975309eda2585"), "name" : "nashio", "age" : 21, "n" : 20 }
> db.collection.remove({n: 20})
> db.collection.find({n: 20})
このような感じで削除が行われます.
引数に削除の条件が指定され,それに該当するドキュメントが削除されます.> db.collection.remove()
これで全件削除することが出来ます.これだけわかれはある程度MongoDBが使えるようになると思います.
もっと詳しいことが知りたい人はMongoDBの薄い本を見ると捗ると思います.
おわりに
みなさんいかがだったでしょうか?結構簡単そうじゃないですか?MongoDBはスキーマレスという特徴もあり,アプリケーションのプロトタイプ作成など気軽に使う分にはすごく簡単で便利だと思います.
本気で使おうと思うと英語の情報でしか見つからなくなってくるというのはありますがすごく便利なデータベースなのでみなさんも試してみてくださいね.
2013年12月21日土曜日
CSSのあんまりしらないかもしれないセレクタ
2013年12月20日金曜日
似非Vimmerのための.vimrc&おまけ(Neocompleteの設定をいじってみた)
1週間ぶり,3回目の登場です.
今日は「(h,j,k,l)? 知らない子ですね.」とか「ヤンク?ビジュアルモード?知らない子ですね.」って人のため設定をちょこちょこっと解説していきたいと思います.
※あくまで,似非Vimmerのための設定です.
2013年12月19日木曜日
WebSocketの使い方と実際に使えそうなアプリを考えてみる
Hello world.
B14(B3)のSasakiです.
本日12/19はわたしが更新します.
ちゅーわけで WebSocket
ってなんですか!?!?
- 通信規格のひとつ
- 1つのコネクションで全てのデータの送受信ができる.
クライアント側はハンドシェイク要求を送信,
サーバ側はハンドシェイク応答
を返さなければなりません。
以下はウェブブラウザがサーバに送る要求
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: AAA Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13サーバ側が返す応答
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: BBB Sec-WebSocket-Protocol: chat
…という感じで、接続が確立できるます.
で、WebSocketにはJavaScriptAPIが用意されてます.
これが、比較的充実している模様.
IE | FireFox | Chrome | Safari | iOS Safari | Android Browser |
---|---|---|---|---|---|
10.0 | ○ | ○ | 6.0 | 12.1 | × |
WebSocket接続を確立する。
//接続開始 var ws = new WebSocket('ws://localhost:2000/chat'); //確立したら呼び出される ws.onopen = dunction(){}; //データの送信 ws.send('Hello'); //データが到着したら呼び出される ws.onmessage = function(e){ var data = e.data; } //接続を切る(クライアントから) ws.close(); //(サーバから)データがついたら呼出し ws.onclose = function(e){ var wasClean = e.wasClean; var code = e.code; var reason = e.reason; }
などなどの基本操作がAPIとして用意されてます.
めっちゃ便利.
で、そもそも、何に使えんのこれ、って話です
ミソは、大量のデータをサーバに送れること
であると思ってます.
で、双方向通信なのでサーバからクライアントにもデータ渡したりができる(?)の.
つまり、
- チャット→多数のテキストデータを送信/DBに更新があったらクライアントに反映
- おえかき→常に動くカーソルの座標を送信し続ける/カーソルの動きが他のクライアントから見られる
などのサービスに用いられるのですね.
ちなみに,実装において一番ポピュラーなのはnode.jsだそう.
phpでもできます.
実装編は、また今度ということで許してください.
2013年12月18日水曜日
初代Xperia、X10にfirefoxOSを焼こうと頑張ってみる
こんばんよう。Uchiyamaです。
ももクロに引き続きエビ中も売れてしまい寂しい気持ちです。
というわけで、乃木坂ちゃんをどうぞよろしく←
先日、一人田胡研工作部をしました。
研究室の数人の間でガンダムヘッドコレクションがなぜか流行って、発光台座が当たらないので作ってしまえ!ということで作ってみました。
さて、今回は、SO-01BことXperia X10に話題の(?)、firefoxOSを焼こうと思い立ったので頑張ってみました。
X10は、ざっくりいうといろいろ弄れるAndroidスマホです。スペックは古いなりにあれですが安く買えてカスタムROMもたくさんあるので、楽しいですよ。
結果は...分かりきってますが、気になる方は続きどうぞ。
2013年12月17日火曜日
始めよう!Go言語(実際にやってみよう編)
早くも3度目の登場Nashioです.(3/17って頭おかしい)
アドベントカレンダーも17日目を向かえ,そろそろゴールが見え始めてきました.
(それに伴い4年生には卒論の足音が聞こきそうですが...)
今回はアドベントカレンダー2日目で予告していた通りGo言語のプログラムを書いてみようと思います.
実際にやってみよう!!
Go言語はチュートリアルがかなり充実しているので,ほんとに勉強しようと思ったらこんな記事を読むより本家サイトのチュートリアルを見ることをオススメします.
また,参考サイト ここに初心者が見ると幸せになれるサイトがまとまっているのでそこを見てみるといいと思います.
ではそろそろ本題に入りましょう.
今回は超簡単なWebサーバを作ってみましょう!!
作ってみたソースコード(app.go)は以下のとおりです.
package main
import (
"net/http"
)
func main() {
http.Handle("/", http.FileServer(http.Dir("html")))
http.ListenAndServe(":8080", nil)
}
たった10行でWebサーバがたっちゃいます.では,コードの中身を見て行きましょう(見るほどの内容無い気がするけどね)
package main
Go言語はpackageから始まります.main関数があるのでmainにしておきます.import (
"net/http"
)
ここではパッケージのインポートをしています.上記のようにグループ化して複数をまとめて書くことが出来ます.
今回は"net/http"パッケージを追加しています.
import "net/http"
も同じ意味です.func main() {
http.Handle("/", http.FileServer(http.Dir("html")))
http.ListenAndServe(":45678", nil)
}
ここはmain関数です.このファイルを実行するとはじめにこの関数が呼ばれます.http.Handle("/", http.FileServer(http.Dir("html")))
ここでハンドラの宣言を行っています.第1引数でpathを指定(ここでは"/"パス),今回は簡単なWebサーバを作るので,htmlディレクトリ以下の静的ファイルを表示するイベント関数を第2引数に指定します.
http.ListenAndServe(":45678", nil)
ここでサーバが起動します.第1引数にしようポート(ウェルノウンは避けたほうがよい)を指定, 第2引数にはnilを指定しましょう.
後は作ったapp.goファイルと同じディレクトリにhtmlディレクトリを作成し,その下に表示したhtmlファイル等を配置しましょう.
これで準備は完了です.
さぁお待ちかね実行のお時間です.
Go言語はコンパイル言語なのでコンパイルしましょう.
go build app.go
これでコンパイルができます.あとは生成されたappファイルを
./app
で実行しましょう.私はこんなかんじなものを表示させてみました.
ちなみにGo言語では
go run app.go
で簡易実行することが出来ます.(あくまで簡易)おわりに
みなさんいかがだったでしょうか?
詳しいプログラムの解説はしていませんが,こんな簡単にWebサーバを作ることができちゃいました.
みなさんGo言語楽しみましょう!!
最後に今回言いたかったことはGo言語のキャラがかわいいということでした.
2013年12月16日月曜日
お家で簡単、監視カメラ
学部4年生、tyadです。
今日は自宅へ簡単に監視カメラが設置できる方法を紹介します!
用意するもの
- Linux機
- USBカメラ
Linux機について、今回はubuntu12.10を使って説明します。
ほかのディストリビューションでも全然大丈夫だと思います。
USBカメラはUVC(USB Video Class)というものに対応していればいいです。
最近のUSBカメラならほとんど行けるそうです。
とりあえず今回は「LOGICOOL HDプロ ウェブカム C920」っていうカメラを使います。
レッツ実践
まずは必要なSubversionとライブラリのインストール$ sudo apt-get install subversion
$ sudo apt-get install imagemagick
$ sudo apt-get install libjpeg-dev
次にmjpgstreamerというストリーミングアプリをSubversionでチェックアウトして、make。
このソフトを使ってストリーミング配信するのです。
$ svn co https://svn.code.sf.net/p/mjpg-streamer/code/mjpg-streamer mjpg-streamer
$ cd mjpg-streamer
$ make
makeの際にエラーが出たら不足しているライブラリなどを入れてmakeをしなおしてください。とりあえず今回は先に紹介したライブラリだけでmakeがすんなり通りました。
ここまでできたらUSBカメラを接続しましょう。
もしUSBカメラがUVCに対応していれば、
dmesgコマンドを打つと以下の様な表示が出ると思います。
$ dmesg
・・(省略)・・
[ 1452.309435] uvcvideo: Found UVC 1.00 device USB2.0_Camera (093a:2700)
[ 1452.317100] input: USB2.0_Camera as /devices/pci0000:00/0000:00:1d.0/usb2/2-1/2-1.1/2-1.1:1.0/input/input10
・・・・・・・・
そしてmjpg-streamerでデバイスのパスの指定が必要なので確認しましょう。
$ ls /dev/ | grep video
video0
パスは「/dev/video0」ですね。他のUSBカメラが接続されているとvideo1やvideo2とかになっているかもしれません。
ではでは準備万端。さっそくうごかします。
細かいオプションは置いとくとして、とりあえず以下のコマンドを実行してみましょう。
デバイスのパスが異なっていれば「/dev/video0」の部分を「/dev/video1」などに変更してください。
$ sudo ./mjpg_streamer -i "./input_uvc.so -d /dev/video0 -y" -o "./output_http.so -w ./www -p 8080"
コマンドを入れたらブラウザで、
「http://[ホストのIP]:8080」を開いてみましょう。すると・・・こんな画面が出たでしょうか?↓↓↓
ボクの部屋の入口が写ってます。
あとはStreamなど好きな方法を選んで監視しちゃいましょう。
カメラ部分だけ見たいのであれば、方法を選んだあとの
「 To see a simple example click here.」の「here」の部分でリンクに飛べます。
監視カメラできましたね!
起動オプションで
FPSを変えたり、画質を変えたり、サイズを変えたりすることができます。
「./mjpg-streamer -h」で調べることができるので
興味があったらいろいろためしてみるといいと思います!
まとめ
Linux機とUSBカメラで簡単に監視カメラが出来ました。あっという間にできちゃうのでよかったら試してみてください!
2013年12月15日日曜日
SSH も、ゲートも、あるんだよ
3年生にはあまり認知されていないと思いますが,田胡研の名状しがたい鯖管のようなもの,sakura です.
# はじめに
2013年12月14日土曜日
簡単なIRC Botの作り方
僕は、簡単なIRC Botの作り方について紹介したいと思います。
使用する言語は、Javaです。
工科大生は、よくJavaを使う人がいるので、今回はそれでいきます。
そして、簡単に作る為に、PircBotというフレームワークを使用します。
これを使用すると 、IRCのプロトコルを知らなくても作ることができます!
準備
http://www.jibble.org/pircbot.phpからPircBot 1.5.0をダウンロードして、Build Pathに通しておいてください。
作り方
PircBotのクラスを継承したBotクラスを作ります。
package bot;
import org.jibble.pircbot.PircBot;
public class Bot extends PircBot {
}
次にPircBotのonMessageをOverrideをして、発言があった時のイベントを横取りしましょう。
package bot;
import org.jibble.pircbot.PircBot;
public class Bot extends PircBot {
@Override
public void onMessage(String channel, String sender, String login,String hostname, String message) {
}
}
onMdssageの引数にあるString messageが発言された内容なので、それによって反応をするようにします。
sendNotice(String channel,String message)では、channelを指定してmessageを通知します。
sendMessage(String channel,String message)では、channelを指定してmessageを発言します。
package bot;
import org.jibble.pircbot.PircBot;
public class Bot extends PircBot {
@Override
public void onMessage(String channel, String sender, String login,String hostname, String message) {
if (message.matches(".*?mocchi.*")) {
this.sendMessage(channel, "おはようございます.");
} else if (message.matches("time")) {
this.sendNotice(channel, Long.toString(System.currentTimeMillis()));
}
}
}
それでは、Botを動かしたいと思います。
動かすためには、IRC サーバと動作させたいchanneI、RC上での名前が必要です。
setName(String name)で名前を渡します
connect(String hostname, int port) で、IRCサーバのアドレスとポートを渡します。
joinChannel(String channel) でchannelに参加します。
以下のコードで、Botが完成しました。
package bot;
import java.io.IOException;
import org.jibble.pircbot.IrcException;
import org.jibble.pircbot.NickAlreadyInUseException;
import org.jibble.pircbot.PircBot;
public class Bot extends PircBot {
@Override
public void onMessage(String channel, String sender, String login,String hostname, String message) {
if (message.matches(".*?mocchi.*")) {
this.sendMessage(channel, "おはようございます.");
} else if (message.matches("time")) {
this.sendNotice(channel, Long.toString(System.currentTimeMillis()));
}
}
public static void main(String[] args) {
Bot bot = new Bot();
bot.setName("mocchi_bot");
try {
bot.connect("chat.freenode.net", 6667);
bot.joinChannel("#mocchi");
} catch (NickAlreadyInUseException e) {
System.err.println("既に使われているnickです.");
} catch (IOException e) {
e.printStackTrace();
} catch (IrcException e) {
e.printStackTrace();
}
}
}
実際にためしたところ
ではでは!
2013年12月13日金曜日
Canvasを使って雪を降らせよう!
おそようございます.M1のyuuです.
1週間ぶり,2回目の登場です.
今日は13日の金曜日ですね.そろそろホッケーマスクを付けた大男がウォーミング・アップを始めた頃でしょうか.
今回はCanvasを使って"雪"を降らせたいと思います.完成イメージはこちらです.(宣伝じゃないよ)
簡易的にuserAgentを見ているので,スマホ等の携帯端末では表示されません.ご注意下さい.
2013年12月12日木曜日
体験!ChromeOS
今日はGoogleが開発しているオープンソースのOS,ChromeOSと,それを搭載した端末
であるChromeBookについて,購入を検討した時期があったのでお話ししたいと思います.
2013年12月11日水曜日
スマートフォンのOSについて勝手に語る
みなさんこんにちは。
アドベントカレンダー2013、11日目はUchiyamaが担当させていただきます。
今回は、スマートフォンのOSについて勝手に語ろうと思います。
Uchiyamaが思ってることを書くので、意見の偏りはご愛嬌ですよ。
2013年12月10日火曜日
webアプリ用フレームワーク「Play Framework」の導入方法
今回はWebアプリケーションを作るためのJava/Scalaフレームワーク「Play Framework」を
紹介したいと思います。
Play Frameworkとは
- JavaかScalaのどちらか得意な言語を主にプログラミングするか選択できる
- サーバを止めずにプログラムの更新ができる
- webサーバやDBが一緒に入っている
導入方法
webアプリ作成の始め方
これによってwebサーバが起動し、ブラウザでアプリケーションが動かせるようになりました。
ブラウザにて「http://localhost:9000/」と入力すると、デフォルトのwebアプリベージが表示されるはずです(playFrameworkのホームページ)
まとめ
2013年12月9日月曜日
CookieClickerのセーブデータの作り方を(ある程度)真似る
進捗どうですか。B4の大矢です。
ゲームを作ってみてブラウザゲームにおけるセーブデータの作り方が気になったので少し前に話題になってあっという間に消え去ったCookieClickerにおけるセーブデータの作り方を調べたのでパクってみます。
CookieClickerのセーブデータ
CookieClickerは独自の文字配列でセーブデータが作成されていました。区切り文字を用いた独自のフォーマットです。また、Base64フォーマットで見ただけでは中身を改変したり読めないようになっていました。
MS4wMzkzfHwxMzg2NTYyNTAyOTk3OzEzODY1NjI1MDI5OTc7MTM4NjU2Njg5MjYwNHwxMTExMTF8MDswOzA7MDswOzA7LTE7LTE7MDswOzA7MDswOzA7MDswOzA7MHwwLDAsMCwwOzAsMCwwLDA7MCwwLDAsMDswLDAsMCwwOzAsMCwwLDA7MCwwLDAsMDswLDAsMCwwOzAsMCwwLDA7MCwwLDAsMDswLDAsMCwwO3wyMjUxNzk5ODEzNjg1MjQ5OzIyNTE3OTk4MTM2ODUyNDk7MjI1MTc5OTgxMzY4NTI0OTsyMjUxNzk5ODEzNjg1MjQ5OzIyNTE3OTk4MTM2ODUyNDk7MTM3NDM4OTUzNDczfDIyNTE3OTk4MTM2ODUyNDk7MjI1MTc5OTgxMzY4NTI0OTsxMDI1%21END%21
素の状態のセーブデータはこのような感じ。このセーブデータを復元した際の中身は以下のような感じでした。
1.0393||1386562502997;1386562502997;1386562683559|111111|0;0;0;0;0;0;-1;-1;0;0;0;0;0;0;0;0;0;0|0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;0,0,0,0;|2251799813685249;2251799813685249;2251799813685249;2251799813685249;2251799813685249;137438953473|2251799813685249;2251799813685249;
区切り文字は「|」と「;」の2つで、これをプログラム側で読みこむという、傍目で見たらかなりめんどくさい構造になっています。このような独自の構造を1から作るのは流石にめんどくさいので今回はJson形式を使う方向に逃げてしまいます、楽だし。今回の作り方は非常に簡単なので、CookieClickerと同様に解析されてしまう事はもちろん前提で、”普通の人には読まれないくらいの作り”にしたいと思います。一行で扱えるセーブデータとして作成する事も目標です。
jsでセーブデータを作る
CookieClickerと同様にJavaScriptで作成していきます。まず連想配列のセーブデータを用意し、Json形式の文字列に変換します。ついでに日本語が含まれているのでescape関数をかけておきます。
var saveObj = { name: '大矢' , score: '123456', status : '進捗ダメです' }; var saveJson = escape(JSON.stringify(saveObj));
ここまでの中身(saveJson)は以下の通り。
%7B%22name%22%3A%22%u5927%u77E2%22%2C%22score%22%3A%22123456%22%2C%22status%22%3A%22%u9032%u6357%u30C0%u30E1%u3067%u3059%22%7D
escape関数をかけているのでgoogleの検索結果のアドレスなどでよく見るフォーマットになっていると思います。
次に、Base64フォーマットに変換します。こちらは「Base64.js」という便利な物があったのでこれを利用させてもらいます。置いてあるサイトはこちら。
このBase64.jsを読み込んで使用します。エンコードとデコードが可能です。用意した文字列にエンコードをかける事でセーブデータの可読性がかなり下がります。先ほどのソースも含めて記述します。
var saveObj = { name: '大矢' , score: '123456', status : '進捗ダメです' }; var saveJson = escape(JSON.stringify(saveObj)); var saveData = base64encode(saveJson);
最終的なデータ(saveData)の中身は以下の通り。
JTdCJTIybmFtZSUyMiUzQSUyMiV1NTkyNyV1NzdFMiUyMiUyQyUyMnNjb3JlJTIyJTNBJTIyMTIzNDU2JTIyJTJDJTIyc3RhdHVzJTIyJTNBJTIyJXU5MDMyJXU2MzU3JXUzMEMwJXUzMEUxJXUzMDY3JXUzMDU5JTIyJTdE
CookieClickerと同じBase64フォーマットになり、だいぶそれっぽくなりました。これで保存する最終的なセーブデータが完成です。
CookieClickerはCookieを用いて(何らかの因果を感じる)このような一行のデータをセーブしていました。今回は、せっかくなので保存期間の無いlocalStorageを使用してみます。(古いブラウザでは対応していないのでCookieを用いてもOKです)
localStorageについてはこちらを参照すると良いと思います。
localStorage.setItem("GameSaveData",saveData); //localStorage書き込み
これでセーブが完了しました。最後にlocalStorageに書き込んだデータを読み込み、復元してみます。base64decode関数(Base64.js)→unescape関数→JSON.parse関数 の流れでjsの連想配列として復元できます。
var loadSaveData = localStorage.getItem("GameSaveData"); //localStorage読み込み var loadSaveObj = JSON.parse(unescape(base64decode(loadSaveData))); console.log(loadSaveObj.name+"さん、進捗どうですか?→"+ loadSaveObj.status);
最後の行でconsole.logに出力しているのでそれを確認します。
結果
今回書いたソースコード全行は以下。
var saveObj = { name: '大矢' , score: '123456', status : '進捗ダメです' }; var saveJson = escape(JSON.stringify(saveObj)); var saveData = base64encode(saveJson); localStorage.setItem("GameSaveData",saveData); //localStorage書き込み var loadSaveData = localStorage.getItem("GameSaveData"); var loadSaveObj = JSON.parse(unescape(base64decode(loadSaveData))); console.log(loadSaveObj.name+"さん、進捗どうですか?→"+ loadSaveObj.status);
console.logの表示。
>大矢さん、進捗どうですか?→進捗ダメです
無事に呪いの文字列が確認できました。ありがとうございました。
2013年12月8日日曜日
田胡研 工作部 斡旋機をSSDに換装しようの会 活動報告
アドベントカレンダーが開始してから1週間が経過しました.
早くも2度目の登場ということですが,3年4年合わせて30人近くいるのにもかかわらずこんなことしていいのかという感じですが,
本日田胡研 工作部のイベントがあったのでそのことを報告したいと思います.
斡旋機をSSDに換装しようの会
田胡研工作部とは,田胡研内で時々工作を始めだす集団として結成されています.過去の活動としてポケモン金銀がやりたくてカセットを開けて電池を取り替えて遊ぶなどの活動を行いました.
今回田胡研工作部では,2010年入学時の大学斡旋機「TOSHIBA dynabook SS RX2L」をみんなでSSDに換装しました.
大学入学以来4年間酷使し続けてきた斡旋機.
最近はHDDが寿命を迎えてきたのか,ほとんど何も入っていないWindows7でまともに動かないような状態でしたが,生まれ変わってくれると信じています.
なんかりんごのシールが貼ってあるのはご愛嬌.
まずは交換するSSD,「ADATA ASX900S3 128G」を採用しました.
お値段がお手頃だったのこれにしました.
まずは蓋を開けてみましょう.
蓋を開けてみるとこんな感じでした.
蓋を開けるところで苦労するメンバーもいました(誰のことでしょう)
あとはHDDとSSDを交換するだけです.
こんな感じになりました.
金色のパッケージがいい感じです.(蓋を閉めたら関係ありませんが...)
さぁ蓋を閉じてWindows7を入れなおしてみます.
さぁインストールが終わりました!!
SSDなのでインストールも早いですね.
せっかくSSDになって早くなったと思うのでベンチマークを測ってみましょう.
![]() | ![]() |
HDD | SSD |
時間の関係で試行回数1回でしか試してないので誤差は多いと思いますが,上記のような結果となりました.
やっぱりSSD早いですね.
最後に試行回数を5回にしてSSDのベンチマークを測ってみました.
なんかスリープにすると早くなるという話を聞いたのでスリープをしてから測ってます.
もうね...
爆速ですよ(笑)
これで快適なおもちゃを手に入れました!!
おわりに
今回は田胡研工作部の活動報告でした.
我々田胡・柴田研究室では日夜このように楽しいことを行っています!!
また斡旋機さんには活躍の場が与えられる様になると思います.
2013年12月7日土曜日
Chrome開発者向けツールを使ってみる(JavaScript編など)
みなさんお久しぶりですM1(大学院1年)のFuyaです.
私の研究室は,マスター含めて30人以上の大所帯ですが,2度目のアドベントカレンダーです!
前回に引き続きChrome開発者向けツールを使ってみるという内容で記事を書きます.
2013年12月6日金曜日
アップロード状況を確認できるプログレスバーを実装してみよう!!
おそようございます.yuuです.
今回は「アップロード状況を確認できるプログレスバーを実装してみよう」ということでやっていきたいと思います.
ちなみにアップロードに関してはこちらとか見てみて下さい.(宣伝じゃないよ)
2013年12月5日木曜日
爆速マークアップ
SublimeText2+Emmetで爆速マークアップ
はい,言いたかっただけですね.B4のktaroです
今回は,SublimeText2とEmmetを利用しての爆速マークアップについて記述したいと思います.
環境構築は,Macを利用して行っています.
(うまくハイライトできなかったので,画像・・・)
SublimeText2での設定
しかし,Tabでの展開は動作が重複してしまう可能性があるため停止します.
停止は,Preferences > Settings – Userから行います.
//EmmetでのTabキーの停止 "disable_tab_abbreviations": true //[Emmet]日本語変換確定の文字消えを防ぐ "disable_formatted_linebreak": true
使い方
演算子 | 意味 | 使い方 |
---|---|---|
> | 子要素に追加 | div>ul>li |
+ | 兄弟要素に追加 | div+div |
^ | 子要素からの脱出 | div>ul>li^div |
* | 連続 | ul>li*5 |
() | グループ化 | (div>p)+div |
$ | 番号 | ul>li#item$*5 |
{} | テキストの追加 | div>ul>li{リスト} |
2013年12月4日水曜日
ちょっぴり幸せになるvimプラグイン
mkdir -p ~/.vim/bundle git clone git://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim
if has('vim_starting') set runtimepath+=~/.vim/bundle/neobundle.vim call neobundle#rc(expand('~/.vim/bundle/')) endif NeoBundle 'Shougo/neobundle.vim'
さて,本題のプラグインに入ります.
vimでプログラミングする上で欠かせないのが,NeoCompleteです.
これは入力補完をしてくれるプラグインで,vimがIDEみたいになります.
他のエディタよく知らないけどなんかすごいです.
インストールはNeoBundleを入れたなら超簡単!
NeoBundle 'Shougo/neocomplete.vim'
そしてvimで:NeoBundleInstallを実行したら勝手にインストールしてくれます.
すごい!
ただこいつ.vimrcにちょちょっと設定を書いてやらないと動きません.
そこら辺は面倒なのでとりあえずはGitHubからそのまま引っ張ってきちゃうといいです.
こいつはvimをランチャとかファイラっぽくしちゃいます.
:eとか使ってられなくなります!
こいつもよく分かんないけどすごいです!
NeoBundle 'Shougo/unite.vim'
設定とかは適当に:help Uniteかなんかしてすればいいんじゃないですかね.
他にもNeoCompleteと合わせて使うと便利な,スニペットを出してくれるNeoSnippetや,シンタックスをチェックしてくれるSyntastic.
関数にジャンプしてくれるUnite-outlineに,便利なステータスラインを提供してくれるvim-powerlineなど,今回は疲れたのでこの辺にしておきますが,vimには便利なプラグインがたくさんあります!
真っ白な.vimrcでやってる人は急いで導入しましょう!
ちなみにいちいち:NeoBundleInstallを実行していましたが,.vimrcの末尾にNeoBundleCheckとか書いておくと,ファイル読み込み時に自動でインストール,アンインストールしてくれます,素敵!
まあなんだかんだとやりましたが弘法筆を選ばずと言いますし,好きなエディタで好きなようにやったらいいんじゃないですかね.
4日目終了!
2013年12月3日火曜日
phpのクラス
mongoDB接続をclassを用いて書きます.
mySQLを接続するのは他のサイトとかにたくさんありますしね.
class Okome{ var $mongo; var $db; var $col; function __construct($selectDB,$selectCollection){ $this->selectDB = $selectDB; $this->selectCollection = $selectCollection; $this->mongo = new Mongo(); $this->db = $this->mongo->selectDB($this->selectDB); $this->col =$db->selectCollection($this->selectCollection); } function showDB(){ $col = $this->col; $obj = $col->find(); print '==========new DATA========== '; foreach($obj as $id => $text){ var_dump($text); print ' '; } print ' '; $count = $col->count(); print $count.'個 '; foreach($obj as $uho =>$hoge){ foreach($hoge as $id => $con){ if($id !== '_id'){ print $id.':'.$con.' '; } } } } function addNewData($name,$grade,$birth){ $doc = array($name,$grade,$birth); print_r($doc); $this->col->insert($doc); print ' '; $this->showDB(); } function deleatAllData(){ $this->col->drop(); } }
コンストラクタも使えるので,必要な基本情報は最初にコンストラクタからメンバ変数に入れます.
あとはそれぞれのfunctionでやりたい事やればOK.
クラスの外からはこんな感じで.
$okome = new Okome('okome','friend'); $okome->showDB();
って感じで,3日目おしまい.
明日は,3年生のトップバッター!たのしみ!
2013年12月2日月曜日
始めよう!Go言語(インストール編)
アドベントカレンダー2日目はNashioがお送りします.
今回は最近話題のGo言語についてです.
Go言語とは
Go言語 とは,Googleが発表したオープンソースのプログラミング言語で,
- シンプルな言語
- コンパイル・実行速度が早い
- 安全性が高い
- 同期処理が容易に行える
- 何より楽しい
- オープンソースである
Go言語のインストール
ではGo言語をインストールしてみましょう.
インストール はこのあたりを参考にしました.
Mac OS X
Macの人はHomebrewでインストールしましょう!!(もちろん他の方法でもいいよ)
$ brew install goこれでインストールが完了します.
Linux
Linuxの人はtarballでインストールしましょう!!(もちろん他の方法でもいいry)
今回は64bit版をインストールしてみます.
$ wget http://go.googlecode.com/files/go1.2.linux-amd64.tar.gz $ tar -C /usr/local -xzf go1.2.linux-amd64.tar.gz $ echo "export PATH=$PATH:/usr/local/go/bin" >> /etc/profile $ source /etc/profileこれでインストールが完了します.
Windows
Windowsの人はMSI(試験中らしい)でインストールしましょう!!(もちろんry)
今回は64bit版をインストールしてみます.
ダウンロード からインストールしてください.
ダウンロードが終わりダブルクリック等をすると設定画面が始まります.
設定にしたがってインストールしましょう.
これでインストールが完了します.
実行してみよう
インストールが終わったら実際に動かしてみましょう!!
hello.goのようなファイルを作成し,以下の内容を記述しましょう.
package main import "fmt" func main() { fmt.Printf("hello, world\n") }作成が終わったら次のコマンドを実行してみましょう.
$ go run hello.gohello, worldと表示されましたか?
表示されたらGo言語が使えるようになってます(やったね!)
おわりに
今回はGo言語のインストールを行いました.
次回は実際にGo言語でプログラムを書いてみたいと思います.
次回がアドベントカレンダー期間中に回ってこないことを祈っています.
2013年12月1日日曜日
Chrome開発者向けツールを使ってみる(入門編)
今年もあと早いもので,残り1ヶ月となりました.
12月恒例のアドベントカレンダーをはじめます!
3,4年生あわせて30人近くいる中で,M1の私が書いていいのか...恐縮です.
入門としてGoogle Chromeの開発者向けツール(DevTools)の簡単な使い方を紹介します.
DevToolsからCSSの調整をしたり,JavaScriptのデバッグを行うことができます.
起動しよう
「Control 」+「Shift」+「 I」(Windowsの場合) 「Command」+「Shift」+「I」(OSXの場合)で起動します. もしくは,ブラウザ画面で右クリックをして「要素の検証」を選択してください.
こんな画面が出て来ましたか?出てきたら早速使ってみましょう
値を編集してみよう
このツールを使って簡単にウェブサイトのHTMLを見ることができます!左下にある虫眼鏡のアイコンをクリックしてみてください. その後,表示画面にマウスを持って行くとHTMLの要素をみることができます
これで,どんなサイトのHTML構造も分かりますね
値をクリックすれば編集することもできます.

CSSの値を編集してみよう
要素を選択した際,右側にスタイルシートがあるのに気づきましたか?この値をいじることでリアルタイムにCSSの調整を行うことができます.

色の選択にはカラーピッカーを使うこともできますよ

これでCSSの細かいプロパティの調整ができますね!
短いですが,今回はこのへんで!また次回お会いしましょう
(アドベントカレンダー2回書くことなんてないよね??...)
2013年11月21日木曜日
11月のハッカソンを行いました
M1のfuyaです.
11月15日(金)に,田胡・柴田研究室では恒例となったハッカソンを行いました!
ハッカソンとは,hackとmarathonを合わせた造語で,決められた期間内に,集中的にhackしようというイベントです.
今回は作業時間の9時間で,それぞれがテーマを決めてものを作りました.
3年生が2人,4年生が2人,修士1年が4人と人数は少し寂しかったですが,全員が決められた時間で楽しくものを作ってました.
田胡研究室では,このようなイベントを通じて,ものを作る楽しさを共有しています.