*

ホーム画面にショートカットアイコン(スキームアイコン)を作成する

公開日: : 最終更新日:2013/11/19 iOS , ,

AppIcon60x60 2x

iOSのSafariには共有メニューに[ホーム画面に追加]があり、表示させているページへのショートカットアイコンを作成する機能があります。
またCocoppaなどの着せ替えアプリやTestFlightというテストツールでもホーム画面にアイコンを追加することができます。

自分で作ったアプリでもショートカットアイコンを利用したくなり調べたときのメモです。

注意

私が調べた方法はユーザの手間が大きく、iOSのバージョン変更などで問題がでる可能性もあります。改善は今後の課題として、とりあえずのやり方を書いてます。もっと良い方法があればご教授ください m(_ _)m

Safariからショートカット作成

いろんな方法がありそうですが、Safariの機能を利用して作成する方法です。特にプロファイルやサーバーなしでしかも簡単に実現できるからです。

大まかな手順

  1. info.plistでアプリで独自のURLスキームを設定する
  2. ユーザにSafariの共有メニューから[Home画面へ追加]を選択することを促すHTMLコンテンツを作成する
  3. 作成したコンテンツをdataスキームで開くコードをアプリに追加する

1. info.plistでアプリで独自のURLスキームを設定

info.plistを開いて以下のようにURL IdentifierとURL Schemesを自分のアプリにあわせて追加します。

Slog timer
URL identifierにはBundle Idを、URL Schemesのitem 0には任意の識別子を指定します。

2. [Home画面へ追加]を選択を促すHTMLコンテンツを作成

私が作成したサンプルです。

<head>
<title>%1$@</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=520px">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="data:image/png;base64,%2$@">
<style> .bb{ width:450px; border-radius:20px; padding:20px;color:#666677;} </style>
</head>
<body>
<center>
<a id="link" href="slog.timer:%3$@"></a>
<script type="text/javascript">
  if (window.navigator.standalone) {
    var e = document.getElementById("link");
    var ev = document.createEvent("MouseEvents");
    ev.initEvent("click",true,true);
    e.dispatchEvent(ev);
  } else {
    document.write("<div class='bb' style='height:80px;background-color:#ffffcc;font-size:50px;display:table-cell;vertical-align:middle;'>sLog Lite</div><br><div class='bb' style='background-color:#dfffff;font-size:30px;text-align:left' ><img src='" + document.querySelector("link").getAttribute("href") + "' width='114px' height='114px' align='left' style='padding:20px'><br><big>%1$@</big><br clear='left'><p>ç»é¢ä¸ã«ããå±æãã¿ã³ãã¿ãããã¦ããã®ãã¼ã¸ããã¼ã ç»é¢ã«è¿½å ãã¦ãã ããã<p>ãã¼ã ç»é¢ã«è¿½å ããã¢ã¤ã³ã³ãã¿ãããããã¨ã§ã¿ã¤ãã¼ãèµ·åã§ããããã«ãªãã¾ãã</div>");}
</script>
</body>

いくつかコツというか必要なトリックがあります。

まずアイコンの画像データ自体をコンテンツに含める必要があり、そのため画像データをBase64でエンコードしてdataスキームを使います。

次にこのコンテンツ自体をdataスキームでSafariに文字列として渡すことになるので、コンテンツサイズが大きくなりすぎると重くなり動作が不安定になります。それを回避するためheadのapple-touch-iconとbodyのimgタグで画像データを共有するようにします。

コンテンツがめでたく[ホーム画面に追加]された後、ホーム画面のアイコンをタップしてこのコンテンツを開いた場合には自分のアプリを起動するようにします。これはJavascriptのコードをwindow.navigator.standaloneの値で分岐させて実現します。

あとタイトルや画像データが変更しやすいようにprintfのフォーマットを使っています。

3.コードをアプリに追加する

作成したHTMLコンテンツをコードに追加したサンプルです。

NSString contentString = @"<head><title>%1$@</title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><meta name=\"viewport\" content=\"width=520px\"><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><link rel=\"apple-touch-icon\" href=\"data:image/png;base64,%2$@\"><style> .bb{ width:450px; border-radius:20px; padding:20px;color:#666677;} </style></head><body><center><a id=\"link\" href=\"slog.timer:%3$@\"></a><script type=\"text/javascript\"> if (window.navigator.standalone) { var e = document.getElementById(\"link\"); var ev = document.createEvent(\"MouseEvents\"); ev.initEvent(\"click\",true,true); e.dispatchEvent(ev); }else {document.write(\"<div class='bb' style='height:80px;background-color:#ffffcc;font-size:50px;display:table-cell;vertical-align:middle;'>sLog Lite</div><br><div class='bb' style='background-color:#dfffff;font-size:30px;text-align:left' ><img src='\" + document.querySelector(\"link\").getAttribute(\"href\") + \"' width='114px' height='114px' align='left' style='padding:20px'><br><big>%1$@</big><br clear='left'><p>ç»é¢ä¸ã«ããå±æãã¿ã³ãã¿ãããã¦ããã®ãã¼ã¸ããã¼ã ç»é¢ã«è¿½å ãã¦ãã ããã<p>ãã¼ã ç»é¢ã«è¿½å ããã¢ã¤ã³ã³ãã¿ãããããã¨ã§ã¿ã¤ãã¼ãèµ·åã§ããããã«ãªãã¾ãã</div>\");}</script></body>";

UIImage *iconImage = [UIImage imageNamed:@"表示ããç»å"];
NSData *iconData = UIImagePNGRepresentation(iconImage);
NSString *encodedIconString = [iconImageData base64EncodedString];
NSString *name = @"表示ç¨ã®åå";
NSString *resourceIdentifier = @"ä»»æã®ãªãã·ã§ã³";
NSString *dataContent = [NSString stringWithFormat:@"data:text/html;charset-UTF8,%@",
                                    [NSString stringWithFormat:contentString, displayName , encodedIconString, resourceIdentifier]];
UIPasteboard *board = [UIPasteboard generalPasteboard];
[board setValue:dataContent forPasteboardType:@"public.plain-text"];
          
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http:paste_here"]];

Sponsored Link

関連記事

4300d3f14f7f754c5b2cd5b720efb39f.png

cocos2dxでマルチスレッド

cocos2dxでマルチスレッドをいじったときのメモ あらかじめautoreleaseに

記事を読む

checkbox.png

確認ダイアログ付きチェックボックス(Checkbox)

図のようなチェックボックスとアラートの組合せを実装しようとした際にiOSには外観などを簡単にカスタ

記事を読む

no image

Renderer::visitRenderQueueで落ちる場合

Cocos2d-x v3にしてから描画で突然落ちる場合があり、 原因をたどっていくと、Re

記事を読む

kii1.png

KiiCloudでファイルアップロード

KiiCloudではサーバーと通信が必要な処理は、同期タイプ(Synchronous)と非同タイプ(

記事を読む

2015_ec1.png

イーモン プレビュー動画

動画2作目、お正月っぽく

記事を読む

emon_banner_small.png

eMon

eMonのプレイ動画をアップロードしました。 なぞって、つなげて回答するシステムが

記事を読む

tmp.png

最近のAppStore審査【iOS8】

紹介動画でリジェクト!?(App Preview) AppStoreのアプリ紹介にに機能や

記事を読む

emon.png

【イーモン】v1.5リリース

やっとv1.5リリースできました。 継続的にプレイを続けてもらえるように ゲームのバランス

記事を読む

teach_s.png

[eMon] English Monstersレビュー申請中

先日、新しいiOSアプリを審査に出しました。 English Monsters(略してeM

記事を読む

ace.png

イーモンxエースクラウン「Aの塔」決定

あの英和辞典エースクラウンがイーモンに登場します! エースクラウンで取り上げられている会

記事を読む

Sponsored Link

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Sponsored Link

  • 発音辞書イーモン
  • English Monsters
  • sLog(時間管理アプリ)
  • 生粋のC++プログラマーです。 最近は、Objective-Cやxcode、cocos2d-xなどを学びながらiPhoneアプリを開発しています。

Google+ Google
PAGE TOP ↑