WEB／システム／IT技術ブログ

「jQuery Easing Plugin」でjQueryのアニメーションにイージング効果をつける

jQueryではanimateという関数を使ってアニメーション効果を得ることができます。

アニメーションといえば、Flashなどでは初速と終速をコントロールしたイージング効果を加えることができますが、jQuery単体で利用できるのは「linear」と「swing」の二つの効果のみです。

jQueryでさまざまなイージング効果を実現するためには、以下のプラグインを組み込みます。
jQuery Easing Plugin

実装方法

実装方法ですが、本サイトからソースを取得し、jQueryをベースに読み込みます。

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

例えば、animateでイージング効果「easeOutCubic」を実装する場合、以下のように指定します。

$('#sample').animate({left: "+=100px", top: "+=100px", opacity: 0}, 1000, 'easeOutCubic');

この場合、サンプルオブジェクト「id=sample」がフェードアウトしながら右下に移動するのに、イージング効果がプラスされます。
jQueryの仕様については割愛します。

「「jQuery Easing Plugin」でjQueryのアニメーションにイージング効果をつける」のつづきを読む

jQueryプラグイン「colorbox」は使いやすいLightboxの決定版

LightboxはjavascriptとCSSで、ブラウザの同一画面の上に画像を上書きするように表示させるスクリプトです。現在は「Lightbox 2」になっているようですね。
Lightbox 2

同様のスクリプトは数多く存在しますが、その総称は「Lightbox」と呼ばれているのが一般的です。それだけ当初のインパクトが強かったんでしょうね。

それぞれ、メリット・デメリットはあるのですが、最近ではもっぱら「colorbox」を使っています。
ColorBox, A jQuery Lightbox
導入方法は難しくなく、本サイトやサンプルを見れば簡単に組み込むことができます。

さて、なぜ「colorbox」なのかを、代表的なスクリプトと比較してみたいと思います。

「jQueryプラグイン「colorbox」は使いやすいLightboxの決定版」のつづきを読む

スマートフォンサイトのviewport設定でピンチがピンチ

iPhoneでスマートフォンサイトをみていたら、ピンチで画像を拡大できない。
という問題が発生しました。
ピンチとは2本指で画面をつまむようにして、画面を拡大・縮小することです。

結果からいうと、viewportの設定が原因でした。

viewportはスマートフォンサイトを画面にフィットさせるためのメタ情報であり、これまでは「おまじない」感覚で下記のように設定していました。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

これら要素を一つ一つ確認してみると、なんてことはない、きちんと理解していれば解決できる問題でした。

「スマートフォンサイトのviewport設定でピンチがピンチ」のつづきを読む

スマートフォンサイトの日本語フォントはCSSで指定する意味がほとんどない？

スマートフォン用のサイトを構築する場合、コンテンツの容量を極力おさえるために、画像を多用せずに、HTML5とCSS3で作成するのが一般的です。
CSS3の表現力を活用すれば、これまで画像として切り出していたバナーやボタンなどの要素を代替することが可能です。

この時、一つ問題になるのは日本語デバイスフォントです。

コーディング作業ではデザインを元にサイトを構築するのですが、デザインのバナーやボタンには多種多様な日本語フォントが使用されていることが多いです。これをスマートフォンのデバイスフォントで忠実に再現しようとすると難しい場合があります。
なぜなら、スマートフォンで使用できる日本語フォントは限られているからです。

代表的なスマートフォンで、デフォルトで用意されている日本語フォントは以下のとおりです。

iPhone ヒラギノ角ゴ W3
ヒラギノ角ゴ W6
ヒラギノ明朝 ProN（iSO 5のみ）
Android Droid Font
※日本産のAndroidは各メーカーオリジナルの日本語フォントが入ってるケースもあるそうです
「スマートフォンサイトの日本語フォントはCSSで指定する意味がほとんどない？」のつづきを読む

Firefoxの移行とThunderbirdの移行

旧PCから新PCへ作業環境を移すにあたり、FirefoxとThunderbirdを移行したので、その作業メモです。

FirefoxもThunderbirdもMozillaの製品であり、その移行方法は基本的に同じです。
何れも、プログラム部分と個人設定などを含むプロファイルのディレクトリが分かれているので、移行はそのプロファイルを移すことになります。

移行環境

今回、私が実施したのは「Windows7 32bit」から「Windows7 64bit」マシンへの移行です。新旧マシンの共に、Firefoxのバージョンは8.0.1、Thunderbirdのバージョンは9.0.1です。
これより古いバージョンについては未検証ですが、近いバージョンであれば、同じ手順での移行は問題ないと思います。

※後日、「Windows7 64bit」から「Windows8.1 64bit」でも移行しましたが、同手順で問題ありませんでした。

「Firefoxの移行とThunderbirdの移行」のつづきを読む

xamppのMercuryを使ってローカル開発環境からメールを送信する

例えばxamppなどを利用してローカルでメールフォームなどを開発する場合、その動作を確認できなくて困ることがあります。
原因は、単純にローカルマシン自身がSMTPサーバではないからです。

xamppにはその問題を解消するために「Mercury」というソフトが同胞されています。これまで、幾度となく何度もチャレンジしたのですが、うまくメールを送信できませんでした。
しかし、今回、設定に成功したのでメモとして残しておきます。

ローカル開発環境の詳細について

今回、ローカル開発環境におけるメール送信環境を実現したのは以下の環境です。

OS Windows7 64bit
XAMPP 1.7.7
Apache 2.0
PHP 5.3.8
Mercury 4.62

もちろんApache、PHP、Mercuryはxamppにデフォルトで同胞されているものを使用しますが、参考までに。

「xamppのMercuryを使ってローカル開発環境からメールを送信する」のつづきを読む

Windows7のホームグループという機能を使ってファイルを共有する

Windowsでファイルを共有する場合、Windows XP以前では「ファイル共有」というメニューから設定できました。
それがWindows Vistaになって、ネットワークセキュリティだか権限だか、そのしくみの詳しくは知りませんが、なかなかファイル共有ができずに、四苦八苦した経験があります。

今回、Windows 7同士でファイルを共有することになりました。
またVistaのような苦労を強いられるのかと思いながら少し調べていたら、Windows 7には「ホームグループ」という簡単にファイル共有が実現できる機能が用意されているようです。

早速ですが、その機能を試してみました。

例えば、同一LAN内に設置した2台のWidows 7マシン、ホームグループを作成するPC1と、ホームグループに参加するPC2でファイルを共有することを想定して、設定を進めてみます。

ホームグループが利用できる設定かどうか？

まず、ホームグループを利用するには、PC1とPC2共にネットワークの設定が「ホームグループ」である必要があります。
確認方法は「コントロールパネル」⇒「ネットワークとインターネット」⇒「ネットワークと共有センター」を開き、「アクティブなネットワークの表示」から使用しているネットワークが「ホームネットワーク」になっているか確認します。「ホームグループ」以外の場合、「ホームネットワーク」に変更します。

「Windows7のホームグループという機能を使ってファイルを共有する」のつづきを読む

PHPで文字列をまるめるのに便利な関数「mb_strimwidth」

PHPでCMSやブログを構築する場合に、デザインの都合上、文字列をまるめたい場合があります。

文字列をまるめるとは、任意の長さで文字列をカットして、末尾に「…」などを付加することです。
例えば

PHPで文字列をまるめるのに便利な関数「mb_strimwidth」

これを10文字でまるめると、以下のようになります。

PHPで文字列をまる…

PHPで文字をまるめる処理を書くと、以下のようになります。

$str = "PHPで文字列をまるめるのに便利な関数「mb_strimwidth」";
if(mb_strlen($str) > 10){
	echo mb_substr($str, 0, 10) . "…";
}else{
	echo $str;
}
「PHPで文字列をまるめるのに便利な関数「mb_strimwidth」」のつづきを読む

CakePHPでEmailコンポーネントを使ってメールを送ってみる

CakePHP 1.3.12でEmailコンポーネントを使ってメールを送ってみます。

コンポーネントを読み込む

Emailコンポーネントを利用するためには、以下のようにしてコントローラで宣言するだけです。

var $components = array(
	'Email',
);

メールテンプレートを用意する

CakePHPではメールテンプレートを、ビューと同じようなしくみで作成することができます。
例えば、テキストメール「sample.ctp」というビューを作成する場合、以下にファイルを用意します。

/app/views/elements/email/text/sample.ctp

ビューの中身は、通常のページを構築する要領です。例えばこのような内容でしょうか。

<?php echo $to ?>さま

メールどうもありがとうございます。

<?php echo $from ?>より
「CakePHPでEmailコンポーネントを使ってメールを送ってみる」のつづきを読む

jQueryでフォームチェックをするときのメモまとめ

毎度の事ですが、Javascriptでメールフォームなどのチェックを実装する場合に、
「selectの場合はこれでよかったっけ」、「checkboxの値の取り方は。。。」と調べなおしてしまいます。
分かっているつもりでも、仕事上、使う場面が頻繁でもないのでうっかり忘れてしまいます。

困ったときの手間を省くために、ここのメモに書き留めていきたいと思います。

最近ではjQueryの組み込みがデフォルトになってきたので、サンプルはjQueryベースとなっています。ここでjQueryの使い方についての詳細は省きます。

「jQueryでフォームチェックをするときのメモまとめ」のつづきを読む

Monthly Archives