JJworkshop.com

WEBアプリのUIもかなり凝って作れるようになってるんで、そうなると作った作者としてはやっぱしホーム画面に登録してほしくなります
じゃないと折角作ったアイコンやスタートアップパネルも日の目を見ないですしね（笑）

「mobile-bookmark-bubble」っての使うと出来そうだったんですが、なんだか実装がいろいろ面倒そう…

もっと簡単にできないものかと試行錯誤

てーことで、Sencha Touch のフローティングパネルと CSS で実装してみました

吹き出しの下部にヒゲを付けたかったんですが、これもできなくはないけど CSS が複雑になりそうだからパス
かわりに、文字キャラクタ「▼」で代用です
なんとなくそれっぽく見えるし十分実用になります

上記のサンプルは iOS Safari から試せます
↓
http://jjworkshop.com/smf/S01/

ソースコード一式はこちらからダウンロードできます

コードを解説すると

まず、パネルの CSS 部分がこれ

 #infoPanel.x-floating {
 padding: 8px;
 color: #666;
 font-size: 12px;
 line-height: 16px;
 background-color: #fff;
 border: 4px solid orange;
 -webkit-border-radius: 20px;
 -webkit-box-shadow: 2px 2px 4px #eee;
 }
 #infoPanel img {
 float: left;
 margin-right: 6px;
 }
 #mark {
 color: cyan;
 font-size: 28px;
 text-align: center;
 width : 100% ;
 clear : both ;
 }

ここでの肝は「x-floating」を書き換えてオリジナルのフローティングパネルと違うスタイルにしてるとこです

ポップアップの文言は「ｈｔｍｌ」に下記のように記述します

 <div style="display: none;">
 ・
 ・
 <div id="install">
 <div><img src="icon.png" width="72" height="72" /><p>下記ボタンタップで「ホーム画面に追加」をすると、このアプリをインストールできます。</p></div>
 <div id="mark">▼</div>
 </div>
 </div>

これは「display: none;」を指定して表示されないように隠してます

最後に「Javascript」での実装です
下記のコードをアプリのパネルが表示される一番最後に記述しておきます
これで、iOS の Safari から起動した場合にのみポップアップが現れるようになります
ホーム画面から起動した場合（それと iOS 以外から起動）はポップアップは表示しません

 // Safari から起動時にインストールするよう指示するパネル
 if (Ext.is.iOS && !Ext.is.Standalone)  {
 new Ext.Panel({
 floating: true,
 id: 'infoPanel',
 width: 250,
 height: 100,
 modal: true,
 centered: true,
 contentEl: 'install',
 listeners: {
 show: {
 fn: function () {
 // 下段のちょっと上
 var panel = mainPanel.getSize();
 this.setPosition((panel.width - this.width) / 2 , panel.height - this.height - 10);
 }
 },
 hide: {
 fn: function () {
 // １度しか表示しないのでここで消滅
 this.destroy();
 }
 }
 }
 }).show();
 }
}

「floating: true」にしないと CSS の「x-floating」対象になりません
「id: 'infoPanel'」はスタイルシートで利用する「#infoPanel」とマッチ
「contentEl: 'install'」が「html」に記述した文言のID名とマッチ
「modal: true」とモーダルにするのが肝で、これでパネル以外をタップしたときに hide が処理され自動消滅します
ポップアップパネルの位置は show した時点でメインパネルの位置から計算してます

と、まぁ　こんな感じですね