apple-touch-icon.pngとは?

私が運営しているサイト(ウェブアラカルトではない別サイト)のエラーログをチェックしていたら、

「apple-touch-icon.png」が見つからないよ!(意訳)

という行があったものの、うちのサイト(HTML、CSS共に)にはそもそもそんなファイルを表示する記述は無いよ、と思っていたのですが、このファイルはiPhoneやiPadのホーム画面用アイコンのことらしく。
つまり、閲覧者のどなたかがiPhoneなどで「ホーム画面に追加」をして頂いている、ということでしょうか。それは大変ありがたいことで。

なのですが、エラーログがたまるのは避けたいですので、「apple-touch-icon.png」なるファイルを設置することにしました。
作業の参考にしたのはこちらのサイト。

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう(Web担当者Forum)

まあすごくざっくりいえば、
「apple-touch-icon.png」という名前の画像ファイル(png)を作り、サイトのルートディレクトリにアップする。
というだけです。

画像のサイズは
○57px × 57px
 →ファイル名は「apple-touch-icon.png」「apple-touch-icon-precomposed.png」
○72px × 72px
 →ファイル名は「apple-touch-icon-72×72.png」「apple-touch-icon-72×72-precomposed.png」
○114px × 114px
 →ファイル名は「apple-touch-icon-114×114.png」「apple-touch-icon-114×114-precomposed.png」
○144px × 144px
 →ファイル名は「apple-touch-icon-144×144.png」「apple-touch-icon-144×144-precomposed.png」
の8種類を作りました。
(「precomposed」がついているファイルがあると、端末によるハイライト系の自動処理が行われないので、あわせて作ってアップしました。)

私は、ツイッター用のアイコンをそのままリサイズしてアップしただけです。
ロゴやfaviconを流用しても良いかもしれませんね。

まあ時間はそんなにかからないので、スマホ向けサイト(又はレスポンシブレイアウト等でスマホでも見れるサイト)を作っている方は、こういうファイルを用意してみては如何でしょうか。

サイト制作に使える画像作成・編集関連ソフト

私はデザイナーではないので、プログラマやコーダー(HTMLやCSS書く人)向けの、手軽に使える感じのソフトを紹介。

■画像・写真加工(ペイントソフト)
ビットマップ画像というのは、画像を格子状区切った点(ピクセル)に分割し、その点の色や濃度を数値として表現する形式の画像。
拡大すると劣化してしまう。ファミコン・スーファミ時代のドット絵などを頭に浮かべると分かりやすいと思います。
フォーマット(拡張子)は、BMP、GIF、JPEG、PNG、TIFF等がある。ウェブ上で見る画像やパソコン・携帯・スマートフォン・デジカメ内にある画像はほとんどこれです。

Adobe Photoshop Elements 11
画像・写真加工ソフトとしては一番有名なソフト「Photoshop CS」の廉価版。
対応OSは、WindowsとMacintosh。
画像・写真の加工、補正、合成、整理などを行うことができる。

この廉価版は、一般向けは1万円台前半、学生向けは1万円以下で購入可能。
Photoshop CS(廉価版ではない方)は8万円台とかなりの高額で、本格的な写真加工やCG制作などをやるというのでなければ、一般ユーザが使う分には「Photoshop Elements」の方で十分かと思います。
また、仕事上のスキルとして考えると、Photoshopの仕様経験が求められることも多いので、慣れておいて損は無いかとも思います。


左がパッケージ版、真ん中がダウンロード版、右が学生向け版

[参考]Photoshop CS6

左がWindows版、右がMacintosh版

GIMP
画像の加工・編集などが行えるフリーソフトのペイントソフト。
対応OSは、Windows、Mac OS X、Linux。
無料で使えるが、機能自体は豊富。画像・写真の加工、補正、合成、整理などを行うことができる。

使い方を解説しているサイトや書籍もあるので、無料で(もしくは書籍代位で)始めたい人にはこれで十分かと思います。

[解説書]

Paint.net
画像の加工・編集などが行えるフリーソフトのペイントソフト。
対応OSは、Windows。
上記サイトは英語のサイトだが、ソフト自体は日本語で使うことが出来る。(メニューも日本語化されている。)
簡単な写真・画像の加工・補正ならば十分行うことができる。
画像加工・補正の初心者でも扱いやすいので、最初はこのソフトを使ってみて、機能や出来ることに不満を感じたら、上のPhotoshopやGIMPを使ってみると良いかもしれないです。

■ベクタ画像作成・編集・加工(ドローソフト)
ベクタ画像というのは、おおざっぱにいうと、拡大縮小しても劣化が無い種類の画像形式。
画像の制作時にはベクタ形式で作っておいて、ウェブサイトにはビットマップ形式に変換出力したものを使うと、後で画像のサイズ等を変更・修正したい場合に便利。
フォーマット(拡張子)は、EPS、PDF、SVG等がある。

Illustrator
ベクタ形式での画像作成・編集を行うソフト。
対応OSは、MacintoshとWindows。
イラスト、ロゴ、広告、パッケージ、画像素材などをデザインするツールとして使用されている。DTPでは非常によく使用されている。
また、仕事のスキルとしてはPhotoshopとIllustratorのセットで求めてくることも多い。

今後は、パッケージ(ダウンロード)ソフトの販売ではなく、Creative Cloudという月額いくらという料金体系での提供に移行する予定であることが発表されている。

[Windows版]

左がパッケージ版、真ん中がダウンロード版、右が学生向け版

[Macintosh版]

Inkscape
オープンソースで開発されている、ベクタ形式での画像作成・編集を行うソフト。
対応OSは、Windows、Mac OS X、Linux、UNIX系OS。
開発開始から長い年月が経つが、まだ機能はあまり多くなく、不完全な点も多いが、ベクタ形式での画像作成・編集が行えるオープンソースソフトウェアは貴重で、新機能追加を含む定期的な更新(新バージョンの公開)も続いているので、利用者は結構いる。

いきなりIllustratorに手を出すのは(金銭的に)難しいが、ベクタ形式での画像作成・編集を行いたいという場合には、有力な選択肢となります。

■ドット絵
一番上に書いた「画像・写真加工(ペイントソフト)」の一部なのですが、ソフトの性格がかなり違うので、別枠で紹介します。
このドット絵制作ツールは、格子状の1つ1つのマス目に、1つずつ色を付けていく(乗せていく)ことで画像を作成します。
その為、アイコンやロゴ、ゲーム素材(キャラクター等)の小さな画像を作るのに向いています。

edge
256色専用のドット絵エディタ。フリーソフト。
png、gif、bmpでの出力(保存)に対応している。

個人的に、ドット絵描く時に一番使いやすかったのがこのソフトです。

■リサイズ
画像のサイズ(大きさ)を変更することをリサイズといいます。
1つの画像のサイズを変更するだけならば、上で紹介したペイントソフトなどでも十分なのですが、大量の画像を同じサイズにリサイズしたい場合、それでは相当な時間がかかってしまいます。
そんな時に便利なのが、リサイズに特化したソフトです。

リサイズ超簡単!Pro
変換したい画像のサイズを指定し、画像をドラッグ&ドロップするだけで、大量の画像を一括リサイズできるフリーソフト。
bmp、jpg、png、tifでの出力(保存)に対応している。
リサイズ後の画像の品質(補間方法)も選ぶことができる。

リサイズに関しては、現状ではこのソフトが一番手軽で使いやすかったです。

以上、簡単にですが紹介してみました。
よろしければ参考にどうぞ。

異なる(古い)IEバージョンでテストする方法

普通、1つのパソコンには1つのバージョンのInternet Explorer(以下、IE)しかインストールできません。
その為、Webサイトの開発環境に入っているIEのバージョンとは異なる(古い)IEのバージョンで表示確認(テスト)するのが結構面倒です。

—事前情報—
現在使われている主なIEのバージョンは、IE6、IE7、IE8、IE9、IE10です。
特にこの中では一番古いIE6はWindowsXPに同梱されていたため、XP使用者のうちの一定数がその当時のまま(ブラウザを変えずに)使っているようです。
————-

では、異なる(古い)IEバージョンでテストする方法をいくつかご紹介します。
個人的なおすすめは、「(3)IE開発者ツール」と「(4)ExpressionWebSuperPreview」の併用です。

(1)複数のパソコンを持っている場合は、それぞれにインストールするIEのバージョンを変える
一番確実です。が、もちろん誰もがパソコンを複数台持ってるとは限りません。
しかも、現在使われている主なIEのバージョンは上記の通り5種類もあるので、全部を網羅するのはかなり難しいです。(会社組織などなら話は別ですが。)
仮想PC環境構築ソフト「Microsoft Virtual PC」を使うのも手ですが、動作環境であったり色々な準備が必要であったり大変です。興味がある方は、調べてみて下さいませ。

(2)有料のソフトを使う
有料のWebサイト開発ソフトには、ブラウザチェック機能が入っているものもあります。
自分が使っているソフトにそういった機能があるならば、それを使えば問題ありません。

(3)Internet Explorerの開発者ツールを使う
これが無料で使え、かなり便利です。IE10とIE9ならば使えます。(IE8でも使えるかもしれませんが、未確認です。)
選択できるバージョンは、そのブラウザのバージョンまでなので、IE10ならIE7~IE10、IE9ならIE7~IE9が選択できます。その為、新しいブラウザの方が多くのバージョンでのテストを行うことができます。

使い方は以下の通り。
IE開発者ツール
IE10を起動して、右上にある枠で囲われた1(赤枠部) → 2(緑枠部)の順にクリック。

IEブラウザモード選択
ブラウザ下部に開発者ツールが表示されるので、その中から「ブラウザモード選択」(赤枠部)をクリックして、目的のバージョンを選択。

これで、IEのブラウザバージョンを切り替えて表示確認をすることができます。
ただし、IE6が選択対象に入っていないので、表示確認できるのはIE7以降のみとなります。

(4)ExpressionWebSuperPreviewを使う
マイクロソフトが提供する、異なるブラウザでのテスト用ビジュアルデバッグツール。
60日の試用期間中は全機能(IEの全バージョンはもちろん、一部の他ブラウザもテスト可能)が使え、試用期間終了後もIE6とIE7の表示確認のみは使えます。(もちろん購入すれば、60日経過後も全機能が使えます。)
つまり、(3)のInternet Explorerの開発者ツールと組み合わせて使えば、IE6~IE最新版までの表示確認を網羅できます。

(5)IETesterというソフトを使う
IE6以降の表示確認が出来るフリーソフトです。
ただし、クラッシュすることも多々あるので、何らかの理由でInternet Explorer10の開発者ツールやExpressionWebSuperPreviewが使えない場合のサブとして使うのが良いかと思います。

以上、簡単にではありますが紹介してみました。

最初に書きましたが、個人的なおすすめは、「(3)IE開発者ツール」と「(4)ExpressionWebSuperPreview」の併用です。
よろしければお試し下さいませ。