カテゴリー : WEB

MIMEとは

WordPressのテンプレート優先順位で『添付ファイル用のページ』で書いたMIMEです。

MIME(Multipurpose Internet Mail Extension)は、バイナリデータも添付ファイルとして送れるようにした規格です。
ウェブ上で利用されるファイルには、拡張子(識別子)があり、拡張子とファイルのデータ型(データの種類)の関連付けを担っているのがMIMEタイプです。

主なMIMEタイプ一覧

ファイル形式 一般的な拡張子 MIMEタイプ
テキスト .txt text/plain
HTML文書 .htm,
.html
text/html
XML文書 .xml text/xml
JavaScript .js text/javascript
CSS .css text/css
VBScript .vbs text/vbscript
Microsoft AVI .avi video/x-msvideo
MPEG映像 .mpg video/mpeg
GIF画像 .gif image/gif
JPEG画像 .jpg,
.jpeg
image/jpeg
PNG画像 .png image/png
CGIスクリプト .cgi application/x-httpd-cgi
Word文書 .doc application/msword
PDF文書 .pdf application/pdf

WordPressテンプレート優先順位

WEBデザイン レイアウトの時に便利なサイトたち

黄金比

黄金比レイアウト「golden_ratio」

黄金比「golden_ratio」


golden ratio

黄金比とは、最も美しいとされる比「1:(1+√5)/2」のこと。
近似値は1:1.618。約5:8になります。
「Golden Ratio Calculator」は黄金比をWEBデザインで簡単に利用できるWEBツールです。
ただ、数値を入力するだけで、黄金比の計算してくれます。

ちなみに、名刺は黄金比です。

余談ですが、黄金比はジョジョ好きならご存じのスティールボールランの鉄球や爪弾をアワーアップさせたヤツです。(めちゃくちゃ余談…)

グリッドレイアウト

グリッドレイアウト「grid calculator」

グリッドレイアウト「grid calculator」


grid calculator

グリッドレイアウト「grid system」

グリッドレイアウト「grid system」


Variable Grid System

グリッドレイアウトとは簡単にいうと、いろいろと種類がありますが、グリッド分けして、写真やイラスト、テキストエリアなどのパーツを整理して美しく見せるレイアウトの方法です。
かっちりと融通のきかないものも、可変的なものもあります。
最近は可変グリッドのスクリプトなんてのもよく目にしますね。

上記サイトは、基本となるグリッド分けを行うときに便利なサイトです。

白銀比

白銀比レイアウト「レイアウトの小技」

白銀比レイアウト「レイアウトの小技」


レイアウトの小技

白銀比とは1:1.414の比率のこと。
日本では白銀比が古くから使われています。
法隆寺や四天王寺や、生け花の美のバランスにも採用されていたりします。
身近なものではA3、A4の用紙の縦横の比率です。
A3を半分に折ってみるとA4の大きさになります。
WEBデザイン 制作に役立つ無料サービス・ツールまとめ


いろいろなレイアウトの比率だったり方法があります。
どんなデザインにするのか、
迷った時やバランスがどうしても悪いといったときに使ってみてはどうでしょうか?
どれも実績があり認知されているものなので、WEBのデザイン案を捻りだせなくなったら頼ってみるのも手です。
説明するときは説得力もあるし良いかも!?

WEBデザイン レイアウトの時に便利なサイトたちでした。

今からプログラマー「プログラミン」

文部科学省が公開しているプログラマー体験「プログラミン」。

プログラミン

プログラミン

子供が対象のようですが、大人も楽しめます。
自分の絵を用意されている動きや音(プログラム)の組み合わせでプログラマーになっちゃおう!
みたいな感じです。(たぶん)

プログラミン 使い方

プログラミン 使い方

Flashなどでプログラミングで挫折した人は「プログラミン」で遊んでみると、頭の中が整理されるかも!
プログラミングに興味あるけど、環境つくったりソフトインストールしたりが面倒だった人もサイトにアクセスするだけで良いのでどうでしょうか?
(Flash Playerは必要だけど)

プログラミン

しかし文部科学省は外注で作ったんだろうか??
外注なら結構な金額になりそうだけど・・・

便利サイト「パスワード作成」

passwordをランダムに作成

passwordをランダムに作成

PassWord Marker
パスワードをランダムに作成してくれるサイトです。
4~12文字でアルファベットの大文字・小文字・数字・記号・文字の重複などをチェックして「Make」を押すだけ。
1度の6パターンの文字列を出力してくれます。

同じようなサイトやソフトはたくさんありますけど、このサイト便利です。

HDD丸ごとバックアップソフトのまとめ

パソコンのトラブルに備えて、大切なファイルのバックアップはしていますか?
万が一のトラブルに備えて、HDDのバックアップをアシストしてくれるソフトをまとめてみました。
インストールしてあるアプリケーションも丸ごとバックアップしてくれるソフトたちです。
HDDを丸ごとバックアップしておけば、大切なファイルが復元できるかもしれません。

Windows Complete PC(バックアップ)
Windows7、WindowsVista Business、Business、Ultimate、Enterpriseで搭載されているソフト。
OSに初めからインストールされているので、当てはまるOSを使っている方は、単にバックアップだけなら問題なさそうです。


Acronis True Image Home 2010
かなり強力なバックアップソフトです。
私個人としては一押し!高機能で評判が良いです。
バックアップ・HDD復元のスピードが速いのもうれしいところです。
何度助けられたことか!
「Toast」というソフトを販売している会社です。


LB コピー ワークス11
こちらも高機能で使い勝手が良いです。
「イメージバックアップ」と「HDDまるごとコピー」の両方ができる。
Windows7対応。
ハードディスクのコピー(コピーコマンダー9の使い方の解説が詳しく掲載されています。)
※コピーコマンダー9の最新版がLB コピー ワークス11

EASEUS Disk Copy
フリーソフト。
OS、パーティション、ファイルシステムなどをすべてコピーしてクローンHDDを作成してくれます。


ハードディスク入れ替え12pro
ハードディスクを丸ごとコピー 簡単操作でOS・アプリケーションすべて移行してくれるソフトウェア。
Windows7対応。


ソフトだけではなく、ハードも発売されています。
HDDスタンドのみでHDDの複製ができます。

裸族のお立ち台DJクローンプラス
HDD丸ごとコピー機能搭載のクレードル型ベアHDDスタンド。
PCレスでHDDコピー機能が搭載されている。
hdd_copy ハードディスクをまるごとコピー

オンライン画像編集フリーアプリ「pixlr」

pixlrは、AdobeのPhotoshopのように高度な画像編集ができるオンラインアプリケーション(無料)。

pixlr

pixlr web site

ローカル内の画像を開いてみたところです。
pixlr 画像を開く

使い方は、Photoshopとほぼ同じなので、使い慣れている人はいきなり普通に使えてしまうと思う。ショートカットもほぼ同じです。
画面構成もほとんど変わらないので、使ってもあまり違和感がないです。

画像の保存形式は、JPEG、PNG、PXD。
ローカルに保存できる。
PXDは、Pixlr専用ファイルで、途中の編集画像ファイルを保存しておける。
PhotoShopでいうPSDのような感じです。

もし、出先で画像編集が必要になって、Photoshopがインストールされていないといった場合でも、オンラインPCがあればなんとか切り抜けることができるのではないでしょうか!

YouTubeで「Pixlr」と検索するとPixlrのチュートリアル動画がいろいろ出てきますよ。

肌をキレイにする方法

Photoshopの購入を検討している方も、pixlrで画像編集の勉強ができると思いますよ。

pixlr

XAMPPで自分のPC内(ローカル)WEB環境をつくる。

XAMPP(ザンプ)をインストールすれば、お金をかけてレンタルサーバーなど借りなくてもデータベースやプログラムのテストなどができるようになります。
サーバーなどの知識は、とりあえずは必要なく、一般のソフトウェアと同様にインストールするだけです。

勉強のためにお金を最初からかけなくても、自分のPCの中でWEB制作の環境をつくれることができます。

XAMPPとは

名前のAMPP部分は、Apache、MySQL、PHP、Perlの頭文字をつなげたもの。
これらのアプリケーションをひとつにまとめ、簡単にインストール・アンインストールできるようにしたアプリケーション。
もともとLINUXのアプリケーションで、そのときはLAMPPだったみたい。複数OSに対応するようになってXAMPPという名前になったようです。
対応OS:Windows、Linux、Mac OS X、Solaris
フリーウェアなので、無料です。


XMAPPの中身

  • Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l
  • MySQL 5.1.41 + PBXT engine
  • PHP 5.3.1
  • phpMyAdmin 3.2.4
  • Perl 5.10.1
  • FileZilla FTP Server 0.9.33
  • Mercury Mail Transport System 4.72

がインストールするだけで、自分のPC内(ローカル)で使えるようになる!しかも、無償で!インストールも簡単!


XMAPPをとりあえず、インストール

  1. XAMPPのダウンロードをする。
    http://www.apachefriends.org/jp/xampp-windows.html
    こちらにアクセスして、スクロールしていくと、EXEとあるので、そこをクリック!
    XAMPP ダウンロード

    XAMPP ダウンロード

  2. 「インストールする!」Cドライブ直下にインストールした方が良いです。
  3. コマンド画面(黒い画面)がでてきますが、そのままEnterで進めていって、最後はxを押して終了させましょう!
  4. コントロールパネル内ApacheのStartボタンをクリック!Runingとなる。
    XAMPPコントロールパネル

    XAMPPコントロールパネル

  5. ブラウザで
    http://localhost/
    にアクセスしてこの画面が開けばインストールは成功!

HTML5 書籍の内容を無料公開

HTML5の刊行予定の書籍が無料公開されている。
その書籍名は「HTML5: Up and Runinig」(O’REILLY)
Web上で全ての情報を公開している!
執筆者である、Googleの開発者であるMark Pilgrim氏のサイト。
Dive into HTML5
ただ、残念(当然?)ながら英語です。

クリエイティブコモンズライセンスは
http://creativecommons.org/licenses/by/3.0/deed.ja

HTML5とは

次世代HTMLの規格。
HTML4やXHTMLから、記述の仕方や追加された機能が多くある。
他にもメリットとしてSEO対策が、今までと比べると楽になりそうですよ。

WEBサイトの表示スピード計測「Pingdom Tool」

WEBサイトのスピード計測「Pingdom Tool」
サイトの表示が完全にされるまでの時間を計測できます。(無料です。有料版もあります。)

サイトが表示されるまで何秒耐えられる?でも書かせていただきましたが、年々ユーザーさんは反応の速さには厳しくなってきています。
少しでも速くWEBサイトが表示されることができれば、機会損失を抑えることができますね。

以下のような感じで、簡単に計測できるので一度運営サイトを試してみてはどうでしょうか?

pingdomtool URLを入れる。

URLを入力します。

URLを入力し、「Test now」をクリックするだけでサイトの計測が始まります。

計測画面
こんな感じで、計測が進みます。


計測状態は色分けされています。それぞれの色の意味はこんな感じです。

ウェブサイト インフォメーション
画面一番下に、結果が表示されます。

ほかのサイトを計測した結果です。
サイトが完全に表示されるまでの時間がこんな感じで数値化されます。
どこを改善すべきなのか、参考になります。

Pingdom Tools

サイトが表示されるまで何秒耐えられる?

ページが表示されるまでに、2秒以上かかってしまうと半数のユーザーをイライラさせてしまうようだ。
2009年にAkamaiがユーザー調査した結果は以下。


ユーザーにページ表示が遅いと感じさせてしまうまでの時間
対象:米国のネットショップ利用者1048名

4秒超 17%
3秒 36%
2秒 30%
1秒 12%
1秒以下 5%

2秒以下までの合計が47%ということで、役半数のユーザーがページ表示が遅いと感じてしまう。
3秒以下までだと、86%ものユーザーに遅いと感じさせてしまう。
2006年に行った調査では、4秒という答えが多かったということ。
3年程度で、半分の2秒までしかまてないほど、ユーザーはせっかちになっているということになる。
特にページ表示を気にする人は、オンラインショップで年間1500ドル買い物をする人だそうだ。
サイトの表示速度と売り上げの関係は、

  1. サイトが使いやすさ(88%)
  2. 個人情報が安全に守られているか(74%)
  3. <商品の詳細がわかる画像や動画の有無(67%)
  4. 商品検索機能がちゃんと動作するか(60%)
  5. チェックアウトのステップがスムーズか(57%)
  6. <ページがすばやく表示されるか(52%)

表示速度は、6番目の理由ではあるが、半数のユーザーの購入意欲を下げてしまうかもしれない。

googleが速いと判断するサイトは1.5秒以内に表示完了するサイトのようです。
また、サイトの上位表示させるための対策(SEO)としても、速いサイトは1つの判断材料となるようだ。
(200以上ある指標の1つなので、大きい要因とは言えないまでも、影響はある。)

日本人への調査ではないので、国民性などの問題もありそうだけど、速いインターネット回線が日々普及していく中で、ユーザーがせっかちになっていることには変わりないだろうと思う。
今後、さらにシステム、デザイン、表示速度はシビアになってきそうだ。

参考
http://web-tan.forum.impressrd.jp/e/2010/04/27/7848