スマートフォンのホーム画面に「ええやん姫路」が出ます! 〜ウェブクリップのお話〜

よいやさー!ええやん姫路フロントエンドエンジニアの長尾です!

ええやん姫路のリニューアルのために日夜プログラムを書きまくっておりますが、現在のええやん姫路にも少しだけ手を入れています。

そこで、今回は今すぐ試して楽しい機能をご紹介しますよ!

スマートフォンのホーム画面に「ええやん姫路」が!

なべちゃん(ええやん姫路の編集長)が、Facebookにこんな投稿をしていました。

favicon画像作ってみた

これは「ウェブクリップアイコン」というスマートフォンの機能を使っているんです。

ウェブクリップアイコンとは

ウェブクリップアイコンは、スマートフォンのホーム画面に「ブックマーク」や「お気に入り」を作ることができると考えてもらうと分かりやすいかもしれません。

お手持ちのスマートフォンが対応していれば、この機能自体はどこのホームページでも使うことができます。

ところが、ちゃんとホームページ側で対応していないと、アイコンがスマートフォンの標準のデザインになってしまうんです。

「ええやん姫路」では、このウェブクリップアイコンに既に対応しているので、あなたのスマートフォンのホーム画面から、いつでもすぐに「ええやん姫路」にアクセスすることができちゃうんです!

ウェブクリップアイコンを表示する方法

スマートフォンにも色々あるんですが、今回はiOSiPhoneiPod touchiPad)とAndroidの場合の手順をご紹介しますね。

iOSiPhoneiPod touchiPad)の場合

それでは、iOSでウェブクリップアイコンを表示する方法を説明しますね。

手順1(iOS

まずはSafariで「ええやん姫路」にアクセスして、トップページに移動してください。

ここメッチャ大事です。記事やカテゴリなど、トップページ以外のページをウェブクリップしてしまうと、毎回そこへアクセスすることになってしまいます。

トップページを表示できたら、Safariの下側のメニューの中から、真ん中にある「□と↑を組み合わせた記号」を選んでください。(下の画像を参照)

ええやん姫路 トップページのキャプチャ画像

「そないなもん出とらへんがい!」っていう人は、画面の一番上のほうを“ちょん”と触ってみてください。たぶん出てきます。

手順2(iOS

無事に□と↑を組み合わせたアイコンを選択できたら、下の画像みたいな表示が出てきます。

この中からホーム画面に追加を選択してください。

ホーム画面に追加ボタンの位置のキャプチャ画像

手順3(iOS

次にこんな画面になりますが、もうこのまま右上の追加を選択すればOKです!

ホームに追加画面のキャプチャ

できあがり!(iOS

これでホーム画面を見てみると、ええやん姫路のライターの2人がアイコンになって出てきますよ!

iOS端末のホーム画面のキャプチャ

Androidの場合

次にAndroidでウェブクリップアイコンを表示する方法を説明します。

ちなみに今回はAndroidに標準で搭載されている「ブラウザ」で

手順1(Android

iOSと同様に、ええやん姫路のトップページに移動してください。

Androidもやっぱりトップページ以外でウェブクリップしちゃうと、そのページに毎回アクセスされちゃいますからね。

トップページを表示できたら、下の画像を参考に画面右上のメニューボタンを選んでください。

ええやん姫路 トップページのキャプチャ画像

手順2(Android

メニュー項目が出てくるので、その中からホーム画面にショートカットを追加を選びます。

Androidブラウザのキャプチャ

できあがり!(Android

で、もうできあがりです。Androidはやっ!

Android端末のホーム画面のキャプチャ

これからもええやん姫路をよろしく!

これで、いつでもどこでも指先ひとつでええやん姫路を見ることができるようになります!

これからどんどん更新ペースも上げていけるように試行錯誤していますので、どうぞお楽しみに!!