投稿日: 2012-09-26 2012-09-26

XAML を分割して記述する方法

WPF で Window をレイアウトしていると、少し複雑な UI だと XAML が長くなりすぎて非常に見難くなります。これを回避するために、XAML を分割して記述し、インポートするような方法を検索してみたのですが、リソースに定義したりだとか、なんとなく遠まわしに思える方法ばかりしか見つけることが出来ませんでした。

それで結局、良く見ると他のファイルで既に自分でやっていたことに気付いたのですが、すっかり忘れていたので、改めてここにメモを残しておきます。･･･たぶん、ですが、これが本当は基本なので、基本過ぎて、検索にも出てこないのかなーと思ったりもいたします。

まず、読み込まれる側の xaml を書きます。TabContent1.xaml という名前で、普通に UserControl で作成します。

<UserControl x:Class="MyProject.Views.TabContent1"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
		xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
		mc:Ignorable="d" 
		d:DesignHeight="300" d:DesignWidth="600">
	<Grid>
		<TextBox Text="" x:Name="MyTextBox1" />
	</Grid>
</UserControl>

<UserControl x:Class="MyProject.Views.TabContent1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="600">

<Grid>

</Grid>

</UserControl>

次に、読み込む側の xaml です。

<Window x:Class="MyProject.Views.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:v="clr-namespace:MyProject.Views">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="250*" />
			<RowDefinition Height="Auto" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition />
		</Grid.ColumnDefinitions>
		<StackPanel>
			<!-- 親Viewの要素 -->
		</StackPanel>
		<TabControl>
			<TabItem Header="{Binding TabContent1LabelText}">
				<v:TabContent1 x:Name="MyTabContent1"/>
			</TabItem>
			<TabItem Header="{Binding TabContent2LabelText}">
				<v:TabContent2 x:Name="MyTabContent2"/>
			</TabItem>
		</TabControl>
	</Grid>
</Window>

<Window x:Class="MyProject.Views.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:v="clr-namespace:MyProject.Views">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</StackPanel>

<v:TabContent1 x:Name="MyTabContent1"/>

</TabItem>

<v:TabContent2 x:Name="MyTabContent2"/>

</TabItem>

</TabControl>

</Grid>

</Window>

↑で強調した３行に注目です。

強調行の１つ目は、サブビューとなるクラス群が収まった場所の名前空間を、接頭辞 v として定義しています。

強調行の残り２つは、作成した v 接頭辞を付けて、xaml のクラス名を呼び出しています。x:Name は、プログラムからアクセスするための識別子です。

この状態で、MainWindow.xaml.cs のコードビハインドから子ビューの要素にアクセスするには次のように書けます。

this.MyTabContent1.MyTextBox1.Text = " HOGEHOGE";

1	this.MyTabContent1.MyTextBox1.Text = " HOGEHOGE";

以上、とても簡単ですが、いざ検索すると情報が出てこなかったので、メモを残しておきます。

投稿日: 2012-08-24 2012-10-02

Webデザインとポインティングデバイスの精度

最近、いわゆる普通の Web サイトを作る時にもレスポンシブルであることを考えてしまいます。…うん、いや、もう少し正確に表現すると「スマートフォンやタブレット、またPC環境などの多様なデバイスにおけるUIの利便性」について考えてしまいます。

個人的には、レスポンシブルなWebデザインは万能では無いと思っていますし、特に低コストなサイトでの「ワリとしっかりとした RWD」はむしろ不要と考えています。「PCスタイルのサイトで十分だよね」という感じ。

ただ、これだけスマートフォンが急速に普及した現在、それでも検討が必要なのは、「スマートフォン環境でもストレス無く操作できる UI」だとも思っています。分かりやすい例を言うと、縦に並んだテキストリンクが line-height: 1.4em とかだと、スマートフォンなどのタッチデバイスで正しくリンクをクリックするのはちょっとしたコツが居るわけですね。

これは「画面の広さ」ではなく、「ポインティングデバイスの精度」が問題なわけです。

今のいわゆるレスポンシブルな Web デザインは、主に画面の広さを基準としたものになっていると思っていますが、Windows 8 などが普及して、PC画面でもタッチインターフェースが一般化した時にはどうなんだろうな、と思います。

それで、ポインティングデバイスの精度で css を切り替えたりできないかな？と考えて少し検索してみたら、Javascrip ではありますが、次のコード片を見つけました。

isTouch : (function(){
  return (document.ontouchstart !== undefined);
})()

isTouch : (function(){

return (document.ontouchstart !== undefined);

})()

でも、これは厳密にはポインティングデバイスの精度（例えばペンタブレットだと？）でも無いですし、そもそもタッチデバイスかどうかの判定には使えなさそうにも思います。なかなか難しそうです。

どなたか、良い方法やアイデアをご存知でしたら教えてください！

§

ここまで書いて来てアレなのですが、仮にタッチデバイスで操作されているかどうかを判定できたとしても、今度はそれをデザインにどのように動的にフィードバックするのか？というのは、その次にある大きな課題です。上に挙げた例への回答として、単純に line-height:2.5em; としたとして、それがデザイン的に適当なのかというと、それはまた別問題です。

ただ、こういった手法が在ればそれを使えることは Web 制作上の一つの道具になりえますし、レスポンシブルでない Web サイトを多様なデバイスからのアクセスに対して適応させる一つのアプローチになるのではないかな、と思ったりしています。

投稿日: 2012-08-22 2012-10-25

PHPFog と WordPress とファイル管理

[追記] 下記の方法より良い方法がありましたので「PHPFog/AppFog と WordPress とファイル管理」にて、紹介しています。

WordPress はその管理画面からサイト自体に様々なカスタマイズが行えることが特徴であり、強みです。それらのアップデートにおいては、主に wp-contents 内に必要なファイルがダウンロードされて追加されます。PHP Fog や DotCloud などの環境上に WordPress をデプロイしてもこれは同様なのですが、実はちょっと困ったことがあります。

問題

PHP Fog では、初期にデプロイされた後、WordPress の管理画面で行った変更については、git clone でも pull でも取得できないのです（わたしが知る限りなので、どなたか良い方法を知ってたら教えてください）。つまり、WordPress の管理画面から行った変更は、Git の管理下に無い、ということなのでしょうね。まあ、当たり前と言えば、当たり前なのですが、それを PHP Fog 上の master に commit する手段を、私はとうとう見つけることができませんでした。

解決策

管理画面からの変更は git clone でも pull でも取得できないのであれば、別の方法で取得するしかありません。とてもスマートとは言い難いのですが、私は navphp というファイルエクスプローラをサーバー上に配置することで解決しました。手順は至って簡単でした。

navphp の設置方法

navphp をダウンロード
PHP Fog から git clone したリポジトリのルートに、navphp の zip を展開して配置
navphp の、config.php を開き、$user と $passwd を自分用に設定

navphp でファイルを取得し、ローカルの WordPress データを最新にする

navphp の管理画面にログインする。
ファイルの一覧が表示されるので、WordPress 上の必要なリソースをダウンロードする
- ダウンロードは、ファイル名/フォルダ名部分をクリックする
- フォルダは zip されてダウンロードされるので、ダウンロード後に zip を解凍する
ダウンロードしたファイルで、ローカルのリポジトリを上書きする

以上の手順で、何か管理画面で変更を行った際には、手元のデータを最新にして、関連した変更をローカルリポジトリで行っていくことができます。例えば、管理画面でテーマをインストールし、その子テーマを作りたいときには、手元に親テーマのデータを持ってないと困ると思いまし、いずれにせよ、手元のリポジトリが最新で無いというのは、なんというか不安なものですね。

なお、この方法は dotCloud などの同じような課題のある PaaS 環境でも同じようにできる筈です。

投稿日: 2012-08-19 2012-09-26

PHP Fog の WordPress の日本語化

WordPress の検証には PHP Fog さんのサービスを利用させて頂いています。簡単に扱えて、WordPress セットアップもボタンを押すだけの２ステップ程度。かつ「無料」です。ボタン一つでサイトを破棄して、そしてまた簡単に新しくサイトを作ることも出来ます。検証用にはうってつけです。

その PHP Fog でセットアップした WordPress ですが、困った事に英語環境になっています。しばらくは気にせず使っていましたが、勉強会などのスライドに載せるスクリーンキャプチャが英語版の画面なのは、なんと無く切ない…。そこで、日本語化をやってみました。

手順は、Gitを使っている方だったら、非常に簡単で、以下の通りです。環境は WordPress 3.4.1です。

1. PHP Fog の App Console から、Git で clone する URL を拾ってくる。↓写真の赤枠のところです。

2. ローカルのファイルを置きたい場所に移動して、git clone でローカルにリポジトリを作ります。

$ git clone {YourUrl}

1	$ git clone {YourUrl}

3. ローカルリポジトリのディレクトリがアプリケーション名で作成されるので、その中に移動します。移動した先がそのままアプリケーションのルートディレクトリで、また WordPress のファイルも配置されています。

$ cd {YourAppName}

1	$ cd {YourAppName}

4. wp-config.php を開いて、WPLANG の定数定義を ja に変更します。

$ vim wp-config.php

1	$ vim wp-config.php

define('WPLANG', ''); //変更前
　　↓
define('WPLANG', 'ja');  //変更後

define('WPLANG', ''); //変更前

　　↓

define('WPLANG', 'ja'); //変更後

5. 次に、日本語のリソースファイルをダウンロードします。wp-content の中に languages フォルダを作成して、その中へ移動します。

$ cd wp-content
$ mkdir languages
$ cd languages

$ cd wp-content

$ mkdir languages

$ cd languages

6. WordPress の日本語リソースファイルを、WordPress の ja リポジトリから落としてきます。ちなみに、私が確認したときは、3.4.x 用のリソースが見当たらなかったので、とりあえず 3.3 用を使いました。

$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.2/messages/ja.mo
$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.3/messages/ms-ja.mo
$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.2/messages/continents-cities-ja.mo

$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.2/messages/ja.mo

$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.3/messages/ms-ja.mo

$ curl -O http://svn.automattic.com/wordpress-i18n/ja/branches/3.2/messages/continents-cities-ja.mo

7. アプリケーションのルートディレクトリに上って、ファイルの追加と変更を Git にコミットし、最後に push します。

$ cd ../../
$ git add .
$ git commit -m "ja version"
$ git push

$ cd ../../

$ git add .

$ git commit -m "ja version"

$ git push

以上のような流れです。ネット上で「上手く出来ない」的な記事も見られますが、とりあえず私は問題無かったですね。いくつかの参照URLでは、落としてくる日本語リソースのファイルが違ってたりしているので、そのせいかも知れません。私はとりあえず、あったものをみんなダウンロードして入れました。

投稿日: 2012-07-01

WordPress のマジッククオート

WordPress でプラグインを書こうとしたら、$_POST とか $_GET とか使うことになると思います。

ところが、これらの外部入力は無条件に magic quotes されています。
しかも、WordPress によって。PHP 関係なしで。

また、プレーンな値を直接取得する方法も無いようです。
で、プレーンな入力値が必要な時は、stripslashes です。

ちょっとびっくりしましたが、これも WordPress の流儀。
WordPress 始めたばっかりのプログラマ側の人はびっくりするかも知れないと思ってのメモでした。

詳細

最初、まさか php がマジッククオート ON なのか？と思ったりして php.ini とか見たり、.htaccess 見たりしてけれど、magic qoutes なんてされてません。もちろん、get_magic_quotes_gpc() で確認しても、大丈夫、ちゃんとオフ。

なぜー？　なんでー？！ (？_？)

まさかと思いつつ、WordPress のコードを彷徨ったら、load.php の中に次の関数を見つけました。

function wp_magic_quotes() {
	// If already slashed, strip.
	if ( get_magic_quotes_gpc() ) {
		$_GET    = stripslashes_deep( $_GET    );
		$_POST   = stripslashes_deep( $_POST   );
		$_COOKIE = stripslashes_deep( $_COOKIE );
	}

	// Escape with wpdb.
	$_GET    = add_magic_quotes( $_GET    );
	$_POST   = add_magic_quotes( $_POST   );
	$_COOKIE = add_magic_quotes( $_COOKIE );
	$_SERVER = add_magic_quotes( $_SERVER );

	// Force REQUEST to be GET + POST.
	$_REQUEST = array_merge( $_GET, $_POST );
}

function wp_magic_quotes() {

// If already slashed, strip.

if ( get_magic_quotes_gpc() ) {

$_GET = stripslashes_deep( $_GET );

$_POST = stripslashes_deep( $_POST );

$_COOKIE = stripslashes_deep( $_COOKIE );

}

// Escape with wpdb.

$_GET = add_magic_quotes( $_GET );

$_POST = add_magic_quotes( $_POST );

$_COOKIE = add_magic_quotes( $_COOKIE );

$_SERVER = add_magic_quotes( $_SERVER );

// Force REQUEST to be GET + POST.

$_REQUEST = array_merge( $_GET, $_POST );

}

これはつまり…、PHP の設定に関わらず、オレオレマジッククォート適用しちゃうぞって事ですね。

これは WordPress の流儀のようです。

では、プレーンな値が欲しい時はどうするのか？
これが調べてもそれらしい情報が出てこなかったのですが、Twitter で @horike37 さんがビシッと教えてくれました。

自動でシングルコートつけてきよるのでstripslashesするしかない！

とのこと。

潔いですね。というか、html escape がデフォルトのテンプレートエンジンと同じじゃないか、合理的じゃないか、ということで、納得しておきます！

参考

いちおう自分でも見つけた情報。みんな最初は戸惑うようです。
http://wordpress.stackexchange.com/questions/21693/wordpress-and-magic-quotes