ホームページ制作まん2

JavaScript勉強中・・・

(2010年6月 6日 23:51)

現場から

さて、今回「JavaScript」のご紹介をしたいと思います。

とはいうものの、私はそんなには詳しくはないのですが(笑

いきなりですが、複数の画像をページに載せたい時、レイアウトは様々だと思いますが、
あまりに画像を多く載せてしまうと、読み込みに時間がかかって、ページを開くのに時間がかかり、若干ストレスを感じるようになってしまいます。

そんな時利用してもいいかなというのが
「ボタンをクリックするだけで、表示している画像を切り替える」というものです。

よく私は中古車のサイトを覗きますが、そこでも車の状態写真を見るのに利用されていますね。

一応参考までにソースを。

<html>
<title>image Change1</title>
<body bgcolor="#fff8dc">
<script type="text/Javascript">

</script>
<hr />
<img name="targetimage" src="images/img1.gif" /><br />
<br />
下記をクリック<br />
   <image src="images/img1s.gif"
   onclick="changeimage ('images/img1.gif')" />
   <image src="images/img2s.gif"
   onclick="changeimage ('images/img2.gif')" />
   <image src="images/img3s.gif"
   onclick="changeimage ('images/img3.gif')" />
</body>
</html>

基本的なソースなので、これを応用することで幅が広がると思います。

参考までにJavaScrpitの勉強ができるサイトを↓

http://javascript.eweb-design.com/

まだ勉強中なので間違ってる部分もあるかもしれませんが、
今後チョコチョコ紹介出来ればと思います。

ロゴのデザイン

(2010年5月28日 23:23)

現場から

ロゴ

企業や個人サイトでもインパクトがあれば見入ってしまうものですよね。

気になるロゴを見るたびに「どうやって作っているんだろう？」と思ってしまうこともしばしば。

そんなときにこういったサイトが参考になります。

http://spyrestudios.com/30-excellent-logo-design-tutorials-and-walkthroughs/

様々なジャンル、よく見るものも多数ある中、それを再現するチュートリアルを紹介してくれています。

頭の中にイメージは固まっていてもなかなか表現できない時

こういったものを見ることで、いろいろな技術の情報を取り入れることができ、スキルアップを図れます。

考えに耽っている時、こういうサイトを覗いてみるのもいいと思います。

Javaスクリプト

(2010年3月20日 23:52)

現場から

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

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

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

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

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

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

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

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

Photoshopの技を磨く。

(2010年1月12日 21:39)

現場から

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

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

Photoshop CS4のpsdアイコンをサムネイル化するツール

(2010年1月 7日 22:01)

現場から

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

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

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

MysticThumbs

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

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

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

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

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

複数のエンジンでマルウェアの検査が行えるサイト。

(2009年11月17日 19:55)

現場から

web上ではあるが
20ものマルウェア検査エンジンによる、ファイルの集中検査ができるサイトをご紹介。

Jotti's malware scan

「　http://virusscan.jotti.org/en　」

同時に各エンジンが動き出すのは絵的にもかなり面白いものがありました。

webページの検査などに使えると思います。

商用利用向け機能を強化した「ホームページ・ビルダー 14」

(2009年10月28日 22:43)

現場から

集客支援機能や商用テンプレートを用意し、商用に適した Web サイトが手軽に作れる IBM の Web サイト作成ソフトの新製品「ホームページ・ビルダー 14」を発表した。提供開始は12月4日。

パッケージ製品の希望小売価格は、通常版が1万3,143円、ライセンス製品の利用料金は通常版（JL-Standard）が1万2,000円から、アカデミック版（JL-Education）が6,000円から（すべて税別）。

「ホームページ・ビルダー 14」の特長は、SEO 対策支援機能と、業種ごとのクオリティの高いテンプレート提供や、サイト全体のデザインに統一感を持たせるために不可欠な CSS の高度な編集およびより正確な表示機能。

また、パソコンだけでなく携帯サイトにも対応の「ショッピングカート機能」を提供すると共に、マルチキャリア携帯サイト作成機能も強化、集客とデザインの両面から、個人の Web サイトはもとより、商用目的の Web サイト作成をパソコン用と携帯用の双方で支援する。

検索エンジンでの検索結果に、自社の Web サイトが上位に表示されるようにするための、SEO 対策支援機能「SEO ナビ」を搭載。対策に必要な編集支援だけでなく、必要な設定ができているかどうかを確認するチェック機能も提供する。

特に商用に利用しやすい納得のデザイン「プレミアムテンプレート」は、「企業」「ショップ」「美容院」「飲食店」などのカテゴリーにより商用に利用しやすく、かつデザインクオリティの高い様々なテンプレートを、PC および携帯用サイトそれぞれ4～12ページのボリュームで10種類提供。

CSS を簡単に編集できる「スタイルエクスプレス」では、関係する全ての CSS をひと目で確認できる「スタイルエクスプレスビュー」機能や、CSS をより正確に再現できるような機能を向上させた。

また、作成したページに、「ショッピングカート機能」を貼り付けるだけで、2,400円/月（税込）でネットショップを開店できる。ネットショップモール「e-shops」にも無料で出店できる。

マルチキャリア対応携帯サイト作成機能は転送時の操作性を大幅に向上、今回の SEO ナビやプレミアムテンプレート、ショッピングカートの新機能にも対応している。

なお、パッケージ製品は Google や Yahoo! JAPAN で検索した結果に表示される検索連動型広告を、各社5,000円分、合計1万円分利用できるクーポンがセットになっている。

また、パッケージ製品の製品ラインアップに、ビジネスシーンですぐに使い始めることができる「ホームページ・ビルダー14 ビジネスバリューパック」を新たに用意。

このパッケージは、ガイドブック「できるホームページ・ビルダー14[特別版]」、Flash 作成ソフト「かんたん Web アニメーション2」、Web デザインテンプレート「＠rt web select pack」、DDN Web 素材集、「@rt webfor HPB 会社・店舗編」、書籍「非常識な SEO の常識」（アウンコンサルティング株式会社）をセットにしたもの。

アウンコンサルティングとは、「ビジネスバリューパック」での書籍提供だけでなく、今後、ホームページ・ビルダーユーザー向けの SEM セミナーの実施などで連携していく。

なお、ホームページ・ビルダー製品は、事業拡大を目的とした新たな販売体制として、このバージョンよりパッケージ製品、ライセンス製品ともすべてジャストシステムからのみ、販売する。

Web 検索で最も危険な日本の有名人は「佐藤江梨子」――マカフィーが報告

(2009年10月27日 22:45)

現場から

マカフィーからの報告、インターネットで最も危険な日本の有名人を明らかにするため、McAfee SiteAdvisor（マカフーサイトアドバイザ）テクノロジを使って調査を実施、2009年10月26日、その結果を発表した。

それによると、「佐藤江梨子ダウンロード」「佐藤江梨子壁紙」など、女性タレントの佐藤江梨子さんに関連したキーワードを検索すると、スパイウェア、アドウェア、スパム、フィッシング、ウイルス、その他のマルウェアなど、オンライン脅威で"陽性"と判定された危険な Web サイトに誘導される可能性が、他の有名人に比べ高いことがわかった。

以下、2位「京野ことみ」「米倉涼子」、3位「相澤仁美」「井上和香」「沢尻エリカ」「福山雅治」「松浦亜弥」など、グラビア、ドラマ、CM、バラエティなど多方面で活躍している有名人が多く見られ、その多くが20代から30代の女性タレントで占められている。

上位3人は過去に映画や雑誌、CM などにおける刺激的な描写が話題となっており、検索されていると予想される。なお、男性の有名人では、福山雅治さんが唯一ランクインしている。

本人とは関係ないとはいえ、自分の名前が危険とされるのは辛いだろうな・・・

アイデア倉庫

(2009年10月26日 00:53)

現場から

MephoBox

「 http://box.mepholio.com/ 」

WEBデザインをしていていつも苦しませられる「生みの苦しみ」

発想が尽きたあの焦燥感なくるしいです。

そんなとき助けてくれるこのサイト。

様々なデザインがヘッダーなどのカテゴリわけされて
インスピレーションを刺激します。

困ったときには他の作品をみるのもいいと思います。

比較ツール

(2009年10月22日 00:20)

現場から

制作をしているときに、一つのページだけCSSがおかしくなってしまったり
JAVAスクリプトが上手く動いてくれなくなってしまったりすることはよくあることだと思います。

そんなとき便利なのが比較ツールです。
メジャーではありますがお勧めなソフト。

DF
「 http://www.vector.co.jp/soft/dl/win95/util/se113286.html 」

とくにコードの比較に便利だと思います。
差異のある場所を色t期で表示してくれるのでわかりやすいです。

お手軽簡単なHTML&CSS診断ツール

(2009年10月21日 00:05)

現場から

WEBサービスなどでも多様な診断サイトはありますが
ブックマークレットででき、クリックひとつで診断できるお手軽さから
使いやすいのでご紹介。

YAML　Debug

上記のリンクをブックマークして、使いたいときに起動するだけです。

「Debag Options」ではページの概要、それに各要素についてハイライト表示したり、リンクURLを表示させたりといろいろなことが試せます。

「Stylesheets」ではスタイルシートを無効にしたり、専用ビューアでCSSファイルを開くことができます。

高性能なオンライン画像編集ツール６

(2009年10月20日 23:38)

現場から

Splashup
「 http://www.splashup.com/splashup/　」

こちらも中々PhotoShopに近い使用感。

最大の特徴は特徴はFlickrなどの写真サイトと連携して、画像の読み込みなどがシームレスにできる所。

高性能なオンライン画像編集ツール５

(2009年10月19日 21:07)

現場から

Free online photo editor with printing and slideshows
「 http://www.flauntr.com/ 」

こちらは複数のタイプの画像編集ツールをそろえているサイト。

編集した画像を共有できたりと
様々な利用方法があるサイトです。

高機能なオンライン画像編集ツール４

(2009年10月18日 20:29)

現場から

今回もオンライン上の画像編集ツールをご紹介。

PicMagick
「 http://www.picmagick.com/app　」

こちらはサイト自体、かなりシンプルなつくりになっており、
操作感もわかりやすく簡単です。

機能的に若干物足りなさは感じますが、
中々の使い心地です。

高性能なオンライン画像編集ツール３

(2009年10月17日 20:06)

現場から

以前ご紹介したオンライン画像編集ツールのほかにも
面白いものがあったのでご紹介します。

Picnik
「 http://www.picnik.com/app#/edit 」

こちらは今までのPhotoShopのような感覚とは少しちがいます。

細かい設定などより、直感的で簡単に編集ができるツール。
コントラストを変更したい場合は
コントラストのつまみを動かせば！みたいな感じで
単純に反映させたいことを選んで試していけばいいと思います。

ＭＴ用のモバイルサイト作成ツール。

(2009年10月16日 18:54)

現場から

Web サイト構築・プログラム開発を行う、Ctoss Wish（クロスウィッシュ）は、2009年10月16日、Movable Type から簡単に携帯サイトを作成できるツールの最新版「モバイルサイトmake2formovale Type」をリリースしたと発表した。

「モバイルサイト maker 2 for Movable Type」は、Movable Type で作成したサイトや Blog を簡単に携帯サイトに変換できるサーバーインストール型のアプリケーション。

Movable Type で携帯サイト用テンプレートを作る場合、文字コードやカタカナの半角変換、各キャリア毎の画像変換、絵文字対応など、携帯用のテンプレートを用意するだけでは対応が難しい部分があった。

モバイルサイト maker 2 for Movable Type を利用することで、Movable Type で作成したサイトや Blog を簡単に携帯サイトに変換できる。

今回のバージョンアップにより、要望が多かった「画像サイズを各機種毎に自動最適化」「SEO 機能の強化」「ページ送り機能」等の機能を追加、加えて「独自タグの大幅強化」などの改良が行われている。

なんだかすごいぞLunascape

(2009年10月15日 19:02)

現場から

昨日10月14日、Lunascape株式会社より最新版の「Lunascape 6.0α版（開発コードネーム：ORION）」をリリースした。

この新しいブラウザは従来のアドオンに加え、なんと6,000を越えるアドオンが存在する「ＦｉｒｅＦｏｘ　アドオン」に
対応している。
これにより、「Internet Explorer アドオン」、「Lunascape アドオン（Lunascape プラグイン）」、「Gecko 用アドオン（Firefox アドオン）」と、世界初のトリプルアドオンを実現した。

なお、Firefox3.5の利用者であれば、インストールの際に Firefox 3.5で使用している多数のアドオンをそのまま引き継ぐことができる。

さらに、Web の閲覧を妨げない新しいユーザーインターフェイス（ORION）を搭載したほか、最新 OS である Windows7にも対応した。

機能的にはＦｉｒｅＦｏｘがすきなのだが起動に時間が掛かるのがどうしても気になってしまう。
かといってＧｏｏｇｌｅ　Ｃｈｒｏｍｅは起動や動作は格段にはやいが
ＰＨＰとかＣＧＩがたまに動かないページがあったりするし・・・・

これはLunascapeへ乗換えか・・・

Ｇｏｏｇｌｅ　Ｄｏｃｓ

(2009年10月14日 00:58)

現場から

ＧｏｏｇｌｅＤｏｃｓに共有フォルダ機能追加されました。

共有フォルダを介して複数ユーザでファイルを利用できるようになるほか、ファイルアップロード時の複数ファイルの一括選択が可能になっている。

共有フォルダは、複数ユーザで利用できるGoogle Docs上のワークスペースとして機能する。[新規作成]→[フォルダ]でフォルダを作成後、[共有]→[このフォルダを共有]で招待したいユーザを指定、メッセージを送信することで共有開始となる。共有フォルダにファイルをアップロードする際は、[Shift]キーや[Ctrl]キーで複数ファイルを一括選択できるように操作性が改善されている。なお、編集権限はユーザごとに設定することが可能です。

データのレスポンスはさておき、簡単に共有できるのはとても助かります。
仕事が休みでどうしても・・・というときとかものすごい助かりそうです。