はじめましてまえだです。

今回よりラボブログに参加です。

初めての参加で手探りですが、prototype.js入門なるものを投稿してみます。

 

改めて説明するまでもないかもしれませんが、

prototype.js の醍醐味の1つは、なんといってもAjaxを簡単に実装できること。

しかしjavascriptを頻繁に使うプログラマにとっては、

Ajax の必要なリッチコンテンツの制作にとどまらず、

開発効率を上げるために必須のライブラリとなります。

 

その代表格が$(ダラー)関数です。

 

$関数

$関数とはjavascriptを利用したWEB開発にかかせない、
document.getElementById() へのショートカットです。

 

利点は3つ。

 

1.文字数が少なくて済む

意外と重要で、私が$関数を使う最も大きな理由です。
●1文字なのでわざわざコピペする必要がない
●文字の打ち間違いを防げる
●コードがすっきりする。

document.getElementById()の羅列
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");
document.getElementById("test_id");

$()の羅列

$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");
$("test_id");

好みにもよると思いますが、すっきりするだけではなく、特殊記号なので目立ちます。

 

2.関連した追加メソッドを利用できる。

var object = $("object_id");
object.hide();//表示させない
object.show();//表示させる

などなど。

ただしブラウザによってうまく機能しない場合も経験しているので、object.style を調整する方が好きです。

 

3.オブジェクトも受けられる。

ID文字列だけではなく、オブジェクトも受けられます。

オブジェクトを受けても同じオブジェクトを返すだけで結果は同じです。
ただし、独自実装した関数に、オブジェクトを送るパターンと文字列を送るパターンの、
両ケースが考えられる場合には便利です。

 

 

以下は、これからprototype.jsに挑戦しようという方にオススメのサイトです。

併用して利用されるとよろしいかと思います。

●prototype.js 本家...ダウンロードはこちらから。

 http://www.prototypejs.org/

●「prototype.jsの開発者向けメモ」...簡潔でわかりやすいサイトです。

http://www.s2factory.co.jp/tech/prototype/prototype.js.html

●「prototype.js リファレンス」...一通り巻数を網羅したリファレンスサイトです。
http://www.openspc2.org/JavaScript/Ajax/ref/prototype.js/ver1.4/index.html
●「prototype.js逆引きサンプル集」...機能からの逆引きリファレンスです。

http://javascriptist.net/docs/samples_prototype.html

●「gihyo.jp ～特集 prototype.jsを読み解く」...チュートリアル形式です。
http://gihyo.jp/dev/feature/01/prototype

 

今日はFWの画像の縮小拡大方法についてお話しします。

FWの「編集」→「環境設定」(Ctrl+U)の「一般」の中に
「画像補間方式」という項目があります。
これは画像の縮小・拡大をするときの方式になります。

それぞれの方式には下記のような特長があります。

バイキュービック

コレが一番キレイに拡大縮小できます。
この方式では、色と色の境目をお互いの平均値を計算して
なめらかなグラデーションになるようにしてくれます。

バイリニア

精密度はバイキュービックとニアレストネイバーの真ん中。
ある程度のなめらかさは欲しいけど、もうちょっと輪郭線をクッキリさせたい・・
といった場合に使用するといいと思います。

ソフト

輪郭にやわらかいぼかしが入り、細部が不鮮明になります。
正直使い道がわかりません。

ニアレストネイバー

4種類の中で最も画像補間の精密さが低い方式です。
ドットを維持して拡大縮小したいときに使用します。


あまりバイキュービック以外を実作業で使用することはほぼないに等しいのですが、
モバイルサイトを使用するときにたびたびおきる現象を回避することができるので
覚えておくといいかもしれません。

QRコードの拡大縮小がぼけずにできる！

画像を見ていただくとわかると思いますが、
バイキュービックで縮小をするとエッジがぼけるので
特にQRコードの場合などは、読み取れない場合があります。
実際社内端末のSO906iでは読み取れませんでした。
そんなSO906iですが、ニアレストネイバーで縮小をしたQRコードは
見事読み取ることが出来ました！

デザイナーのacurryです。

今日はビジネスの現場でよく使われる
Webデザインの用語について書きたいと思います。

IT業界は、ただでさえ横文字用語が飛び交っている業界です。
結局「用語なんて知ってても知らなくてもどっちでもいいじゃん」
と言ってしまえばそれまで、立場としてはアリなのですが、
お客様のところに言ったときに「...？」となるよりは、
知っておいた方が何かと得をするものです。

というわけで、私が実際にお客様との打ち合わせや
実際の現場でよく耳にするなと思う
Webデザイン関連の用語をお届けします。

IT用語まで手をだすと収集がつかなくなるので
あくまでwebデザインに関するものだけ。
かなりくだけた説明なので、詳しい意味は個別に検索してみてください。

アイキャッチ

主にデザインの中で一番相手の注意をひくもの。目立つ物。

アイトラッキング

ユーザの目線の動きを可視化すること。

（情報）アーキテクチャ

知識やデータの組織化を意味し、 「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術のこと。

RGBとCMYK

RGB→web用、CMYK→印刷用と覚えておけばとりあえず問題ないです。

カラースキーム

どの色をどの配分で使っていくかという計画です。

コンポジションワーク

各パーツ、構成部を分類し配置すること。レイアウトテクニックのひとつ。

画面利用率

そのデザイン全体に、どれだけ空きがあるかということ。 ※関連語：ホワイトスペース

ジャンプ率

本文に対しての見出しの大きさの違い。これが大きいとメリハリが出ます。

スプラッシュページ

雑誌で言うところの表紙のようなもの。サイトイメージを伝えるもの。
例えばトップでフラッシュが大きく使われているようなページがこれに該当します 。

ティザーページ(サイト）

発売前の新製品等に関する断片的な情報のみを公開し、
閲覧者の興味を引くことを意図したプロモーション用のページ。
キャンペーンサイトなんかだと、作る事があります。

トーン＆マナー

広告表現の核となるコミュニケーションメッセージやデザインに
一貫性を持たせること。広告系の会社に行くと耳にします。

ユーザインターフェース

UIとも略されます。
コンピュータシステムとユーザが情報をやり取りするときの境界面、
パソコンでいうと画面とか目に見えるシステムの部分ですね。

ユーザビリティ・アクセシビリティ

ユーザビリティ：「使いやすさ」のこと。
アクセシビリティ：万人が不自由なく利用できる状態にあること。
混同されやすい。

ワイヤーフレーム

Webページの大まかなコンテンツやレイアウトを 大まかに試作したものです。
デザインラフを作成する前にまずこれを作成することが多いですね。


逆にWebデザイン・ITに関する専門用語を
話している相手が知らないというケースも多々あるので、
そういった際はわかりやすい言葉に置き換えることも大事です。

状況に合わせて必要な言葉を選んでいけるように、
日々精進したいものです。

デザイナーのacurryです。 今日はクロスブラウザテストができることで最近話題の 「Adobe BrowserLab」 を使ってみました。

Adobe BrowserLabとは

先月14日にアップデートされたばかりのAdobe BrowserLab。
あのAdobeが公式でブラウザ比較のツールを出しているんですね。
AdobeIDがあれば、誰でも無償で利用できます。
比較できるブラウザは下記の通り。

■Firefox　2.0, 3,0, 3.5　　Windows XP, Mac OS X
■IE 　6.x, 7,x, 8.x　　Windows XP
■Safari　3.x 4.x 　　Mac OS X
■Chrome　3.0 　　Windows XP

試しにサイブリッジのコーポレートサイトを レンダリング比較してみます

URLを入力したら、上記のように表示させたいブラウザをリストから選択。

あとは表示される（レンダリング）を待つだけ！
上記はFireFox3.0（左）とIE7、共にxpOSでの比較です。

IETESTERなどブラウザ比較の便利なツールは多くあるのですが、これはやはりmacOSでの確認もできるのがとても便利です！是非使ってみてくださいね。
下記から利用できます。

「Adobe BrowserLab」

今回はウェブ制作に役立つサイトをいくつか紹介したいと思います。

http://www.russellbrown.com/
Photoshop の伝道師、ラッセルブラウンのビデオチュートリアル。
Tips & Techniques から色々見れますが、面白い語り口で英語の勉強にもなります。

http://www.adobe.com/jp/designcenter/video_workshop/
Adobe のビデオチュートリアル、本家が出してるだけあって充実してます。

http://www.adobe.com/support/documentation/jp/
Adobe の公式マニュアル、何百ページもあるマニュアルを
pdf としてダウンロード出来ます。

http://www.csszengarden.com/tr/japanese/
ページ右側からデザインを選択出来ますが、このサイトは css 一つで
デザインを全く変えるというコンセプト。 ソースを見ればかなり勉強になりそうです。

http://flex.org/
Flex の実用的なサンプルやショーケースなど。

http://www.actionscript.org/
同じく ActionScript の実用的なサンプルやチュートリアルなど。

http://cssmania.com/
色々なデザインのショーケース。

今回紹介したもののいくつかは英語でしたが、やはり日本語に限らず
便利なリソースはたくさんあると思うのでまた紹介したいと思います。