月: 2009年12月

Webサイト用 年末年始の挨拶例文まとめ

by

トップページに載せる手頃なやつがなかったから自分でまとめた。
個人サイトからビジネスサイトまでいろいろ。記事下に行く程仰々しくなります。

テキストエリアに入っているのでコピペ出来ます。

Javascriptによる自動表示はこちらの記事に書いてます

2020年仕様に更新

続きを読む

[MooTools Tutorial] MooTools用プラグインの作り方

by

このエントリーはMooToolsチュートリアル特別編で、MooTools用プラグインの作成手順をステップバイステップで晒しています。
解説ソースの元にしているのはmooContreGalleryですが、
チュートリアルに使っているソースは実際配布しているものと仕様が異なります。

初歩的な説明はかっ飛ばしているので、詳しい解説については公式のドキュメントとか高橋文樹さんの日本語訳ドキュメントなどを参考にどうぞ。

プラグインを作るにあたっての前提と必要なファイルの用意

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを実装するプラグインです。
元々「これどうやって作るの？」という質問に答えるために作ったものですが、結構いい感じに出来たので許可を頂いた上で公開するに至りました。
そういうわけなのでこのチュートリアルは質問に対する回答でもあります。

HTMLソースは本家とだいたい同じという前提ですが、すべてをスクリプト側で補うようには作っていないので
利用にあたってはCSSやソースにいくつか決まりごとがあります。

  • リスト要素(LI)の中に画像や説明が入っているとする。
  • リスト要素全体にクリックイベントを付与するので、cursor:pointerなどでクリック出来る事を示しておく。
  • サムネイルを入れている要素の背景にローディング画像を上下中央に設定しておく。
  • Fx.Scrollでスクロールさせる場合は下方向に余裕がないと途中でつっかえてしまうので、
    スタイルシートでpadding-bottom:600pxなどしておく。

MooToolsでは配布しやすくするためにClassを使って作るのが一般的。
プラグイン化するにあたって考えた仕様は次の通りです。

  • ギャラリーの主要な要素を別のタグに変更できるようにする
  • 要素を得る時に使うIDやクラス名は変更できるようにする
  • 画像ファイル名に含まれた任意の文字列でサムネイル(_s)と拡大画像(_b)を入れ替える

プラグインは任意で設定変更出来なきゃ意味がない。ってことで、これらはオプションで実現させました。

XHTMLファイルと画像、MooTools Core、Moreを用意。
Moreでは、画像読み込みをするのでAssets、開いたときにスクロールさせるのでScroll、説明をスライドさせるのでSlideが必要です。
（…と結論を書いてるけどMoreは作りながらリストアップしていく事が多い）

XHTMLソースの例：

<ul id="gallery"><!--ID指定するギャラリー-->
	<li><!--ギャラリーの子要素（自動取得）-->
		<a class="thumb" href="images/cat1.jpg"><img title="cat1" src="images/cat1_s.jpg" alt="cat1" width="100" height="68" />
		<!--サムネイル画像とそれを入れる要素。クラス名必須-->
		</a>
		<div class="info"><!--スライドされる説明要素。クラス名必須--></div>
	</li>
</ul>

noscript対策で拡大画像にリンクする場合は上記ソースのようにサムネイルを入れる要素がaタグになります。
サンプルでは上２つだけこのソースです。

続きから口調が投げやりなふいんきになります。

続きを読む

固定ページ: 1 2

[JavaScript,PHP] 新年の挨拶を自動的に表示する

by

新年に限らず、イベントにちょっとしたアクションを起こしたい人向けのスクリプト。
例は簡単にできる画像変更なんですが
やってることはタイムスタンプによる比較なんで、これを応用すればいろいろなことが出来ます。

まず挨拶の画像を用意したら、表示したい場所にこっそり透明の画像を仕込んでおく。
透過画像が作れなければ、背景色と同じ色の画像でもOK。サイズは1px×1pxで。

<img src="spacer.gif" alt="" id="hny" />

次のソースをコピペして、コメントがついている部分の値を適切に変更する。

window.onload = function() {

	var imgName = "hny";//変更対象となる画像のID
	var newPass =  "01.jpg";//変更する画像のパス

	var today=new Date();
	var newday = new Date(today.getFullYear()+1,0,1);//月は０～１１

	if(today.getTime() >= newday.getTime()){
		document.getElementById(imgName).getAttributeNode("src").value= newPass;
	}
}

headやbodyに入れるとソースでネタバレてしまうので、jsファイルにコピペして読み込ませた方がバレにくい。と思う。

※なお、すでにwindow.onloadを使用している場合は、中身だけコピペしてください。

続きを読む