WEB制作のネタ帳（for 初心者）

ウェブサイトのサムネイルを作成するなら「HeartRails Capture」

shiteki — Wed, 27 Jan 2010 02:50:26 +0000

WEBサービスを紹介するとき、今まで
1.PrintScreenで画像をキャプチャー
2.画像処理ソフトでサイズを変更して保存
3.FFFTPでアップロード
と、かなりの労力を使っていたのだが、「きっとこんなことWEBサービスか何かで解決できるんじゃないかなー」と思い探したのが、「HeartRails Capture」

「HeartRails Capture」のいいところは
・サムネイルリアルタイム作成
・画像サイズも可変
・画像の影つきの有り、無しや背景色の変更といったカスタマイズも可能
といったところだ。

いろいろ探した結果なので、同じようなことを思っている人は試してみる価値ありだ。

→HeartRails Capture

＜参考サイト＞
→boreal-kiss.com

バナー広告等からクリック時のカウントログを採ることができる「クリックカウンタ」

shiteki — Sat, 26 Dec 2009 00:34:18 +0000

バナー広告やファイルダウンロード等でクリックされたときのカウントログを採りたいなと思った人にオススメなのが「クリックカウンタ」。

アフィエイトを真面目にやっていこうと思う人には試して損はないと思います。

→ダウンロード
CSVで転送先URLが管理できる「URL転送スクリプト」も組み合わせて使ってみるといいかもしれません。



中古ドメインがブラックリスト入りしてないかをチェックできる「aguse」
shiteki — Wed, 16 Dec 2009 08:19:18 +0000
				

				中古のドメインを購入するときにドメインエイジも大事だが、是非チェックして欲しいのが以前のコンテンツにより悪い評価がついていないかどうかだ。

				そんな時にオススメなのが「aguse」だ。
				使い方は簡単で、以下のアドレスにアクセスすると上のようなページが表示されるので、調べたいURLを入力するだけでOKだ。
				少し待つと調査結果が表示され、その一番下に以下のような「ブラックリスト判定結果」を見ることができる。

				
				これでブラックリストに入っていることが判明したら、そのドメインの購入は控えたほうがいいだろう。
				→aguse



表示スピードを確認するなら「Site24×7」
shiteki — Fri, 11 Dec 2009 01:13:52 +0000
				

				「Site24×7」の「ウェブページ分析ツール」はウェブページのURLを入力するだけで、ページサイズ、個々のオブジェクト (イメージ、スクリプト、css)のロード時間を表示してくれる優れものツールだ。
				ページサイズの合計、リクエスト数、及びページの読み出しにかかった時間を表示し、どこが読み出しに時間がかかっているかがわかる。
				試しにこのサイトを分析すると以下のような結果になりました。

				
				やっぱり、画像はロードに時間がかかることがわかる。

				なんか自分のサイトが重いなと思った人は分析してみると原因がわかるかもしれませんね。
				→Site24×7



CSSの軽量化に「CSS Compressor」
shiteki — Wed, 09 Dec 2009 08:21:23 +0000
				
				使用しているCSSを軽量化しようと探したて見つけたのが、無料のWEBサービス「CSS Compressor」。

				「Compression Mode」を5つから選択し、「Compression Options」にチェックをお好みで入れて、「CSS Input」に圧縮したいCSSをペーストしたら最後に「Compress」ボタンを押すだけで、CSSを圧縮してくれる。

				

				CSSにもよるが僕の場合約30％のダイエットに成功した！

				あとは実際の表示をチェックするだけだが、ここでうまく表示できないようだったらコードを見るのではなく、圧縮モードやオプションを変更してみるといいのではないだろうか。
				コードとしては見づらくなるので、元のファイルは残しておいて修正はそのファイルで行い、修正した後に「CSS Compressor」で圧縮という流れをオススメします。
				→CSS Compressor



Web上で簡単にサイトマップなどが作成できるドローツール「Cacoo(カクー)」
shiteki — Sat, 28 Nov 2009 05:55:09 +0000
				
				Cacoo(カクー)はWeb上で簡単にサイトマップやワイアーフレーム、UML、ネットワーク図などの図が作成できるドローツール。

				利用は無料。
				使い勝手もよくかつオンラインという作業環境を最大限にいかしてて複数人で同時に作業ができるようにもなっており、リアルタイム更新でタイムラグもほとんどなくこれが無料か？と思わせる出来だ。
				是非一度試してもらいたいツールの一つであることは間違いない。
				→Cacoo



アクセシビリティ・チェック・ツール「WebInspector」
shiteki — Fri, 09 Oct 2009 04:25:00 +0000
				

				WebInspector（ウェブインスペクター）は、ウェブサイトのアクセシビリティを診断するフリーソフト。

				主に、高齢者や視覚に障害のある方にとって重要な問題を指摘します。
				＜主な機能＞

				・アクセシビリティの問題点を指摘し、チェック結果を一覧表示

				・修正すべき箇所をビジュアルに表示

				・JIS X 8341-3 に対応したチェック

				・富士通ウェブ・アクセシビリティ指針 第2.0版のチェック

				

				ソフトはインストール形式ではないため、下記よりダウンロードして解凍すればすぐに使えますし、使ってみて肌に合わなければフォルダごとそのままゴミ箱へ捨てるだけなので、試してみてはいかがかと思います。
				＜ダウンロード＞

				→富士通　WebInspectorのダウンロード



IE/Firefox/Safariで見た目を比べながらWebサイトを開発できる「Pirka’r」
shiteki — Tue, 06 Oct 2009 00:18:17 +0000
				
				「Pirka’r（ピリカル）」はさまざまなWebブラウザーで共通の見栄え・動作を実現する“クロスブラウザ”対応Webサイトの開発を支援するソフトだ。
				主な仕様
				・CSSがWeb標準に準拠して記述されているかチェックすることができます。

				・HTML/CSS/JavaScriptにブラウザに依存する記述がないかチェックすることができます。

				　(このチェックを利用するにはサーバアプリケーションが必要です。)

				・一つのページを複数のブラウザで同時に表示し、各ブラウザを起動して確認する面倒な作業から解放します。

				　（利用OSごとに表示可能ブラウザは異なります）

				・多機能エディタで編集・保存した内容を自動でマルチブラウザビューに反映し、各ブラウザをリロードする作業から開放します。

				・HTML/CSS/JavaScriptのエディタです。「コード補完」、「シンタックスハイライト」、「構文チェック」などの便利な機能があります。

				・指定URLのサイトのコンテンツを収集します。階層指定も行えます。

				

				＜ダウンロード＞

				→オフィシャルサイト
				＜ネタ元＞

				→窓の杜



マウスの動きやクリックの場所でユーザーの動きを可視化「UserHeat」
shiteki — Thu, 01 Oct 2009 02:15:24 +0000
				
				マウスカーソルの動きだけでなく、マウスホイール動作、画面のサイズなど各種の情報から総合的に調査・判断し可視化してくれるサービス。

				パターン認識や機械学習を利用して、他の研究機関や他社の特許を侵害しない手法でデータを分析してくれるようです。
				自分でHTMLタグを設置しないといけないので、はてなダイアリー、ヤフーブログ、楽天ブログ、SNS、Twitterなどのサービスでは使用できないようです。
				また、可視化された結果についても非公開にはできないので、注意が必要です。
				気になった人は以下から登録して設置してみてください。

				→UserHeat
				＜設置方法＞

				1.ログインしてHTMLタグを取得

				2.自分のサイトのHTMLのBODYタグの終了タグの直前に取得したHTMLタグを記述。



PDFファイルをGoogle Document Viewerで激速表示
shiteki — Thu, 17 Sep 2009 06:05:57 +0000
				Google Document Viewerを使えばADOBE READERを起動しなくてもPDFを見せることができます。

				IFAMEを使って表示する方法は
				URL&embedded=true" style="width:600px; height:500px;" frameborder="0">
単純に「http://docs.google.com/gview?url=URL&embedded=true」としてももちろんOK。

これからのPDF表示には欠かせない方法になるかもしれませんので覚えておいて損はないかも。