コンテンツ開始
TOP / 開発琴線
- 1 2 3 >>

2014年08月12日


CSS3 で時計作ってくれないかなぁ

Clock

インターンで出ていた学生が、今朝学校に来ていたので

「どないしたん?」

と聞くと、

「納期が終わったのでお休みいただきました」

との事で、以前彼には IE9 ベータのビュアーで CSS3 のドラエモンの表示チェックするように頼んだ経緯もあるので、お願いしました。( カーブと斜め線とグラデーション )

ま、以前の結果から予想通り IE9 ベータは悲しい結果ですが、Firefox と Google Chrome はうまくいっています。

「なんか、目盛がおかしいけど」

「いや、雰囲気です」

てな感じでけっこう簡単に作れる事も解りました。

「授業のブログにまとめといてね」

と言ったら、さすがインターンでしごかれているだけあってか、なかなか
良いものを作ってくれました。

------------------------------------------
当時、2010年。
現在、2014年。

世の中であらためて探してみると、CSS だけで、アニメーションして時計として機能していました。ただ、時計として作るのなら JavaScript + jQuery のほうが実用的なので、CSS のいらない部分を省いて、手作業で時間指定できるように改造しました。
  • 11
  • 00
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
短針の部分が若干形がおかしいですが、ここのブログの CSS の影響だと思います。

※ 分目盛りの60個と、アナログを削除すると少し短くはなります。

<style>
ul { list-style:none; margin:0; padding:0 }
#watch {
	width: 600px; 
	font-size:1em; 
	position:relative 
}
#watch .frame-face {
  position:relative;
  width:30em;
  height:30em;
  margin:2em auto;
  border-radius:15em;
  background:-webkit-linear-gradient(top, #f9f9f9,#666);
  background:-moz-linear-gradient(top, #f9f9f9,#666);
  background:linear-gradient(to bottom, #f9f9f9,#666);
  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}

/* 白い背景 */
#watch .frame-face:after {
  content:'';
  width:28em;
  height:28em;
  border-radius:14.2em;
  position:absolute;
  top:.9em; left:.9em;
  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
  border:.1em solid rgba(0,0,0,.2);
  background:-webkit-linear-gradient(top, #fff, #ccc);
  background:-moz-linear-gradient(top, #fff, #ccc);
  background:linear-gradient(to bottom, #fff, #ccc);
}

/* 分目盛り */
#watch .minute-marks li {
  display:block;
  width:.2em;
  height:.6em;
  background:#929394;
  position:absolute;
  top:50%; left:50%;
  margin:-.4em 0 0 -.1em;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}

/* ５分単位の数字 */
#watch .digits li {
  font-size:1.6em;
  display:block;
  width:1.6em;
  height:1.6em;
  position:absolute;
  top:50%; left:50%;
  line-height:1.6em;
  text-align:center;
  margin:-.8em 0 0 -.8em;
  font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#watch .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#watch .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#watch .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#watch .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#watch .digits li:nth-child(9) { transform:translate(-8em, 0) }
#watch .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#watch .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#watch .digits li:nth-child(12) { transform:translate(0, -8em) }

/* 短針 */
#watch .hours-hand {
  transform:rotate(-33deg);

  width:.8em;
  height:7em;
  border-radius:0 0 .9em .9em;
  background:#232425;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -.8em -.4em;
  box-shadow:#232425 0 0 2px;
  transform-origin:0.4em 6.2em;
  animation:hours 43200s linear 0s infinite;
}
#watch .hours-hand:before {
  content:'';
  background:inherit;
  width:1.8em;
  height:.8em;
  border-radius:0 0 .8em .8em;
  box-shadow:#232425 0 0 1px;
  position:absolute;
  top:-.7em; left:-.5em;
}
#watch .hours-hand:after {
  content:'';
  width:0; height:0;
  border:.9em solid #232425;
  border-width:0 .9em 2.4em .9em;
  border-left-color:transparent;
  border-right-color:transparent;
  position:absolute;
  top:-3.1em; left:-.5em;
}

/* 長針 */
#watch .minutes-hand {
  transform:rotate(0deg);

  width:.8em;
  height:12.5em;
  border-radius:.5em;
  background:#343536;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -1.5em -.4em;
  box-shadow:#343536 0 0 2px;
  transform-origin:0.4em 11em;
  animation:minutes 3600s linear 0s infinite;
}

/* 秒針 */
#watch .seconds-hand {
  transform:rotate(90deg);

  width:.2em;
  height:14em;
  border-radius:.1em .1em 0 0/10em 10em 0 0;
  background:#c00;
  position:absolute;
  bottom:50%; left:50%;
  margin:0 0 -2em -.1em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  transform-origin:0.1em 12em;
  animation:seconds 60s steps(60, end) 0s infinite;
}
#watch .seconds-hand:before {
  content:'';
  width:.8em;
  height:3em;
  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;
  box-shadow:rgba(0,0,0,.8) 0 0 .2em;
  background:inherit;
  position:absolute;
  left:-.35em; bottom:-3em;
}

/* デシタル部分 */
#watch .digital-wrap {
  width:9em;
  height:3em;
  border:.1em solid #222;
  border-radius:.2em;
  position:absolute;
  top:50%; left:50%;
  margin:3em 0 0 -4.5em;
  overflow:hidden;
  background:#4c4c4c;
  background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);
  background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);
  background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);
}
#watch .digital-wrap ul {
  float:left;
  width:2.85em;
  height:3em;
  border-right:.1em solid #000;
  color:#ddd;
  font-family:Consolas, monaco, monospace;
}

#watch .digital-wrap li {
  font-size:1.5em;
  line-height:2;
  letter-spacing:2px;
  text-align:center;
  position:relative;
  left:1px;
}
</style>
<div id="watch">
  <div class="frame-face"></div>
  <ul class="minute-marks">
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
  <div class="digital-wrap">
    <ul class="digit-hours">
      <li>11</li>
    </ul>
    <ul class="digit-minutes">
      <li>00</li>
    </ul>
    <ul class="digit-seconds">
      <li>15</li>
    </ul>
  </div>
  <ul class="digits">
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
  </ul>
  <div class="hours-hand"></div>
  <div class="minutes-hand"></div>
  <div class="seconds-hand"></div>
</div>
posted by at 2014-08-12 01:26 | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2012年04月19日


４月から Windows8 の Metro スタイルのアプリを作って中身を調べています


あ、そうだ、コンピュータの専門学校の講師やってました。実際作り始めたのは、去年のデベロッパープレビューが出てすぐで、回転が速くなったのは先月からですけれど。



これは、Microsoft が配布しているサンプルのうちの一つを実行したものですが、中身は『HTML5』と『JavaScript』で書かれています。SDK も一部 JavaScript で書かれているのでその部分はソースが読めますが、難解なので読まないほうがいいです。ですが、逆に言うと世の中の JavaScript ライブラリがたぶん殆ど動きます。

試したのは jQuery と Three です。

以下は jQuery のカレンダーを Windows8 のデベロッパープレビューで実行したものです。



現在は、Windows8 のコンシューマ プレビューを使っていますが、Windows そのもののUI もいろいろ変更(改良)されています。発売される頃にはもっと変わるかもしれませんが・・・

はたして日本人が Metro を受け入れるかどうかはなかなか気になるところではあります。個人ユーザーで、スマホの延長的に使う人は楽しむとは思いますが、業務で使うのは現在の資産を受け継ぐという意味で無理がいっぱいです。

そもそも、いきなり Metro スタイル( スマホが横になったようなもの )では、全く違うものなので、いったんデスクトップに移動しないと、何もできないですし、現状 Metro のアプリの中から デスクトップのアプリケーションの実行は制限があるようですし、切り離して考えて、頭の中をリセットする必要が最初にあります。

慣れてしまえば、デスクトップそのものは Windows7 と大差は無いようですし(プログラムメニューは無くなってますが)、WindowsXP で動いていたフリーソフトもふつうに動きます。レジストリの中が変わった様子も無いし、今後動作確認を Windows7 で動いていたものを一通りやって行くので、ひょっとしたらダメなものもあるかもしれませんが、その時はその時だとあきらめれば済みますし。

一つどうしても気になるのは、日本語入力が対応が追い付いていないような気がします。まぁ当然と言えば当然ですが、デベロッパープレビューでは挙動が少しおかしかったのが、コンシューマープレビューでは安定した事は良かったですが、よく解らないタイミングで日本語キーボードがの配置が違うものになって再起動が必要になります。

たぶん、勝手に英語圏のキーボード配置になってしまったのだと思いますが、自分以外もなっているので発現率は結構大きいようです。あと、日本語変換中の表示のサイズがなんだか小さくて不自然です。

使い勝手はユーザーが慣れればそれで良いのですが。


アプリ作るほうはかなり大変ではあると思います。Microsoft が今後を見据えて JavaScript を丸ごと開発言語として使えるようにしましたが、そうそう JavaScript に精通しているプログラマっていないはずですし。もちろん、VB や C# でも書けるようですが、サンプルの提供具合からして、VB や C# は、アプリの奥のほうを担当するような雰囲気ではあります。インターフェイスは HTML5 + JavaScript なんでしょうね。

それと、いろいろセキュリティに考慮して、DB や 他のプログラムへのアクセスが間接的になっているようなので、DB にアクセスでは無く、XMLHttpRequest で XML か JSON にアクセスしそうなので、( DB へのアクセスはサーバーアプリに任せる )ますますプログラマの知識に不安が出て来ると思ったり。

言語的には、JavaScript は結構難解なので、なめてかかると痛い目を見ます。しかし確かに容易に書けてしまうフレームワーク作るのは楽でしょうから、その部分を作る上位プログラマが重宝される事を期待したりするのであります。

プログラマって評価されにくいんですよね・・・・

調査した技術的な記事

Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します

Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

Win8 Metro(JS) : 印刷処理

Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)

Windows8 Metro(JS) で jQuery の datepicker を動作確認しました

Windows8 Metro(js) : Debug オブジェクトと debugger ステートメントとMessageDialog

Win8 Metro js : ファイル作成


Microsoft ドキュメント

Metro スタイル アプリ用 JavaScript の基本

Metro スタイル アプリのナビゲーション デザイン


posted by at 2012-04-19 01:34 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2012年02月19日


maglog がついにサービス終了するので、maglog のバックアップ xml を seesaa へインポートする為のMT形式ログファイルにコンバートするスクリプト(VBS)を作成しました



やっつけ仕事ですが、1390記事ぶんのデータを作成して、一気にインポート
は無理があるのでデータは 10 記事づつに出力して、今日は100記事インポ
ートしてテストしました。

■ スクリプトの先頭に、1ログに格納する記事数を設定可能になっています
■ AUTHOR と登録カテゴリも設定可能です( ブログ側のデータを設定します )

手順

1) フォルダを作成
2) maglog のバックアップファイルをフォルダ内に保存
3) このスクリプトをフォルダ内に保存
4) エクスプローラからスクリプトを実行

(注意)Twitter と連携してる場合は注意です。Twitter のツイートがえらい事になります

strAuthor = "night walker"
strCat = "maglog"
numSet = 10

Dim Fso,obj,strCurPath

' ファイルシステムオブジェクト
Set Fso = CreateObject( "Scripting.FileSystemObject" )

' 現在実行されているスクリプトのフルパス
strCurPath = WScript.ScriptFullName

' ファイルオブジェクトを作成
Set obj = Fso.GetFile( strCurPath )

' ファイルオブジェクトが存在するフォルダオブジェクト
Set obj = obj.ParentFolder

Set colFiles = obj.Files

For Each target In colFiles

	aData = Split( target.Name, "." )
	if UBound( aData ) = 1 then
		if UCase( aData( 1 ) ) = "XML" then
			targetFile = target.Name
			Exit For
		end if
	end if

Next

' DOM Object 作成
Set dom = Wscript.CreateObject("Msxml2.DOMDocument")

' 既存 XML 入力
dom.load( targetFile )

Set nodeList = dom.getElementsByTagName("row")

fcnt = 0
fncnt = 0

For I = 0 to nodeList.length - 1

	err_sw = 0

	if fcnt Mod numSet = 0 then
		if fcnt <> 0 then
			logObj.Write( "" & vbLf )
			logObj.Close()
		end if
		fcnt = fcnt + 1
		fncnt = fncnt + 1
		Set logObj = Fso.OpenTextFile( "convert" & Right("00000" & fncnt,5 ) & ".log", 2, True )
	else
		fcnt = fcnt + 1
	end if

	on error resume next
	Set targetNode = nodeList.item(I).getElementsByTagName("title")
	wk1 = Replace(targetNode(0).firstChild.nodeValue, "&nbsp;", "" )
	if Err.Number <> 0 then
		err_sw = 1
	end if
	on error goto 0

	on error resume next
	Set targetNode = nodeList.item(I).getElementsByTagName("summary")
	wk2 = targetNode(0).firstChild.nodeValue
	if Err.Number <> 0 then
		err_sw = 1
	end if
	on error goto 0

	on error resume next
	Set targetNode = nodeList.item(I).getElementsByTagName("contents")
	wk2c = targetNode(0).firstChild.nodeValue
	if Err.Number <> 0 then
		wk2c = ""
	end if
	on error goto 0

	on error resume next
	Set targetNode = nodeList.item(I).getElementsByTagName("relese_dtime")
	wk3 = targetNode(0).firstChild.nodeValue
	if Err.Number <> 0 then
		err_sw = 1
	end if
	on error goto 0

	if err_sw = 0 then
		logObj.Write( "AUTHOR: " & strAuthor & vbLf )
		logObj.Write( "TITLE: " & wk1 & vbLf )
		logObj.Write( "STATUS: Publish" & vbLf )
		logObj.Write( "ALLOW COMMENTS: 0" & vbLf )
		logObj.Write( "CONVERT BREAKS: 0" & vbLf )
		logObj.Write( "ALLOW PINGS: 0" & vbLf )
		logObj.Write( "PRIMARY CATEGORY:" & vbLf )
		logObj.Write( "CATEGORY: " & strCat & vbLf )
		aData = Split(wk3)
		logObj.Write( "DATE: " & Replace(Right(aData(0),5),"-","/") & "/" & Left(aData(0),4) & " " & aData(1) & vbLf )
		logObj.Write( "-----" & vbLf )
		logObj.Write( "BODY:" & vbLf )
		logObj.Write( wk2 & vbLf )
		logObj.Write( "-----" & vbLf )
		logObj.Write( "EXTENDED BODY:" & vbLf )
		if wk2c <> "" then
			logObj.Write( wk2c  & vbLf )
		else
			logObj.Write( ""  & vbLf )
		end if
		logObj.Write( "-----" & vbLf )
		logObj.Write( "EXCERPT:" & vbLf )
		logObj.Write( "" & vbLf )
		logObj.Write( "-----" & vbLf )
		logObj.Write( "KEYWORDS:" & vbLf )
		logObj.Write( "" & vbLf )
		logObj.Write( "-----" & vbLf )
		logObj.Write( "--------" & vbLf )
		
	end if

Next

logObj.Write( "" & vbLf )

logObj.Close()
posted by at 2012-02-19 20:31 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2011年04月26日


「Twitter 日本マイクロソフト IE Team」から拾い読み

日本マイクロソフト IE Team (mskkie) は Twitter を利用しています

IE9 製品版がリリースされました。

既に製品候補版をインストールして運用していますが、Window Update のよる
更新はもうちょっと後になるよですが、こんな事書いていたので上書きインス
トールしてみましたが、特に何の問題も無くインストールされました。時間が
無かったので動作確認や、バージョン確認はあさってでないと出来ないのです
が・・・

>ちなみに、IE9ベータ版＆製品候補版からは上書きインストールが
>サポートされていますので、これまでのように一度ベータ版＆製品
>候補版をアンインストールしてから、あらたに製品版をインストー
>ルする手間はありません。

で、なにが変わったか確かめるにしてもこんな感じなので。

>機能的な違いはありませんが、製品候補版で見つかった不具合の修正やパフォ
>ーマンスの改善が製品版に反映されています。必ず製品候補版からアップデー
>トしてください。製品候補版 → 製品版は上書きインストールでいけます。

で、候補版の時点で SVG Girl! という、SVG だけでアニメーションするという
まだ何だか良く解らないコンテンツを試してみましたが、非常にスムーズに動
いていました。

同じ CPU の Firefox と比べてみると、たしかに速いですが、CPU がパワフル
ならひょっとしたら差が解らないかもしれませんが、自宅の PC は非力で XP
で Firefox で実行するとフリーズ。もうちょっと上の CPU で Windows7 で 
IE9 はすこしカクカクして、それなりの CPU で Windows7 で IE9 だと普通に
アニメーションしています。

WEB の新時代の幕開けかもしれません。
posted by at 2011-04-26 21:45 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2011年04月16日


WEBページをサムネイル化したり、PDF化したり、APIまであるこまめなサービス

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス

資本金300万でアルバイト入れて7人ほどで、スタッフ募集で「在宅可」といういまどきの
ステキな会社でした。

http://nurd.seesaa.net/article/195947808.html

条件さえ合えば、参加したいぐらい楽しそうな事をたくさんやってますね。

API は、時間ができたら検証して、logical　error で記事書きます。


あ、PDF はきちんとテキストと画像が分けてキャプチャーされてます。
レンダリングも正確でしたし、JavaScript の適用結果が表示されて
いました。

▼その PDF です。保存せずにサービスから表示です
DAZ3D : D-Form で作成する「エルフの耳」 :琴線に触れる
posted by at 2011-04-16 10:37 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2011年01月15日


Safari for Windows 5.0.3 のいきなりな使い勝手( ちょっとびっくり )

手書きブログ用の「ハートエディタ」を整備するにあたり、いままで
Opera で動いていなかった事に気付いたのですぐ対応したのですが、
ついでなので、Safari もインストールしておこうと思って、使って
みたのですが

「なんで?」

というような初期状態にちょっと面喰ってしまいました。


まず、プログラマとして一番必要な「キャッシュを削除」が見当たり
ません。仕方ないので HELP を参照すると、CTRL+ALT+E ですって。

なんで隠しコマンドなんですか?

メニューからは、「Safariのリセット」というのがあって、そのうち
の一つがキャッシュの削除ではありますが、本当に使うのであれば、
たしかに CTRL+ALT+E は便利です。でもそれってプログラマにとって
という意味で、普通の人は HELP 見ないと思うのですけれど。



次にびっくりしたのは、デフォルトで「ホーム」に帰る方法が用意
されておらず、ツールバーにコマンドアイコンを自分で追加しなく
てはなりません。しかも、今度は HELP には嘘が書いてあって、

ほかの Web ページからホームページに戻るには：
[履歴] ＞ [ホーム] と選択します。

とありますが、そんなものはありません。


「ツールバーをカスタマイズ」より

で、も一つデフォルトで target="_blank" 等で新しいウインドウを開く
リンクで本当に新しいウインドウが開くという良く解らない設定です。
これは、設定ダイアログの「タブ」から設定できます。



「理系には理解できない」系でした。


その他設定

メニューバーを表示させるには、右上の「設定」アイコンから
「メニューバーを表示」を選択します。

メニューバーが表示されると、「編集」から「キャッシュを削除」
を選択できます。

開発メニューを表示したい場合は、設定ダイアログの「詳細」タブ
で「メニューバーに開発メニューを表示」にチェックします


２回目の起動で、「通常使うブラウザにする」ように求めて来るので
「今後確認しない」にチェックして「いいえ」を選択して下さい
posted by at 2011-01-15 19:16 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2010年10月22日


ベンジャミンさんの HTML5 サンプル : Canvascape "3D Walker"

www.benjoffe.com

ソースコードを見ても 3D 的な事は解りませんが、利用できそうなので
パッケージにしました。再配布は著作権表示あれば OK との事なので。

オリジナルより画像は変更しています。

操作キーは、ブログ内なので、CTRL キーを押しながら操作して下さい
移動キーは同じでA(左) D(右) W(前進) S(後退)。( 矢印キーも使用できます )
ジャンプは スペースキーでショットキーは元々の "B" キーです。



Copyright (c) 2009, Benjamin Joffe
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE AUTHOR AND CONTRIBUTORS BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

ソースコード

ベンジャミンさんの HTML5 サンプル( canvas )

overlay.gif
posted by at 2010-10-22 12:41 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2010年10月16日


Google MAP API : ルート探索。太平洋をカヤックで横断する 6,243 km

Google MAP API のコードサンプルを作るのが目的で、ルート探索 : Google Maps API
というコンテンツを作成しました。

で、テストとして大阪駅から、アメリカまでルート探索してみると・・・

Ggmap_route4

Ggmap_route3

つなぎ目見て、「なんじゃそりゃ」
しかも、これってハワイまでの距離で、
ご丁寧にハワイ横断経路が続いていて、
「太平洋をカヤックで横断する ワシントンへ 4,436 km」
と、さらに行程が続いています。


で、全行程の時間見積りが、約 36日 5時間 ですって。
無理に決まってるやん。
posted by at 2010-10-16 22:01 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2010年09月21日


IE9 Beta の安全なお試し方法

Twitter / マイクロソフト株式会社　IE Team:
ちなみにIE8が上書きされるのが困るという理由でIE ...

Twitter / マイクロソフト株式会社　IE Team:
Platform Preivewはアドレスバーすらな ...

Twitter で フォローしているのですが、一番気になっていた情報が掲載されていました。
動作確認のみを目的としたたぶんビュアーなんだと思いますが、以下からダウンロードできる
ようです。


Platform Preview 5
posted by at 2010-09-21 22:13 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする

2010年04月13日


CodeIgniterというフレームワークとTwitter API CodeIgniter Libraryというもので簡単にTwitter投稿できるようなサービスが作れますが・・・

Twitter_auth

日本CodeIgniterユーザ会 というのがあって、さらに 日本語言語パック
(CodeIgniter 1.7.2用)  で少なくとも日本語ドキュメントですぐ使える
ようになり、さらに、Twitter 投稿するのに都合の良い Twitter API
CodeIgniter Library — Elliot Haughin と言うライブラリがあります。

ただ、そのライブラリの Twitter.php の中のユーザが承認する URL が http
なので、意味が無いじゃないか・・・・・と思いました。

▼ 以下のように変更。
protected $authorizeUrl = 'https://twitter.com/oauth/authorize';

一度承認すると、クッキーを削除するまでそのブラウザが覚えるようです。
posted by at 2010-04-13 00:21 | Comment(0) | 開発琴線 | このブログの読者になる | 更新情報をチェックする
- 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
コンテンツ終了
右サイド開始
コンテナ終了 base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX