技術: 2009年7月アーカイブ

皆さんこんにちは。

今日もPhotoshopの時間がやってきました。
※このシリーズはCS3でのご説明になっておりますのでご注意ください。


2回目の今日は「雲模様1」フィルタの使い勝手についてです。

「フィルタ」メニュー→「描画」の中にある「雲模様1」です。



Photoshop上で、さりげなく存在しているフィルタ。

あまり使われないことも多いですが、ちょっとした画像やグラフィックを作る時に、意外と活躍するのがこの「雲模様1」なのです。

今日は少しその例を挙げてみます。



例1　デジタル感に



ちょっとデジタルっぽいイメージの作り方。
※すべての例で描画色：黒　背景色：白　です。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ピクセレート」→「モザイク」

③フィルタメニュー「表現手法」→「輪郭検出」

④イメージメニュー「色調の補正」→「階調の反転」



例2　ズーム・スピード感に



ズームというか、少しスピードっぽいイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「ぼかし」→「ぼかし（放射状）」



例3　液体感に



リキッド・液体っぽい感じのイメージの作り方。

①フィルタメニュー「描画」→「雲模様1」

②フィルタメニュー「アーティスティック」→「ラップ」



はい、どうでしょうか。
ここでは簡単なものをご紹介していますが、雲模様1をベースにしてフィルタを組み合わせると、意外と簡単にいろんなイメージが作れますね。

あとは作る人の腕と工夫しだいで、より良いものができるかと思います。

雲模様1でどこまでやれるか、チャレンジしてみてはいかがでしょうか。

最近使う用途があった「PEAR」のインストールについて、忘備録としてご紹介します。

PEAR（ペアと発音）は簡単に説明するとPHPのライブラリ集です。
いろいろな拡張モジュール、アプリケーションなどが登録されていて、ネットワーク経由でそれらを取得・利用することができます。

ここでは最も簡単（だと思われる）go-pearとFTPを利用したインストール方法をご紹介します。
（※ちなにみここでのご説明はロリポップ！でのインストール例です。ご使用のサーバによっては別途設定が必要な場合もあるかと思います。）

大まかにはサーバ内にgo-pearをアップロード、ブラウザからアクセスしてインストール、といった流れです。
あらかじめサーバ内にgo-pear用とインストール用のフォルダを適宜な名前で2つ用意しておくと良いかも知れません。

※例として、
go-pear用→go_pear
インストール用→in_pear


手順1　go-pearを準備、アップロード

http://pear.php.net/go-pear
このURLを開き、表示されたスクリプトをgo-pear.phpと名前を付けてローカルに保存してください。
保存したものをFTPソフトなどでサーバへアップロードします。
ブラウザからアクセスできるディレクトリならOKです。
go-pear用のフォルダをご用意した方はそちらに。
（ここではgo-pearフォルダ）


手順2　go-pear.phpへアクセスしてインストール

先ほどアップしたgo-pear.phpへブラウザからアクセスしてください。
すると以下のような画面になりますので、「Next≫」をクリック。





次に設定の画面へ移りますので、ここで各種設定を行います。



①にはサーバのフルパスと、PEARをインストールするディレクトリを入力します。
「/home/sites/lolipop.jp/users/lolipop.jp-dp********/web/in_pear」（ここではin_pearフォルダ）といった具合に入力。

②にはPHPのパスを入力します。
ロリポップ！の場合は「/usr/local/bin/php」です。

③このチェック欄がある場合はチェック。
go-pearのバージョンによっては無い場合もあります。

以上を入力したら、下にある「Install」ボタンをクリック。
すると英語のログがずら～っと流れ、エラーがなければ、
「Installation Completed !」と表示され、インストールが完了します。




手順3　使いたいパッケージをインストール
イストールが完了したら、そのまま画面を進めると管理ページに入ります。
一度画面を閉じてしまった方はpearをインストールしたディレクトリのindex.phpへアクセスしてください。

パッケージ名が判っている場合は画面下の「Quick-install a package」へ入力し、「Install」をクリックすれば自動でインストールしてくれます。

パッケージ名が正確に判らない場合などは画面左の「Package Search」から検索してください。




以上で終了です。
作業が終わったら、最初にアップしたgo-pear.phpを念のため削除しておくと良いでしょう。
また、管理ページにはパスワードをかけるか、一時的に削除しておきましょう。

以前から存在は知ってたけど、実際どこまで効力を発揮するんだろうといつも思う。

気になったので、Official Siteにお邪魔し、『資格の目的と構成』を一読してみた。

Web検定は、皆さんの仕事におけるコミュニケーションを円滑にすることにより、効率的な商取引を促すこと目的としています。社団法人 全日本能率連盟登録資格として、5つの認定資格で構成されます。

とある。
その5つの構成がこちら。

・webリテラシー
・webデザイン
・webディレクション
・webプロデュース
・webプログラミング

あるに越したことは、ないと思うけど、実際大きな企業さんとかは選考基準とかに
響くのだろうか？

資格があってポートレートの貧弱な人と、資格がなくてもポートレートが充実してる人。

前者は前者なりに、しっかりと資格という形で勉強してきた過程を示し、後者は後者で実力主義のweb業界に沿っているとも思う。

ちなみにブログパーツにある練習問題では10問中4問しか正解できず、不合格な結果に。

全国のOperaユーザーの皆さん、もうOpera10-Beta2は試しましたか？

新たに追加された機能として、

・Opera Turbo
　圧縮技術によってブラウジングのスピードアップ

・新しいタブ機能
　サイズ変更可能なタブとサムネイル表示など

・スピードダイアルのカスタマイズ
　多くのユーザーから要望の多かったカスタマイズ機能

・統合されたweb機能
　webメールサービスと同様の機能を搭載

・リサイズ可能な検索フィールド
　文字通りリサイズ可能なフィールドを搭載

・レンダリングエンジンの高速化
　Presto 2.2によってGmailやFacebookなどのリソースを多用しているページで効果大

などなど多数です。

さらに今回はOpera10の新機能として、「ブラウザにサーバ機能を持たせる」というものが発表されています。

ＯＳの種類を問わず、クライアント同士で相互接続ができるほか、専用アプリケーションによってブラウザの新次元体験が可能らしいです。
どんなものになるのか、早く体験したいですね。

まだまだシェアの伸びが緩やかなブラウザですが、個人的に好きです。
さらなる発展が楽しみですね。

CSSファンの皆さん、こんにちは。
すでにご存じの方も多いかと思いますが、今回は「CSS Sprite」についてです。

"CSS Sprite"
この手法は、サイト内で使用するイメージを一つのマスター画像として作成し、
CSSにて随時マスター画像から切り取り（実際は切り取りではないかも）ページ内にイメージを読み込むという手法。

恩恵としては、
通常通りにイメージを配置するよりデータが軽くなり、さらにリクエスト数が減ることによって、
結果としてサイト表示の体感速度が飛躍的に向上するというもの。
（制作側としてはスライス時間短縮の恩恵があるかも...）

GoogleやYoutubeのプレイヤーなどがこの手法で有名です。



例として、

≪通常のイメージ配置方法≫

XHTMLで、

<div id="head">
<img src="/img/logo.png" /></a>
</div>

またはCSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
}

などと記述しますが、


≪CSS Spriteでののイメージ配置方法≫

CSSで、

div#head {
    width: 250px;
    height: 60px;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
    background-position: 0 -34px; /* マスター画像のうち，どの場所の画像を出すのか座標 x軸，y軸の順に指定する*/
}

XHTMLで、

<div id="head"></div>

上記でdivの背景画像としてアッサリと表示完了です。


表示速度の改善をお求めの方など、試してみてはいかがでしょう？

...ただしセオリーどおりIE6の透過pngにはくれぐれもご注意を。

ついに始まったようです。
下り最大40Mbpsの高速無線インターネット。
いつでもどこでもADSL並の速度でネットサーフィンが可能なサービス「WiMAX」。
サービス提供範囲はまだ主要都市部だけのようですが、人口カバー率90％に向けて現在拡大中とのこと。
海外のようにホットスポットの少ない日本では現在、Wi-Fi圏外だとイーモバイルやPHSなどの7.2Mbpsデータ通信が頼りでしたが、これからはWiMAXのような高速サービスにシフトしていきそうです。



パソコンメーカー各社もワイマックス通信端末を内蔵したノートＰＣを投入するらしいです。
富士通は12.1型「FMV-BIBLO LOOX R/D70」をすでに発売しており、
東芝は12.1型「ダイナブック　SS RX2/WAJ」、パナソニックも14.1型「レッツノートF8」を、それぞれ７月末に発売する予定だとか。

その一方、イーモバイルも8月上旬に高速データ通信技術「HSPA+」を使った国内初のサービスを開始するらしく、
PHS大手ウィルコムも10月に次世代PHS「XGP」の有料サービスを始める計画で、3陣営とも受信速度はほぼ同じ...らしいです。
3巴の激しい戦いが予想されそうですが、ユーザにとってサービスの向上は望ましいところ。

もっとも、Wi-Fi可能なエリアが日本にももっとたくさんあれば済む気もしますが、
日本のインターネット、どう進化するのでしょうか。