ＳＱＬの窓
<< 2012年04月 | TOP | 2012年06月 >>
<< 1 2 3 -

2012年05月05日


Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ



画面を切り替える際に、現実には default.html に DIV のウインドウを作成して置き換え続けて画面が切り替わります。置き換え先の HTML に JavaScript を配置して jQuery の $(function()) を実行しても最初しかロードされないので、default.htmlに全てを見渡せるスクリプトを書く必要があります。

ここでは、navigated イベントに集中して記述しています。

default.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>Application2</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.19.custom.css" />
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.19.custom.min.js"></script>

    <!-- Application2 references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>


</head>
<body>
    <div id="contentHost"></div>
    <div
        id="appbar"
        data-win-control="WinJS.UI.AppBar"
        aria-label="Command Bar"
        data-win-options="{
        commands:[
        {id:'home', label:'メニュー', icon:'&#xE10F;', section: 'global', onclick: R101.navigateHome},
        {id:'play', label:'ゲーム', icon:'&#xE102;', section: 'global', onclick: R101.navigateGame},
        {id:'rules', label:'ルール', icon:'&#xE104;', section: 'global', onclick: R101.navigateRules},
        {id:'scores', label:'スコア', icon:'&#xE113;', section: 'global', onclick: R101.navigateScores},
        {id:'credits', label:'クレジット', icon:'&#xE10C;', section: 'global', onclick: R101.navigateCredits}
    ]}"></div>

</body>
</html>

default.js

▼ JavaScript のコード
続きを読む
posted by lightbox at 2012-05-05 02:27 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

iPhone の Safari を縦横にした時に発生する deviceorientation イベントと、その際に変更されている window.orientation プロパティ

▼ 0 はポートレイト、90 と -90 はランドスケープです。


とくに特別な事も無く iPhone なら動作するはずです。
( Available in iOS 4.2 and later )

event のプロパティとしては、alpha、beta、gamma とありますが、ここでは必要無いです。

<input type="text" id="device_orientation" />
</pre>
<script type="text/javascript">
window.addEventListener("deviceorientation", function(event){
	document.getElementById("device_orientation").value = window.orientation||"0";
}, false );
</script>


これを使って、-webkit-text-size-adjust の拡大率をコントロールしようかと思っています
posted by lightbox at 2012-05-05 00:57 | 記録 | このブログの読者になる | 更新情報をチェックする

2012年05月04日


おくればせながら、スマートフォン(検証はiPhone)に対応しました

通常 PC の表示をそのままに、Seesaa のスマートフォンページと、スマートフォンからPC ページを表示した時に、実際に見やすいように最適化しました。その為、スマートフォンから見た場合、PC ページでも右サイドは表示されません。横向けで見ると無理なく文字が見えるものと思われます。

右端に余裕があるのは、AssistiveTouch 用で、この余裕の部分を使っていずれ自前のコントロールも作ろうかと。





スマートフォンページの場合は、画像を幅 290px に変更して表示するようにしました。また、スマートフォンページでも SyntaxHighlighter が表示できるようにしています。





( Android はまだチェックしていません )

当ブログでは、SyntaxHighlighter を使っている事もあり、PRE を多用している為、改行されずにはみ出る事がスマートフォンで見られましたが、いずれにせよ以下のコードで対応できるようです。

pre {
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
}


PC 側には以下のようなコードを使用しています


<script type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str="";
		str+="<style type=\"text/css\"> \n";
		str+=" \n";
		str+=".iphide { \n";
		str+="	display:none; \n";
		str+="} \n";
		str+="#links { \n";
		str+="	display:none; \n";
		str+="} \n";
		str+="#container { \n";
		str+="	width:940px!important; \n";
		str+="} \n";
		str+="#content { \n";
		str+="	width:930px!important; \n";
		str+="} \n";
		str+=".text pre { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=".text div { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=" \n";
		str+="</style> ";
		document.write(str);
	}

</script>


スマートフォン側はには以下のようなコードを使用しています


<script type="text/javascript">

	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str="";
		str+="<style type=\"text/css\"> \n";
		str+=" \n";
		str+=".iphone { \n";
		str+="	width:290px!important; \n";
		str+="} \n";
		str+=".text img { \n";
		str+="	width:290px!important; \n";
		str+="} \n";
		str+=".text pre { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=".text div { \n";
		str+="	width:auto!important; \n";
		str+="} \n";
		str+=" \n";
		str+="</style> ";
		document.write(str);
	}

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

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

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

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

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


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

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


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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>


この記述は、以下の場所で使用します



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり