WebGL Water
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
PushStateã¨PopSatateを使ã£ãŸæš—é»’é”è¡“ - Qiita
é¡§å®¢æƒ…å ±ã¨ã‹ç§˜åŒ¿ã—ãŸã¾ã¾ãƒšãƒ¼ã‚¸é·ç§»ã—ãŸã„å ´åˆã€Ajax ã¨PushState+PopState ã®Pjax ãŒä¾¿åˆ©ã§ã™ã‚ˆã(IE? ヤツã¯æ»ã‚“ã よ。) ã§ã€ã¾ã‚今作ã£ã¦ã‚‹ã‚µã‚¤ãƒˆã‚‚ãã‚Œã§ã„ã‘ã‚‹ã‹ãªãƒ¼ã¨æ€ã£ãŸã‚“ã§ã™ãŒãªã‹ãªã‹ãã›è€…ã§ã—ãŸã€‚ 上記ライブラリ自体ãŒå¾Œä»˜ã‘ã£ã¦ç†ç”±ã‚‚ãªãã«ã—ã‚‚ã‚らãšãªã‚“ã§ã™ãŒã€PHPフレームワークを使用ã—ãªãŒã‚‰ãƒ¢ãƒ¼ãƒ€ãƒ«ã‹ã‚‰Ajax ã§ãƒšãƒ¼ã‚¸æ›´æ–°ã™ã‚‹å ´åˆ, http://[host_name]/# #ã¯ã‚ã£ã¦ã‚‚ãªãã¦ã‚‚ã„ã„ã‚“ã§ã™ãŒã“ã®å½¢ãªã‚‰æ£å¸¸ã«HTMLã®ä¸Šæ›¸ããŒã§ãã‚‹ã®ã§ã™ãŒ http://[host_name]/index/index/index ã¿ãŸã„ãªå½¢ã ã¨ä½•æ•…ã‹Ajax処ç†ã®éƒ¨åˆ†ã§å¤±æ•—ã—ã¦ã†ã¾ãå‹•ã„ã¦ãã‚Œã¾ã›ã‚“。 ãªã®ã§ PushStateã®URI書ãæ›ãˆæ©Ÿèƒ½ã‚’利用ã—㦠URIを書ãæ›ãˆã¦ http://[host_name]/# ã¨ã—ã¦ãƒšãƒ¼ã‚¸ã®ãƒªãƒãƒ¼ãƒ‰ã‚’ã—ã¦
16行 㧠pushState popState - Qiita
2013/12/27 追記：åˆå›žã‚¢ã‚¯ã‚»ã‚¹æ™‚ã« popState イベントãŒç™ºç”Ÿã—リãƒãƒ¼ãƒ‰ã—ã¦ã—ã¾ã†å•é¡Œã¸ã®å¯¾ç–を記載ã—ã¾ã—ãŸã€‚（ã“ã®è¿½è¨˜ã«ã‚ˆã‚Šã€ã‚¿ã‚¤ãƒˆãƒ«ãŒ 15è¡Œ → 16è¡Œ ã«å¤‰æ›´ã«ãªã‚Šã¾ã—ãŸ^^） pushState popState ã¨ã¯ Ajax を使ã£ãŸã‚¹ãƒ ーズãªç”»é¢é·ç§»ã§ã‚‚ã€URL を書ãæ›ãˆå±¥æ´ã«è¿½åŠ ã—ã€ãƒ–ラウザãƒãƒƒã‚¯ã«å¯¾å¿œã™ã‚‹ã“ã¨ãŒã§ãる仕組ã¿ã§ã™ã€‚SEO ã¸ã®å½±éŸ¿ã‚’出ã™ã“ã¨ç„¡ãæ“作性をå‘上ã•ã›ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ ç¾åœ¨ã€pushState/popState を使ã£ãŸã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã‚µã‚¤ãƒ‰ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚°ã‚’実ç¾ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリãŒã„ãã¤ã‹ä½œã‚‰ã‚Œã¦ã„ã¾ã™ãŒã€ä»Šå›žã¯ jQuery ã ã‘ã§è¡Œã†ã‚·ãƒ³ãƒ—ルãªæ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ å‚考: Googleã«ç¶šã„ã¦Bingã‚‚Ajaxã«ã¯pushStateを推奨 本題 jQuery ã ã‘ã§ã€15行程度ã§ã§ãã‚‹ pushState popState を使ã£ãŸ A
History APIã¨ã‚¹ãƒžãƒ›ãƒ–ラウザã§ã®ãƒãƒžã‚Šã©ã“ã‚ - Qiita
仕事ã§ã‚¹ãƒžãƒ›ç”¨ã‚µã‚¤ãƒˆã‚’イジã£ã¦ãŠã‚Šã¾ã—ã¦ã€éžåŒæœŸå‡¦ç†ã§ã®ãƒšãƒ¼ã‚¸ãƒ³ã‚°ã‚’ ä¿®æ£ã™ã‚‹ã«éš›ã—ã¦ã€History APIを触ã£ã¦ã¾ã—ãŸã€‚ スマホã®ãƒ–ラウザ周りã®å·®åˆ†ã§è‰²ã€…ã¨ãƒãƒžã£ãŸã®ã§ã€ãƒ¡ãƒ¢ã—ã¦ãŠãã¾ã™ã€‚ History APIã¨ã¯ ã¨ã‚Šã‚ãˆãšå¾©ç¿’ã—ã¾ã—ょã†ã€‚ ##æ¦‚è¦ HTML5ã§è¿½åŠ ã•ã‚ŒãŸã€å±¥æ´æ“作ã®API。 å±¥æ´ã‚¹ã‚¿ãƒƒã‚¯ã«å±¥æ´ã‚’è¿½åŠ ï¼ˆpush)ã€ç¾åœ¨ã®å±¥æ´ã®æ›¸æ›ï¼ˆreplace)〠ブラウザãƒãƒƒã‚¯ç‰ã®ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã«ã‚ˆã‚‹å±¥æ´ç§»å‹•ã‚’監視ã™ã‚‹(pop)ã€ã¨ã„ã£ãŸã“ã¨ãŒå¯èƒ½ã«ãªã‚‹ã€‚ history自体ã¯ä»¥å‰ã‹ã‚‰ã‚ã£ã¦å±¥æ´ã®æ“作ã¯ç”»é¢é·ç§»ã‚’ä¼´ã£ã¦ã„ãŸãŒã€ã“れらã®APIã®è¿½åŠ ã«ã‚ˆã£ã¦ã€ ç”»é¢é·ç§»ã‚’è¡Œã‚ãªãã¨ã‚‚JavaScriptã‹ã‚‰ã®å±¥æ´æ“作ãŒå¯èƒ½ã¨ãªã£ãŸã€‚ ##pushState å±¥æ´ã‚’スタックã«è¿½åŠ ã™ã‚‹ã€‚
jQueryã ã‘ã§(Pjaxを使ã‚ãšã«)Ajax+pushStateã™ã‚‹æ–¹æ³•
Sensebahnã®ã‚µã‚¤ãƒˆå†…ã§ã¯ã€ãƒšãƒ¼ã‚¸ã‚’é·ç§»ã™ã‚‹ã¨ãã«ãƒšãƒ¼ã‚¸å…¨ä½“ã®æ›´æ–°ã§ã¯ãªãページã®ä¸€éƒ¨ã‚’書ãæ›ãˆã‚‹æ–¹æ³•ã‚’ã¨ã£ã¦ã„ã¾ã™ã€‚（2013/1/31ã®ãƒ‡ã‚¶ã‚¤ãƒ³å¤‰æ›´ã§å»ƒæ¢ã—ã¾ã—ãŸã€‚） ãã†ã™ã‚‹ã“ã¨ã§ã€ãƒšãƒ¼ã‚¸å…¨ä½“ã‚’èªã¿è¾¼ã‚€ã‚ˆã‚Šã‚‚速ãé·ç§»ã§ãã€ã•ã‚‰ã«ã€ç”»é¢ãŒãƒ–ランクã«ãªã‚‹çž¬é–“ãŒç™ºç”Ÿã—ãªã„ã®ã§ç›®ã®ãƒãƒ©ãƒ„ã‚を抑ãˆã‚‰ã‚Œã¾ã™ã€‚ 仕組ã¿ã¨ã—ã¦ã¯Ajaxを使ã„ã¾ã™ã€‚ Ajaxã¯JavaScriptã§ç°¡å˜ã«ä½¿ã†ã“ã¨ãŒã§ãã¾ã™ã€‚ JavaScriptを使ã£ã¦ã€Ajaxã«ã‚ˆã‚Šãƒšãƒ¼ã‚¸ã®ä¸€éƒ¨ã‚’ã€ä»–ã®ãƒšãƒ¼ã‚¸ã®å†…容ã«æ›¸ãæ›ãˆã‚‹ã®ã§ã™ã€‚具体的ã«ã¯ã€æ¬¡ã®ã‚³ãƒ¼ãƒ‰ã§ã‚„ã‚Šã¾ã™ã€‚ example.html <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scri
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}