onLoadをbodyタグ以外で使用する

メモ:

function myonload(){
//onLoad時に実行するスクリプト
}
document.body.onload=myonload;

背景画像の表示サイズを調整する

背景画像の表示サイズを調整できたんですね。知らなかった…
「-webkit-background-size」を使用します。

.bg { background:url(bg2x.png); -webkit-background-size: 320px 64px;}

640×128の画像を320×64で背景画像として表示

元画像はこちら

MT カスタムフィールド「ドロップダウン」で条件分岐

メモ:

<MTSetVarBlock name="season"><MTseason></MTSetVarBlock> 

<MTIf name="season" eq="春">
  春の処理…
</MTIf>

<MTIf name="season" eq="夏">
  夏の処理…
</MTIf>

<MTIf name="season" eq="秋">
  秋の処理…
</MTIf>

<MTIf name="season" eq="冬">
  冬の処理…
</MTIf>

メガネあわせ


だいぶ前に見つけたスロットスクリプト。使い道が見つからないので、上司のメガネあわせ作ってみました。

MT 特定のカテゴリの場合のみ個別ページを書きだす

メモ:
ブログ記事テンプレートのアーカイブマッピングを下記にする

<mt:SetVarBlock name="thisCategory"><$MTEntryCategory$></mt:SetVarBlock><mt:If name="thisCategory" eq="カテゴリ名">%c/%-f<mt:ElseIf>%-f</mt:If>

mt:ElseIfにファイル名を指定しないと上手くいかない感じ・・・

JQueryでxmlファイルの読込

メモ:

XML

<?xml version="1.0" encoding="utf-8"?>
<properties>
<news>
	<date>2011.00.00</date>
	<title>高粋楼-ハイカラロウ</title>
	<url>http://www.haikararou.com/</url>
</news>
<news>
	<date>2010.00.00</date>
	<title>ウルトラエル</title>
	<url>http://www.ultra-l.net/index.php</url>
</news>
</properties>

JS

// xmlファイル読み込み
function news_xml(){
    $.ajax({
        url:'./news.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:parse_xml
    });
}

// xmlデータ解析
function parse_xml(xml,status){
    if(status!='success')return;
    $(xml).find('news').each(write_news);
}

function write_news(){
    var date=$(this).find('date').text();
	var title=$(this).find('title').text();
    var url=$(this).find('url').text();
    $('<dl>'+
    '<dt>'+date+'</dt><dd><a href="'+url+'">'+title+'</a></dd>'+
    '</dl>').appendTo('#news_xml');
}

HTML

<body onload="news_xml()">
<div id="news_xml"></div>
</div>
</body>
</html>

livedoor天気予報サンプル


参考
ライブドアの天気予報を表示する
お天気WEBサービス

iPhone・iPad 傾きセンサー(加速度センサー)を使ったゲーム

某書籍に載っていた傾きセンサー(加速度センサー)を使ったゲームを、ほんのちょっと弄ったゲーム作りました。
iPhone・iPadを傾けて宇宙服を着た僕を操作、10個の星(iPad用は20個)をキャッチするタイムアタック系ゲームです。
iPhone・iPad以外では動作確認していませんのでご容赦ください。

iPhone3GS以上の人はブラウザが回転しないようにロックをかけた方がいいですよ。
画面がクルクル回転しちゃうから・・・

20110930182103

iPhone用はこちら
http://kousei.ultra-l.net/elle_hori/ichiriki/20110930/index.html

iPad用はこちら
http://kousei.ultra-l.net/elle_hori/ichiriki/20110930/index2.html

アタリ判定甘めです・・・
暇つぶしにどうぞ

奥行きのあるバナー

参考:複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」

奥行きのあるバナーを制作してみたかったので、上記参考サイトの「jQuery.Smart3D」を使用して、サンプル制作してみました。


上のバナーはiframeで表示しています。
デモページはコチラ

クリックで先日制作したゲーム ウルトラエルFacebookページ限定ゲーム「ススメ!エルくん!」にリンクします。

●「いいね!」していただくとプレイできます
●canvasタグが使えるブラウザでプレイ可能です。
詳しくはこちら:ゲーム作りました | 俺たちウェブチェイサー

JS

$(document).ready(function() {
$('#area').smart3d();
});

HTML

Jqueryを使ってulをリンクに変更しています。
JS

$(function(){
$(".area").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});

HTML

YouTubeの動画加工ツールを試してみる

すでにアップロードした動画に簡単な編集を加える「動画加工ツール」が追加されたので試してみました。
提供される機能はクイック編集(前後をカット)、手ぶれ補正、回転、 明るさや色温度調整、さらに白黒やセピアカラーといったプリセットのエフェクト適用など。

元になる動画は昨シーズンに撮影したスキーの動画(30秒ほど)、けっこう手ぶれがあったのですが、手ぶれ補正でかなり軽減されてます。(最終的にカラーエフェクトかけてしまっているのでわかりづらいか・・・?)
編集画面はこんなカンジ↓

手ぶれを補正
20110916141517

効果を追加
20110916141518

で、編集前後の比較
編集前

編集後

※上書き(同一IDで保存)すると、比較できないので、編集版は別名で保存。
※編集で同一IDで保存した場合も、オリジナルの状態に戻すこともできます。何度でも編集可能。便利!・・・ただ、編集が反映されるまで30分くらいかかりました