DiaryException このページをアンテナに追加 RSSフィード

2010-10-07(木)

[]jquery-presentationで発表中にフォントサイズを変える

S5Slidyなど、プレゼンテーションスライドを(HTML/CSS/JS記述して)Webブラウザ上で表示するソフトウェアが幾つかあるが、最近Google Code Archive - Long-term storage for Google Code Project Hosting.を使っている。

プロジェクタ(外部ディスプレイ)でWebブラウザ上のプレゼンテーションスライドをフルスクリーン表示すると、アスペクト比の違いか、解像度の違いか、PCで表示した状態と異なる状態でスクリーン上に投影されることがある。よくある。

これらのソフトウェアは文字サイズが決め打ちか、windowサイズを読んで適当な文字サイズに設定しており、「文字が画面からはみ出ないように」などということは考慮されていない。従って、画面(スクリーン)に適した文字サイズというのは人が確認し設定する必要がある。ていうか、プロプレゼンタなら事前に確認してスライドがちゃんと写るか確認するべきであり、本番でこんなことで困っているようでは素人

兎に角、本番(発表)中にフォントサイズを変えられるようにした。[b]キィでフォントサイズを大きく(bigger)、[s]キィでフォントサイズを小さく(smaller)する。倍率は60%から120%の間で、5%刻みで変えられる。

//////////////////////////////////////////////////////////
// Change the font-size for jquery-presentation         //
//     : http://code.google.com/p/jquery-presentation/  //
//////////////////////////////////////////////////////////

var nowFontsize = 100;  // 100%
var minFontsize = 60;   // 60%
var maxFontsize = 120;  // 120%
var stepFontSize = 5;

$(document).ready(
    function(){
        $.keyDownObserver.observe(
            {
                key: 66,  // b
                fn: $.proxy(bigger, $.presentation.slideManager)
            }
        );
        $.keyDownObserver.observe(
            {
                key: 83,  // s
                fn: $.proxy(smaller, $.presentation.slideManager)
            }
        );
    }
);

function bigger(){
    if(nowFontsize < maxFontsize) {
        nowFontsize += stepFontSize;
        $("body").css("font-size", nowFontsize + "%");
    }
}

function smaller() {
    if(nowFontsize > minFontsize) {
        nowFontsize -= stepFontSize;
        $("body").css("font-size", nowFontsize + "%");
    }
}

jquery.presentation.jsの中身を見て、適当にそれっぽいところを抜き出して、それっぽく追加しただけ。

これを適当jsファイル(changefontsize.js)に書いて、htmlファイル内でjquery.presentation.jsの後に読み込ませる。

<link rel="stylesheet" type="text/css" href="css/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/zoomooz.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.presentation.js"></script>
<script type="text/javascript" src="js/changefontsize.js"></script> 
<script type="text/javascript" src="js/jquery.zoomooz.js"></script>
<script type="text/javascript" src="js/sylvester.js"></script>

jquery-presentationに必須ではないが、画像や特定要素を恰好良く見せるためにZoomooz.jsプレゼンテーションスライドの中で使っている。

2010-03-18(木) のち雨、だと。

[][]Google Chrome拡張機能 radiko playerを公開しました

f:id:LaclefYoshi:20100318092507p:image

Google Chromeのタブでradiko.jpを開くことなく、バックグラウンドradiko.jp再生し続けます。

東京大阪radiko.jp可聴域に対応しています(ただし、東京地域のみテスト済み)。

--

21:50追記。インタフェースを見栄え良くした。

f:id:LaclefYoshi:20100318214659p:image

f:id:LaclefYoshi:20100318214700p:image

2009-12-29(火) 冬休み。自主的な。

[][]555 Calculator

通称555と呼ばれるICは、繋ぐ抵抗とコンデンサの組み合わせだけで、簡単に任意の時間のタイマを作ることが出来るので便利だ。温度変化に弱いとか弱点はあるが、まあ趣味目的なら全く問題無い。安いし。

google:555 Calculator で検索して分かるように、JavaScriptで555計算機を実装したものは多いが、UIがiPod touchのSafariに最適化されていれば、もっと使い易くなると感じた。

そこで、jQueryでロジック部のあれこれ、UIはプラグインのjQTouchを使って、iPhone用Webアプリ版555 Calculatorを作った。


ページが見つかりませんでした – 相田研究室 (iPhone SafariかGoogle Chromeとかで見ると見栄えが良い)


f:id:LaclefYoshi:20091229234020j:image

単純なUIなのですぐ使えるだろう。CとRa/Rbの値を選択すると、タイマ値などが自動で更新される。有効桁など頑張ろうかと思ったが、結構適当になっている。

コンデンサ容量や抵抗値のリストをどうやって作ろうか10分程迷った結果、秋月のWebサイトの、抵抗とコンデンサのページから、実際に売っているものの値を取ってきた。ページファイルからスクレイピング。つまり秋月で買えないコンデンサや抵抗の値はサポートしていない。

2006-04-18(火) 20度超えたら暖かいよなあ。

[][]Webブラウザプレゼン

PowerPointがインストールされていないパソコンがあっても、Webブラウザがインストールされていないパソコンはそれ程多くないだろう。

Webでそのまま公開出来るのが良い。

HTMLファイル

<meta http-equiv="content-type" content="text/html; charset=euc-jp">

を念のため追加する事を忘れないように。

pretty.css

.slide ol {margin-left: 5%; margin-right: 7%; list-style: decimal;}
.slide ol ol {line-height: 1;}
.slide ol ol li {margin: .2em; font-size: 85%; list-style: lower-alpha;}

を追加。

2005-03-03(木) 明日は雪ですか。

[][]軽くAjaxまとめ

Ajax
Asynchronous JavaScript+XML
Ajaxというアプローチ - DiaryException
Ajaxシステムを考える - DiaryException

JavaScriptのXMLHttpRequestはブラウザによって判別が必要。

参考:Using the XML HTTP Request object

var xmlhttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@else
 xmlhttp=false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
 try {
  xmlhttp = new XMLHttpRequest();
 } catch (e) {
  xmlhttp = false;
 }
}

で、responseText(responseXML)を利用して、文章を取得する。

参考:Safari - Apple Developer

function loadXMLDoc(url) {
 if(!xmlhttp) return;
 xmlhttp.open("GET",url,true);
 xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
   if (xmlhttp.status == 200) {
    getData();
   }else {
    alert("There was a problem retrieving the XML data:\n"+xmlhttp.statusText);
   }
  }
 }
 xmlhttp.send(null);
}
function getData() {
 var rexml = xmlhttp.responseText;
}

後は、innerHTMLなりで表示に使用する。

Mozilla系統、つまりXULのXMLHttpRequestは絶対URLをopenしない。セキュリティのためか。

で、対策として、CGIにGETでURLを送ってCGIに取ってこさせる。代理サーバみたいなもの。

参考:トップページ | ASH のホームページ

#!/usr/local/bin/perl
use strict;
use Socket;
use FileHandle;

my ($http,$proxy_host,$proxy_port);
my ($con_host,$con_port);
my ($host,$port,$url,$path,$ip,$sockaddr);
my ($arg,$buf);

($arg)=$ENV{'QUERY_STRING'};
$http='1.1';
$proxy_host='';
$proxy_port=0;
$host='localhost';
$port=getservbyname('http','tcp');
$path='/';
$arg=~m!(http:)?(//)?([^:/]*)?(:([0-9]+)?)?(/.*)?!;
if($3){ $host=$3;}
if($5){ $port=$5;}
if($6){ $path=$6;}
if($proxy_host ne ''){
 $con_host=$proxy_host;
 $con_port=$proxy_port;
 $url=$arg;
}
else{
 $con_host=$host;
 $con_port=$port;
 $url=$path;
}
$ip=inet_aton($con_host) or die "host($con_host) not found\n";
$sockaddr=pack_sockaddr_in($con_port,$ip);
socket(SOCKET,PF_INET,SOCK_STREAM,0) or die "socket error\n";
connect(SOCKET,$sockaddr) or die "connect $con_host $con_port error\n";
autoflush SOCKET(1);
if($http eq '1.1'){
 print SOCKET "GET $url HTTP/1.1\n";
 print SOCKET "Host: $host\n";
 print SOCKET "Connection: close\n\n";
}
else{ print SOCKET "GET $url HTTP/1.0\n\n";}
print "Content-Type: text/html\n\n";
while(chomp($buf=<SOCKET>)){ print $buf;}
close(SOCKET);

実に面白い。クライアントとサーバの間にAjaxエンジンという仕組みを挟む発想が面白い。目指せGoogle系システム。

流行なので検索すると色々な人が面白い事をしていますね。google:Ajax

ただ、Accessibilityとしては失格になるね。Lynxやw3mを使っている人もいるし。

参考: Home | Web Accessibility Initiative (WAI) | W3C

2005-02-27(日) やっと休める。

[][]Ajaxシステムを考える

  • データは全てXML
  • JavaScriptのXMLHttpRequestによるデータの取得
  • JavaScriptのinnerHTMLによるユーザアクションに応じたの表示の動的変化

こんなトコロでしょうね。今までサーバ側で全部処理させていたから、どうもユーザ側のAjaxエンジンで処理、というイメージがしっかりと固まらない。文章にしてまとめて置かないとフワフワしてしまう。

1日考えておおよそのプランは立った、という状況。あ、外に出てないや。ひきこもりだなあ。

2005-02-26(土) 良い天気ですが、寒いです。

[][]Ajaxというアプローチ

Ajax
Webアプリケーション開発の新しいアプローチ

  • XHTMLとCSSを用いた、Web標準に基づくプレゼンテーション
  • DocumentObjectModelによるダイナミックな表示と相互作用
  • XMLとXSLTによる、データの変換や操作
  • XMLHttpRequestによる、データの非同期的な取得

Ajax: Web アプリケーション開発の新しいアプローチ

参考:

「XHTMLとCSSを用いた〜」は、InternetExplorerが早くXHTML1.1をちゃんと表示してくれたら問題無いんだけどなあ。1.0のままでも特に問題無いと思っていますが。

特に面白いのは、XMLHttpRequest。Googleも随分力を入れて取り入れている手法。僕もちょっと前までブラウザJavaScriptはOFFにしていたのだが、最近はGmailを使うので普段からON状態になっている。

XMLのデータのみをサーバ・クライアント間でやり取りをして、クライアント側のAjaxエンジンで処理・表示を行う。ブラウザなどによるJavaScriptの機能の差はちゃんと考えて作らないといけない。

XMLHttpRequestに関して、適当に情報収集。面白すぎる。何か実践してみよう。

  1. クライアント:XMLに必要なデータを格納し、サーバにHTTP送信
  2. サーバ:受け取ったXMLを処理、結果をXMLに格納し、クライアントに送信
  3. クライアント:受け取ったXMLを処理

参考:

2005 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2006 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2007 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2008 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2009 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2010 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |