[CSS] Flashを背景にする

by

Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。

まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。

<div id="content">
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
</object>
 <div class="section">
  <h2>Flash Background sample</h2>
  <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
 </div>
</div>

今更感漂うけど続くよー

続きを読む

[mootools]押されたキーを取得する

by

mootools1.2ではEventメソッドのプロパティkeyとcodeで押されたキーのキーコードとキーの名前（小文字）を取得出来ますが、ちょっとクセがある。

<script type="text/javascript">
//<!&#91;CDATA&#91;
	window.addEvent('domready', function(){
	
	$("text").addEvent('keydown',function(event){
		var p = new Element("p");
		p.set("text","Code:&#91;"+event.code+"&#93; Key:&#91;"+event.key+"&#93;");
		$("test").adopt(p);
	});
	
	});
//&#93;&#93;>
</script>

Firebug使ってるならconsole.log()でもいい

<input type="text" id="text" size="40" />
<div id="test"></div>

続きを読む

[mootools] Ajaxでタイピングゲームを作る

by

motoolsでタイピングゲーム。名前はmooTypingだよ！（安直）
ゲームっぽくなってきたのでテスト中画面を晒してみる。

製作中デモ置き場▼
View Demo »

解説ページ▼
View Document »

※IE6は未対応（っていうか未確認）です。表示が残念な事になると思う。
時間とTypespeed,Complete,Option,Help、ゲームの終了は未実装。

画面レイアウト、画面デザイン、問題が変更可能。
デフォルトは画像が横ワイドですが、CSS変えれば縦にもできます。

東方projectのZUNさんの「音楽聞いてもらうためにゲームつくった」って話がありますが
それと似たような感じで、見せたい画像使って問題作れるので
何か人に見てもらいたいものがあるなら中々いいツールになるんじゃないかな～～。って妄想。

ゲーム中は画像見れねぇだろ、ってツッコミは無しでｗ

続きを読む

[mootools] ひらがなをローマ字に変換するクラス

by

人が作ったのを使って楽したかったんだけどいいのが無かったので、ひらがなをローマ字に変換するクラスを自作した。
タイピングゲーム製作でどうしても必要になる問題文章を、ひらがな（数字＋一部記号も可）で作るだけで全部ローマ字に変換します。
※mootools.1.2が必要

日本語は母音と子音の組み合わせで出来てる。
「く」ならK+U、「し」ならS+I/SH+I/C+I、「わ」ならW+A。
入力方式が変わるのは、「し」や「じ」等特定の文字と、「ん」、小文字のや行、小文字の「つ」との組み合わせの時だけで
あとは特定の子音１種と母音５種類の組み合わせで成り立つ。

で、大体次のような流れで変換を行います。

  1. パブリックメソッドに文章投入→「このぶんしょうはさんぷるっぽいなにかです！」
  2. １文字または２文字単位に分割して配列化。小文字は前後の文字とセットにする。
    →[こ,の,ぶ,ん,しょ,う,は,さ,ん,ぷ,る,っぽ,い,な,に,か,で,す]
    「っ」で終わる場合や記号・数字とセットになる場合はそれぞれを１文字とする。
  3. ループ文で１文字か２文字か判別。変換関数に飛ばす
    →こ：１文字　　しょ：２文字
  4. １文字の場合はそのまま変換。この時、入力方式の設定がある文字についてはその方式に従う。
    →こ：K+O　　ん：NまたはNN
  5. ２文字の場合、最初に「つ」があるかどうか捜査。
    【小文字のつがある場合】
    ２文字目を１文字変換のメソッドに通して子音を２つに増やす。
    →っぽ：P+PO　→っと：T + TO
    【小文字のつがない場合】
    switch文で入力方式の設定がある文字（し＋小文字や行、じ＋小文字や行等）を変換。
    他は、１文字変換のメソッドに通して子音＋小文字や行ローマ字にする。
    →しゃ：(SH)(SY)+A　にゃ：N(i)+YA
  6. 結果を返す
    →[ko,no,bu,nn,syo,u,ha,sa,nn,pu,ru,ppo,i,na,ni,ka,de,su,!]
    →[k,o,n,o,b,u,n,n,s,y,o,u,h,a,s,a,n,n,p,u,r,u,p,p,o,i,n,a,n,i,k,a,d,e,s,u,!]

以下全文。長いｗ

続きを読む

[mootools]文章の入力速度をリアルタイムで計測する

by

文章が完成するまでの時間を計測するツールWriting Speed Counter作ってみた。「最初の一文字入力した時点から、変換の確定ではないエンターキーが押されるまでの間」　を１つの文章として判断し、入力に掛かった時間と文字数を表示します。入力した文章のログ表示、結果の平均出力もつけてみた。

[XHTML]コピペ用 日本語ダミーテキスト（タグ付き＆タグ無し）

by

タグ付きダミーテキストのコピペが出来るHTML Ipsumを百式経由で知ったものの、
見たらなんか凄くラテン語（聖書？）だったので日本語で作ってみた。
リストやテーブルタグ付きのダミーはメニュー・更新履歴・企業挨拶風も作ってみた。

ダミー段落（Pタグ・短文）

<p>この文章は仮の内容として挿入されているサンプルです。本公開時に変更されますので、この文章のまま公開されることはありません。</p>



<p>当ウェブサイトは現在鋭意製作中です。本公開後に再びご訪問頂ければ幸いです。</p>

他、段落（中文・長文）、リスト、定義リスト、テーブルなど。

続きを読む

SiteTemplate07:Autumn Lovely

by

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
時期ハズレの秋用テーマです…

このテンプレートは１カラムの固定レイアウトで、slideBoxを使用してスクロールバーをカスタマイズしています。
元々ブログ用に作ったものなので、普通のサイトだと使いづらいかもしれません。
コンテンツのスライドはslideBox.js ver1.0を改変してマウスホイール対応にさせてます。
詳しくはこちらの記事を参照»[mootools]slideBox ver1.0をマウスホイールに対応させる
下方向の処理は手抜いてるので普通にスクロールバー出した方がいいかも。

トップページでコンテンツを非表示にするスクリプトと、
マウスオーバーで一言コメント表示するToolTipも仕込んであります

フォントサイズ指定はYUIのやつ使ってます。

SiteTemplate07:Autumn Lovely

  • 1Columun 2BOX
  • ＸＭＬ宣言あり
  • ドキュメントタイプ：XHTML 1.0 Transitional
  • 文字コード：UTF-8

続きを読む

[WP]WordPressテンプレートカスタマイズ用小技メモ（３）

by

テンプレートカスタマイズするときに使えそうなソースをつらつら書き散らすよ！（その１・その２）
自作関数ネタが多いです。

METAタグのgeneratorを消す

デフォルトだとheadにwordpressが自動でgeneratorを追加しますが

<meta name="generator" content="WordPress 2.7" />

meta name=”generator”はセキュリティ的に入れない方がいいと言われてます。
これ入ってるとバージョンアップサボってるのもモロバレ。（ex：このブログ）

アクティブテーマのfunctions.phpに以下１行追加

remove_action('wp_head', 'wp_generator');

remove_action()関数は必要のない動作を一発で消す事が出来るので覚えとくと便利。

keyで指定したカスタムフィールドの値を取得する

プラグイン使わなくても一応出来るよ。ってことで。

functions.php

function getCustom($key,$id) {
	$custom = get_post_custom_values($key, $id);
	if(count($custom)!=1)
		return implode("<br />",$custom);
	else
		return $custom[0];
}

値が複数ある場合は改行でくっつけてから帰します。

テンプレートファイルのループ内

print getCustom("key",get_the_ID());

the_ID()使うならループ内、変数とかに入れておけばループ外でもいける。
直接テンプレートファイル内に関数の部分入れて処理しても良い。

続きを読む

[WP]TinyMCEのビジュアルリッチエディタにカスタムボタンを追加する

by

WordPressのビジュアルエディタに自作したボタンを追加する方法についてのメモです。
TinyMCEのプラグイン作成手順メモにもなっています。

ver2.5以下は確認してないのでどうだか分かりません。多分TinyMCEのバージョンが違うので動かないと思います。
ver2.7は動きました。
ver2.9も動きました。

TinyMCE自作ボタン
©Fugue Icons

サンプルとして▼こういうテーブルをボタン１発で追加出来るようにします。

Table Sample Caption
Name  
Address  
TEL  
FAX  
URL  

プラグインとかで記事のテンプレートを作っておくという手もあるけど、ボタン挿入の方が汎用的に使えるので楽です。
エディタへのテキスト挿入以外にもいろいろな事がやれます。

結構面倒くさいので初心者向きではありません。
あとついでにエディタ内のスタイル変更についても解説しています。

なお、この方法はTinyMCE Advancedの影響を受けません。

セレクトメニューについて追記

続きを読む

[WP]WordPressテンプレートカスタマイズ用小技メモ（２）

by

テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その１はこちら。
今回はテクニカルなものが多いかもしれない。

グローバルメニュー的なもの

ページとかカテゴリー単体にリンクしたい場合には、get_category_link()及びget_permalink()を使う。
引数はそれぞれカテゴリーＩＤとページＩＤです。

<ul id="glovalnavi">
	<li><a href="<?php echo get_option('home'); ?>" rel="index" title="<?php _e('Go to site top.'); ?>">HOME</a></li>
	<li><a href="<?php echo get_category_link(1);?> " rel="category" title="<?php _e('View all posts in Event information.'); ?>">イベント情報</a></li>
	<li><a href="<?php echo get_permalink(1); ?> " rel="page" title="<?php _e('Sample Page.'); ?>">ページ</a></li>	
</ul>

パンくずリンクぽいもの

single.phpとかにHOMEとカテゴリと記事タイトルのリンクを出すだけで作れます。
ループ内に以下のソースを入れる。

<p><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a> &gt; <?php the_category(' | ') ?> &gt; <span><?php the_title(); ?></span></p>

もっと実用的にタイトルと連動させるならこの記事の関数が便利だと思う。

続きを読む