debeso » 公開してるもの http://debeso.com Happy Life. Happy Web. Wed, 08 Sep 2010 15:05:06 +0000 http://wordpress.org/?v=2.8.4 ja hourly 1 はじめようHTML5【HTML5テンプレートファイル配布してます】修正版 http://debeso.com/blog/2009/12/dahhunda/%e3%81%af%e3%81%98%e3%82%81%e3%82%88%e3%81%86html5%e3%80%90html5%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e9%85%8d%e5%b8%83%e3%81%97%e3%81%a6%e3%81%be/ http://debeso.com/blog/2009/12/dahhunda/%e3%81%af%e3%81%98%e3%82%81%e3%82%88%e3%81%86html5%e3%80%90html5%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e9%85%8d%e5%b8%83%e3%81%97%e3%81%a6%e3%81%be/#comments Mon, 07 Dec 2009 11:07:42 +0000 hirorock http://debeso.com/?p=821 久しぶりのブログ更新です

最近は、話題のHTML5に興味もってました。
仕事でもクライアント側から特に規約などで固められない場合は、頼まれてないのにHTML5ベースで作ったりしてますw

そんな時にテンプレートとして使っているファイルが結構便利なので公開します
これを使っていつも通りのHTMLコーディングするだけ簡単にHTML5になります。※

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" media="screen" />
	<link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css" media="screen" />
	<!--http://html5resetcss.googlecode.com/files/html5-reset-1.4.css-->
	<link rel="stylesheet" href="[YOURSITE]/html5-reset-1.4.css" media="screen" />
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
	<![endif]-->
	<title>TITLE</title>
<script>
</script>
<style>
</style>
</head>
<body>
Hello HTML5!
</body>
</html>

なんとこれだけで、新しいタグを使わなくてもHTML5になります！
ドキュメントタイプを「〈!DOCTYPE html〉」にするだけでHTML5の文書だと判断されるので当たり前ですね。

とりあえずHTML5をコーディングする際に必要(&便利)なファイルを、
GoogleやYahoo!がホスティングしてくれているところから呼び出すことで、
リソースを割かずに、HTML5から使える新タグを使っていても普通にコーディングし始められるというところがミソのテンプレートです。
※追記(2009/12/08)
注意点として「html5-reset-1.4.css」のみは、自分でDLしてサーバーに適宜配置してください。

■ダウンロード
・html5テンプレートファイル(ver.20091208)

テンプレートといいながら、ホスティングされてるファイルを指定して記述してるだけですが、便利なのでよければ使ってみてください！

※追記2009/12/08
waioさんにLinkタグの要素抜けてると指摘があったので修正しました。
→「media=”screen”」

※「どんなHTMLでも〜」とありますが廃止タグもあるので注意は必要です…
廃止対象は、主にプレゼンテーションタグが多いようです。

]]> http://debeso.com/blog/2009/12/dahhunda/%e3%81%af%e3%81%98%e3%82%81%e3%82%88%e3%81%86html5%e3%80%90html5%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e9%85%8d%e5%b8%83%e3%81%97%e3%81%a6%e3%81%be/feed/ 2 FireMobileSimulatorをもっと便利に使う！ http://debeso.com/blog/2009/10/mobile/firemobilesimulator_tip/ http://debeso.com/blog/2009/10/mobile/firemobilesimulator_tip/#comments Wed, 07 Oct 2009 09:08:07 +0000 hirorock http://debeso.com/?p=751 そろそろブログでも書いてみようと思ったので書きます。
（※ちなみに前回更新はiPhone3GS発売前だったので3ヶ月ぶりくらい…）

私的・仕事共にモバイルサイト製作などをたまにマークアップしたりするのですが、
制作時に利用する環境で、FireMobileSimulatorを常時DoCoMoの設定にしておきたかったのでプロファイルを通常のプロファイルとは別けています。
多分そんな人は多いんじゃないかなと思ってます。

今回は、そんなプロファイルがある人向けにもっと便利にFirefoxを使う簡単な工夫をしてみます。

用意するものは、以下２ファイル。（後述のファイル利用で１ファイル！）

・XBLファイル（XML）（仮名称:3d-barcode.xml）

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="backbody">
    <implementation>
      <constructor>
        <![CDATA[
this.style.background ="url(http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl="+encodeURIComponent(location.href)+")  260px top fixed no-repeat";
        ]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

・モバイル用プロファイルのuserContent.css

html {
       -moz-binding:url([PATH]/3d-barcode.xml);
}

FirefoxにはXBLというバインディング言語が用意されているので、CSSからDOMにバインドして動的に便利に利用しちゃいます。
これを適応させると、こんな感じでブラウザ表示されます！

Screenshot-debeso

この画面通り閲覧しているページのURLを動的に取得して、GoogleChartAPIにリクエストしてbackgroundにイメージで出力してます。
便利っぽいですよね？ まぁモバイルサイト制作をやってる人にしか便利じゃないんですけどね…
でも、userContent.cssはそういう私的な目的用に用意された機能なのでコレでいいんです！！

★もう一工夫★

userContent.cssでXMLのPATHを指定するのってスマートじゃないので、
読み込ませていたxmlのソースをbase64でエンコードして読み込ませるとXMLをファイルとして用意しなくていいので効率的です！

一応簡単に試せるように用意してみました。
便利なので試してみてください！

・userContent.css(base64)

今回は簡単な機能を作成しましたが、
XBL応用すればいろいろ出来そうですよね！！

【追記10/24】
こういうのはGreaseMonkeyで全然構いませんけどネwww
でも、言いたかったのはXBLバインドでJS使ってHackしましょという事なんです！

]]> http://debeso.com/blog/2009/10/mobile/firemobilesimulator_tip/feed/ 0 WordPressのmoreタグを変更するプラグイン http://debeso.com/blog/2008/12/wordpress/morelinksharpremove/ http://debeso.com/blog/2008/12/wordpress/morelinksharpremove/#comments Tue, 02 Dec 2008 04:22:16 +0000 hirorock http://debeso.com/?p=126 WordPressでmoreタグを使用するとリンク先が、↓になります。

<a href=”http://YOUR-DOMAIN.com/blogtitle/#more-123” class=”more-link”>続きを読む</a>

このアンカータグで、その記事のページに遷移するわけですが、遷移した先のページ内のHTML上にID”more-123”があると上のアンカーで遷移した場合、ページの途中部分に遷移することになり、（好みによってですが）お節介と感じさせる可能性があります。

そこで、簡単なプラグインを作成しましたので公開します。
※テーマなどによっては動作しない場合があります。

このプラグインを使用することによって、「<a href=”[hoge]#more-[huga]“>」を「<a href=”[hoge]“>」に変換することができます！コアファイルもいじっていないので、WordPressのアップグレードも容易にできます。

よろしければ、こちらからDLしてみてください。

MoreLink#Remove
]]> http://debeso.com/blog/2008/12/wordpress/morelinksharpremove/feed/ 28