フォーカスしたい箇所にだけシャープネス効果をつける

これは私が独自に開発した画像処理の方法なので間違っているかもしれないのですが

画像にシャープネスをかける際に、私はいつもフォーカスしたい箇所のみにシャープをかけます。
「楕円形選択ツール」にぼかしを50px～100px程、対象とする画像の大きさや解像度に合わせて
ちょうど良いぼかし具合に設定してその選択範囲内のみにスマートシャープをかけます。

（分かりやすいように、きつめにシャープをかけています）
全面に同じ強さでシャープネスをかけるとベタとした感じになりますが
フォーカスしたい箇所のみにシャープネスをかける事で、画像内にメリハリが出来ていい感じになります。

注意したいのは、シャープネスはリサイズや色調補正した後でかけるようにすることです。
どんな画像の場合も「シャープ処理は最後に」「シャープ処理の後は保存のみ」 と覚えておくとよいと思います。

今年の春からWeb業界に飛び込んできた新人Web屋さんたちは、そろそろ仕事にも慣れてきて、任される作業も少しずつ増えてくるので、制作が楽しく思えてくる時期かもしれませんね。

この春ドアズに入社した新人Web屋さんたちも、入社して早３ケ月が過ぎました。

でも、敢てこの時期だからこそ、仕事の基本に立ち返ってもらいたいと思います。（今回はドアズの新人さんたちに一番読んでもらいたい。）

※ドアズ的な考え方をshimanto独自の見解で書いてますので、相違がある場合は、こんな考え方もあるんだな的に眺めて下さい。

①常にクライアントの方向を向く

Web屋さんが仕事としてWebを制作する場合、どんな時もクライアントのことを忘れてはいけません。我々はクライアントに利益をもたらすための一つの手段としてWebをつくっているのです。

もっと言えば、クライアントのWebサイトは「クライアントのお客様」の為に存在します。つまり、エンドユーザーに利益をもたらすWebサイトを我々は提供し、そのことにより、クライアントが利益を得るのです。※利益とはもちろんお金だけの話ではありませんよ。

あなた（わたし）が作ったバナー、あなた（わたし）が書いたソースコード、あなた（わたし）が実装したスクリプト、あなた（わたし）がそれらをつくるために費やす時間、その全てがクライアントの方向を向いていて欲しいと願っています。

②森を見て木を考える。

新人の頃は、データ整理・コーディング・パーツ制作など、サイト全体のことよりも、数多くの細かい作業を任されるものです。するとどうしても目の前の作業のみに捕らわれがちになってしまいますが、そんな時こそ、距離をおいて自分の作業を眺めてみてほしいと思います。

自分が与えられた作業がそのWebサイト全体のなかでどのような意味を持っているのか、そのWebサイトのデザインの中で自分がつくるデザインはどのようにあるべきなのか、自分が書くソースコードはそのWebサイトの中では正しいのか、などなど、他にも色々なことが見えてくると思います。

③自分の意見や考えを常に持つ

最も陥りがちなのは、作業者になってしまうことです。全てに指示がなければ何もつくらなく（つくれなく）なってしまいます。

デザインであれば、出来上がったデザインに本人の意思が全く入っていなかったり、要件に対して質問すらないケースもあります。

コーディングであれば、ファイル同士の相関関係やルールなどを気にせず、独自のルールで構築してしまったりすることもあります。

要件に対して、こうすればもっと良くなるのではないかというような、自分の意見や考えを常に持つようにして欲しいと思います。

与えられたものを作るだけWeb屋さんにならないようにしましょう！

まとめ

新人さん！①クライアントの方向を見て、②全体から自分の作業の意味を考え、③制作物に自分の意思をしっかり注ぎ込む、そんなWeb屋さんを目指して下さい。

「作る」が「造る」になり、「造る」が「創る」になるように

トグル処理はON／OFF交互に入れ替わるような処理のことです。
jQueryの「toggle()　：表示／非表示」を使用すればすごく簡単に実装できます。

例えば
#buttonの要素をクリックするたびに
#textの要素を表示／非表示させたい場合。

<p id="button">これは#buttonの内容です。</p>　←ここをクリック
<p id="text">これは#textの内容です。</p>　←これを表示／非表示させたい

上記のHTMLを用意したら、
「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。

$(function(){
$("#button").click(function(){
$("#text").toggle();
});
});

たったこれだけ。
以下がサンプルです。

これは#buttonの内容です。　←ここをクリック

これは#textの内容です。

さらに「toggleClass()　：クラスの追加／削除」を同時に実行すればもっと便利です。
また「toggle()」へ「fast」や「slow」を追加すれば滑らかに表示／非表示が行われます。

$(function(){
$("#button").click(function(){
$(this).toggleClass('on');　←class="on"を追加／削除
$("#text").toggle('fast');　←fastを追加で滑らかに表示／非表示
});
});

そのクラス追加／削除を利用しボタンの背景画像などの設定しました。
以下がサンプルです。

これは#textの内容です。

上記のように#textを初めは非表示にしたい場合は#textにCSSで「display: none」を指定してあげればOKです。
#buttonへは「cursor: pointer」を設定してあげればボタンであることが分かりやすいです。



標準ブラウザとしてfirefoxをずっと使用していましたが、最近Google Chromeを使いはじめた中山です。
もう多くの方がGoogle Chrome利用されているのではないでしょうか。

なんといっても表示が速く、サクサク動くのがGoogle Chromeの利点だと思います。
エクステンションも充実していて、自分の目的に合わせて機能を拡張できます。
今回は、ウェブデザイナーやデベロッパーの方々におすすめなGoogle Chromeエクステンションをまとめてみました。

Firebug Lite for Google Chrome

firefoxでおなじみfirebugのChrome版。HTML、CSSの編集ができます。
ウェブデザイナーには必須ですね。

Web Developer

Web DeveloperのChrome版です。様々な Web 開発ツールを統合したツールバーです。
CSS や フォーム、画像、その他あらゆる要素に関する情報を表示することができます。

MeasureIt!

こちらもよく使います。画像やバナーのサイズを測るのに便利な定規ツール

Webpage Screenshot

簡単にスクリーンショットが保存できます。

PageShot

こちらもスクリーンショット。
ボタンを押してぺージをキャプチャーし、画像を新しいタブで開いて切り抜きできるようになっています。

Clip to Evernote

Evernoteをお使いの方にはおすすめ。
気になる記事や画像をEvernoteに簡単クリップ。

Google Calendar Checker

ボタンひとつでgoogleカレンダーを閲覧できます。これで自分の作業日程をしっかり管理。

IE Tab Classic

ボタンひとつでIEのビューを確認できる便利機能。

１．facebookの「シェア」とは？

facebookのウォールに表示される、リンクのことです。Twitterで言うところのつぶやきでのようなものです。
Twitterであればタイトル、URLしかつぶやけませんが、facebookのシェアでは画像とタイトル、説明文、URLをシェアすることができます。

２．facebookのシェアに必要なこと

facebookのシェアはとってもカンタンです。
まずやることの確認。

• シェアのリンクを張る
• OGPを設定する

これだけです。とってもカンタンですね。
それではまずは基礎的なところから…。

３．シェアのリンクを張る

<a href="http://www.facebook.com/sharer.php?u=[シェアしたいurl]&t=[シェア投稿時のタイトル]" rel="nofollow" target="_blank">リンク表示したい文字または画像</a>

ボタンなどを使わずにリンクを貼る場合は上のソースの通りです。
ブログなどでみる、facebookのボタンからシェアを実装したい場合は、下のようにになります。

<a name="fb_share" type="ボタンのタイプ" share_url="シェアしたいurl">シェアする</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

４．OGPを設定する

まずOGPとは何か。OGPとはOpen Graph Protocolの略称で、このWEBページがどういうものなのか、
という情報をプログラムが理解できるように書く記述方法のことです。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>facebookシェアの実装時に起きた問題 | disスタッフブログ</title>
    <meta property="og:title" content="facebookシェアの実装時に起きた問題 | disスタッフブログ">
    <meta property="og:type" content="article">
    <meta property="og:description" content="facebookのシェアを実装してみたら、色々問題が起こったので、解決策をブログにまとめてみました。">
    <meta property="og:url" content="http://dis.ne.jp/blog/topics/3660.html">
    <meta property="og:image" content="http://dis.ne.jp/blog/entryimg/share_2.png">
    <meta property="og:site_name" content="disスタッフブログ">
  </head>
  <body>

こんな風に書きます。このブログのタイトル、説明文などを記述することができます。
ちなみに指定しなかった場合、シェアのタイトルには、そのままhtmlソースのtitleタグが、
説明文には、metaタグのdescriptionから引っ張ってくるようです。

この時サイトのURLや画像のURLは、相対パスではなく絶対パスを指定する必要がありますので、ご注意を。
OGPで画像を指定しなかった場合、サイトで使用されている画像の中からランダムに選ばれてしまいます。

詳しくはこちらのサイトをご覧下さい。とても分かりやすいです…！
「フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記」
「Facebookなどで使われている「OGP」の一覧」

５．OGPで設定したタイトルや画像が出てこない

以上で設定は終わりです。
これで実際に動くはず！なんですが、実際に動かしてみると、ちゃんとOGPで指定しているタイトルや画像が出てきません。
どうしてこんなことが起こるのか。

結論から言えば、これはfacebook側のキャッシュが残っているからです。
一度でもOGPを設定していない状態で、facebookのシェアを実行してしまうと、
facebookにシェアのキャッシュが保存されてしまいます。
これはfacebook側のキャッシュなので、
クライアント側でブラウザのキャッシュを消したところで意味がありません。

facebookのキャッシュはすぐに消えるようなものではなく、結構長いこと残っているみたいです。
いつ消えるか分からないものを待ってもいられませんので、キャッシュを消してくれるツールを使います。

「URLリンター」
このツールは元々、シェアを行った時にどのようにタイトルや画像が出てくるか、ということを確認するために使うツールです。
本来の使い方ではりませんが、副次的にキャッシュも消してくれるというありがたいツールです。
当たり前ですが、BASIC認証かかってるURLはチェックできません。
（私はコレをやってしまってしばらく悩みました…。）

６．タイトルや説明文は指定のものが出てきたけど、画像が出てこない！

一定の大きさがないと出てきません。
どこからいけるのか検証はしていませんが、150px×150pxだと上手くいきました。
画像が出てこない！と思ったら、サイズを確認しましょう。

ちなみに、facebookのシェアはこれからなくなっていくらしく、今後はイイネ！に統合されるそうです。
いきなりシェアが使えなくなったりしたら困りますね…。
個人的には、ウォールに文字だけ出てくるイイネ！より、画像も出てくるシェアの方が好きなんですけども。
facebookさんは仕様をガンガン変えてくるので、これからも注意して動向を追っていかなければと思います。

企業サイトでも、サイトマップなどでは特に
CSS3で角丸にしてたりするのをみかけるので
重い腰をあげてそろそろCSS3を使用していこうと思い、
IE（6～8）にもCSS3の角丸やグラデーションを適用してくれる「CSS3　PIE」を使用してみました。

使用するには、
まず下記より「PIE.htc」をダウンロードし所定の位置に保存。
»CSS3 PIE

後はCSSに
「behavior: url(/パス/PIE.htc); 」
と追加するだけです。
※ 読み込まなかった経験はないですが、http://～始まる絶対パスを記述しても反応しないこともあるそうです。

div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
behavior: url(/PIE.htc); ←これを追加するだけ
}

WordPressで使用する場合は、

behavior: url(/wp-content/themes/テーマ名/PIE.htc); 

という風に簡単に使用できます。

CSS3　PIEを適用している要素の背景などが
きちんと表示されない場合はさらにその要素に

position:relative;

を追加することで回避できます。

また、下記のように個別に指定しても反応しないようです。

border-top-right-radius: 10px;

CSS　グラデーションを使用する際は

-pie-background: linear-gradient(top,#FFF,#999);

という風に頭に「-pie-」を追加したものを追加しましょう。つけないと反応しないことが多かったです。
しかし、ｉｅ９はCSS　グラデーションに対応していませんので別の対策が必要です。

各ブラウザのCSS3の対応状況は下記で確認できます。
»findmebyip｜HTML5 & CSS3 Support

色々試している途中ですし
まだまだ他にも問題がでてくると思いますが
背景画像などとうまく組み合わせて
かっこよく使用してみたいと思います。
次はトグル処理を試したいと思ってます。

はい、では今日は前回の続編。
いよいよアナリティクスを埋め込みます。

Google Analyticsからga.phpは取得済みですね!!←強引
ヒント!!↓

1.ga.phpを書き換える

先頭に以下を追加します。

//PHP4で使える用の設定

require_once '(ルートパス)/pear/PEAR/PHP/Compat/Function/setrawcookie.php';
require_once '(ルートパス)/pear/PEAR/PHP/Compat/Function/file_get_contents.php'

次に、以下の記述を書き換えます。（一応コメントアウトとしてます）

// Always try and add the cookie to the response.
 /*   setrawcookie(
        COOKIE_NAME,
        $visitorId,
        $timeStamp + COOKIE_USER_PERSISTENCE,
        COOKIE_PATH);
*/
//PHP4で使える用の設定
	setrawcookie(
		COOKIE_NAME,
		$visitorId,
		$timeStamp + COOKIE_USER_PERSISTENCE,
		COOKIE_PATH,
		'',
		false,
		false
	);

2.ga.phpをアップする

モバイル版のディレクトリが分かれている場合（※）はそこへ、
ルートと同じところにあればルートにアップします。
どっちでもいいです。

（※）トラッキングコードに追加するときに、ベースURLを追記する必要があります。

3.トラッキングコードをhtmlに埋め込む。

ga.phpを取得する際に表示されていた
トラッキングコードを指示通りの場所に埋め込みます。

このとき、2でモバイル版のディレクトリにga.phpをアップした場合には以下の通り追記してください。

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "";//ここにモバイル版のディレクトリまでのURLを書き込みます
    $url .= $GA_PIXEL . "?";

・・・

↓
↓

  function googleAnalyticsGetImageUrl() {
    global $GA_ACCOUNT, $GA_PIXEL;
    $url = "http://www.samplehogehoge.com/m";
    $url .= $GA_PIXEL . "?";

・・・

4.htmlをphpに偽装する。

最後に、大前提なポイントを説明するのを忘れていました（汗

「ga.php」はPHPのページじゃないと使えません。

.htmlの場合は、拡張子をひとつずつ.phpに変えるか、
.htaccessに

AddType application/x-httpd-php .htm .html

と記述してアップしてください。

5. あっぷあっぷ

以上で完了です!!

長い道のりでした・・・

最近はめっきり紙の書籍を購入しなくなってきた今日この頃、
手元に置いておきたい本は紙で購入、
読み捨てる本は電子版orPDFスキャンが理想ですが、
正直、iPadで電子書籍を読むのが苦痛です。

百科事典を手に持って読んでるくらい重量を感じるので
仰向けで寝ながらiPadで本を読む、寝落ちする、顔面に激突するが、しばしば。
iPadをベットからをうっかり落とさないかヒヤヒヤしたりめんどくさいです。
スタートレックのパッドみたいに、親指と人差し指で持てる軽さと
机に叩きつけても壊れない丈夫さがiPadの進化の形のような気がします。

ちょうど、PDF本を読むのがめんどくさい、
なんとかしないと今まで購入したPDF本が無駄になる
だれか代わりに読んでくれっ！
と思っていたら、iphoneにはアクセシビリティでテキスト読み上げ機能があり
PDF本をOCRでテキスト化していれば
なんとか実現できそうなことが分かりました。

まず、私の利用している書籍スキャンサービスの中には、
OCR化のオプションがあり、これでテキストは抽出できます。

試しにiBooksアプリにPDFをコピーさせて再生。
元々のOCRの精度の悪さと、
iPhoneの読み上げ間違いが多々ありますが、
まずまず意味は伝わります。
しかしひとつ問題がありページ送りは手でしなくてはならないようです。
めんどくさい！

オーディオブックは、理想の怠惰読書スタイルです。
現状は、Amazon→スキャンサービス→PDFダウンロード→OCRテキスト→音声変換ですが、
そもそも日本でもiBooksでEPUB形式の本が購入できれば
こんな苦労はしなくてすむのですが、オーディオブック化の道のりは長そうです。

去る2011年6月18日、HTML5-WEST.jpの村岡正和氏が主催されている「第7回HTML5読書会」に参加してきました。第1回に参加してから実に6回ぶり。羽田野太巳氏の「徹底解説HTML5」を読み進める会です。色々と興味深い内容がありましたが、figure要素からの話の流れで、altコンテンツ属性（以下alt属性）について重要な議論がありました。今後のマークアップの考え方にも重要な意味があると思い、読書会と本の内容を踏まえつつ、独自に復習してみました。
※alt属性を指定すると、画像がリンク切れなどで表示されない場合は代替テキストが表示されます。また、スクリーンリーダーはaltタグの文章を読み上げます。
以下のような画面のコーディングを考えてみましょう。

これまでのコーディング

alt属性はHTML4では、画像の代替テキストとして使用されます。なので「ラベンダー畑の画像」などの文章を入れていました。

altに与えられた新しい役割

HTML4ではイメージを簡単に説明する代替テキストで良かったので、上記のような表記で良かったのですが、HTML5からは「フォールバック」という役割が与えられることになります。

もしイメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことが求められるのです。

イメージの代役を果たすというのは、イメージの前後の文章と、altコンテンツ属性のテキストをつなげて読み上げたときに、違和感なくユーザーに伝わることなのです。

引用元：「徹底解説HTML5」羽田野太巳著

「徹底解説HTML5」の中では、電話越しにイメージを説明することを想定して考えると良いとあります。
なるほど。なるほど。

これまでもalt属性はアクセシビリティのために使用されていましたが、さらに厳密にアクセシビリティに配慮して使用していく必要性が出てきたということですね。

では今回のケースでは具体的にどのように設定すべきか考えてみましょう。

イメージのタイトルをalt属性に入れない

alt属性に「爽やかな青空の下で一面に広がる鮮やかな紫色のラベンダー畑」と入れてみました。

一見、画像の情報は伝わりますし、良さそうなのですが、画像を詳しく説明していたとしても、alt属性に画像のタイトルとなるような文字を入れてはいけないようです。

このような書き方の場合は、イメージのタイトルとしての情報になりますので、alt属性ではなく、title属性で指定する形が正しいようです。

フォールバック的な設定

画像をテキストに代えて読んでも、スクリーンリーダーで順番に読み上げられても、イメージが表示されているのと同じ内容が違和感なく伝わらなければいけません。

なので、alt属性に「爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。」と指定しました。

これであれば、全てテキストで表示された際も、
「この季節、北海道ではラベンダーが見どころの一つです。爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。壮大な景観に感動」
と内容に繋がりを持たせつつ、情報を伝えることができているのではないでしょうか。

上記は使い方のほんの一例で、HTML5ではalt属性の使い方がかなり細かく規定されているようです。title属性とalt属性の使い分けや考え方は、実務の中でも今から慣れていく必要がありますね。次回以降の読書会でalt属性が記述されている個所がでてくるので、それまでに事前に勉強しておこうと思います。

京都GTUG（http://www.kyoto-gtug.org/home/）
HTML5-WEST.jp（http://www.html5-west.jp/）

文字を入力して、画像を入れて、表紙をいれて、保存するだけ。
すごく簡単にePUB形式の電子書籍ファイルが作成できます。

しかしこのままでは日本語が文字化けしてしまうそうなので
最低でも下記の2点は設定が必要です。

（1）「Tools」→「Meta Editor」でタイトル、著者、言語が設定できるのですが
ここで必ず言語で「Japanese」を選択すること。

（2）コードビューに切り替えて
＜html xmlns=”http://www.w3.org/1999/xhtml”＞を↓
＜html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”＞へ変更しましょう。

ということで、ソフトを少しでも操作すると分かると思いますが、
Sigilをしようすれば写真集やフォトエッセイなら誰でもサックっと作成できて楽しそうですよね。

では最後に、ePUBファイル閲覧についてですが、
PCでePUPを閲覧するにはFirefoxのアドオン「EPUBReader」がお手軽です。ブラウザにドラッグ＆ドロップで閲覧できます。

iPhoneなどと同期する場合は作成したePUBファイルをiTunesへドラッグ＆ドロップしてBOOKを同期するだけ。あとは適当なリーダーをゲットして閲覧してください。では。