2015-11-29

ComputerCraftEduで遊んだ

Minecraft

近年Minecraftは好奇心をくすぐる意味で教育に良いと言われており、Microsoftは「Minecraft in education」を出すなど、そっちの方面で結構盛り上がっています。

ComputerCraftEduは、ComputerCraftの教育向けにカスタマイズされたMODで、ブロックを使ったプログラミングが可能です。Minecraft in educationの一部として同梱されており、半ば公式認定されてる感あります。

f:id:esperia:20151128224813p:plain

導入

Minecraftと、Forgeのインストール

Minecraft公式クライアントをインストール
ランチャー起動→ゲーム開始→終了
Forge 1.7.10をインストール
ランチャーを起動
[Edit Profile]を押下し、下記のような感じでプロファイルを設定

f:id:esperia:20151128225133p:plain

ランチャー起動→ゲーム開始→終了
- ゲーム開始すると、先ほどのプロファイル内の[Game Directory]に指定したパス内に、[mods]ディレクトリができます。

http://services.minecraftedu.com/wiki/ComputerCraftEdu#Using_ComputerCraftEdu

ComputerCraftEduのインストール

公式サイトのGetting Startedの[I'M A PLAYER]の中に、[Download Mod for 1.7.10]があるので、それを押下する
- ComputerCraftPlusComputerCraftEdu1.74.jar がダウンロードできる。
ダウンロードした、上記jarファイルを、[mods]ディレクトリに入れる。

公式チュートリアルマップを導入する

公式サイトのGetting Startedの[I'M A PLAYER]の中に、[Tutorial Map for Regular Minecraft]があるので、それを押下する
- Turtle Canyon for ComputerCraftEdu and Forge 1.7.10.2.zip がダウンロードできる。
zipを解凍しておく。中から Turtle Canyon for ComputerCraftEdu and Forge 1.7.10.2 というディレクトリが出てくる
[Game Directory]のパス内([mods]ディレクトリと同じ階層)に、[saves]ディレクトリがあるので、この中に入れる

使ってみる

導入できたら、早速ランチャーより、ゲームを起動しましょう。[シングルプレイ]メニューの中に、[Turtle Canyon 1.7.10.2]があるのでそれをクリックします。

f:id:esperia:20151129022955p:plain

こんなマップです。

f:id:esperia:20151129023837p:plain

このマップは、ちょっとした物語の設定があり、主人公は「伝説のTurtle Canyon」を探し求めて幾多の時間を旅してきたことになっています。砂漠、かつ渓谷なのはこの辺の設定を反映したものっぽい。

さらに、この渓谷は不思議な力で護られており、物語的にブロックが自由に壊せない設定となっています(=アドベンチャーモード)。

ここまでで、いろいろ遊べる感じですね！

自分で作るには

ComputerCraftEduでは、 Beginner's Turtle と Turtle Remote Control が必要です。チュートリアルマップでは既に用意されていましたが、自分で作るには、材料を揃えて作業台で作らなければなりません。

メモ的に、作り方を書いておきます。

Beginner's Turtle

黄緑色の羊毛(wool (lime)) 7つ
レッドストーンブロック(redstone_block) 1つ
チェスト(chest) 1つ

f:id:esperia:20151128231730p:plain

Remote control

レバー(lever) 1つ
レッドストーントーチ(redstone_torch) 1つ
ボタン(stone_button) 1つ
鉄インゴット(iron_ingot) 4つ

f:id:esperia:20151128231737p:plain

Beginner's Mining Turtle

さらに、ブロックを破壊できるTurtleを作るには、 Beginner's Turtle にダイアモンドのツルハシを組み合わせる必要があります。

Beginner's Turtle 1つ
ダイアモンドのツルハシ(diamond_pickaxe) 1つ

f:id:esperia:20151129024358p:plain

参考リンク

ComputerCraftEduチュートリアル動画
ComputerCraftEdu - MinecraftEdu wiki
- ComputerCraftEdu の Wikiトップページ
Programming with ComputerCraftEdu
- プログラムの書き方が書かれている
[Turtle] http://computercraft.info/wiki/Turtle#Recipes
- ComputerCraftEduではなくComputerCraftの記事だが、Turtleの作成の方法は同じなので役に立つ。
- 一応Computerとかも作れるようになってる

2015-11-26

IntelliJ IDEA + Forge 1.7 で modding 環境整えた

minecraft

追記：こちらは1.7.10以前向けの記事です。1.8以降はIntelliJ IDEA + Forge 1.8 で modding 環境整えた - Spica*をご参考ください。

とりあえずMod作り始めるところまで書いとく。

環境

Forge 1.7.10
Mac OS X (El Capitan)
IntelliJ IDEA 15

手順

まず、Forge公式のv1.7.10のページから、"Src"をダウンロード
- "forge-1.7.10-10.13.4.1558-1.7.10-src.zip"みたいなファイルがダウンロードできる
ダウンロードしたら、ダブルクリックで解凍
ターミナルを開き、解凍したディレクトリに移動
- 参考: minecraft - IntelliJ IDEAでModding - Qiita

# 移動
cd /path/to/forge-1.7.10-10.13.4.1558-1.7.10-src

# 下記の２つのコマンドを順番に実行
./gradlew setupDecompWorkspace
./gradlew setupDevWorkspace ideaModule

IntelliJ IDEAを開き、最初の画面で"import project"を選択して、先ほどのディレクトリの中にある"build.gradle"ファイルを選択する。その後JDKを選択したりする画面が表示されるが、そのまま次へいく。
しばらくすると、開発する画面が表示される。

MODの実行

MODの知識ない状態で、どうやって手を付ければいいのかが難しいですね…。みんなどこ見てるの。このへんが公式だと思うだけど、Outdatedって。。

とりあえず、最初からあるクラスのコードに+αして、動いてることを確認してみる。

package com.example.examplemod;

import cpw.mods.fml.common.Mod;
import cpw.mods.fml.common.Mod.EventHandler;
import cpw.mods.fml.common.event.FMLInitializationEvent;
import net.minecraft.init.Blocks;

@Mod(modid = ExampleMod.MODID, name = ExampleMod.MODNAME, version = ExampleMod.VERSION)
public class ExampleMod {
    /** MODのID。小文字であること */
    public static final String MODID = "examplemod";
    /** MODの名前 */
    public static final String MODNAME = "Example Mod";
    /** MODのバージョン */
    public static final String VERSION = "1.0";

    @Mod.Instance(value = ExampleMod.MODID) //Tell Forge what instance to use.
    public static ExampleMod instance;

    @EventHandler
    public void init(FMLInitializationEvent event) {
        // some example code
        System.out.println("Hello!! DIRT BLOCK >> " + Blocks.dirt.getUnlocalizedName());
    }
}

そして、ターミナルから下記を実行。

cd /path/to/forge-1.7.10-10.13.4.1558-1.7.10-src

# 実行
./gradlew runClient

Minecraftが起動する。と同時に、ターミナルに沢山のログが流れる。その中に、先ほどのメッセージが表示されていることを確認する。

f:id:esperia:20151126010331p:plain

…ちゃんと出てる！ということはとりあえず実行完了ということですね。早くブロック置きたい。

※つづき書きました：Minecraftでカスタムアイテム作ってみる - Spica*

2015-11-15

mecabをnodeで使う (Mac OS X)

mac node

# MeCabインストール
$ brew search mecab
homebrew/php/php53-mecab      homebrew/php/php56-mecab      mecab-jumandic                mecab-unidic
homebrew/php/php54-mecab      mecab                         mecab-ko
homebrew/php/php55-mecab      mecab-ipadic                  mecab-ko-dic

$ brew install mecab mecab-ipadic

# モジュール作って、インストール
$ mkdir my-mecab-test
$ cd my-mecab-test
$ npm init
$ npm install mecab-async --save

# テストファイル作る
$ vim test.js

今回使用したモジュールは、 node-mecab-async です。このドキュメントに沿って、下記のように "test.js" を記述しました。

var MeCab = new require('mecab-async')
  , mecab = new MeCab();

mecab.parse('すもももももももものうち', function(err, result) {
  if (err) throw err;
  console.log(result);
});

そして実行。

$ node test.js
[ [ 'すもも', '名詞', '一般', '*', '*', '*', '*', 'すもも', 'スモモ', 'スモモ' ],
  [ 'も', '助詞', '係助詞', '*', '*', '*', '*', 'も', 'モ', 'モ' ],
  [ 'もも', '名詞', '一般', '*', '*', '*', '*', 'もも', 'モモ', 'モモ' ],
  [ 'も', '助詞', '係助詞', '*', '*', '*', '*', 'も', 'モ', 'モ' ],
  [ 'もも', '名詞', '一般', '*', '*', '*', '*', 'もも', 'モモ', 'モモ' ],
  [ 'の', '助詞', '連体化', '*', '*', '*', '*', 'の', 'ノ', 'ノ' ],
  [ 'うち', '名詞', '非自立', '副詞可能', '*', '*', '*', 'うち', 'ウチ', 'ウチ' ] ]

mecabほんとすごい…

2015-09-12

phpMyAdminを最速で動かす(PHP5.4以降限定)

メモ php

# ダウンロード(お好きなバージョン)
curl -O -L https://files.phpmyadmin.net/phpMyAdmin/4.4.14.1/phpMyAdmin-4.4.14.1-all-languages.zip

# 解凍
unzip phpMyAdmin-4.4.14.1-all-languages.zip
cd phpMyAdmin-4.4.14.1-all-languages

# phpMyAdmin起動
php -S localhost:8888

# http://localhost:8888/ にアクセス

いちいちApacheの設定するのとか権限周りめんどいなぁとか思ってたけどPHP: ビルトインウェブサーバー - Manual忘れてたわ…音速で起動した。

2015-09-09

27歳になりました

よもやま

ついに、なんとなーく27歳になってしまいました。思うところいろいろあるのでつらつらーっと書こうかなと思います。。

スキルのこと

会社ではいろんなことを経験させてもらいまして、おかげさまで現時点でJavaScript/Java/Objective-C/PHP/ShellScriptがそれなりに扱えるようになりました。JavaScript/ShellScriptは独学だけど、会社の時間もちょいちょい使わせてもらってます。（勝手に）

最近はすごいWeb周りの技術が進んで、知らない間に選択肢も増え、フロントエンジニアとしてはまだまだ勉強しないといけないことが多いなあと感じています。例えば、Electronを使えば既知のWebの技術でWindows/Linux/Macアプリも作れることでしょう。

しかし、他の面もかなり発達していて、Raspberry Piなどの功績によりIoTの敷居が下がったり、JVM言語の発達(Java8の登場やScalaの普及、さらにはKotlinのじわじわと広がってる感など)を見ていると、バックエンドもどんどん変わり続けている印象を受けます。同じように、組み込みなど、もっと下層の技術・環境も発達していることでしょう。。

僕はまだ漠然としか見れていないですが、それらをそれぞれ繋げば、もっと楽しいことが待っているんじゃないかと思っています。浅く広く、ただ最低限「僕の書いたコードは将来誰かが見るコード」という意識を持って勉強出来たらなぁと思ってます。

クリエイティブなこと

今までにも思っていたんだけれど、多分僕は絵や作曲、演奏などの「クリエイティブ」な部分は向いてないように感じてますｗ

これは実際にある程度やってから感じてます。多分今までのように、やれば上達するとは思うのだけれど、思い通りにならない部分を恥ずかしさと感じているのが大きいです。ある意味今まで上達したのはそういうのの上塗りをしていたのかなと感じることもあったり。やっぱりそっちよりもプログラミングのように、あるべき形まで「設計」をする方が、肌に合ってるのかなと感じてます。

ただ、もちろん何でもそうだと思うんですけど、傾向としてプログラミングは設計なのであるだけで、重なるところもあって、例えば、プロダクトデザインやWebデザインなんかは「設計」と「クリエイティブ」の中間になるのかなと感じてます。こないだ話題になった、五輪デザインの話なんか、すごい設計寄りの解説でしたねー。

なので、外堀を埋める形で、これからもクリエイティブなことは挑戦できたらなぁと思ってます。

結婚

結婚してもう早二年が経とうとしてます。いろいろありましたが、今は落ち着いていて、ゆったりとした生活を送っています。（忙しくなるので今日までだけど…）

変わったことはいろいろあるんですが…逆に言うと特別これってことが無い…。色んな所に出かけて、色んなことをしました。その場で楽しむことに集中しすぎて、SNSに投稿するのちょっとめんどくさいみたいになるので、あまり写真とかも無いｗ

Twitterでは氏にまくってますがエンジョイしてるだけだからね！！勘違いしないでよね！！！！

さて、ご飯食べてきます。

2015-09-06

libGDXで3Dのモデル表示してみた

libgdx java

f:id:esperia:20150906175305p:plain

MagicaVoxelについての記事を見てちょっと楽しそうだったので同じ所までやってみました。 libGDXプロジェクトを作成し、MagicaVoxel の標準で用意されているモデルをを、画面上に表示するところまでしてみました。環境はMac。

プロジェクト作成

下記設定で作りました。普通ですね。

f:id:esperia:20150906175630p:plain

チュートリアルに沿ってコードを記述

Loading models using libGDX | blog.xoppa.comの通りにコードを書きます。

このドキュメント自体は、libgdx Wiki -> 3D Graphics -> Quick Start -> Basic 3D using libGDX | blog.xoppa.com -> Next: から飛べます。公式…というより公認？のページみたいです。

書くときは、importするクラスには注意して下さい。別パッケージに同じクラス名があるので、間違えるとビルドできません。

package com.esperia09.samples.libgdx.magicavoxel;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.assets.AssetManager;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.PerspectiveCamera;
import com.badlogic.gdx.graphics.g3d.Environment;
import com.badlogic.gdx.graphics.g3d.Model;
import com.badlogic.gdx.graphics.g3d.ModelBatch;
import com.badlogic.gdx.graphics.g3d.ModelInstance;
import com.badlogic.gdx.graphics.g3d.attributes.ColorAttribute;
import com.badlogic.gdx.graphics.g3d.environment.DirectionalLight;
import com.badlogic.gdx.graphics.g3d.utils.CameraInputController;
import com.badlogic.gdx.utils.Array;

public class MyGdxGame extends ApplicationAdapter {
    private static final String PATH_MODEL = "chr_knight.g3db";
    public PerspectiveCamera cam;
    public CameraInputController camController;
    public ModelBatch modelBatch;
    public AssetManager assets;
    public Array<ModelInstance> instances = new Array<ModelInstance>();
    public Environment environment;
    public boolean loading;

    @Override
    public void create() {
        modelBatch = new ModelBatch();
        environment = new Environment();
        environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.4f, 0.4f, 0.4f, 1f));
        environment.add(new DirectionalLight().set(0.8f, 0.8f, 0.8f, -1f, -0.8f, -0.2f));

        cam = new PerspectiveCamera(67, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        cam.position.set(7f, 7f, 7f);
        cam.lookAt(0, 0, 0);
        cam.near = 1f;
        cam.far = 300f;
        cam.update();

        camController = new CameraInputController(cam);
        Gdx.input.setInputProcessor(camController);

        assets = new AssetManager();
        assets.load(PATH_MODEL, Model.class);

        loading = true;
    }

    private void doneLoading() {
        Gdx.app.log(getClass().getSimpleName(), "doneLoading");
        Model ship = assets.get(PATH_MODEL, Model.class);
        ModelInstance shipInstance = new ModelInstance(ship);
        shipInstance.transform.setToScaling(0.5f, 0.5f, 0.5f);
        instances.add(shipInstance);
        loading = false;
    }

    @Override
    public void render() {
        if (loading && assets.update()) {
            doneLoading();
        }
        camController.update();

        Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);

        modelBatch.begin(cam);
        modelBatch.render(instances, environment);
        modelBatch.end();
    }

    @Override
    public void dispose() {
        modelBatch.dispose();
        instances.clear();
        assets.dispose();
    }
}

これだけで表示完了…かつ、

ドラッグで移動
ホイールで拡大率変更

できます。すごい…

Androidの場合は、二本指での拡大と、スワイプでの回転ができました。

f:id:esperia:20150907201031p:plain

chr_knight.g3dbファイルは、MagicaVoxelについての記事で説明されているように、MagicaVoxelからexportし、libgdx/fbx-convを使って*.obj -> *.g3dbへ変換するとOKです。ちょっとつまずいたこともありましたが、その内容に関しては先程の記事にコメントつけました。

感想

数字全然僕ダメで、行列すら習ってない系だったのでかなり躊躇してたんですが、最初の敷居すごい低かったのが嬉しかったです。いや、これで何か考えてるわけではないんですが…何かするきっかけはできたかなという感じです。

2015-08-01

express-generatorをforkして、ECT使えるようにした

ECTっていうのは、テンプレートエンジンの一つです。

ECT - Fastest JavaScript template engine with CoffeeScript syntax

このECT、テンプレートの継承が便利で、かつjadeのような特殊文法さが少ないので学習コストが低いのが特徴です。文法はejsに似てますが、若干違います。実行速度も速いらしく、しばらくexpressと連携して使ってみたいなと思いまして、簡単に使えるようにしてみました。

インストール

npm uninstall -g express-generator
npm install -g esperia/generator

後者のコマンドを入力すると、僕がforkしたリポジトリ(esperia/generator)の方からダウンロード・インストールを行なってくれるようになってます。一応ejsの方を参考にテストを書きまして、passしました。

使い方

express --ectで、現在のカレントディレクトリにプロジェクトを作製できます。

$ express --ect

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.ect
   create : ./views/layout.ect
   create : ./views/error.ect
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=gen:* npm start

デフォルトに戻す場合

npm uninstall -g express-generator
npm install -g express-generator

参考

Node.js - 爆速テンプレートエンジンなECT ＆ express4をよく使うのでひな形をGithub公開してみた。 - Qiita

上記記事の内容を、コマンドでgenerateできるようにした感じです。(layout.ectとかは参考にしてないので多分記述違うだろうなあ…)

ECT出てからわりと経つのに、express-generatorモジュールに反映されてないの、多分理由があるんだと思ってる…。 PR投げてもいいけど、コミット整理するのめんどい(´・ω・｀)

追記

~~言い忘れてた…。僕が改造したrepoですが、ちょっと気に食わなかったところ改造してます…。~~

~~publicディレクトリ内のディレクトリ名変更~~
- ~~javascripts -> js~~
- ~~stylesheets -> css~~
- ~~images -> img~~
~~テンプレート内の、HTMLの属性を囲むシングルクォートを、ダブルクォートに変更~~

~~細かいことなんですけどね…。~~

(2015-08-11追記: 上記独自仕様やめました。compassとかにも影響が出ることがわかったので…）