Debian6の上で動作するVirtualBox 4.3.20にArchLinux 2015.01.01 をインストールした記録。

Arch Linux 2014.07.03のインストール http://itouhiro.hatenablog.com/entry/20140730/linuxと同じ。細かい点で違うので、違う点のみを記述。

基本的には https://wiki.archlinux.org/index.php/Installation_Guide_%28%E6%97%A5%E6%9C%AC%E8%AA%9E%29の通りに実行した。

OSインストール

% wget http://ftp.jaist.ac.jp/pub/Linux/ArchLinux/iso/2015.01.01/archlinux-2015.01.01-dual.iso

VirtualBoxで仮想ディスクを作成し、isoをセット（[Setting - Storage - Empty - CD/DVD drive - Choose a virtual CD/DVD file..]）して、起動。設定は[メモリ 512MB, HDD 40GB, Audioなし] あとはデフォルト。

パーティション作成。ここがArchLinuxインストールのややこしいところ。 今回はfdiskを使用。

• パーティションを2つ作成。
• 1つはswapで1GB。2つめは / (root)で残り全部。

swapを有効化。

日本のサーバーを指定して、基本システムをインストール。

/etc/fstab 作成。

lang指定。

% locale-gen
% echo LANG=en_US.UTF-8 > /etc/locale.conf
% export LANG=en_US.UTF-8
% vi /etc/vconsole.conf
% loadkeys jp106
% ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
% hwclock --systohc --utc

grubインストール。

% grub-install --target=i386-pc --recheck /dev/sda
% grub-mkconfig -o /boot/grub/grub.cfg

ネットワーク設定。

% vi /etc/ssh/sshd_config
% netctl start en1
% netctl start en2

iso取り外し。

GUI環境インストール

X Window Systemを導入。

デバイスドライバは VirtualBoxのAddOnを使用する。

LXDEを入れてみたが、これはCUIで起動して、startlxde (startx) でGUI開始できないようだった。起動時からGUIになる（lxdmでGUI開始）環境しか想定していないようで、私の好みとは違ったので使用をやめた。

でXfceをまた入れる。これはCUI起動して startx (startxfce) でGUI起動可能なので好みだ。

% pacman -S xorg-server xorg-server-utils xorg-xinit wget
% pacman -S virtualbox-guest-utils
% pacman -S tigervnc
% vi /etc/modules-load.d/vbox.conf
% cat /etc/modules-load.d/vbox.conf
% systemctl enable vboxservice
% pacman -Ss jp
% pacman -S adobe-source-han-sans-jp-fonts
% pacman -S xfce4
% shutdown -h now

xfceインストール前に日本語フォントも入れておくと、見た目がキレイになった。

共有フォルダー設定

ArchLinuxはFontForge最新版を使いたいのでインストールしているわけだが、VirtualBoxの共有フォルダー機能を使えば、ホスト環境（ここではDebian）のHDD領域でソース展開・ビルド作業できる。その結果、ゲスト（ArchLinux）の仮想HDDが肥大化するのを防ぐことができる。

VirtualBoxの共有フォルダー機能を使わない場合、ゲストのArchLinuxの仮想HDDにソース取得すると仮想HDDファイルサイズを消費する。そのあとファイル削除しても、仮想HDDファイルサイズは減らないのだ。 ホスト側でvboxmanage modifyhd [UUID] --compact　すれば仮想HDDファイルサイズを縮小できるけど時間かかるし、共有フォルダー使うほうがいい。

マニュアル VirtualBox (日本語) - Arch Linux をゲストにする - ゲスト側の Arch Linux の共有フォルダを読んで以下のように実行した。

VirtualBoxGuestAdditionsのインストール・カーネルモジュールのロード設定は済んでいるので、まずVirtualBoxのGUIで共有フォルダーを設定する。

あとは以下のようなコマンド入力。

$ sudo gpasswd -a foo vboxsf
Adding user foo to group vboxsf
$ sudo mkdir -p /media/sf_share
$ sudo systemctl enable vboxservice.service
$ sudo systemctl start vboxservice.service

以下は毎回実行必要。

$ sudo mount -t vboxsf share /media/sf_share -o rw,exec,uid=1000,gid=1000,dev

これで、ゲストのArchLinuxからは/media/sf_share以下を読み書き可能。ホストのDebianからは/home/foo/shareで読み書き可能。

Linuxシステム[実践]入門 (Software Design plus)

• 作者:沓名亮典
• 出版社/メーカー:技術評論社
• 発売日: 2013/07/03
• メディア:単行本（ソフトカバー）
• この商品を含むブログ (13件) を見る

FontForge 2.1.20141230日本語対応版をLinuxにインストールします。

Arch Linuxなら最新パッケージが使えると思っていたのに、2015-02-22現在、ArchLinuxのFontForgeは2014-11-26版を使うようになっています。最新安定版パッケージは2014-12-30なのでそちらを使ってパッケージを作るように修正します。

基本は
FontForge 2.0.20140101 日本語対応版をArch Linuxにインストール - itouhiroはてなブログ
と同じです。

https://wiki.archlinux.org/index.php/Arch_Build_System_%28%E6%97%A5%E6%9C%AC%E8%AA%9E%29#.E3.83.84.E3.83.BC.E3.83.AB.E3.81.AE.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB
のabsについても参考にします。

# pacman -Q base-devel
# pacman -S base-devel

# pacman -S abs
# abs

このあとはrootではなく、一般ユーザーで実行します。

$ mkdir ~/abs
$ cp -pr /var/abs/extra/fontforge ~/abs/
$ cd ~/abs/fontforge/

日本語パッチの準備
http://www.geocities.jp/meir000/fontforge/の日本語縦書きパッチを取得。

$ wget http://www.geocities.jp/meir000/fontforge/fontforge-20150121-vmetrics.patch.txt
$ sha1sum fontforge-20150121-vmetrics.patch.txt
$ vi PKGBUILD

FontForgeのソースについても https://github.com/fontforge/fontforge/releases/の「Source code (tar.gz)」を取得するように変更します。

$ diff -u PKGBUILD.orig PKGBUILD
--- PKGBUILD.orig       2015-02-22 08:05:28.261224392 +0900+++ PKGBUILD    2015-02-22 21:55:08.402590862 +0900@@ -4,9 +4,10 @@
 # Contributor: William Rea <sillywilly@gmail.com>

 pkgname=fontforge
-_pkgver=2014-11-26+_pkgver=2014-12-30
 pkgver=${_pkgver//-/}
-pkgrel=3+pkgrel=1
 pkgdesc='Outline and bitmap font editor'
 url='http://www.fontforge.org/'
 arch=('i686''x86_64')
@@ -15,10 +16,15 @@
 depends=('libtool''libxkbui''libxi''pango''giflib''libtiff''libspiro''libxml2''libspiro''libunicodenames''zeromq''python2''desktop-file-utils''gtk-update-icon-cache''hicolor-icon-theme')
-source=("http://github.com/fontforge/fontforge/releases/download/${pkgver}/fontforge-${_pkgver}-Unix-Source.tar.gz"-        'http://fontforge.org/cidmaps.tgz')-sha1sums=('ecd776480a47cdcbe1b30ce275172d7d52288e77'-          'efbc7c9d3e95159f5600dc71f9cccb370e46bb94')+source=("https://github.com/fontforge/fontforge/archive/${pkgver}.tar.gz"+        'http://fontforge.org/cidmaps.tgz'+        'fontforge-20150121-vmetrics.patch.txt'+)+sha1sums=('62268018d4b0080f8b976943f36ecbeed5aa6c9a'+          'efbc7c9d3e95159f5600dc71f9cccb370e46bb94'+          'f253791023c32347511e760ebc71f318db879335'+)

 install=install

@@ -30,6 +36,7 @@
                j=$(readlink "$i")
                ln -sf "${j/aclocal\//aclocal\/lt}" "$i"
        done
+        patch -p1 -i ../fontforge-20150121-vmetrics.patch.txt
 }

 build() {

まずは、ソースコードを展開してパッチを適用するまでが正常動作するか、を確認します。

$ man makepkg
-o, --nobuild
           Download and extract files, run the prepare() function, but do not
           build them. Useful with the --noextract option if you wish to tweak
           the files in $srcdir/ before building.


$ makepkg -s -o
==> Making package: fontforge 20141230-1 (Sun Feb 22 22:12:25 JST 2015)
==> Checking runtime dependencies...
==> Installing missing dependencies...
warning: skipping target: libspiro
resolving dependencies...
looking for conflicting packages...

Packages (7) libsodium-1.0.2-1  giflib-5.1.0-1  libspiro-1:0.2-2
             libunicodenames-1.1.0_beta1-1  libxkbui-1.0.2-5  python2-2.7.9-1
             zeromq-4.0.5-1

Total Download Size:   11.57 MiB
Total Installed Size:  75.15 MiB

:: Proceed with installation? [Y/n] Y
:: Retrieving packages ...
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from ftp.tsukuba.wide.ad.jp : The requested URL returned error: 404
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from mirror.gnomus.de : The requested URL returned error: 404
error: failed retrieving file 'giflib-5.1.0-1-i686.pkg.tar.xz' from archlinux.polymorf.fr : The requested URL returned error: 404
...
error: failed retrieving file 'libspiro-1:0.2-2-i686.pkg.tar.xz' from mirror.archlinux.fi : The requested URL returned error: 404
 libspiro-1:0.2-2-i686     10.4 KiB  3.38M/s 00:00 [######################] 100%
 libunicodenames-1.1...   322.6 KiB  1514K/s 00:00 [######################] 100%
 python2-2.7.9-1-i686      10.5 MiB  2.64M/s 00:04 [######################] 100%
 libsodium-1.0.2-1-i686   142.0 KiB  4.20M/s 00:00 [######################] 100%
 zeromq-4.0.5-1-i686      574.1 KiB  2.24M/s 00:00 [######################] 100%
(7/7) checking keys in keyring                     [######################] 100%
(7/7) checking package integrity                   [######################] 100%
(7/7) loading package files                        [######################] 100%
(7/7) checking for file conflicts                  [######################] 100%
(7/7) checking available disk space                [######################] 100%
(1/7) installing libxkbui                          [######################] 100%
(2/7) installing giflib                            [######################] 100%
(3/7) installing libspiro                          [######################] 100%
(4/7) installing libunicodenames                   [######################] 100%
(5/7) installing libsodium                         [######################] 100%
(6/7) installing zeromq                            [######################] 100%
(7/7) installing python2                           [######################] 100%
Optional dependencies for python2
    tk: for IDLE
    python2-setuptools
    python2-pip
==> Checking buildtime dependencies...
==> Installing missing dependencies...
resolving dependencies...
looking for conflicting packages...

Packages (2) perl-error-0.17022-1  git-2.2.2-1

Total Download Size:    4.14 MiB
Total Installed Size:  26.08 MiB

:: Proceed with installation? [Y/n]
...
error: failed retrieving file 'git-2.2.2-1-i686.pkg.tar.xz' from mirrors.dotsrc.org : The requested URL returned error: 404
error: failed retrieving file 'git-2.2.2-1-i686.pkg.tar.xz' from mirror.archlinux.fi : The requested URL returned error: 404
 git-2.2.2-1-i686           4.1 MiB   483K/s 00:09 [######################] 100%
(2/2) checking keys in keyring                     [######################] 100%
(2/2) checking package integrity                   [######################] 100%
(2/2) loading package files                        [######################] 100%
(2/2) checking for file conflicts                  [######################] 100%
(2/2) checking available disk space                [######################] 100%
(1/2) installing perl-error                        [######################] 100%
(2/2) installing git                               [######################] 100%
Optional dependencies for git
    tk: gitk and git gui
    perl-libwww: git svn
    perl-term-readkey: git svn
    perl-mime-tools: git send-email
    perl-net-smtp-ssl: git send-email TLS support
    perl-authen-sasl: git send-email TLS support
    python2: various helper scripts [installed]
    subversion: git svn
    cvsps2: git cvsimport
    gnome-keyring: GNOME keyring credential helper
==> Retrieving sources...
  -> Downloading 20141230.tar.gz...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   129    0   129    0     0    103      0 --:--:--  0:00:01 --:--:--   103
100 23.1M    0 23.1M    0     0  1171k      0 --:--:--  0:00:20 --:--:-- 2013k
  -> Downloading cidmaps.tgz...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   325  100   325    0     0    177      0  0:00:01  0:00:01 --:--:--   178
100  306k  100  306k    0     0  83759      0  0:00:03  0:00:03 --:--:--  225k
  -> Found fontforge-20150121-vmetrics.patch.txt
==> Validating source files with sha1sums...
    20141230.tar.gz ... Passed
    cidmaps.tgz ... Passed
    fontforge-20150121-vmetrics.patch.txt ... Passed
==> Extracting sources...
  -> Extracting 20141230.tar.gz with bsdtar
  -> Extracting cidmaps.tgz with bsdtar
==> Starting prepare()...
patching file fontforge/splinechar.c
patching file fontforge/splinefont.c
patching file fontforge/tottfgpos.c
patching file fontforgeexe/charview.c
patching file fontforgeexe/cvpointer.c
==> Sources are ready.

縦書きパッチは2015-01-21のソース向けなので、この2014-12-30ソースにそのまま当たるか疑問でしたが、問題なく適用できました。

$ makepkg -s
...
make[1]: Leaving directory '/home/foo/abs/fontforge/src/fontforge-20141230'
==> Tidying install...
  -> Purging unwanted files...
  -> Removing libtool files...
  -> Removing static library files...
  -> Compressing man and info pages...
  -> Stripping unneeded symbols from binaries and libraries...
==> Creating package "fontforge"...
  -> Generating .PKGINFO file...
  -> Adding install file...
  -> Generating .MTREE file...
  -> Compressing package...
==> Leaving fakeroot environment.
==> Finished making: fontforge 20141230-1 (Mon Feb 23 00:26:07 JST 2015)
[foo@localhost fontforge]$

ビルドに2時間くらいかかりました。
インストール。

$ sudo pacman -U fontforge-20140101-3-i686.pkg.tar.xz

うーん、UserInterfaceのフォントにSource Han Sansを使うとなんだかずれて見えます。

実際には

• GUIで使用→Windowsの非公式FontForge
• コマンドラインで使用→LinuxのFontForge

と使い分けているので私としては問題ないです。
　

Fontforge

• メディア:ペーパーバック
• この商品を含むブログを見る

2ch.netのAPI変更で2ch専用ブラウザが使えなくなった。そこで2ch.netをWebブラウザで見ているわけなんだが‥‥

すると2ch専用ブラウザにあった「あぼーん機能」が使用できない。そこで作ったよ User JavaScript。

UserJavaScriptってなんだっけ？

Webブラウザで動作するJavaScriptだ。「Firefox」と「GoogleChrome」で拡張機能を入れると使えるようになる。
使い方は https://sites.google.com/site/itouhiro/2012/webabornに書いてあるよ。

以下のスクリプトを登録すればよい。

2chResAborn.user.js

// ==UserScript==
// @name           2chResAborn
// @version        1.0
// @namespace      http://webaborn.herokuapp.com
// @description    Reduce the situation you see disagreeable texts in the way replacing to some word.  ('aborn' means 'purge and unable to read'.)
// @author         itouhiro
// @grant          none
// @match          http://*.2ch.net/*
// @match          http://*.2ch.sc/*
// @match          http://*.open2ch.net/*
// @match          http://*.bbspink.com/*
// @match          http://jbbs.shitaraba.net/bbs/*
// @match          http://*.machi.to/bbs/*
// ==/UserScript==
(function () {
  const abornString = '＊＊＊＊';
  const ng_words = ['NGワードを追加します', "ここにNGワードを追加します"];
  var timer = null;
  var resAborn = function(node){
    var cand = document.evaluate('.//text()[parent::dt or parent::dd]', node, null, 6, null);
    var i = 0;
    var j = 0;
    var lenC = 0;
    var lenNG = 0;
    var txt = '';
    var resStart = -1;
    var resDelete = false;
    for (i=0, lenC=cand.snapshotLength; i<lenC; i++) {
      txt = cand.snapshotItem(i).nodeValue;
      if (txt.match(/： ?\d{4}\/\d{2}\/\d{2}\(.\) ?\d{2}:\d{2}:\d{2}/)) {
        if (resDelete && resStart>=0) {
          for (j=resStart; j<i; j++) {
            if (cand.snapshotItem(j).nodeValue !== '\n') cand.snapshotItem(j).nodeValue = abornString;
          }
        }
        resStart = i;
        resDelete = false;
        continue;
      }
      if (resDelete) continue;
      for (j=0, lenNG=ng_words.length; j<lenNG; j++){
        if(txt.indexOf(ng_words[j]) >= 0) {
          resDelete = true;
          break;
        }
      }
    }
    if (resDelete && resStart>=0) {
      for (j=resStart; j<i; j++) {
        if (cand.snapshotItem(j).nodeValue !== '\n') cand.snapshotItem(j).nodeValue = abornString;
      }
    }
  }
  resAborn(document);
  document.addEventListener('DOMSubtreeModified', function(e){ if(timer)clearTimeout(timer); timer=setTimeout(resAborn(e.target),300); }, false);
})();

2ch.netだけでなく、2ch.sc やおーぷん２ちゃんねるでも使えるのかな？

2015年3月時点で、2ch.net、2ch.sc、open2ch.net、したらば で使えることを確認した。next2ch.netでは使えないのはHTML構造が2ch.net等と異なるため。

どうやって使うのか、実際にやってみてよ。

GoogleChromeに拡張機能Tampermonkeyを入れる。
Tampermonkey - Chrome Web Store
でインストールできるぞ。

[≡ - その他のツール - 拡張機能 - Tampermonkey - オプション]をクリック。

[新規作成アイコン]をクリック。

NGワードを設定するぞ。

const ng_words=[];

の「 [ ] 」のあいだにNGワードを並べていく。

• NGワードはダブルクォーテーション「"」かシングルクォーテーション「'」で囲む。
• NGワードが複数あるときはコンマ「,」で区切る。

最後に保存ボタンを押そう。

ここでは

• アスキーアートの一部
• 「ココナツ」という文字列

の2つをNGワードにしたぞ。

アスキーアートを消すときは、このようにアスキーアートの一部を選択してNGワードにする。別にアスキーアートの1行全部を追加する必要はない。アスキーアートのなるべく上の行を追加したほうが動作速度は若干速くなるが、気にするほどの速度差はないかな。

NGワードの個数に制限はあるのかな？

とくにないよ。NGワードは1つでもいいし、1000個でもいい。NGワードが多くなるとWebブラウザーで2ch.net等を見るとき少し表示が重くなったりCPUファンが回ったりするかもしれないけどね。

するとこのようにNGワードを含むレスをまるごと隠せるんだ。

NGワードを隠す文字は「＊＊＊＊」になっているけど、変更できる？

ソースコードの

  const abornString = '＊＊＊＊';

を変更すればいいよ。「【削除】」とか全角空白「　」とかに。

NGワード自体を見たくないときはどうすればいいだろう？　今追加するNGワードを見るのはいいんだけど、過去に追加したNGワードは見たくないんだ。

http://webaborn.herokuapp.comにNGワードを入力して、得られるuser.jsファイルの中の

  const ng_words = ['\u9945\u982d','\u30de\u30f3\u30b8\u30e5\u30a6'];

のような行をコピーすればいいよ。これはNGワードに「まんじゅう」「饅頭」を追加したときのNGワードなんだけど、わからなくなっているだろ。

Greasemonkeyスクリプティング TIPS&SAMPLES

• 作者:高山恭介
• 出版社/メーカー:秀和システム
• 発売日: 2006/12
• メディア:単行本
• 購入: 1人 クリック: 92回
• この商品を含むブログ (20件) を見る

以前、HTML5を使ってPC/スマートフォンで動作するゲームのようなものを作ったんだ。動作はJavaScriptで書くわけだ。

canvasタグを一枚表示して、そのcanvasタグに動く画像を表示するのはJavaScriptだと大変らしいので、CreateJSというライブラリを使用した。ActionScript3.0経験者にはCreateJSはなじみやすいということだったからね。

そのときはJavaScriptを直接書いたのだが、TypeScriptだとさらに便利になるらしい。クラスが書きやすいとか次世代JavaScriptの書き方を学べるとか。
TypeScriptを試すぞ。

TypeScriptってどうすれば使えるようになるの？

Windows環境では以下のようにした。

環境

• TypeScript 1.5-alpha
• CreateJS 2014.12.12 (EaselJS 0.8, TweenJS 0.6, SoundJS 0.6, PreloadJS 0.6)
• Adobe Brackets 1.2
• brackets-typescript 0.2.0
• node.js 0.12.2
• npm 1.4.9
• Windows7 64bit

{
    "typescript": {
        "target": "ES5",
        "module": "CommonJS",
        "noImplicitAny": true,
        "sources" : [
            "**/*.ts",
        ]
    }
}  

TypeScriptとJavaScriptの比較

TypeScriptとJavaScriptの比較を見たいなあ。

簡単なサンプルで違いを見てみよう。
JavaScriptだとこうなる。

sample01.html

<!DOCTYPE html><html><!-- なにか表示するだけ --><head><title>Try01</title><scriptsrc="easeljs-0.8.0.min.js"></script><scriptsrc="sample01.js"></script><style>body{margin:0; padding:1em; background-color:rgba(127,127,127,0);
</style>
</head><body><canvasid="theCanvas"width="320"height="240"></canvas></body></html>

sample01.js

window.onload = function () {
  main();
}
function main() {
  var stage = new createjs.Stage('theCanvas');

  var obj = new createjs.Shape();
  obj.graphics.beginFill('#ff9999').drawCircle(0,0,50);
  obj.x = 100;
  obj.y = 100;
  stage.addChild(obj);

  createjs.Ticker.framerate = 30;
  createjs.Ticker.addEventListener('tick', handleTick);

  function handleTick(){
    obj.x += 5;
    if (obj.x > stage.canvas.width) obj.x = 0;
    stage.update();
  }
}

ふむふむ

これをTypeScriptで書くとこうなる。

sample22.html

<!DOCTYPE html><html><head><title>Try02</title><scriptsrc="easeljs-0.8.0.min.js"></script><scriptsrc="sample22.js"></script><style>body{margin:0; padding:1em; background-color:rgba(245,245,245,1);
</style>
<script></script></head><body><canvasid="theCanvas"width="320"height="240"></canvas></body></html>

sample22.ts

/// <reference path="typings/easeljs/easeljs.d.ts" />
window.onload = function () {
    var m = new Main();
};
class Main {
    stage:createjs.Stage;
    obj:createjs.Shape;
    
    constructor() {
        this.stage = new createjs.Stage('theCanvas');

        this.obj = new createjs.Shape();
        this.obj.graphics.beginFill('#ff9999').drawCircle(0,0,50);
        this.obj.x = 100;
        this.obj.y = 100;
        this.stage.addChild(this.obj);

        createjs.Ticker.framerate = 30;
        createjs.Ticker.addEventListener('tick', this.handleTick);
    }

    handleTick = (event:createjs.Event):void => {
        this.obj.x += 5;
        if (this.obj.x > this.stage.canvas['width']) this.obj.x = 0;
        this.stage.update();
    }
};

このtsファイルを

$ tsc sample22.ts

とコンパイルすると、sample22.js が作成されて実行可能になる。

HTMLは同じだね。
TSファイルの「this.」気になるな。

これはクラス内変数、クラス内関数にアクセスするとき必要になる。
クラス内変数、クラス内関数はclassの中で「var」とか「function」なしで宣言しているやつだ。それにはthisをつけるということだね。

ま、ちょっとソース読みにくくなるけど、逆にいうとクラス内変数を減らして、なるべく関数の引数とするよう自分を律する契機にはなるかも。

「handleTick = (event:createjs.Event):void => {..}」はなんだろう？

これは関数定義だ。「function(){..}」と「() => {..}」はほぼ同じなんだ。しかし違いもある。コールバック関数で「function(){..}」を使うと、その関数内のthisは実行時のthisになるのでクラス変数にアクセスできなくて実行時に以下のエラーになる。

Uncaught TypeError: Cannot read property 'x' of undefined

「handleTick = function(event:createjs.Event):void { this.obj.x ..}」と書くとthis.obj.xにアクセスできなくなっちゃうのか。

「handleTick = (event:createjs.Event):void => { this.obj.x ..}」と書けばアクセスできるというわけだね。

ところで、コンパイルのとき --noImplicitAnyというオプションを付けたほうがいい、と言われているよ。つけないの？

それをつけると、if (this.obj.x > this.stage.canvas['width']) this.obj.x = 0;の行でエラーになるんだ。

$ tsc --noImplicitAny sample22.ts
sample22.ts(23,26): error TS7017: Index signature of object type implicitly has an 'any' type.

このエラー消せなかった。まあ、TypeScriptを導入したのはクラスを楽に書きたいという理由が主なので、静的型付けはあんまりこだわらなくていいかな、と思ったので --noImplicitAnyは使わないことにした。

this.stage.canvas.widthじゃなくて、this.stage.canvas['width']という書き方になってるのは理由があるの？

前者だと

sample22.ts(23,26): error TS2339: Property 'width' does not exist on type 'Object | HTMLCanvasElement'.

というエラーになるんだ。理由は
http://www.atmarkit.co.jp/ait/articles/1501/29/news117.html
の記述にある「ドットを使ってプロパティにアクセスするとエラーになる」に該当するようだ。

　
　

TypeScript実践プログラミング (Programmer's SELECTION)

• 作者:スティーブ・フェントン,鈴木幸敏,株式会社クイープ
• 出版社/メーカー:翔泳社
• 発売日: 2015/01/23
• メディア:大型本
• この商品を含むブログ (1件) を見る

前の記事: C#とUnity4で書籍『Unity入門』(1) http://itouhiro.hatenablog.com/entry/20131002/unity

var bullet : GameObject = Instantiate(bulletPrefab, transform.position, transform.rotation);
　　↓
var bullet = Instantiate(bulletPrefab, transform.position, transform.rotation) as GameObject;

var offsx : float = Random.Range(-8.0, 8.0);
var offsz : float = Random.Range(-4.0, 4.0);
var position : Vector3 = transform.position + Vector3(offsx, 0, offsz);
　　↓
Vector3 position = transform.position + new Vector3(Random.Range(-8.0f, 8.0f), 0, Random.Range(-4.0f, 4.0f));

private function GetTargetColorName() : String {
    return targetIsRed ? "Red" : "Blue";
}
　　↓
string GetTargetColorName()
{
    return targetIsRed ? "Red" : "Blue";
}

function TimeUp() {
  state = "Time Up";
  yield WaitForSeconds(3.0);

  state = "";
  yield WaitForSeconds(0.5);

  state = "Show Score";
  while ( ! Input.GetButtonDown("Fire1")) yield;
  Application.LoadLevel("Title");
}

function OnGUI() {
  if (state == "Time Up") {
    ...
  } else if (state == "Show Score") {
    ...
  }
}

　　↓

enum Status
{
    playing, timeup, dispTimeup, noDisp, dispScoreWait
};
Status state;
float timer;

void TimeUp()
{
    state = Status.timeup;
}

void Update () {
    if (Input.GetKey(KeyCode.Escape)) Application.Quit();
    if (timer > 0.0f)
    {
        timer -= Time.deltaTime;
        return;
    }
    switch (state)
    {
        case Status.playing :
            return; 
        case Status.timeup :
            state = Status.dispTimeup;
            timer = 3.0f;
            break;
        case Status.dispTimeup :
            state = Status.noDisp;
            timer = 0.5f;
            break;
        case Status.noDisp :
            state = Status.dispScoreWait;
            break;
        case Status.dispScoreWait :
            if (Input.GetButtonDown("Fire1")) Application.LoadLevel("Title");
            break;
        default:
            break;
    }
}

void OnGUI()
{
    ...
    if (state == Status.dispTimeup)
    {
      ...
    }
    else if (state == Status.dispScoreWait)
    {
      ...
    }
}

Chapter 6 キャラクター・アクションゲーム

この章で使うアニメーションシステムは、Unity3とUnity4で異なる。

解決法だが、以下のようにすれば旧アニメーションシステムになるので、この本をそのまま学習できる。

リスト6-4のアニメーション確認のところでは yieldをC#で使うことができる。Start()の中だとC#でもyieldをJavaScriptと同じように使えるんだよなー。関数戻り値をIEnumeratorにしなくちゃとかあるけど。

リスト6-6で、Jump中はisGroundedではないから操作が効かなくなるんだな。

この章は最後まで完成しない。ある程度完成したところで

残りの作業については Chapter4,5とほぼ同様の作業になるため、ここでは解説を省略します

といって終わる。

音があるとゲームらしくなるね。

モバイル対応のための仮想ジョイスティックがC#で動作しない。Standard Assets (Mobile)/Scripts/Joystick.js がJavaScriptで書かれてるせいかな‥‥。

Unityの開発には JavaScitとC#、どっちがいいと思う？

C#のほうがいいところは‥‥

• UnityのJavaScriptは静的型付けだしクラスはあるし、Webブラウザで使うJavaScriptとは文法別物（ActionScript3.0によく似ている）。C#はMicrosoftのと特に文法に違いはない。だからC#はUnityと関係ない外部ライブラリ（JSON関連とか）を使える。クラス使った大規模開発ならC#のほうがよさそう。
• Unity組み込み関数は大文字始まり（Range()とかFindGameObjectsWithTag()など）。これはC#なら関数大文字が通常だから馴染むけど、JavaScriptはメソッド小文字始まりが通常なので、違和感大きい。
• Unity付属のMonoDevelopはUnityのJavaSciptではあまり補完してくれない。C#なら補完してくれてラク。

と いうところかな。

Unity入門 ~高機能ゲームエンジンによるマルチプラットフォーム開発~

• 作者:高橋啓治郎
• 出版社/メーカー:ソフトバンククリエイティブ
• 発売日: 2011/10/01
• メディア:大型本
• 購入: 15人 クリック: 609回
• この商品を含むブログ (22件) を見る

　

WebAborn ver19で変更した以下2点について説明するぞ。

• AタグのURLを置き換え対象に追加（タイプ1のみ）。
• 単語単位置き換えのとき最適化を抑制。

%E9%83%BD %E3%81%BE %E3%82%93 %E3%81%98 %E3%82%85 %E3%81%86
    都        ま        ん        じ        ゅ        う

Node.jsでJSONをYAMLに変換するコンソールプログラム

JSON→YAML

JSONからYAMLに変換する処理は https://github.com/jeffsu/json2yamlを使用する。

それ使えば完成じゃないの？

いや、以下の修正をするよ。

• コンソールで指定したJSONファイルを読み込む。
• JSONファイルにBOMがついていた場合、除去する。
• インデント（字下げ）を適切にやってくれる。
• JSONの文字列の日本語が 「\u9945\u982d」の形式だった場合、元の「饅頭」に戻す。
• JSON内部に、文字列としてJSONの連想配列を持つ場合もさらに展開して 【 】 で囲む。

src/json2yaml.js を以下のように修正。

--- json2yaml.js.orig	2013-02-21 14:33:48.000000000 +0900
+++ json2yaml.js	2013-10-17 18:09:34.979161100 +0900
@@ -1,4 +1,3 @@
-(function (self) { 
   /*
    * TODO, lots of concatenation (slow in js)
    */
@@ -81,7 +80,13 @@
     if (str.match(/^[\w]+$/)) {
       return str;
     } else {
-      return '"'+escape(str).replace(/%u/g,'\\u').replace(/%U/g,'\\U').replace(/%/g,'\\x')+'"';
+      var s = unescape(str).replace(/\n/g, "\n\t");
+      if (s.match('\\":')) {
+        s = json2yaml(s).replace(/\n/g, "\n\t");
+        return '【'+s+'】';
+      }else{
+        return '"'+s+'"';
+      }
     }
   }
 
@@ -89,7 +94,7 @@
     ret.push(normalizeString(obj));
   }
   
-  self.json2yaml = function(obj) {
+  var json2yaml = function(obj) {
     if (typeof obj == 'string') {
       obj = JSON.parse(obj);
     }
@@ -98,4 +103,3 @@
     convert(obj, ret);
     return ret.join("\n");
   };
-})(this);

そのjson2yaml.jsを以下のj2y.jsで呼び出すよ。
j2y.js:

var fs = require('fs');
// include
eval(fs.readFileSync('json2yaml.js')+'');

if (process.argv.length <= 2){
  console.log("usage: node j2y SOME.json > SOME.yaml" );
  process.exit(1);
}

var json = fs.readFileSync(process.argv[2], 'utf8') + '';
json = json.replace(/^\uFEFF/,'');
var yaml = json2yaml(json);
console.log(yaml);

使い方は

$ node j2y.js SOME.json > SOME.yaml

だ。

しかし思うのだが、YAMLを使わずにJSONを使い、単にJSONのインデントだけ読みやすくすればよかったのではないか‥‥？
YAMLは仕様が複雑なので結局標準データ形式にはなれないっぽい。JSONのほうがシンプル。

Nodeクックブック

• 作者: David Mark Clements,和田祐一郎
• 出版社/メーカー:オライリージャパン
• 発売日: 2013/02/23
• メディア:大型本
• 購入: 2人 クリック: 4回
• この商品を含むブログ (3件) を見る

　

UnityのAsset 'Shadow Softener'https://www.assetstore.unity3d.com/#/content/11102を購入するときに調べた用語メモ。

以下のような2つのBMP画像がある場合、自動でマスク画像を合成して、以下のような1つのPNG画像を作ってくれるPhotoshopのjsxスクリプトです。

↓

キャラの足下の影の部分が半透明になっていますね。24bit RGB画像に8bitアルファを持つ、32bit RGBAのPNGファイルを出力します。
Windows7 + PhotoshopCS4で動作を確認。

mixMaskImage.jsx

//for PhotoshopCS4
preferences.rulerUnits = Units.PIXELS;

//特定のフォルダ配下の「*-m.bmp」「*-M.bmp」を順にすべて開く
var dirObj = Folder.selectDialog("フォルダを選択せよ");
var maskFiles = dirObj.getFiles("*-?.bmp");

for(var i=0; i<maskFiles.length; i++){
    //var i = 0; ←スクリプト作成中に動作確認するとき、ループのforをcomment化して、これでtest

    var tmpArray = maskFiles[i].name.split(/\-.\./i);
    // 最後のdirectory separator以下（＝ファイル名）を削除
    var theDir = maskFiles[i].fsName.replace(/[\/\\][^\/\\]*$/, '/');
    //alert('maskFiles.fsName='+maskFiles[i].fsName + ', theDir='+theDir);

    var imgFile = new File(theDir + tmpArray[0] + '.bmp');
    //alert('mask='+maskFiles[i] + ', img='+imgFile + ', tmpArray='+tmpArray + ', dirObj='+dirObj);


    //マスクファイル開く
    var theMask = app.open(maskFiles[i]);
    //indexMode→GrayScaleに変更。これしないと[選択範囲を読み込む]ができない
    theMask.changeMode(ChangeMode.GRAYSCALE);
    //theMask.activeLayer.invert();

    //画像ファイル開く
    var theImg = app.open(imgFile);
    //「背景」→「レイヤー0」にする。これしないと削除した箇所が透明にならない
    if (theImg.activeLayer.isBackgroundLayer) theImg.activeLayer.opacity = 100;

    //選択範囲を読み込む→削除→選択解除
    theImg.selection.load(theMask.channels[0]);
    theImg.selection.clear();
    theImg.selection.deselect();

    //マスクファイル閉じる
    theMask.close(SaveOptions.DONOTSAVECHANGES);

    //新規ファイル名でPNGとして保存→閉じる
    var newFile = new File(theDir + tmpArray[0] + '.png');
    var pngOpt = new PNGSaveOptions();
    pngOpt.interlaced = false;
    theImg.saveAs(newFile, pngOpt, true);
    theImg.close(SaveOptions.DONOTSAVECHANGES);
}

これをテキストファイルに文字コードUTF-8で保存して、[ファイル-スクリプト-参照]で実行します。

本体画像:例「ABC012.bmp」 24bit BMP
マスク画像:例「ABC012-m.bmp」または「ABC012-M.bmp」 8bit BMP
が同じフォルダに置いてある、そのフォルダを指定します。

あとは自動で実行してくれますよ。そのフォルダにBMP画像を複数置いておけば、複数ファイルをまとめて処理してくれます。

マスク画像の白黒が逆（黒が透明）の時は、スクリプトを以下に変更してください。マスク画像に対して[イメージ-色調補正-階調の反転]処理を追加しています。

--- R:/mixMaskImage.jsx.original	Tue Dec 24 09:30:16 2013+++ R:/mixMaskImage.jsx	Tue Dec 24 09:32:24 2013@@ -19,11 +19,11 @@
 
     //マスクファイル開く
     var theMask = app.open(maskFiles[i]);
     //indexMode→GrayScaleに変更。これしないと[選択範囲を読み込む]ができない
     theMask.changeMode(ChangeMode.GRAYSCALE);
-    //theMask.activeLayer.invert();+    theMask.activeLayer.invert();
 
     //画像ファイル開く
     var theImg = app.open(imgFile);
     //「背景」→「レイヤー0」にする。これしないと削除した箇所が透明にならない
     if (theImg.activeLayer.isBackgroundLayer) theImg.activeLayer.opacity = 100;

使用したキャラチップ First Seed Material http://www.tekepon.net/fsm

スクリプトで参考にしたサイト: http://www.openspc2.org/book/PhotoshopCS4/

神速Photoshop [グラフィックデザイン編]

• 作者:浅野桜,石嶋未来,加藤才智,服部紗和,ハマダナヲミ
• 出版社/メーカー:アスキー・メディアワークス
• 発売日: 2013/01/09
• メディア:大型本
• クリック: 40回
• この商品を含むブログ (1件) を見る

Uetenフォントを生成しましたので公開します。

あ゙い゙ゔえ゙お゙
がぎぐげご
ざじずぜぞ
だぢづでど
な゙に゙ぬ゙ね゙の゙
ばびぶべぼ
ま゙み゙む゙め゙も゙
や゙ゆ゙よ゙
ら゙り゙る゙れ゙ろ゙
わ゙ゐ゙ゑ゙を゙ん゙

ア゙イ゙ヴエ゙オ゙
ガギグゲゴ
ザジズゼゾ
ダヂヅデド
ナ゙ニ゙ヌ゙ネ゙ノ゙
バビブベボ
マ゙ミ゙ム゙メ゙モ゙
ヤ゙ユ゙ヨ゙
ラ゙リ゙ル゙レ゙ロ゙
ヷヸヹヺン゙


あ゚い゚う゚え゚お゚
か゚き゚く゚け゚こ゚
さ゚し゚す゚せ゚そ゚
た゚ち゚つ゚て゚と゚
な゚に゚ぬ゚ね゚の゚
ぱぴぷぺぽ
ま゚み゚む゚め゚も゚
や゚ゆ゚よ゚
ら゚り゚る゚れ゚ろ゚
わ゚ゐ゚ゑ゚を゚ん゚

ア゚イ゚ウ゚エ゚オ゚
カ゚キ゚ク゚ケ゚コ゚
サ゚シ゚ス゚セ゚ソ゚
タ゚チ゚ツ゚テ゚ト゚
ナ゚ニ゚ヌ゚ネ゚ノ゚
パピプペポ
マ゚ミ゚ム゚メ゚モ゚
ヤ゚ユ゚ヨ゚
ラ゚リ゚ル゚レ゚ロ゚
ワ゚ヰ゚ヱ゚ヲ゚ン゚

フリーフォントのサブセット（部分集合、つまり特定の文字だけを含むことで軽量化したフォント）を作り、Webフォントにする方法を説明します。

FontForgeを使用して、フリーフォントであるM⁺フォントのサブセットを作るには私は以下の手順を取りました。M⁺フォント以外のフリーフォントにも、この手順を使うことができます。

1. 使用したい文字をすべて含んだテキストファイルをUTF-8で保存。
2. そのテキストファイルを以下のスクリプト listChar.js に通して、収録文字リストを作成。
3. 収録文字リストを、以下のスクリプト listCharFF.js に通して、FontForgeスクリプトを作成。
4. FontForgeでフォントを読み込み、FontForgeスクリプトを実行する。
5. FontForgeで[Font - Save as Font - WebOpenFormatFont]でwoff保存。

具体的な方法

1. 使用したい文字をすべて含んだテキストファイルをUTF-8で保存。

Webフォントに含めたい文字の入った文章を用意します。
ここでは「吉川 英治／三国志 02 桃園の巻」
http://www.aozora.gr.jp/cards/001562/card52410.html
を使ってみます。

そのページの 52410_ruby_51060.zip をダウンロードして展開。
文字コードがShift_JISなので、UTF-8に変換して再保存。

2. そのテキストファイルを以下のスクリプト listChar.js に通して、収録文字リストを作成。

node.js http://nodejs.org/をインストールしておいて（ここではWindows版 v0.10.26を使用）、上記の listChar.js を使用。

c:\home> node listChar.js 02toenno_maki.txt.utf8 > char.txt

生成されたchar.txtは割と大きなファイルになってしまった。

×―…○　、。々《》「」【】ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ・ー一丁七万丈三上下不与丕世丘丞両並中丸丹主乃久乎乏乗九乞乱乳乾予争事二于云互五井些亜亠亡交享京
‥‥

3. 収録文字リストを、以下のスクリプト listCharFF.js に通して、FontForgeスクリプトを作成。

上記のchar.txtをさらにlistCharFF.jsで加工。

c:\home>node listCharFF.js char.txt > charFF.txt

生成されたcharFF.txtはこんな感じ。

SelectWorthOutputting();
SelectFewer(0ud7);
SelectFewer(0u2015);
SelectFewer(0u2026);
SelectFewer(0u25cb);
SelectFewer(0u3000);
SelectFewer(0u3001);
SelectFewer(0u3002);
SelectFewer(0u3005);
SelectFewer(0u300a);
‥‥

4.FontForgeでフォントを読み込み、FontForgeスクリプトを実行する。

FontForge（ここでは http://www.geocities.jp/meir000/fontforge/の fontforge-cygwin_2014_01_04.zip を使用）を起動し、フォントファイル（ここでは http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/download/のM⁺ TESTFLIGHT 058 に含まれる mplus-1m-regular.ttf）を読み込みます。

[ファイル - スクリプトを実行]で、スクリプト入力画面を出します。[Python]ではなくて[FF]を選択してください。

そして、charFF.txtの中身をコピーして、[右クリック - 貼り付け]します。もし貼り付けできなかったら、もう一度charFF.txtの中身をコピーして[右クリック - 貼り付け]してください。何回かすると貼り付けできます。できたら、[OK]をクリック。30秒ほど待たされました。

5. FontForgeで[Font - Save as Font - WebOpenFont]でwoff保存。

[ファイル - フォントを出力 - Web Open Font - 生成] でwoff保存します。

何か質問されたら以下のように答えます。
「フォントをこのまま出力しますか？」 → はい
「review the errors or save the font anyway?」 → 生成

これでwoff出力はOK。

ちなみに354KBのファイルになりました。漢字が多いからなー。漢字の少ないテキストであれば、woffファイルのサイズが100KB以下になることもあります。画像を用意するよりサイズ小さくてすみますね。

サイトデザインに差をつける　Webフォントコレクション (ijデジタルBOOK)

• 作者:インプレスPC編集部
• 出版社/メーカー:インプレスジャパン
• 発売日: 2012/03/09
• メディア:単行本（ソフトカバー）
• クリック: 2回
• この商品を含むブログを見る

// usage: $ node listChar.js scenario.txt > char.txt
// テキストファイルに含まれる文字のリストを作る。Webフォントに含める文字をリストアップできる。
// caution: scenario.txt must be 'UTF-8'

//フォントには含めない（除外する）文字
var exclude = '※①②③④⑤⑥⑦⑧⑩⑳●■\uFEFF';


var fs = require('fs');
var text = fs.readFileSync(process.argv[2])+''.replace(new RegExp("\uFEFF",'g'),'');

var changeHankakuZenkaku = function(str){
  var hankaku = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~';
  var zenkaku = '　！″＃＄％＆′（）＊＋、－。／０１２３４５６７８９：；＜＝＞？＠ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿‘ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～';
  var problemregexp = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~';
  for (var i=0; i<hankaku.length; i++){
    var s = hankaku.charAt(i);
    for(var j=0; j<problemregexp.length; j++){
      if (problemregexp[j] === s){
        s = '\\' + s; break;
      }
    }
    //console.log('replace:'+s+' -> '+zenkaku.charAt(i));
    str = str.replace(new RegExp(s,'g'), zenkaku.charAt(i));
  }
  return str;
}

var unique = function(array){
  var arr = array.sort();
  if (arr.length <= 0) return [];
  var uniq = [arr[0]];
  for(var i=1; i<arr.length; i++){
    if (arr[i] !== arr[i-1]){
      uniq.push(arr[i]);
    }
  }
  return uniq;
};

//全角のひらがな・カタカナ・英数字を全部含める
text += '　ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ０１２３４５６７８９';

text = changeHankakuZenkaku(text);
//console.log(str+"\n"+"\n"+"\n");


var chars = [];
for (var i=0; i<text.length; i++){
  var c = text.charAt(i);
  chars.push(c);
}

uniqchars = unique(chars);

var result = '';
for (var i=0; i<uniqchars.length; i++){
  if (uniqchars[i].charCodeAt(0) < 128) continue; //改行コードと半角英数字は含めない
  var hasExclude = false;
  for (var j=0; j<exclude.length; j++){
    if (exclude.charAt(j) === uniqchars[i]) hasExclude = true;
  }
  if ( ! hasExclude) result += uniqchars[i];
}

console.log(result);

// usage: $ node listCharFF.js char.txt > charFF.txt
// テキストファイルに含まれる文字だけ残したWebフォントを作るためのFontForgeスクリプトを生成する
// caution: char.txt = output of listChar.js

var fs = require('fs');
var text = fs.readFileSync(process.argv[2])+''.replace(new RegExp("\uFEFF",'g'),'');

var unique = function(array){
  var arr = array.sort();
  if (arr.length <= 0) return [];
  var uniq = [arr[0]];
  for(var i=1; i<arr.length; i++){
    if (arr[i] !== arr[i-1]){
      uniq.push(arr[i]);
    }
  }
  return uniq;
};

var chars = [];
for (var i=0; i<text.length; i++){
  var c = text.charAt(i);
  chars.push(c);
}

uniqchars = unique(chars);

var result = 'SelectWorthOutputting();\n';
for (var i=0; i<uniqchars.length; i++){
  if (uniqchars[i].charCodeAt(0) < 128) continue; //改行コードと半角英数字は含めない
  result += 'SelectFewer(0u'+uniqchars[i].charCodeAt(0).toString(16)+');\n';
}
result += 'DetachAndRemoveGlyphs();';
console.log(result);

「Unityで外部ファイルの読み書き(C#)」 http://itouhiro.hatenablog.com/entry/20130826/unityのJavaScript版。

#pragma strict

private var pathtxt:String = '';

function Start () {
  var t1:String = Application.dataPath;
  var t2:String = Application.persistentDataPath;
  pathtxt = 'dataPath:'+t1+"\npersistentDataPath:"+t2;
  Debug.Log(pathtxt);
}

function Update () {

}

function OnGUI(){
  GUI.TextArea(new Rect(5,5,Screen.width,50), pathtxt);
}

// Unity Editor:
// dataPath:C:/Users/star/Documents/20140605readfile/Assets
// persistentDataPath:C:/Users/star/AppData/LocalLow/DefaultCompany/20140605readfile

// Windows exe
// exe: C:\Users\star\Documents\20140605readfile\20140605readfile.exe
// dataPath:C:/Users/star/Documents/20140605readfile/20140605readfile_Data
// persistentDataPath:C:/Users/star/AppData/LocalLow/DefaultCompany/20140605readfile
//
// exe: R:\20140605\20140605readfile.exe
// dataPath:R:/20140605/20140605readfile_Data
// persistentDataPath:C:/Users/star/AppData/LocalLow/DefaultCompany/20140605readfile

なるほど、exeファイルの位置を変更すると、dataPathは位置が変わるけど、persistentDataPathは変わらないな。

#pragma strict
import System.IO; //FileInfo, StreamWriter, StreamReader

private var outputFilename:String = 'a.txt';

function Start () {
  var guitxt:String = '';
  guitxt = readFile('');
  writeFile(guitxt);
}

function Update () {

}

function writeFile(outputStr:String):void {
  var fi:FileInfo = new FileInfo(Application.dataPath +'/'+ outputFilename);
  // using (var sw:StreamWriter = fi.AppendText()){
  //   sr.WriteLine(guitxt);
  // }
  var sw:StreamWriter = fi.AppendText();
  sw.WriteLine(outputStr);
  sw.Close();
}

function readFile(inputStr:String):String {
  var fi:FileInfo = new FileInfo(Application.dataPath +'/'+ outputFilename);
  var sr:StreamReader = new StreamReader(fi.OpenRead());
  while( ! sr.EndOfStream){
    inputStr += sr.ReadLine();
  }
  inputStr += SetDefaultTxt();
  sr.Close();
  return inputStr;
}

function SetDefaultTxt():String{
  return 'NotC#,ButJSあ\n';
}

'a.txt'は最初に作っておく必要がある。
ファイル読み書きちゃんとできてる。

しかし本物のJavaScriptとはずいぶん変わってる。

• JavaScriptなら"use strict"と書くところを#pragma strictだし
• ファイル読み書きなんて.NetすぎてC#書くのと変わらない
• 静的型付けはActionScript3に似てるけど、配列の扱いとか違うし

うーん、やはりC#使う方が素直だよなー、Unityの場合。

というか、ファイル読み書きとかWWWアクセスとかする場合、

1. 「.Net」でどうやるかネット検索で調べる
2. C#のサンプルをネットで見かける
3. C#のサンプルをJavaScriptに書き換えればJavaScriptで使える

の手順になるのだが、この書き換え工程するくらいなら最初からC#でいいのでは？と思う。

また、WindowsのC#で書かれたライブラリはUnityでもそのまま使えることが多いが、ブラウザ向けJavaScriptライブラリは配列の扱いのちがいがあるからUnityでは使えなさそうだ。

Unity4ゲームコーディング 本当にゲームが作れるスクリプトの書き方

• 作者:浅野祐一,荒川巧也
• 出版社/メーカー: SBクリエイティブ
• 発売日: 2014/03/28
• メディア:大型本
• この商品を含むブログ (3件) を見る

Unity＋NGUIで台詞表示ウィンドウの簡単なサンプル

手順

1. [File - New Project]で NGUIをチェックして、新規プロジェクト作成。
2. [NGUI - Create - 2D UI]とする。Hierarchy領域に UI Rootが生成される。NGUIのオブジェクトはこの UI Root - Camera の下に配置しなさい。
3. Hierarchy領域で、UI Root - Camera を選択する。この枠線がゲームするときにUIとして表示される領域。
4. この枠線がScene領域に正面から表示されるように、Scene領域のXYZを（ドラッグじゃなくて）クリック。マウスホイールを回転させて、なるべく大きめに枠線を表示。
5. Scene領域の[Gizmos- 3D Gizmos]をOFFにする。邪魔なカメラアイコンが表示されなくなる。
6. Hierarchy領域で、UI Root - Camera を選択して、[NGUI - Craete - Sprite]でウインドウみたいなのを表示。
7. Hierarchy領域で、UI Root - Camera - Sprite を選択して、Inspector領域のUISprite(Script) - [Atlas] が Wooden Atlas になっていることを確認。なってなければ、UISprite(Script) - [Atlas]ボタンをクリックしてWooden Atlasを選択。操作まちがえたら、Hierarchy領域で、UI Root - Camera - Sprite を選択すればいい。
8. Hierarchy領域で、UI Root - Camera - Sprite を選択して、Inspector領域のUISprite(Script) - [Sprite]ボタン(Editボタンではない）をクリックして[Hilight - shadowed]を選択。
9. Scene領域でウィンドウを拡大する（引き伸ばす）。
10. Hierarchy領域で、UI Root - Camera - Sprite を選択して、[NGUI - Craete - Label]で文字表示領域を作成。
11. フォントを指定しないと文字入力できない。WindowsのExplorerで*.ttfを選択して、Hierarchy領域にD&D。Hierarchy領域で、UI Root - Camera - Sprite - Label を選択して、Inspector領域のUILabel(Script) - [Font]ボタンをクリックして、*.ttfを選択。
12. Hierarchy領域で、UI Root - Camera - Sprite - Label を選択して、Inspector領域のUILabel(Script) - Textに文字を入力。漢字と改行含む日本語文を入力する。OverflowでShrink..だと勝手に文字を大きさを変えるのでResizeHeightにする。Widget - PivotでTOP矢印とLEFT矢印を選択する。Spacingで行間あけて、AlignmentでLeftにする。Effectでshadow指定すると文字表示がしまるかも。GradientはOFFのほうが文字読みやすいかも。
13. Hierarchy領域で、UI Root - Camera - Spriteを選択して、[F2]キーおしてLabelをDialogBoxにrenameする。UI Root - Camera - Sprite - Label を選択して、[F2]キーおしてDialogMessageにrenameする。
14. Project領域で[Create - Folder]して Resources というフォルダーを作成。Hierarchy領域で、UI Root - Camera - Spriteを選択して、Project領域のResourcesフォルダーにD&D。
15. Hierarchy領域で、UI Root - Camera - Sprite を選択して削除。
16. Project領域で[Create - C#Script]して GameController というファイルを作成。
17. スクリプトは、なにかのオブジェクトと結びつければ実行される。ここではMain Cameraと結びつけることにする。Hierarchy領域でMain Cameraを選択。Inspector領域にMainCameraの情報が表示される。ここに、Project領域のGameControllerを選択してD&D。
18. Project領域のGameControllerをダブルクリックして編集する。（ソースコードは最下部に掲載）
19. 入力したソースコードにまちがいがある場合、Consoleウィンドウに表示される。Consoleウィンドウは[Window - Console]で出現する。
20. [実行]ボタンをクリックして、動作を確認する。
21. [File - Save Scene]で Main などと名前をつけて保存する。

ソースコード GameController.cs

using UnityEngine;
using System.Collections;

public class GameController : MonoBehaviour {
    GameObject dialogBox;
    UILabel dialogMessage;
    string msg = "現代に伝わるいろは歌の内容\n    いろはにほへと　ちりぬるを\n    わかよたれそ　つねならむ\n    うゐのおくやま　けふこえて\n    あさきゆめみし　ゑひもせす";
    int count = 0;

    // Use this for initialization
    void Start()
    {
        GameObject dialogBoxPrefab = Resources.Load("DialogBox") as GameObject;
        dialogBox = Instantiate(dialogBoxPrefab) as GameObject;
        dialogMessage = GameObject.Find("DialogMessage").GetComponent<UILabel>();
    }

    // Update is called once per frame
    void Update()
    {
        count++;
        if (count == msg.Length * 2)
        {
            Destroy(dialogBox);
            return;
        }
        if (count > msg.Length) return;
        dialogMessage.text = msg.Substring(0,count);
    }
}

3Dキャラクターは「Unity-Chan http://unity-chan.com/」です。

ゲーム作りのはじめかた Unityで覚える企画からレベルデザインまで

• 作者:あすなこうじ
• 出版社/メーカー: SBクリエイティブ
• 発売日: 2014/06/30
• メディア:大型本
• この商品を含むブログを見る

Debian6の上で動作するVirtualBox 4.3.14内で、Arch Linux 2014.07.03 をインストールしました。その記録。

• Debian 6は「さくら VPS」1Gプラン上で動作しています。
• Arch Linuxは http://itouhiro.hatenablog.com/entry/20120907/vpsの記事のDebian10.04の立場です。SSHトンネリングでアクセスします。
• 日本語環境はインストールしません。

手順は
http://note.chiebukuro.yahoo.co.jp/detail/n267693
を参考にしました。

# mkfs.ext4 /dev/sda1
# mkfs.ext4 /dev/sda2

# mount /dev/sda2 /mnt
# mkswap /dev/sda1
# swapon /dev/sda1

# vi /etc/pacman.d/mirrorlist

# pacstrap /mnt base base-devel

# genfstab -p /mnt >> /mnt/etc/fstab

# arch-chroot /mnt

# vi /etc/locale.gen

# locale-gen
# echo LANG=en_US.UTF-8 > /etc/locale.conf
# export LANG=en_US.UTF-8

# vi /etc/vconsole.conf

# ln -s /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
# hwclock --systohc --utc

# passwd

# pacman -S grub 
# grub-install --target=i386-pc --recheck --debug /dev/sda
# grub-mkconfig -o /boot/grub/grub.cfg

# systemctl enable dhcpcd.service

# exit
# umount -R /mnt
# poweroff

# useradd -m foo
# passwd foo
# visudo

# pacman -S xorg-server xorg-server-utils xorg-xinit xorg-xclock xterm
# pacman -S xf86-video-vesa
# pacman -S xfce4

# startxfce4

ネットワーク設定

ネットワーク設定します。

まずSSHサーバーを入れます。

# pacman -Ss ssh | less
# pacman -Ss openssh
# pacman -S openssh

ArchLinuxはインストールしただけじゃ起動してくれないようだ。Debianは起動してくれたのだけど。

# systemctl start sshd.service
# systemctl enable sshd.service

ネットワークインターフェース #1, #2 ともにDHCPになってしまっているようなので、個別に設定します。
まずネットワークインターフェースの名前を調べる。今回の環境では #1は「enp0s3」、#2は「enp0s8」という名でした。

# ls /sys/class/net

IPアドレス割り当て状態を調べる。

# ip addr

DHCP設定を無効にしましょう。

# systemctl --type=service
# systemctl stop dhcpcd.service
# systemctl disable dhcpcd.service

一度ArchLinux再起動してもいいかも。

# reboot

ArchLinuxには、 systemctl と似た netctl というネットワーク設定ツールがあるので、それを使用します。まずはインストール。

# pacman -Ss netctl
# pacman -S netctl

「enp0s3」は通常のインターネット接続に使うのでDHCP。「enp0s8」はSSHトンネリングのために導入したのでstatic IP。 それぞれの設定サンプルファイルをcopyして少し書き換えます。

# cp -p /etc/netctl/examples/ethernet-dhcp /etc/netctl/en1
# cp -p /etc/netctl/examples/ethernet-static /etc/netctl/en2

/etc/netctl/en1 の中身を書き換える。Interfaceの部分を変えただけです。

Description='A basic dhcp ethernet connection'
Interface=enp0s3
Connection=ethernet
IP=dhcp
## for DHCPv6
#IP6=dhcp
## for IPv6 autoconfiguration
#IP6=stateless

/etc/netctl/en2 の中身を書き換える。

Description='A basic static ethernet connection'
#AutoWired=yes
Interface=enp0s8
Connection=ethernet
IP=static
Address=('192.168.56.102/24')
Gateway='192.168.56.1'
DNS=('192.168.56.1 8.8.8.8')

接続できるかテスト実行。

# netctl start en1
# netctl start en2

SSHトンネリング接続成功。

このネットワーク設定をArchLinux起動時に実行するよう指定。

# netctl enable en1
# netctl enable en2

SSHトンネリングしたとき、SSHログインできるまでが長い（1分ほど待たされる）のは以下の書き換えで解決。

--- /etc/ssh/sshd_config.orig   2014-04-21 04:38:44.000000000 +0900
+++ /etc/ssh/sshd_config        2014-07-30 15:48:49.351163875 +0900
@@ -114,3 +114,3 @@
 #ClientAliveCountMax 3
-#UseDNS yes
+UseDNS no
 #PidFile /run/sshd.pid

VNCも入れる。まずは一度起動して初期ファイルを ~/.vncに生成させます。そのときパスワード入力も必要です。パスワードは入力したくないけど -passwd というオプションはないと言われるし‥‥

$ sudo pacman -S tigervnc
$ vncserver
$ vncserver -kill :1
$ vi .vnc/xstartup
$ chmod 755 ~/.vnc/xstartup

xstartupの中身。
~/.vnc/xstartup

#!/bin/sh
export XKL_XMODMAP_DISABLE=1
exec startxfce4

VNCサーバーの :1 は 192.168.56.102:5901 ポートでつなげる。PuTTYでSSHトンネリング設定すると、192.168.56.102:5901 にlocalhost:5902 でアクセス可能。

VNC起動。画面が出てくるまで1分待たされるのはソフト起動待ち？

$ vncserver :1

‥‥しかしここまでの設定だとSSHトンネリングは成功する一方、外部ネットワークにつながらない（ ping www.google.com の応答がない）。

$ sudo netctl stop en1
$ sudo netctl stop en2
$ sudo systemctl start dhcpcd.service

すれば、一時的に外部につながるようになりますが、SSHトンネリング不可です。netctlのDHCPとdhcpcdのDHCPは何か違うのか‥‥

調べると、

$ sudo netctl stop en2

だけ実行すれば外部ネットワークにつながる（ ping www.google.com の応答あり）と判明した。en2の何かわるいのか‥‥DNSかGatewayの記述がじゃまなのでは？
/etc/netctl/en2 の中身を書き換える。

Description='A basic static ethernet connection'
#AutoWired=yes
Interface=enp0s8
Connection=ethernet
IP=static
Address=('192.168.56.102/24')
# Gateway='192.168.56.1'
# DNS=('192.168.56.1 8.8.8.8')

こうすると、SSHトンネリングも可能で、しかも外部ネットワークにつながるようになった。

Linuxシステム[実践]入門 (Software Design plus)

• 作者:沓名亮典
• 出版社/メーカー:技術評論社
• 発売日: 2013/07/03
• メディア:単行本（ソフトカバー）
• この商品を含むブログ (13件) を見る

Arch Linuxのインストールは http://itouhiro.hatenablog.com/entry/20140730/linuxを参照。

まずは Arch Build System をインストール。

# pacman -S abs

https://www.archlinux.org/packages/extra/i686/fontforge/
を見ると「Repository: Extra」とある。

/etc/abs.conf でextraの前に ! がないか確認する。

REPOS=(core extra !community !testing !community-testing
       !staging !community-staging !gnome-unstable !kde-unstable)

absコマンドを実行して、absツリーを取得。

# abs

/etc/makepkg.conf を書き換えてPACKAGERを設定。

#PACKAGER="John Doe <john@doe.com>"
PACKAGER="Itou Hiroki <itouhiro !atmark! users.sourceforge.jp>"

このあとはrootではなく、一般ユーザーで実行します。

ビルドディレクトリの作成

$ mkdir ~/abs
$ cp -pr /var/abs/extra/fontforge ~/abs/
$ cd ~/abs/fontforge/

日本語パッチの準備
http://www.geocities.jp/meir000/fontforge/の日本語縦書きパッチを取得。

$ wget http://www.geocities.jp/meir000/fontforge/fontforge-20140104-vmetrics.patch.txt
$ sha1sum fontforge-20140104-vmetrics.patch.txt
$ vi PKGBUILD

編集する箇所

--- PKGBUILD.orig       2014-07-31 07:05:48.000000000 +0900
+++ PKGBUILD    2014-07-31 16:20:41.938494158 +0900
@@ -16,10 +16,12 @@
          'python2' 'desktop-file-utils' 'gtk-update-icon-cache' 'hicolor-icon-theme')
 source=("https://github.com/fontforge/fontforge/archive/${_pkgver}.tar.gz"
         'http://fontforge.org/cidmaps.tgz'
-        'giflib.patch')
+        'giflib.patch'
+        'fontforge-20140104-vmetrics.patch.txt')
 sha1sums=('abce297e53e8b6ff6f08871e53d1eb0be5ab82e7'
           'efbc7c9d3e95159f5600dc71f9cccb370e46bb94'
-          '420dd1dd75d72719f3203d832bfa8c1c7e7eef86')
+          '420dd1dd75d72719f3203d832bfa8c1c7e7eef86'
+          'f056b3ae8afb432b289000c2193c221cddc5830f')

 options=('!makeflags')
 install=install
@@ -28,6 +30,7 @@
        cd "${srcdir}/${pkgname}-${_pkgver}"
        sed '/fontforge_package_name/s/^#//' -i configure.ac
        patch -p1 -i ../giflib.patch
+       patch -p1 -i ../fontforge-20140104-vmetrics.patch.txt
        ./autogen.sh
 }

ビルド

$ makepkg -s

ビルドを待つ。

[foo@localhost fontforge]$ makepkg -s
/usr/bin/makepkg: eval: line 2272: unexpected EOF while looking for matching `"'
/usr/bin/makepkg: eval: line 2273: syntax error: unexpected end of file
==> Making package: fontforge 20140101-3 (Thu Jul 31 16:14:44 JST 2014)
==> Checking runtime dependencies...
==> Installing missing dependencies...
warning: skipping target: libspiro
resolving dependencies...
looking for inter-conflicts...

Packages (7): libsodium-0.6.1-1  giflib-5.1.0-1  libspiro-1:0.2-1
              libunicodenames-1.1.0_beta1-1  libxkbui-1.0.2-5  python2-2.7.8-1
              zeromq-4.0.4-3

Total Download Size:    10.07 MiB
Total Installed Size:   72.74 MiB

:: Proceed with installation? [Y/n] Y

...

==> Making package: fontforge 20140101-3 (Thu Jul 31 16:22:16 JST 2014)
==> Checking runtime dependencies...
==> Checking buildtime dependencies...
==> Retrieving sources...
  -> Found 2.0.20140101.tar.gz
  -> Found cidmaps.tgz
  -> Found giflib.patch
  -> Found fontforge-20140104-vmetrics.patch.txt
==> Validating source files with sha1sums...
    2.0.20140101.tar.gz ... Passed
    cidmaps.tgz ... Passed
    giflib.patch ... Passed
    fontforge-20140104-vmetrics.patch.txt ... Passed
==> Extracting sources...
  -> Extracting 2.0.20140101.tar.gz with bsdtar
  -> Extracting cidmaps.tgz with bsdtar
==> Starting prepare()...
patching file gutils/gimagereadgif.c
patching file fontforge/splinechar.c
patching file fontforge/splinefont.c
patching file fontforge/tottfgpos.c
patching file fontforgeexe/charview.c
patching file fontforgeexe/cvpointer.c
Preparing the fontforge build system...please wait

Found GNU Autoconf version 2.69

...

==> Creating package "fontforge"...
  -> Generating .PKGINFO file...
  -> Adding install file...
  -> Generating .MTREE file...
  -> Compressing package...
==> Leaving fakeroot environment.
==> Finished making: fontforge 20140101-3 (Thu Jul 31 17:17:25 JST 2014)
[foo@localhost fontforge]$ ls
./                   fontforge-20140101-3-i686.pkg.tar.xz   pkg/
../                  fontforge-20140104-vmetrics.patch.txt  PKGBUILD
2.0.20140101.tar.gz  giflib.patch                           PKGBUILD.orig
cidmaps.tgz          install                                src/
[foo@localhost fontforge]$

patchも適切に適用されたようである。

これをインストール。

$ sudo pacman -U fontforge-20140101-3-i686.pkg.tar.xz

等幅フォント NatuMono（ナツ　モノ）を試作しました。

ばぱ びぴ ぶぷ べぺ ぼぽ　バパ ビピ ブプ ベペ ボポ（濁点・半濁点）
カ力 エ工 ロ口 ー一 ニ二 タ夕 ト卜（カタカナ・漢字）
へヘ     （ひらがな・カタカナ）
1Il １Iｌ（数字１・大文字アイ・小文字エル）
0O ０Ｏ  （数字ゼロ・大文字オー）
～〜     （FULLWIDTH TILDE U+FF5E・WAVE DASH U+301C）

アプリのページのパフォーマンス
夕方のタンポポ　ペーパー一枚　協力
for (i=0; i<numItem.length; i++) {
  console.log('2Z_5S8');
}

FontForgeで日本語TrueTypeフォントを出力したとき、文字幅が広すぎることがよくあります。

たとえばIPAゴシックを読み込んですぐ [ファイル＞フォントを出力]でTrueTypeフォント保存するだけで、以下のようにまるで全角文字の幅が2倍になったようになります。

この原因は、FontForgeの不具合です。

詳しくは M⁺ FONTS >メーリングリストのこのスレッド http://sourceforge.jp/projects/mplus-fonts/lists/archive/dev/2011-July/000601.htmlにありますが、OS/2テーブルのxAvgCharWidthの値が、FontForgeを通すとおかしくなるためです。

環境

• IPAゴシック(Ver.003.03) ipag.ttfhttp://ipafont.ipa.go.jp/
• fontforge-cygwin_2014_01_04 (FontForge 2.0.20140101) http://www.geocities.jp/meir000/fontforge/
• Windows7 64bit

修正方法

1. OS/2テーブルのバージョンを書き換える
   上記のスレッドにある「OS/2テーブルのバージョンを書き換える」をやっているのが、Rictyフォント https://github.com/yascentur/Rictyの misc/os2version_reviser.shスクリプトです。しかしこれは、Ricty以外のフォントには効果ないことが多いです。
   FontForgeで [エレメント＞フォント情報＞OS/2＞OS/2バージョン]を 1 にすると直る場合もあるようですが、今回のIPAゴシックでは直りませんでした。

2. xAvgCharWidth を直接書き換える
   これが確実な方法です。書き換える方法は今だと TTX/FontTools http://sourceforge.net/projects/fonttools/がよいと思います。

TTXインストール

Unixの人は fonttools-2.4.tar.gzをそのままインストールもできますし、AFDKO http://www.adobe.com/devnet/opentype/afdko.htmlをインストールすればTTXもインストールされます。

しかし、Windowsだと http://rtfreesoft.blogspot.jp/search/label/ttxのWinTTX 2.4がよかったです。Pythonインストールしなくてすみますし動作も確実です。以下はこのWinTTXに含まれるttx.exeを使用します。インストールは必要なく、zipファイルから取り出したexeファイルをそのまま使用します。

TTXを準備

C:\font （どこでもよいですが今回はここ）に以下を配置します。

• 文字幅がおかしくなる前の元フォント ipag.ttf
• 文字幅がおかしいIPAGothic.ttf
• WinTTXに含まれるttx.exe

[Windowsのスタートメニュー＞すべてのプログラム＞アクセサリ＞コマンドプロンプト]を起動します。

cd c:\font

と入力します。これでttx.exeを使える場所に来ました。

OS/2テーブルを書き出す

ttx.exe -t OS/2 IPAGothic.ttf

と入力します。OS/2テーブルがテキストファイル IPAGothic.ttxとして出力されましたよ。

ttxファイルを書き換え

ttxファイルをテキストエディターで開いて、 xAvgCharWidth を書き換えましょう。 フォントごとに違う値を指定する必要があります。

今回は 1024 にします。この 1024 はどこから出てきたかというと、書き換え前の ipag.ttfのOS/2テーブルの xAvgCharWidth の値です。

IPAGothic.ttxを書き換えて、保存するのですが、このとき注意があります。

• ファイル名は新しいフォント名になるので、IPAGothic.ttx とは違う名前にしておく。

ここでは New1とファイル名に追加しておきます。

文字幅おかしいフォントのOS/2テーブルを書き換える

文字幅おかしいTrueTypeファイルを修正しましょう。先ほどのttxファイルでOS/2テーブルを上書きします。

ttx.exe -m IPAGothic.ttf IPAGothicNew1.ttx

これでフォントが修正されました。

余談

xAvgCharWidth の値はIPAゴシックの場合 1024 となっていました。等幅フォントの場合、半角英数字の幅も同じ値だと思います。 xAvgCharWidth の意味は「半角英数字の平均的な横幅」ですから、等幅フォントだとそうなりますよね。

日本語デザインフォント デザインワークに使える和文セレクト書体集

• 作者: FLOP DESIGN,Maniackers Design
• 出版社/メーカー:エムディエヌコーポレーション
• 発売日: 2014/03/04
• メディア:単行本
• この商品を含むブログを見る

Flashでゲームパッドを使いたい。参考: http://ics-web.jp/lab/archives/512

それにはFlashPlayer 11.8以上のswfを生成しなくてはならない。 有料のFlash CCでもできるけど、FlashDevelop とFlexSDKを使い、無料でやってみようと思う。

Install FlashDevelop

http://www.flashdevelop.org/でinstallerをdownload。exeを実行→すでにFlashDevelop4がインストール済みならアップデート。

Install Apeche FlexSDK

C:\Program Files (x86)\FlashDevelop\Tools\appman\AppMan.exeを実行する。

ApacheFlexSDK 3.1 Installer（これでApacheFlex 4.13をインストールできるらしい）を選択してOKすると、なにやらエラーが出る。

しかたないので、 http://flex.apache.org/download-binaries.htmlでWindows向けApacheFlexSDK binaryをdownload。 apache-flex-sdk-4.13.0-bin.zipC:\home\bin\ApacheFlex4_13に展開。 （C:\Program Files (x86)\FlashDevelop\Tools\flexsdk4_13に展開するのを試したが、消せないフォルダ作られてしまい、Windows7の不具合に嘆息した。Program Files以外に再展開した）

Setting Apeche FlexSDK

FlashDevelopを起動して、 [Tools > Program Setting > AS3Content > Install Flex SDKs > add(追加)]で C:\home\bin\ApacheFlex4_13を指定する。[↑]ボタンで一番上に持っていく。

Install and setting Flash Player

C:\Program Files (x86)\FlashDevelop\Tools\appman\AppMan.exeで、Standalone Flash Playerをインストール。(このflashplayer_14_sa_debug.exeというのはダウンロードしたファイルがインストーラーでは無くて、そのまま実行できるファイル）

インストールするだけで、 [Tools > Program Setting > FlashViewer > External Player Path]も自動で設定された。これは便利。

Verify FlexSDK

FlashDevelopで適当なプロジェクトを作成し、適当なサンプルプログラムを作成する。 [Project > Property > SDK]でApacheSDK 4.13が選択されているか確認する。 [Project > Property > Output]でFlashPlayer 14を選択する。

ビルドしてみると、はいOK。

package {
    import flash.display.Sprite;
    import flash.events.Event;

    /**
     * ...
     * @author foo
     */
    public class Main extends Sprite {

        public function Main():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

            var spr:Sprite = new Sprite();
            spr.graphics.beginFill(0xcc9999);
            spr.graphics.drawCircle(100, 100, 50);
            spr.graphics.endFill();
            addChild(spr);
        }

    }

}

Setting SWF version

しかしswfファイルのバージョンを見ると 0x0e ‥‥つまり -swf-version=14、つまり http://sleepydesign.blogspot.jp/2012/04/flash-swf-version-meaning.htmlによると FlashPlayer 11.1向けのswfではないか。これではわざわざApacheFlex導入した意味がない。

[Project > Property > Compiler Options]で -swf-version=25と指定する。この25は http://sleepydesign.blogspot.jp/2012/04/flash-swf-version-meaning.htmlによるFlashPlayer14の内部バージョン。 そしてビルドしてswfを調べると 0x19 = 16 + 9 = 25 なのでバッチリ FlashPlayer14向けのswfを生成できた。

　 続き: Flashでゲームパッド認識 with ApacheFlex 4.13 http://itouhiro.hatenablog.com/entry/20140914/flash

Adobe Creative Cloud 3か月版 [ダウンロードカード]

• 出版社/メーカー:アドビシステムズ
• 発売日: 2013/10/18
• メディア: License
• この商品を含むブログ (1件) を見る

Flashでゲームパッドを使いたい。

前の記事 http://itouhiro.hatenablog.com/entry/20140912/flashでGamePad機能に対応するswfを作成できるようになった。

次は、GamePadを認識するActionScript3の書き方を学ぶ。

FlashでGamePadの動作確認は http://ics-web.jp/lab/archives/512で可能だけどそのページにはソースがない。 Adobeの http://www.adobe.com/devnet/air/articles/game-controllers-on-air.htmlが参考になる。

サンプルどおりに組んでみるとこんな感じか。まずはゲームパッドを認識するところだけ。

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.GameInputEvent;
    import flash.ui.GameInput;
    import flash.ui.GameInputDevice;

    public class Main extends Sprite {
        private var logger:Logger;
        private var numPad:int;
        private var gmInput:GameInput;

        public function Main():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

            logger = new Logger('Hello GameInput');
            addChild(logger);

            if ( ! GameInput.isSupported) return;
            gmInput = new GameInput();
            gmInput.addEventListener(GameInputEvent.DEVICE_ADDED, showLog);
            gmInput.addEventListener(GameInputEvent.DEVICE_REMOVED, showLog);

            showLog(null);
        }

        private function showLog(e:Event):void {
            logger.log("GameInput.numDevices = " + GameInput.numDevices);
            if (GameInput.numDevices <= 0) return;

            for (var i:int = 0; i < GameInput.numDevices; i++ ) {
                var device:GameInputDevice = GameInput.getDeviceAt(i);
                logger.log("GameInput.getDeviceAt("+i+") = " + device);
                if ( ! device) return;
                logger.log("  device.enabled - " + device.enabled);
                logger.log("  device.id - " + device.id);
                logger.log("  device.name - " + device.name);
                logger.log("  device.numControls - " + device.numControls);
                logger.log("  device.sampleInterval - " + device.sampleInterval);
                logger.log("  device.MAX_BUFFER - " + GameInputDevice.MAX_BUFFER_SIZE);
            }
        }
    }
}

package  {
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;

    public class Logger extends Sprite {
        private var tf:TextField = new TextField();
        private var lines:Array = [];

        public function Logger(str:String) {
            var fmt:TextFormat = new TextFormat('Courier New', 12, 0x333333);
            tf.defaultTextFormat = fmt;
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.x = 10;
            tf.y = 0;
            tf.text = '';
            addChild(tf);

            log(str);
        }

        public function log(str:String):void {
            lines.push(getTimeNow() + ' ' + str);
            if (lines.length >= 40) lines.shift();
            tf.text = lines.join('\n');
        }

        private function getTimeNow():String {
            var dt:Date = new Date();
            var h:String = ('0' + dt.getHours()).substr(-2);;
            var m:String = ('0' + dt.getMinutes()).substr(-2);
            var s:String = ('0' + dt.getSeconds()).substr( -2);
            var ms:String = ('00' + dt.getMilliseconds()).substr(-3);
            return h +':' + m +':' + s +'.' + ms;
        }

        public function clear():void {
            lines = [];
        }
    }
}

さて次はボタンの認識だ。

http://melancholy.raindrop.jp/wordpress/?p=88の記事によると「GameInputDeviceのキャッシュ」は扱いが難しいらしい。 http://cuaoar.jp/2013/04/adobe-air-gameinput.htmlのサンプルコードはわかりやすかった。

以下は、Event.CHANGEで入力を取得している。ボタンを押すたび放すたびに変化するvalueを表示する。

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.GameInputEvent;
    import flash.ui.GameInput;
    import flash.ui.GameInputControl;
    import flash.ui.GameInputDevice;

    public class Main extends Sprite {
        private var logger:Logger;
        private var numPad:int;
        private var gmInput:GameInput;

        public function Main():void {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

            logger = new Logger('Hello GameInput');
            addChild(logger);

            if ( ! GameInput.isSupported) return;
            gmInput = new GameInput();
            gmInput.addEventListener(GameInputEvent.DEVICE_ADDED, showDevice);
            gmInput.addEventListener(GameInputEvent.DEVICE_REMOVED, showDevice);

            showDevice(null);
        }

        private function showDevice(e:Event):void {
            logger.log("GameInput.numDevices = " + GameInput.numDevices);
            if (GameInput.numDevices <= 0) return;

            for (var i:int = 0; i < GameInput.numDevices; i++ ) {
                var device:GameInputDevice = GameInput.getDeviceAt(i);
                logger.log("GameInput.getDeviceAt("+i+") = " + device);
                if ( ! device) return;
                device.enabled = true;
                logger.log("  device.enabled - " + device.enabled);
                logger.log("  device.id - " + device.id);
                logger.log("  device.name - " + device.name);
                logger.log("  device.numControls - " + device.numControls);
                for (var j:int = 0; j < device.numControls; j++) {
                    var control:GameInputControl = device.getControlAt(j);
                    logger.log("    control:id=" + control.id + ", value=" + control.value + " (" + control.minValue+" .. " + control.maxValue+")");
                    control.addEventListener(Event.CHANGE, showButtonStat);
                }
            }
        }

        private function showButtonStat(e:Event):void {
            var control:GameInputControl = e.target as GameInputControl;
            logger.log("    control:id=" + control.id + ", value=" + control.value + " (" + control.minValue+" .. " + control.maxValue+")");
        }
    }
}

アナログスティックやトリガーの状態は小数値で取得できた。十字キー(D-PAD)やデジタルボタンは 1or0 で取得できる。

ところで振動はどう扱うんだろ。 http://www.adobe.com/devnet/air/native-extensions-for-air.htmlによるとAIR+ANE使えば使えるかも。でもWindows向けANEはないようだ。 Adobeは「Flashはゲーム分野をターゲットとする‥‥」というならvibrationに対応させてほしい。

exe化

Flashのswfを、Windowsのexeファイルに変換する方法に困った。

以前は http://www.adobe.com/jp/support/flashplayer/downloads.htmlの「Windows版Flash Player プロジェクター」をダウンロードして、その実行ファイルでswfを開き、[ファイル >プロジェクターを作成]でexe化できた。

しかし http://blawat2015.no-ip.com/~mieki256/diary/201308292.htmlによると FlashPlayer 11.3以降はexe化が不可になった。将来的に復活する予定もない。FlashPlayer 15で試したけど確かに不可だった。

ということは、FlashPlayer 11.8以上でしか動作しない「GamePad対応swf」はexe化できないじゃないかー。

製品のFlash CCでは http://cuaoar.jp/2013/12/flash-professional-cc-2.htmlhttp://helpx.adobe.com/jp/flash/using/exporting-projector-files.htmlにあるように「プロジェクター機能」を使ってexeを作成できるが、無料のFlexSDKだとAdobe AIRにするしかないようだ。

Adobe AIRは好きじゃない‥‥。exeじゃなくてインストーラーになるから動作確認が面倒だし、ビルド環境設定も面倒。 GamePad対応ゲームアプリは、無料で使えてexe化できるUnityで作ったほうがいいかも。

Adobe Flash professional CC. Classroom in a book

• 作者:Adobe Creative Team
• 出版社/メーカー: Mondadori Informatica
• 発売日: 2014/07
• メディア: Perfect
• この商品を含むブログを見る

Nasu（ナス）フォントを作成しました。

特徴

見た目が似ていてまちがいやすい文字・見た目が同じだが違う文字を、判別しやすくするフォントです。

ダウンロード

https://sourceforge.jp/downloads/users/7/7587/NasuFont-20141215.zip (約12MB)

2014-12-15更新 - 微調整。詳細

以下の2種類のフォントを含みます。

• Nasu（ナス）　　　　　半角英数字はプロポーショナル、全角文字は等幅
• NasuM（ナス・エム） 　等幅フォント

それぞれ Regular, Bold のウェイトがあります。

フリーフォントなんだね。

そうだよ。Adobeのオープンソースフォント「源ノ角ゴシック」の改変フォントなんだ。より正確には、源ノ角ゴシックを改変した「源真ゴシック」をさらに改変した。

元の「源ノ角ゴシック」と比べて、どこが変わったのさ？

濁点文字・半濁点文字を判別しやすくした。

カ力 エ工 ロ口 ー一 ニ二 タ夕 ト卜（カタカナ・漢字）を判別しやすくした。へヘ（ひらがな・カタカナ）を判別しやすくした。

数字１・小文字エル・大文字アイ（半角・全角）を判別しやすくした。数字ゼロ・大文字オー（半角・全角）を判別しやすくした。

「ほんらい濁点・半濁点がつかない全角ひらがな・全角カタカナ」に濁点・半濁点（合成用濁点・半濁点 U+3099,U+309A）をつけたとき、1文字幅で表示されるようにした。詳細

「～〜」（FULLWIDTH TILDE U+FF5E・WAVE DASH U+301C）を判別しやすくした。

これが主な変更点だ。 あとは

• 「―」（U+2015 HORIZONTAL BAR）を横に伸ばした。
• 全角ローマ数字ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫに横棒をつけた。
• 等幅フォントのみ、行間を狭くした。「 { } 」を横に伸ばした。「 ~ 」を縦に伸ばした。

もとよりも、わるくなった点はあるの？

もとの「源ノ角ゴシック」は7ウェイト、つまり太さが7種類あるんだけど、このNasuフォントは 2種類しかないんだ。 でも、Regularを「太字」指定するとBoldが使われるようになったから、WordとかWebブラウザーで使いやすいぞ。

このフォント名はなにか意味あるのかい？

もとの「源ノ角ゴシック」は戦国武将みたいな迫力ありすぎな名前だから、Googleの出してるNotoフォントのほうの名前を参考にして少し変えたんだ。意識してるUDフォントのuをつけて‥‥

源ノ角で戦国武将というと源 義経（みなもとの よしつね）とか？

源氏の武将として有名なのは、ほかには那須与一（なすの よいち）もいるよね。そこから名前をいただいて、Nasuフォントとしたんだ。

ふーん。

作成環境

• Windows 7 64bit
• unofficial fontforge-cygwin 2014_01_04 (FontForge 2.0.20140101＋縦書きパッチ）
• TTX/FontTools (WinTTX-2.4-git-behdad-20140317-11580c55bb)
• 源ノ角ゴシック（Source Han Sans）ver 1.001
  　　ver 1.001で変更された全角ひらがな・全角カタカナを取り入れました。
• 源真ゴシック Version 1.058.20140828（源ノ角ゴシック ver 1.000） http://jikasei.me/
  　　「源真ゴシック Regular/Bold, 源真ゴシック等幅 Regular/Bold」を改変のベースにさせていただきました。

ライセンス

• Nasuフォントは、Apache 2.0 License のもとで使用することができます。
• 「源ノ角ゴシック」由来の文字グリフの著作権は Adobe様が所有しています。
  　　等幅の半角英数字形は、源ノ角ゴシックに含まれる Source Code Pro ベースのものです。
• 「源真ゴシック」由来の文字グリフの著作権は 自家製フォント工房 様が所有しています。
• 「M⁺ OUTLINE FONTS」由来の文字グリフの著作権は M⁺ FONTS PROJECT 様が所有しています。

    Copyright 2014 itouhiro

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

Apache 2.0 License の日本語訳は、以下から参照することができます。 http://sourceforge.jp/projects/opensource/wiki/licenses%2FApache_License_2.0

謝辞

源真ゴシック作成者のMM様、源ノ角ゴシック作成者のAdobe様、M⁺ OUTLINE FONTS作成者のM⁺ FONTS PROJECT 様、FontForge作成者様ありがとうございます。

連絡

報告は Twitter @itouhiro にどうぞ。

商用OK!フォントコレクション(約200フォント（120書体以上）収録のハイセンスフォント集)　font collection

• 出版社/メーカー: FLOPDESIGN
• メディア: CD-ROM
• クリック: 32回
• この商品を含むブログを見る