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

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

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

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

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

SiONってリズムマシンも備わってるみたいですね。
Flashで作ったリズムマシンだったら、Flash始めた頃にこれ見てえらく感動しました。

で、これがとても簡単で、DrumMachineをnewしてplayするだけで鳴ります。
（ちなみにパターンとかはデフォルトです）

var drumMachine:DrumMachine;
var draiver:SiONDriver;
draiver = new SiONDriver();
draiver.play();
drumMachine = new DrumMachine(0, 0, 0, 0, 0, 0);
drumMachine.play();

で、クリックで再生。

あと、

draiver.addEventListener( SiONTrackEvent.BEAT , hoge );

drumMachine.snarePatternNumber = 1;
drumMachine.snareVoiceNumber = 1;
drumMachine.snareVolume = 1;

パターンで、音色が...

とActionScript 3.0ライブラリ入門に書いてます。
かなりありますね。
3時間目は、エフェクトでも...。

以上『SiON始めました』でした。

今年の春から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」を設定してあげればボタンであることが分かりやすいです。



メニューとコンテンツの完全2分割になってます。

それでは本題。

今回は、テーマのfuction.phpに書いたいろんなソースを忘れないようにメモエントリーします。

余計なヘッダ要素を消す。

<?php
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' );
?>

このフィルターは、wp-includes/default-filters.phpの202行目あたりにあるので用途に応じて取捨選択します。

remove_actionとは

ベースURLを定義する

<?php
function baseurl($baseurl = 'http://samplehogehoge.com/' ) {
	return "$baseurl";
}
?>
// 使用例
<img src="<?php echo baseurl(); ?>shared/images/logo.gif" alt="ロゴ" />

記事内のテキストを置換

ローカル環境の画像パスとWP上のパスが違うときに使ってます。便利です。

<?php
function replace_text_wps($text){
    $replace = array(
        // '元の単語' => '置換する単語'
        '"../shared/' => '"http://samplehogehoge.com/hoge/shared/',
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}
add_filter('the_content', 'replace_text_wps');
?>

ブログIDで条件分岐

<?php
// ブログIDの取得
global $blog_id;

if ( $blog_id == 1 ){
?>
ブログIDが「1」のときに表示させるもの。
<?php
} else {
?>
「1」ではないとき。
<?php
}
?>

否定のみ。

<?php
if ( $blog_id != 1 ){
?>
「1」ではないとき。
<?php
}
?>

ページスラッグを取得

// 変数名は自由
<?php
$pagename = get_page_uri($post->ID);
?>
// 出力
<?php echo $pagename; ?>

親のページスラッグを取得

// 変数名は自由
<?php
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
	$parent = $wp_query->post->ID;}
else {
	$parent = $wp_query->post->post_parent;
}
	$parent = wp_get_single_post($parent);
?>
// 出力
<?php echo $parent->post_name; ?>

とりあえず初日なんで音を出すサンプルです。
※一回ステージクリックしないと音で出ないです。黒鍵は無視で。

ローカルだとレイテンシーが半端じゃないんですけど、アップしたらそうでも無さげですね、そんなもんなんですかね…。勉強します。

音を出してるのは

var sionDriver:SiONDriver = new SiONDriver();
var sionData:SiONData = new SiONData();
sionData = sionDriver.compile(" t100 @v32 I8 o5  c");
sionDriver.play(sionData);

とりあえずこのブログで毎度色々試してはみるもののいつも一回きりで終わってるんでしばらくSiONネタで。

以上、『SiON始めました。』でした。

標準ブラウザとして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さんは仕様をガンガン変えてくるので、これからも注意して動向を追っていかなければと思います。

去る2011年6月24日日経デジタルマーケティング主催の「Facebookページの作成＆活用の基礎講座！」というセミナーが行われました。ご縁があって参加させてもらうことができました。
講師は「パートナー型」Webプロダクション株式会社TAMの加藤洋氏。

第1部 Facebook時代のソーシャルメディア活用

Facebookの概要とソーシャルメディアの概念、Facebookページを使ってできるようになることなどのお話でした。
ポイントはフェースブックが、企業側の情報発信+拡散の仕組みと、顧客側の（情報収集+評価）の仕組みの両方を兼ね供えるプラットフォームだということです。

第2部 人気のFacebookページを分析

7つの目的別にFacebookを活用した国内外の成功事例を紹介していただきました。
7つの目的とは以下です。

• 製品の開発と革新を進める
• 注目を集める
• 気に入ってもらう、差別化をはかる
• サイト訪問数と売り上げを増やす
• お得意様をつくり、関係を深める
• おすすめや口コミを増やす
• 顧客のことをもっと知る

日本では一部の企業でテストケースが行われているFacebookクーポン。
チェックイン機能はこれからきそうです。
インサイト機能でしっかりと分析も忘れないようにすることも大事です。
twitterとの使い方・使われ方の違いを意識しないといけません。

複数のFacebookページを活用することがポイントになりそうです。企業サイトとしてのFacebookページとブランド訴求用のFacebookページは別々に用意し、使い方もきっちりと分けて考える必要があるのではないかと思います。

第3部 Facebookページの作成計画を立てる

参加者の所属する企業やクライアント企業のFacebookページをつくるという設定で実際にプランニングを行いました。
TAM様独自の現状分析シートからFacebookで実現できそうな事まで落とし込みます。落とし込んだ内容をPGST（目的・目標・戦略・戦術）シートにさらに落とし込みます。

第3部が今回のセミナーの肝だと感じました。PGSTシートに落とし込むためにFacebook自体を理解する必要があり、そのための第1部・第2部だったのかなと勝手に解釈しています。
この作業の流れはFacebookページの制作だけでなく、様々な業務や思考の流れを考える上でも活用できるものでした。

第4部 Facebookページを作成

事前に登録しておいたアカウントで、実際にFacebookページを設置し、アプリの組み込みまでを行いました。
非常に基本的な内容でしたが分かりやすかったです。Facebookページで使うメイン画像は縦長で訴求力アップです。

第5部 まとめ／質疑応答

実際にFacebookページをつくったあと、どのようにすれば良いかという方法や、Facebook独自のアルゴリズムの概要、広告、Facebookページがどのような成長過程をしていくのかなどを解説していただきました。

唯一残念だったのが時間が足らなかったことですね。第1部～2部で1日、第3部～5部で1日使っても充分すぎるくらいの内容でした。第3部で考えた内容を元に、第4部でFacebookページをつくるという流れであればもっと楽しいワークショップになりそうです。

おそらく企業のマーケティングやWeb担当者が主なターゲットだったと思うので、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

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