jsrun.itからアクセスしないと動きません kjunichi Follow 2012-01-28 08:29:38 License: MIT License Fork0 Fav0 View399 http://jsrun.it/kjunichi/yw1b#testtest urlのハッシュでどれくらいの長さが扱えるか調査中 114x114のjpegファイルは行けそう。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 67 lines HTML 18 lines CSS 44 lines http://jsrun.it/kjunichi/yw1b#testtest urlのハッシュでどれくらいの長さが扱えるか調査中 114x114のjpegファイルは行けそう。 jsrun.itからアクセスしないと動きません jQuery v1.7.1 function getHash() { var hash = window.location.hash; return hash.substring(1); // remove # } $(function(){ var durl = getHash(); if(durl.length > 1024) { var ua = ""; ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("safari") === -1){ $("title").text("Safariで開いてください。"); $("#message").empty(); $("#message").append("<div id='hukidashi2'><p>Safariで開いてください。<p></div>"); return; } var img = new Image(); img.src = durl; img.onload = function() { // アイコンとして設定する。 var cs = document.getElementById("icon"); var ctx = cs.getContext('2d'); ctx.drawImage(img,0,0); var h = document.getElementsByTagName('head')[0]; var e = document.createElement('link'); e.setAttribute('rel', 'apple-touch-icon'); e.setAttribute('href', durl); h.appendChild(e); document.title="アイコンの機能を選択してください"; $("#settings").show(); $("#message").text("アイコンの機能を選択してください。"); }; } else if(durl.length > 0) { //WebClipとして起動された場合、 // 所定のアプリや、設定画面に遷移する。 // aタグを生成して、それをクリックすることにして実装。 $("#message").append("<a id=\"test\" href=\""+durl+"\">a</a>"); var target = document.getElementById("test"); var evt = document.createEvent( "MouseEvents" ); evt.initEvent( "click", false, true ); target.dispatchEvent( evt ); } //機能が選択された場合の処理 $("#fName").change(function () { $("#message").empty(); var str = ""; str = $("#fName option:selected"); if(str.val()==="") { $("#hukidashi3").hide(); return; } else { // 機能が選択された場合 var hs = location.hash; var newloc = location.href; newloc = newloc.replace(hs,""); var title = str.text(); var furl = str.val(); location.href=newloc + "#" + furl; // $("hukidashi3").empty(); document.title = title; $("#hukidashi3").show(); $("#hukidashi3").text("ホーム画面に追加できます。"); } }).change(); }); <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <canvas id="icon" width="114" height="114"></canvas> <div id="message">お待ちください。</div> <div id="settings" style="display:none"> <select id="fName"> <option selected value="">アイコンの機能を選択してください</option> <option value="twitter://timeline">Twitter</option> <option value="mailto:">メール</option> <option value="evernote://a">Evernote</option> <option value="prefs:root=WIFI">WiFi設定</option> <option value="prefs:root=General&path=Bluetooth">Bluetooth</option> <option value="prefs:root=LOCATION_SERVICES">GPS設定</option> </select> <div id="hukidashi3" style="display:none"></div> </div> jsrun.itからアクセスしないと動きません #hukidashi2{ width:300px; height:80px; background:pink; position:relative; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom:10px; } #hukidashi2:after{ content:""; position:absolute; right:5%; top:76px; width:0; height:0; border-bottom:150px solid transparent; border-right:40px solid pink; } #hukidashi3{ width:300px; height:80px; background:pink; position:absolute; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom:10px; } #hukidashi3:after{ content:""; position:absolute; right:52%; top:76px; width:0; height:0; border-bottom:150px solid transparent; border-right:40px solid pink; } http://jsrun.it/kjunichi/yw1b#testtest urlのハッシュでどれくらいの長さが扱えるか調査中 114x114のjpegファイルは行けそう。 function getHash() { var hash = window.location.hash; return hash.substring(1); // remove # } $(function(){ var durl = getHash(); if(durl.length > 1024) { var ua = ""; ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("safari") === -1){ $("title").text("Safariで開いてください。"); $("#message").empty(); $("#message").append("<div id='hukidashi2'><p>Safariで開いてください。<p></div>"); return; } var img = new Image(); img.src = durl; img.onload = function() { // アイコンとして設定する。 var cs = document.getElementById("icon"); var ctx = cs.getContext('2d'); ctx.drawImage(img,0,0); var h = document.getElementsByTagName('head')[0]; var e = document.createElement('link'); e.setAttribute('rel', 'apple-touch-icon'); e.setAttribute('href', durl); h.appendChild(e); document.title="アイコンの機能を選択してください"; $("#settings").show(); $("#message").text("アイコンの機能を選択してください。"); }; } else if(durl.length > 0) { //WebClipとして起動された場合、 // 所定のアプリや、設定画面に遷移する。 // aタグを生成して、それをクリックすることにして実装。 $("#message").append("<a id=\"test\" href=\""+durl+"\">a</a>"); var target = document.getElementById("test"); var evt = document.createEvent( "MouseEvents" ); evt.initEvent( "click", false, true ); target.dispatchEvent( evt ); } //機能が選択された場合の処理 $("#fName").change(function () { $("#message").empty(); var str = ""; str = $("#fName option:selected"); if(str.val()==="") { $("#hukidashi3").hide(); return; } else { // 機能が選択された場合 var hs = location.hash; var newloc = location.href; newloc = newloc.replace(hs,""); var title = str.text(); var furl = str.val(); location.href=newloc + "#" + furl; // $("hukidashi3").empty(); document.title = title; $("#hukidashi3").show(); $("#hukidashi3").text("ホーム画面に追加できます。"); } }).change(); }); <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <canvas id="icon" width="114" height="114"></canvas> <div id="message">お待ちください。</div> <div id="settings" style="display:none"> <select id="fName"> <option selected value="">アイコンの機能を選択してください</option> <option value="twitter://timeline">Twitter</option> <option value="mailto:">メール</option> <option value="evernote://a">Evernote</option> <option value="prefs:root=WIFI">WiFi設定</option> <option value="prefs:root=General&path=Bluetooth">Bluetooth</option> <option value="prefs:root=LOCATION_SERVICES">GPS設定</option> </select> <div id="hukidashi3" style="display:none"></div> </div> #hukidashi2{ width:300px; height:80px; background:pink; position:relative; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom:10px; } #hukidashi2:after{ content:""; position:absolute; right:5%; top:76px; width:0; height:0; border-bottom:150px solid transparent; border-right:40px solid pink; } #hukidashi3{ width:300px; height:80px; background:pink; position:absolute; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin-bottom:10px; } #hukidashi3:after{ content:""; position:absolute; right:52%; top:76px; width:0; height:0; border-bottom:150px solid transparent; border-right:40px solid pink; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? http://jsrun.it/kjunichi/yw1b#testtest urlのハッシュでどれくらいの長さが扱えるか調査中 114x114のjpegファイルは行けそう。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit http://jsdo.it/kjunichi/yw1b jsrun.itからアクセスしないと動きません Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/yw1b/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kjunichi/yw1b" title="jsrun.itからアクセスしないと動きません">jsrun.itからアクセスしないと動きません - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter