カテゴリー別アーカイブ: Web制作

新しくなったYouTube再生ページのマークアップを解析する #html5

新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。

マークアップの概要

まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。

ページ全体のマークアップの骨格を画像にしてみました。

youtube-watch

mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。

続きを読む 新しくなったYouTube再生ページのマークアップを解析する #html5

#SocialMedia ソーシャルメディアの重要性はますます高まっているみたい。

未読のままになっていた昨年のTechCrunch Japabの翻訳記事、「インターネット広告の未来: メディアはもはやメッセージではない, 人がメッセージなのだ」をいまさら読んだのだが、UCCのTwitterマーケティング炎上騒動などを経て今読んだことはかえって良かったかもと思った。日本でもソーシャルメディアマーケティングの重要性については以前よりも指摘されるようになったと感じる。以下、記事中の気になる部分を抜粋してもう少し掘り下げて考えてみたい。

– ソーシャルメディアの拡大によって、インターネット経験の中心がページから人へと変わった。

この点は実感として共感できる。Twitterをどっぷり使っている場合、ググる頻度は確実に減る。なぜなら、検索するまでもなく誰かが補足情報やソースをツイートしていることがよくあるからだ。また、自分のフィードリーダーの新着をチェックするより前に、タイムラインから先にチェックした人のコメントから注目すべき情報を知ることも多くなる。Googleやフィードが誘導するのはページなので、それらの利用頻度が落ちているということは、インターネット体験の中心がページではなくなっていることを意味する。

それ以上に顕著なのは、ある情報が注目に値するかどうかの判断に、「誰が勧めている情報か」という判断基準がこれまで以上に大きくなっていると言う点だ。もちろんこれまでもクチコミは重要な判断基準として認識されていた。しかし、人と人との関係が非対称なTwitterにおいて、ツイートがフォロワーに届くさまを「クチコミ」というには違和感があるし、メディアとしてのそれに近いように思う。

したがって、メディアがメッセージであるのなら、人もまたメッセージになる、というわけだ。学生時代にマクルーハンをちょこっと読んでいたので、この「人はメッセージだ」という転回はなかなか刺激的で楽しい。

– 代理店たちは毎回そのときだけで終わる“なにかすごいキャンペーンアイデアはないかね“タイプのビジネスから卒業したいと願っている。

この部分のセリフは、まだまだ実際に言われるだけに苦笑いというところだが、もちろんクライアントに「何かすごいキャンペーンをやりましょう」と言っても見向きもされなくなる時代が迫っていることを意味すると思う。「囲い込み」という単語も、そろそろ死語にしていいよね。

– 代理店は彼ら(=パブリッシャー)の貴重な(中略)オーディエンスを(中略)大量の広告在庫を抱える広告ネットワークにはした金で売り飛ばそうとするが、それはパブリッシャーにとってまったく割に合わない。

サイトの価値を単純なインプレッション数とクリック率に落としてしまうと、本当に儲からない。かといって、「ソーシャルメディアマーケティング時代には、単純な指標など存在しない」というのも味気ない。何か、複数の指標を組み合わせて国民幸福度のような、サイトの魅力を指標化することを考えてもいいかもしれないと思いました。

Google Maps APIの地図でマーカーがドラッグできない件

いやー、はまった。今日半日くらいこの現象に費やしてしまった。

症状:
HTMLに埋め込んだGoogleMapのマーカーで、draggable: trueに設定しているにもかかわらず、ドラッグできない現象が発生。

marker = new google.maps.Marker(this.point,{ draggable: true });

原因はUnloadでした。メモリリーク防止のために入れていたgoogle.map.Unloadがなぜか邪魔していたみたい。Prototype.jsを使用しているので下記の様に書いていたのですが、

Event.observe(window, 'unload', google.maps.Unload());

このコードのカッコひとつ、Unload()←コレ を削除すると、なおった。

Event.observe(window, 'unload', google.maps.Unload);

なんだか分からないけど、助かった!

[CKEditor] インストール方法メモ

オープンソースで高機能、日本語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。

CKEditorのデータをダウンロード

公式サイトからダウンロードします。

http://ckeditor.com/download

解凍したファイル一式をアップロード

アップロードする位置は任意です。ここでは、ルートディレクトリ上に「ckeditor」フォルダを作ってアップロードするとして解説を進めます。

設定ファイルを修正

設定ファイルは「/ckeditor/config.js」になります。こちらを必要に応じて修正します。言語設定を日本語にすればとりあえず使えます。

config.language = 'ja';

エディタを導入したいtextareaがあるページのソースを修正

まず、ckfinderのJavascriptファイルを読み込みます。

<!-- <head>タグ内に記述 -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

次に、CKFinderを起動。WYSIWYGエディタを導入したいtextareaのidが「editor」の場合、以下の様に記述すればOK。

<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor' );
</script>

以上。…のはず。
カンタンすぎてわざわざブログに書くことも無かったかもしれん…

続きを読む [CKEditor] インストール方法メモ

[canvas] アニメーションにしてみる

前回に引き続き、canvasタグでブラウザ上で図形作成中。
今回はアニメーションに挑戦してみます。と入っても、Javascriptで描いている図形のこと、Javascriptでループすれば簡単にアニメーションが作れるのは道理。

ただ、単にループせず、setInterval()を使ってループ時間は調整する。

サンプルをアップしてみましたので、ソースのご参考までに。

続きを読む [canvas] アニメーションにしてみる