Mtk's Blog: 5月 2015

2015年5月30日土曜日

[ASP.NET] 動的に追加したラベルやテキストボックスが消える現象の対策

How to keep the Panel controls in PostBack
ASP.NETでアプリ開発中に悩んだことがあったのでまとめてみました。

環境

・Windows8.1
・Visual Studio Community 2013
・C#

動的にラベルやテキストボックスを追加する

ASP.NETのPanelコントロールはラベルやテキストボックスを動的に追加することが出来ます。
本来はHTMLのデザインは静的に定義しておいた方がメンテナンスしやすいのですが、動的に追加したいことがあると思います。

次のソースはボタンをクリックするとPanelに現在時刻のラベルを追加するサンプルですが期待通りの動作ではありません。

index.aspx.cs

using System;
using System.Web.UI.WebControls;

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {

        protected void Page_Load(object sender, EventArgs e) {
        }

        protected void Button1_Click(object sender, EventArgs e) {
            Label newLabel = new Label();
            newLabel.Text = DateTime.Now.ToString() + "<br /%gt;";
            Panel1.Controls.Add(newLabel);
        }
    }
}

index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="ControlsAddSample.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Panel ID="Panel1" runat="server"></asp:Panel>
    </div>
    </form>
</body>
</html>

index.asp.designer.cs

namespace ControlsAddSample {
    public partial class index {
        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
        protected global::System.Web.UI.WebControls.Panel Panel1;
        protected global::System.Web.UI.WebControls.Button Button1;
    }
}

実際に操作すると何度クリックしてもPanelには一つのラベルしか追加されません。
WindowsFormと違い、ASP.NETはボタンをクリックするとポストバックが処理され、Panelが初期化されてしうためです。
ソースは省略しますがUpdatePanelを使ったASP.NET Ajaxで作り替えてもWebアプリでも同様に一つのラベルしか追加されません。
ASP.NET Ajaxは画面遷移しませんがポストバックと同様のイベントが処理されるためです。

解決策

PanelにWebコントロールを追加する処理は、Page_LoadイベントでWebコントロールをすべて追加するようにしました。
クリックした時の時刻を文字列のリストに格納してリストの内容をPanelにすべて表示します。リストはSession変数に保存します。

修正したindex.aspx.cs

using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {
        private List<string> DateArray;

        protected void Page_Load(object sender, EventArgs e) {
            DateArray = (List<string>)Session["DateArray"];
            if (DateArray == null) {
                DateArray = new List<string>();
            }
        }

        protected void Button1_Click(object sender, EventArgs e) {
            DateArray.Add(DateTime.Now.ToString());
            Session["DateArray"] = DateArray;

            foreach(var now in DateArray){
                Label newLabel = new Label();
                newLabel.Text = now + "<br />";
                Panel1.Controls.Add(newLabel);
            }
        }
    }
}

List<string>はシリアライズ可能なのでViewState変数に保存することも出来ます。

ViewState変数を使うように修正したindex.aspx.cs

using System;
using System.Web.UI.WebControls;
using System.Collections.Generic;

namespace ControlsAddSample {
    public partial class index : System.Web.UI.Page {
        private List<string> DateArray;

        protected void Page_Load(object sender, EventArgs e) {
            DateArray = (List<string>)ViewState["DateArray"];
            if (DateArray == null) {
                DateArray = new List<string>();
            }
        }

        protected void Button1_Click(object sender, EventArgs e) {
            DateArray.Add(DateTime.Now.ToString());
            ViewState["DateArray"] = DateArray;

            foreach(var now in DateArray){
                Label newLabel = new Label();
                newLabel.Text = now + "<br />";
                Panel1.Controls.Add(newLabel);
            }
        }
    }
}

MVCモデルでいうビューとコントローラーの分離が出来ないのが難点です。

2015年5月23日土曜日

[Unity3D] クエリちゃんの二重あご説という誤解を解く

Querychan is not fat at all
2015年5月、クエリちゃんがこんなツイートをしました。

ワタシの二重顎説が出回っているようなのデスが・・・( ⁰▱⁰ )!!
ワタシの手と、顎が重複表示されて困っている皆さん、この方法で解消してくだサイ！
よろしくお願いいたしマス٩(๑òωó๑)۶ pic.twitter.com/EIFm4LSSB9
— クエリちゃん (@Query_chan) 2015, 5月 12

クエリちゃんはポケット・クエリーズ社のマスコットキャラクターです。ゲーム開発ツールのUnity3Dのアセットストアでクエリちゃんのアセットが無料で公開されています。
ファンクラブもあります。
http://www.query-chan.com/
なぜクエリちゃんの二重あご説が出回ってしまったのか検証しました。

環境

・Windows 8.1
・Unity 5.0.1

3次元CGが表示される仕組み

Unity3DだけでなくMikuMikuDance(MMD)で使われる3次元CGは頂点の座標とその順番のデータの集合です。画面に表示するときは各頂点を順番に結び合わせて線や面を表現します。
面は質感を表現するため単なる塗りつぶしではなく画像を表示することが多いです。面に画像を表示する機能をテクスチャと言います。
下の画像はUnity3Dのマスコットキャラクター・ユニティちゃんです。ユニティちゃんもまたUnity3D用のモデルデータなどが公開されています。
青い線が各頂点を結ぶ線です。

次の画像は怒った顔のユニティちゃんです。

目・眉・口の頂点を移動し、それに付随する面を伸縮することで表情を表現しています。
表情などの表現のために頂点を移動することをモーフと言います。

クエリちゃんの表情はモーフではなくテクスチャ

クエリちゃんも無数の頂点とテクスチャの組み合わせで出来ています。

ですが、ユニティちゃんとの大きな違いは表情をモーフではなくテクスチャの画像で表現している点です。

クエリちゃんは表情毎にテクスチャ画像が用意されています。
口を結んでいるときと開けているときとではあごの形が変わるわけですが、これもモーフではなく顔のパーツが2種類用意されています。
クエリちゃんは表情に合わせてテクスチャの画像を差し替えたり顔のパーツを表示・非表示する仕様です。

2種類の顔のパーツを同時に表示するとわずかにずれて重なって表示されるため、二重あご説が拡散されたようです。
クエリちゃんは二重あごではありません。

ユニティちゃんも二人重ねれば二重あごになります。(重ねることはないと思いますが)

ユニティちゃん方式(モーフで表情をつける)のメリット

モーフは頂点の移動量を混ぜる(ブレンドする)ことができます。
例えば口を結んでいるモーフとあんぐり開けてるモーフを半分ずつブレンドすれば口を半開きにできます。

クエリちゃん方式(テクスチャで表情をつける)のメリット

テクスチャはあらかじめ用意した画像を面に表示する機能なので、モーフのようにブレンドすることが出来ません。
ですが、2次元の画像編集ソフトを使えば比較的簡単にオリジナルのテクスチャ画像を作ることができます。
下の画像はクエリちゃんの表情のテクスチャを自分で作ったものです。

新しいモーフを追加するとなると3次元のCG編集ソフトを使いこなす必要があるのでそれなりに難しいです。
テクスチャなら元の画像を改変するだけなのでモーフの追加ほど難しくありません。

クエリちゃんの手のパーツは3種類

クエリちゃんは手首や指の関節が曲がらない代わりにグー・パー・半開きの3種類のパーツがあります。
使いたい手の形だけを表示して使う仕様です。

クエリちゃんモデルのFBX

クエリちゃんのアセットはFBXファイルが付属します。FBXは3次元CGで広く使われているフォーマットです。
FBXの読み込みに対応しているCLIP STUDIO COORDINATEを使ってみたところ、クエリちゃんのFBXファイルを読み込むことが出来ました。
テクスチャの画像ファイルは自分で指定する必要がありました。

2つの顔が重なったまま表示されます。
手も3種類全て表示されています。

クエリちゃんについて詳しいプロ生の動画があります

勉強会は動画で見るより会場に行った方が情報量が圧倒的に多いです。

2015年5月16日土曜日

ツイッターのツイート履歴CSVを文字化けしないようにExcelに取り込む方法

How to import tweets CSV files into Excel
2013年頃からTwitterは自分が投稿したツイートをCSVファイルでダウンロード出来るようになりました。
このCSVファイルを無加工でExcelで開くと文字化けして使い物になりません。

文字化けしないようにExcelで開けるようにするまでの手順をまとめてみました。

環境

・Windows 8.1
・Excel 2010

全ツイート履歴を要求するしCSVファイルをダウンロードする

全ツイート履歴はPCのブラウザーでTwitterにログインして設定画面から要求できます。
AndroidのTwitter公式アプリは全ツイート履歴の要求画面が見当たりませんでした。

このボタンをクリックすると、ダウンロードURLが書かれたメールが届き、zipファイルでダウンロードできます。
zipファイルをかいとうすると「tweets.csv」という目的のCSVファイルがあるはずです。

Excelで開く前に文字エンコードをShift_JISに変換する

tweets.csvをExcelで開くと文字化けするのはCSVファイルの文字コードがUTF-8だからです。
Shift_JISのCSVファイルならExcel出文字化けせずに開けます。
ツイート履歴のCSVファイルの文字コードをShift_JISに変換して保存すれば、UTF-8に依存した文字は失われますが改行箇所はそのままExcelに取り込めます。

MtkはEmEditorを使っているのですが、EmEditorならcsvファイルを開いて「全てエンコードを指定して保存」で「シフトJIS」を選択すればShift_JISに変換できます。

フリーの文字コード変換ツールならコマンドライン専用ですがnkfというものがあるようです。

Shift_JISに変換しない場合は細工が必要

手間はかかりますがCSVファイルを細工すればUTF-8のままExcelで開くことが出来ます。
詳しくは続けて説明しますが、大まかに次の操作が必要でした。

ファイル名の拡張子をtxtに変更する
行の途中の改行を削除する
Excelでテキストファイルの区切り文字と引用符を指定して開く

ファイル名の拡張子をtxtに変更する

ExcelへのShift_JIS以外のCSVファイルの取込は文字化けの原因になるのですが、テキストファイルの取込ならUTF-8でも文字化けしません。
Excelへテキストファイルとして取り込むためツイート履歴のCSVファイルの拡張子をtxtに変更します。

行の途中の改行を削除する

Twitterに改行を含む文章を投稿するとCSVファイルのツイート履歴も改行されています。
下の図だと、50行目と52行目はそれぞれ前の行の途中で改行しています。

文章中の改行を残したままのテキストファイルはこの後のに取り込みで失敗することがあったので、投稿文の改行を削除します。
改行の削除には正規表現で置換できるテキストエディターが必要です。
EmEditorでの方法を説明します。
EmEditorでtweets.csvを開きます。
Ctrlキーを押しながらHキーを押すか、メニューの検索 - 置換を開きます。
次のように操作します。入力する内容を間違えるとファイルの内容が壊れます。

検索する文字
\n([^"])
置換後の文字列
$1
正規表現を使用するをチェック

この状態で[全て置換]ボタンをクリック

Excelでテキストファイルの区切り文字と引用符を指定して開く

Excelのメニュー
ファイル - 開く
でテキストファイルを開きいます。

「カンマやタブなどの区切り文字によって･･･」を選択して次へ。

区切り文字はカンマを選択して次へ

列のデータ形式は文字列を選択します。
この画面のデータプレビューに全部で10列くらいありると思いますが列を一つずつクリックしてそれぞれの列のデータ形式を文字列に設定して完了です。

エラーや文字化けがなければ成功です。

使い道は

Excelに取り込めたら検索なりフィルターなりで過去の投稿を好きなように見ることが出来ます。
Webアプリの勉強がてらにツイートを投稿したり削除するツールを作りたかったのですが検索APIに制限があったので、Excelで削除したいツイートのステータスIDを探して画面にコピーペーストするツールのために使ってます。

なお、他人のツイート履歴はダウンロードできません。

2015年5月9日土曜日

ツイッターAPIの検索で複数の画像URLが取得できない対策方法

How to get multiple pictures URL from Twitter API
ツイッターはアプリ開発者向けにAPIを公開しています。
APIを使ってツイート分の取得や投稿、プロフィールの設定などが出来るようになってます。
ほとんどのAPIがリクエストはHTTPによるGET、SET、POST、DELETEで行い、レスポンスはJSONフォーマットのテキストデータで返す仕様です。
実際に利用するには
https://apps.twitter.com/
からCreate New Appでアプリを登録してConsumer KeyやConsumer Secretを発行してもらう必要があります。

Webアプリの勉強がてらにツイッターAPIを使って悩んだことがあったのでその内容をまとめてみました。
特定のプラットフォームに限定されない話なのでソースコードはありません。

環境

・Windows8.1
・Visual Studio Community 2013
・CoreTweetライブラリーなど

検索APIでは複数の画像のURLが取得できない

検索APIはツイッターを検索するAPIです。
公式ドキュメントはこちら
https://dev.twitter.com/rest/reference/get/search/tweets

非サブスクリプションの開発者でも使えますが過去1週間以内の投稿しか検索できないなどの制限があります。
特に複数の画像を投稿されたツイートを検索しても、一つの画像のURLしか取得できない制限があります。
たとえば、次のツイートは二つの画像が投稿されています。

multiple pics pic.twitter.com/KLMUbWg2TF
— Mtk Fujiu.jp (@mtk_f) 2015, 5月 5

このツイートを検索APIで取得したJSONデータの画像に関する部分は次の通りです。(一部省略)

(略)
"media": [
    {
        "display_url": "pic.twitter.com/KLMUbWg2TF", 
        "expanded_url": "http://twitter.com/mtk_f/status/595380148402171904/photo/1", 
        "id": 595380147617857536, 
        "id_str": "595380147617857536", 
        "indices": [
            14, 
            36
        ], 
        "media_url": "http://pbs.twimg.com/media/CEM3Fv0VAAAH-z_.png", 
        "media_url_https": "https://pbs.twimg.com/media/CEM3Fv0VAAAH-z_.png", 
        "sizes": {
                (略)
        }, 
        "type": "photo", 
        "url": "http://t.co/KLMUbWg2TF"
    }
], 
(略)

最初の1件の画像URLしか取得していません。

全ての画像URLを取得するにはSearch以外のAPIを使う

検索APIだけは1件の画像しか取得できませんが、他のAPIを使えば全ての画像URLを取得できます。
statuses/show/:idというAPIは全ての画像URLが取得できました。
公式ドキュメントはこちら
https://dev.twitter.com/rest/reference/get/statuses/show/%3Aid
statuses/show/:idはステータスIDを指定してJSONデータを取得するAPIです。
検索APIで取得したステータスIDをstatuses/show/:idでJSONデータを取得すると次のようになります。

(略)
"media": [
    {
        "display_url": "pic.twitter.com/KLMUbWg2TF", 
        "expanded_url": "http://twitter.com/mtk_f/status/595380148402171904/photo/1", 
        "id": 595380147617857536, 
        "id_str": "595380147617857536", 
        "indices": [
            14, 
            36
        ], 
        "media_url": "http://pbs.twimg.com/media/CEM3Fv0VAAAH-z_.png", 
        "media_url_https": "https://pbs.twimg.com/media/CEM3Fv0VAAAH-z_.png", 
        "sizes": {
                (略)
        }, 
        "type": "photo", 
        "url": "http://t.co/KLMUbWg2TF"
    }, 
    {
        "display_url": "pic.twitter.com/KLMUbWg2TF", 
        "expanded_url": "http://twitter.com/mtk_f/status/595380148402171904/photo/1", 
        "id": 595380145705222144, 
        "id_str": "595380145705222144", 
        "indices": [
            14, 
            36
        ], 
        "media_url": "http://pbs.twimg.com/media/CEM3FosUgAA9iIi.png", 
        "media_url_https": "https://pbs.twimg.com/media/CEM3FosUgAA9iIi.png", 
        "sizes": {
                (略)
        }, 
        "type": "photo", 
        "url": "http://t.co/KLMUbWg2TF"
    }
]
(略)

無事に2枚の画像URLを取得することが出来ました。

検索APIだけ特別らしい

statuses/show/:id のほか statuses/user_timeline でも全ての画像URLが取得できました。
検索APIだけが特別なJSONを返すようです。
画像URL以外もおかしい値があるかもしれません。

2015年5月2日土曜日

[Unity3D] Unity5のプロジェクトをAndroid Studioにインポートする方法

How to import Unity projects into Android Studio
Unity5で作ったアプリケーションはAndroid用のapkファイルにビルドすることが出来ます。
また、Android Developer Tools用のプロジェクトにエクスポートすることもできます。
エクスポートしたプロジェクトをAndroid Studioにインポートすることもできたので、その手順をまとめてみました。

環境

・Windows 8.1
・Android Studio 1.1.0
・Unity 5.0.0f4

Unityでアプリを作る

Androidで動作させたいアプリを作ります。
特定のプラットフォームに依存しないようにAndroidでも動作するように作るのが前提です。

Unity5からAndroid Projectをエクスポートする

メニューの
File - Build Settings
でAndroidを選択してSwitch Platformボタンをクリックします。
Google Android ProjectをチェックしてExportボタンをクリックすると、Android用Projectに必要なファイル一式を出力するので保存場所を指定して出力してください。

Android Studioにインポートする

Android StudioのWelcome画面を起動します。
Welcome画面が起動しない場合はメニューの
File - Close project
で開いているプロジェクトを閉じてください。
Import projectでUnity5のプロジェクトをインポートします。

マニフェストを修正する

マニフェスト(manifests)のエラー箇所である
android:debuggable="false"
の部分を消します。

起動してみる

PCとAndroidスマートフォンをUSBケーブルで接続して、Android StudioのDebug appボタンをクリックしたら動作しました。
実行環境はエミュレーターではなく実機を推奨します。

Unityアプリをカスタマイズする

UnityPlayerActivityを継承したクラスを作れば独自の機能を追加できます。
たとえば、下のようなActivityを作ってマニフェストで起動用Activityとして宣言すればUnityアプリが起動した時にLogCatにログ出力する機能を追加できます。

package jp.fujiu.unity5;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends UnityPlayerActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.d(getClass().getName(), "Activityが起動しました");
    }
}

エラーが出た場合の対処方法

Android Studioのコンソールに
Error type 3 Error: Activity class {クラス名} does not exist
というエラーが出て起動しないことがありましたが、プロジェクトフォルダーのbuildフォルダーの中を全て消したら起動するようになりました。
Unity3.xとEclipse+ADTの頃はもっと手間がかかってトラブルがつきものでしたが、今の環境ではあっけにとられるほど簡単になりました。

注意事項

ゲームのイベントに合せるような処理は難しいですが、Activityで出来ることはだいたい出来ると思います。
たとえばゲーム画面にToastを表示したり、画像をオーバーレイ表示することも可能です。
ただし無料版Unityを使用する場合、起動時のUnityのスプラッシュスクリーンの上に別の画像をオーバーレイ表示させる行為はライセンス違反の可能性があるのでご注意ください。

※2016年2月11日、タイトルを修正しました。

2015年5月30日土曜日

[ASP.NET] 動的に追加したラベルやテキストボックスが消える現象の対策

環境

動的にラベルやテキストボックスを追加する

解決策

関連ブログ

2015年5月23日土曜日

[Unity3D] クエリちゃんの二重あご説という誤解を解く

環境

3次元CGが表示される仕組み

クエリちゃんの表情はモーフではなくテクスチャ

ユニティちゃん方式(モーフで表情をつける)のメリット

クエリちゃん方式(テクスチャで表情をつける)のメリット

クエリちゃんの手のパーツは3種類

クエリちゃんモデルのFBX

クエリちゃんについて詳しいプロ生の動画があります

関連ブログ

2015年5月16日土曜日

ツイッターのツイート履歴CSVを文字化けしないようにExcelに取り込む方法

環境

全ツイート履歴を要求するしCSVファイルをダウンロードする

Excelで開く前に文字エンコードをShift_JISに変換する

Shift_JISに変換しない場合は細工が必要

ファイル名の拡張子をtxtに変更する

行の途中の改行を削除する

Excelでテキストファイルの区切り文字と引用符を指定して開く

使い道は

関連ブログ

2015年5月9日土曜日

ツイッターAPIの検索で複数の画像URLが取得できない対策方法

環境

検索APIでは複数の画像のURLが取得できない

全ての画像URLを取得するにはSearch以外のAPIを使う

検索APIだけ特別らしい

関連ブログ

2015年5月2日土曜日

[Unity3D] Unity5のプロジェクトをAndroid Studioにインポートする方法

環境

Unityでアプリを作る

Unity5からAndroid Projectをエクスポートする

Android Studioにインポートする

マニフェストを修正する

起動してみる

Unityアプリをカスタマイズする

エラーが出た場合の対処方法

注意事項

関連ブログ