糸電話式のアレ

プログラミングのこと。毎日のこと。書いています。

ここ最近のQiita記事まとめ

ブログの霊圧が…消えた…?!

最近Qiitaばっかりで、ブログをかけていないです。。。

今回は、前回投稿より後にQiitaに投稿していた内容をまとめて紹介します。

Scala+Playの導入が簡単だという話

http://qiita.com/aya_eiya/items/12493df0b3ddda5a7ec1

Scalaで最近流行のPlay! FrameWorkを試しに入れてみたときのメモです。

個人的にはPlayよりもLiftのほうが好きです。

なぜかってぇと、それは見た目を作るためのTemplateに関する考え方の違い。

Playは昨今の大抵のWebApplication Flameworkと似た作りをしています。

しかし、Liftの考え方はちょっと違っていて、見た目をつくるためにViewFirstという考え方を持っています。

そのLiftの考え方を詳しく知りたい人は、他で勉強してみてください。

Playの実行runコマンドとstartコマンドの話

http://qiita.com/aya_eiya/items/69a7365f359e44460f6c

前回の記事から少しPlayを調べてみたときのメモです。

もちろん他にも色々と調べているんですが、こういう調べた内容を一部でも載せておくとその時の記憶がよみがえるもんですね。

ただ、やっぱり見た目の作り方が微妙です。

コードと見た目は完全に分離していただきたい。

TechBuzz主催の勉強会に行ったという話

http://qiita.com/aya_eiya/items/2bc7fe60d4b04fe61e57

Unity中心のゲーム系の勉強会でした。

ゲーム作る人は本当にゲーム好きな人が多いですね。

エンタープライズ開発系のプログラマもプログラミング好きの人が多いといいのですが、実際そうでもないような気がします。

好きな人ほど業界から離れやすい気すらします。

好きな人が楽しい現場を作れていないからでは?

学生にRを使ったWebスクレイピングを教えたった話

http://qiita.com/aya_eiya/items/54c9a6746bebc2814d93

自分はさほどRや統計が得意というわけではありませんが、統計は理数系の必須道具だと思っています。

この記事では、ボクが住んでいるシェアハウスの住人の学生に対してRインストールから簡単なWebスクレイピングの準備となるデータ取りまでを教えたので、その内容をまとめています。

応用すると、競馬の馬券をシステマチックに購入する戦略とかが出来るかも?

その際は、税務署にはくれぐれもご注意を。

ノンプログラマCanvasを使ったアニメーションについて教えたった話

http://qiita.com/aya_eiya/items/a90b32036356e96b0f35

この記事は、近くのシェアハウスの住人にjavascriptを使ってCanvasアニメーションをさせる際の基礎について講義を行った際の内容をまとめたものです。

JavaScirptの時間制御について主に解説をしています。

後半の説明がややだれていますが、前半の要点をつかめば大抵のアニメーションで困らないはずです。

何気にボクがQiitaに投稿した中では一番人気のある記事のようです。

珍しく真面目に説明を書いているからでしょうか。それともJavaScriptとか皆好きなんですかね?

ボクは割と好きですが。

Cygwinの更新でエラー

http://qiita.com/aya_eiya/items/b4c1146d49db19e91714

エラーを解消したメモです。

だれかStockしてくれたので同じ現象に悩まされた人がいるのでしょうか?

WindowsにGit-flow入れてみようとしたら出たエラーを解決

http://qiita.com/aya_eiya/items/a27558b6ad3f9650c02a

※ この記事は少し古い内容です。

実は記事を書いた時点で古い内容ですが、最初にググって出てきた内容でインストールしたら出てきたエラーを修正した時のメモです。

最初に出てくる分、同じ現象に合う人は多いようです。

このあとすぐにこの内容が古いことには気がついたのですが、そのまま放置してしまっていますね。。。

社内でGitの導入の旗振りとかしていたので、社内のWikiには正しいGit+GitFlowの導入方法をまとめてありますが、その内容で上書きしておきましょう。。。気が向いた時に。

PuTTyの右クリック事故を防ぐ

http://qiita.com/aya_eiya/items/6352dbe97acf4a52a29e

PuTTyに限らず、右クリック一発でクリップボードの内容をターミナルに流しこむターミナルアプリケーションって多いですよね。

そうすると、普段Macのデフォルトターミナルのような、右クリックでメニューを出して貼り付けを選択する、って操作に慣れていると事故ります。事故りまくりです。

ですので、記事で紹介したツールを導入して事故を防ごうって言うメモです。

事故や失敗は、大抵の場合、失敗を犯した人間の性格や注意力よりもツールや手順、状況、習慣などに問題があると考えるのがシステマチックなアプローチだと思います。

一発殴ったら手順やツールを改善しましょう。

改善できない作業はやってはいけない作業です。

代替の作業を考えましょう。

GitHubのパスフレーズを省略するコードをconfig置いても大丈夫にした

http://qiita.com/aya_eiya/items/67b0fdf80aa7b568d28e

GitHubで紹介されていたパスフレーズを省略(sshagentを起動)するScriptだとConfigファイルを置いている場合に問題があるので、それをいじって対応出来るようにしました。

Shellの起動時にConfigに記載されているキーを全て認証します。

特に同じパスフレーズを設定しているキーが複数あると面倒に感じますが、そんなキーを使うほうが悪いです。

.gitattributesを作る際の参考情報を出力するコマンド

http://qiita.com/aya_eiya/items/52cefef8231f11945a33

そのままなんですが、こういう事をしてファイルを調べてみたよって話です。

後日談ですが、これを使うとHTMLファイルがBinaryとして認識されていたりとかします。

大抵の場合ファイルの内容に問題があるのですが、注意してやらないとGit上でずっとテキストファイルをBinaryとして扱うことになってしまって面倒です。

Windowsのパスの長さ制限に引っかかったので短くしてみた

http://qiita.com/aya_eiya/items/d2677c85017a010f2772

この記事はWindowsのシンボリックリンク作成機能を使って、長さ制限のあるPath環境変数を少し効率的に使おうという話です。

色々なところにPathを通すプログラマにとっては、この長さ制限はかなり厳しいのです。

Windows使えねぇと思う理由の一つですね。

ちょっとしたことがGroovyシリーズ

なんにも活動らしいことをしていませんが、えいやはJGUGGのメンバーです。

ので、社内にも積極的にGroovyを導入しています。

まぁ、それとは別に普段色々とGroovyで簡単な検証や仕事の自動化を行ったりしていますので、そういうのを紹介していくシリーズですね。

ちょっとしたことがGroovy 「リストの文字列表現で要素に任意の引用符つけたい」

http://qiita.com/aya_eiya/items/c9b8e0b3d417dae2a7a3

Stringのリストに割りと特殊な引用符をつけた状態にしたかったので、メタプログラミングとGroovyStringの性質を利用してみました。

Groovyの青い本を読むとこんなことができます。

ちょっとしたことがGroovy「ある値まで一定間隔のRangeのリストを作りたい」

http://qiita.com/aya_eiya/items/d48541f1ca2e57c16ef2

これはバッチ処理を書くときに使ったTipsです。

実際には、このRangeを更にFilterして使いました。

シャーディングされたテーブルに対してSQLを発行するバッチ等で利用すると、ロックを回避して素早く並行処理できます。

ちょっとしたことがGroovy「めちゃくちゃ重い正規表現をどうにかする確認」

http://qiita.com/aya_eiya/items/4bae8e2dbde97ed248bb

Javaで構築されたシステムが異常にCPU使用率が高いので調べてみると、とあるページの正規表現(レギュラーエクスプレッション)が原因でしたので、その不具合をブチ殺す検証をしてみました。

一個前の記事

上記の前に、以下の様な検証を行いました。実際に遅いのは上だったのであまり下の記事には意味がなかったのですが、参考までに。

http://qiita.com/aya_eiya/items/cd49e5a8a70149947a74

最近はね

上でも書きましたが、Groovyでのテストの導入とかしています。

Qiitaのネタとしても色々書けることも増えていくんじゃないかなぁと思っています。

GGJ2013に参加した話

どうも、えいやです。 Global Game Jam 2013に参加しましたのでご報告です。

GGJとは、世界中で同時に(時差があるため最大24時間のズレあり)行われるゲームづくりのハッカソンで、その規模はおそらく世界一のハッカソンです。48時間の持ち時間を使い、開催年ごとGGJ開始とともに発表されるテーマを題材にゲームを作るというものです。チーム参加、個人参加ともに自由です。テーマの発表は会場ごとに行われますので、好きな会場を選んで、その会場から参加することになります。

今回ボクが参加した会場は、ギークハウス武蔵小杉会場です。 ボクが今住んでいるシェアハウスですね。

住民の一人でゲーム作りが趣味のMikamiさんが、GGJの会場として通常の民家でも登録できることを発見し、我が家を会場として登録、会場の主催者として運営を色々頑張ってくれました。

GGJテーマは動画で発表されます。 今年の動画は何も映されず、サウンドで心音のみが流れました。 動画からの印象がテーマですので、素直に心音をテーマにするかどうか捉え方は個人の自由です。

当日の会場の様子は、USTで見ることが出来るほか、まとめをMikamiさんのブログMK Gamesで読むことができます。

制作や会場の様子などは上記を見ていただくこととして、この記事ではゲーム作りでやったことをさらっとまとめます。

会場に集まったメンバーから2チームに分ける

ギークハウス武蔵小杉の会場では8名のメンバーが集まりました。 会場主催のMikamiさんの仕切りで、その8名を4人の一組のチームで分けました。 当初のMikamiさんの計画では、知り合い同士がチームにならないように分ける予定でしたが、当日公開のGGJのプロモーションで「出来れば友達同士で参加しましょう」ということでした。 そこで計画を変更して、知り合い2人で来場した2組を合わせた1チームを作り、Mikamiさんやボクを含む残りの4名でもう1チームとしました。

ちなみに今回のボクの役割は、プログラマー兼3Dモデラーですが、結局プログラミングはせずに終わりました。

ちょいちょいコーディングに口を出す程度のことはしましたよ。(震え声)

ゲームはUnity3Dで作成

GGJ2013の参加者には、3Dゲーム制作ツールの定番どころであるUnity3Dの最新版のプロライセンスが提供されました。 プロライセンスは30日限定で、導入すると、Unity3D内で完結するバージョン管理サーバ機能、制作したゲームをスマートフォン用にビルド出来る機能などが使えるようになります。

GGJ2013の参加者の多くがUnity3Dを使用してゲームづくりを行ったようで、ボクのチームもUnity3Dを使ってゲームを作りました。

GGJでのゲーム作成はUnity3Dを使うのがスタンダードなので、今回の会場でも参加2チーム両方ともに、さらっとUnity3Dの利用の方針が固まりました。

テーマからゲームアイデアを洗い出す

テーマからゲームのアイデアを連想するのは、GGJでのゲーム作りの重要な点です。 テーマの心音の動画から、アイデアを出していきます。

アイデアのマインドマップ ※ 上記は最終的に決まった内容ではなく、途中経過の状態をボクがまとめたものです。

ボクらのチームではアイデア出しがなかなかまとまらずに、先に犬のキャラクターだけ決めて、デザインと3Dモデリングを始めました。

モデリングをしているうちに、方針は「GPSを使って犬と散歩するゲーム」ということに決まりました。 走ったり歩いたりすることで心拍数をあげるゲームという感じです。

キャラクターデザイン&モデリング

アイデアとして最終的に犬のキャラクターを育成するゲームというコンセプトが決まりました。 チームのなかで2Dデザインを担当してもらっていたメンバーから、トイプードルのキャラデザをもらい、ボクがそれをモデリングしました。

その後、実際のモデルを見ながらカラーの調整やテクスチャの作成を行いました。

モデリング中の犬

コーディング&アニメーション作成

ボクの役割はモデラーなのでコーディングにはほとんどノータッチです。

UIやらGPSへのアクセスやらの設計は他の二人のプログラマが頑張ってくれました。

ボクがモデリングしたキャラクタはWebプレイヤーで見られるようにしてあります。 WebPlayer画面

WebPlayerを起動

出来上がり

そんなこんなで一応、ゲームを完成させることができ、その後Google Playへの登録もできました。 「ワンコとおさんぽ」という安直なタイトルで見つけることができます。

48時間の突貫工事のため、アプリを終了できない、動かない端末がある、など色々と課題が残っています。 今後早いうちに主催のMikamiさんと一緒に少しずつ改良して上げなおそうと考えています。

今後のね

少し前からUnityやらBlender使って色々やってみたりしてましたけど、わりと面白くて続いています。

Scala+LiftやらPlayやら、Node.jsの研究もやっていきたいですけど、まずはアプリを出してみようかなぁってのがあるので、しばらくはUnityに時間を突っ込んでみようかと思っています。

なんぞイベントなんかがあればお誘いください。

前から気になっていたLiftを使って見る話

思い立ってやってみました。 まずはインストールですが、コレがわかりにくい。

色々調べてこの記事を見つけました。どうやらGradleを使って最小構成でインストール出来るようです。

 git clone git@github.com:jeppenejsum/liftstart.git

で、このままだと構成が少し古いので、build.gradleのバージョン指定をいじります。

// Minimal build.gradle for Lift project
apply {
    plugin 'scala'
    plugin 'war'
    plugin 'jetty'
    plugin 'eclipse'
}

scalaVersion = '2.9.2'
liftVersion = '2.5-M4'
specs2Version = "1.8.2"

jettyRun.contextPath = "/"

repositories {
    mavenCentral()
    mavenRepo name:'scala-releases', urls:'http://scala-tools.org/repo-releases/'
    mavenRepo name:'scala-snapshots', urls:'http://scala-tools.org/repo-snapshots/'
}
configurations {
    scalaCompiler
    scalaLibrary
}

eclipse {
  classpath.containers += ["org.scala-ide.sdt.launching.SCALA_CONTAINER"]
  classpath.minusConfigurations = [configurations.scalaLibrary]
  classpath.plusConfigurations =  ([configurations.scalaCompiler]  + classpath.plusConfigurations)
}

dependencies {
    scalaTools "org.scala-lang:scala-compiler:$scalaVersion", 
        "org.scala-lang:scala-library:$scalaVersion"    

    scalaCompiler "org.scala-lang:scala-compiler:$scalaVersion"
    scalaLibrary "org.scala-lang:scala-library:$scalaVersion"

    compile "org.scala-lang:scala-library:$scalaVersion", 
    	"net.liftweb:lift-mapper_$scalaVersion:$liftVersion", 
    	"net.liftweb:lift-webkit_$scalaVersion:$liftVersion",
    	"net.liftweb:lift-util_$scalaVersion:$liftVersion",
    	"net.liftweb:lift-actor_$scalaVersion:$liftVersion",
    	"net.liftweb:lift-common_$scalaVersion:$liftVersion",
    	"net.liftweb:lift-json_$scalaVersion:$liftVersion", 
        "ch.qos.logback:logback-classic:0.9.29",
        "ch.qos.logback:logback-core:0.9.29",
        "com.h2database:h2:1.+"

    testCompile "junit:junit:4.5", 
        "org.specs2:specs2_$scalaVersion:$specs2Version",
        "org.scala-lang:scala-compiler:$scalaVersion",
	'org.mortbay.jetty:jetty:9.+',
	'org.mortbay.jetty:jetty-util:9.+',
	'org.mortbay.jetty:jetty-management:9.+'
	"org.scala-lang:scala-compiler:$scalaVersion"  // Needed for LiftConsole	

    providedCompile 'javax.servlet:servlet-api:3.+' 
}

task wrapper(type: Wrapper) {
    gradleVersion = '1.3'
}

なるべく最新の状態になるようにしています。 この構成で問題が出来るかどうかはまだわかりませんが、なんとなく新しいほうが素敵です。

でこの設定ができたら、インストールディレクトリで

./gradlew jettyRun

を実行します。

すると、localhost:8080にアクセスすると、以下の画面が表示されます。 Lift

いやぁ、なんか色々苦労した。

Canvasを使用したメーター表示のサンプル

HTML5を使用して、以下の様に画像の周りに丸く囲うようなメーターを表示してみました。

image

以下コード。

// (c) aya_eiya - 2013
(function (){
    this.setMeter = function(_id,size,imageSrc,percent){
    var margin = size * 0.1;
    var canvas = document.createElement('canvas');
        canvas.width = size + margin * 2;
        canvas.height = size + margin * 2;
    var context = canvas.getContext("2d");
    var meterDiv = document.getElementById(_id);
        meterDiv.appendChild(canvas);
    var image = new Image();
    image.onload = function(){
        var transparent = "rgba(0,0,0,0)";
        var meterColor = "rgb(255,128,128)";
        var meterWidth = 16;
        var aspect = this.width/this.height;
        var digs = {0:0,90:Math.PI/2,180:Math.PI,360:Math.PI*2};
        var c = context;

        var setImageToCercle = function(){
            c.strokeStyle = transparent;
            c.beginPath();
            c.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
            c.stroke();
            c.save();
            c.clip();
            c.drawImage(image,margin,margin,size * aspect,size);
            c.restore();
        };

        var setFrameOfMeter = function(){
            c.strokeStyle = meterColor;
            c.lineWidth = 2;
            c.beginPath();
            c.arc(size/2 + margin,size/2 + margin, size/2 - meterWidth,digs[0],digs[360]);
            c.stroke();
            c.beginPath();
            c.arc(size/2 + margin,size/2 + margin, size/2,digs[0],digs[360]);
            c.stroke();
        }

        var setMerterValue = function(){ 
            c.strokeStyle = meterColor;
            c.lineWidth = meterWidth;
            c.beginPath();
            var lDig = -percent/100 * digs[180] + digs[90];
            var rDig =  percent/100 * digs[180] + digs[90];
            c.arc(size/2 + margin,size/2 + margin,size/2 - meterWidth/2, lDig,rDig);
            context.stroke();
        };

        var setTextArea = function(){
            var fontSize = size * 0.18;
            c.font = fontSize + "px Arial";
            var text = percent+"%";
            var textSize = c.measureText(text);
            var textLeft = size * 0.9;
            c.strokeStyle = meterColor;
            c.fillStyle = "white";
            c.lineWidth = 4;
            c.beginPath();
            c.save();
            c.arc(textLeft,size - fontSize/2,textSize.width/2+5,0,digs[360]);
            c.fill();
            c.stroke();
            c.clip();
            c.beginPath();
            c.fillStyle = "black";
            c.fillText(text,textLeft-textSize.width/2,size-fontSize/8);
            c.restore();
        };

        setImageToCercle();
        setFrameOfMeter();
        setMerterValue();
        setTextArea();
    };
    image.src = imageSrc;
    };
})();

使い方サンプル

<html>
<head>
<title>サンプル</title>
<script src="./meter.js"></script>
</head>
<body>
<p>180pxくらいの大きさで80%のメーターを表示する。</p>
<div id="meter"></div>
<script>
	var _id = 'meter';
    var size = 180;
    var percent = 80;
    var imageSrc = 'https://www.dropbox.com/s/0o3qka5gh2fg5hq/Geesugitan_face.png?dl=1';
    setMeter(_id,size,imageSrc,percent);
</script>
</body>
</html>

GitHubに使用例を上げました。 https://github.com/aya-eiya/html5meter_sample

11月から神奈川に住んでます

渋谷まで電車一本190円とか素敵なギークハウス武蔵小杉

11月からはギークハウス武蔵小杉というシェアハウスで毎日ゴロゴロしたり飯作って食ったり掃除したり歯医者行ったり骨削るしかないと言われたりして楽しくやってます。

就職活動とかしてますが、しばらくは無職なので平日昼間でも連絡したらいるかも知れません。
気軽に遊びに来てね。

どこにも所属してませんが、あいも変わらずボクはプログラマーなのでプログラミングの話題を持ってきてくれると大体楽しいと思います。

こういうのちょっと欲しかった

単純なテスト用WEBサーバ機能

URIとレスポンスを文字列で与えたら、そのアドレスでレスポンスを返してくれるだけの単純なサーバー機能が欲しかったので作りました。

https://github.com/aya-eiya/SimpleTestModules

JSONの処理とかで、クライアント側のテストで使ってます。

単純な使い方としては以下のように使います。

public class SampleTest {   

    @Test
    public void test() throws Exception {
        SimpleTestWebServer server = new SimpleTestWebServer();
        server.setHandler("http://localhost:8080/test","Hello Test Server!");
        String respose = getResponse("http://localhost:8080/test");
        assertEquals("Hello Test Server!",respose);
        server.stop();
    }

    private String getResponse(String path) throws Exception {
        URI uri = URI.create(path);
        HttpURLConnection con = (HttpURLConnection)uri.toURL().openConnection();
        BufferedReader reader = new BufferedReader(new InputStreamReader(con.getInputStream()));
        String respose = reader.readLine();
        reader.close();
        return respose;
    }

}