2009年5月アーカイブ

最近、ようやくいろいろな所でフロントエンド・エンジニアという言葉を耳にするようになってきた。

webに携わっている人なら、あまりよく知らなくとも一度ぐらいは聞いた事はあると思う。

今まではWebの制作の職種名は「Webデザイナー」や「コーダー」という名前でした。

でも、Webサイト構築が以前にもましてより巨大化、複雑化していくにつれて、その作業内容も大きく変わってきているのが実情。

ビジュアルを担当する文字通りの「デザイナー」や、そのデザインに沿ってCSSの設計を行う「フロントエンド・エンジニア」、その設計にしたがってマークアップを行う「マークアップ・エンジニア」などは、Webサイト構築におけるそれぞれの作業を担当する職種名。

それぞれがが深い知識や経験が必要だと思うし、これらを「Webデザイナー」の一言で表現するにはもう難しいのかとも思う。

HTMLやCSS、JavaScriptを「きれい」に書けるという技術は、なかなか見えにくいけれども、きっととても重要だし、今後も業界自体その傾向は強くなるんじゃないかな？

海外では日本ではまだあまり聞かない、「情報アーキテクト」という職種もしっかりと確立されてるそうな。（情報アーキテクチャを考えて決める人）

イメージデータの形式は沢山ありますが、その中でもＪＰＥＧは保存をするたびに
劣化してしまいます。
一度や二度では違いはわかりにくいのですが、
保存を繰り返していくことですぐにわかるほど劣化していきます。

少しずつ圧縮されて劣化する画像の様子がムービーでまとめられていたので紹介します。



新規保存を連続で６００回繰り返して劣化していく２０秒間のムービーです。

連続で見ていくと明らかに劣化していく様子がはっきりわかります。

この動画は単純に同じ圧縮率でＪＰＥＧ保存を繰り返しているのではなく、
少しずつ圧縮率を上昇させています。


↓動画はこちら
GENERATION LOSS | HADTO.NET

最近、「Googleキラー」などとも呼ばれているWolfram Alphaが、
5月15日から試験公開されている様子。

「Wolfram Alpha」って？
聞いたことがない方もいるかと思います。
このプロジェクトが目指しているのは、
「究極のナレッジベース」だとか。
すごく簡単に言うと、映画などによく登場してくる、
「人工知能」的な。
人間の質問（しかも口語的な自由文）に対して、
最大限わかりやすく的確な、プロフェッショナルレベルの回答をする、
「エキスパートナレッジベース」とのこと。

従来の「検索エンジン」とは少しちがう存在だ。





ただし現時点では、解析や統計などの数学的な分野は強いけれど・・・
といったところらしい。

まだまだ開発途中とはいえ、いつの日にか、
人間に質問をするようにコンピュータに質問、
それに対して音声やグラフ、イメージなどを駆使してわかりやすく回答してくれる。
...そんな映画のような話が実現されるのかもしれない。

それはそれで非常に楽しみでもある。

adobeが何かまたやってる。

どうやらブラウザを通じて『Flash』プレゼンテーションを作成できるものらしい。

しかも現在無料。

その名もAcrobat.com Presentations。




まことに勝手な私事ですが、googleとadobeがあれば何とかなると思っている自分には

とても喜ばしいニュースです。

Adobe の広報担当者は取材に対し、E メールで次のように述べたらしい。

「Acrobat.com Presentations は現在、PDF 形式ファイルへの書き出しが可能。
今後のリリースでは、一般的な他のファイル形式についても読み込みと書き出しが可能になる。
誰もが自分のラップトップ で PDF によるプレゼンテーションを行なったり、
ConnectNow (Acrobat.com で提供している無償の Web 会議サービス) を通じて、オンラインでプレゼンテーションを発表することもできる」

だってさ。

最近のホームページ制作では必ずといっていいほど必要になってくる、
Flashの制作。

「こういうのを作りたい」
参考にしているFlashはあるけれど、実際にどうやって組んでいるのか、
アクションスクリプトはどう記述したのか、仕組みを知りたいときがあると思います。
そこで出てくるのが、解析ツール。






バージョンやプロテクトなどにより対応できないものもありますが、


 * flaファイルにデコンパイル
    
    SWF Decompiler
    Motion Decompiler

 * Action Scriptの抽出

    Flare

 * swf内で使用しているファイルの抽出

    HugFlash
    SWFTOOLS

 * ページに使用しているswfを抽出・保存

    SWF Catcher for IE
    SWF Catcher for Firefox

など、用途別にフリー/シェア含めて、わりと多くのソフトが存在します。

先日シェアの体験版を使用してみたところ、
swfからflaへのデコンパイル・Action Scriptの解析ができました。

Flash、AS専門の方などは特に必要ないかと思われますが、
Flashのさらなる技術・知識の向上を望まれている方にはとても勉強になるツールでもあります。

ご興味のある方、
試してみてはいかがでしょう？

ＷＥＢ制作に関して、切っても切り離せないのが画像掲載、加工です。

ＷＥＢ上で表示するにはデジカメ等で撮ったままのサイズでは大きすぎて
表示にも時間がかかってしまいます。
ＵＰするのも困難です。


必ずリサイズが必要になってきます。

ブログ等一般の方でも気軽にＷＥＢ上で自分の作品を世の中に
公開できる世の中になってきました。

そこでお気軽に写真をリサイズできるツールを紹介。





「縮小専用。」です。

使い方は至って簡単。

縮小したいサイズを選んで
写真をドラッグ＆ドロップするだけ。

写真が置いてあった元のフォルダに縮小された写真が
生成されます。

小難しい設定が必要ないので
使い勝手がとてもいいです。

一度に沢山の写真も縮小できるので
とても楽です。


↓ダウンロードはこちら。 
「縮小専用。」正規サイト

かねてから噂されていた、Android OS搭載のGoogle Phoneがついに日本でも発売されるらしい。
発売予定は今年6～7月とのこと。




↓詳細はここで確認
http://ht-03a.nttdocomo.co.jp/index.html?wdycf=google

シンプルなインターフェイスにタッチパネルという、
現在では割と「王道」となっているスタイル。

当然ながらフルブラウザ搭載、
GPSを利用したGoogle Mapで360度のストリートビュー、
Youtubeビュワーなども搭載済み。
どこかと対抗してか、音楽プレイヤーも入っているとか。

色は黒と白の２色で発売されるそうで、
本体価格はかなり低く設定されている。

個人的には非常に気になる１台ではあるが、
人気のほどはどう出るのか、非常に楽しみなところ。

Java scriptのライブラリーです。

何度か使ったことがありますが、結構好きです。

確かJqueryとは共存できたけど、prottypeとはぶつかった気がします。

初歩的なことであれば、Jqueryよりか、簡単に導入できます。



少し昔は、業界自体が、何から何までCSSで済まそうとしてた様な雰囲気もあり、無理やりCSSを使って

表現するやり方も、多数紹介されていましたが、そんな中、構造はhtml、スタイルはCSS、で動きはJS、

という最も基本的であり、忠実なやり方が見直され、そんな中、スクリプトがいまいち分からないデザイナー

達へJSの敷居を低くしてくれたのがmootoolsやJqueryといった有名ライブラリです。

サイトに何かアクセントが欲しいときなど、一度覗いてください。

2008年12月に公開されて以来、その圧倒的な速さと軽さで一躍有名になった「Google Chrome」ですが、ついにメジャーバージョンアップを果たして正式にバージョン2（2.0.172.28）となり、５月２２日よりダウンロードが可能となりました。


画面の描画を行うレンダリングエンジン「WebKit」とJavaScriptの実行エンジン「V8」がアップデートされたことで、これまでも定評のあった高速動作がさらにパワーアップ。また300以上のバグが修正され、複数タブでウェブアプリケーションを動作させた際の速度の落ち込みを防ぐなど、安定性もかなり高まっています。

タブなどの操作性も修正され、新たにいくつかの新機能も追加されました。


実際に使ってみると、動作は非常に軽い。
動画などの読み込みも非常に早かったです。

今のところＣＳＳが変に読み込まれたりもしていないので
もうしばらく使ってみようかと思います。

最近、「Twitter」に代表される"マイクロ Blog"が流行のようす。
マイクロ Blog とは、通常アルファベットで200字以下のテキストや写真、
オーディオクリップなどが公開できる、「ちょっとブログ」のような存在。
チャット＋ブログといった感じでしょうか。
Blog より簡単で手軽に使えるところが、その人気の秘密なのかも。



その Twitter が最近、「クリックジャック攻撃」にあっているらしい。
こういったクラッキングの標的になったこと自体、
Twitter がインターネットにおけるメジャーなツールになった証なのかもしれない。

最近では他のメディアよりTwitterのほうがいち早く最新ニュースなどの情報が得られる、
とまで言われているとかいないとか。

とある調査によると、
日本国内での「Twitter」などのマイクロBlogを利用したことがあるというユーザーは、
全体で約14％程度だとか。
日本国内での浸透にはもう少し時間がかかりそうだけど、
面白いツールになる可能性は十分にある気がする。

最近発見したPhotoshopのパターンとカスタムシェイプです。

骸骨を探していたら、こんなところに行き着きました。

http://www.brusheezy.com/brush/732-Skull-Patterns

またまたネットワーク関係の新しいサービスを紹介。

Glympseはスマートフォン対応のサービスなのですが

いったいどういったサービスなのかというと

 

制限時間付で自分の現在地を公開できるサービスです。

自分の位置を知らせたい相手にGlympse経由でリンクを送るだけで、そのリンクを受け取った相手はPC上のマップであなたの位置を追跡することができるというわけです。

ただのGPSとも似たような感じですが、最大の特徴は制限時間を設けられるということです。

一定時間内の公開によって適度にプライバシーを守ることもできます。

インターフェイスも動的で見やすい感じがします。

利用してみたいとは思うのですが

英語です。

 

新しいものがどんどん世の中に発信されてきています、
ついて行くのが大変です・・・

 

ホームページ制作で使用する画像をPhotoshopなどで編集する際、
レイヤーの追加など、一部の編集が「できない」状態になっていることがよくあります。

これは読み込んだ画像が「インデックス」モードになっているためで、
「RGB」モードに変換すれば通常通りの編集が可能になります。
ちなみに、GIF形式の画像を読み込むとインデックスモードとなります。

インデックス解除の操作方法は以下のとおり。

上部メニューから、イメージ → モード → RGBカラー でOK。
...いたって簡単です。




で、そもそも「インデックスカラー」って何？
という方のために少しご説明します。

RGB方式（JPEGなど）の画像は、ピクセル上に直接色情報を指定していきますが、
インデックス方式ではまず、あらかじめ使う色を決まった数だけ指定（赤20％、緑30％、青50％など）
しておき、その色に対して通し番号を付けていきます。
ニュアンス的には...絵に使う色をパレットに絵の具で何種類か作って、置いておくような感じ、でしょうか。
そしてピクセル上には色を直接指定するのではなく、色の通し番号を指定していきます。
実際に色を表現する際には、色番号から元の色を呼び出して表現します。

で、何の意味があるの？
と言いますと、
色情報そのものでなく色番号を情報に乗せるので、
画像自体のデータ量をRGBに比べ軽くすることができるのです。
データ量が軽いということはアクセシビリティの向上などにもつながりますね。

ただし、使える色数としては8bit（256色）が使われることが多いのでご注意です。
写真などの自然画はJPEGなどに任せたほうが無難かも。

欧文フォントの王様は、おそらく全員『Helvetica』って言うと思う。

な、ぐらい歴史と実績を持つ欧文フォント。

と、windowsユーザーにはおなじみに『Arial』

比べるとこんな感じ。



両フォントとも非常に似ていて、片方が片方の代用として使われることもよくあります。

ちなみに念の為、読みは『ヘルヴェチカ』。『ヴェ』です。

一方、『アリアル』という人もいれば『アライアル』という人もいる感じだそうな・・・

看板やそれこそ探せばそこらじゅうで目にするHelvetica

欧文フォントに悩んだときは使ってみてはどうですか？

縮小画像付で関連記事のリンクを生成してくれるブログ向けスクリプトが発表されました。

ただ、日本語向けには作られていないので精度に関してはイマイチらしいです。


文章のみのリンクより
画像付のリンクのほうが当然人の目につきやすく
サイトの滞在時間を延ばしてくれる。

記事に含まれている画像を縮小して添付してくれてるので
過去の記事などを再度見てもらえるという利点もある。

JavaScriptを貼り付けるだけなので気になる人は試してみてもいいと思います。

最近Operaをインストールしてみたのですが、
これが意外に快適と判明。
かなりストレスのないブラウジング可能でした。

IE中心のこの時代、IE用に作られたサイト達が、
Operaで問題なく表示できるのか早速試してみました。

そこで1つ判ったのが、
「lightboxのレイアウトが正しく表示されない場面がある」
ということ。




しかしこれはIEでもFOXでも起こりうる問題。
そう捉えれば、大きな問題ではないのかも。

しかしOperaのシェアは現在ほとんどないのが現状で。
優秀な（だと思う）ブラウザが、これほどまでに普及していないのは、
悲しいやらもったいないやらで。

今後のOperaの動向、気にしたいです。

Web デザインにおいてすべきこと、すべきでないことをまとめたページを見つけました。

 

でも英語です。

ですがわかりやすいように Do's and Don'ts が左右に並べられていますので

なんとかわかるかも。

 

デザインには絶対はないので人によってはそれは違うというのもあるかと思いますが

参考程度に眺めてみるのも面白いかもしれません。

 

参考リンクもあるのでよくわからないときは原文を見るのもいいかもしれません。

中々親切設計です。

が、英語です。

 

 

http://webdosanddonts.com/

今さらですが、いつも使うくせにいつも忘れてしまうリンクカラー複数設定。

毎回毎回、『あれ、なんだっけ？』と言って調べているので、ここら辺で残す事に。

以下がHTMLコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>リンクカラー</title>
<meta http-equiv="Content-Style-Type" content="text/css">

ここがリンクカラーのスタイル

<style TYPE="text/css">
<!--
a.red:link { color: red; }
a.yellow:link { color: yellow; }
a.green:link { color: green; }
-->
</style>

</head>
<body>
<a class="red" href="top.html">赤文字リンク</a>
<a class="yellow" href="home.html">黄文字リンク</a>
<a class="green" href="nikki.html">緑文字リンク</a>
</body>
</html>

こう書くと

こう表示される。

要はクラスでカラー設定を増殖させて、実際のリンクにクラス属性を付与。

非常に簡単なんだけど、なぜかいつも忘れてしまう。

でもこれで大丈夫。

ＷＥＢデザインに限らず、様々な物作りにかかわってくる要素。

色。

 

日々悩まされています・・・

色相環みながらイメージに合う色を・・・と考えるのですが

全体をみると中々うまくいかないものです。

 

単色では安っぽいものになってしまうので

濃淡のある色使いをしたいのですが・・・日々勉強です。

 

同じ同系色で明度や色相を変えて複数使い分けるだけでも

かなりまとまったイメージには仕上がります。

ポイントで相対色なども使いって行くとメリハリもでて

見やすいものが出来上がると思います。

web制作で必ず外せないのがIE（Internet Explorer）。

いまの主流はIE7ですが、最近はIE8もリリースされ、今後IE6のシェアがどうなるのか気になるところ。

クライアント様は100％といっていいほどIEをご使用中です。

シェアにおいては相変わらずIEがダントツですね。

なぜここまでIEが普及しているのか？

・OSに標準装備されているから使っている
・「特に不便を感じない」
・「他のブラウザという選択肢の存在を知らない」

といった理由が大多数ではないでしょうか。


しかし巷ではIEの機能性についてはあまり良い話は聞かないのがほとんどですが、

逆にIEの良いところは何なのか？と考えてみると、

やはりWindowsと共にウェブブラウジングを一般家庭にまで親しみやすくした点...

ではないかと。機能性についてはもはや語るまでもなく...。

そんなIEですが、最近こんなツールを発見。

IE Developer Toolbar（MS公式）



Web ページの CSS、HTML、JavaScript 等を編集、モニタしたりすることができるプラグインです。

下部にページの要素が表示され、編集などができます。

FireFoxのアドオン「Firebug」のような感じですね。

興味のある方は一度ご使用してみては。

富士通とウィルコムから新しい技術が発表されました。

遠隔操作でPCの電源が入っていない状態でもHDDのデータを消去できるとか。

例えばパソコンが盗まれてしまったときに、中のデータを守るために消去してしまおうという代物です。

 

要はPHS技術の流用みたいです。

この先色んなことに使えそうな技術です。

WEB制作においてもクライアント様のデータを沢山使用することにもなるので

データを守ること、重要です。

 

ただ・・・・もし誤動作とかしてしまったら怖いですが。

デザイン関係の話でしばしば登場するワード、

「黄金比」・「白銀比」について。

まず「黄金比」。
古来より最も美しい縦横比だといわれています。
モナリザやオードリー・ヘップバーンが美しいのは、この比率が1：1.618、
つまり黄金比だからとも言われているそうで。
自然界においてもオウムガイの殻の螺旋（らせん）形状が黄金比の代表としてよく出ます。


次に「白銀比」。
これは日本に古来から伝わる比率だそうで。
正確には1：1.4142だそうです。
古来より均整の取れた美しい比率だといわれ、
仏像の顔や、法隆寺の五重塔を上からみた形状など、
日本の建築や彫刻、生け花などに用いられてきた比率で、
大和比（あるいは、日本の黄金比）ともいわれます。



webの世界でもよく多用されているこれらの比率ですが、
黄金比を自動計算してくれる便利ツールなども最近発見。

http://zapanet.info/blog/item/1298

...意外と便利ですね、これ。

いつも思いますが、72dpiの世界、奥深いです。

先日、クライアント様のモバイルサイトをYahoo!モバイルカテゴリーに登録させていただきました。

今後もさらに大きくなると予想されているモバイル市場。

ただ、日本のモバイル市場は独特であり、世界のモバイル市場の現状とはかなり違うらしい。


群馬県太田市の質屋さん　『質 林家』様

各キャリアごとに仕様が大きく異なり、私の好きな端末、Nokiaも日本市場から撤退してしまった。

日本用に端末を合わせる開発費の問題だとか。

しかも、国内でも都心部と地方都市ではモバイルの在り方も少し違う気がする。

クローラーも未だ未知数なところが多く、謎が多い気がする。

3キャリア各社を警戒しつつ、各メーカーの仕様があり、さらにスマートフォンもあって、
普通のケータイもあって。

もう少し、各社各メーカーが今後の為に協力すればいいのにと思う今日この頃。

GoogleはGoogle Latitudeのユーザーが同サービスを利用しないユーザーとも位置情報を共有できる2つの新アプリケーションを導入したらしいです。


1つ目はGoogle　Talk向けで、ユーザーがGoogle
Latitudeに位置情報を知らせるたびにユーザーのチャットステータスを位置情報（都市レベル）付きでアップデートするもので

2つ目は、ユーザーのブログやソーシャルネットワークのプロフィールへ正確にユーザーがどこにいるかを示すバッジを貼り付けることができるものとなっているそうです。


Google Mapsを埋め込むのと同様に、ユーザーは地形表示のタイプやズームレベルを選択でき、また同サービスはユーザー向けにGoogle
Latitudeへのリンクを含む簡単なコードを提供しているそうです。

adobe不具合でお悩みの皆様へまたひとつご報告です。

先日再び制作マシン不具合となり、リカバリをしようと、いつもどおりadbeの「ライセンス認証の解除」を押しました。



ところが返ってきた答えが、

「ライセンスの認証の解除に失敗しました」

・・・なぜ？？？

何度やっても同じなので、いろいろ調べてみましたが、あまり情報は無く。
唯一出てきたのが、「Acrobatの認証解除を20回以上行うと出ます」という情報。

もちろん20回も認証解除を行っている訳はなく、現状結局サポートに連絡するしかない様子...。

しかもadbeのサポートはGW中はお休み。なんてこったい。
もう少しサポートしてほしい・・・。

今回得た教訓としては、「土日祝日、連休中にadbe認証関係は控えたほうが無難」といったところでしょうか。

皆さんもお気を付けください。

先日、仕事上最重要のDreamweaverに不具合発生。

ローカルのindex.htmlをDR上でマウスを乗せた途端にアプリ強制終了。

以前から調子も悪く、この際リカバリーとなった。

しかし、リカバリー直後のDW、またしても強制終了。

原因を探るため、STEを共有し、各自のローカルに落とした途端、そのマシンも死亡。



しまいには、ソース全コピペでの新規ページ制作でも症状変わらず。

テストアップのページをソース表示し、結局原因はCSS。

でも原因のCSSはずっとつかってたし、いまだにindex以外には表記してて、
divのIDが原因だったんだけどけっして、グローバルな名前は付けてないし・・・

未だに真の原因は謎。

 このレポートは、インターネットコムと goo リサーチが行った調査だそうです。

 

調査対象は全国10代～50代以上のインターネットユーザー1,071人。男女比は男性52.9％、女性47.1％。年齢別は10代16.1％、20代18.3％、30代21.6％、40代16.3％、50代以上27.7％。

回答者全員に対して「検索サイトで検索結果の右側や上部に表示されている広告リンクをクリックしたことがありますか」との質問に対して、「ある」との回答は69.5％（744人）と7割程度いるそうです。

 

 

 

広告だとわかっていても自分の気になるものが目に入ったらクリックしてしまいますよね。

次に検索連動型広告のクリック経験がある744人に「検索連動型広告をどの程度、目にしますか」との質問を行った結果ですが、「検索のたびにほぼ必ず」との回答は16.3％（121人）。「よく見る」40.2％（299人）との合計は56.5％と半数を超えていて、「めったに見ない」との回答は5.8％（43人）だそうです。

研究された視覚効果の高い広告を良く見かけます。
人にクリックしていただけるようなものを作れるように
日々研究です。

最近制作しているサイトの中で、「リンクをクリックしたときの点線」、アウトラインをどうしても出したくないものがありまして、少し調べてみました。

少し前はCSSで a { outline: none; } と、これだけで済んだらしいのですが、現在主流のブラウザでは非対応らしく効果なし。



そこで見つけたのが、Javascriptを使ってアウトラインを消す小技です。

やり方は簡単。

・</head>タグの直前に以下のスクリプトを挿入。

<SCRIPT type="text/javascript">
<!--
function disable_links_outline() {
var blur = function () { this.blur() };
for (var i = 0; i < document.links.length; i++)
document.links[i].onfocus = blur;
}
//-->
</SCRIPT>


・<body>タグに以下を記述。

<body onLoad="disable_links_outline()">


この２つの操作で見事点線は出なくなりました。

JavascriptをCSSのように使ってしまった小技ですが、興味のあるかたはぜひお試しください。

ストックフォトサイトとのfotoliaです。

ホームページ制作に欠かせない高画質のイメージを1枚から購入できます。

画質が小さい物なら1枚100円からとお値段も手ごろ。



見ているだけでも飽きません。

素材で悩んだり、いい写真が準備できない時などは心強い見方です。

月極めの料金もあるので制作者サイドにも大変ありがたいサービス。

是非、使ってみてください。

アジアン家具のアグン様のホームページの更新
をさせていただいています。

独特の味わいをもつ家具の写真を加工しつつ
アップしていくと、だんだん欲しくなってきてしまいます。

一度購入しだしたら部屋の家具を
全てアジアン家具で揃えたくなってしまうことでしょう。




アジアン家具の雰囲気にあった
ブラウン系で統一されたデザインのホームページです。