WordPress初心者がiPhone用にApple touch iconを作成して簡単設置してみた

今回は、アップルタッチアイコン（Apple touch icon・WEBクリップ）を作って自分のブログに設置してみたのでレポート。WordPressだけでなく、その他ブログやWEBサイトでも使える（かもしれない）設定方法についても調べてみたのでメモとして残すことにする。

さて、当サイトをWordPressに移行してから、現在約1ヶ月が経った。というわけで、そろそろ僕が使っているテーマのカスタム機能を使って、設定を整えていくことにした。ちなみにこのブログの環境は以下の通り。

WordPressのバージョン	4.1.1
WordPressのテーマ	Simplicity 1.6.0
Simplicity拡張テーマ（子テーマ）	Simplicity Child

で、”Simplicity“というなんだかすごくて優しい人が作っているこのテーマはものすごく秀逸で、正直あまり何もしなくても素敵な体裁が整ってしまう。更に、当初はとにかく動かすことに必至だったこともあり、そもそもどんな機能があるのか、あまり目を通したことが無かった。

そこで、まずはボーっとWordPress編集画面内左サイドにある「外観」→「カスタマイズ」内の各項目を見てみたところ、何これチョーたのしそー！っていうカスタマイズ機能が満載だった。そして各設定項目の中でも、見た目ばかりを気にする僕にピッタリの機能を発見した。

「その他」の中にある「アップルタッチアイコン」の設定だ。

なんだかオシャレな雰囲気の設定項目に、これは！！ってなった。が、「アップル」＝「iPhone」っぽいというイメージから、安易にオシャレでナウいと決めつけただけで、実際に何のことかさっぱりわからなかった。

アップルタッチアイコンって何？

Apple touch iconとは

Appleのデベロッパ向けのドキュメントを調べてみると、Appleのデバイス上で使う”Webクリップ(Web Clip)アイコン“というものだそうで、Webサイトを追加するとSafariのホーム画面や、iosのホーム画面に出てくる例の角丸の矩形アイコンのことらしい。

iPhone – SafariでのWEBクリップの追加方法

改めてどんな感じか、手持ちのiPhone5s iOS8.2でSafariからWEBクリップを追加してみた。

初心者がアップルタッチアイコン（Webアイコン）を作ってみた

アイコンサイズはiosやデバイスによって異なり、色々な説明サイトによると144px x 144px とかRetinaディスプレイはなんじゃらかんじゃらとか色々書いてあるんだけど、知識のかけらも無い僕にはよくわからないので、とりあえずAppleで確認できた表を参考に作ってみることにする。

WEBクリップの解像度

これもAppleのデベロッパ向けドキュメントに記載されており、以下のようになっているらしい。

Asset	Web clip icon(px)
iPhone 6 Plus (@3x)	180 x 180
iPhone 6 and iPhone 5 (@2x)	120 x 120
iPhone 4s (@2x)	120 x 120
iPad and iPad mini (@2x)	152 x 152
iPad 2 and iPad mini (@1x)	76 x 76

なるほどこれまた全くよく分からないが、設定方法によってはサイズごとに複数のアイコンを設置することができるらしいので、とりあえず表にあるものは全て作ることにした。

ちなみに、あとで知ったことではあるが、表示時にデバイス側で適宜縮小表示してくれたりもするみたいなので、「雰囲気だけでいいや」という面倒臭がりな人は一番大きなサイズを作っておくのが無難な気がする。

WEBクリップ用アイコン画像を用意する

自分で描いて作る場合

僕はWindows8.1でIllustratorCS2（※動作対象OSとしては対象外）を使って作ってみた。PhotoshopやフリーのGIMP、Inkscape等でも良いと思う。ここで比率１：１の画像を作成し用意する。

WEBサービスを使う場合

もし手元に元画像があり、複数解像度の画像を用意することが面倒であれば、iconifier.net 等のアイコン無料お手軽作成WEBサービスで自動的に作って貰えるらしい。今後、実際に使ってみた際には使用感をまとめてみようと思う。

icon画像ファイルについて

png形式推奨。ファイル名については、設定方法によって色々あるみたいだが、とりあえず “apple-touch-icon.png” にしておくのが無難なようだ。設定方法の種類については後述する。

アップルタッチアイコンの各設定方法

今回は設定方法としてSimplicityのカスタイマイザを使い、簡単設定のみで済まそうかと考えていた。しかし、ブログサービスを借りていたり、そういったものが無いケースもある。そのような場合はどのように設定するか、折角なのでその他設定方法についても調べてみたので、下記3種類の設定方法について簡単に説明する。

WordPress（Simplicity）カスタマイザで設定する

まずは、今回メインとなる、WordPressのテーマにある設定のみで設定を行ってみた。ちなみに、この方法で設定が行えるのは単一のファイルのみだ。

WordPressの編集画面にログインしたら、左メニュー内にある「外観」>「カスタマイズ」>「その他」>「アップルタッチアイコン」の項目より「画像を選択」を押す。
メディアライブラリが開くので、まだ画像をアップロードしていない場合は「ファイルをアップロード」から予め用意した画像をアップロードする。
メディアライブラリから使用する画像を選択し「画像の選択」ボタンを押下
最後に「保存して公開」を忘れずに行う。

実際にやってみたが、たったこれだけで設定ができ、ものすごくあっけなかった。改めてCMSの便利さに感激した。

WEBサーバのrootに設置する方法

もし、レンタルWEBサーバ借りていたり、ブログサービスをレンタルしており、FTPクライアント等でWEBサーバのルート（サイトの一番上の”index.html”等と同じ階層）に対しファイルアップロードが可能な場合は、画像ファイル名を “apple-touch-icon.png” とし、WEBサーバーのルートへアップロードするだけでWEBクリップ用のアップルタッチアイコンファイルが設置できる。

画像ファイル ”apple-touch-icon.png” を用意
FTPクライアント等でWEBサーバーのroot(index.html等と同じ階層)にアップロード
simplicityを利用している場合は”WPルートディレクトリ/wp-content/themes/simplicity/images/apple-touch-icon.png”をリネームするか削除する。下記備考に詳細有り

備考 simplicityを使用している場合

simplicityを使用している場合、WEBサーバのrootに設置する方法のみでは適用されず、予めテーマ側で用意された”simplicity”のアイコンが表示されてしまう。これの原因は”WPルートディレクトリ/wp-content/themes/simplicity/images/apple-touch-icon.png” が設定として優先されている為だ。多分。※パスの赤文字部分はデフォルトの場合で、子テーマ(simplicity-child)やタイルリストテーマ(simplicity-child-tile-list)などを使っている場合は適宜そのディレクトリ名に変更する。

で、これを回避するには、FTPクライアントなどでサーバにアクセスし、”WPルートディレクトリ/wp-content/themes/simplicity/images/apple-touch-icon.png“リネームか削除する。もしくは、このファイルを目的のファイルに差し替えてしまう。ちなみに、ファイル自体を差し替えた場合は、WPのルートディレクトリにファイルを配置しなくても良い。多分！

WEBページのheader部分に自分で記述する方法（複数解像度可）

ヘッダー箇所に

<head>
省略...
<link rel="apple-touch-icon" href="./icondir/ファイル名.png">
...省略
</head>

という形式で記述すると ”./icondir/ファイル名.png” がWEBクリップとして設定される方法。この方法では単体での設置もできるが、特に複数解像度のアップルタッチアイコンを設置する場合に有効な方法でもある。

僕がやってみた具体的な手順はこんな感じだ。

必要な各解像度の画像ファイルを用意

apple-touch-icon-180×180.png

apple-touch-icon-152×152.png

apple-touch-icon-120×120.png

apple-touch-icon-76×76.png

用意した画像を全てサーバ上の任意のディレクトリにアップロード

保存ディレクトリ：”ドキュメントルート/wp-content/themes/simplicity-child/images/”

FTPクライアントから上記ディレクトリへアクセスし用意した画像を全てアップロードした。

ヘッダーに各解像度用の設定を記述

<head>
省略...
<link rel="apple-touch-icon" sizes="76x76" href="./wp-content/themes/simplicity-child/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="./wp-content/themes/simplicity-child/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="./wp-content/themes/simplicity-child/images/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./wp-content/themes/simplicity-child/images/apple-touch-icon-180x180.png">
...省略
</head>

僕の場合はテーマの元のソースをいじりたくなかったので、子テーマ内に拡張用に作られた”header-insert.php”に追記した。また、今回はファイル名の指定にドキュメントルートからの相対パスを用いたが、以下の様な指定方法でも実装できる。

「子テーマへの参照」を用いた場合の記述例

<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_stylesheet_directory_uri() ?>/images/apple-touch-icon-180x180.png">

ブラウザから見た絶対パスで記述する場合

<link rel="apple-touch-icon" sizes="180x180" href="<strong>https://hage.chirakashi.net/wp-content/themes/simplicity-child/images/apple-touch-icon-180x180.png</strong>">

まとめ

前項に紹介したいずれかの方法で簡単に設置が行えるので、ブログやWEBサイトの環境に合わせて設定すればなんとかなると思う。他にも方法が多数あるのかもしれないが、僕は初心者だからよくわからないし知らないので、何も聞かないでもらいたい。

複数解像度の設定で実際に表示される画像

ヘッダー内に記述する方法で複数解像度を設定した場合、結局どの画像が表示されるのか。デバイスによって違うと思うが、僕のiphone5s（ios8.2）では、safariからWEBクリップを追加してみたところ 180px × 180px の画像が表示された。その後 180px の記述を削除してみると、今度は 152px の画像が表示された。どうやら同環境の場合、一番大きなものが優先されるらしい。

で、やっぱり結局一番大きな画像を用意すれば良いんじゃないの？って思ったので、面倒な僕は1種類しか設定していない。