小技の最近のブログ記事

こんにちは！
今日はjavaスクリプトです。
Webページを作っていて見る人の立場に立っていろいろ考えていると
ここがこう動いたら面白いな～とかいろいろ考えます。
そこで助けてくれるのがJavaです。
何個かご紹介します。

ページがめくれる効果を出してくれるJava

かなり面白いです。
ページの一部分とかだったら尚面白し。

リンクに画像プレビューがつけられるJava

実際使いました。ページが切り替わったりしないので見る人にやさしいと考えます。

画像プレビューしてくれるJava

機会があれば使いたいです。

そのうちまたご紹介するので今日はこのへんでー

画像にネオンの曲線や、光の効果を加えると写真がかなりかっこよくなります。
挑戦しようと思ってもなかなか難しいと思います。
ただ、本気でやりたいと思っている人は是非ここで勉強してみましょう。
英語のサイトですがわかりやすくチュートリアルで書いてあるので、やりながらCGデザイナー気分が味わえて
さらには全部達成すればかなりのスキルアップになるでしょう！おすすめです

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

いまや僕のWeb制作に欠かせない存在になってしまったPSDデータのサムネイル化

サムネイル化はWindowsのファイルアイコンの所をプレビュー化させちゃうという超便利なことです。

このツールのインスコ後にはエクスプローラーの再起動をタスクマネージャ等から行うか、いったんOSを再起動すると有効になります。

MysticThumbs


32bit版も用意されています。

ただ、この手のツールの利用はあくまでも自己責任でお願いします。

透明部分の描画もバッチリです。

MacではPSDデータがプレビュー表示されて便利なのになんでWindowsでは表示されないんだろうと

思った事がこのツールを探すきっかけになりました。

Ｉｌｌｕｓｔｒａｔｏｒ　ＣＳ3で簡単に噴出しを作る方法をご紹介します。



まずは角丸長方形ツールで噴出しの本体を書く。



次にペンツールで噴出しの根元を書く。
このとき方向に気をつけることと
少し深めに書くと上手く書けます。





次に角丸のレイヤーと噴出しの根元のレイヤーをＳｈｉｆｔキー
を押しながら両方選択状態にする。





最後にパスファインダから
「形状エリアに追加」を選択。

色々な場面で応用がきくことなので
覚えておいて損は無いと思います。

米Ｇｏｏｇｌｅは10月8日、インフルエンザの流行状況をリアルタイムで予測する
「Flu Trends」に、日本やロシアを含む16カ国のデータを新たに追加した。
これにより37言語に対応、従来の北米、オーストリア/ニュージーランドに加えて
欧州地域の感染状況を把握できるようになった。



Flu Trendsは、昨年11月にスタートしたGoogle.orgのサービスの1つだ。U.S. Centers for Disease Control and Prevention (CDC)など保険機関のインフルエンザ様疾患(ILI)データと、インフルエンザに関連する検索頻度の関係を分析。逆に検索クエリのデータからインフル エンザ流行状況を推測している。予測データは地域ごとに流行規模を5段階表示したマップと、感染者数の時間推移のグラフで表される。保険機関のトラッキン グシステムでは収集したデータがリリースされるまで1-2週間の時間を要していたが、検索動向を指標とするFlu Trendsはほぼリアルタイムでインフルエンザの流行状況を伝えられる。

日本語では「インフル トレンド」というサービス名で提供されており、日本国内については検索動向との比較に国立感染症研究所の公式データが用いられている。

Illustratorでオブジェクトに簡単に陰影をつける方法をご紹介したいと思います。






まずは適当にオブジェクトを書きます。

このときクローズパスで書くと後が楽です。
どうしてもオープンでなくてはかけなくても後でむりやり修正すればいいだけの話ですが。


その後に、陰影をつけたいレイヤーの直ぐ上に影になる部分のオブジェクトを描きます。
輪郭からはみ出る部分は適当で問題ないです。




輪郭になるレイヤーをコピー→前面へペースト。
影になるレイヤーを挟むように輪郭のレーヤーを移動します。


最前面に来ている輪郭のレイヤーと影のレイヤーを同時に選択し
「オブジェクト」→「クリッピングマスク」→「作成」で
二つのレイヤーをクリッピングします。




それだけでは輪郭の線が重なったままになってしまうので
クリッピングしたグループのクリッピングパスを選択し、輪郭と同じ線を設定してあげればできあがりです。


私自身が考えてやってしまっているのでもっと効果的で効率がいいやり方があるかもしれませんが
ほとんど癖で操作してしまっています。
出来ることが多い分、効率的に使うのは勉強が必要ですね。

EC-CUBEでブロックの編集を行ったあと、特に何も問題がなかったにもかかわらず、変更内容が反映されないことがあります。

これは主にPHPのセーフモードが原因で起こることが多いようです。

その場合の対処法としては、サーバーにログインしてphp.iniの設定でsafe_modeをoffにします。



safe_modeがonの場合、PHPの制限を受ける場合があるのでこの現象が起きると思われます。

EC-CUBEではsafe_modeはoffが推奨のようです。

不定期にお届けしている、おすすめブックマークレットのご紹介です。

今日はW3CのMarkup Validation Serviceでバリデートできるブックマークレットです。

W3C Markup Validation　←ここをブックマーク。




web制作サイドとしては、やっぱりソースコードは美しく仕上げたいもの。

特にSEOを施工する際にも、文法上のミスをなくすためにValidation Serviceを使用することは多いかと思います。

そんなときはチェックしたいページを表示させてこのブックマークレットを使用すると、ボタン一発でチェックができます。

URLをコピーして...といった煩わしさから解放されますので、気になる方は使ってみてはいかがでしょうか。

フォトショップを高速化する手法を教えてくれるサイトのご紹介。

Make Photoshop Faster

といっても紹介している手法は2だけ。

でも仮に「フォトショップ高速化100の方法！」
とかだと多分全部試す気になれないと思います。

2つぐらいだったら・・・と直ぐ試してみる気になれる感がいいとおもいました。

ザックリいってしまうとキャッシュと画像プレビューの設定を変えれば速くなるよ、とのことです。

また、壁紙で配布されているのでネタとしてもよいかと。

7 Clever Google Tricks Worth Knowing | Marc and Angel

上のリンクでいくつかのGoogleの検索技が紹介されています。

普通のイメージ検索で「Google」と検索するとこんな感じで「Google」という文字列に関連のある画像が検索結果としてでますが、パラメーターに"imgtype=face"と付けると、こんな風に人物に限定した結果となります。


もう1つは、このように、"allinanchor:"というオプションをつけると、ただの「検索」という文字列ではなく、アンカーの貼ってある「検索」だけにヒットします。

WEB上で調べ物をする場合、まずは検索エンジンなどで目的のキーワードを入力し、
自分が必要としているページを探すのが一番早いと思います。

ただ、見つけたページ内に大量のテキストがあり、目的の情報が中々見つからないときがあると思います。

そんなとき、FireFoxで便利な機能があります。

「Ctrl + f」キーで標準の検索バーが開き、ページ内のテキストを対象にした検索ができる機能がありますが、もっとシンプルですばやい検索動作が可能になる別の検索方法があります。

「Quick find」というこの検索は「/」（スラッシュ）をタイプすることで、全テキストを対象にした検索バーが開き、同様に「'」（アポストロフィー）をタイプすればリンクだけを対象にした検索バーが開きます。

検索中は標準の検索と同様「F3」で次を検索、「Shift + F3」で前を検索という動作が行えますが、標準と違う点はフォーカスが移ったり、一定時間になると勝手に消えるところです。

（これらはもちろんフォーカスがテキストフィールドにあるときなどには働きません。）

また、オプションの設定にて「キー入力時に検索を開始する」にチェックをすれば、「Shift + 検索ワード」で直ちに検索を始めることができます。

（「Win + 検索ワード」でも可）

標準の検索バーのそれよりも起動力を求めるパワーユーザーにお勧めのテクニックです。

web制作中に、「Loading」のイメージが欲しくなるとき、ありますよね。

そんなときに役立つサービスを見つけました。



ajaxload.info

このサービスでは、イメージのタイプ、Background（背景）とForeground（前景）を指定するだけで、お手軽にLoadingのイメージが作れます。

定番のものから流行りのものまで、割といろんなタイプがあって使いやすいです。





スピードを要求されるときやLoadingのイメージに困った際に使ってみてはいかがでしょう。

web制作で必ず必要になる作業、色合わせ。

キーカラーから周りの配色を選んだり...。

そんな時、カラーチャートや配色見本を参考にすることも多いと思います。

先日、もっと手軽に参考配色を割り出せないかと思っていたところ、発見しました。



Color Palette Generator

このwebサービスは、サーバーにアップロードしてあるイメージのURLを張り付けるだけで、そのイメージに合う配色を選び出してくれる、というものです。

どの程度使えるかは別として、ラフデザイン起こしなどスピードを要求される場合には役立ちそうです。

DWの基本機能のクローク。

今まではあんまり使ってなかったのですが、最近ちゃんと設定をするようになって、
使ってみると、結構便利だったのでちょっと紹介。

要はクロークを設定した拡張子・フォルダはDWのアップロード対象外となります。

↑これが設定画面。

なので、アップロードしたくない拡張子を設定。

あわせて、フォルダ単位でもクローク。

↑実際のローカルの階層。

Trashフォルダ（ゴミ箱）を作ってクローク。
これをすることにより、危険なアップロードをする時、いちいちバックアップを取らずに済みます。
例えば更新の場合、まずはファイルを複製。
DWのデフォルトで『Copy_of_xxxxxx.html』が作られる。
これをドラッグ＆ドロップでTrashフォルダへ。
こうすれば、アップロード対象外のすぐに戻せるバックアップファイルの出来上がり。

かなり便利です。

今はクライアントごとの実際のWEBフォルダと制作につかう素材フォルダに分けて
使われてる方が多いと思いますが、上手にクロークすれば、クライアントフォルダは
1つですみますね。

4回目を迎えましたこのコーナーですが、今日は「調整レイヤー」を使ったお手軽な画像加工についてご説明します。

毎回ですが、わりと初級な内容＋CS3（Win版）でのご説明になっております。

加工の方法等も公式に紹介されているものではありませんのでご注意ください。


さて、まず「調整レイヤー」とはどんなものかといいますと、「効果だけを乗せられる1つのレイヤー」と説明すると簡単かも知れません。

つまり、元の画像に直接手を加えることなく、その上のレイヤー上でいろいろな効果を加えられるという便利な機能です。

Photoshop画面上ではレイヤーパレットの「塗りつぶしまたは調整レイヤーを新規作成」で作成できます。





今日はかなり定番な例ですが、通常の森の画像を雪が降った後のように加工してみたいと思います。

元画像はこの画像を用意しました。





手順1

「塗りつぶしまたは調整レイヤーを新規作成」ボタンを押して、メニューの中から「チャンネルミキサー」を選択します。




次にチャンネルミキサーのダイアログで、左下の「モノクロ」にチェックを入れます。

各チャンネルのスライダを少しずつ上げて、好みの白が出るように調整します。




ＯＫを押すと調整レイヤーが作成され、白黒の画像が出来上がります。







手順2

出来上がった調整レイヤーを選択して、消しゴムツールを使って、雪を残したい以外の部分を消していきます。

この時はボケ足の長いブラシを使って消すと、良い感じになります。



うまく雪を残して、出来上がりです。

意外と簡単ですね。

皆さんこんにちは。

不定期に開催していますこのコーナーですが、今日は3回目。

今日のテーマはレイヤーの描画モード「乗算」についてです。

↓レイヤーパレットのこの部分や、


「レイヤー」メニューから「レイヤースタイル」→「レイヤー効果」→「描画モード」で指定ができます。


この「描画モード」は、重ねあったレイヤーに対し、そのレイヤーをどういう風に表現するのか、といったことが調整できます。


はい、今日のテーマは「乗算」ですので、乗算の効果についてご説明します。


画像の上に直接文字や絵を描いたようなイメージを作りたいとき、ありますよね。

そういった場合、下のレイヤー画像の上に、そのままテキストやイメージのレイヤーを置きますと、まさにそのまま「重ねただけ」という状態になります。

↓重ねただけの画像。


しかしこのままですと、「描いた」ような感じが薄いです。

で、ここで「乗算」が登場するわけです。

上のレイヤーの描画モードを「乗算」に指定してみましょう。

すると、重ねただけでは出せない質感が出るはずです。

↓乗算後。



状況により、期待通りの効果が出ないこともありますが、何度か慣れてくると成功するパターンが見えてきますよ。

「ぼかし」などのフィルターでひと手間かけると、よりクオリティーの高いものも出来ます。





自然な感じでテキストやイメージを乗せたいときに、ぜひ活用してみてください。

いざという時に役立つ、ちょっとしたPhotoshop講座です。

わりと初級な内容ですので、どっぷりとPhotoshopに浸っている上級の方には物足りないです。


さて、初回の今日は「写真などの画像を角丸に切る」です。



↑例えばこのような画像です。


では順を追って解説いきます。
※ちなみにこの講座はCS3での解説ですのであしからず。


1.元画像を用意
作りたいものの元となる画像をPhotoshopへ。
「レイヤー」メニューから「新規」→「背景からレイヤーへ」でレイヤー化しておきます。




2.新規レイヤーを作成
「レイヤー」メニューから「新規」→「レイヤー」で、角丸用に新規レイヤーを用意して、レイヤーパレットで元画像の下層へ移動させます。




3.角丸を作成
先ほど作成した新規レイヤーを選択しておきます。
次にツールメニューから長方形ツールを長押しして、角丸ツールを起動させます。
そのままドラッグで角丸を描画します。
描画した後は移動ツールを使いカンバス内の適宜の大きさに合わせます。







4.クリッピングマスクを適用
レイヤーパレットで元画像のレイヤーを選択して、「レイヤー」メニューから「クリッピングマスクを作成」を選択します。







以上で完成です。
あとは切り取りツールなどで余分なスペースをカットして、web用に保存しましょう。
背景画像を生かしたい場合などはgifや透過pngなどで保存すればOKです。

要するに透明部分をもった画像なりシェイプなりを下のレイヤーに置いて、上のレイヤーでクリッピングマスクを作成すればOKという訳です。

これを応用すれば、いろんな形に切り抜いた画像が作成できますね。

ここぞというポイントでぜひお使いください。

javascriptファンの皆さんも、そうでない方もこんにちは。

特にIE6の表示に悩まされ制作に行き詰った方は必見です。


IE6ify!

このブックマークレットを使うと、
表示されているページのレイアウトがかのIE6のごとく崩れます。

使い方は簡単です。

下の画像のリンク先をブックマークとして保存。
崩したいページで使えばOK。

↑簡単に楽しみたい方はクリック連打！

または以下のスクリプトをアドレスバーへ貼り付けてみてください。

javascript:(function()
{var%20i=0,r=function(n){return%20Math.floor(Math.random()*n)},
f=document.getElementsByTagName('body')[0].getElementsByTagName('*'),
o=function(e){return%20typeof(e.style)=='object'&&e.tagName!='SCRIPT'},
s=function(){while(!o(e=f[r(f.length)])){}return%20e.style};while(i++<5)
{s().display=r(2)?'block':'inline';s().position=r(2)?'absolute':'relative';
s().margin=r(2)?'0':'1em';s().padding=r(2)?'0':'1em';s().width=r(2)?'':'auto';}})();


連続で使っていく（つまり連射する）と、どんどん崩れていくのですが、
「IE6のアルゴリズムを追及した」という、
妙にリアルなIE6な動きで崩れていくのが皮肉たっぷりで楽しいです。

特に意味はありませんけど、一息入れたい方はぜひどうぞ。

javascriptファンの皆さんこんにちは。

今日はフォーム内のパスワードを確認する小技をご紹介します。

ログインが必要なサイトのほとんどはＩＤとパスワードを入力するためのフォームが設置されています。

このようなフォーム内のパスワードは通常アスタリスクで隠されています。

...が、たまに「なんだっけ？」と確認したい時がありますね。



そんなときは以下のjavascriptをぜひアドレスバーへ貼り付けてみてください。

javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms;
for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i)
{ if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } }
if (s) alert("Passwords in forms on this page:\n\n" + s);
else alert("There are no passwords in forms on this page.");})();

するとあら不思議。

ダイアログにパスワードが表示されます。

ブックマークレットとして利用すると便利かと思います。

ホームページ制作ではよく使う「角丸」。
通常は角丸の画像を用意したりで、なかなか手間のかかる作業ですが、
今回はjavascriptで角丸を作る方法、「DD_roundies」をご紹介です。


使用方法は簡単。

まずwebからライブラリをダウンロード。
ヘッダで読み込ませます。

そして普通にHTMLとCSSで四角形を用意します。

<div id="box">
<p class="test" align="center">メールフォーム</p>
</div>

<style type="text/css">
<!--
#box {
    position:absolute;
    left:17px;
    top:21px;
    width:198px;
    height:53px;
    z-index:1;
}
.test {
    border:2px solid #7CBF4D;
    background:#AFF32A;
    }
-->
</style>


続いてライブラリの組み込み。

<script type="text/javascript">
         DD_roundies.addRule('.test', '10px', true);
</script>

のように指定すると出来上がりです。



このライブラリはCSS3でサポートされる予定の「border-radius」プロパティを使用しているようで、
6以降のIE、Firefox3、Cromeなどで使用可能です。

画像で作る角丸に飽き飽きしてきた方はぜひお試しを。