Page Specific Javascript in Rails | Brandon Hilkert
UPDATE: I’ve written an updated article on this and the larger topic of organizing Javascript within a Rails project that includes Turbolinks. The asset pipeline has made including javascript in Rails applications a breeze. Without any additional changes, the code included in your app is executed on every page. However, with a combination of CSS class scopes and a jQuery plugin, you can isolate ce
Turbolinksを実装するにあたっての注意点 - おやまのエンジニアリングブログ
はじめに Rails 4になってTurbolinksやpjaxなどの非同期通信を使ってページを更新する方法が広く知られるようになりました。自分も積極的にプロジェクトに取り込んだのですが、結構癖があり、実装するにあたって色々考慮が必要だったのでその実装方法をまとめておきます。 ページ遷移後に$.readyが実行されない jQueryの.readyが実行されないというのがありますが、実はjquery-turbolinksというgemをGemfileに加えて、追加されたファイルをJavascriptのマニフェストファイルに加えるだけで解決するので特に問題ではありません。 グローバルスコープがクリアされない 技術の特性として、コンテンツ部分だけを置き換えているので、Javascriptのスコープはページ遷移をしてもクリアされません。なので、グローバルスコープに関数や変数を定義し続けると、どんどんメ
AngularJSとRails4を組み合わせる - ワザノバ | wazanova
https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Railsアプリのホスティングサービスを提供しているShelly Cloudがブログで、フロントでAngularJS、バックエンドでRails 4を採用するときの留意点について、まとめています。使用しているコードサンプルはこちらになります。 1) Building a JSON API in Rails RailsでAPIをいちから作ってみる。angularjs-rails-resourceのようなライブラリを使うときは詳細が違ってくるが、考え方は概ね同じ。 Routing namespace :api
Turbolinks
6. Turbolinks 2013/10/03 シナジーマーケティング(株) 鈴木 圭 [Rails 4.0] 第6章 Turbolinks 6.1. Turbolinks とは 6.2. Turbolinks の注意点 6.3. Turbolinks におけるイベント 6.4. Turbolinks におけるイベントの注意点 6.5. 部分的に Turbolinks を無効化する方法 6.6. ready をフックする大量のコードがある場合 6.7. Turbolinks を使用しない場合の設定 6.8. まとめ 6.1. Turbolinks とは Turbolinks は Asset Pipeline を活用しているアプリケーションにおいて画面遷移を高速化するライブラリです。 一般的にブラウザがページを表示するときには、 ページ自体の HTML をダウンロードする。 ページの中で参
JavaScriptアプリケーションのためのデザインパターン
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
Module Pattern in JavaScript and CoffeeScript
One of the shortcomings of JavaScript objects is the lack of support for private members. The ability to create private members makes external APIs more meaningful and helps keep code more manageable and DRY. The Module Pattern, pioneered by Douglas Crockford while building the YUI library, is a mechanism that allows for creating public and private members in JavaScript. This post looks at the pat
mubk
expand TOP DS_Store dropbox css3 Media Queries animation baloon1 html OGP default iframe smartphone js Simple Slideshow delay_fadeIn floating menu xml memo Chrome mac_hide_file mi regular expression sublime text 2 user_agent sublime:sass:compass default wordpress calender get_posts rss tmp xml plugins PostgreSQL+WP basic contact7 permalink スマホサイト制作メモ 数字が勝手にリンクされるのをふせぐ <meta name="format-detection"
モバイル対応Webアプリケーションのキャッシュ戦略
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
iPhone の Safari でアドレスバーを隠すときにやってはいけないこと - メモ用紙
スマートフォン向けサイトという言葉も下火となったが、良くないテクニックが蔓延しているのでこの記事を書いた。 そのテクニックとは次のようなもの。 window.addEventListener("load", function() { setTimeout(function() { scrollTo(0, 1); }, 100); }, false); ページが読み込まれたあとに縦方向にスクロールすることで、本来ユーザがスクロールして隠れるアドレスバーを強制的に隠すやり方。 Web 上を検索すると多数の記事が見つかる。 スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法 iPhone向けWebページで、アドレスバーを隠す - サンフラットの開発日記 - くらげのChangeLog Android/iPhoneのURLバーを隠す - tweeeetyのぶろぐ的めも iPhoneサ
iOS 7, mobile SafariのURLバーは消せない（ことも無いらしい）でもやっぱりダメみたい
風が心地よい季節、朝晩は少し寒かったりするのでTシャツに上着をはおりました。 まだ半ズボンだけど。 iOS 7登場して数週間。 iPhone 5S, 5Cを既に手にした人も多いかと… 新しくなった mobile Safari ちょっと気になったことを書き留めておく。 mobile Chrome と同じような仕様に変わちゃった。 Android ChromeのURL barは消せないと知った絶望感 ＊requestFullscreenを使う方法もあるようなので、追記してます。通常の閲覧でフルスクリーンをユーザーにしいるのはかなりアレなので使うことはないと思いますけど。videoとかだったらアリでしょうけど。 URLバーって書いたけどAppleの呼称は URL text field です。 Safari Web Content Guide これの iOS 7 版ってどこだろう。 Chrome
input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ | Stronghold Archive
どうもこんばんは！ 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
browserify を使い始めるためのファーストステップ 2013 冬
browserify は、ブラウザ JavaScript のためのコードを、Node スタイルのコード（Node 向けの JavaScript コードを書いているかのような形）で記述しておいて、ブラウザ上で利用できるような Javascript コードとして出力してくれるツール。 require() で利用しているモジュール群をすべてアナライズして、それらモジュールコードまですべて都合よい形で同梱してくれる。 リリース当初（３年くらい前）は Node で HTTP サーバを建ててブラウザ用 Javascript コードを返すような仕掛けから始まったはずで、そこから静的ファイルを出力する仕組みが追加されて、現在ではむしろ後者の方がメイン扱いになっている感じになっている。 そうなった背景として、Grunt の登場でその辺りの機能が有効的に参照利用できるようになったり、実際に Grunt を使っ
Happy Elements Labs: coffeescriptを好きな8つの理由と4つのトピック
はじめに エンジニアの@ryooo321です。 賛否両論ありますが、私はcoffeescriptには良い印象を持っており、積極的に使っています。 今回は私がcoffeescriptを好きな理由と、Source map、livescriptなどの周辺のトピックについても紹介できればと思います。 目次 ・coffeescriptを好きな8つの理由 ・4つのトピック -> Source mapでcoffeescriptのコードのままデバッグ -> 実行速度は早くはならない -> haskell風に書けるcoffeescript派生LiveScript -> ブラウザ実行 どんな方にcoffeescriptを薦めるのか coffeescriptを採用するかはメンバーのスキルやプロジェクトの風土などによりケースバイケースだと思っています。 javascriptで満足して
node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル | さくらたんどっとびーず
2011年はサーバサイド JavaScript の年！ サーバサイド JavaScript の本命は node.js！ ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery, Turbolinks and Asset Pipeline - Crazy Little Hacks
http://agilecatcloud.com/tag/coffeescript/
HTML5 Conference 2013に参加してきた！- その1 - basara669.com
Primer
Autify CEO 近澤 良のブログ
