WebGLを基本からやる

とりあえずgl.enchant.jsとかのライブラリを使って、ゲームを作るのもいいけど、WebGLの基本を知っていたほうがいろいろ応用が効くだろうと思ったので基本からの勉強もやっていこうと思いました。(すぐに気が変わってしまう)

とりあえす、Bitbucketに勉強用にソースをあげていこうと思います。

WebGL skillup

enchant.jsでゲームプログラミングに挑戦!

JavaScriptのゲームフレームワークのenchant.jsを紹介したいと思います。これ単体だと2Dゲーム用なのかな?といった感じですが、enchant.jsにはプラグインがあり、その中にはgl.enchant.jsなんてものがあります。

gl.enchant.jsはWebGLを使っているようです。このプラグインはまだ試していませんが、単純な3Dゲームならけっこう簡単につくれる気配がします。次の土日はこれに挑戦しようと思います。

脳力の低下

今日は、Excelのデータを加工して、ファイルに出力する処理を行うのにRubyを使ってみました。Excel VBAでもできそうだったけど、VBがいまいち好きになれないのと、今後のことも考えて、Rubyでやってみました。Rubyは今までも何回かちょっとした作業の自動化で使ったことがあったけど、時間が空いてしまって、文法とかほとんど忘れていました。

なんかここ最近何かを考えたり、覚えたりという脳の力が著しく低下しているような気がします。これもインターネットに慣れてしまったせいなのかもしれません。
自分でじっくり考える前にGoogleを開いているし、Googleで調べれば、わかるから覚えようとしていない。
それはメリットでもありますが、自分の脳をしっかり使って考えたり、覚えたりすることも怠ってはダメですね。要はバランスが大事ってことですね。

 

 

Windows PowerShell

ちょっとpowershellをいじったのでメモ。

#背景色、文字色の設定確認
$host.ui.rawui
$host.privatedata
#エラー時の背景をDarkMagentaに変える
$host.privatedata.ErrorBackgroundColor = "DarkMagenta"

こんな感じで、エラー時の背景色を通常の背景色と同じにしてみました。

jsshellが便利

今日は、jsshellというchromeの拡張機能を試してみました。
これは、現在表示中のWebページ上でjavascriptを書いて実行できるというものです。
chromeのデベロッパーツールでもできますが、 jsshellは、デフォルトでjqueryを使うことができます。

以下のように小窓が開いてコーディングできます。しかも、入力補完もできる。

タイトル下部の「いろいろプログラミングしていきます」の部分を適当にいじってみました。↓

気軽にjqueryを試せるのがいいですね。

久しぶりに投稿

久しぶりに投稿。最近仕事が忙しすぎて、ブログ書く暇がなかったというと言い訳ですね。書く時間をつくろうと思えばいくらでも作れましたが、怠けてしまった。

今日はじめて白ココアを飲んだけど、かなり美味しかったです。

ところで、Goole日本語入力をインストールしてみたんですが、これなかなかいいですね。もっと早く使っていればよかった。
最近は、 仕事以外でプログラム全然作ってなかったから、そろそろ何か挑戦したいなぁ。
HTML5、WebSocekt、WebGL、Node.jsあたりをやりたい。 でも、来週はモンハン発売日なのでまた、怠けてしまうかも。

とりあえず、久しぶりにブログを書けたんで、明日から毎日更新するように頑張ってみます。

Chrome上でC/C++を動かせるNative Clientを試す(Windows)

Native Client SDKのインストール

http://code.google.com/intl/ja/chrome/nativeclient/docs/download.htmlからSDKをダウンロードして、インストールします(パスにスペースが入らないように気をつける)。
自分は、C:\nacl\native_client_sdk_0_5_1031にインストールしました。

インストール後、examplesフォルダの中にhttpd.pyがあるのを確認。これはpythonのスクリプトで実行すると、webサーバが起動されます。動かすにはpython2.xxが必要です。

サンプルで動作確認

Native Clientを動作させるには、Chrome14以上が必要です。chrome14は現在β版が出ているのでこれを使います。
chrome://flagsにアクセスし、ネイティブクライアントを有効にして、chromeを再起動します。これでサンプルが動くはず。
コマンドプロンプトでexamplesフォルダに移動して、以下のコマンドを打ち、webサーバを起動します。

python httpd.py

うまくいけば、以下のメッセージが出ます。

INFO:root:Starting local server on port 5103
INFO:root:To shut down send http://localhost:5103?quit=1

そして、chromeでhttp://localhost:5103/にアクセスします。そしてHello World in Cをクリックします。

そして、「Call fortyTwo()」ボタンを押すと、ダイアログが出てきて「42」と表示され、「Call reverseText()」ボタンを押すと、ダイアログが出てきて、テキストボックスに入力された文字列を逆順にしたものが表示されると書いてあります。

試しにCall fortyTwo()ボタンを押してみると・・・・・・何も起きませんでした。Call reverseText()ボタンも何も起こりません。Developer Toolsで調べると、ボタンを押したときに以下のエラーが発生してました。

Uncaught TypeError: Cannot call method 'postMessage' of null

chrome://flagsを見ると、ネイティブクライアントはちゃんと有効になっていたので、まったく原因がわからず、Googleでいろいろ調べていたら、chrome://pluginsにもネイティブクライアントの設定箇所があることが判明。chrome://pluginsでNative Clientを有効にして、再度挑戦したらうまく動きました。

とりあえず、ここまで。

Githubでソース管理!Windows+Cygwin(gnupack)でGithubを使う

Cygwinのインストール

ここでは、gnupackというアーカイブ展開のみでcygwinとemacsを使えるツールを利用することにします。ダウンロードして、展開するだけでcygwinとemacsがすぐに使えます。以下のサイトからダウンロードします。

Gitのインストール

cygwinを起動し、gitをインストールします。gnupackでは、cygwinパッケージをインストールする際にコマンドラインから実行するためのスクリプトがあるので、それを利用します。以下のコマンドを打つ。

cyg-pm install git

これでgitのインストールは終わりです。試しに「git」とコマンドを打ちます。正常にインストールされていれば以下のように表示されるはずです。

# git
usage: git [--version] [--exec-path[=<path>]] [--html-path]
           [-p|--paginate|--no-pager] [--no-replace-objects]
           [--bare] [--git-dir=<path>] [--work-tree=<path>]
           [-c name=value] [--help]
           <command> [<args>]

The most commonly used git commands are:
   add        Add file contents to the index
   bisect     Find by binary search the change that introduced a bug
   branch     List, create, or delete branches
   checkout   Checkout a branch or paths to the working tree
   clone      Clone a repository into a new directory
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   fetch      Download objects and refs from another repository
   grep       Print lines matching a pattern
   init       Create an empty git repository or reinitialize an existing one
   log        Show commit logs
   merge      Join two or more development histories together
   mv         Move or rename a file, a directory, or a symlink
   pull       Fetch from and merge with another repository or a local branch
   push       Update remote refs along with associated objects
   rebase     Forward-port local commits to the updated upstream head
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index
   show       Show various types of objects
   status     Show the working tree status
   tag        Create, list, delete or verify a tag object signed with GPG

See 'git help <command>' for more information on a specific command.

ユーザ情報の設定

gitでユーザ情報の設定を行います。以下のコマンドでユーザ名とメールアドレスを設定します。

git config --global user.name "ユーザ名"
git config --global user.email "メールアドレス"

SSHの鍵の作成

コマンドで鍵ファイルの作成を行います。

ssh-keygen -b 2048 -t rsa -f ~/.ssh/github_rsa

この後、.sshフォルダ内に「github_rsa.pub」と「github_rsa」が生成されていることを確認します。

公開鍵の登録

上で生成した、公開鍵「github_rsa.pub」をGithubへ登録します。
Githubでログインし、 「Account Settings」→「SSH Public Keys」→「Add another public key」の「Key」に、github_rsa.pubの中身をコピーして貼り付けます。(「Title」は適当でOK)

SSH設定ファイルの作成

.sshフォルダ内に「config」というファイルを生成します。configファイル内に以下の内容を記述します。

Host github.com
  User git
  Port 22
  Hostname github.com
  IdentityFile ~/.ssh/github_rsa
  TCPKeepAlive yes
  IdentitiesOnly yes

これで、OK。

参考サイト

以下のサイトを参考にさせていただきました。

Androidアプリの開発環境の構築

必要なもの

WindowsでEclipseを使ってAndroidアプリの開発する場合の環境構築手順を示す。

必要なものは以下の通り。

  • Java
  • Eclipse3.6
  • Android SDK
  • ADT(Android Development Tools)

Android SDK

Android Developersでwindows版をダウンロードして適当な場所に解凍(例:D:android)

解凍してできたフォルダの中にあるtoolsフォルダを環境変数のPATHに設定する。

(例:D:androidに解凍した場合、D:androidandroid-sdk-windowstools)

ADT(Android Development Tools)のインストール

ADTはEclipseでAndroidアプリの開発をする際に必要なプラグイン。
Eclipse上で、https://dl-ssl.google.com/android/eclipse/をサイトに設定してプラグインをインストールしてください。

Eclipseの設定

Eclipseで「ウィンドウ」→「設定」→「Android」でSDKロケーションに先程解凍した Android SDK のディレクトリ(例:D:androidandroid-sdk-windows)を指定する。

Eclipseで「ウィンドウ」→「Android SDK および AVDマネージャー」→「Available Packages」で右側のチェックボックスをチェックして、「Install Selected」をクリックしてインストールする。

Eclipseで「ウィンドウ」→「Android SDK および AVDマネージャー」→「Virtual Devices」で右側の新規…をクリックして仮想デバイスを作成する。

これで基本的な開発環境は整っているのでアプリケーションを開発することができます。

CSS3でのマルチカラムレイアウト

CSS3では、displayプロパティに新たにboxという値を指定できるようになりました。
<style>

#wrap{
    width:900px;
    display:-webkit-box;
    display:-moz-box;
}
#column1{
    border: 1px solid red;
    width: 200px;
    padding:10px;
    -webkit-box-sizing: border-box;
}

#column2{
    border: 1px solid green;
    width: 520px;
    padding:10px;
    -webkit-box-sizing: border-box;
}

#column3{
    border: 1px solid blue;
    width: 180px;
    padding:10px;
    -webkit-box-sizing: border-box;
}

</style>

<div id="wrap">
    <div id="column1">カラム1</div>
    <div id="column2">カラム2</div>
    <div id="column3">カラム3</div>
</div>