JSファイルは普通に読み込む

javascriptファイルは普通に読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>

実行の箇所をloadで読み込む

そして、実行のjavascript部分を以下のようにします。

$(window).load(function(){
	$.fancybox.open($('.fancybox'));
});

$('.fancybox')の箇所には適用したい要素を指定します。

注意点

以上で完成ですが、注意点があります。

fancyboxは2から商用は有料とのことですのでお気をつけ下さい。詳しくはfancybox2のサイトでご確認下さい。

• fancyBox

ちなみにバージョン1の方を試してみたのですが、うまくいかなくて出来ませんでした・・・ので出来る方法があれば教えて欲しいです。

• fancyBox

他のプラグイン

商用で何か使えないかなと思って探したら、colorboxが同じような機能があったのでそちらを使うと、同じ動作ができました。

こちらでは以下のように実行します。

$("#colorbox").colorbox({
	open:true
});

("#colorbox")の箇所には適用したい要素を指定します。

• ColorBox

jQuery.exFixed.js

それがこちらのjQuery.exFixed.jsです。

更新履歴を見ると、つい最近も更新されていろいろ不具合も修正されているようです。いろいろ検証されていて、デモページも用意してあります。

使い方も簡単ですので、すぐ実装できました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.exfixed.js"></script>
<script>
    $(function(){
        $('#sample').exFixed(); // fixdする要素を指定する
    });
</script>

• IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary

ダウンロード

配布ページは以下から

• Normalize.css: Make browsers render all elements more consistently.

デモページ

HTMLにCSSを適用したデモページが用意されていますので、表示の確認ができます。

• Normalize.css デモページ

解説サイト

またこの「normalize.css」を、なぜこの指定をしてるのかという解説をしてくださっているサイトがありますので、見てみてはいかがでしょうか、

• よさげなリセットCSS Normalize.cssを適当に日本語にしました | nevermind

こちらを参考にして自分の制作の基本となる「normalize.css」「reset.css」を作ってみるのもいいかもしれません。

Gunosyとは

Web上にあふれる情報の中から，毎日，あなたの興味にあった記事を集めてきます。 さらにGunosyは使えば使うほど，あなたの興味を学習し，より良い記事を推薦するようになります。

登録する

TwitterかFacebookのアカウントを使ってログインします。

そうすると情報を送ってくれるメールアドレスと、興味を分析するためのアカウントの追加（Twitter・Facebook・Hatena）設定をします。

解析してくれるので、メールがくるまであとは待ちます。

メールを受信

解析が終わるとメールが先ほど指定したアドレスに送られてきます。

さらに推薦記事を見たい場合は「すべての推薦記事を確認する」をクリックします。

Gunosyのページで見る

そうするとGunosyのページに飛びます。

記事の一覧のページが開きます。上のメニューでカテゴリーも選べます。

ちなみにリンクをクリックして、記事を読むと下記のように「既読の記事」になります。

「Wingdings」と「webdings」

自分がご紹介するのはこの「Wingdings」と「webdings」です。ご覧のとおり絵文字フォントです。

Wingdings　絵文字フォントの一つ。Microsoft Windowsには標準添付されている。英語で「ドンチャン騒ぎのお祭り」の意。

以下の画像はフォントの一部です

アイコンや装飾に使える！

特に凝ったアイコンではなくてもよい場合はこちらをそのまま使えそうですし、ちょっと加工するだけでも面白いものが作れそうです。

どうしてこのフォントをおすのかというと、昔デザインの業務にまだ関わりがあったころ「もう少し装飾を～」との依頼を受け、「そういえばWingdingsに 使えそうな模様っぽいのがあったな・・・」と思い使ったのが印象に残っています。

一覧ページ

以下のが直接表示される一覧ページへのリンクです。IEで見たほうがいいかも・・・

• Webdingsフォントによる絵文字一覧
• Wingdingsフォントによる絵文字一覧
• Wingdings 2フォントによる絵文字一覧
• Wingdings 3フォントによる絵文字一覧

また以下のページではPDFや画像で一覧がありますのでご参考に。

• 「覚書　Webdings　Wingdings　Wingdings 2　Wingdings 3　Marlett」
• わかばマークのMacの備忘録 : 絵文字フォント「Webdings」「Wingdings」

最後に

というわけで、絵文字フォントをご紹介してみました。このフォントはどれぐらい使われてるんでしょうかね？アイコンはみんな作ってるような気もしますが。

フォントの愛を語りませんか？

皆さんのブログ記事で、自分のそのフォントへの愛を語り尽くしてみませんか？特に欧文フォントのweb上の情報は圧倒的に英語が多く、webcre8は読めてません...。好きなフォントなのになんでそのフォントが出来たか、とかはサッパリ、そんなの悲しいですよね。この機会に調べてみるのも良いのではないでしょうか。もちろんデザイナに限らず、見ていて美しいといった思い入れを持っているなら大歓迎です。

お約束はタイトルに#LOVEFONTのハッシュタグをつけてもらえればOK。

どう書いたらいいかわからない方は、とりあえず当記事に見出しを合わせてもらえればよいかと思います。飛ばしたい項目は飛ばしても構いませんし、書きたい項目があれば追加して頂いて構いません。勿論和文、欧文、有料、無料も問いませんのでなぜそのフォントなのか、あなたの感じる魅力をゴリゴリ表現してみてください★

• 特定のフォントを強く愛する利用者の皆さんへ

まずはインストール

そのブログがあるレンタルサーバーはロリポップを使っています。インストールからやってもよかったのですがはやく触りたかったので、サクッとインストールができる WordPress簡単インストール機能を使ってインストールしました。あっという間に設置が出来ました。

今度はファイルのアップロードからやろうと思います。基本的にはファイルをまるまるっとアップするだけだと思いますが。

テーマの作成

しばらく管理画面をウロウロしたあと、早速新しいテーマの作成に入りました。作成にあたって以下のサイトを参考にしました。

• Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
• WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
• WordPressのオリジナルテーマ作成フロー・基本マニュアル - かちびと. net

しかし、最初にきちんと読まなかったからつまづいたのが、新しいテーマが表示されないというところでした。

いろいろ見たところ、index.phpとstyle.cssがアップされていないと表示されない（選択肢に出てこない）ようですね。あとサイトのスクリーンショットをとっておき、screenshot.pngでアップしておくと、 テンプレートを選択する画面で表示されます。

どの記事もわかりやすい説明なので、このあとのテンプレートの反映は順調に進むことができました。基本的にはもともとコーディングしてあったものに、WordPressのPHP関数を当てはめていけばいいだけです。

あと、MovableTypeを使ったことはあったので、こちらも参考にしました。

• Movable Typeのタグの機能をWordPressのタグで実現する方法一覧 « Codaholic

完成

先ほどのサイトを見ながら進めていると、簡単なブログなのですぐに完成しました。

WordPressはとても情報量が多く、検索で調べるとすぐにやりたいことの情報が出てくるので楽しいですね。

• daybreak-dawn

WordPressの公式オンラインマニュアル

その他の機能などはオンラインマニュアルの以下のサイトにのっています。

• WordPress Codex 日本語版

HTML5, きちんと。

HTML5の基本的な説明がのっています。

ASCII.jp：IE9もサポートしたHTML5とは何か？

こちらもHTML5の説明です。

• IE9もサポートしたHTML5とは何か？

HTML5 における HTML4 からの変更点

HTML4からの変更点についてのw3cの日本語訳。

• HTML5 における HTML4 からの変更点

HTML5.JP - 次世代HTML標準 HTML5情報サイト

HTML5に関する様々な情報がのっています。よくタグの使い方を見てます。

• HTML5.JP - 次世代HTML標準 HTML5情報サイト

html5入門

html5の入門サイト。HTML5になっての追加・削除されたタグなどが見れます。

• html5入門

HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)

実際にHTML5のソースを用いて、どう変わったかを説明しています。

• HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)

HTML5から意味の変わる要素

新しいタグの追加や削除だけではなく、意味が変わるタグもあります。

• HTML5から意味の変わる要素

前から気になってたHTML5について色々調べてみました

いろいろなHTML5に関するサイトがまとめられています。HTML5で作られたゲームなどへのリンクもあります。

• html5入門

HTML5マークアップの心得と作法

HTML5でのタグとマークアップの仕方が丁寧に説明されています。

HTML5とは

2008年に草案が公開されたhtmlのバージョン5の事です。この記事を書いた時点ではまだ正式勧告がされていません。2014年の予定だそうです。

ただどちらかと言うと正式勧告がされているかどうかではなく、ブラウザがサポートしているかが問題ですね。

どこまでがHTML5なのか

とてもわかりやすいスライドが以下になります。60～64スライドに書いてあります。

広義と狭義

以下のサイトでは広義と狭義に分けてHTML5の説明をしています。

広義のHTML5とは主にAPI（Application Program Interface）で、バックグラウンドでJavaScriptの処理を実行できる「Web Workers」や、Webアプリケーションからローカルのファイルを読み取る「File API」、グラフィックを扱える「Canvas」「SVG」などがあります。

狭義のHTML5とはいわゆるマークアップ言語としてのHTMLであり、分かりやすく言うとタグ関連の仕様のことです。

• ASCII.jp：ここが変わった！HTML5マークアップ入門｜浜 俊太朗のHTML5マークアップ移行ガイド

まとめ

というわけでHTML5とは簡単に言うとタグ関連のことで、APIはまた別仕様書ということのようです。ただ一般的には両方ひっくるめてHTML5と呼んでいるみたいですね。

flickGal

自分が一番つかってるのがこのflickGalです。

PC（IE以外）でも動作します。

• flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです - piglovesyouの日記

flickable

こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。

PCでも（IE6でも）よく動きます。

• jQuery.flickable: iPhone and Android like flick scrolling plugin

flickSimple

こちらもPCでフリックできるようにできるものです。もちろんそのままスマートフォンに使えます。

• jQuery.flickSimple.js

PhotoSwipe

こちらは画像をタッチすると、全画面で拡大画像を表示してくれます。

PCではブラウザエンジンがwebkitのものだけ動作するみたいです。

• PhotoSwipe

flickslide

こちらはスマートフォンのみで動くプラグインです。

• スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

flipsnap

こちらはブラウザエンジンがwebkitのものだけで動作します。

• flipsnap.jsというのを書いた - Webtech Walker

jCarousel

こちらはiPhone･iPadのMobile Safariで動作するようです。コメントを見ると少しいじればAndroidも動くようです。

PCではIE以外で動作しました。

• iPhone SafariでCarousel風のUIを実現するjQuery Plugin「jCarousel」作りました - くらげだらけ（くだくらげのBLOG）

アラート

設定によっては、このようなアラートが出ます。

「Adobe Flash Playerは潜在的に危険な操作を停止しました。」・・・と。

「設定の変更後、アプリケーションを再起動する必要があります。」とありますので、そのまま進んでみます。

設定しかし・・・

そうすると上記のような設定マネージャーが出てきます。しかし、いくら設定し再起動しようともアラートは出続けます。

解決

そして、いろいろ調べたらAdobeのサイトで設定しないといけないことが分かりました。

• Adobe - Flash Player：設定マネージャー - グローバルセキュリティ設定パネル

ここの上記のグローバルセキュリティ設定パネルの設定を「常に許可」に変更します。これでアラートは出なくなりました。

これのために何回FirefoxでFlash playerをクラッシュさせたことか・・・。

DD_belatedPNG.jsを使用すると表示されなくなる

いろいろ調べた結果、原因はiframe内のコンテンツに透過PNGを使うためのjs、DD_belatedPNG.jsでした。
IE6ではiframe内のコンテンツでDD_belatedPNG.jsを使用するとiframe内のものが表示されないことがあります。

解決方法

上記の参考サイトにも書いてありますが、iframeにposition: relative;を指定すると表示されるようになります。

/*-- iframeに適用 --*/
iframe {
position: relative;
}

PNGをSVGにして再配置する際に、基準となる要素を明示してあげる必要がある。（らしい） IE6乙！

ただ自分が確認したところ、そのpng画像がオンマウスで画像が変わるときにまた表示されなくなってしまったので、以下のようにしたら治りました。

/*-- iframe内のページに適用 --*/
body {
position: relative;
}

IE6でjsで動的にiframe内の表示を変えるときの注意

iframe内のコンテンツを動的に変えるとき、IE6ではiframe内に表示されるコンテンツの最大の高さのまま遷移してしまうことがありました。（iframeの高さが伸び縮みしない）

これはiframe内コンテンツのbodyにheight: 100%;が指定されているとなりました。ですので、こういう場合はiframe内コンテンツにつけないようにしましょう。

body {
height: 100%; ←これをつけない
}

SWFObjectを使って動画を読み込む

動画を埋め込む際は、動画の共有にある「埋め込みコード」でiframeかobjectのタグをサイト内に入れますが、 APIを使うときはFlashなどを表示する時によく使う「SWFObject」を使用します。このJSを使わなくてもできるそうですが、 このAPIがFlash Player8からしか対応してないので、この「SWFObject」を使ってFlash Playerのバージョンを検出することをリファレンスサイトですすめています。

• SWFObject

設置は以下のような感じで

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
var url = "http://www.youtube.com/v/動画のID?enablejsapi=1&playerapiid=ytplayer";
swfobject.embedSWF(url, "player", "500", "400", "8", null, null, params, atts); 
</script>

JSファイルまでのパスや、動画URL・動画のサイズ・パラメータなどは適宜変えて下さい。

• SWFObject を使用した YouTube プレーヤーの埋め込み

制御するJSを記述する

次に制御をするJSを記述します。自分はjQueryを使って書いています。

<script type="text/javascript">

/* プレーヤーへの参照を取得 */
var ytplayer ='';
	function onYouTubePlayerReady(player) {
	ytplayer = document.getElementById("myytplayer");
}

/* 制御するJS */
$(function(){
	/* idがplayのものをクリックすると動画の再生と一時停止 */
	$("#play").toggle(function(){
		if(ytplayer) ytplayer.playVideo();
		},function(){
		if(ytplayer) ytplayer.pauseVideo();
	});
        
	/* idがstopのものをクリックすると動画の停止 */
	$('#stop').click(function(){
		if(ytplayer) ytplayer.stopVideo();
	});
	
	/* 動画が再生中のときに処理したい記述をhogehogeに記述する例 */
	if(ytplayer){
		var movieStatus = ytplayer.getPlayerState();
		if(movieStatus == 1) {
		hogehoge
		}
	}
});

</script>

使える関数は以下のサイトに載っています。

• 関数

サンプル

サンプルは以下のページにあります。実際の挙動など確認できます。

• YouTube プレーヤー デモ

参考サイト

• YouTube JavaScript Player API リファレンス
• YouTube JavaScript Player API｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room
• YouTubeの動画(Flash)プレーヤーをJavaScriptから制御する

基本情報

<meta property="og:title" content="タイトル" />　
<meta property="og:type" content="オブジェクトのタイプ" />
<meta property="og:url" content="このページのURL" />　
<meta property="og:image" content="表示される画像のパス" />　
<meta property="og:description" content="概要を説明する文章" />　
<meta property="og:site_name" content="サイトの名前" />

場所の情報

<meta property="og:latitude" content="緯度" />　
<meta property="og:longitude" content="経度" />　
<meta property="og:street-address" content="住所（番地など）" />　
<meta property="og:locality" content="市区町村" />
<meta property="og:region" content="都道府県" />
<meta property="og:postal-code" content="郵便番号" />　
<meta property="og:country-name" content="国名" />

連絡先情報

<meta property="og:email" content="メールアドレス" />　
<meta property="og:phone_number" content="電話番号" />　
<meta property="og:fax_number" content="FAX番号" />

動画

<meta property="og:video" content="動画のファイルパス" />　
<meta property="og:video:height" content="動画の高さサイズ" />　
<meta property="og:video:width" content="動画の横幅サイズ" />　
<meta property="og:video:type" content="動画のファイルタイプ（application/x-shockwave-flashなど）" />

音楽

<meta property="og:audio" content="音楽のファイルパス" />　
<meta property="og:audio:title" content="音楽のタイトル" />　
<meta property="og:audio:artist" content="音楽のアーティスト名" />　
<meta property="og:audio:album" content="音楽のアルバム名" />　
<meta property="og:audio:type" content="音楽のファイルタイプ（application/mp3など）" />

Facebook

<meta property="fb:admins" content="ユーザーID" />
<meta property="fb:app_id" content="アプリID" />

og:typeのカテゴリ

• Activities
  • activity
  • sport
• Businesses
  • bar
  • company
  • cafe
  • hotel
  • restaurant
• Groups
  • cause
  • sports_league
  • sports_team
• Organizations
  • band
  • government
  • non_profit
  • school
  • university
• People
  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • profile
  • public_figure
• Places
  • city
  • country
  • landmark
  • state_province
• Products and Entertainment
  • album
  • book
  • drink
  • food
  • game
  • movie
  • product
  • song
  • tv_show
• Websites
  • article
  • blog
  • website