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」を書き換えてオリジナルのフローティングパネルと違うスタイルにしてるとこです
ポップアップの文言は「html」に下記のように記述します
<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 () { // 1度しか表示しないのでここで消滅 this.destroy(); } } } }).show(); } }
「floating: true」にしないと CSS の「x-floating」対象になりません
「id: 'infoPanel'」はスタイルシートで利用する「#infoPanel」とマッチ
「contentEl: 'install'」が「html」に記述した文言のID名とマッチ
「modal: true」とモーダルにするのが肝で、これでパネル以外をタップしたときに hide が処理され自動消滅します
ポップアップパネルの位置は show した時点でメインパネルの位置から計算してます
と、まぁ こんな感じですね
logo66
この仕組みは,アンドロイドでも作動しますか?
jj
んー、Androidはあまり使ったこと無いですが
ポップアップを出すだけなら、同じ手法でいけると思います
ただ、ホームにアイコンを登録する手順がiOSとは違っていたと思うので、同じメッセージではダメかと思います