SQLの窓

2012年08月31日


【解説】アプリケーションバーのメニュー項目のクリック / Windows Phone(C#)

関連する記事

Windows Phone(C#) 基本テンプレートの解説






テンプレートには、コメントになっていますが、アプリケーションバーの定義が用意されているので、その定義を有効にすると画面右下に3つの点が表示されて、それをクリックすると上の画像のような表示になります。

その画面定義部分にカーソルを合わせると、その部分のプロパティが表示されるので、イベントタブを表示して『Click』をダブルクリックすると自動的にイベントコードが作成されます



MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Diagnostics;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
        }

        private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            Debug.WriteLine(((ApplicationBarMenuItem)sender).Text + " がクリックされました" );
        }
    }
}
Click された事を確認する為に、using System.Diagnostics を追加して、Debug.WriteLine でイベント元の ApplicationBarMenuItem のテキストを表示します。( キャストしてテキストを取得する為に using Microsoft.Phone.Shell を追加しています )

Debug.WriteLine の結果は、デバッグメニューのウインドウで『出力』を選択すると表示用のウインドウが開きます





別のページに移動するには、this.NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative)); というふうに書きます。
posted by lightbox at 2012-08-31 19:30 | Windows Phone | このブログの読者になる | 更新情報をチェックする

Windows Phone(C#) 基本テンプレートの解説



『Microsoft Visual Studio 2010 Express for Windows Phone』のプロジェクト作成で最初にある、処理そのものは実装されていないテンプレートです。
( ApplicationBar のコメントは外してあります )

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
    public partial class MainPage : PhoneApplicationPage
    {
        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
        }
    }
}
▲ 処理のない C# のソース

画面定義の解説

MainPage.xaml は画面の定義ですが、StaticResource という記述があり、事前に定義された値を読み込むようになっています。

既に定義されたリソースに対する参照を検索することによって、任意の XAML プロパティ属性の値を指定します。そのリソースに関する検索動作は、読み込み時検索に似ています。現在の XAML ページのマークアップとその他のアプリケーション ソースとから既に読み込まれているリソースを検索し、ランタイム オブジェクト内のプロパティ値としてそのリソース値を生成します。
実際の定義は、テーマの定義として『64-bit Operating Systems: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design』『32-bit Operating Systems: C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Design』といった場所にあります。( ThemeResources.xaml ) ■ Windows Phoneのテーマの概要Windows Phoneのテーマのリソース MainPage.xaml
<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    </Grid>
 
    <!--ApplicationBar の使用法を示すサンプル コード-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
Grid は、列と行で構成されている柔軟なグリッド領域を定義します。ここで、Grid.RowDefinitions は Grid のプロパティであり、 1 行目の Height の値は Auto に設定されています。この設定では、1行目の行内のコンテンツのサイズに基づいて、高さが均等に配分されます。そして、もう一つの定義で行は2行の定義である事を示し、2行目は1行目の高さの残りである事を示します。
( 3行の残り2行高さ比率分配の例 )

実際のコンテンツとして、StackPanelGrid が定義されていますが、この Grid は空で何もありません。StackPanel は、縦方向や横方向に子要素を配置します。Grid.Row は、一番外側の Grid がどの行の子コンテンツを表示するかを示す値をを設定しています。

Margin プロパティは一般的なものですが、CSS とは位置の意味が違うので注意です



アプリケーションバーの右上の3つの点をタップ(クリック)すると、メニューが表示されます

※ キャプチャは以下のようにして行います( 拡大率100% )



関連する Microsoft ドキュメント

アイコン ボタン画像の設置方法
Windows Phone のアプリケーション バー

関連する記事

アプリケーションバーのメニュー項目のクリック / Windows Phone(C#)
黒子のバスケが始まるまでに Windows Phone の開発環境を作る



タグ:Windows Phone C#
posted by lightbox at 2012-08-31 13:52 | Windows Phone | このブログの読者になる | 更新情報をチェックする

2012年08月26日


Google MAP API V3 でのストリートビューで、「ビーナスの誕生」を表示


カメラの事は詳しく無いですが、魚眼レンズ(?) のように本来フラットな壁が曲がって見えているので、引いて見るとより多くの情報が表示できるようになっていました。書き方は特に前と変わっておらず、とにかく API キーが無くていいので助かります。

いろいろ変遷あるみたいです。記録の為に前の文章を残しておきます。魚眼レンズのようになるのは、User agent がスマホの時と、Firefoxの時だけです(Google Chrome でも User agent を上書きするとそうなります)。コードは今時の為に『スマホ対応』をする事が必要かもしれません。

panoramaOptions で、ロード時に「表示状態」にしているので、Google のサンプルにあるように setVisible というメソッドを使っていません。ですから、myPano の変数定義も本当は必要ありません。

このオプションは、日本語ドキュメントには書かれていません。Google の リファレンスって昔からこうなので、必ず英語版を確認する必要があります。
( これも記録です。現状では日本語化されていません )

※ onload のイベント登録は、API V3 の中にあるものです(google.maps.MapsEventListener object)。

以下はスマホ対応として、document.write を使って、IFRAME 内に書き込んでいます。
<script type="text/javascript">
(function() {
	var str="";
	str+="<iframe \n";
	str+="	id=\"frame220485139\" \n";
	str+="	class=\"gmap\" \n";
	str+="	frameborder=\"0\" \n";
	str+="	scrolling=\"no\" \n";
	str+="	width=\"600\" \n";
	str+="	height=\"450\" \n";
	str+="	marginwidth=\"0\" \n";
	str+="	marginheight=\"0\" \n";
	str+="></iframe> \n";
	str+=" ";
	document.write(str);

	str="";
	str+="<div id=\"frame_div\" style=\"width: 100%; height: 100%\"></div> \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="	document.write(\"<\"+\"script type=\\\"text/javascript\\\" src=\\\"http://maps.googleapis.com/maps/api/js?sensor=false\\\"></\"+\"script>\"); \n";
	str+="</"+"script>   \n";
	str+="<"+"script type=\"text/javascript\">  \n";
	str+="(function() { \n";
	str+="google.maps.event.addDomListener(window, 'load', function () { \n";
	str+="	var bryantPark = new google.maps.LatLng(43.768333,11.255963); \n";
	str+="	var panoramaOptions = { \n";
	str+="		position:bryantPark, \n";
	str+="		addressControl: true, \n";
	str+="		addressControlOptions: { \n";
	str+="			position: google.maps.ControlPosition.RIGHT_BOTTOM \n";
	str+="		}, \n";
	str+="		pov: { \n";
	str+="			heading: 101.62, \n";
	str+="			pitch: -0.75, \n";
	str+="			zoom:1 \n";
	str+="		}, \n";
	str+="		visible: true \n";
	str+="	}; \n";
	str+=" \n";
	str+="	var targetDiv = document.getElementById(\"frame_div\"); \n";
	str+="	var myPano = new google.maps.StreetViewPanorama(targetDiv, panoramaOptions); \n";
	str+="}); \n";
	str+="})(); \n";
	str+="</"+"script> \n";
	document.getElementById("frame220485139").contentWindow.document.write(str);
	document.getElementById("frame220485139").contentWindow.document.close();

})();
</script>

▼ iPhone での表示


▼ Android での表示


必ず必要なのでは無く、少なくともこの Seesaa で表示されないので IFRAME を使用しています。Google Chrome の User agent 変更オプションでも表示されないので、複雑な環境では起こる可能性が高いと考えます。但し、今後はどうなるか解らないですし、iPad だとふつうに表示するようです。(IFRAME + document.write で処理すると、IE では表示されません)


posted by lightbox at 2012-08-26 20:48 | Google MAP API V3 | このブログの読者になる | 更新情報をチェックする

2012年08月22日


Perlで、『defined(%hash) is deprecated at jcode.pl line 684』の対処

WEB 上に正解をみつけられなかったので、実際のコードをテストして検証しましたが、以下のコードで良いと思います。( 二回呼び出して二回目に初期化が処理されないのを確認しました )

このメッセージは『非推奨』を意味しますが、それらの内容や対処方法はこちらを参考にしています
defined(%hash) is deprecated
(D deprecated) defined() は未定義の スカラ 値を調べるので、ハッシュに 使っても普通は無意味です。 ハッシュが空かどうかを調べたい場合は、例えば単に if (%hash) { # not empty } としてください。
sub z2h_euc {
    local(*s, $n) = @_;
    if ( !%z2h_euc ) {
        &init_z2h_euc;
    }
#    &init_z2h_euc unless defined %z2h_euc;
    $s =~ s/($re_euc_c|$re_euc_kana)/
	$z2h_euc{$1} ? ($n++, $z2h_euc{$1}) : $1
    /geo;
    $n;
}

sub z2h_sjis {
    local(*s, $n) = @_;
    if ( !%z2h_sjis ) {
        &init_z2h_sjis;
    }
#    &init_z2h_sjis unless defined %z2h_sjis;
    $s =~ s/($re_sjis_c)/$z2h_sjis{$1} ? ($n++, $z2h_sjis{$1}) : $1/geo;
    $n;
}

WEB 上に % を $ に置き換えているコードを見かけましたが、それでは判断されずに毎回初期化が実行されます。但し、それでも実害は無いと思われます。


タグ:トラブル
posted by lightbox at 2012-08-22 10:52 | 記録 | このブログの読者になる | 更新情報をチェックする

2012年08月18日


長年自分用に使っている、SyntaxHighlighter 2.0.296 用 貼り付けコード作成

ブラウザが、XSS 対応でプレビューが一般的には動かなくなっていたのを動くようにしました。『単独記事で動作するようにする』にチェックすれば、とりあえずブログの記事中に書き込むだけで利用できると思います。

こちらは、テスト用の忍者ブログですが、正しく表示されています

既に、他のバージョンの SyntaxHighlighter がヘッダ等で読み込まれている場合は動作はどうなるかは解りません。

SyntaxHighlighter 2.0.296 用 貼り付けコード作成

オリジナルは、3.0.83 までありますが、そもそも使い方の解りにくいページで、2.0.296 で使用可能なクリップボードへのコピーや、オリジナルソースのウインドウ表示もどうなっているか良く解りません。

現状、iPhone や アンドロイドでも正しく表示されているので、使い込む価値はあると思っています。







posted by lightbox at 2012-08-18 22:31 | WEBサービス | このブログの読者になる | 更新情報をチェックする

2012年08月17日


Google Chromeで iPhone( Android )を正しく表示する方法

F12で開発者(デベロッパー)ツールを開く



右下隅にある歯車アイコンを開くと、3つのタブを持つ黒いオプションページが表示されます

User agent 設定タブ



ここで、agent を設定する事によって、サーバーへとりあえずこちらがその OS である事を通知できるようになりますが、デバイスのサイズはこちらで設定します。また、縦横の切り替えはボタンで行います

表示時にデバッグの為に停止する場合

▼ ブレイクポイントを無効化


デバッグをできるかぎり容易にする為に、document.write 等の特殊な処理部分で停止するようになっているようなので、自動的に設置されたブレイクポイントを一時的に無効にして処理を全て実行させます。

▼ 全て実行


▼ 実行完了


ちなみに、デバッグのタブ名が Sources になったのは最近です。agent タブになったのも最近で、Chrome が 21 になってからだと思います。それまでは、agent の処理もなんだかちょっと変でしたが、今はとても解りやすくなりました。

とにかく、スマホサイズでの WEB ページの確認が容易です。今はまだあまりする事も無いでしょうが、今後はパッド専用のWEB表示フォーマットを考える必要も出て来るのでこれは便利だと思います。





posted by lightbox at 2012-08-17 12:59 | 記録 | このブログの読者になる | 更新情報をチェックする

2012年08月11日


jQueryを使って livedoor の ical 天気ページから iPhone 用コンボボックスを作成する

iPhone のカレンダーに livedoorの 週間天気予報を『照会』させようとすると、アカウントの追加の『その他』で、ical の サーバ部分を入力する必要があるのですが、当然スマホですから入力が面倒なので、スマホで表示してコピーしてペーストすると楽ができます。その為のコンボボックスと入力フィールドを作成する為に、オリジナルページの TABLE 要素全体を使って jQuery で解析してビルドしています

▼ 作成するコードは以下のようになります。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>

<script type="text/javascript">
$(function(){
	var sl = document.createElement("select");
	$("#target").get(0).appendChild(sl);
	$("td").each(function(index,me){
		// 場所を記述している日本語は10文字以内(実際は4文字以内)
		if ( $(me).text().length < 10 ) {
			var opt = document.createElement("option");
			$(opt).text($(me).text());
			$(opt).attr("value",($("a", $(me).next()).get(0).href).replace("toolbox.winofsql.jp","weather.livedoor.com"));
			sl.appendChild(opt);
		}
	});
	$(test).val($(sl).val());
	$(sl).change(function(){
		$(test).val($(this).val());
	});
	$("#target_txt").val($("#target").html());
});
</script>
<div id="target"></div>
<textarea id="target_txt"></textarea>
<br /><input type="text" id="test" style='width:400px;'/>

まず、jQuery に関しては使いたいだけなので、Google の API を利用して一時的に使えるにしています。google.load("jquery", "1"); では、1.7.1 がロードされます。

対象の TABLE はごくふつうのテーブルですが、都合のいい事に必要なテキストは必ず TD が使われているので、$("td") で全ての TD を取得します。

TD はタイトルと、URL 用とがあって、必ず並んでいます。テキストの文字列がはっきり少ないので( 実際は4文字以内 )、$(me).text().length < 10 で対象をまず絞ります( $(me) は、$(this) でも可 )

次にその隣が欲しいわけですから、$(me).next() を対象としてセレクタを再度 "a" で絞って取得し、icalは、先頭の a だと解っているので get(0) で先頭要素を取得して href 属性を手に入れます。

同時に、テキストはすでに $(me).text() で手に入っているので、これらを利用して新しい select を作成してその HTML を TEXTAREA にセットして後で使えるようにします。

ただ、このままではもったいないので、その場で動作確認ができるようにイベントを追加しています。

※ このコードで作った HTML を以下のページで使っています

ip_ical.htm




posted by lightbox at 2012-08-11 14:39 | jQuery | このブログの読者になる | 更新情報をチェックする

2012年08月05日


スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

最近まで、YouTube で埋め込みコードを取得すると、OBJECT タグで埋め込まれていたようなのですが、今は IFRAME で取得できるようなので、この処理が可能です。

通常のブログですと、幅640で埋め込んでも特に問題無いですが、スマホで表示するとはみ出てしまいます。その対応処理です。

.text iframe とありますが、Seesaa のブログでは本文の class が text なので、その中の iframe に対して処理を行っています
<script type="text/javascript">
(function(){
	var str = "";
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str+="<style type=\"text/css\"> \n";
		str+=".text iframe { \n";
		str+="	width:290px!important; \n";
		str+="	height:auto!important; \n";
		str+="} \n";
		str+="</style> ";
		document.write(str);
	}
})();
</script>
<iframe width="640" height="480" src="http://www.youtube.com/embed/uxBFiU2N65c" frameborder="0" allowfullscreen></iframe>

iPhone



Android





posted by lightbox at 2012-08-05 01:18 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり