Born Neet

[PR]

2025-02-25 (Tue)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments (Close):
TrackBack (Close):

HTML5 FileAPIを試す：ブラウザにファイルをドラッグ＆ドロップしてMD5を計算する

2009-12-13 (Sun)
html5

font dragrに興味津々で、僕もなんか作ってみたいなーと思ってたら、
Mozillaがわかりやすいサンプルを公開してくれた。

というわけで、早速（？）解説記事を参考に真似してみた。

MD5er.js

中央のボックスにファイルをドラッグ＆ドロップすると、
そのファイルのMD5値を表示します。

動くのは、今のところFirefox 3.6のみです。
※ Mac OS X 10.6 Snow Leopardで確認

特に目新しくはないと思いますが、
サーバサイドに情報を送らずに計算できるので、
お手軽に使えてプライバシー的にも安心かもしれません。

以上、思ったより手軽にできたので皆さんも是非。
（ソースはご自由にどうぞ。try&errorで適当にやったので仕様的に正しいかわかりませんが。）
また何か思いついたら作ってみたいと思います。

Comments: 0
TrackBack:

xreaが障害中の為、bornneet.comに接続できません

2009-12-13 (Sun)
お知らせ

タイトルの通りですが、xreaが障害中です。
bornneet.comドメインのコンテンツが閲覧できない状態となっています。
（blog.は忍者ブログでホスティングしている為無事）

せっかく作った作品が公開できない状態でフラストレーションがたまりますー。

さて、どうしようかな・・・。

とか書いた瞬間つながった。（2009/12/13 21:10）
良かったー！

Comments: 0
TrackBack:

久々のbookmarklet：「HTML Elements Index」をhtml5 OKな順でソートする

2009-12-13 (Sun)
bookmarklet

jetpackなご時世に、久々のbookmarkletを作ってみました。

html5-elmidx-sort

HTML Elements Index – Jens Meiertを開いて実行すると、
HTML5にチェックがついている順にソートします。
（各列の見出しクリックでもソートできます）
・・・それだけです。

あ、もちろん、bookmarkletterで作りました。（宣伝）
※ もうちょっと使い勝手なんとかならんかなー。

以上でーす。
僕と同じ需要のある方はどうぞ。

あ、忘れてた。
ソースはこんな感じです。

scriptのロードは動的スクリプトローディング（さんざん既出だと思うけど - IT戦記からパクリました。
（以前、コードリーディングもしてたりします。）

(function(l) {
	l('http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js', 'window.jQuery', function() {
		l('http://tablesorter.com/jquery.tablesorter.min.js', 'jQuery.fn.tablesorter', function() {
			jQuery('.alt').tablesorter({ sortList: [[5, 1]] });
		});
	}); 
})(function(src, check, next) {
  check = new Function('return !!(' + check + ')');
  if (!check()) {
    var script = document.createElement('script');
    script.src = src;
    document.body.appendChild(script);
    setTimeout(function() {
      if (!check()) setTimeout(arguments.callee, 100);
      else next();
    }, 100);
  }
  else next();
});

Comments: 0
TrackBack:

プリンタ買ったので色々なステッカーを自作してみた

2009-12-07 (Mon)
日記

プリンタの無い生活に限界を感じて、ついに買ってしまった。
（ボーナス近くて気が緩んでた・・・）

BROTHER Mymio A4インクジェット複合機 DCP-390CN: ブラザー工業 2009-10-06

by G-Tools , 2009/12/06

というわけで、前からやりたくてしかたなかった
ステッカー自作に挑戦してみた。

使った用紙はこれ。

エーワン手作りステッカーキレイにはがせるA4 28874: A-ONE 2008-05-21

by G-Tools , 2009/12/06

ダイソーのも試したけど、
やっぱりフィルムでコーティングしないとステッカーぽくならないので、
セットになってるこいつが便利。

さて、結果は・・・

こうなりました。
※ HTML5とBUMP（祝新曲！）とappleのが自作です。

予想よりはきれいにできました。
特に赤いりんごがリンゴがお気に入りです。

とか思ってたら、光が漏れてるーorz（ずれてる！）

あと、eeepcにもHTML5を貼っときました。
（macbookほど白くないのでステッカーの白地が目立っちゃいますね。）

ステッカー作り楽しいー！！

Comments: 0
TrackBack:

wp.Vicunaをなんちゃってhtml5化してみる（断念）

2009-12-06 (Sun)
html5

HTML5勉強会＠Operaでダニエルさんのlive codingを見て、
僕もやりたくなったので、wp.Vicunaを（本当にちょっとだけ）いじってみました。

html5.bornneet.com

・・・はい、微妙です。
まぁせっかくなのでこれから作っていくであろう、
html5系の作品の公開に使おうと思います。

というわけで、以下作業ログ。

0. 準備

まず、ローカルに環境を整えます。
（さすがに公開サーバ上でテンプレを弄ってくわけにはいかんので）

で、面倒なのでapache friends - xampp for macos xを使用して
環境構築は一瞬で終わらせました^^

それでは作業開始です。

1. DOCTYPEを変更

# diff wp.vicuna/header.php wp.vicuna5/header.php 
1,3c1
< <?php echo '<?xml version="1.0" encoding="'. get_bloginfo('charset') . '" ?>'; ?>
< 
< <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
---
> <!DOCTYPE html>

The W3C Markup Validation Serviceでチェックしてみると、もうhtml5です。
（元はxhtml 1.0S Strict）

ネタとしてはこれだけでもいいかもですが、一応できるところまでやってみます。

2. <head>をスマートに

11c9
< <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">
---
> <html lang="<?php echo $lang; ?>">
13,14c11
< 	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
< 	<meta http-equiv="Content-Script-Type" content="text/javascript" />
---
> 	<meta charset="<?php bloginfo('charset'); ?>" />
22c19
< 	<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
---
> 	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
28c25
< 	<script type="text/javascript" charset="utf-8" src="<?php echo get_vicuna_javascript_uri() ?>"></script>
---
> 	<script src="<?php echo get_vicuna_javascript_uri() ?>"></script>

3. <header>

こいつらを全部置換↓（preview以下はめんどいので除外）

# grep 'div id="header"' wp.vicuna5/*
wp.vicuna5/404.php:<div id="header">
wp.vicuna5/archive.php:<div id="header">
wp.vicuna5/category.php:<div id="header">
wp.vicuna5/index.php:<div id="header">
wp.vicuna5/page.php:<div id="header">
wp.vicuna5/search.php:<div id="header">
wp.vicuna5/single.php:<div id="header">
wp.vicuna5/tag.php:<div id="header">

# grep '#header' wp.vicuna5/* wp.vicuna5/*/*
wp.vicuna5/footer.php:	<p class="return"><a href="#header"><?php _e('Return to page top'); ?></a></p>
※ 扱いに困ったのでとりあえず#で逃げた
wp.vicuna/style-vega/core.css:  div#header
wp.vicuna/style-vega/core.css:div#header {
wp.vicuna/style-vega/core.css:div#header p.siteName {
wp.vicuna/style-vega/core.css:div#header p.siteName a {
wp.vicuna/style-vega/core.css:div#header p.siteName a:hover {
wp.vicuna/style-vega/core.css:div#header p.description {
wp.vicuna/style-vega/layouts.css:div#header,
wp.vicuna/style-vega/layouts.css:body.eye-h div#header {
wp.vicuna/style-vega/layouts.css:body.eye-h div#header p.siteName {
wp.vicuna/style-vega/layouts.css:body.eye-h div#header p.description {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.siteName {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.siteName a {
wp.vicuna/style-vega/layouts.css:body.eye-hb div#header p.description {
wp.vicuna/style-vega/layouts.css:body.gt div#header {
wp.vicuna/style-vega/layouts.css:body.al div#header,
wp.vicuna/style-vega/layouts.css:body.f800 div#header,
wp.vicuna/style-vega/layouts.css:body.f850 div#header,
wp.vicuna/style-vega/layouts.css:body.f900 div#header,
wp.vicuna/style-vega/layouts.css:body.f950 div#header,
wp.vicuna/style-vega/layouts.css:body.f1000 div#header,

知らない要素はinline描画される可能性があるので、block化
/*
 http://html5doctor.com/html-5-reset-stylesheet/
 http://people.opera.com/danield/presentations/html5/html5-markup.pdf
 */
article, aside, dialog, details, figure,
footer, header, hgroup, nav, section, time {
	display:block;
}

やばい、思ったよりしんどい。
でもなんとか見た目は崩れずに成功。

4. <footer>

やることはheaderと同じ。
# grep 'div id="footer"' wp.vicuna5/*
wp.vicuna5/footer.php:<div id="footer">
t-no-macbook:themes root# grep '#footer' wp.vicuna5/* wp.vicuna5/*/*
wp.vicuna5/style-vega/core.css:  div#footer
wp.vicuna5/style-vega/core.css:div#footer {
wp.vicuna5/style-vega/core.css:div#footer a {
※ 文字色が変わっちゃったので!importantで逃げた
wp.vicuna5/style-vega/core.css:div#footer a:hover {
wp.vicuna5/style-vega/core.css:div#footer ul {
wp.vicuna5/style-vega/core.css:div#footer ul li {
wp.vicuna5/style-vega/core.css:div#footer address {
wp.vicuna5/style-vega/layouts.css:div#footer {
wp.vicuna5/style-vega/layouts.css:body.al div#footer {
wp.vicuna5/style-vega/layouts.css:body.f800 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f850 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f900 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f950 div#footer {
wp.vicuna5/style-vega/layouts.css:body.f1000 div#footer {

※ IE対応

header.phpにhtml5.jsを仕込めばok。

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

中身はこんなの。
（IEは知らない要素のスタイル指定を無視するので、
事前にcreateElementして知ってる要素として扱わせる）
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()