Browse Category

未分類

FirebaseでWebサイトを作ってみる

2016年8月、GoogleDriveのWebホスティング機能が廃止され、Webサーバとして使用することができなくなりました。

これに変わる機能として、Firebaseというサービスがあることを発見!

Firebase自体、2014年にGoogleに買収されているので、正統なGoogleDriveのWebホスティング機能の代替サービスとなっているようです。

Firebaseを導入

導入は、以下のページを参考にしました。

FirebaseでWebサイトを無料でサクッと公開してみる

Node.jsとnpmをインストールする部分はOSによって異なってきますが、Macの場合は以下のサイトの通りにやればなんとかなります。

Node.jsをMacにインストールしてnpmを使えるようにする

途中、Node.jsのインストールの時に、Failed to create the fileというエラーが出て怒られました。
nodebrew install が Failed to create the file と怒られる。

ディレクトリを作れば良いとのこと。

また、パス設定の時にbashrcへ書き込んでいますが、bash_profileが存在しないとうまく設定できないと思います。
以下のサイトを確認してください。
本当に正しい .bashrc と .bash_profile の使ひ分け

パス設定後はターミナルを再起動させる必要がありますが、「source ~/.bashrc」というコマンドを打てば再起動すら必要ありません。

あとは、先ほどのサイトを順にやっていけばWebサイト公開まで行うことができます。

基本的には、ローカルでhtmlなどのデータを作成し、デプロイ(サーバに配置)するという流れで行います。

Firebaseは、Webサイト公開だけではなく、データベースやアプリ作成などもできるので、色々と組み合わせることができると面白そうですね!

それでは、また今度。

さて、FF15やります。

形態素解析&マルコフ連鎖で文章の自動生成に挑戦

文章の自動生成

文章をコンピュータに自動的に生成させるという試みは様々な場所で行われているようで、本格的に作るなら文法を守ったり文脈やストーリーなどを意識して文章を作るということをしなければなりませんが、今回は一番簡単にできる文章生成にチャレンジしてみます。

 

今回作るのは、人気botのしゅうまい君に使われている技術です。


 

しゅうまい君は、大量のtwitterユーザーのツイートを読み込み、そのツイートの単語を適当に組み合わせて新たなツイートを生成しています。

おそらく、しゅうまい君は今回紹介するアルゴリズムを改良したものを使っていると思いますが、ベースとなる技術は同じだと思われます。


アルゴリズムの流れ

ある文章のデータを形態素解析によって語句毎に分解し、マルコフ連鎖で語句を繋ぎ合わせて文章を再構築させるというものです。


形態素解析

形態素解析とは、文章を形態素という単位まで細かく分解することです。

例えば、「庭には二羽ニワトリがいる。」という文だと、「庭/に/は/二/羽/ニワトリ/が/いる/。」といった感じで分割されるようです。

形態素解析には、ヤフーのテキスト解析APIを使用。回数等の制限はありますが、試しに使ってみる程度なら大丈夫でした。

http://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html

 

使い方は、HTTPリクエストを送るとレスポンスとしてXML形式で結果が返ってくるので、それを読み取って活用します。


マルコフ連鎖

マルコフ連鎖をWikiPediaで調べてみると、「マルコフ連鎖は、未来の挙動が現在の値だけで決定され、過去の挙動と無関係である(マルコフ性)。」と出てきます。

今回は、このマルコフ連鎖を用いて文章自動生成を行います。

 

文章を生成するときに、ある形態素に繋げられそうな形態素を選んで徐々に繋げていき文章を作っていきます。

ある形態素というのが、マルコフ連鎖の定義で言うところの現在の値で、次に繋げられそうな形態素というのが未来の挙動です。

 

例えば、「あんずちゃん/の/SSR/が/欲しい/ので/、/バイト/を/初めて/お金/を/稼ごう/と/思います/。」このような文章が与えられているとします。(本来はもっと大量の文章を与えます。)

このとき、「を」という形態素に繋がりそうな形態素は2つありますね。「初めて」と「稼ごう」です。

この繋がりそうな2つの形態素の中から、繋げる形態素を選びます。

実際にはもっと大量の文章が与えられるため、繋がりそうな形態素の数も増えるはずです。


javaでのサンプルとなります。

// URLを生成
String urlstr = "http://jlp.yahooapis.jp/MAService/V1/parse?" +
"appid=" + this.appid + /* ヤフーテキスト解析APIで取得したID */
"&sentence=" + URLEncoder.encode(sentence, "UTF-8") +
"&response=surface,pos" +
"&filter=" +
"&results=ma";

// 生成したURLでYahooAPIへリクエストを送り、xml形式で返ってくる結果を取得
URL url = new URL(urlstr);
InputStream input = url.openStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(input,"UTF-8"));

// マルコフ連鎖辞書型(自作クラス)
private MarkovDictionary dic = new MarkovDictionary();
// xmlを解析
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document doc = builder.parse(new InputSource(new ByteArrayInputStream(reader.readLine().getBytes("UTF-8"))));

NodeList wordlist = doc.getElementsByTagName("word_list").item(0).getChildNodes();
for(int i=0; i<wordlist.getLength(); i++){
    Node node = wordlist.item(i);
    NodeList nodelist = node.getChildNodes();

    String str = nodelist.item(0).getFirstChild().getNodeValue();
    String type = nodelist.item(1).getFirstChild().getNodeValue();
    dic.add(str, type);
}

System.out.println(dic.buildSentence());

以下は、マルコフ連鎖で文を作る部分。

import java.util.ArrayList;

class WordSet {
	String str;
	String type;
	public WordSet(String str, String type){
		this.str = str;
		this.type = type;
	}
	public String toString(){
		return "["+str+","+type+"]";
	}
}

class MarkovNode {
	WordSet[] word = new WordSet[3];
	public MarkovNode(WordSet wordset1, WordSet wordset2, WordSet wordset3){
		word[0] = wordset1;
		word[1] = wordset2;
		word[2] = wordset3;
	}
}

public class MarkovDictionary {
	
	final int maxSentenceNum = 200;
	
	ArrayList<MarkovNode> dic = new ArrayList<MarkovNode>();
	
	ArrayList<WordSet> tmp = new ArrayList<WordSet>();
	
	// マルコフ辞書に3つ並んだ形態素を登録
	public void add(String str, String type){
		tmp.add(new WordSet(str, type));
		if(tmp.size() == 3){
			dic.add(new MarkovNode(tmp.get(0), tmp.get(1), tmp.get(2)));
			tmp.remove(0);
		}
	}
	
	// マルコフ連鎖で文章を生成
	public String buildSentence(){
		String sen = "";
		ArrayList<WordSet> sen3 = new ArrayList<WordSet>();
		// 最初の3つの形態素はランダムに決める
		MarkovNode tmpNode = dic.get((int)(dic.size()*Math.random()));
		sen3.add( tmpNode.word[0] );
		sen3.add( tmpNode.word[1] );
		sen3.add( tmpNode.word[2] );
		
		// 最大値に達するまで形態素を繋げて文章を生成
		for(int i=0;i<maxSentenceNum;i++){
			String addSen = find2Match(sen3.get(1).str, sen3.get(2).str);
			if(addSen == null) break;
			sen += sen3.get(0).str;
			sen3.remove(0);
			sen3.add(new WordSet(addSen,""));
		}
		
		sen += sen3.get(0).str + sen3.get(1).str + sen3.get(2).str;
		
		return sen;
	}
	
	// 繋げられそうな次の形態素を探す
	// 2重マルコフ連鎖なので、2つの形態素を用いる
	private String find2Match(String str1, String str2){
		ArrayList<String> ansList = new ArrayList<String>();
		for(int i=0; i<dic.size(); i++){ if(dic.get(i).word[0].str.equals(str1) && dic.get(i).word[1].str.equals(str2)){ ansList.add( dic.get(i).word[2].str ); } } if(ansList.size() > 0){
			return ansList.get( (int)(ansList.size()*Math.random()) );
		}
		else return null;
	}
	
	public void show(){
		for(int i=0; i<dic.size(); i++){
			System.out.println(dic.get(i).word[0].toString() + ", " + dic.get(i).word[1].toString() + ", " + dic.get(i).word[2].toString());
		}
	}

}

 

とまあ、こんな感じで、簡単な文章作成ができました。

頑張れば、ブログの記事を自動で書いてくれるようなものを作ることができるかもしれませんね。

 

BulletをMac OS X(Xcode)で用いる

オープンソースの物理エンジンBulletをXcodeで用いるときにちょっと手こずったので。
「Bullet Xcode」なんかでぐぐるといくつか出てきますが、それぞれでやり方が微妙に違ったりするので、個人的に一番簡単だと思った手順を下記にまとめておきます。

  • 下準備

ビルドにCMakeのコマンドライン版を用いるので事前に使えるようにしておいてください。Homebrewなどのパッケージマネージャーを用いてインストール、あるいは、CMakeのGUI版があるならそれ経由でインストールも可能です。CMakeのGUI版は過去にインストールしたけどコマンドライン版は使えないなー(cmakeコマンドが効かない)という方は下記をターミナルで入力してください。

PATH="/Applications/CMake.app/Contents/bin":"$PATH"
sudo "/Applications/CMake.app/Contents/bin/cmake-gui" --install

CMake(GUI版)の”Tools”->”How to Install For Command Line Use”メニューの記述がソースです。気になる方は確認してみてください。
さて、これで下準備は完了です。


  • Bulletのダウンロード

さて、まずはBulletをダウンロードしないと何も始まりません。

https://code.google.com/archive/p/bullet/downloads

上記サイトからUnix用のものをダウンロードして、適当なフォルダで展開しておいてください。
(執筆時の最新版は「bullet-2.82-r2704.tgz」です)

 

  • Bulletのビルド

次はビルドをします。CMakeでやると簡単だよーという記述があったのでCMakeを用います。今回はビルド後にXcodeプロジェクトに組み込みやすいように、BulletをFrameworkディレクトリとしてライブラリ化します。

上記手順でダウンロード後に展開したフォルダ名を「bullet-2.82-r2704」とします。
下記をターミナルで入力してください。

cd bullet-2.82-r2704
mkdir bullet-build
cd bullet-build
cmake .. -G "Unix Makefiles" -DINSTALL_LIBS=ON -DBUILD_SHARED_LIBS=ON -DFRAMEWORK=ON \
   -DCMAKE_OSX_ARCHITECTURES='i386;x86_64' -DCMAKE_BUILD_TYPE=RelWithDebInfo \
   -DCMAKE_INSTALL_PREFIX=/Library/Frameworks -DCMAKE_INSTALL_NAME_DIR=/Library/Frameworks \
   -DBUILD_DEMOS:BOOL=OFF
make -j4
sudo make install

途中、少し時間がかかるかもしれません。気長に待ちましょう。
しばらくして全ての処理が完了したらルートディレクトリのLibrary/Frameworksを見てみましょう。

ls /Library/Frameworks/

とやって、そこにBullet〜系のフレームワークとLinearMath.frameworkが生成されていれば完璧です。

 

  • 自分のXcodeプロジェクトに導入する

Bulletをフレームワークとして用いることができるようになったので、あとはそれを自分のプロジェクトに導入すれば終了です。
Xcodeのプロジェクト設定画面を開いて、Build Phase -> Link Binary With Libraries の項目に先ほど生成したFrameworkを追加するわけですが、ここでのデフォルトのパスが先ほどインストールした/Librari/Frameworksではなく、/System/Library/Frameworksになっているため、普通に検索したのでは出てきません。

open /Library/Frameworks/

などとやって、Finderで開いたのちにドラッグ&ドロップしてください。
スクリプトでは下記のファイルをインクルードするようにしてください。

#include <BulletDynamics/btBulletDynamicsCommon.h>

はい、これでXcodeでもBulletを用いることができます。


参考にさせていただいたサイト
http://bulletphysics.org/mediawiki-1.5.8/index.php/Installation
http://lv4.hateblo.jp/entry/2014/02/05/095646
http://blog.livedoor.jp/homuerio/archives/15360956.html


先日、渋谷WWWで行われた酸欠少女さユりさんの2ndワンマンライブ「ミカヅキの航海」を観に行きました。演出、演奏、歌、MC、なにからなにまで最高でした。すべて細かく書きたいところですが、今回の記事以上に長くなってしまうかもしれないのでひとまず堪えます。

いやーーーーー、是非また行きたい!!!!

そう思える素敵なライブでした。ありがとうございます。

さユりさん応援してます。これからも頑張ってください。

Box2Dの導入(VS2013とXcode7.1.1の例)

以前、2D物理演算ライブラリ”Box2D”を自分の環境に導入した時の個人的なメモです。
Visual Studio 2013 と Xcode 7.1.1 の両方でやったので、それぞれでの手順を簡単に。

・Box2Dの入手

上記ページから「Box2D_v2.3.0.7z」をダウンロード。
解凍して得られた <Box2D_v2.3.0> を適当なフォルダに移動。

・Visual Studio 2013 の場合

 

① CMakeでビルド
<Box2D_v2.3.0/Box2D> に <Build> フォルダがあることを確認。
中身は <vs2012> と <xcode5> と <Readme.txt> のはず。
今回はvs2013で用いるので、ここに <vs2013> のフォルダを作成。
CMake(cmake-gui.exe)を起動。
「Where is the source code:」に <Box2D_v2.3.0/Box2D> を指定。
「Where to build the binaries:」に <Box2D_v2.3.0/Box2D/Build/vs2013> を指定。
「Configure」ボタンをクリック。
ここで「Visual Studio 2013」を選択すること。
自分の使用環境とは違うバージョンで生成するとライブラリを生成した後に泣きをみることになる。
Configure done. と出たら、最後に「Generate」をクリック。
<vs2013> の中にいろいろ生成されていることを確認したら次へ。

 

② バッチビルドを行ってライブラリファイルを生成
<vs2013> の中に生成されたソリューションファイルBox2D.slnを開く。
適当なプロジェクト(Testbedがおすすめ)を右クリックでスタートアッププロジェクトに設定して、
ビルド。実行。ちゃんと動くことを確認。
満足したら、ビルドメニューの「バッチビルド」をクリック。
「すべて選択」を選んだ後に「ビルド」をクリック。
すべて処理が終了したらソリューションを閉じる。
このバッチビルドにより、ライブラリファイルが生成されたので、
自分のプロジェクトにBox2Dを組み込むことができるようになる。

 

③ 自分のプロジェクトに導入してみる
Visual Studio 2013 を起動。
Win32コンソールアプリケーションで適当に空のプロジェクトを新規作成。
プロジェクトのプロパティで、
「追加のインクルードディレクトリ」に <Box2D_v2.3.0/Box2D> を設定。
「リンカー」の「入力」のタブの「追加のライブラリファイル」に
<Box2D_v2.3.0/Box2D/Build/vs2013/Box2D/Release/Box2D.lib> を設定。
(vs2013でDebugモードを選択している場合はDebugの方を入力すること)
あとはソースコードで <Box2D/Box2D.h> をインクルードすれば良い。

・Xcode 7.1.1 の場合

 

① Xcodeプロジェクトを作成
Xcode を起動。
新規プロジェクト -> OS X -> Application -> Command Line Tool で次へ。
適切な Product Name を入力し、Language を C++ に設定して次へ。
Source Control のチェックはとりあえず空欄で、
Add to は “Don’t add to any project or workspace” に設定。
どちらもたぶんデフォルトでそうなってるはず。そして “Create” で作成。

 

② XcodeプロジェクトにBox2Dを導入
Finderから <Box2D_v2.3.0/Box2D/Box2D> のフォルダを
Xcodeヒエラルキービューのプロジェクト直下にドラッグ&ドロップ。
なんかダイアログが出るはず。(ここが重要)
“Copy items if needed” と “Create groups” と “Add to targets” のところにチェックを入れる。
ここで、必ず “Create groups” にチェックを入れること。
“Create folder references” にチェックを入れるとうまくいかない。
そして、ヒエラルキービューでプロジェクトを選択し、
Build Settings -> Search Paths -> Header Search Paths に $(PROJECT_DIR)/** と入力。
あとはソースコードで <Box2D/Box2D.h> をインクルードすれば良い。

参考にさせていただいたサイト

・所感
メモをべたっとやっただけなので文字ばかりになってしまいました。そして、ところどころ自分の記述に不安があります。バッチビルドでライブラリファイルが云々のところも自分でよくわかってないところ。不審な点があればご指摘頂けると幸いです。

冬アニメが終わり、季節の移り変わりを感じる今日この頃でした。

AndroidでSocket通信時にエラー : android.os.NetworkOnMainThreadException

タイトルの通りですが、Android上でTCPクライアントを作ろうとしてエラーが出て詰まったので記録。

new Socket(“(ip address), (port)”); にてソケットを作ろうとすると強制終了。
エラーログには「android.os.NetworkOnMainThreadException」という文字が。

どうやら、Android3.0以降ではメインスレッド(UIスレッド)でネットワーク処理を行うとこのエラーになるようです。

AsyncTaskクラスを継承したクラスを作成することにより解決。(AsyncTaskLoaderを利用する方法もあるようです)

TCPTask.java

public class TCPTask extends AsyncTask<Integer, Integer, Integer> {

    @Override
    protected Bitmap doInBackground(Integer... params) {
        
        try {
            Socket sock = new Socket("(ip address), (port)");  // 接続開始
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return null;
    }
}

これを、メインスレッドで呼び出せばおk。

MainActivity.javaの一部

TCPTask tcpTask = new TCPTask();
tcpTask.execute();

ソケット終了処理等を省いています。

「SyntaxHighlighter Evolved」行番号と実際の表示がずれている時の対処

ソースコードを綺麗に表示できるWordPressプラグイン「SyntacHighlighter Evolved」を入れてみたら、行番号と実際の表示が微妙にずれていることを発見。

調べてみたところ、どうやら以下の方法で直るようです。

syntaxhighlighterの行スタイルがずれる件

WordPressでbootstrapを使用しているテーマだと、起こるみたいです。

管理画面からテーマの編集、style.cssの中の任意の場所(特にこだわりがなければ一番下とか)に追加してみると、無事に直りました。

MacでC#プログラミング

MacのターミナルでC#のコンパイル・実行を行う方法のまとめ。
(HelloWorldを行いました)

0. 前提

「HomebrewなどでMonoをインストールしてある」 or 「Unityをインストールしてある」
とりあえずMonoが入ってれば大丈夫かと。

1. 適当なディレクトリで test.cs を作成

// test.cs
using System;

class test
{
    public static void Main(string[] args)
    {
        Console.WriteLine("Hello, world!");
    }
}

2. mcs というC#コンパイラで test.cs をコンパイル

$ mcs test.cs

もし mcs が not found と言われる場合は、パスがちゃんと通ってない可能性がある。(かくいう自分もそうでした)今回はこのページを参考にしました。Unity経由でMonoを入れた人はUnity.appの中にmcsがあるっぽいので、そこまでのパスを通してあげれば大丈夫。
たぶんmcsは /Applications/Unity/Unity.app/Contents/Frameworks/MonoBleedingEdge/bin/ にあるので(ちゃんと自分でも確認してみてください)、

$ PATH=$PATH:/Applications/Unity/Unity.app/Contents/Frameworks/MonoBleedingEdge/bin/

上記をターミナルで入力すればパスが通って mcs が not found ではなくなると思います。

ちなみに上記コマンドはターミナルを再起動する度に入力をする必要があります。
そんなのめんどすぎて無理って人は、ルートディレクトリにある .bash_profile に下記のものを書き加えておくといいです。(#で始まってる一行はコメント文)

# 'mcs' path
export PATH=$PATH:/Applications/Unity/Unity.app/Contents/Frameworks/MonoBleedingEdge/bin/

書き加えたら、その変更を適用するためにターミナルを再起動してください。改めてパスを通さなくても大丈夫になってるはずです。

3. monoでtest.exeを実行

手順2がうまくいけば test.exe が生成されてるはず。

$ mono test.exe

これで実行できます。
Hello, world! と表示されれば成功。

 

お疲れ様でした。

冷やしあんず、始めました。

すでに年の瀬ですが、ここで暑い夏を思い出してみましょう。

冷やし中華、始めました。というフレーズが思い出されますね。

それとは少し関係無いですが、あんずのうたって最高ですよね。

では「冷やしあんず」なんていかがでしょうか。

 

最高ですね。

というわけで、冷やしあんず、始めました。